function Zoom (toLevel)
{
/// <summary>
/// 
/// </summary>
/// <param name="toLevel">(mandatory) </param>
    if (toLevel < MIN_ZOOM_LEVEL) {zoom = (MIN_ZOOM_LEVEL +1); alert ('Cannot zoom out further ' + (MIN_ZOOM_LEVEL + 1) ); return; }
    if (toLevel > MAX_ZOOM_LEVEL) {zoom = MAX_ZOOM_LEVEL ;     alert ('Can only zoom to ' + MAX_ZOOM_LEVEL); return; }
    zoom = toLevel;
    
    document.getElementById('selZoom').selectedIndex = (toLevel - 1); // HACK: error occurs here...
    // TODO: redraw markers after zoom
    ClearMarkers();
    
    // CURRENT POSITION: figure out how far 'across' the world the center coordinate is        
    var xPercent = (CENTER.X / WORLD.PixelSize);
    var yPercent = (CENTER.Y / WORLD.PixelSize);
    //alert (CENTER.X + ',' + CENTER.Y + ' percent: '+xPercent + ',' + yPercent + ' of ' + WORLD.PixelSize);
    
    // NEW POSITION: now set the zoom and recalculate CENTER
    WORLD.set_Zoom(toLevel);
    CENTER.X = (xPercent * WORLD.PixelSize);
    CENTER.Y = (yPercent * WORLD.PixelSize);
    
    // NEW TILE COL/ROW
    var col = Math.floor(CENTER.X / TILE_SIZE); // -1 TODO: fix the col/row
    var row = Math.floor(CENTER.Y / TILE_SIZE); // -1
    
    // NEW TopLeft is new CENTER-TILE LESS half the height/width
    var centerTileX = col * TILE_SIZE;
    var centerTileY = row * TILE_SIZE;

    // centerTile is (for now) actually TopLeft tile
    //VIEW.Left = centerTileX; // - (VIEW.Width / 2); 
    //VIEW.Top  = centerTileY; // - (VIEW.Height / 2);

    // now we know where we're zooming too... - maybe get tile, then get relative from there to find the top-left one
    
    drawGridCentered(col, row, WORLD.Zoom);
    /* re-fill markers */
    
    //drawFlag ('click', CENTER.X - VIEW.Left, CENTER.Y - VIEW.Top);
    //var offsetX = (VIEW.Width/2) - (CENTER.X - VIEW.Left);
    //var offsetY = (VIEW.Height/2) - (CENTER.Y - VIEW.Top);
    
    //setCanvasOffset(offsetX , offsetY);

//    document.getElementById('tiles').innerHTML  += '<br />' + col +',' + row
//        +'\r\n<br />VIEW Left/Top:  ' + VIEW.Left + ',' + VIEW.Top
//        + '\r\n<br />CENTER:' + CENTER.X + ',' + CENTER.Y;
}
function onZoomIn (deltaLevel)
{
/// <summary>
/// Zoom into the current center point
/// </summary>
/// <param name="deltaLevel">(optional) if not specified, zoom will be incremented by 1</param>
    var zoom = WORLD.Zoom;
    if (deltaLevel) {zoom = zoom + deltaLevel;} else {zoom = (zoom + 1);}
    Zoom (zoom);
}
function onZoomOut (deltaLevel)
{
/// <summary>
/// Zoom out from the current center point
/// </summary>
/// <param name="deltaLevel">(optional) if not specified, zoom will be decremented by 1</param>
    var zoom = WORLD.Zoom;
    if (deltaLevel) {zoom = zoom - deltaLevel;} else {zoom = (zoom - 1);}
    Zoom (zoom);
}


function onGo()
{
/// <summary>Go to a specific long/lat coordinate</summary>
   var lon = document.getElementById('txtLongitude').value * 1;
   var lat = document.getElementById('txtLatitude').value * 1;
   var p = WORLD.get_Point(lon, lat);
   CENTER.X = p.X;
   CENTER.Y = p.Y;
   var z = document.getElementById('txtZoom').value * 1;
   Zoom(z);
}
function onGoParameters(lon, lat, zom)
{
    document.getElementById('txtLongitude').value = lon+'';
    document.getElementById('txtLatitude').value = lat+'';
    document.getElementById('txtZoom').value = zom+'';
    onGo();
}

function onLabelClick (sender, eventArgs)
{
/// <summary>
/// 
/// </summary>
    var slite = document.getElementById("SilverlightControl");
    var canvas = slite.content.findName("canvas");     // ??
    var radioChecked = canvas.findName("labelRadioChecked");
    var radioCheckedBaseTop = 7;
    var radioCheckedDelta = 15;
    var radioCheckedIndex = 0;
    
    setCopyrightText('virtualearth.net');
    
    MAX_ZOOM_LEVEL=19; 
    switch (sender.name)
    {
        case 'labelMsVeRoad':
            GLOBE = 'earth';        radioCheckedIndex = 0;
            break;
        case 'labelMsVeRoadShade':
            GLOBE = 'earth2';        radioCheckedIndex = 1;
            break;
        case 'labelMsVeSatellite':
            GLOBE = 'earths';        radioCheckedIndex = 2;
            break;
        case 'labelMsVeHybrid':
            GLOBE = 'earthh';        radioCheckedIndex = 3;
            break;
        case 'labelGoogleSatellite':
            GLOBE = 'earthg';        radioCheckedIndex = 4;
            setCopyrightText('maps.google.com');
            break;
        case 'labelGoogleRoad':
            GLOBE = 'earthgr';        radioCheckedIndex = 5;
            setCopyrightText('maps.google.com');
            break;
        case 'labelGoogleTopo':
            GLOBE = 'earthgt';        radioCheckedIndex = 6;
            setCopyrightText('maps.google.com');
            MAX_ZOOM_LEVEL=16; 
            break;
        case 'labelGoogleHybrid':
            GLOBE = 'earthgh';        radioCheckedIndex = 7;
            setCopyrightText('maps.google.com');
            break;
        case 'labelYahooRoad':
            GLOBE = 'earthy';        radioCheckedIndex = 8;
            setCopyrightText('maps.yahoo.com');
            break;   
        case 'labelYahooSatellite':
            GLOBE = 'earthys';        radioCheckedIndex = 9;
            setCopyrightText('maps.yahoo.com');
            break;   
        case 'labelYahooHybrid':
            GLOBE = 'earthyh';        radioCheckedIndex = 10;
            setCopyrightText('maps.yahoo.com');
            break;   
        default:
            GLOBE = 'earth';        radioCheckedIndex = 0;
            break;
    }
    radioChecked["Canvas.Top"] = radioCheckedBaseTop + (radioCheckedDelta * radioCheckedIndex);
    Zoom (WORLD.Zoom); 
    return false;
}

function onLinkToDraw (sender, eventArgs)
{
/// <summary>
/// link clicked to 'enable' drawing
/// </summary>
   var slite = document.getElementById("SilverlightControl");
   var root = slite.content.findName("canvasInk");    
   root.Visibility = "Visible";
   root["IsHitTestVisible"] = true;
}
function onLinkToCancelDraw (sender, eventArgs)
{
/// <summary>
/// link clicked to 'DISable' drawing
/// </summary>
    var slite = document.getElementById("SilverlightControl");
    var root = slite.content.findName("canvasInk");    
    var inkPres = root.findName("inkPresenterElement");    
    if (confirm("Are you sure you wish to discard this ink?\r\nIf you wish to save it, press [Cancel] then click the save icon."))
    {
        inkPres.Strokes.Clear();
        root.Visibility = "Collapsed";
        root["IsHitTestVisible"] = false;
    }
}
function onLinkToSaveDraw (sender, eventArgs)
{
/// <summary>
/// link clicked to 'DISable' drawing
/// </summary>
    var slite = document.getElementById("SilverlightControl");
    var root = slite.content.findName("canvasInk");    
    var inkPres = root.findName("inkPresenterElement");    

    var xmlInk = saveStrokesXYOnly(inkPres.Strokes);
    var xmlobject;
   
    alert ("SORRY - Save is not yet implemented.\r\n\r\nPress the X to cancel drawing.");
    return;
    
    // http://www.w3schools.com/dom/dom_parser.asp
    if (window.ActiveXObject)
    {   // code for IE
        xmlobject=new ActiveXObject("Microsoft.XMLDOM");
        xmlobject.async="false";
        xmlobject.loadXML(xmlInk);
    }
    else
    {   // code for Mozilla, Firefox, Opera, etc.
        // http://www.captain.at/howto-javascript-convert-string-to-xml-to-string.php
        var parser=new DOMParser();
        xmlobject=parser.parseFromString(xmlInk,"text/xml");
    }
   
    //alert ( xmlobject );
    //alert ( loadStrokes(xmlobject) );

    root.Visibility = "Collapsed";
    root["IsHitTestVisible"] = false;
}


function onArrowClick(sender, eventArgs)
{
/// <summary>
/// arrow 'xaml elements' clicked
/// </summary>
    switch (sender.name)
    {
         case 'arrowLeft':
            onMoveMap(-1,0);
            break;
        case 'arrowUp':
            onMoveMap(0,-1);
            break;
        case 'arrowRight':
            onMoveMap(1,0);
            break;
        case 'arrowDown':
            onMoveMap(0,1);
            break;
    }
}

function onZoomClick(sender, eventArgs)
{
/// <summary>
/// plus/minus 'xaml elements' clicked
/// </summary>
    switch (sender.name)
    {
        case 'zoomIn':
            onZoomIn(1);
            break;
        case 'zoomOut':
            onZoomOut(1);
            break;
    }
}





/*
CALLBACK FOR SEARCH INPUT BOX/FORM
*/
function OnError(message, context) 
{
/// <summary>
/// Error handler for async communication
/// </summary>
    alert('An unhandled exception has occurred during search:\n' + message);
}
function ReceiveServerData(arg, context)
{
/// <summary>
/// Called by asynchronous method that geocodes search queries.
/// We expect to get back a single string which is the lat/long coordinate
/// (if it was found).
/// </summary>
   var ll = arg.split(',');
   if (ll.length == 2)
   {
       var lon = ll[1] * 1;
       var lat = ll[0] * 1;
       GoLongLatZoom (lon, lat, 12);
   }
   else
   {
       if (arg.charAt(0) == "{")
       {
            var gaml = eval('(' + arg + ')');
            var xaml = gaml.xaml;
            
            GoLongLatZoom (gaml.longitude, gaml.latitude, gaml.zoom);
            
            var plugin = document.getElementById("SilverlightControl");
            var canvas = plugin.content.findName("canvasMarkers");
            var pt = WORLD.get_Point(gaml.longitude, gaml.latitude);
            
            pt.X -= VIEW.Left;
            pt.Y -= VIEW.Top;               // alert (pt.X + ',' + pt.Y + '\r\n' + VIEW.toString() );
            
            pt.X += (VIEW.Width / 2);
            pt.Y += (VIEW.Height / 2);
            
            xaml = xaml.replace(/\$\(longitude\)\$/, pt.X);
            xaml = xaml.replace(/\$\(latitude\)\$/, pt.Y);
            
            var xamlC  = plugin.content.createFromXaml(xaml);
            canvas.children.add(xamlC);
       }
       else 
       {
        alert ('Could not locate ' + document.getElementById('q').innerText);
        document.getElementById('q').focus();
       }
   }
}
function GoLongLat (lon, lat)
{
/// <summary>
/// Go to a specific coordinate, using the Zoom from the DDLB
/// </summary>
   var z = (document.getElementById('selZoom').selectedIndex * 1) + 1;
   GoLongLatZoom (lon, lat, z);
}
function GoLatLongZoom (lat, lon, z, map)
{
/// <summary>
/// Go to a specific coordinate and Zoom level, but with Lat, Long parameters 'reversed'
/// </summary>
/// <remarks>TODO: make this obsolete - it grew out of a typo anyway</remarks>
    GLOBE = map;
    return GoLongLatZoom (lon, lat, z);
}
function GoLongLatZoom (lon, lat, z)
{
/// <summary>
/// Go to a specific coordinate and zoom level
/// </summary>
   var p = WORLD.get_Point(lon, lat);
   CENTER.X = p.X;
   CENTER.Y = p.Y;
   Zoom(z);
}