window.onresize = setContentLocation;
window.onload = setContentLocation;
window.onscroll = setContentLocation;

var obj;
var targAlpha = 1;
var pW;
var pH;
var iW;
var iH;
var fName;
var boxW = 740;
var boxH = 420;
function lightBox(fileName, imgW, imgH)
{
	if (document.getElementById('homeanim'))
	{
		document.getElementById('homeanim').style.visibility = "hidden";
	}
	fName = fileName;
	iW = imgW;
	iH = imgH;
	boxW = imgW+16;
	boxH = imgH+35;
	var vWidth = 100;
	var vHeight = 100;
	if (typeof window.innerWidth != 'undefined')
	{
		vWidth = window.innerWidth;
		vHeight = window.innerHeight;
	}
	else if ((typeof document.documentElement != 'undefined') && 
	(typeof document.documentElement.clientWidth != 'undefined') && 
	(document.documentElement.clientWidth != 0))
	{
		vWidth = document.documentElement.clientWidth;
		vHeight = document.documentElement.clientHeight;
	}
	else
	{
		vWidth = document.getElementsByTagName('body')[0].clientWidth;
		vHeight = document.getElementsByTagName('body')[0].clientHeight;
	}
	pW = vWidth;
	

	var useDropY = document.body.scrollTop;
	if (useDropY == 0)
	{
		if (window.pageYOffset)
		{
			useDropY = window.pageYOffset;	
		}
		else
		{
			useDropY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;	
		}
	}
	
	pH = vHeight+(useDropY*2);
	
	var useDropX = document.body.scrollLeft;
	if (useDropX == 0)
	{
		if (window.pageXOffset)
		{
			useDropX = window.pageXOffset;	
		}
		else
		{
			useDropX = (document.body.parentElement) ? document.body.parentElement.scrollLeft : 0;	
		}
	}
	
	//alert('lighbox');
	//alert("got here... "+useDropX);
	document.getElementById('lighboxback').style.width = vWidth+"px";
	document.getElementById('lighboxback').style.height = vHeight+"px";
	
	document.getElementById('lighboxback').style.position = "absolute";
	document.getElementById('lighboxback').style.top = useDropY+"px";
	document.getElementById('lighboxback').style.left = useDropX+"px";
	
	document.getElementById('lighboxback').style["filter"] = "alpha(opacity=50)";
	document.getElementById('lighboxback').style["-moz-opacity"] = "0.1";
	document.getElementById('lighboxback').style["-kthml-opacity"] = "0.1";
	document.getElementById('lighboxback').style["opacity"] = "0.1";
	
	/*filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;*/
	
	document.getElementById('lighboxback').onclick = shrinkWhiteBox;
	document.getElementById('lighboxback').style.background = "#000000";
	obj = document.getElementById('lighboxback');
	fadeInFunc = showWhiteBox;
	targAlpha = .8;
	fadeIn();
	
	
}

function showWhiteBox()
{
	var whiteBox = document.getElementById('whitebox');
	whiteBox.onclick = shrinkWhiteBox;
	whiteBox.style.background = "#FFFFFF";
	whiteBox.style.width = "1px";
	whiteBox.style.height = "1px";
	whiteBox.style.left = ((pW/2) - (whiteBox.offsetWidth/2)) +"px";
	whiteBox.style.top = ((pH/2) - (whiteBox.offsetHeight/2)) +"px";
	growWhiteBox();
}

function growWhiteBox()
{
	var whiteBox = document.getElementById('whitebox');
	whiteBox.style.position = "absolute";
	whiteBox.style.width = Number(whiteBox.offsetWidth + 20) + "px";
	whiteBox.style.height = Number(whiteBox.offsetHeight + 20) + "px";
	whiteBox.style.left = ((pW/2) - (whiteBox.offsetWidth/2)) +"px";
	whiteBox.style.top = ((pH/2) - (whiteBox.offsetHeight/2)) +"px";
	//obj.style["filter"] += .1;
	
	//foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px
	if (whiteBox.offsetWidth >= boxW)
	{
		whiteBox.style.width = boxW+"px";
	}
	
	if (whiteBox.offsetHeight >= boxH)
	{
		whiteBox.style.height = boxH+"px";
	}
	
	if ((whiteBox.offsetWidth >= boxW) && (whiteBox.offsetHeight >= boxH))
	{
		showImage();
		/*if (fadeInFunc != null)
		{
			fadeInFunc();
		}*/
	}
	else
	{
		setTimeout(growWhiteBox,20); // call doMove() in 20 msec
	}
}

function showImage()
{
	var whiteBox = document.getElementById('whitebox');
	
	whiteBox.style.zIndex = 500;
	whiteBox.innerHTML = "<img id=\"lightboximg\" src=\""+fName+"\" style=\"visibility:hidden;\" border=\"0\"/><br/><span style=\"font-family:Arial, Helvetica, sans-serif; color:#978879; font-size:14px; position:relative; left:10px; top:14px;\"><strong>PREMIER MARBLE &amp; GRANITE</strong> - 801.796.8111</span><div align=\"right\" style=\"padding-right:8px; margin-top:-4px;\"><img src=\"images/close.jpg\"/></div>";
	checkForLoad();
	
	
}

function resizeImageToFit()
{
	var imgObj = document.getElementById('lightboximg');
	
	imgObj.style.position = "relative";
	/*var useW = boxW * .95;
	var useH = boxH * .95;
	var vW = imgObj.offsetWidth;
	var vH = imgObj.offsetHeight;
	if (imgObj.offsetWidth > useW)
	{
		imgObj.style.width = useW+"px";
		imgObj.style.height = ((useW/vW)*imgObj.offsetHeight)+"px"; 
		vW = imgObj.offsetWidth;
		vH = imgObj.offsetHeight;
	}
	if (imgObj.offsetHeight > useH)
	{
		imgObj.style.height = useH+"px";
		imgObj.style.width = ((useH/vH)*imgObj.offsetWidth)+"px"; 
		vW = imgObj.offsetWidth;
		vH = imgObj.offsetHeight;
	}*/
	
	imgObj.style.top = (((boxH/2)-(imgObj.offsetHeight/2))-8)+"px";
	imgObj.style.left = ((boxW/2)-(imgObj.offsetWidth/2))+"px";
	imgObj.style.visibility = "visible";
	imgObj.onclick = shrinkWhiteBox;
}

function checkForLoad()
{
	var imgObj = document.getElementById('lightboximg');
	
		//alert("iO.w = "+imgObj.offsetWidth+", i0.h = "+imgObj.offsetHeight+", ("+iW+", "+iH+")");
	
	if ((imgObj.offsetWidth == Number(iW)) && (imgObj.offsetHeight == Number(iH)))
	{
		//resizeImageToFit();
		
		//setTimeout(resizeImageToFit,500);
		setTimeout(resizeImageToFit,500);
	}
	else
	{
		setTimeout(checkForLoad,20); // call doMove() in 20 msec
	}
}

function shrinkWhiteBox()
{
	var whiteBox = document.getElementById('whitebox');
	whiteBox.innerHTML = ""; 
	whiteBox.style.position = "absolute";
	var offW = whiteBox.offsetWidth - 20;
	var offH = whiteBox.offsetHeight - 20;
	if (offW < 0)
	{
		offW = 0;	
	}
	if (offH < 0)
	{
		offH = 0;	
	}
	whiteBox.style.width = offW + "px";
	whiteBox.style.height = offH + "px";
	whiteBox.style.left = ((pW/2) - (whiteBox.offsetWidth/2)) +"px";
	whiteBox.style.top = ((pH/2) - (whiteBox.offsetHeight/2)) +"px";
	//obj.style["filter"] += .1;
	
	//foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px
	if (whiteBox.offsetWidth <= 20)
	{
		whiteBox.style.width = "0px";
	}
	
	if (whiteBox.offsetHeight <= 20)
	{
		whiteBox.style.height = "0px";
	}
	
	if ((whiteBox.offsetWidth <= 20) && (whiteBox.offsetHeight <= 20))
	{
		hideLightBox();
	}
	else
	{
		setTimeout(shrinkWhiteBox,20); // call doMove() in 20 msec
	}
}


function hideLightBox()
{
	if (document.getElementById('homeanim'))
	{
		document.getElementById('homeanim').style.visibility = "visible";
	}
	obj = document.getElementById('lighboxback');
	targAlpha = 0;
	fadeOut();
}
var fadeInFunc;
function fadeIn()
{
	obj.style["-moz-opacity"] += .1;
	obj.style["-kthml-opacity"] += .1;
	obj.style["opacity"] = Number(obj.style["opacity"])+.1;
	//obj.style["filter"] += .1;
	
	//foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px
	if (obj.style["opacity"] >= targAlpha)
	{
		if (fadeInFunc != null)
		{
			fadeInFunc();
		}
	}
	else
	{
		setTimeout(fadeIn,20); // call doMove() in 20 msec
	}
}
function fadeOut()
{
	
	obj.style["-moz-opacity"] += -.1;
	obj.style["-kthml-opacity"] += -.1;
	obj.style["opacity"] = Number(obj.style["opacity"])-.1;
	//obj.style["filter"] += .1;
	
	//foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px
	if (obj.style["opacity"] <= targAlpha)
	{
		obj.style.width = "0px";
		obj.style.height = "0px";
		obj.style["opacity"] = "1.0";
	}
	else
	{
		setTimeout(fadeOut,20); // call doMove() in 20 msec
	}
}

function setContentLocation() 
{
	
	var vWidth = 100;
	var vHeight = 100;
	if (typeof window.innerWidth != 'undefined')
	{
		vWidth = window.innerWidth;
		vHeight = window.innerHeight;
	}
	else if ((typeof document.documentElement != 'undefined') && 
	(typeof document.documentElement.clientWidth != 'undefined') && 
	(document.documentElement.clientWidth != 0))
	{
		vWidth = document.documentElement.clientWidth;
		vHeight = document.documentElement.clientHeight;
	}
	else
	{
		vWidth = document.getElementsByTagName('body')[0].clientWidth;
		vHeight = document.getElementsByTagName('body')[0].clientHeight;
	}
	
	var contentLeft = (((vWidth-240)/2) - (document.getElementById('content').offsetWidth/2))+240;
	if (contentLeft < 240)
	{
		contentLeft = 240;
	}
	
	var leftBarHeight = vHeight-175;
	var minleftBar = (document.getElementById('sidegallery').offsetTop + document.getElementById('sidegallery').offsetHeight - 165);
	if (leftBarHeight < minleftBar)
	{
		leftBarHeight = minleftBar;
	}
	
	document.getElementById('leftbar').style.height = leftBarHeight+"px";
	//document.getElementById('headerbar').style.left = contentLeft+"px";
	//document.getElementById('content').style.left = contentLeft+"px";
	
	var titleBarWidth = vWidth;
	var minTitleBar = (document.getElementById('content').offsetLeft + document.getElementById('content').offsetWidth + 15);
	if (titleBarWidth < minTitleBar)
	{
		titleBarWidth = minTitleBar;
	}
	
	document.getElementById('titlebar').style.width = titleBarWidth+"px";
	
	var minY = (document.getElementById('sidegallery').offsetTop + document.getElementById('sidegallery').offsetHeight)-document.getElementById('lighboxback').offsetHeight+10;
	
	var useDropY = document.body.scrollTop;
	if (useDropY == 0)
	{
		if (window.pageYOffset)
		{
			useDropY = window.pageYOffset;	
		}
		else
		{
			useDropY = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;	
		}
	}
	if (useDropY > minY)
	{
		useDropY = minY;
	}
	
	var minX = (document.getElementById('titlebar').offsetLeft + document.getElementById('titlebar').offsetWidth )-document.getElementById('lighboxback').offsetWidth;
	
	var useDropX = document.body.scrollLeft;
	if (useDropX == 0)
	{
		if (window.pageXOffset)
		{
			useDropX = window.pageXOffset;	
		}
		else
		{
			useDropX = (document.body.parentElement) ? document.body.parentElement.scrollLeft : 0;	
		}
	}
	
	if (useDropX > minX)
	{
		useDropX = minX;
	}
	
	document.getElementById('lighboxback').style.top = useDropY+"px";
	document.getElementById('lighboxback').style.left = useDropX+"px";
	
}