function handle(delta) {
/// <summary>This is high-level function; REPLACE IT WITH YOUR CODE.
/// It must react to delta being more/less than zero.</summary>
/// <remarks>http://adomas.org/javascript-mouse-wheel/plain.html</remarks>
//    alert(canMouseWheel);
//    canMouseWheel = true;
    if (canMouseWheel)
    {
	    if (delta < 0)
	    {
	        onZoomOut (1);
		    //alert ('up');
	    } else {
	        onZoomIn (1);
		    // alert ('down')
		}
    }
}

function wheel(event){
/// <remarks>http://adomas.org/javascript-mouse-wheel/plain.html</remarks>
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}


/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;


/// <summary>Begin drag point</summary>
var dragBeginX; var dragBeginY;
/// <summary>Turn dragging on (for debugging really)</summary>
var enableDrag = true;

function onMouseDown (sender, mouseEventArgs)
{
/// <summary>Store location of Mouse click for onMouseUp event</summary>
    beginX = mouseEventArgs.getPosition(null).x;
    beginY = mouseEventArgs.getPosition(null).y;
    isMouseDown = true;
    sender.captureMouse();
    
    // do nothing 'interactively', call MoveMap() in onMouseUp()
    if (enableDrag)
    {
        dragBeginX = beginX;
        dragBeginY = beginY;
    }
}


function onMouseMove (sender, mouseEventArgs)
{
/// <summary>
/// While the mouse is moving, drag the tile canvas along with it!
/// </summary>
    var currX = mouseEventArgs.getPosition(null).x;
    var currY = mouseEventArgs.getPosition(null).y;
    if (isMouseDown == true)
    {   
        // do nothing 'interactively', call MoveMap() in onMouseUp()
        if (enableDrag)
        {
        
            var plugin = document.getElementById("SilverlightControl");
            var canvasMarkers = plugin.content.findName("canvasMarkers");
            
            canvasMarkers["Canvas.Left"] += currX - dragBeginX;
            canvasMarkers["Canvas.Top"] += currY - dragBeginY;
            
            sender["Canvas.Left"] += currX - dragBeginX;
            sender["Canvas.Top"] += currY - dragBeginY;
            dragBeginX = currX;
            dragBeginY = currY;

        }
        else
        {
            onMoveDisplayDebug(currX, currY);
        }
    }
    else
    {
        try
        {
            onMoveDisplayDebug(currX, currY);
        }
        catch (exception) 
        {
            // oops, may have mous-overed before loading finished
        }
    }
}

function onMouseUp (sender, mouseEventArgs)
{
/// <summary>
/// JUST figure out the clicked pixel in the Viewport and World context
/// </summary>
    isMouseDown = false;
    sender.releaseMouseCapture();
    
    // where was click within VIEWport?
    var clickX = mouseEventArgs.getPosition(null).x;
    var clickY = mouseEventArgs.getPosition(null).y;


        
    if (enableDrag)
    {
        //alert (sender["Canvas.Left"] + ',' + sender["Canvas.Top"] + '\r\n\r\n' + CENTER.X + ',' + CENTER.Y);
        //var moveTilesX = Math.round((beginX - clickX) / TILE_SIZE);
        //var moveTilesY = Math.round((beginY - clickY) / TILE_SIZE);
        //alert (beginX +','+ beginY + ' -- ' + clickX +','+ clickY + '\r\n\r\n'+ movex +','+ movey);
        //onMoveMap (moveTilesX, moveTilesY);
        
        MoveMapByPixels ((beginX - clickX),(beginY - clickY));
        sender["Canvas.Left"] = sender["Canvas.Left"] + (beginX - clickX);
        sender["Canvas.Top"]  = sender["Canvas.Top"]  + (beginY - clickY);
        
        var plugin = document.getElementById("SilverlightControl");
        var canvasMarkers = plugin.content.findName("canvasMarkers");
        
        setCanvasOffset((canvasMarkers["Canvas.Left"]%256) , (canvasMarkers["Canvas.Top"]%256));
        //alert ((canvasMarkers["Canvas.Left"]%256) +','+(canvasMarkers["Canvas.Top"]%256));
    } 
    else
    {
     // new center is VIEWport TopLeft PLUS click location
    //    CENTER.X = (VIEW.Left + dragBeginX);  
    //    CENTER.Y = (VIEW.Top + dragBeginY); 

        // now we've stored the centre point where mouseup occurred,
        // see if there was a drag (must be bigger than a tile)    
        var movex = Math.round((beginX - clickX) / TILE_SIZE);
        var movey = Math.round((beginY - clickY) / TILE_SIZE);
        onMoveMap (movex, movey);

//        ClearMarkers();
//        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);
    }
}

function onMouseEnter(sender, mouseEventArgs)
{
/// <summary>
/// Because we're using Javascript and the browser to 'trap'
/// the mouse wheel events, we manually keep track of whether 
/// the mouse is _in_ the Silverlight control
/// </summary>
    canMouseWheel = true;
}

function onMouseLeave(sender, eventArgs)
{
/// <summary>
/// Because we're using Javascript and the browser to 'trap'
/// the mouse wheel events, we manually keep track of whether 
/// the mouse is _in_ the Silverlight control
/// </summary>
    canMouseWheel = false;
}

function onKeyUp(event) 
{
/// <summary>
/// Handle body.onkeydown event to allow arrow-key navigation
/// ONLY when canMouseWheel (indicates Silverlight "has focus")
/// so we don't block typing or arrowing in the search box
/// <summary>
/// <remarks>
/// Enum of the integer-key mappings
/// http://weblogs.asp.net/jgalloway/archive/2007/07/02/some-keyboard-input-tricks-for-silverlight-1-1-alpha.aspx
/// </remarks>
    //alert (event);
    if (event && canMouseWheel)
    {
        //alert (window.event.keyCode);
        switch (event.keyCode) 
        {
            case 33, 61, 107: // page-up, Shift+, Keypad+
                onZoomIn(1); break;
            case 34, 109: // page-down, -
                onZoomOut(1); break;
            case 37: // left arrow
                onMoveMap(-1,0); break;
            case 38: // up arrow
                onMoveMap(0,-1); break;
            case 39: // right arrow
                onMoveMap(1,0); break;
            case 40: // down arrow
                onMoveMap(0,1); break;
        }
        event.returnValue = false;
    }
}