﻿// Contains teh functionality for the TradeTalk LightBox

var lightBoxMaxWidth = 0;
var lightBoxMaxHeight = 0;
var lightBoxRatio = 0.9;

window.onresize = function()
					{
						initLightBox();
						resizeToContents('lightBox');
						centerAlign('lightBox');
					}
					
function fadeInBackGround(endOpacity)
{			
	setOpacity('overlay', 10, 10, endOpacity);
}

function getSellerImages(url)
{
	initAjaxRequest();
	
	if (xmlHttp)
	{
		xmlHttp.onreadystatechange = preloadSellerImages;
	}		
	
	executeAjaxRequest(url);
}

function preloadSellerImages()
{
	if (xmlHttp.readyState == 4) // complete
	{
		var xmlDoc = xmlHttp.responseXML.documentElement;
		var images = xmlDoc.getElementsByTagName("image");
		
		for (i = 0; i < images.length; i++)
		{
			var myImage = new Image();
			myImage.src = images[i].childNodes[0].nodeValue;
		}
	}
}

function getFullDocumentDimensions()
{
	var pageWidth = 0;
	var pageHeight = 0;
	
	if( window.innerHeight && window.scrollMaxY ) // Firefox 
	{
		pageWidth = window.innerWidth + window.scrollMaxX;
		pageHeight = window.innerHeight + window.scrollMaxY;
	}	
	else if( document.body.scrollHeight > document.body.offsetHeight ) // all but Explorer Mac
	{
		pageWidth = document.body.scrollWidth;
		pageHeight = document.body.scrollHeight;
	}
	else // works in Explorer 6 Strict, Mozilla (not FF) and Safari
	{ 
		pageWidth = document.body.offsetWidth + document.body.offsetLeft; 
		pageHeight = document.body.offsetHeight + document.body.offsetTop; 
	}

	return {width:pageWidth, height:pageHeight};
}

function setOpacity(id, value, increment, maxOpacity)
{
	var element = document.getElementById(id);
	
	if (value > maxOpacity)
		value = maxOpacity;
	
	element.style.opacity = value / 100;
	element.style.filter = 'alpha(opacity=' + value + ')';
		
	if (value < maxOpacity)
	{
		value += increment;
		setTimeout("setOpacity('overlay', " + value + ", " + increment + ", " + maxOpacity + ")", 10);
	}
}

function getWindowDimensions() 
{
	var myWidth = 0
	var myHeight = 0;
	
	if(typeof(window.innerWidth) == 'number') 
	{
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} 
	else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) 
	{
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} 
	else if (document.body && (document.body.clientWidth || document.body.clientHeight))
	{
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
  
	return {width:myWidth, height:myHeight};
}

function getScrollCoordinates()
{
	var scrollX = 0;
	var scrollY = 0;
	
	if( typeof( window.pageYOffset ) == 'number' ) 
	{
		scrollY = window.pageYOffset;
		scrollX = window.pageXOffset;
	} 
	else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) 
	{
		//DOM compliant
		scrollY = document.body.scrollTop;
		scrollX = document.body.scrollLeft;
	} 
	else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) 
	{
		//IE6 standards compliant mode
		scrollY = document.documentElement.scrollTop;
		scrollX = document.documentElement.scrollLeft;
	}
	
	return { x: scrollX, y: scrollY };

}

function resizeToContents(idParent)
{
	var width = 0;
	var height = 0;
	
	var element = document.getElementById(idParent);
	
	if (element.childNodes)
	{
		for (i = 0; i < element.childNodes.length; i++)
		{
			var childElement = element.childNodes[i];
			if (childElement.offsetWidth)
			{
				if (childElement.offsetWidth > width)
				{
					width = childElement.offsetWidth;
				}
			}
			
			if (childElement.offsetHeight)
			{
				if (childElement.offsetHeight > height)
				{
					height = childElement.offsetHeight;
				}
			}
		}
	}
	
	if (width > lightBoxMaxWidth)
		width = lightBoxMaxWidth;
		
	if (height > lightBoxMaxHeight)
		height = lightBoxMaxHeight;
	
	element.style.width = (width) + 'px';
	element.style.height = (height) + 'px';
}


function centerAlign(id)
{
	var dims = getWindowDimensions();
	var startCoordinates = getScrollCoordinates();
	
	var width = document.getElementById(id).offsetWidth;
	var height = document.getElementById(id).offsetHeight;
	
	var top = ((dims.height - height) / 2) + startCoordinates.y;
	var left = ((dims.width - width) / 2) + startCoordinates.x;
	
	if (top < 0)
		top = 0;
		
	if (left < 0)
		left = 0;
		
	document.getElementById(id).style.left = left + 'px';
	document.getElementById(id).style.top = top + 'px';
}

function initLightBox()
{
	var dims = getWindowDimensions();
	var dims2 = getFullDocumentDimensions();
	
	lightBoxMaxWidth = (lightBoxRatio * dims.width) + 10;
	lightBoxMaxHeight = (lightBoxRatio * dims.height) + 10;
	
	document.getElementById('lightBox').style.width = lightBoxMaxWidth + 'px';
	document.getElementById('lightBox').style.height = lightBoxMaxHeight + 'px';
	
	document.getElementById('overlay').style.width = '100%';
	document.getElementById('overlay').style.height = dims2.height + 'px';
}

function showLightBox(url)
{
	document.getElementById('overlay').style.display = 'block';
	
	setTimeout('fadeInBackGround(65)', 1);
	
	document.getElementById('lightBox').style.display = 'block';
	document.getElementById('loading').style.display = 'block';
	document.getElementById('done').style.display = 'none';		
	
	resizeToContents('lightBox');
	centerAlign('lightBox');
	
	url = "'" + url + "'";
	
	setTimeout('getContent(' + url + ')', 3000);
}

function closeLightBox()
{
	setOpacity('overlay', 10, 5, 10);
	document.getElementById('overlay').style.display = 'none';
	document.getElementById('lightBox').style.display = 'none';
}

function getContent(url)
{
	initAjaxRequest();
	
	if (xmlHttp)
	{
		xmlHttp.onreadystatechange = setContent;
	}
	
	executeAjaxRequest(url);
}

function setContent()
{
	if (xmlHttp.readyState == 4) // complete
	{
		
		document.getElementById('loading').style.display = 'none';
		document.getElementById('done').style.display = 'block'
		
		var content = xmlHttp.responseText;
		document.getElementById('done').innerHTML = content;
	
		resizeToContents('lightBox');
		centerAlign('lightBox');
	}
}