//--- Show-Hide menu options
var prevPopup				= null;
var timerID					= "global";
var xoffset					= 5;
var yoffset					= -15;
var popX, popY				= 0;
var ww, wh					= 0;
var tx, ty					= 0;
var parentx, parenty		= 0;

// detail variables
var prevDetail				= null;
var detailTimerID			= "global";
var detailXoffset			= 75;
var detailYoffset			= 25;

var waitTimerID				= "global";



function showPopup(popupID){
	if(prevPopup!=null){
		//--- another popup layer is visible
		if(prevPopup!=popupID){
			//--- cursor is over a new thumb - hide the current popup
			hide(prevPopup);
			prevPopup = null;
		}
	}
	if(prevDetail!=null){
		//--- another detail layer is visible
		hide(prevDetail);
		prevDetail = null;
	}

	clearTimeout(waitTimerID);
	waitTimerID = eval("setTimeout(\"showPopup2('"+popupID+"');\",750);");
}

function showPopup2(popupID){
	if(prevPopup!=null){
		//--- another popup layer is visible
		if(prevPopup!=popupID){
			//--- cursor is over a new thumb - hide the current popup
			hide(prevPopup);
			prevPopup = null;
		}
	}
	if(prevDetail!=null){
		//--- another detail layer is visible
		hide(prevDetail);
		prevDetail = null;
	}

	if(document.layers){
		//NN4+
		document.layers[popupID].visibility = "show";
		//window.innerHeight/Width 
	}
	
	else if(document.getElementById){
		//--- get thumb object
		thumbID = popupID.replace("popup","thumb");

		//--- get thumb size
		tw = document.all[thumbID].offsetWidth;
		th = document.all[thumbID].offsetHeight;
		
		// --- get popup width & height
		pw = document.all[popupID].offsetWidth;
		ph = document.all[popupID].offsetHeight;

		//--- get thumb location from top left corner of window
		getPosition(thumbID);		//--- tx & ty
		
		//--- get screen width & height
		getWindowSize();			//--- ww & wh

		//--- get pagecontainer position
		containerX = document.getElementById('container').offsetLeft;
		containerY = document.getElementById('container').offsetTop;
		
		//--- get window scroll amounts
		sx = document.body.scrollLeft;
		sy = document.body.scrollTop;

		//--- display results
		//alert('thumb width:'+tw+'   thumb height:'+th+'\npopup width:'+pw+'   popup height:'+ph+'\nwindow width:'+ww+'   window height:'+wh+'\nthumb Xpos:'+tx+'   thumb Ypos:'+ty+'\ncontainer Xpos:'+containerX+'   container Ypos:'+containerY);
		
		
		//--- set X location for popup
		if((tx+tw+xoffset+pw)<ww){
			px=tx+tw+xoffset-containerX;
			//alert('within window : '+px);
		}else{
			px=ww-xoffset-pw-containerX;
			//alert('outside window : '+px);
			if(px<xoffset)px=xoffset;		//--- if position is off left edge of page 
		}
		
		
		//--- set Y location for popup
		if((ty+ph-sy)<wh && (ty>sy)){
			//--- normal - no vertical(y) edge of image is off screen
			//--- invert y if negative
			py=ty+yoffset;
		}
		else if(ty<sy){
			//--- top edge is off top of screen
			py=sy+yoffset;
		}
		else{
			//--- bottom edge is off the screen
			if(yoffset<0){yoffset = yoffset*(-1);}  //invert if negative
			py=wh-ph-yoffset+sy;
		}
		//--- store popX & popY for detail positioning
		popX=px; popY=py;
		
		//--- set location for popup
		document.all[popupID].style.left = px;
		document.all[popupID].style.top = py;

		var obj = document.getElementById(popupID);
		obj.style.visibility = "visible";
	}
	else if(document.all){
		// IE 4
		document.all[popupID].style.visibility = "visible";
	}
	prevPopup = popupID;
	stopHideTimer();
}


function hide(ID){
	// generic HIDE function for both popups & details
	if(document.layers){
		//NN4+
		document.layers[ID].visibility = "hide";
	}
	else if(document.getElementById){
		//gecko(NN6) + IE 5+
		var obj = document.getElementById(ID);
		obj.style.visibility = "hidden";
	}
	else if(document.all){
		// IE 4
		document.all[ID].style.visibility = "hidden";
	}
}


function startHideTimer(ID){
	//--- start timer to hide the div with the 'ID' after a second
	clearTimeout(waitTimerID);
	if (prevDetail==null) {
		stopHideTimer();
		timerID = setTimeout("hidePopup()", 1000);
	}
}


function stopHideTimer(){
	//--- cancel the hide timer
	clearTimeout(timerID);
}


function hidePopup(){
	//--- another popup div is visible - hide it
	if(prevPopup!=null){
		hide(prevPopup);
		prevPopup = null;
	}
}


function getWindowSize() {
	var myWidth=0, myHeight=0;
	if( typeof( window.innerWidth ) == 'number' ) {
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	//--- window.alert( 'Width = ' + myWidth + ' and height = ' + myHeight );
	ww = myWidth;
	wh = myHeight;
}


function getPosition(id) {
	var osL=0, osT=0;
	osL = document.getElementById(id).offsetLeft;
	osT = document.getElementById(id).offsetTop;
	parentObj = document.getElementById(id).offsetParent;
	while (parentObj != document.body) {
		osL += parentObj.offsetLeft;
		osT += parentObj.offsetTop;
		parentObj = parentObj.offsetParent;
	}
	tx = osL;
	ty = osT;
}


function getParentPosition(id) {
	var osL=0, osT=0;
	parentObj = document.getElementById(id).offsetParent;
	while (parentObj != document.body) {
		//alert(parentObj.id);
		osL += parentObj.offsetLeft;
		osT += parentObj.offsetTop;
		parentObj = parentObj.offsetParent;
	}
	parentx = osL;
	parenty = osT;
}


//===========  MATCHING PRODUCT POPUPS  ===========

function showDetail(detailID){
	//--- display the detail div at the current cursor location
	if(prevDetail!=null){
		//--- another layer is visible
		if(prevDetail!=detailID){
			//--- cursor is over a new Detail - hide the current Detail
			hide(prevDetail);
			prevDetail = null;
		}
	}

	if(document.layers){
		//NN4+
		document.layers[detailID].visibility = "show";
		//window.innerHeight/Width 
	}
	else if(document.getElementById){
		//--- get cursor location
		// cx = event.clientX;
		// cy = event.clientY;
		
		// --- get detail width & height
		dw = document.all[detailID].offsetWidth;
		dh = document.all[detailID].offsetHeight;
		
		//--- get screen width & height
		ww = document.body.clientWidth;
		wh = document.body.clientHeight;

		//--- get window scroll amounts
		sx = document.body.scrollLeft;
		sy = document.body.scrollTop;
		
		//--- set X location for detail
		px = popX+detailXoffset;
		py = popY+detailYoffset
		
		//--- check X location for out of bounds
		if((px+dw)>ww) px=ww-dw-10;
		
		//--- check Y location for  out of bounds
		if((py+dh-sy)>wh) py=wh-dh-10;
		
	
		//--- set location for detail
		document.all[detailID].style.left = px;
		document.all[detailID].style.top = py;

		var obj = document.getElementById(detailID);
		obj.style.visibility = "visible";
	}
	else if(document.all){
		// IE 4
		document.all[detailID].style.visibility = "visible";
	}
	prevDetail = detailID;
	stopHideDetailTimer();
}







function startHideDetailTimer(ID){
	//--- start timer to hide the div with the 'ID' after half a second
	stopHideTimer();
	startHideTimer();
	if(ID!=null){
		detailTimerID = eval("setTimeout(\"hideDetail(); showDetail('" + ID + "');\",500);");
	}else{
		detailTimerID = setTimeout("hideDetail()", 1000);
	}
}


function stopHideDetailTimer(){
	//--- cancel the hide timer
	clearTimeout(detailTimerID);
}


function hideDetail(){
	//--- another popup div is visible - hide it
	if(prevDetail!=null){
		hide(prevDetail);
		prevDetail = null;
	}
}