//DrawerView
//Nick Oliver for EvansTools.com
//last edited 2010/7/28
//Code to add to HTML page:
/*
<!-- This Section is for Drawer View Instructions -->
		<script language="javascript" src="drawerView.js" type="text/javascript"></script>
		<script language="javascript" type="text/javascript">
			drawerImageList = new Array("(original image path)","(drawer 1 image path)","(drawer 2 image path)","(etc)");
			createDrawerViewer();
		</script>
		<map name="drawerViewMap" id="drawerViewMap">
			---for drawer 1:---
			<area shape="rect" coords="1,1,999,999"  onmouseover="identifyDrawer(this, 1);" onmousedown="switchDrawer(1);" alt="1" nohref="nohref" />
			---*etc.*---
		</map>
<!-- End of Drawer View Instructions -->
*/

//create an encapsulator
document.write("<div id=\"drawerViewEncapsulator\" style=\"width:1px;height:1px;\">&nbsp;</div>");
//listen for keypresses
if (document.addEventListener){ document.addEventListener("keydown",keyDownHandler,false); } else if (document.attachEvent){ document.attachEvent("onkeydown",keyDownHandler); }
//listen for scrolling
if (document.addEventListener){document.addEventListener("scroll",drawerViewScrollHandler,false);}else if(window.attachEvent){window.attachEvent("onscroll",drawerViewScrollHandler);}

//future functionality: changing the selector picture, for example, opening each drawer in the selector as it is displayed in the viewer
//var openDrawerImageList = new Array("E9532.jpg","E9532_1o.jpg","E9532_2o.jpg","E9532_3o.jpg"); //var openDrawerImageList = new Array("E9532.jpg","E9532b.jpg","DrawerOpen2ORIG.jpg","DrawerOpen3ORIG.jpg"); //var openDrawerImageList = new Array(); var drawerImageList = new Array();
var enableDrawerSelectorChange = false;
var currentIDDrawer = 1;
var drawersOrPallets = "drawer";
var cabinetOrCase = "cabinet";
var loadingImage = new Image(); loadingImage.src = "assets/templates/default/images/loading.gif";
//var drawerImageList = new Array("E9532.jpg","E9532_1.jpg","E9532_2.jpg","E9532_3.jpg");


function createDrawerViewer()
{
	//TODO: rewrite using better practices
	var temp = "";
	temp += "<div id=\"fogDrawerView\" style=\"background:url('assets/templates/default/images/fog.png') repeat;position:absolute;top:0px;left:0px;width:100%;height:100%;display:none;min-height:500px;min-width:700px;text-align:left;z-index:99999999999;\" onkeydown=\"keyDownHandler(event);\">\n";
	temp += "	<div style=\"position:relative;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;top:5%;background-color:white;height:500px;width:700px;border:medium black solid;overflow:hidden;\">\n";
	temp += "		<div style=\"background:url('assets/templates/default/images/close.png') no-repeat;position:absolute;top:0px;right:0px;width:50px;height:50px;cursor:pointer;\" onclick=\"hideDrawerView();\">&nbsp;</div>\n";
	temp += "		<div id=\"drawerViewerContainer\" style=\"position:relative;top:10px;left:10px;height:350px;width:300px;\">\n";
	temp += "			<img src=\""+drawerImageList[0]+"\" usemap=\"#drawerViewMap\" id=\"drawerSelector\" style=\"border:none;\"/>\n";
	temp += "			<div id=\"drawerViewerIndentifier\" style=\"height:22px;width:22px;background:url('assets/templates/default/images/idBubble.png') no-repeat;position:relative;text-align:center;\" onclick=\"switchDrawer(currentIDDrawer);\"></div>\n";
	temp += "		</div>\n";
	temp += "		<div style=\"position:relative;top:10px;left:10px;width:300px;\">\n";
	temp += "				<p><img src=\"assets/templates/default/images/arrowUp.png\" />Hover your mouse over the top "+cabinetOrCase+" to identify individual "+drawersOrPallets+"s.</p>\n";
	temp += "				<p>Click on a "+drawersOrPallets+" above to view it in detail to the right.<img src=\"assets/templates/default/images/arrowRight.png\" /></p>\n";
	temp += "				<!-- <p>Also, feel free to use the arrow, enter, and escape keys</p> -->\n";
	temp += "		</div>\n";
	temp += "		<div style=\"background:url('assets/templates/default/images/arrowLarge.png') no-repeat;height:150px;width:350px;position:relative;top:-471px;left:315px;\">&nbsp;</div>\n";
	temp += "		<div style=\"position:relative;left:315px;top:-470px;text-align:center;width:350px;\">\n";
	temp += "			<div id=\"drawerViewerTitle\" style=\"text-align:center;\">Select a "+drawersOrPallets+"!</div>\n";
	temp += "<!--						<div style=\"display:table-cell;text-align:center;vertical-align:middle;height:300px;width:350px;\"> -->\n";
	temp += "				<img src=\""+drawerImageList[1]+"\" id=\"drawerViewer\" style=\"vertical-align:middle;\" />\n";
	temp += "<!--						</div>		-->	\n";
	temp += "		</div>\n";
	temp += "	</div>\n";
	temp += "</div>\n";
/*////
temp = temp.replace("assets/templates/default/images/","");
temp = temp.replace("assets/templates/default/images/","");
temp = temp.replace("assets/templates/default/images/","");
temp = temp.replace("assets/templates/default/images/","");
temp = temp.replace("assets/templates/default/images/","");
temp = temp.replace("assets/templates/default/images/",""); //*/
	document.getElementById("drawerViewEncapsulator").innerHTML = temp;
}

function displayDrawerView()
{
	//show the fog
	if(!document.getElementById("fogDrawerView")) { createDrawerViewer(); } //ensure the drawerViewer has been created
	document.getElementById("fogDrawerView").style.display = "";
	var tempY = 0; //find the top of the scolled view
	if(document.documentElement.scrollTop){	tempY = document.documentElement.scrollTop; }
	else if(document.body.scrollTop){ tempY = document.body.scrollTop; }
	document.getElementById("fogDrawerView").style.top = tempY + "px"; //and place the drawerViewer at the top of the scrolled view

/*	if(document.getElementById("fogDrawerView"))
	{
		document.getElementById("fogDrawerView").style.display = "";
		var tempY = 0;
		if(document.documentElement.scrollTop){	tempY = document.documentElement.scrollTop; }
		else if(document.body.scrollTop){ tempY = document.body.scrollTop; }
		document.getElementById("fogDrawerView").style.top = tempY + "px";
	} */
	//start out the identifier at the first drawer
	identifyDrawer(document.getElementById("drawerViewMap").areas[currentIDDrawer - 1],currentIDDrawer);
	switchDrawer(currentIDDrawer);
}
function hideDrawerView()
{ 
	if(document.getElementById("fogDrawerView")){document.getElementById("fogDrawerView").style.display="none";} 
}

function switchDrawer(newDrawer)
{	
	if((document.getElementById("drawerViewer"))&&(newDrawer<=(drawerImageList.length-1)))
	{
		document.getElementById("drawerViewer").src = loadingImage.src; //show loading image while drawer image is fetched (for slower connections or first-time view)
		document.getElementById("drawerViewer").src = drawerImageList[newDrawer]; //show drawer image
		document.getElementById("drawerViewerTitle").innerHTML = drawersOrPallets.substring(0,1).toUpperCase() + drawersOrPallets.substring(1,drawersOrPallets.length) +" "+newDrawer; //label the drawer
/* future functionality
		if(enableDrawerSelectorChange && document.getElementById("drawerSelector") && (openDrawerImageList.length > 0) && (newDrawer <= openDrawerImageList.length) )
		{ document.getElementById("drawerSelector").src = openDrawerImageList[newDrawer]; }//*/
	}
}

function identifyDrawer(mapArea, drawerNumber)
{
	var container = document.getElementById("drawerViewerContainer");
	var identifier = document.getElementById("drawerViewerIndentifier");
	var selector = document.getElementById("drawerSelector");
	
	if(container && identifier && mapArea)
	{
		var drawerBoundsCoords = mapArea.coords;
		drawerBoundsCoords = drawerBoundsCoords.split(",");
		var drawerMidX = (parseInt(drawerBoundsCoords[0]) + parseInt(drawerBoundsCoords[2]))/2;
		var drawerMidY = (parseInt(drawerBoundsCoords[1]) + parseInt(drawerBoundsCoords[3]))/2;
		identifier.innerHTML = drawerNumber;
		
		//drawerMidX = drawerMidX - selector.offsetWidth - identifier.offsetWidth/2; //for archive reasons, when drawerViewerIndentifier is a span
		//drawerMidY = drawerMidY + (identifier.offsetHeight/2) - selector.offsetHeight; //for archive reasons, when drawerViewerIndentifier is a span
		drawerMidX = drawerMidX - identifier.offsetWidth/2; // drawerViewerIndentifier is a div
		drawerMidY = drawerMidY - (identifier.offsetHeight/2) - selector.offsetHeight +2; // drawerViewerIndentifier is a div
		
		identifier.style.left = drawerMidX+"px";
		identifier.style.top = drawerMidY+"px";
		currentIDDrawer = drawerNumber;
	}
}

function keyDownHandler(e){
	//alert(e.keyCode);
	var drawerList = document.getElementById("drawerViewMap").areas;
	switch(e.keyCode)
	{
		case 27:	//ESC
			//close the "window"
			hideDrawerView();
			break;
		case 13:	//Enter
			//change the displayed drawer
			switchDrawer(currentIDDrawer);
			break;
		case 37:	//left
		case 52:	//num left
		case 100:	//4 left
		case 104:	//8 up
		case 56:	//num up
		case 38:	//up
			//decrement id drawer
			currentIDDrawer--;
			if(currentIDDrawer<1){ currentIDDrawer = drawerList.length; }
			identifyDrawer(drawerList[currentIDDrawer-1], currentIDDrawer);
			break;
		case 39:	//right
		case 54:	//num right
		case 102:	//6 right
		case 98:	//2 down
		case 50:	//num down
		case 40:	//down
			//increment id drawer
			currentIDDrawer++;
			if(currentIDDrawer>drawerList.length){ currentIDDrawer = 1; }
			identifyDrawer(drawerList[currentIDDrawer-1], currentIDDrawer);
			break;
	}
}
///
function drawerViewScrollHandler(e)
{
	var tempY = 0;
	if(document.documentElement.scrollTop){	tempY = document.documentElement.scrollTop; }
	else if(document.body.scrollTop){ tempY = document.body.scrollTop; }
	if(document.getElementById("fogDrawerView")){document.getElementById("fogDrawerView").style.top=tempY + "px";}
}
//*/