//////////////////////////////////////////
//										//
//		PopUp Creator					//
//		Methodical Creations - 2005		//
//										//
//////////////////////////////////////////


//<a href="#" onmousemove="Javascript: popUp('Title','Body','left',event)" onmouseout="Javascript: pHideIt()">Hover Here</a>
//<a href="#" onmousemove="Javascript: popUp('Title','auto(1)','right',event)" onmouseout="Javascript: pHideIt()">Hover Here</a>
//If 'auto(x)' is specified for the body variable, function pAutoList can be used to create the body information rather then
//having to populate the variable in the onmousemove event.


//Configuration variables

var pDivID = "pPopUp";				//ID for DIV containing the popup table

var xoffset = 15;					//x-axis distance between mouse and popup
var yoffset = 15;					//y-axis distance between mouse and popUp

var pTableWidth = "250";			//Popup table width
var pTableCellSpacing = 0;			//Popup table cellspacing
var pBorderSize = "1px";			//Table border size in CSS format
var pBorderStyle = "solid";			//Table border style in CSS format
var pBorderColor = "black";			//Table border color

var pFontFace = "Trebuchet MS";		//Font face
var pFontSize = "11px";				//Font size in CSS format (pt or pixel)

var pTitleBGColor = "#2C878C";		//Title background color
var pTitleFontColor = "white";		//Title font color
var pBodyGBColor = "#00D7D7";			//Body background color
var pBodyFontColor = "black";		//Body font color


function pAutoList(i) {
	//Allows us to preformat the body of the popup in script rather then in the onmouseover event call
	//We search for the body based off of the specified number in 'auto(x)'
	//Max of 99 possible
	
	var rBody;
	
	switch (i)
		{
		case 1:
			rBody = "<b>Perfect for a single page advertisement or placeholder for a future site.</b><p>This package includes the following:";
			rBody += "<ul><li class='noImage'>Single custom designed HTML page. Similar to what would fit on a printed 8.5x11 sheet of paper.</li>";
			rBody += "<li class='noImage'>One custom designed logo.</li>";
			rBody += "<li class='noImage'>Limited Javascript.</li>";
			rBody += "<li class='noImage'>One free update to the page after completion.</li></ul>";
			break;
		case 2:
			rBody = "<b>Perfect for small businesses, hobbyists or family home pages.  This is our most popular package.</b><p>This package includes the following:";
			rBody += "<ul><li class='noImage'>Up to 5 custom designed HTML, PHP or ASP pages.</li>";
			rBody += "<li class='noImage'>One custom designed logo.</li>";
			rBody += "<li class='noImage'>Limited Javascript.</li>";
			rBody += "<li class='noImage'>Up to 5 free updates to the completed page.</li></ul>";
			break;
		case 3:
			rBody = "<b>This package is designed for the small to medium sized business that requires more functionality from their website.</b><p>This package includes the following:";
			rBody += "<ul><li class='noImage'>Up to 10 custom designed HTML, PHP or ASP pages.</li>";
			rBody += "<li class='noImage'>One custom designed logo.</li>";
			rBody += "<li class='noImage'>Dynamic, database driven content.</li>";
			rBody += "<li class='noImage'>Up to 5 free updates to the completed page.</li></ul>";
			break;
		case 4:
			rBody = "<b>This package is meant to be the starting point for large and complicated sites. This includes e-commerce sites.</b><p>This package includes the following:";
			rBody += "<ul><li class='noImage'>Up to 15 custom designed HTML, PHP of ASP pages.</li>";
			rBody += "<li class='noImage'>One custom designed logo.</li>";
			rBody += "<li class='noImage'>Dynamic, database driven content.</li>";
			rBody += "<li class='noImage'>Up to 5 free updates to the completed page.</li></ul>";
			break;
		default: 
			rBody = "&nbsp;";
			break;
		}
		
		return rBody;
}


//End Configuration - Do Not Edit Below this line//

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

//create the DIV for the popUp
document.write("<div id='" + pDivID + "' style='display:none;z-index:100;position:absolute;'></div>")

function popUp(pTitle,pBody,pPosition,e) {
	
	var pFormatedBody;
	var strHTML;
	var objBox = document.getElementById(pDivID);
	
	if (document.all)
		{
		if(pPosition.toUpperCase()=="LEFT")
			{
			var eX = e.x - pTableWidth;
			var eY = e.y + document.body.scrollTop;
			}
		else
			{
			var eX = e.x;
			var eY = e.y + document.body.scrollTop;
			}
		}
	else
		{
		if(pPosition.toUpperCase()=="LEFT")
			{
			var eX = e.pageX - pTableWidth;
			var eY = e.pageY;
			}
		else
			{
			var eX = e.pageX;
			var eY = e.pageY;
			}
		}
	
	if(pBody.substring(0,4)=="auto")
		{
		//var pCheckAuto = parseInt(pBody.substr(5,2),10);
		pFormatedBody = pAutoList(parseInt(pBody.substr(5,2),10));
		}
	else
		pFormatedBody = pBody;
	
	strHTML = "<table cellspacing = '" + pTableCellSpacing + "' style=\"width:" + pTableWidth + "; border:" + pBorderSize + " " + pBorderStyle + " " + pBorderColor + "; font:" + pFontSize + " '" + pFontFace + "';\">";
	if (pTitle != "") 
		{
		strHTML += "<tr style=\"background-color: " + pTitleBGColor + "; color: " + pTitleFontColor + ";\">";
		strHTML += "<td><b>" + pTitle + "</b></td></tr>";
		}		
	strHTML += "<tr style=\"background-color: " + pBodyGBColor + "; color: " + pBodyFontColor + ";\">";
	strHTML += "<td>" + pFormatedBody + "</td></tr>";
	strHTML += "</table>";
	
	objBox.innerHTML = strHTML;
	objBox.style.left = eX + xoffset;
	objBox.style.top = eY + yoffset;
	objBox.style.display = "block";
	}

function pHideIt() {
	document.getElementById(pDivID).style.display="none";
}