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='33.0'/></span>" +
        "        </div>" +
        "        <div class='option'>" +
        "            <span class='small'>Longitude:</span>" +
        "            <span class='mid'><input id='loninput' type='text' style='width: 110px' value='-110.5' /></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(43, -100), 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(45.33, -111.27);  // The first # is north/south
    var topRightS1 = new VELatLong(45.33, -96.86);
    var botRightS1 = new VELatLong(37.30, -96.86);
    var botLeftS1 = new VELatLong(37.30, -111.27);

    var topLeftS2 = new VELatLong(41.24, -109.51);
    var topRightS2 = new VELatLong(41.24, -94.39);
    var botRightS2 = new VELatLong(33.50, -94.39);
    var botLeftS2 = new VELatLong(33.50, -109.51);

    var topLeftS3 = new VELatLong(49.32, -104.32);
    var topRightS3 = new VELatLong(49.32, -89.47);
    var botRightS3 = new VELatLong(36.88, -89.47);
    var botLeftS3 = new VELatLong(36.88, -104.32);

    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='40'/></span>" +
        "        </div>" +
        "        <div class='option'>" +
        "            <span class='small'>Longitude:</span>" +
        "            <span class='mid'><input id='panlon' type='text' style='width: 110px' value='-120' /></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'>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='seattle, wa, usa' 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='Las Vegas, NV' 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', 'seattle, wa, usa', 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='seattle, wa, usa' 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();
}