var loadingImg = new Image();
loadingImg.src = "/images/loadingImg.gif";

var httpRequest = create_client();
var newWidth = 200;
var newHeight = 200;
var url;
var img = new Image();
var newDiv = document.createElement("div");	

/***********************************************************************
 * 
 **********************************************************************/ 
function create_client()
{
	if (window.XMLHttpRequest)
		return new XMLHttpRequest;

	var client;

	if (window.ActiveXObject) {
		try {
			client = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) {
			try {
				client = new ActiveXObject("Microsoft.XMLHTTP");
			} 
			catch (e) {}
		}
	}
	
	return client;
}

/***********************************************************************
 * 
 **********************************************************************/ 
function httpRequestHandler()
{
	if (httpRequest.readyState == 4 && httpRequest.status == 200) {
		var xmldoc = httpRequest.responseXML;
		var rootNode = xmldoc.getElementsByTagName('image').item(0);
		newWidth = rootNode.getAttribute('width');
		newHeight = rootNode.getAttribute('height');
		set_element_background();
	}	
}

/***********************************************************************
 * 
 **********************************************************************/ 
function showImage(imageURL) 
{
	var el = document.getElementById("largeImage");
	
	if (el != null) {
		removeImage(el);
	}
	url = imageURL;
	
	httpRequest.onreadystatechange = httpRequestHandler;
	httpRequest.open('GET', '/weather/apt/index.htm?fn=get_image_details&url=' + url, true);
	httpRequest.send(null);
}

/***********************************************************************
 * 
 **********************************************************************/ 
function removeImage(el)
{
		var parNode = el.parentNode;
		parNode.removeChild(el);
}

/***********************************************************************
 * 
 **********************************************************************/ 
function set_element_background()
{
	var winWidth = window.innerWidth;
	var leftEdge = winWidth/2 - newWidth/2;
	var newTop = window.pageYOffset;
	
	var el = document.getElementById("thumbs");
	window.status = el;
	var divTop = el.offsetTop;
	
	el.appendChild(newDiv);
	newDiv.setAttribute("onclick", "removeImage(this)");
	newDiv.setAttribute("id", "largeImage");
	newDiv.setAttribute("class", "imageDiv");	
	newDiv.style.top = divTop + "px";
	newDiv.style.left = leftEdge + "px";
	newDiv.style.width = newWidth + "px";
	newDiv.style.height = newHeight + "px";
	newDiv.style.backgroundPosition = "center";
	newDiv.style.background = "url(/images/loadingImg.gif) center 40px no-repeat rgba(17, 17, 17, 0.7)";	
	
	img.onload = preload_image;
	img.src = url;
	newDiv.innerHTML = '<div style="text-align: center; color: white; background-color: rgba(17, 17, 17, 0.7);">Close</div>';	
}

/***********************************************************************
 * 
 **********************************************************************/ 
function preload_image()
{
	window.status = url + " loaded";
	newDiv.style.background = "url(" + url + ") center no-repeat rgba(17, 17, 17, 0.7)";
}