// Russell Thompson
// Project: JavaScript Controled Layered Pop-Ups - stand alone version
// Page: JavaScript general scripts for all browsers - Web 2.0
// March, 2007 - Version 0.1
// 
// Copyright 2007 Russell Thompson, Freelance I.T. Solutions

// *****************************************
// -Use this file with popup.css
// *****************************************

// ------------------------------------------------------------------------------------------------

// global variables
var popupWidth;
var popupHeight;
var pageW;
var pageH;
var mouseX; // this and the next variable show the position of the mouse
var mouseY;
var isIE; // if the visitor is using IE this will be true
var theLocationX; // the value of the object's left location for drag and drop
var theLocationY; // the value of the object's top location for drag and drop
var theDrag = false; // this is for drag and drop
var theID; // for drag and drop
var difX; // for drag and drop
var difY; // for drag and drop

// the getMouseXY function is used to track the mouse for popping up the box at the mouse button
function getMouseXY(e)
{
	if (!e)
	{
		// alert ("not e firing");
		e = window.event; // for IE
	}
	
	if (e.clientX || e.clientY)
	{
		// alert ("in isIE");
		
		mouseX = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
		mouseY = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
	}
	else
	{
		// alert ("not in isIE");
		
		mouseX = e.pageX + pageXOffset;
		mouseY = e.pageY + pageYOffest;
	}
	
	return true;
} // end getMouseXY function

// function to set the size of the pop-up window
function setSize(sizeX, sizeY, smallerBy)
{
	// make sure sizeX, sizeY and smallerBy are numbers
	if (isNaN(sizeX))
	{
		sizeX = parseInt(sizeX);
	}
	
	if (isNaN(sizeY))
	{
		sizeY = parseInt(sizeY);
	}
	
	if (isNaN(smallerBy))
	{
		smallerBy = parseInt(smallerBy);
	}
	
	if (sizeX > 0)
	{
		// the pop-up needs to be set at a specific height and width
		// this height and width is determined by the programmer
		popupWidth = sizeX;
		popupHeight = sizeY;
	}
	else
	{
		// the pop-up's size is to be varyable, dependent on the size of the browser window it is opened in
		
		// the default size is 30px smaller, but the programmer can set this as well
		// if the programmer set a size, the value of smallerBy will be greater than zero
		if (smallerBy > 0)
		{
			popupWidth = pageW - smallerBy;
			popupHeight = pageH - smallerBy;
		}
		else
		{
			popupWidth = pageW - 30;
			popupHeight = pageH - 30;
		}
	}
	
	document.getElementById('menuPopup').style.width = popupWidth + "px";
	document.getElementById('menuPopup').style.height = popupHeight + "px";
	// might need these later...
	// document.getElementById('popupTdB').style.width = (popupWidth - 20) + "px";
	// document.getElementById('popupTdH').style.width = (popupWidth - 20) + "px";
	// document.getElementById('popupTdD').style.height = (popupHeight - 40) + "px";
	// document.getElementById('popupTdF').style.height = (popupHeight - 40) + "px";
	// document.getElementById('popupTdE').style.width = (popupWidth - 20) + "px";
	// document.getElementById('popupTdE').style.height = (popupHeight - 40) + "px";
} // end setSize function

// function to set the location of the pop-up
function setLocation(locationType, locationX, locationY)
{
	// three possible values for locationType
	// first: center - obvious, center the pop-up
	// second: mouse - locate the popup at the mouse coords
	// third: given - put the top left corner where the programmer instructs
	
	switch (locationType)
	{
		case "center":
			placeW = Math.floor((pageW - popupWidth)/2);
			placeH = Math.floor((pageH - popupHeight)/2);
		break;
		
		case "mouse":
			getMouseXY;
			placeW = mouseX + locationX;
			placeH = mouseY + locationY;
			
			// alert ("mouse x: " + mouseX + " and mouse y: " + mouseY);
			// alert ("location x: " + locationX + " and location y: " + locationY);
			// alert ("place w: " + placeW + " and place h: " + placeH);
		break;
		
		case "given":
			placeW = locationX;
			placeH = locationY;
		break;		
	} // end switch for locationType
	
	document.getElementById('menuPopup').style.left = placeW + "px";
	document.getElementById('menuPopup').style.top = placeH + "px";
} // end setLocation function

// this is the main function that everything else is here for
function showPopUp(locationType, locationX, locationY, sizeX, sizeY, smallerBy, destination)
{
	// find out if visitor is using IE
	isIE = (navigator.appName == "Microsoft Internet Explorer")?true:false;
	// alert ("isIE = " + isIE);
	
	// get the size of the browser window
	if (typeof window.innerWidth == 'number')
	{
		pageW = window.innerWidth;
		pageH = window.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientWidth)
	{
		pageW = document.documentElement.clientWidth;
		pageH = document.documentElement.clientHeight;
	}
	else
	{
		pageW = document.body.clientWidth;
		pageH = document.body.clientHeight;
	}
	
	setSize(sizeX, sizeY, smallerBy);
	
	setLocation(locationType, locationX, locationY);
	
	if (destination)
	{
		document.getElementById('menuDiv').innerHTML = "<iframe id='popupFrame' name='popupFrame' class='popupFrame' scroll='auto' src='" + destination + "'></iframe>";
	}
	
	document.getElementById('menuPopup').style.visibility = "visible";
} // end showPopUp function

// this function is for drag and drop
function getObjectXY(theElement)
{
	var elemPosX = theElement.offsetLeft;
	var elemPosY = theElement.offsetTop;
	theElement = theElement.offsetParent;
	
	while (theElement != null)
	{
		elemPosX += theElement.offsetLeft;
		elemPosY += theElement.offsetTop;
		theElement = theElement.offsetParent;
	} // end while
	
	theLocationX = elemPosX;
	theLocationY = elemPosY;
	
	return true;
} // end getObjectXY function

// this function is for drag and drop
function startDrag(elem)
{
	theID = elem.id;
	var fix = getObjectXY(elem);
	difX = theLocationX - mouseX;
	difY = theLocationY - mouseY;
	
	if (theDrag)
	{
		window.clearInterval(theDrag);
	}
	
	theDrag = setInterval("dragIt(document.getElementById('" + theID + "'))", 1);
} // end startDrag function

// this function is for drag and drop
function dragIt(elem)
{
	document.getElementById(elem.id).style.left = (mouseX + difX) + "px";
	document.getElementById(elem.id).style.top = (mouseY + difY) + "px";
} // end dragIt function

// function to hide the pop-up
function hidePopUp()
{
	document.getElementById('menuPopup').style.visibility = "hidden";
}

// function to stop drag and drop
function cancelDrag()
{
	if (theDrag)
	{
		window.clearInterval(theDrag);
	}
} // end cancelDrag function

document.onmousemove = getMouseXY;