function UpdateHTML(id, text)
{
    var z = document.getElementById(id);
    
    if (z)
        z.innerHTML = text;

    //Update the Shim
    addShim(document.getElementById("alertdiv"),'alertshim');
}

var currentShapeIndex;
var shapeCount;
var currentLayerIndex;
var layerCount;

function UpdateCount()
{
    shapeCount = map.GetShapeLayerByIndex(0).GetShapeCount();
    if (shapeCount > 0)
        currentShapeIndex = 0;
    else
        currentShapeIndex = -1;          
    currentLayerIndex = 0;
    layerCount = map.GetShapeLayerCount();
}

var layerCountHtml = 
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Current layer</span>"+
    "            <span class='instruction'>Current layer's details.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'>Layer:</span>"+
    "            <span class='mid' id='LayerCountText'>(0/0)</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'>ID:</span>"+
    "            <span class='mid' id='LayerIdText'></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'>Shapes:</span>"+
    "            <span class='mid' id='LayerCountNumShape'></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'></div>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='instruction'>Choose another layer:</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='mid'><input id='PrevShape' value='Prev Layer' type='button' class='fancyButton' onclick='DoPrevLayer();'/></span>"+
    "            <span class='mid'><input id='NextShape' value='Next Layer' type='button' class='fancyButton' onclick='DoNextLayer();'/></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='CenterOnLayerCheckBox' type='checkbox' checked='checked' /><label for='CenterOnLayerCheckBox'>Center on selected layer.</label></div>"+
    "        </div>        "+
    "    </div>";

var shapeCountHtml =    
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Current shape</span>"+
    "            <span class='instruction'>Current shape's details.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'>Shape:</span>"+
    "            <span class='mid' id='ShapeCountText'>(0/0)</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'>ID:</span>"+
    "            <span class='mid' id='ShapeIdText'></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'>Type:</span>"+
    "            <span class='mid' id='ShapeTypeText'></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'></div>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='instruction'>Choose another shape:</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='mid'><input id='PrevLayer' value='Prev Shape' type='button' class='fancyButton' onclick='DoPrevShape();'/></span>"+
    "            <span class='mid'><input id='NextLayer' value='Next Shape' type='button' class='fancyButton' onclick='DoNextShape();'/></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='CenterOnShapeCheckBox' type='checkbox' checked='checked' /><label for='CenterOnShapeCheckBox'>Center on selected shape.</label></div>"+
    "        </div>        "+
    "    </div>"+
    "    <div class='section'>"+
    "    </div>";

function UpdateShapeCount(center)
{
    //Update the numbers
    shapeCount = map.GetShapeLayerByIndex(currentLayerIndex).GetShapeCount();
    if (currentShapeIndex >= shapeCount) currentShapeIndex = shapeCount-1;

    //Center on Shape
    var s = map.GetShapeLayerByIndex(currentLayerIndex).GetShapeByIndex(currentShapeIndex);
    var type = "";
    var id = "";
    if (s)
    {
        var z = document.getElementById("CenterOnShapeCheckBox");
        if (center != false && z && z.checked)
            map.SetCenter(GetCenter(s.GetPoints()));
        
        type = s.GetType();
        id = s.GetID();
    }
    
    //Update the html
    if (currentShapeIndex != -1)
    {
        UpdateHTML("ShapeCountText", '('+(currentShapeIndex+1)+'/'+shapeCount+')');
        UpdateHTML("ShapeIdText", id);
        UpdateHTML("ShapeTypeText", type);        
    }
    else
    {
        UpdateHTML("ShapeCountText", "No shapes found.");
        UpdateHTML("ShapeIdText", "");
        UpdateHTML("ShapeTypeText", "");
    }
}

function UpdateLayerCount(center)
{
    //Update the numbers
    layerCount = map.GetShapeLayerCount();
    if (currentLayerIndex >= layerCount) currentLayerIndex = layerCount-1;
    UpdateShapeCount(false);

    //Center on layer
    var l = map.GetShapeLayerByIndex(currentLayerIndex);
    var z = document.getElementById("CenterOnLayerCheckBox");
    
    if (center != false && l && shapeCount > 0 && z && z.checked)
    {
        map.SetMapView(l.GetBoundingRectangle());
    }
    
    //Update the html
    UpdateHTML("LayerCountText", '('+(currentLayerIndex+1)+'/'+layerCount+')');
    UpdateHTML("LayerCountNumShape", shapeCount + " shapes in layer.");
    UpdateHTML("LayerIdText", l.GetId());
}

function DoPrevShape()
{
    if (currentShapeIndex != -1)
    {
        currentShapeIndex--;
        if (currentShapeIndex < 0) currentShapeIndex = shapeCount - 1;
        
        UpdateShapeCount();
    }
}

function DoNextShape()
{
    if (currentShapeIndex != -1)
    {
        currentShapeIndex++;
        if (currentShapeIndex >= shapeCount) currentShapeIndex = 0;
    
        UpdateShapeCount();
    }
}

function DoPrevLayer()
{
    currentLayerIndex--;
    if (currentLayerIndex < 0) currentLayerIndex = layerCount - 1;
    
    currentShapeIndex = 0;
    
    UpdateLayerCount();
}

function DoNextLayer()
{
    currentLayerIndex++;
    if (currentLayerIndex >= layerCount) currentLayerIndex = 0;
    
    currentShapeIndex = 0;
    
    UpdateLayerCount();
}

function DoZoomUI()
{
      var z = map.GetZoomLevel();
        DoAlert(
        "<div class='alertbox'>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Zoom in & out</span>"+
        "            <span class='instruction'>Click on the buttons to zoom in & out.</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='mid'><input id='zoomIn' type='button' class='fancyButton' value='Zoom In' onclick='DoZoom(this);' /></span>"+
        "            <span class='mid'><input id='zoomOut' type='button' class='fancyButton' value='Zoom Out' onclick='DoZoom(this);'/></span>"+
        "        </div>"+
        "    </div>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Zoom level</span>"+
        "            <span class='instruction'>Sets the current zoom level.</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Zoom level:</span>"+
        "            <span class='mid'><input id='zoomLevel' type='text' style='width:20px;' value='10' /></span>"+
        "        </div>"+        
        "        <div class='option'>"+
        "            <span class='mid'></span>"+
        "            <span class='mid'><input id='zoom' type='button' class='fancyButton' value='Set zoom' onclick='DoZoom(this);' /></span>"+
        "        </div>"+        
        "        <div class='option'>"+
        "            <div class='big' id='zoomerror' style='color:Red;'></div>"+
        "        </div>"+        
        "        <div class='option'>"+
        "            <span class='mid'>Current zoom level:</span>"+
        "            <span class='mid' id='currentLevel'></span>"+
        "        </div>"+
        "    </div>"+
        "</div>");        
        
        UpdateHTML('currentLevel', map.GetZoomLevel());
}
function DoZoom(c)
{
    if (c.id == 'zoomIn')
    {
        map.ZoomIn();
    }else if (c.id == 'zoomOut')
    {
        map.ZoomOut();
    }else if (c.id == 'zoom')
    {
        try
        {
            map.SetZoomLevel(document.getElementById('zoomLevel').value);
            UpdateHTML('zoomerror', "");
        }catch(e)
        {
            UpdateHTML('zoomerror', e.message);
        }
    }
    
    UpdateHTML('currentLevel', map.GetZoomLevel());
}

function DoCenterUI()
{
    var z = map.GetZoomLevel();
      
    DoAlert(
        "<div class='alertbox'>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Center & zoom</span>"+
        "            <span class='instruction'>Centers on the specified latitude and longitude, and zooms to the specified level.</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Latitude:</span>"+
        "            <span class='mid'><input id='latinput' type='text' style='width: 110px' value='28.6'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Longitude:</span>"+
        "            <span class='mid'><input id='loninput' type='text' style='width: 110px' value='77.3' /></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Zoom level:</span>"+
        "            <span class='mid'><input id='zoomLevel' type='text' style='width:20px;' value='10' /></span>"+
        "        </div>"+        
        "        <div class='option'>"+
        "            <span class='mid'></span>"+
        "            <span class='mid'><input id='zoom' type='button' class='fancyButton' value='Set zoom' onclick='DoCenter(this);' /></span>"+
        "        </div>"+        
        "        <div class='option'>"+
        "            <div class='big' id='zoomerror' style='color:Red;'></div>"+
        "        </div>"+        
        "        <div class='option'>"+
        "            <span class='mid'>Current zoom level:</span>"+
        "            <span class='mid' id='currentLevel'></span>"+
        "        </div>"+
        "    </div>"+
        "</div>");          
        
        UpdateHTML('currentLevel', map.GetZoomLevel());
}

function DoCenter()
{
    try
    {
        var lat=document.getElementById('latinput').value;
        var lon=document.getElementById('loninput').value;
        var center=document.getElementById('zoomLevel').value;
        map.SetCenterAndZoom(new VELatLong(lat,lon),center);
        UpdateHTML('zoomerror', "");
    }catch(e)
    {
        UpdateHTML('zoomerror', e.message);
    }
    UpdateHTML('currentLevel', map.GetZoomLevel());
 }

function DoMapStyleUI()
{
    var s=map.GetMapStyle(); 
    
    DoAlert(
        "<div class='alertbox'>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Map style</span>"+
        "            <span class='instruction'>Select a map style.</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Map style:</span>"+
        "            <span class='mid'><select id='selMapStyle' style='width: 100px' onchange='javascript:DoMapStyle(this);'> "+
        "               <option selected='selected' value='r'>Road</option>" +
        "               <option value='a'>Aerial</option>" +
        "               <option value='h'>Hybrid</option>" +
       /* "               <option value='o'>Bird's eye</option>" +
        "               <option value='b'>Bird's eye hybrid</option>" +*/
        "               </select>"+
        "            </span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <div class='big' id='currentMapStyleText'>Current map style: " + s + "</div>"+
        "        </div>"+
        "    </div>"+
        "</div>");         
    
    var c = document.getElementById("selMapStyle");
    if (c)
        c.value = s;
}
function DoMapStyle(item)
{
    var style = item.value;
    if ((style != 'o') || (style != 'b'))
        map.SetMapStyle(style);
    else
    {
        if (map.IsBirdseyeAvailable())
            map.SetMapStyle(style);
        else
        {
            style = map.GetMapStyle();
            item.value = style;
            style += " (Bird's eye not available for this area)";
            // FYI: tweak height attribute for <div.option div.big> in VESDK.css if > 2 lines
        }
    }
    UpdateHTML('currentMapStyleText', 'Current map style: ' +  style);
}
// global max zindex value for shape
var curZindex;
function ShowZIndexUI()
{
  // Clear map, set to road view and zoom 4
  map.Clear();
  map.SetMapStyle(VEMapStyle.Road);
  map.SetCenterAndZoom(new VELatLong(28.62, 77.20), 4);

    var kindaRed   = new VEColor(255, 0,   0, 0.7);
    var kindaGreen = new VEColor(0, 255,   0, 0.7);
    var kindaBlue  = new VEColor(0,   0, 255, 0.7);

    var topLeftS1  = new VELatLong(26.50, 73.00);  // The first # is north/south
    var topRightS1 = new VELatLong(26.50,  80.50);
    var botRightS1 = new VELatLong(20.50,  80.50);
    var botLeftS1  = new VELatLong(20.50, 73.00);

    var topLeftS2  = new VELatLong(23.00, 74.50);
    var topRightS2 = new VELatLong(23.00,  82.75);
    var botRightS2 = new VELatLong(18.00,  82.75);
    var botLeftS2  = new VELatLong(18.00, 74.50);

    var topLeftS3  = new VELatLong(28.50, 76.25);
    var topRightS3 = new VELatLong(28.50,  85.45);
    var botRightS3 = new VELatLong(20.00,  85.45);
    var botLeftS3  = new VELatLong(20.00, 76.25);

    var shape1 = new VEShape(VEShapeType.Polygon, new Array(topLeftS1, topRightS1, botRightS1, botLeftS1));
    shape1.HideIcon();
    shape1.SetFillColor(kindaRed);

    // use the first shape as the default zindex
    curZindex = shape1.GetZIndexPolyShape();

    var shape2 = new VEShape(VEShapeType.Polygon, new Array(topLeftS2, topRightS2, botRightS2, botLeftS2));
    shape2.HideIcon();
    shape2.SetFillColor(kindaGreen);

    var shape3 = new VEShape(VEShapeType.Polygon, new Array(topLeftS3, topRightS3, botRightS3, botLeftS3));
    shape3.HideIcon();
    shape3.SetFillColor(kindaBlue);

    map.AddShape(shape1);
    map.AddShape(shape2);
    map.AddShape(shape3);

    // Don't forget you cannot get the ids until after you've added them to the map
    var s1Id = shape1.GetID();
    var s2Id = shape2.GetID();
    var s3Id = shape3.GetID();
    
    DoAlert(
        "<div class='alertbox'>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Move a shape to the top</span>"+
        "            <span class='instruction'>Select a shape to move to the top</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Shape Color</span>"+
        "            <span class='mid'><select id='selMapStyle' style='width: 100px' onchange='javascript:DoZIndex(this);'> "+
        "               <option selected='selected' value='" + s3Id +"'>Blue</option>" +
        "               <option value='" + s2Id + "'>Green</option>" +
        "               <option value='" + s1Id + "'>Red</option>" +
        "               </select>"+
        "            </span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <div class='big' id='currentShapeOnTop'></div>"+
        "        </div>"+
        "    </div>"+
        "</div>");         
}
function DoZIndex(item)
{
    // Get the shape's id
    var shapeId = item.value;
    
    // Get shape by zindex
    var s = map.GetShapeByID(shapeId);

    // increment zindex
    curZindex++;

    // Now make that shape the one in front
    // Don't forget the null first arg
    // or not a d*mned thing happens!
    s.SetZIndex(null, curZindex);
}
function DoPanUI()
{
    DoAlert(
        "<div class='alertbox'>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Pan by LatLong</span>"+
        "            <span class='instruction'>Pan the map to a certain latitude and longtitude.</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Latitude:</span>"+
        "            <span class='mid'><input id='panlat' type='text' style='width: 110px' value='28'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Longitude:</span>"+
        "            <span class='mid'><input id='panlon' type='text' style='width: 110px' value='77' /></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='mid'></span>"+
        "            <span class='mid'><input id='pan0' type='button' class='fancyButton' value='Start Pan' onclick='doCustomPan(0);'/></span>"+
        "        </div>"+        
        "    </div>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Pan by pixel</span>"+
        "            <span class='instruction'>Pan the map by the specified pixel amount. (2D only)</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>X:</span>"+
        "            <span class='mid'><input id='panX2D' type='text' style='width: 50px'  value='10'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Y:</span>"+
        "            <span class='mid'><input id='panY2D' type='text' style='width: 50px'  value='10'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='mid'></span>"+
        "            <span class='mid'><input id='pan1' type='button' class='fancyButton' value='Start Pan' onclick='doCustomPan(1);'/></span>"+
        "        </div>"+          
        "    </div>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Continuous pan</span>"+
        "            <span class='instruction'>Pan the map in the specified direction continuously.</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>X (speed):</span>"+
        "            <span class='mid'><input id='panX3D' type='text' style='width: 50px'  value='1'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'>Y (speed):</span>"+
        "            <span class='mid'><input id='panY3D' type='text' style='width: 50px'  value='-1'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='mid'></span>"+
        "            <span class='mid'><input id='pan2' type='button' class='fancyButton' value='Start Pan' onclick='doCustomPan(2);'/></span>"+
        "        </div>"+           
        "        <div class='option'>"+
        "            <span class='mid'></span>"+
        "            <span class='mid'><input id='pan3' type='button' class='fancyButton' value='Stop Pan' onclick='doCustomPan(3);'/></span>"+
        "        </div>"+           
        "    </div>"+        
        "    <div class='section' id='panerror' style='color:Red;'>"+
        "    </div>"+        
        "</div>");        

    var m=map.GetMapMode(); 
    if (m==VEMapMode.Mode3D)
    {
        document.getElementById('panX2D').disabled = true;
        document.getElementById('panY2D').disabled = true;
        document.getElementById('pan1').disabled = true;
    }
   
}
function doCustomPan(ll)
{
    UpdateHTML("panerror", "");
    var err = null;
    if (ll==0)
    {
        var lat = document.getElementById('panlat').value;
        var lon = document.getElementById('panlon').value;
        try
        {
            map.PanToLatLong(new VELatLong(lat,lon));
        }catch (e)
        {
            err = e.message;
        }
    }
    else if (ll==1)
    {
        var panx = document.getElementById('panX2D').value;
        var pany = document.getElementById('panY2D').value;
        try
        {
            map.Pan(panx,pany);
        }catch (e)
        {
            err = e.message;
        }            
    }else if (ll==2)
    {
        var panx = document.getElementById('panX3D').value;
        var pany = document.getElementById('panY3D').value;
        try
        {
            map.StartContinuousPan(panx,pany);    
        }catch (e)
        {
            err = e.message;
        }        
    }else if (ll==3)
    {
        map.EndContinuousPan();    
     }
    
    if(err)
        UpdateHTML("panerror", err);

}

function DoNavControlsUI()
{
    DoAlert(
        "<div class='alertbox'>"+
            "<div class='section'>"+
            "    <div class='top'>"+
            "        <span class='header'>Nav Control</span>"+
            "        <span class='instruction'>Choose the control's visibility & size.</span>"+
            "    </div>"+
            "    <div class='option'>"+
            "        <div class='big'><input id='chkNav' checked='checked' type='checkbox' onclick='DoNavControls(this);'/><label for='chkNav'>Show Nav Control.</label></div>"+
            "    </div>"+
            "    <div class='option'>"+
            "        <span class='small'><input id='radioNormalDash' type='radio' name='dashRadio' checked='checked' onclick='DoNavControls(this)' /><label for='radioNormalDash'>Normal</label></span>"+
            "        <span class='small'><input id='radioSmallDash' type='radio' name='dashRadio' onclick='DoNavControls(this)' /><label for='radioSmallDash'>Small</label></span>"+
            "        <span class='small'><input id='radioTinyDash' type='radio' name='dashRadio' onclick='DoNavControls(this)'/><label for='radioTinyDash'>Tiny</label></span>"+
            "    </div>"+
            "</div>"+
        "</div>");
        
    map.ShowDashboard();
        
    if(map.dashboardSize == VEDashboardSize.Normal)
        document.getElementById('radioNormalDash').checked = 'checked';
    else if(map.dashboardSize == VEDashboardSize.Small)
        document.getElementById('radioSmallDash').checked = 'checked';
    else if(map.dashboardSize == VEDashboardSize.Tiny)
        document.getElementById('radioTinyDash').checked = 'checked';
}

function DoNavControls(c)
{
    if (c.id=='chkNav' && c.checked) { map.ShowDashboard();} else if (c.id=='chkNav' && !c.checked) {map.HideDashboard();}
    else
    {
        var d = document.getElementById('chkNav');
        if (d && d.checked)
        {
            if (c.id=='radioNormalDash' && c.checked) { GetMapWithDashboard(VEDashboardSize.Normal);}
            else if (c.id=='radioSmallDash' && c.checked) { GetMapWithDashboard(VEDashboardSize.Small);}
            else if (c.id=='radioTinyDash' && c.checked) { GetMapWithDashboard(VEDashboardSize.Tiny);}
        }
    }
}

function DoControlsUI()
{
    map.HideFindControl();
    map.ShowScalebar();
    map.HideMiniMap();
    map.Show3DNavigationControl();
    
    DoAlert(
        "<div class='alertbox'>"+
            "<div class='section'>"+
            "    <div class='top'>"+
            "        <span class='header'>Mini Map</span>"+
            "        <span class='instruction'>Choose the mini map's visibility & size.</span>"+
            "    </div>"+
            "    <div class='option'>"+
            "        <div class='big'><input id='chkMiniMap' type='checkbox' onclick='doControls(this);'/><label for='chkMiniMap'>Show Mini Map.</label></div>"+
            "    </div>"+
            "    <div class='option'>"+
            "        <span class='small'><input id='radioSmallMap' type='radio' name='mapRadio' checked='checked' onclick='doControls(this)' /><label for='radioSmallMap'>Small</label></span>"+
            "        <span class='small'><input id='radioLargeMap' type='radio' name='mapRadio' onclick='doControls(this)'/><label for='radioLargeMap'>Large</label></span>"+
            "        <span class='small'></span>"+
            "    </div>"+
            "    <div class='option'>"+
            "        <span class='small'><label for='txtMapX'>Position:</label></span>"+
            "        <span class='small'><label for='txtMapX'>x:</label><input class='inputText' id='txtMapX' style='width: 30px' type='text' value='90' onchange='doControls(this);' /></span>"+
            "        <span class='small'></span>"+
            "    </div>"+
            "    <div class='option'>"+
            "        <span class='small'></span>"+
            "        <span class='small'><label for='txtMapY'>y:</label><input class='inputText' id='txtMapY' style='width: 30px' type='text' value='90' onchange='doControls(this);' /></span>"+
            "        <span class='small'></span>"+
            "    </div>"+
            "</div>            "+
          /*"<div class='section'>"+
            "    <div class='top'>"+
            "        <span class='header'>Find Control</span>"+
            "        <span class='instruction'>Show or hide the Find control.</span>"+
            "    </div>"+
            "    <div class='option'>"+
            "        <div class='big'><input id='chkFind' type='checkbox' onclick='doControls(this);'/><label for='chkFind'>Show Find Control.</label></div>"+
            "    </div>"+
            "</div>"+*/
          /*"<div class='section'>"+
            "    <div class='top'>"+
            "        <span class='header'>3D Nav Control</span>" +
            "        <span class='instruction'>Show or hide the 3D nav control. (only in 3D mode)</span>" +
            "    </div>" +
            "    <div class='option'>" +
            "        <div class='big'><input id='chk3D' type='checkbox' checked='checked' onclick='doControls(this);'/><label for='chk3D'>Show 3D Nav Control.</label></div>" +
            "    </div>        " +
            "</div>"+*/
            "<div class='section'>" +
            "    <div class='top'>" +
            "        <span class='header'>Scalebar</span>" +
            "        <span class='instruction'>Show or hide the Scalebar.</span>" +
            "    </div>" +
            "    <div class='option'>" +
            "        <div class='big'><input id='chkScale' type='checkbox' checked='checked' onclick='doControls(this);'/><label for='chkScale'>Show the Scalebar.</label></div>" +
            "    </div>        " +
            "</div>"+
        "</div>");
}
function doControls(c)
{
    if (c.id == 'chkScale' && c.checked) { map.ShowScalebar(); } else if (c.id == 'chkScale' && !c.checked) { map.HideScalebar(); }
    if (c.id=='chk3D' && c.checked) { if (CheckBrowser()) {map.Show3DNavigationControl();}} else if (c.id=='chk3D' && !c.checked) {if (CheckBrowser()) {map.Hide3DNavigationControl();}}
    if (c.id=='chkMiniMap' && c.checked) { doMiniMap(document.getElementById('radioLargeMap').checked); } else if (c.id=='chkMiniMap' && !c.checked) {map.HideMiniMap();}
    if (c.id=='radioSmallMap' && c.checked) { doMiniMap(false); } else if (c.id=='radioLargeMap' && c.checked) { doMiniMap(true); }
    
    if(c.id=='txtMapX' || c.id=='txtMapY')
    {
        doMiniMap(document.getElementById('radioLargeMap').checked);
    }
}
function doMiniMap(large)
{
    var c = document.getElementById('chkMiniMap');
    
    if (c && c.checked)
    {
        var x = parseInt(document.getElementById('txtMapX').value);
        var y = parseInt(document.getElementById('txtMapY').value);
        
        var size;
        if (large)
            size=VEMiniMapSize.Large;
        else
            size=VEMiniMapSize.Small;

        if (isNaN(x) || isNaN(y))
        {
            map.ShowMiniMap(null,null,size);
        }
        else
        {
            map.ShowMiniMap(x,y,size);
        }
    }
}

function DoAddDefaultShapeUI()
{
     DoAlert(
    "<div class='alertbox'>"+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Default shapes</span>"+
    "            <span class='instruction'>Click on the links below to add a default shape to the map.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'><a href='#' onclick='DoAddDefaultShape(0);'>Add Pushpin</a></span>"+
    "            <span class='small'><a href='#' onclick='DoAddDefaultShape(1);'>Add Polyline</a></span>"+
    "            <span class='small'><a href='#' onclick='DoAddDefaultShape(2);'>Add Polygon</a></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big2'><input id='ZoomCheckBox' type='checkbox' checked='checked'/><label for='ZoomCheckBox'>Set best zoom level when shape is added.</label></div>"+
    "        </div>        "+
    "    </div>"+
    "</div>");

}

function DoAddDefaultShape(c)
{
    var s;
    if (c==0) { s = GetDefaultPushpin();}
    else if (c==1) { s = GetDefaultPolyline();}
    else if (c==2) { s = GetDefaultPolygon();}
    
    AddShape(s);
}

function AddShape(s, l)
{
    if (s)
    {
        if (l)
	        l.AddShape(s);
	    else
	        map.AddShape(s);
	        
	    pinid++;

        var z = document.getElementById("ZoomCheckBox");
        if (z != null && z.checked && map.GetZoomLevel() != 10) { map.SetZoomLevel(10);}
    }
}

function DoShowHideShapeUI()
{
    UpdateCount();
    
    DoAlert(
    "<div class='alertbox'>"+
        shapeCountHtml+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Show/Hide</span>"+
    "            <span class='instruction'>Click on the button below to show or hide the current shape.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='mid'><input id='ShowShape' value='Show Shape' type='button' class=fancyButton onclick='DoShowHideShape(this);'/></span>"+
    "            <span class='mid'><input id='HideShape' value='Hide Shape' type='button' class=fancyButton onclick='DoShowHideShape(this);'/></span>"+
    "        </div>"+
    "    </div>"+
    "</div>");
    
    UpdateShapeCount();
    var s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
    if (!s)
    {
        document.getElementById("ShowShape").disabled = true;
        document.getElementById("HideShape").disabled = true;
    }
}


function DoShowHideShape(c)
{
    var s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
    if (s)
    {
        if (c.id == "ShowShape")
        {
            s.Show();
        }
        else if (c.id == "HideShape")
        {
            s.Hide();
        }        
    }
}

function DoDeleteShapeUI()
{
    UpdateCount();
    
    DoAlert(
    "<div class='alertbox'>"+
        shapeCountHtml+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Delete shape</span>"+
    "            <span class='instruction'>Click on the button below to delete the selected shape from the map.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='DeleteShape' value='Delete' type='button' class=fancyButton onclick='DoDeleteShape(this);'/></div>"+
    "        </div>        "+
    "    </div>"+
    "</div>");
    
    UpdateShapeCount();

    var s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
    if (!s)
        document.getElementById('DeleteShape').disabled = true;
}

function DoDeleteShape(c)
{
    if (c.id == 'DeleteShape')
    {
        var s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex); 
        if (s) map.DeleteShape(s);
        UpdateShapeCount();
    }
}

function ClusterShapesUI()
{
    DoAlert(
    "<div class='alertbox'>" +
    "    <div class='section'>" +
    "        <div class='top'>" +
    "            <span class='header'>Cluster Shapes</span>" +
    "            <span class='instruction'>Turn clustering on or off clustering.</span>" +
    "        </div>" +
    "        <div class='option'>" +
    "            <div class='big'><input id='ClusterShapes' type='checkbox' onclick='DoClusterShapes(this);'/><label for='chk3D'>Cluster Shapes.</label></div>" +
    "        </div>        " +
    "    </div>" +
    "</div>");

    var layer = map.GetShapeLayerByIndex(0);
    layer.SetClusteringConfiguration(VEClusteringType.None);
    var pixel = map.LatLongToPixel(map.GetCenter());
    var x = pixel.x;
    var y = pixel.y;

    for (var i = 0; i <= 20; i += 10)
    {
        for (var j = 0; j <= 20; j += 10)
        {
            layer.AddShape(new VEShape(VEShapeType.Pushpin, map.PixelToLatLong(new VEPixel(x + i, y + j))));
        }
    }
}

function DoClusterShapes(c)
{
    if (c.checked)
    {
        map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.Grid);
    } else
    {
        map.GetShapeLayerByIndex(0).SetClusteringConfiguration(VEClusteringType.None);
    }
}

function GetCenter(p)
{
    var lats = 0;
    var lons = 0;
    for(var i=0;i<p.length;i++)
    {
        lats += p[i].Latitude;
        lons += p[i].Longitude;
    }
    return new VELatLong(lats / p.length, lons / p.length);
}

function DoAddCustomShapeUI()
{
    DoAlert(
    "<div class='alertbox'>"+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Customized shapes</span>"+
    "            <span class='instruction'>Click on the links below to add a customized shape to the map.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'><a href='#' onclick='DoAddCustomShape(0);'>Add Pushpin</a></span>"+
    "            <span class='small'><a href='#' onclick='DoAddCustomShape(1);'>Add Polyline</a></span>"+
    "            <span class='small'><a href='#' onclick='DoAddCustomShape(2);'>Add Polygon</a></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='ZoomCheckBox' type='checkbox' checked='checked'/><label for='ZoomCheckBox'>Set best zoom level when shape is added.</label></div>"+
    "        </div>        "+
    "    </div>"+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Customizable properties</span>"+
    "            <span class='instruction'>Choose the options below to give your customized shape a different look.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='CustomLine' type='checkbox' checked='checked'/><label for='CustomLine'>Custom line & outline (Polyline and polygon only).</label></div>"+
    "        </div>        "+
    "        <div class='option'>"+
    "            <div class='big'><input id='CustomFill' type='checkbox' checked='checked'/><label for='CustomFill'>Custom fill color (Polygon only).</label></div>"+
    "        </div>        "+
    "        <div class='option'>"+
    "            <div class='big'><input id='CustomIcon' type='checkbox' checked='checked'/><label for='CustomIcon'>Custom icon.</label></div>"+
    "        </div>        "+
    "        <div class='option'>"+
    "            <div class='big'><input id='CustomInfo' type='checkbox' checked='checked'/><label for='CustomInfo'>Custom info box.</label></div>"+
    "        </div>        "+
    "    </div>"+
    "</div>");
}

function DoAddCustomShape(c)
{
    var s;
    if (c==0) { s = GetDefaultPushpin();}
    else if (c==1) { s = GetDefaultPolyline();}
    else if (c==2) { s = GetDefaultPolygon();}
    
    var cLine = document.getElementById('CustomLine');
    var cFill = document.getElementById('CustomFill');
    var cIcon = document.getElementById('CustomIcon');
    var cInfo = document.getElementById('CustomInfo');
    
    if (cLine && cLine.checked && s && s.GetType() != VEShapeType.Pushpin) {SetCustomLine(s);};
    if (cFill && cFill.checked && s && s.GetType() == VEShapeType.Polygon) {SetCustomFill(s);};
    if (cIcon && cIcon.checked && s) {SetCustomIcon(s);};
    if (cInfo && cInfo.checked && s) {SetCustomInfo(s);};
    
    AddShape(s);
}

function DoShapeMinMaxUI()
{
    UpdateCount();
    DoAlert(
        "<table>"+
        shapeCountHtml+
        "<tr><td>Min zoom:</td><td><input id='minZoomLevel' type='text' style='width:15px;' value='10' /></td><td><input id='SetMinZoom' value='Set' type='button' class=fancyButton onclick='DoShapeMinMax(this);'/></td></tr>"+
        "<tr><td>Max zoom:</td><td><input id='maxZoomLevel' type='text' style='width:15px;' value='15' /></td><td><input id='SetMaxZoom' value='Set' type='button' class=fancyButton onclick='DoShapeMinMax(this);'/></td></tr>"+
        "</table>"
    );
    
    UpdateShapeCount();
}

function DoShapeMinMax(c)
{
    if (c.id == 'SetMinZoom')
    {
        var s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
        var n = document.getElementById("minZoomLevel");
        
        if (s && n && !isNaN(n.value))
            s.SetMinZoomLevel(n.value);
        
    }else if (c.id == 'SetMaxZoom')
    {
        var s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
        var n = document.getElementById("maxZoomLevel");
        
        if (s && n && !isNaN(n.value))
            s.SetMaxZoomLevel(n.value);
    }
}

function DoShapeInfoUI()
{
    UpdateCount();
    
    DoAlert(
    "<div class='alertbox'>"+
        shapeCountHtml+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Info box</span>"+
    "            <span class='instruction'>Click on the buttons below to show/hide the selected shape's info box.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='mid'><input id='ShowShape' value='Show info box' type='button' class='fancyButton' onclick='DoShapeInfo(this);'/></span>"+
    "            <span class='mid'><input id='HideShape' value='Hide info box' type='button' class='fancyButton' onclick='DoShapeInfo(this);'/></span>"+
    "        </div>        "+
    "        </div>"+        
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Info box's location</span>"+
    "            <span class='instruction'>The info box can be shown anywhere on the map. Enter x and y coordinates and click on the button to show the selected shape's info box.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'><label for='txtMapX'>Position:</label></span>"+
    "            <span class='small'><label for='txtMapX'>x:</label><input class='inputText' id='txtMapX' style='width: 30px' type='text' value='0'' /></span>"+
    "            <span class='small'></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'></span>"+
    "            <span class='small'><label for='txtMapY'>y:</label><input class='inputText' id='txtMapY' style='width: 30px' type='text' value='0'' /></span>"+
    "            <span class='small'></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='ShowCorner' value='Show info box' type='button' class='fancyButton' onclick='DoShapeInfo(this);'/></div>"+
    "        </div>"+
    "    </div>"+
    "</div>");
    
    UpdateShapeCount();
    var s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
    if (!s)
    {
        document.getElementById('ShowShape').disabled = true;
        document.getElementById('HideShape').disabled = true;
        document.getElementById('txtMapX').disabled = true;
        document.getElementById('txtMapY').disabled = true;
        document.getElementById('ShowCorner').disabled = true;
    }    
}

function DoShapeInfo(c)
{
    var s;
    if (c.id == 'ShowShape')
    {
        s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
        if (s)
        {
            map.HideInfoBox();
            map.ShowInfoBox(s);
        }
        
    }else if (c.id == 'ShowCorner')
    {
        s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
        if (s)
        {
            var x = parseInt(document.getElementById('txtMapX').value);
            var y = parseInt(document.getElementById('txtMapY').value);
            
            map.HideInfoBox();
            if (!isNaN(x) && !isNaN(y))
            {
                map.ShowInfoBox(s, new VEPixel(x,y));
            }
            else
            {
                map.ShowInfoBox(s, new VEPixel(0,0));
            }
        }
    }else if (c.id == 'HideShape')
    {
        s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
        if (s)
            map.HideInfoBox();
    }
}

function DoShapeIconUI()
{
    UpdateCount();
    
    DoAlert(
    "<div class='alertbox'>"+
        shapeCountHtml+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Show/hide icon</span>"+
    "            <span class='instruction'>Click on the button below to show or hide the shape's icon. (Polyline & Polygon only)</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='mid'><input id='ShowIcon' value='Show Icon' type='button' class=fancyButton onclick='DoShapeIcon(this);'/></span>"+
    "            <span class='mid'><input id='HideIcon' value='Hide Icon' type='button' class=fancyButton onclick='DoShapeIcon(this);'/></span>"+
    "        </div>"+
    "    </div>"+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Icon's position</span>"+
    "            <span class='instruction'>Change the placement of the shape's icon. (Polyline & Polygon only)</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='centerRadio' name='iconPosition' type='radio' checked='checked' onclick='DoShapeIcon(this);'/><label for='centerRadio'>Center of map</label></div>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'><input id='ChangeAnchor' value='Change to' name='iconPosition' type='radio' onclick='DoShapeIcon(this);'/><label for='ChangeAnchor'>Position:</label></span>"+
    "            <span class='mid'><label for='txtMapX'>x:</label><input class='inputText' id='txtMapX' style='width: 30px' type='text' value='0'' onfocus=\"document.getElementById('ChangeAnchor').checked='checked';\" /></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'></span>"+
    "            <span class='mid'><label for='txtMapY'>y:</label><input class='inputText' id='txtMapY' style='width: 30px' type='text' value='0'' onfocus=\"document.getElementById('ChangeAnchor').checked='checked';\" /></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='ShowCorner' value='Update' type='button' class=fancyButton onclick='DoShapeIcon(this);'/></div>"+
    "        </div>"+    
    "    </div>"+
    "</div>");
    
    UpdateShapeCount();
    var s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
    if (!s)
    {
        document.getElementById('ShowIcon').disabled = true;
        document.getElementById('HideIcon').disabled = true;
        document.getElementById('centerRadio').disabled = true;
        document.getElementById('ChangeAnchor').disabled = true;
        document.getElementById('txtMapX').disabled = true;
        document.getElementById('txtMapY').disabled = true;
        document.getElementById('ShowCorner').disabled = true;
    }
}

function DoShapeIcon(c)
{
    var s;
    if (c.id == 'ShowIcon')
    {
        s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
        if (s)
            s.ShowIcon();
        
    }else if (c.id == 'HideIcon')
    {
        s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
        if (s)
            s.HideIcon();
    }else
    {
        s = map.GetShapeLayerByIndex(0).GetShapeByIndex(currentShapeIndex);
        if (s)
        {
            if (document.getElementById("centerRadio").checked)
            {
                s.SetIconAnchor(map.GetCenter());
            }else
            {
                var x = parseInt(document.getElementById("txtMapX").value);
                var y = parseInt(document.getElementById("txtMapY").value);
                if (!isNaN(x) && !isNaN(y))
                {
                    try
                    {
                        s.SetIconAnchor(map.PixelToLatLong(new VEPixel(x, y)));
                    }catch(e)
                    {}
                }
            }
        }
    }
}

function DoAddLayerShapeUI()
{
    UpdateCount();
     
    DoAlert(
    "<div class='alertbox'>"+
        layerCountHtml+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Shapes in layers</span>"+
    "            <span class='instruction'>Shapes can be added to the shape layers. Select a layer and click on the links below to add a shape to the selected layer.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='small'><a href='#' onclick='DoAddLayerShape(0);'>Add Pushpin</a></span>"+
    "            <span class='small'><a href='#' onclick='DoAddLayerShape(1);'>Add Polyline</a></span>"+
    "            <span class='small'><a href='#' onclick='DoAddLayerShape(2);'>Add Polygon</a></span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='ZoomCheckBox' type='checkbox' checked='checked'/><label for='ZoomCheckBox'>Set best zoom level when shape is added.</label></div>"+
    "        </div>        "+
    "    </div>"+
    "</div>");     
     
     UpdateLayerCount();
}

function DoAddLayerShape(c)
{
    var s;
    if (c==0) { s = GetDefaultPushpin();}
    else if (c==1) { s = GetDefaultPolyline();}
    else if (c==2) { s = GetDefaultPolygon();}
    
    var l = map.GetShapeLayerByIndex(currentLayerIndex);
    AddShape(s, l);
    UpdateLayerCount(false);
}

function DoLayerMinMaxUI()
{
    UpdateCount();
    DoAlert(
        "<table>"+
        layerCountHtml+
        "<tr><td>Min zoom:</td><td><input id='minZoomLevel' type='text' style='width:15px;' value='10' /></td><td><input id='SetMinZoom' value='Set' type='button' class=fancyButton onclick='DoLayerMinMax(this);'/></td></tr>"+
        "<tr><td>Max zoom:</td><td><input id='maxZoomLevel' type='text' style='width:15px;' value='15' /></td><td><input id='SetMaxZoom' value='Set' type='button' class=fancyButton onclick='DoLayerMinMax(this);'/></td></tr>"+
        "</table>"
    );
    
    UpdateLayerCount();
}

function DoLayerMinMax(c)
{
    if (c.id == 'SetMinZoom')
    {
        var l = map.GetShapeLayerByIndex(currentLayerIndex);
        var n = document.getElementById("minZoomLevel");
        
        if (l && n && !isNaN(n.value))
            l.SetMinZoomLevel(n.value);
        
    }else if (c.id == 'SetMaxZoom')
    {
        var l = map.GetShapeLayerByIndex(currentLayerIndex);
        var n = document.getElementById("maxZoomLevel");
        
        if (l && n && !isNaN(n.value))
            l.SetMaxZoomLevel(n.value);
    }
}

function DoLayerDeleteShapeUI()
{
    UpdateCount();
    
    DoAlert(
    "<div class='alertbox'>"+
        layerCountHtml+
        shapeCountHtml+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Delete shape</span>"+
    "            <span class='instruction'>To delete a shape from a layer, choose the layer and shape and click on the button below.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='DeleteShape' value='Delete' type='button' class=fancyButton onclick='DoLayerDeleteShape(this);'/></div>"+
    "        </div>        "+
    "    </div>"+
    "</div>");         
    
    UpdateLayerCount();
}

function DoLayerDeleteShape(c)
{
    if (c.id == 'DeleteShape')
    {
        var l = map.GetShapeLayerByIndex(currentLayerIndex);
        var s = l.GetShapeByIndex(currentShapeIndex);
        
        if (l && s)
            l.DeleteShape(s);
        
        UpdateLayerCount();
    }
}

function DoShowHideLayerUI()
{
    UpdateCount();

    DoAlert(
    "<div class='alertbox'>"+
        layerCountHtml+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Show/hide</span>"+
    "            <span class='instruction'>Click on the button below to show or hide the shape layer.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <span class='mid'><input id='ShowLayer' value='Show Layer' type='button' class=fancyButton onclick='DoShowHideLayer(this);'/></span>"+
    "            <span class='mid'><input id='HideLayer' value='Hide Layer' type='button' class=fancyButton onclick='DoShowHideLayer(this);'/></span>"+
    "        </div>"+
    "    </div>"+
    "</div>");
    
    UpdateLayerCount();
}

function DoShowHideLayer(c)
{
    var l = map.GetShapeLayerByIndex(currentLayerIndex);
    if (l)
    {
        if (c.id == "ShowLayer")
            l.Show();
        else if (c.id == "HideLayer")
            l.Hide();
    }
}

function DoDeleteLayerUI()
{
    UpdateCount();
    
    DoAlert(
    "<div class='alertbox'>"+
        layerCountHtml+
    "    <div class='section'>"+
    "        <div class='top'>"+
    "            <span class='header'>Delete layer</span>"+
    "            <span class='instruction'>Click on the button below to delete the selected layer from the map.</span>"+
    "        </div>"+
    "        <div class='option'>"+
    "            <div class='big'><input id='DeleteLayer' value='Delete' type='button' class=fancyButton onclick='DoDeleteLayer(this);'/></div>"+
    "        </div>        "+
    "    </div>"+
    "</div>");
        
    UpdateLayerCount();
}

function DoDeleteLayer(c)
{
    if (c.id == 'DeleteLayer')
    {
        l = map.GetShapeLayerByIndex(currentLayerIndex);
        if (l) map.DeleteShapeLayer(l);
        UpdateLayerCount();
    }
}

var findLayer;
function InitFindLayer()
{
    if (findLayer != null)
      {
        map.DeleteShapeLayer(findLayer);
      }

    findLayer = new VEShapeLayer(); 
    map.AddShapeLayer(findLayer);
}

function DeleteFindLayer()
{
    if (findLayer != null)
    {
        map.DeleteShapeLayer(findLayer);
        findLayer = null;
    }
}

function DoBasicFindUI(what, where, layer)
{
    var alertText = ""+
        "<div class='alertbox' id='findBox'>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Find</span>"+
        "            <span class='instruction'>A basic search. Change the text if you want, and click Find.</span>"+
        "        </div>";

    // Include what only if we get a value
    if(what != null)
    {
      alertText += "" +
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'><label for='findWhat'>What:</label></span>"+
        "            <span class='mid'><input id='findWhat' type='text' value='" +
        what +
        "' style='width:99%;'/></span>"+
        "        </div>";
    }

    // Include where only if we get a value
    if(where != null)
    {
      alertText += "" +
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'><label for='findWhere'>Where:</label></span>"+
        "            <span class='mid'><input id='findWhere' type='text' value='" +
        where +
        "' style='width:99%;'/></span>"+
        "        </div>";
    }

    alertText += "" +
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'></span>"+
        "            <span class='mid'><input id='Find' value='Find' type='button' class='fancyButton' onclick='DoBasicFind(this);'/></span>"+
        "        </div>      "+
        "    </div>"+
        "    <div class='section' id='callbackText'>"+
        "    </div>"+              
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Delete</span>"+
        "            <span class='instruction'>Delete all shapes and previous results from the map. This will make it easier to see new results.</span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid'></span>"+
        "            <span class='mid'><input id='DeleteAllShapes' value='Delete all' type='button' class='fancyButton' onclick='DeleteAllShapes();'/></span>"+
        "        </div>"+
        "    </div>    "+
        "</div>";

    DoAlert(alertText);
}

function DoBasicFind(c)
{
    try
    {
        var what = document.getElementById("findWhat");

	if(what != null)
	{
            what = what.value;
        }

        var where = document.getElementById("findWhere");

        if(where != null)
	{
            where = where.value;
        }
    
        UpdateHTML("callbackText", "");

        InitFindLayer();

        map.Find(what, where, null, findLayer);
    }
    catch(e)
    {
        UpdateHTML("callbackText", "<tt style='color:Red;'>Error: " + e.message+"</tt>");
    }
}

function DoAdvanceFindUI()
{
    DoAlert(
        "<div class='alertbox' id='findBox'>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Find</span>"+
        "            <span class='instruction'>Different options can be chosen when doing a search. Select the options below, and click on the Find button.</span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'><label for='findWhat'>What:</label></span>"+
        "            <span class='mid'><input id='findWhat' type='text' value='pizza' style='width:99%;'/></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'><label for='findWhere'>Where:</label></span>"+
        "            <span class='mid'><input id='findWhere' type='text' value='Mumbai' style='width:99%;'/></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'><label for='findStart'>Start index:</label></span>"+
        "            <span class='mid'><input id='findStart' type='text' value='0' maxlength='2' style='width:25px;'/></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'><label for=''>Number of results:</label></span>"+
        "            <span class='mid'><input id='findNum' type='text' value='10' maxlength='2' style='width:25px;'/></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'>Show results:</span>"+
        "            <span class='small'><input id='showTrueRadio' type='radio' name='showResultRadio' checked='checked' /><label for='showTrueRadio'>True</label></span>"+
        "            <span class='small'><input id='showFalseRadio' type='radio' name='showResultRadio' /><label for='showFalseRadio'>False</label></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'>Create results:</span>"+
        "            <span class='small'><input id='createTrueRadio' type='radio' name='createResultRadio' checked='checked' /><label for='createTrueRadio'>True</label></span>"+
        "            <span class='small'><input id='createFalseRadio' type='radio' name='createResultRadio' /><label for='createFalseRadio'>False</label></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'>Disambiguation:</span>"+
        "            <span class='small'><input id='disamDefaultRadio' type='radio' name='disambRadio' checked='checked' /><label for='disamDefaultRadio'>Default</label></span>"+
        "            <span class='small'><input id='disamCustomRadio' type='radio' name='disambRadio' /><label for='disamCustomRadio'>Custom</label></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'></span>"+
        "            <span class='small'><input id='disamNoneRadio' type='radio' name='disambRadio' /><label for='disamNoneRadio'>None</label></span>"+
        "            <span class='small'><label for=''></label></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'>Best view:</span>"+
        "            <span class='small'><input id='bestTrueRadio' type='radio' name='bestviewRadio' checked='checked' /><label for='bestTrueRadio'>True</label></span>"+
        "            <span class='small'><input id='bestFalseRadio' type='radio' name='bestviewRadio' /><label for='bestFalseRadio'>False</label></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'>Callback:</span>"+
        "            <span class='small'><input id='callbackTrueRadio' type='radio' name='callbackRadio' checked='checked' /><label for='callbackTrueRadio'>True</label></span>"+
        "            <span class='small'><input id='callbackFalseRadio' type='radio' name='callbackRadio' /><label for='callbackFalseRadio'>False</label></span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid' style='text-align:right;'></span>"+
        "            <span class='mid'><input id='Find' value='Find' type='button' class='fancyButton' onclick='DoAdvanceFind(this);'/></span>"+
        "        </div>      "+
        "    </div>"+
        "    <div class='section' id='callbackText'>"+
        "    </div>"+              
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Delete</span>"+
        "            <span class='instruction'>Delete all shapes and previous results from the map. This will make it easier to see new results.</span>"+
        "        </div>"+
        "        <div class='option2'>"+
        "            <span class='mid'></span>"+
        "            <span class='mid'><input id='DeleteAllShapes' value='Delete all' type='button' class='fancyButton' onclick='DeleteAllShapes();'/></span>"+
        "        </div>"+
        "    </div>    "+
        "</div>");
}

var find = new Object();
function DoAdvanceFind(c)
{
    find.callback = null;
    find.what = document.getElementById("findWhat").value;
    find.where = document.getElementById("findWhere").value;
    find.start = document.getElementById("findStart").value;
    find.num = document.getElementById("findNum").value;
    find.show = document.getElementById("showTrueRadio").checked;
    find.create = document.getElementById("createTrueRadio").checked;
    find.disam = document.getElementById("disamDefaultRadio").checked;
    if (!find.disam)
    {
        if (document.getElementById("disamCustomRadio").checked)
            find.callback = disambigCall;
    }
    find.best = document.getElementById("bestTrueRadio").checked;
    
    UpdateHTML("callbackText", "");
    
    find.doCallback = null;
    if (document.getElementById("callbackTrueRadio").checked)
    {
        find.doCallback = function(a,b,c,d,e)
                {
                    if(b) 
                    {
                        //DoAlert("Find has finished. Find callback can be used to obtain search results and find out when the search ends.<br>");
                        UpdateHTML("callbackText", "<tt style='color:Red;'>Callback = Search ended.</tt>");
                    };
                };
        if (find.callback == null)
            find.callback = find.doCallback;
    }
    
    try
    {
        InitFindLayer();
        map.Find(find.what, find.where, null, findLayer, find.start, find.num, find.show, find.create, find.disam, find.best, find.callback);
    }catch(e)
    {
        UpdateHTML("callbackText", "<tt style='color:Red;'>Error: " + e.message+"</tt>");
    }
}

var placesArray;
function disambigCall(a,b,c,d,e)
{
    if (c && c.length > 1)
    {
        placesArray = c;
        
    	if(document.getElementById("callbackText"))
    	{
            var results="Disambiguation. Please select the location you were looking for:<br>";
	        for (x=0; x<c.length && x < 5; x++)
	        {
		        results+="<a href='#' onclick='javascript:disambigDone("+x+");'>"+c[x].Name+"</a><br>";
	        }
        	
	        results+= "<br><a href='#' onclick='javascript:disambigDone(-1);'>Cancel Disambiguation</a>";
	        UpdateHTML("callbackText", results);
	    }
	    else
	    {
            var results="More than one location was returned. Please select the location you were looking for:<br>";
	        for (x=0; x<c.length; x++)
	        {
		        results+="<a href='#' onclick='javascript:disambigDone("+x+");'>"+c[x].Name+"</a><br>";
	        }
        	
	        results+= "<br><a href='#' onclick='javascript:disambigDone(-1);'>Cancel Disambiguation</a>";

	        DoAlert(results);
	    }
	}
}

function disambigDone(n)
{
    if(document.getElementById("callbackText"))
    {
	    UpdateHTML("callbackText", "");
        if (placesArray && n >= 0)
        {
            try
            {
                map.Find(find.what, placesArray[n].Name, null, findLayer, find.start, find.num, find.show, find.create, find.disam, find.best, find.doCallback);
            }catch(e)
            {
                UpdateHTML("callbackText", "<tt style='color:Red;'>Error: " + e.message + "</tt>");
            }
        }
	}
	else
	{
	    HideAlert();
	    if (placesArray && n >= 0)
	        DoFind(null, placesArray[n].Name, null, null, null, null, false, null, null);
	}
}

function AddResultsToLayerUI()
{
    UpdateCount();
    
    DoAlert(
        "<div class='alertbox'>"+
            layerCountHtml+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Layer option</span>"+
        "            <span class='instruction'>Find results can be added to a layer. Select a layer and click the Find button below.</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'><label for='findWhat'>What:</label></span>"+
        "            <span class='mid'><input id='findWhat' type='text' value='restaurants' style='width:99%;'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'><label for='findWhere'>Where:</label></span>"+
        "            <span class='mid'><input id='findWhere' type='text' value='Bangalore' style='width:99%;'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='mid' style='text-align:right;'></span>"+
        "            <span class='mid'><input id='Find' value='Find' type='button' class=fancyButton onclick='AddResultsToLayer(this);'/></span>"+
        "        </div>      "+
        "    </div>"+
        "    <div class='section' id='findDoneText' style='color:Red;'>"+
        "    </div>"+        
        "</div>");    

    UpdateLayerCount();
}

function AddResultsToLayer(c)
{
    UpdateHTML("findDoneText", "");
    
    var what = document.getElementById("findWhat").value;
    var where = document.getElementById("findWhere").value;
    var layer = map.GetShapeLayerByIndex(currentLayerIndex);
    var cb = function(a,b,c,d,e) 
            {
                var n = 0; 
                if (b)
                    n = b.length;
                UpdateHTML("findDoneText", "Added " + n + " results to layer " + (currentLayerIndex + 1));
            };
    try{
        map.Find(what, where, null, layer, null, null, null, null, null, null, cb);
    }
    catch(e)
    {
        UpdateHTML("findDoneText", "<tt style='color:Red;'>Error: " + e.message + "</tt>");
    }
}

var getMoreStart;
var getMoreNum;
function GetMoreResultsUI()
{
    DoAlert(
        "<div class='alertbox'>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Start index</span>"+
        "            <span class='instruction'>The beginning index of the results returned. (Default is 0)</span>"+
        "            <span class='header'>Number of Results</span>"+
        "            <span class='instruction'>The number of results to be returned, starting at startIndex. The default is 10, the minimum is 1, and the maximum is 20.</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='mid'><label for='findStart'>Start index:</label></span>"+
        "            <span class='mid'><input id='findStart' type='text' value='0' maxlength='3' style='width:25px;'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='mid'><label for='findNum'>Number of results:</label></span>"+
        "            <span class='mid'><input id='findNum' type='text' value='10' maxlength='2' style='width:25px;'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='mid' style='text-align:right;'></span>"+
        "            <span class='mid'><input id='Find' value='Find' type='button' class=fancyButton onclick='GetMoreResults(0);'/></span>"+
        "        </div>      "+
        "        <div class='option'>"+
        "            <div class='big' id='findDoneText'></div>"+
        "        </div>      "+
        "        <div class='option'>"+
        "            <span class='mid' id='findMoreText1'></span>"+
        "            <span class='mid' id='findMoreText2'></span>"+
        "        </div>      "+
        "    </div>"+
        "</div>");        

    getMoreStart = 0;
    getMoreNum = 10;
    
    GetMoreResults(0);
}

function GetMoreResults(more)
{   
    var start = parseInt(document.getElementById("findStart").value);
    if (isNaN(start))
    {
        start = 0;
        document.getElementById("findStart").value = start;
    }
    var num = parseInt(document.getElementById("findNum").value);
    if (isNaN(num))
    {
        num = 0;
        document.getElementById("findNum").value = num;
    }
    var cb = function(a,b,c,d,e)
            {
                var el = document.getElementById("findStart");
                if (el)
                    el.value = getMoreStart;
                var el = document.getElementById("findNum");
                if (el)
                    el.value = getMoreNum;
                
                if (b)
                    UpdateHTML("findDoneText", "Results ("+getMoreStart+" to "+(getMoreStart+b.length-1)+") found.");
                else
                    UpdateHTML("findDoneText", "No results found.");
                
                var p = 0 - getMoreNum;
                if (getMoreStart + p < 0)
                    p = 0 - getMoreStart;
                var prev = "Previous results";
                if (p != 0)
                    prev = "<a href='#' onclick='GetMoreResults("+p+");'>"+prev+"</a>";
                var next = "Next results";
                if (d)
                    next = "<a href='#' onclick='GetMoreResults("+getMoreNum+");'>"+next+"</a>";
                UpdateHTML("findMoreText1", "(" + prev + ")");
                UpdateHTML("findMoreText2", "(" + next + ")");
            }
    
    getMoreStart = start + more;
    getMoreNum = num;
    
    try{
        InitFindLayer();
        map.Find('pizza', 'Mumbai', null, findLayer, getMoreStart, getMoreNum, null, null, null, null, cb);
    }
    catch(e)
    {
        UpdateHTML("findDoneText", "<tt style='color:Red;'>Error: " + e.message + "</tt>");
    }
}

function NotCreatingResultUI()
{
    DoAlert(
        "<div class='alertbox'>"+
        "    <div class='section'>"+
        "        <div class='top'>"+
        "            <span class='header'>Not creating results</span>"+
        "            <span class='instruction'>This property determines if the shape is created or not.</span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'><label for='findWhat'>What:</label></span>"+
        "            <span class='mid'><input id='findWhat' type='text' value='pizza' style='width:99%;'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='small'><label for='findWhere'>Where:</label></span>"+
        "            <span class='mid'><input id='findWhere' type='text' value='Mumbai' style='width:99%;'/></span>"+
        "        </div>"+
        "        <div class='option'>"+
        "            <span class='mid' style='text-align:right;'></span>"+
        "            <span class='mid'><input id='Find' value='Find' type='button' class=fancyButton onclick='NotCreatingResult(this);'/></span>"+
        "        </div>      "+
        "    </div>"+
        "    <div class='section' id='findDoneText'>"+
        "    </div>"+
        "</div>");    
    
}

function NotCreatingResult(c)
{
    UpdateHTML("findDoneText", "");
    
    var what = document.getElementById("findWhat").value;
    var where = document.getElementById("findWhere").value;
    var cb = function(a,b,c,d,e) 
            {
                var r;
                if (b)
                {
                    r = "The following results were found, but not added to the map.";
                    for(var i=0;i<b.length;i++)
                    {
                        r+="<br>"+i+") "+b[i].Name;
                    }
                }
                else
                    r = "No results found.";
                UpdateHTML("findDoneText", r);
            };
    try{
        map.Find(what, where, null, findLayer, null, null, null, false, null, null, cb);
    }
    catch(e)
    {
        UpdateHTML("findDoneText", "<tt style='color:Red;'>Error: " + e.message + "</tt>");
    }
}

function DoGetTrafficUI()
{
    var Location = new VELatLong(47.64, -122.23);

    map.LoadMap(Location, 9);

  DoAlert(
	  "<div class='alertbox'>" +
	  "    <div class='section'>"+
	  "        <div class='top'>"+
	  "            <span class='header'>Show/hide Traffic</span>"+
	  "            <span class='instruction'>Click the button to show or hide the traffic information.</span>"+
	  "        </div>"+
	  "        <div class='option'>"+
	  "            <span class='mid'><input id='ShowTraffic' value='Show Traffic' type='button' class=fancyButton onclick='DoShowTraffic();'/></span>"+
	  "            <span class='mid'><input id='HideTraffic' value='Hide Traffic' type='button' class=fancyButton onclick='DoHideTraffic();'/></span>"+
	  "        </div>"+
	  "    </div>"+
	  "</div>");
}

function DoShowTraffic()
{
    map.LoadTraffic(true);
    //    map.ShowTrafficLegend(50,50);
    //    map.SetTrafficLegendText("The traffic dude!");
}

function DoHideTraffic()
{
    map.ClearTraffic();
}