//Make sure canvasses are in the correct position
var mouseIsDown=false;
var selectedMenuItemName="";
var selectedMenuYOffset=0;



const selectMenuNames = ["router","firewall","hub","switch","pc","laptop","server","ip_phone","printer","copier","microwave","fluorescent","wap","wrepeater","wbridge","wrepeater"];
var menuItemSize=50;


function drawSelectMenu()
{
    //console.log("Printing on main canvass");

    MainCanvas_ctx.fillStyle = maincanvasBackground;
    MainCanvas_ctx.fillRect(0, 0, menuItemSize, MainCanvas.height);
    if(selectedMenuYOffset<0) selectedMenuYOffset=0;
    if(selectedMenuYOffset + MainCanvas.height > cachedSelectMenuCanvas.height) selectedMenuYOffset = cachedSelectMenuCanvas.height -MainCanvas.height;
    MainCanvas_ctx.drawImage(cachedSelectMenuCanvas,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height);
    let index = selectMenuNames.indexOf(selectedMenuItemName);

    if(index > -1)
    {
	//We have a selected menu item
	const cachedSelectMenuCanvasOverlay = document.createElement('canvas');
	let boxwidth=3;
	cachedSelectMenuCanvasOverlay.width = cachedSelectMenuCanvas.width;
	cachedSelectMenuCanvasOverlay.height = cachedSelectMenuCanvas.height;
	var overlay = cachedSelectMenuCanvasOverlay.getContext("2d");
	let ty = index * menuItemSize;
	overlay.beginPath();
	overlay.lineWidth = boxwidth;
	overlay.strokeStyle = "green";
	overlay.rect(boxwidth,ty,menuItemSize-(boxwidth * 2),menuItemSize);
	overlay.stroke();
	MainCanvas_ctx.drawImage(cachedSelectMenuCanvasOverlay,0,selectedMenuYOffset,50,MainCanvas.height,0,0,50,MainCanvas.height);
	//console.log("drawing select box around 0," + ty + " -> " + menuItemSize);
    }

    //Now, if we have more to the top or bottom, draw the arrows showing as much
    if(selectedMenuYOffset > (menuItemSize / 2))
    {
	//We have one item above us.  Draw the arrow
	//console.log("Drawing up arrow");
	MainCanvas_ctx.drawImage(imageFromName("ArrowUp"),0,0,50,25);
    }
    //Now, if we have more to the top or bottom, draw the arrows showing as much
    if(selectedMenuYOffset + (MainCanvas.height + 25) < cachedSelectMenuCanvas.height) 
    {
	//We have one item below us.  Draw the arrow
	//console.log("Drawing down arrow");
	MainCanvas_ctx.drawImage(imageFromName("ArrowDown"),0,MainCanvas.height - 25,50,25);
    }
}


function SelectMenu_handleMouseDown(evt)
{
    mouseDownLocation = copyLocation(evt);
    mouseIsDown=true;
}

function SelectMenu_handleMouseUp(evt)
{
    mouseIsDown=false;
    //console.log("mouseup");
    //See if we have a mouse click
    let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX);
    let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY);
    //console.log("delta " + deltaX + "," + deltaY);
    if(deltaY < 3 && deltaX <3)
    {
	//We did not move much.  Assume click
	if(evt.pageX <= menuItemSize && !mouseDidMovement)
	{
	    //We are in the item select menu.
	    let actualMenuLocation = selectedMenuYOffset + evt.pageY;
	    let newitemindex = Math.floor( actualMenuLocation / menuItemSize);
	    console.log("clicked on item " + selectMenuNames[newitemindex]);
	    selectedMenuItemName = selectMenuNames[newitemindex];
	    drawSelectMenu();
	}
    }
    mouseDidMovement=false; //reset it after we raise the button
}


function SelectMenu_handleMouseMove(evt)
{
    if(mouseIsDown)
    {
	let deltaX = evt.pageX - mouseDownLocation.pageX;
	let deltaY = evt.pageY - mouseDownLocation.pageY;
	if(isNaN(deltaY)) deltaY=0;
	if(isNaN(deltaX)) deltaX=0;
	//we are dragging
	//console.log('mousemove ' + evt.pageX + " " + evt.pageY + "  delta " + deltaY );
	selectedMenuYOffset-=deltaY;
	mouseDownLocation = copyLocation(evt); //reset the pointer
	drawSelectMenu();
	mouseDidMovement=true;
    }
}

function copyLocation({ pageX, pageY }) {
  return { pageX, pageY };
}