<?php
global $mydata;
global $count;
global $thecorners;
global $block_corners;
global $block_number;
global $height;
global $bns;
global $block_count;
global $building_count;
global $the_building_list;
global $the_lon_lats;
global $current_date;
global $looklong;
global $looklat;
global $buildingIDs;
global $bldgIDcount;
$host = "localhost";
$user = "saintlouisdev";
$pass = "";
$db = "vcities";
$building_count=0;
function do_query($the_query){
        $host = "localhost";
        $user = "saintlouisdev";
        $pass = "";
         $db = "vcities";
        try {
           $hcon = pg_connect("host=$host dbname=$db port=5432 user=$user password=$pass");
           if (!$hcon) {    echo "Could not connect to server\n";  }
           $rs = pg_query($hcon, $the_query) or die("Cannot execute query: $query\n");
            pg_close($hcon);
            return pg_fetch_all($rs,$result_type = PGSQL_NUM);
        } catch (Exception $e) { echo 'Caught exception: '. $e->getMessage(). "\n";}
}


function get_the_heightanddate($bn) {
    $host = "localhost";
    $user = "saintlouisdev";
    $pass = "";
    $db = "vcities";
    //1118_1121_1124
    //echo $db;
    try {
        $hcon = pg_connect("host=$host dbname=$db port=5432 user=$user password=$pass");
        if (!$hcon) {
            echo "Could not connect to server\n";
        }
        $query = "select a.height, to_char(a.default_date, 'YYYY-MM-DD') from cesium_entities a, temporal_objects b where b.id=a.temporalobject_ptr_id and a.entity_type=0 and trim(both ' ' from b.block_number)='" . $bn . "'";
        // echo $query;
        $rs = pg_query($hcon, $query) or die("Cannot execute query: $query\n");
        pg_close($hcon);
        $row = pg_fetch_row($rs);
        return $row;
        // echo $height;
    } catch (Exception $e) {
        echo 'Caught exception: ', $e->getMessage(), "\n";
    }
}



try {
    $block_count=$argc-1;
    for ($ind = 0;$ind<$block_count;$ind++)$bns[$ind] = $argv[$ind+1];
    for ($ib = 0; $ib < $block_count; $ib++) {
        $height_currentdate = get_the_heightanddate($bns[$ib]);
        $height[$ib] = $height_currentdate[0];
        $current_date[$ib] = $height_currentdate[1];
    }
    $con = pg_connect("host=$host dbname=$db port=5432 user=$user password=$pass");
    if (!$con) {
        echo "Could not connect to server\n";
    }
    $the_clause = 'b.block_number=' . "'" . $bns[0] . "' ";
    for ($ib = 1; $ib < $block_count; $ib++) {
        $the_clause = $the_clause . 'or b.block_number=' . "'" . $bns[$ib] . "' ";
    }
    $the_clause = ' (' . $the_clause . ') ';
    $query1 = 'SELECT  b.block_number, a.building_id, c.value, c.is_valid, d.value, d.is_valid, a.points,e.ge_latitude,e.ge_longitude FROM saintlouisdev.geo_footprints a,  saintlouisdev.temporal_objects b, saintlouisdev.vc_dates c, saintlouisdev.vc_dates d,CesiumLatLong e  WHERE ' . $the_clause;
    $query2 = ' AND a.temporalobject_ptr_id=b.id  AND b.start_date_id=c.id AND b.end_date_id=d.id AND e.building_id=a.building_id;';
    $query = $query1 . $query2;
    $rs = pg_query($con, $query) or die("Cannot execute query: $query\n");
    pg_close($con);
    $i = 0;
    while ($row = pg_fetch_row($rs)) {
        //  $justpoints=substr($row[6],9);
        $tok1 = strtok(substr($row[6], 9), " ");
        $tok2 = strtok(" ");
        for ($j = 0; $j < 5; $j++) {
            $mydata[$i][$j] = $row[$j + 1];
        }
        $mydata[$i][5] = $tok1;
        $mydata[$i][6] = $tok2;
        $mydata[$i][7] = $row[7];
        $mydata[$i][8] = $row[8];;
        $i++;
    }
    $count = $i;
    $con = pg_connect("host=$host dbname=$db port=5432 user=$user password=$pass")
    or die("Could not connect to server\n");
    $query1 = 'select a.points from geo_blocks a ,temporal_objects b WHERE ';
    $query2 = ' and a.temporalobject_ptr_id=b.id';
    $query = $query1 . $the_clause . $query2;
//echo $query.'<br />';
    $rs = pg_query($con, $query) or die("Cannot execute query: $query\n");
    pg_close($con);
    for ($ib = 0; $ib < $block_count; $ib++) {
        $row = pg_fetch_row($rs);
        $tok1 = strtok(substr($row[0], 9), " ");
        $tok2 = strtok(" ");
        $output = shell_exec('java toLatLon ' . $tok1 . ' ' . $tok2);
        $ind = strrpos($output, ' ');
        $lat = substr($output, 0, $ind);
        $lon = substr($output, ($ind + 1), -1);
        $thecorners[$ib] = $lon . ',' . $lat;
        $firstcorner = $thecorners[$ib];
        for ($i = 0; $i < 3; $i++) {
            $tok1 = strtok(",");
            $tok1 = strtok(" ");
            $tok2 = strtok(" ");
            $output = shell_exec('java toLatLon ' . $tok1 . ' ' . $tok2);
            $ind = strrpos($output, ' ');
            $lat = substr($output, 0, $ind);
            $lon = substr($output, ($ind + 1), -1);
            $thecorners[$ib] = $thecorners[$ib] . ',' . $lon . ',' . $lat;
        }
        $thecorners[$ib] = $thecorners[$ib] . ',' . $firstcorner;
        // echo  $thecorners[$ib]."\n";
    }
} catch (Exception $e) {
    echo 'Caught exception: ', $e->getMessage(), "\n";
}
?>
<!doctype html>
<html lang="en">
<head>
<base href="https://vcities.umsl.edu/Cesium1.72/Apps/Sandcastle/vcities/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Virtual Cities</title>
<script src="../../../Build/Cesium/Cesium.js"></script>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<style>@import url(../../../Build/Cesium/Widgets/widgets.css);</style>
 <link rel="stylesheet" href="./vcities.css">
<script type="text/javascript" src="./vcitiesF.js"></script>

<script type="text/javascript">
if (typeof require === "function") {
    require.config({
                   baseUrl : '../../../Source',
                   waitSeconds : 120
                   });
}

function loadconfirm(the_selected) {
    // parent.frames['Big'].location.href=links[the_selected.id];
}

function its_loaded() {
    //alert("Page functionality Available");
    var x= document.getElementById("tour_state"); 
    x.style.visibility = "hidden"; 
    x.innerHTML = "  The Control  ";
    x=document.getElementById("doc_view");
    x.innerHTML = " Discover Building/Site History ";
    x=document.getElementById("the_looper");
    x.innerHTML="    Loop Site    ";
}
</script>

</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html"  onload="its_loaded()">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize">
</div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar">
</div>

<script id="cesium_sandcastle_script">
var name_desc=[];

function startup(Cesium) {
    'use strict';
    //Sandcastle_Begin
    gCesium=Cesium;
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZjRjMjQ1OS1hNDI4LTQ0NmYtYTczYy03NGQ3NjMzYTVjZDYiLCJpZCI6NDY0OSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTM2MDM4OH0.NCvTrd2_i3tadjyL-jr1ZN4Y4VbwydskfwWefpx-xJk';
    var viewer = new Cesium.Viewer('cesiumContainer',{
                                   imageryProvider : Cesium.createWorldImagery({
                                                                               style : Cesium.IonWorldImageryStyle.AERIAL
                                                                               }),
                                   baseLayerPicker : false,infoBox : false
                                   });
    gviewer=viewer;
    var options = {
        camera : viewer.scene.camera,
        canvas : viewer.scene.canvas
    };
    //////////////////////////
    viewer.scene.canvas.addEventListener('click', function(e){
                                         var clicked_index;
                                        for(clicked_index=0;clicked_index<all_buildings.length;clicked_index++){
                                        if (all_buildings[clicked_index]==gviewer.selectedEntity)break;
                                        }
                                        var clicked_desc=String(all_buildings[clicked_index].description);
                                        if(clicked_desc.includes("This building has no history entries")){this_history=false;}else{this_history=true;};
                                        gviewer.selectedEntity.name=all_buildings[clicked_index].name; 
                                        gviewer.selectedEntity.description=all_buildings[clicked_index].description;
                                        document.getElementById("tour_state").style.visibility = "hidden";
                                        if(in_fullC){
                                        document.getElementById("the_data").style.display="block";
                                        }                  
                                        document.getElementById("the_data").innerHTML =all_buildings[clicked_index].name; //description ;
                                        no_clicks_yet=false;                                      
                                        // loadconfirm(viewer.selectedEntity);   // gecl(viewer.selectedEntity); 
                                        parent.SiteClick(gviewer.selectedEntity.description);
                                        if(first_click){
                                        first_click=false;
                                        }else{
                                        selected_holder.description=description_holder;
                                        }                                       
                                        selected_holder=gviewer.selectedEntity;                  
                                        description_holder=gviewer.selectedEntity.description;
                                        if(in_fullC){ 
                                        if(!this_history){
                                        document.getElementById("doc_view").style.visibility = "hidden";
                                        }else{
                                        document.getElementById("doc_view").style.visibility = "visible";
                                        }
                                        }
                                        if(!this_history){
                                        document.getElementById("the_data").innerHTML="This Building has no History Available";
                                        }else{
                                        var n1 = clicked_desc.indexOf("<h2>");
                                        var n2 = clicked_desc.indexOf("</h2>");
                                        document.getElementById("the_data").innerHTML =" ".concat(clicked_desc.substring(n1+4,n2)).concat(" "); 
                                        }
                                        //document.getElementById("tour_state").innerHTML = "Pause Loop" ;
                                        document.getElementById("the_looper").style.visibility = "visible";
                                        stop_loop();
                                        }
                                        );
    ///////////////////////////////
    viewer.scene.globe.depthTestAgainstTerrain = true;
        <?php
        $host = "localhost";
        $user = "saintlouisdev";
        $pass = "";
        $db = "vcities";
        $block_number=$bns[0];
        $start_date="1800-01-01";
        $end_date="1950-01-01";
        $temporalobject_ptr_id=0;
        $bldgIDcount=0;
        $the_header;
        function tweak_query($the_tweak){
            $host = "localhost";
            $user = "saintlouisdev";
            $pass = "";
            $db = "vcities";
            if ($the_tweak==1) {
                $the_query = "select bldg_number, model, block_number,heading  from  cesiumtweaks where tweak=1";
            } else {
                $the_query = "select bldg_number, model, block_number,lon,lat,heading,tweak from  cesiumtweaks where tweak=2";
            }
            try {
                $hcon = pg_connect("host=$host dbname=$db port=5432 user=$user password=$pass");
                if (!$hcon) {
                    echo "Could not connect to server\n"; return;
                }
                $rs = pg_query($hcon, $the_query) or die("Cannot execute query: $query\n");
                pg_close($hcon);
                return pg_fetch_all($rs,$result_type = PGSQL_NUM);
            } catch (Exception $e) { echo 'Caught exception: '. $e->getMessage(). "\n";}
        }

        ///////////////////
        $this_array=tweak_query(1);
        $max = count($this_array);
        for ($j = 0; $j < ($max-1);$j++) {
            $this_block_number=$this_array[$j][2];
            $the_header=$this_array[$j][3];
            $this_model=$this_array[$j][1];
            $in_the_block=0;
            for ($i= 0; $i< ($block_count); $i++) {
                if ($this_block_number==$bns[$i]) $in_the_block=1;
            };
            if ($in_the_block==1) {
                $building_id=$this_array[$j][0];
                //  $the_header=$this_array[$j][3];
                $buildingIDs[$bldgIDcount]=$building_id;
                $bldgIDcount++;
                $query1 ='SELECT a.building_id,a.ge_latitude,a.ge_longitude,a.ge_heading,b.title, b.narrative,b.caption,a.temporalobject_ptr_id FROM saintlouisdev.geo_meshes a,saintlouisdev.the_histories b ' ;  
                $query2 ='where a.building_id='.$building_id.' and b.temporal_object_id='.$building_id;
                $query = $query1. $query2;
                $con = pg_connect("host=$host dbname=$db port=5432 user=$user password=$pass");
                if (!$con) {
                    echo "Could not connect to server\n";
                }
                $rs = pg_query($con, $query) or die("Cannot execute query: $query\n");
                pg_close($con);
                $row = pg_fetch_row($rs);
                if ( $row==NULL) {
                    $query ='SELECT   building_id,ge_latitude,ge_longitude,ge_heading,temporalobject_ptr_id FROM saintlouisdev.geo_meshes where building_id='.$building_id;
                    $con = pg_connect("host=$host dbname=$db port=5432 user=$user password=$pass");
                    if (!$con) {
                        echo "Could not connect to server\n";
                    }
                    $rs = pg_query($con, $query) or die("Cannot execute query: $query\n");
                    pg_close($con);
                    $row = pg_fetch_row($rs);
                    $narrative="no history available";
                    $the_name="not known";
                    $temporalobject_ptr_id=$row[4];

            } else {
              //  $narrative=str_replace("'","'",$row[5]);
             //   $narrative = str_replace("http://12.234.174.20","http://vcities.umsl.edu",$narrative);
             //   $narrative = str_replace("http://vcities.ite-stl.org","http://vcities.umsl.edu",$narrative);
              //  $description="'<html><body><center><h2>".$row[4]."</h2><h3>Building ".$row[0]."</h3></center>".$narrative."<body></html>'";
               // $description= str_replace("\r", "", $description);
             //   $description = str_replace("\n", "", $description);
             //   $temporalobject_ptr_id=$row[7];
                $the_name=$row[4];
            }
            $the_lon=$row[2];
            $the_lat=$row[1];
            $the_head=$row[3];
            $the_id=$row[0];
            $query1="SELECT a.id, a.description, b.value,c.value FROM saintlouisdev.temporal_objects a, saintlouisdev.vc_dates b, saintlouisdev.vc_dates c  where ";
            $query2="  a.id=".$temporalobject_ptr_id."  and a.start_date_id=b.id and a.end_date_id=c.id";
            $query=$query1.$query2;
            $con = pg_connect("host=$host dbname=$db port=5432 user=$user password=$pass");
            if (!$con) {
                echo "Could not connect to server\n";
            }
            $rs = pg_query($con, $query) or die("Cannot execute query: $query\n");
            pg_close($con);
            $row = pg_fetch_row($rs);
            $start_date=$row[2];
            $end_date=$row[3];
     //       $description="'<html><body><center><h2>".$row[1]."</h2></center>".$narrative."<body></html>'";
     //       $description= str_replace("\r", "", $description);
      //      $description = str_replace("\n", "", $description);    
            echo "var position=Cesium.Cartesian3.fromDegrees(".$the_lon.",".$the_lat.",0.0);\n"; 
            //position = Cesium.Cartesian3.fromDegrees(-90.18415135202939,38.624735103,0);
            $this_head=$the_head;
            if ( $the_header != "361" ) {
                $this_head=$the_header;
            }
            echo  "var  heading = Cesium.Math.toRadians(".$this_head.");\n"; 
            echo  "var roll=0.0;\n";
            echo  'var name="'.$the_name.'"'.";\n"; 
            $description= file_get_contents('http://vcities.umsl.edu/vcity/editor/buildingPage/'.$the_id.'/');
            $description=str_replace("'","'", $description);
            $description= str_replace("\r", "", $description);
            $description = str_replace("\n", "", $description);
             echo "var description='<html><body>".$description."<body></html>';\n";
            echo   "name_desc.push([name,description]);\n";
            echo  "var  hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);\n";
            echo  "var   orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);\n";
            echo   "var building".$the_id." = viewer.entities.add({\n";
            echo   '                           id:'.$the_id.",\n";
            echo   "                           name: name ,\n";
            echo   "                           description: description ,\n";
            echo   '                           availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({'."\n";
            echo   '                                           start : Cesium.JulianDate.fromIso8601("'.$start_date.'")'.",\n";
            echo   '                                           stop : Cesium.JulianDate.fromIso8601("'.$end_date.'")'.",\n";
            echo   '                                               })]),'."\n";
            echo   "                                  position: position,\n";
            echo   "                                  orientation: orientation,\n";
            echo  '                                   model:{';
            echo  '     uri:"./models/block_8/'. $this_model.'"'."\n";
            echo "                                    }\n";
            echo "                                    }\n";
            echo "                                  );\n";
            echo   'all_buildings.push(building'.$the_id.'); <!--This Buildings index='.$building_count." --> \n";
            $building_count++;
            echo   'lon_lat_heights["building'.$the_id.'"]=['.$the_lon.','.$the_lat.',0.0];'."\n";
            echo   'bldg_lon_lats.push(['.$the_lon.','.$the_lat.']);'."\n";
            echo   'positions.push(Cesium.Cartographic.fromDegrees('.$the_lon.','.$the_lat.'));'."\n";
        }
    }
    
    $the_tweaks=tweak_query(2);
    $tmax=count($the_tweaks);
    $buildinglist = array();
    $lon_lats = array();
    $j = 0;
    echo   "\n";
    for ($i = 0; $i < $count; $i++) {
        $bldg = $mydata[$i][0];
        $bldg_inlist=FALSE;
        for ($bldid=0;$bldid<$bldgIDcount;$bldid++) {
            if ($buildingIDs[$bldid]==$bldg) $bldg_inlist=TRUE;
            if ($bldg_inlist)break;
        }
        if (!$bldg_inlist) {
            $buildingIDs[$bldgIDcount]=$bldg;$bldgIDcount++;
            $this_url = $bldg + 2;
            $link = './models/all/' . $this_url . '.gltf';
            if (file_exists($link)) {
                $query1="SELECT a.title, a.narrative FROM saintlouisdev.the_histories a, saintlouisdev.the_buildings b ";
                $query2="where a.temporal_object_id=b.building_id AND b.building_id=".$bldg;
                $query=$query1.$query2;
                $con = pg_connect("host=$host dbname=$db port=5432 user=$user password=$pass");
                $rs = pg_query($con, $query) or die("Cannot execute query: $query\n");
                $rows = pg_fetch_all($rs);
                pg_close($con);
                $narrative="";
                $description='<html><body><center><h4>Building '.$bldg.'</h4></center><body></html>';
              //  if (count($rows)==1) {
                  if (!is_null($rows)) {
                    $title=str_replace("\n", "",$rows[0]['title']);
                    $title=str_replace("'","'",$title);
                    $narrative=str_replace("'","'",$rows[0]['narrative']);
                    // $narrative=$rows[0]['narrative']; 
                    $description='<html><body><center><h4>'.$title.'</h4><h5>Building '.$bldg.'</h5></center>'.$narrative.'<body></html>';
                    $description= str_replace("\r", "", $description);
                    $description = str_replace("\n", "", $description);
                }
                $istweeked=array(0,0);
                for($j=0;$j<$tmax;$j++){
                    if($bldg==$the_tweaks[$j][0]){
                        $istweeked=array(1,$j);
                        $mydata[$i][8]=$the_tweaks[$j][3];
                        $mydata[$i][7]=$the_tweaks[$j][4];
                     }
		        }
                echo "var position=Cesium.Cartesian3.fromDegrees(".$mydata[$i][8] .",".$mydata[$i][7] .",0.0);\n";
                if($istweeked[0]==1){
                         echo  "var  heading = Cesium.Math.toRadians(".$the_tweaks[$istweeked[1]][5] .");\n"; 
                         echo  "var roll=0.0;\n";
                         echo  "var  hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);\n";
                         echo  "var   orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);\n";
                         $link = "./models/all/".$the_tweaks[$istweeked[1]][1]; 
                }
                echo  'var name="Building '.$bldg.'";'."\n";
                $description= file_get_contents('http://vcities.umsl.edu/vcity/editor/buildingPage/'.$bldg.'/');
                $description=str_replace("'","'", $description);
                 $description= str_replace("\r", "", $description);
                 $description = str_replace("\n", "", $description);
                 echo "var description='<html><body>".$description."<body></html>';\n";
                echo   "name_desc.push([name,description]);\n";
                echo "var building" . $bldg . " = viewer.entities.add({\n";
                echo '                           id:' . $bldg .",\n";
                echo   "                         name: name ,\n";
                echo   "                         description: description ,\n";
                echo "                           availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({\n";
                echo '                                                      start : Cesium.JulianDate.fromIso8601("' . $mydata[$i][1] . '"),' . "\n";
                echo '                                                      stop : Cesium.JulianDate.fromIso8601("' . $mydata[$i][3] . '")' . "\n";
                echo "                                                })]),\n";
                echo "                                  position:  position,\n";
                if($istweeked[0]==1){
                     echo "                                  orientation: orientation,\n";
                      }
                echo "                                  model:{uri:'".$link . "'" ."}\n";
                echo "                                  }\n";
                echo "                                 );\n";
                //  echo 'building'.$bldg.'.description='.'"This is Building '.$bldg.'"'.";\n";
                echo 'building_list[' . $j . ']=building' . $bldg . ";\n";
                $buildinglist[$j] = 'building' . $bldg;
                $lon_lats[$buildinglist[$j]] = preg_replace("/\r|\n/", "", $mydata[$i][8]) . ',' . $mydata[$i][7];
                echo   'all_buildings.push(building'.$bldg.'); <!--This Buildings index='.$building_count." --> \n";
                $building_count++;
                echo 'lon_lat_heights["' . $buildinglist[$j] . '"]=[' . $lon_lats[$buildinglist[$j]] . ',' . $height[0] . "];\n";
                echo 'bldg_lon_lats.push(['.$mydata[$i][8] . ',' . $mydata[$i][7].']);'."\n";
                echo "positions.push(Cesium.Cartographic.fromDegrees(" . $mydata[$i][8] . ',' . $mydata[$i][7] . "));\n";
                $j++;
            }
        }
    }
    $count = $j;
    $the_building_list = $buildinglist;
    $the_lon_lats = $lon_lats;
      echo 'bldg_count=' . $building_count . ";\n";
    // echo 'viewer.clock.currentTime =Cesium.JulianDate.fromIso8601("' . $current_date[0] . '");' . "\n";
    echo 'viewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1900-01-01T00:00:00Z");' . "\n";
    
    ?>
    ///////////////////////////////////////////////////
     ///////////// Set up clock and timeline.
    viewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1930-01-01T00:00:00Z");
    viewer.clock.shouldAnimate = false; // make the animation play when the viewer starts
    viewer.clock.startTime = Cesium.JulianDate.fromIso8601("1830-01-01T00:00:00Z");
    viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2000-01-01T00:00:00Z");
    viewer.clock.multiplier = 1; // sets a speedup
    viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range
    // lookAt
    lheading=270.;llong=-90.18527699999999;llat=38.624388;lpitch=-10.0;
    infopage="http://www.citytoriver.org/history/";
    elong=bldg_lon_lats[0][0];nlat=bldg_lon_lats[0][1];wlong=bldg_lon_lats[0][0];slat=bldg_lon_lats[0][1];
    compute_nsc_long_lat();
    center = Cesium.Cartesian3.fromDegrees( clong,clat );      //-90.21437530335254,38.637056502179554);
    heading = Cesium.Math.toRadians(-10.0);
    lheading=heading;
    pitch = Cesium.Math.toRadians(-10.0);
    if (crange<100.0)crange=100.0;
    range = 1.2*crange;
    startheading=heading;startpitch=pitch;startrange= Math.round(range);startcenter=center;
    viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range)); 

    //Sandcastle_End
    Sandcastle.finishedLoading();
    //box_it();
}
if (typeof Cesium !== "undefined") {
    startup(Cesium);
} else if (typeof require === "function") {
    require(["Cesium"], startup);
}

function HideIt() {
    document.getElementById("the_data").style.display = "none"; 
}

function Hide_the_data() {
    document.getElementById("the_data").style.display = "none"; 
}
function Show_the_data() {
    document.getElementById("the_data").style.display = "block";  x=0;  
} 

</script>
<div class="toolbar-left">
<table>
<tr>
<td><font class="button4"><b>  Present Range </b>
<span id="range_value">
<script>
document.write(Math.round(crange));
</script>
</span>
<b>Meters  </b></font>
</td>
<td>
<div id="this_try">
<select class="button2" id="WhereTo" onchange="gothere()">
<option  value="-2"><b><font color="yellow">Buildings and Tours</font></b></option>
<!--option value="4001"><b>The Old Cathedral - History</b></option>
<option  value="6"><b>The Old Courthouse-1919</b></option> 
<option  value="342"><b>The Arch-1965</b></option>
<option  value="4002">Other Notable Buildings</b></option>
<option  value="3"> Old Rock House-1932</b></option>
 <option value="3000"><b>Tour Wharf Street- 1925</b></option> 
 <option value="3001"><b>Tour 3rd Street - 1920 </b>
 </option> <option  value="-1"><b><font color="yellow">Overview</font</b></option -->
</select>
</div>
</td>
<td>
<div id="the_data"  style="font-size: 16px;color: black;font-weight: bold;text-align: center;display:block;height:20px;background:#FFFFFF;border:3px outset blue;pointer-events:none">
The Saint Louis Riverfront
</div>
</td>
</tr>
<tr>
<td>
<input type="range" min="50" max="500" value="150" class="button1" id="myRange">
</td>
</tr>
<tr>
<td><button id="doc_view" class="button1" onclick="open_div();">       Loading     </button></td>
<!-- td><button  id="tour_state" class="button1" onclick="which_anima();">  Loading  </button --></td>

</tr>
<tr>
<td><button id="the_looper"class="button1" onclick="do_loop();">    Loading 
Site    </button><button  id="tour_state" class="button1" onclick="which_anima();">  Loading  </button></td>


</tr><!-- tr><td> </td></tr> <tr><td><button id="the_help"class="button3" onclick="help()">Using This Page</button></td></tr -->
</table>
<!-- ;; overflow-y: scroll -->
</div>
<script>
var slider = document.getElementById("myRange");
slider.oninput = function() {
    var this_heading=gviewer.camera.heading;
    var this_pitch=gviewer.camera.pitch;
    range=slider.value;
    gviewer.camera.lookAt(center, new gCesium.HeadingPitchRange(this_heading, this_pitch, range));
    document.getElementById("range_value").innerHTML = range;
}
var the_stepper;
var present_count=0; //looper and tourer count 
var div_open=false;


function open_div(){
    if (no_clicks_yet) {
        alert("Please make a building selection first.");
    } else {
        div_open=true;
        parent.shift_divs();
        gviewer.selectedEntity=selected_holder;
        in_fullC=false;
        document.getElementById("the_data").style.display="none";
        document.getElementById("doc_view").style.visibility = "hidden";
    }
}

function close_div(){
    console.log("why not?");
    div_open=false;
    in_fullC=true;
    // parent.shift_divs();
    gviewer.selectedEntity=selected_holder;
    document.getElementById("the_data").style.display="block";
    if (this_history) {
        document.getElementById("doc_view").style.visibility = "visible";
    } else {
        document.getElementById("the_data").innerHTML="This Building has no History Available";
    }
    // console.log("why not?");
}
function help(){
    window.open("https://vcities.umsl.edu/StLouis/PageHelp.html");
}
//////////////////////////looper//////////////////////

var the_loop;
var in_the_loop;
var in_tour=false;
var anima_loop=false;
var anima_tour=false;
var the_tour_number;
function looper(x){
    var loop_heading =lheading;gCesium.Math.toRadians(lheading);
    lheading=lheading+x;
    gviewer.camera.lookAt(center, new gCesium.HeadingPitchRange(loop_heading, pitch, range));
}
function loopstep(){
    looper(.003);
}
// call a  tour step in Cesium

function stop_loop(){
    if (in_the_loop) {
        clearInterval(the_loop);
        in_the_loop=false;
    }
}
//The javascript  timing layer on top of Cesium
function loop_it(){
    if (in_tour)stop_tour();
    in_the_loop=true;
    console.log(lheading);
    the_loop=setInterval(loopstep, 100);
    // }
}
function do_loop(){
    anima_loop=true;
    clearInterval(the_loop);
    document.getElementById("tour_state").style.visibility = "visible";
    // in_the_loop=false;
    if (anima_tour) {
        stop_tour();
    }
    if (!in_the_loop) {
        document.getElementById("tour_state").innerHTML = "Pause Loop" ;
        document.getElementById("the_looper").style.visibility = "hidden";
        document.getElementById("WhereTo").style.visibility = "hidden";
        loop_it();
    } else {
        document.getElementById("tour_state").innerHTML = "Resume Loop" ;
        //    document.getElementById("the_looper").style.visibility = "visible";
        document.getElementById("WhereTo").style.visibility = "visible";
        stop_loop(); 
    }
}
function step_it(){
    in_tour=true;
    document.getElementById("tour_state").innerHTML = "Pause Tour" ;
    the_stepper=setInterval(stepper, 100);

}
function stop_step(){
    if (in_tour) {
        clearInterval(the_stepper);
        in_tour=false;
    }
}
function stop_tour(){
    in_tour=false;
    clearInterval(the_stepper);
    the_stepper=null;
    anima_tour=false;
}
function do_tour(){
    anima_loop=false;
    anima_tour=true;
    document.getElementById("tour_state").style.visibility = "visible";
    if (!in_tour) {
        document.getElementById("tour_state").innerHTML = "Pause Tour" ;
        document.getElementById("the_looper").style.visibility = "hidden";
        document.getElementById("WhereTo").style.visibility = "hidden";
        in_tour=true;
        the_stepper=setInterval(stepper, 100);
    } else {
        document.getElementById("tour_state").innerHTML = "Resume Tour" ;
        document.getElementById("the_looper").style.visibility = "hidden";
        document.getElementById("WhereTo").style.visibility = "visible";
        clearInterval(the_stepper);
        in_tour=false; 
    }
}
function which_anima(){
    if (anima_loop) {
        do_loop();
    } else if (anima_tour) {
        do_tour();
    }
}

/////////////////visits and tours/////////////////////
var a_tour=[];  // list of entities to view
var a_tour_view=[]; //list of entity positions and counts associated with the tour
var a_tour_time;   //time tour takes place.
var all_tours=[]; 
var all_views=[]
var all_tour_POIs=[];
var all_times=[];
var in_tour=false;
var total_count;    //=1820;
var start_long;
var end_long;
var start_lat;
var end_lat;
var tour_heading;
var tour_pitch;
var tour_range;
var this_tour=[]; 
var tour_POIs=[];
var tour_length;
var last_name;
var last_description;
var first_name;
var first_description;
var final_name;
var final_description;
var this_name;
var this_description;
var name_holder;
var this_position;
function close_doc_window(){
    document.getElementById("doc_view").style.visibility = "visible";
}
/////////////////////////////////// Tour and Selection Edits////////////////////////////////
var the_options=[];
the_options.push('<select class="button2" id="WhereTo" onchange="gothere()"><option  value="-2"><b><font color="yellow">Buildings and Tours</font></b></option><option value="4001"><b>The Old Cathedral History</b></option><option  value="6"><b>The Old Courthouse-1919</b></option><option  value="342"><b>The Arch-1965</b></option><option  value="4002"> Other Notable Buildings</b></option><option value="3000"><b>Tour Wharf Street </b></option> <option value="3001"><b>Tour 3rd Street </b></option><option  value="-1"><b><font color="yellow">Overview</font</b></option></select>');
the_options.push('<select class="button2" id="WhereTo" onchange="gothere()"><option  value="-2"><b><font color="yellow">Old Cathedral - Dates</font></b></option> <option  value="340"><b>1770</b></option><option  value="338"><b>1776</b></option><option  value="5"><b>1834-1939</b></option> <option  value="341"><b>1961</b></option> <option  value="4000"><b><font color="yellow">Back</font</b></option></select>');
the_options.push('<select class="button2" id="WhereTo" onchange="gothere()"><option  value="-2"><b><font color="yellow">The Buildings</font></b></option><option  value="3"> Old Rock House-1932</b></option><option value="298"><b>Federal Fur & Wool-1900</b></option> <option  value="332"><b>The Barnum Hotel</b></option><option  value="329"><b>The National Hotel-1835</b></option><option  value="328"><b>The National Hotel-1860</b></option><option  value="201"><b>The Gay Building</b></option> <option  value="191"><b>The Times Building-1870</b></option><option  value="39"><b>The Times Building-1907</b></option> <option  value="4000"><b><font color="yellow">Back</font</b></option></select>');

function which_options(x){
    document.getElementById("this_try").innerHTML =the_options[x]; 
}
function back(){which_options(0);}
function gothere() {
    var e = document.getElementById("WhereTo");
    var the_bldg = e.options[e.selectedIndex].value;
    if (the_bldg==-2) {return}
    document.getElementById("the_looper").style.visibility = "visible";
    document.getElementById("tour_state").style.visibility = "hidden";
    if (the_bldg>3999) {
        var sub_options=the_bldg-4000;
        which_options(sub_options);
        /*    if (the_bldg==4001) {
                which_options(1);        
            } else if (the_bldg==4000) {
                which_options(0);
            } else if (the_bldg==4002) {
                which_options(2);
            }*/
        return;
    }
    if (anima_tour) {
        //  reset_tour(the_tour_number);
        in_tour=false;
        clearInterval(the_stepper);
        the_stepper=null;
        anima_tour=false;
    }
    if (anima_loop) {
        anima_loop=false;
        clearInterval(the_loop);
        in_the_loop=false;
    }
    document.getElementById("tour_state").innerHTML = "  The Control  " ;
    present_count=0;
    clearInterval(the_stepper);
    //       var e = document.getElementById("WhereTo");
    //       var the_bldg = e.options[e.selectedIndex].value;
    var this_pitch = gCesium.Math.toRadians(-10.0); //Default
    // var the_target;
    if (the_bldg==-1) {
        // heading=7.0;
        // lheading=heading;
        //  range=171.0;
        document.getElementById("tour_state").style.visibility = "hidden";
        document.getElementById("myRange").value=startrange;
        document.getElementById("range_value").innerHTML = startrange;
        center=Cesium.Cartesian3.fromDegrees( clong,clat );
        gviewer.selectedEntity=null;
        gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1900-01-01T00:00:00Z");
        gviewer.camera.lookAt(startcenter, new gCesium.HeadingPitchRange(startheading, startpitch, startrange));
        parent.SiteClick("<html><bocy><center><h1>The Saint Louis Riverfront</h1></center></body></html>");
        first_click=true;
        in_fullC=true;
        div_open=true;
        selected_holder=null;
        document.getElementById("the_data").innerHTML="The Saint Louis Riverfront";
        // parent.full_screen1();
    } else {
        if (the_bldg<3000) {
            document.getElementById("tour_state").style.visibility = "hidden";
            div_open=true;
            in_fullC=true;
            this_name=all_buildings[the_bldg].name; 
            this_description=all_buildings[the_bldg].description;
            this_position=Cesium.Cartesian3.fromDegrees(bldg_lon_lats[the_bldg][0],bldg_lon_lats[the_bldg][1],0);
            gviewer.selectedEntity=all_buildings[the_bldg];
            document.getElementById("the_data").style.display="none";
            document.getElementById("the_data").innerHTML =all_buildings[the_bldg].name; //description ;
            parent.SiteClick(this_description);
            if (first_click) {
                first_click=false;
            } else {
                selected_holder.description=description_holder;
            }                                       
            selected_holder=all_buildings[the_bldg];                  
            description_holder=this_description;
        }
        if (!in_fullC) {
            console.log("not full C");
            gviewer.selectedEntity=selected_holder;
        }
        if (the_bldg==338) {
            heading=Cesium.Math.toRadians(45.0);
            lheading=heading;
            range=50.0;
            pitch = Cesium.Math.toRadians(-10.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.187285,38.624034,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1778-01-01T00:00:00Z");

        }
        if (the_bldg==340) {
            heading=Cesium.Math.toRadians(45.0);
            lheading=heading;
            range=40.0;
            pitch = Cesium.Math.toRadians(-10.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.187285,38.624034,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1771-01-01T00:00:00Z");

        }
        if (the_bldg==3) {
            heading=4.905037599462777;
            lheading=heading;
            range=50.0;
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.18414,38.624723,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1932-01-01T00:00:00Z")
        } else if (the_bldg==5) {
            heading=Cesium.Math.toRadians(-10.0);
            lheading=heading;
            range=150.0;
            pitch = Cesium.Math.toRadians(-10.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.187285,38.624034,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1860-01-01T00:00:00Z");
        } else if (the_bldg==2) {
            heading=4.905037599462777;
            lheading=heading;
            range=50.0;
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.18414,38.624723,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1819-01-01T00:00:00Z");
        } else if (the_bldg==341) {
            heading=Cesium.Math.toRadians(-10.0);
            lheading=heading;
            range=150.0;
            pitch = Cesium.Math.toRadians(-10.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.187285,38.624034,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1961-01-01T00:00:00Z");
        } else if (the_bldg==6) {
            heading=1.7457796260818064;
            lheading=heading;
            range=300.0;
            pitch = Cesium.Math.toRadians(-15.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.1893056966,38.625056698,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1919-01-01T00:00:00Z");
        } else if (the_bldg==298) {
            heading=1.7957796260818064;
            lheading=heading;
            range=18;   <!--50.0; -->
            this_pitch = Cesium.Math.toRadians(-5.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.1849248503835,38.6247988064905,7.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1900-01-01T00:00:00Z");
        } else if (the_bldg==332) {
            heading=Cesium.Math.toRadians(-10.0);;
            lheading=heading;
            range=140.0; 
            this_pitch = Cesium.Math.toRadians(-18.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.1866329363722,38.6240353638296,7.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1860-01-01T00:00:00Z");
        } else if (the_bldg==328) {
            heading=Cesium.Math.toRadians(170.0);;
            lheading=heading;
            range=70.0;
            pitch = Cesium.Math.toRadians(-18.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.1877974897737,38.6248000881992,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1860-01-01T00:00:00Z");
        } else if (the_bldg==329) {
            heading=Cesium.Math.toRadians(170.0);;
            lheading=heading;
            range=70.0;
            pitch = Cesium.Math.toRadians(-18.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.1877974897737,38.6248000881992,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1835-01-01T00:00:00Z");
        } else if (the_bldg==201) {
            heading=Cesium.Math.toRadians(170.0);;
            lheading=heading;
            range=155.0;
            pitch = Cesium.Math.toRadians(-18.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.1859822154191,38.6259900824625,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1870-01-01T00:00:00Z");
        } else if (the_bldg==39) {
            heading=Cesium.Math.toRadians(90.0);;
            lheading=heading;
            range=170.0;
            pitch = Cesium.Math.toRadians(-18.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.1894674444491,38.6264585015218,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1906-01-01T00:00:00Z");
        } else if (the_bldg==191) {
            heading=Cesium.Math.toRadians(90.0); 
            lheading=heading;
            range=170.0;
            pitch = Cesium.Math.toRadians(-18.0);
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.1894674444491,38.6264585015218,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1890-01-01T00:00:00Z");
        } else if (the_bldg==342) {
            heading= Cesium.Math.toRadians(290.0);  //1.7957796260818064;
            lheading=heading;
            range=500.0;
            pitch = Cesium.Math.toRadians(-35.0);
            this_pitch=pitch;
            document.getElementById("myRange").value=range;
            document.getElementById("range_value").innerHTML = range;
            center=Cesium.Cartesian3.fromDegrees(-90.18519780521553,38.624640301242944,0.0);
            gviewer.clock.currentTime =Cesium.JulianDate.fromIso8601("1967-01-01T00:00:00Z");
        }
        if (the_bldg<3000) {
            // console.log(center);
            // console.log(this_position);
            gviewer.camera.lookAt(center, new gCesium.HeadingPitchRange(lheading, pitch, range));//the center of the view, maybe not the building position.
            document.getElementById("doc_view").style.visibility = "hidden";
            open_div();
            return;
        }
        if (the_bldg>=3000&&the_bldg<4000) {
            anima_tour=true;
            document.getElementById("tour_state").style.visibility = "visible";
            var tour_val=the_bldg-3000;
            present_count=0;
            the_tour_number=tour_val;
            document.getElementById("the_looper").style.visibility = "hidden";
            document.getElementById("WhereTo").style.visibility = "hidden";
            document.getElementById("doc_view").style.visibility = "hidden";
            gviewer.selectedEntity=all_buildings[this_tour[tour_val]];
            open_div();
            take_tour(tour_val);
        }
    }
}
a_tour=[3,42,77,278];
all_tours.push(a_tour);
all_tour_POIs.push([10,150,325,530]);
a_tour_view=[-90.18414,-90.1844593729466,38.624723,38.6241738013305,4.905037599462777,Cesium.Math.toRadians(-10.0),50.0,550];
all_views.push(a_tour_view);
all_times.push(Cesium.JulianDate.fromIso8601("1925-01-01T00:00:00Z"));
a_tour=[];
a_tour=[68,292,272,250,213,301,211,208];
all_tours.push(a_tour);
all_tour_POIs.push([4,110,190,290,380,550,600,670]); 
a_tour_view=[-90.1869645105869,-90.1875486468281,38.6263692671663,38.6249205138303,121,Cesium.Math.toRadians(-10.0),50.0,700];
all_views.push(a_tour_view);
all_times.push(Cesium.JulianDate.fromIso8601("1920-01-01T00:00:00Z"));
////////////////////////////////////End Edits/////////////////////////////

function set_tour_parms(x){
    this_tour=all_tours[x];
    gviewer.clock.currentTime =all_times[x];
    start_long=all_views[x][0];
    end_long=all_views[x][1];
    start_lat=all_views[x][2];
    end_lat=all_views[x][3];
    tour_heading=all_views[x][4];
    tour_pitch =all_views[x][5];
    tour_range =all_views[x][6];
    total_count=all_views[x][7];
    tour_POIs=all_tour_POIs[x];
    tour_length=tour_POIs.length;
}

function take_tour(tour_val){
    the_stepper=null;
    in_tour=true;
    anima_tour=true;
    set_tour_parms(tour_val);
    parent.SiteClick(all_buildings[this_tour[0]].description);
    document.getElementById("tour_state").innerHTML = "Pause Tour" ;
    //  console.log(document.getElementById("tour_state").style.visability);
    the_stepper=setInterval(stepper, 100);
}
function highlight(x){
    gviewer.selectedEntity=all_buildings[this_tour[x]];
    parent.SiteClick(all_buildings[this_tour[x]].description);
}

function stepper(){ 
    var this_ratio=(present_count-100)/2000;
    var increment_long=end_long-start_long;
    var increment_lat=end_lat-start_lat;
    var this_long;
    var this_lat;
    var tour_center;
    var ipoi;
    if (present_count<50) {
        this_long=start_long;
        this_lat=start_lat;
        if (present_count==tour_POIs[0]) {
            console.log("position 0");
            highlight(0);
        }
    } else if (present_count<total_count) {
        this_ratio=(present_count-50)/(total_count-50);
        this_long=start_long+(this_ratio*increment_long);
        this_lat=start_lat+(this_ratio*increment_lat);
        for (ipoi=1;ipoi<tour_length;ipoi++) {
            if (present_count==tour_POIs[ipoi]) {
                highlight(ipoi);
                break;
            }
        }
    }
    tour_center = Cesium.Cartesian3.fromDegrees(this_long,this_lat,0.0);
    gviewer.camera.lookAt(tour_center, new Cesium.HeadingPitchRange(tour_heading, tour_pitch, tour_range));
    present_count++;
    //  console.log(present_count);
    if (present_count==total_count) {
        clearInterval(the_stepper);
        the_stepper=null;
        present_count=0;
        gviewer.selectedEntity=null;
        document.getElementById("tour_state").innerHTML = "The Control" ;
        document.getElementById("the_looper").style.visibility = "visible";
        document.getElementById("WhereTo").style.visibility = "visible";
        //      reset_tour(the_tour_number);
        in_tour=false;
    }
}
/*function reset_tour(x){
    var this_tour=all_tours[x];
    var steps=this_tour.length;
    for (i=0;i<steps;i++ ) {
        all_buildings[this_tour[i]].description=name_desc[this_tour[i]][1];
        all_buildings[this_tour[i]].name=       name_desc[this_tour[i]][0];
    }
}  */
function pause_tour(){
    clearInterval(the_stepper);
    the_stepper=null;
}
function close_the_div(){
    document.getElementById("doc_view").style.visibility = "visible";
}
</script>

<script>
document.getElementById("myRange").min=20;
document.getElementById("myRange").max=3*crange;
document.getElementById("myRange").value=crange;
function mySpareFunction() {
    document.getElementById("tester").value=2+1;
}
</script>
</body>
</html>