var xmlHttp = createXMLHttpRequestObject();
var myClientWidth = 0;
var myImageWidth = 0;
var imgID = 0;

function createXMLHttpRequestObject() {
	var xmlHttp;
	try
	{
		xmlHttp = new XMLHttpRequest();
	}
	catch(e)
	{
		var XMLHttpVersions = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");
		for (var i = 0; i < XMLHttpVersions.length && !xmlHttp; i++)
		{
			try
			{
				xmlHttp = new ActiveXObject(XMLHttpVersions[i]);
				
			}
			catch(e)	{}
		}
	}
	if (!xmlHttp)
	{
		alert("Error reading XMLHttpRequest object");
	}
	else
	{
		return xmlHttp;
	}
}

function process(imgID) {
	if (xmlHttp)
	{
		try
		{
			// need to add catch statements to test to make sure values were returned
			getClientWidth();
			getImageWidth(myClientWidth);
			var params = "imageWidth=" + myImageWidth + "&imageID=" + imgID;
			document.cookie ="imageID=" + imgID;
/*			alert(params);*/
			xmlHttp.open("GET", "portfolio4.php?" + params, true);
			xmlHttp.onreadystatechange = handleRequestStateChange;
			xmlHttp.send(null);
		}
		catch(e)
		{
			alert("Can't connect to server:\n" + e.toString());
		}
	}
}

function handleRequestStateChange() {
	/*alert(xmlHttp.readyState);*/
	if (xmlHttp.readyState ==4)
	{
		if (xmlHttp.status == 200)
		{
			/*alert("Does equal 200");*/
			try
			{
				handleServerResponse();
			}
			catch(e)
			{
				alert("Error reading server response: " + e.toString());
			}
		}
		else
		{
			alert("There was a problem retrieving the data:\n" + xmlHttp.statusText);
		}
	}
}

function handleServerResponse() {
	var xmlResponse = xmlHttp.responseXML;	
	if (!xmlResponse || !xmlResponse.documentElement)
	{
		throw ("Invalid XML structure:\n" + xmlHttp.responseText);		
	}
	var rootNodeName = xmlResponse.documentElement.nodeName;
	if (rootNodeName == "parsererror")
	{
		throw ("Invalid XML structure:\n" + xmlHttp.responseText);
	}
	xmlRoot = xmlResponse.documentElement;
	if (rootNodeName != "response" || !xmlRoot.firstChild)
	{
		throw ("Invalid XML structure:\n" + xmlHttp.responseText);
	}
	
	var myImgFile = xmlRoot.childNodes[0].firstChild.nodeValue;
	var myWidth = xmlRoot.childNodes[1].firstChild.nodeValue;
	var myClient = xmlRoot.childNodes[2].firstChild.nodeValue;
	var myCopy = xmlRoot.childNodes[3].firstChild.nodeValue;
	var myMedia = xmlRoot.childNodes[4].firstChild.nodeValue;
	
	var oldImg = document.getElementById("left_content");
	var oldClient = document.getElementById("client_name");
	/*var oldPortNav = document.getElementById("portnav");*/
	
	removeOldData(oldImg);
	// I should update checkForMediaCookie to also check for client so that when
	// client is the same as client on work requested the client name doesn't reload
	removeOldData(oldClient);
	checkForMediaCookie();
	
	var newImg = document.createElement('img');
	newImg.id = "left_img";
	newImg.src = "/new_img/" + myImgFile;
	newImg.width = myWidth;
	document.getElementById("left_content").appendChild(newImg);
	
	var newClientName = document.createTextNode("Client: " + myClient);
	document.getElementById("client_name").appendChild(newClientName);
	document.getElementById("copy").innerHTML = myCopy;
	
	// var newMedia = document.createTextNode(myMedia);
	// 	document.getElementById("media").appendChild(newMedia);
	// 	document.getElementById("media").innerHTML = myMedia;
	
	if(document.getElementById('portnav').hasChildNodes())
	{
		//do nothing
	}
	else
	{
		for(var i = 0; i < xmlRoot.childNodes[5].childNodes.length; i++)
		{
			var myIconFile = xmlRoot.childNodes[5].childNodes[i].childNodes[0].nodeValue;
			var newIcon = document.createElement('img');
			newIcon.id = xmlRoot.childNodes[5].childNodes[i].getAttribute('id');
			newIcon.className = xmlRoot.childNodes[5].childNodes[i].getAttribute('class');
			newIcon.width = 45;
			newIcon.src = "/sm_icons/" + myIconFile;
			var newIconLink = document.createElement('a');
			newIconLink.href = ""	;
			document.getElementById('portnav').appendChild(newIconLink).appendChild(newIcon);
		}
	}
	createOnClick();
}

function removeOldData(oldData)	{
	while(oldData.childNodes[0])
	{
		oldData.removeChild(oldData.childNodes[0]);
	}
}

function getClientWidth() {
	if (typeof(window.innerWidth) == "number")
	{
		//Non-IE
		myClientWidth = window.innerWidth;
	}
	else if (document.documentElement && document.documentElement.clientWidth)
	{
		//IE 6+ in 'standards compliant mode'
		myClientWidth = document.documentElement.clientWidth;
	}
	else if (document.body && document.body.clientWidth)
	{
		//IE 4 compatible
		myClientWidth = document.body.clientWidth;
	}
	return myClientWidth;
}

function getImageWidth(myClientWidth) {
	if (myClientWidth <= 850)
	{
		myImageWidth = 522;
	}
	else if (myClientWidth > 851 && myClientWidth < 1010)
	{
		myImageWidth = 522;
	}
	else if (myClientWidth > 1011 && myClientWidth < 1260)
	{
		myImageWidth = 675;
	}
	else if (myClientWidth > 1261 && myClientWidth < 1330)
	{
		myImageWidth = 851;
	}
	else if (myClientWidth > 1331 && myClientWidth < 1580)
	{
		myImageWidth = 895;
	}
	else if (myClientWidth > 1581 && myClientWidth < 1900)
	{
		myImageWidth = 1074;
	}
	else
	{
		myImageWidth = 1304;
	}
	return myImageWidth;
}

function createOnClick()
{
	if(document.getElementById && document.getElementsByTagName)
	{
		if(document.getElementById('bottom'))
		{
			var bottom = document.getElementById('bottom');
			var links = bottom.getElementsByTagName('a');
			for(var i=0; i < links.length; i++)
			{
				links[i].onclick = myClickListener;
			}
		}
		/*if(document.getElementById('right_content'))
		{
			var right_content = document.getElementById('right_content');
			var links = right_content.getElementsByTagName('a');
			for(var i=0; i < links.length; i++)
			{
				links[i].onclick = myClickListener;
			}
		}*/
	}
}

function myClickListener(evt)
{
	evt = (evt) ? evt : ((window.event) ? event : null);
	if (evt)
	{
		var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
		if (elem.nodeType == 3)
		{
			elem = elem.parentNode;
		}
		if (elem)
		{
		var imgID = elem.id;
		/*alert(imgID);*/
		process(imgID);
		return false;
		}
	}
}

function formOnChange()
{
	var imgID = document.byclient.nav.value;
	if(imgID)
	{
	process(imgID);
	}
}

//Get cookie routine by Shelley Powers 
function get_cookie(Name) {
/*	alert("function called");*/
	var search = Name + "=";
	var returnvalue = "";
	if (document.cookie.length > 0) {
		offset = document.cookie.indexOf(search);
		// if cookie exists
		if (offset != -1) { 
			offset += search.length;
			// set index of beginning of value
			end = document.cookie.indexOf(";", offset);
			// set index of end of cookie value
			if (end == -1) end = document.cookie.length;
			returnvalue=unescape(document.cookie.substring(offset, end));
		}
	}
	return returnvalue;
}

function myResizer() {
	if (document.getElementById('left_icons'))
	{

	}
	else
	{
		imgID = get_cookie('imageID');
		process(imgID);
	}
	
}

function checkForMediaCookie()
{
	var oldPortNav = document.getElementById("portnav");
	var classAttributeID = xmlRoot.childNodes[5].childNodes[0].getAttribute('class');
	var curMediaID = get_cookie('mediaID');
	if (curMediaID == "")
	{
		/*alert("cookie is not set")*/
		var mediaClass = classAttributeID;
		document.cookie = "mediaID=" + mediaClass;
	}
	else
	{
		if (curMediaID != classAttributeID)
		{
			/*alert("cookie set but values don't match")*/
			var mediaClass = classAttributeID;
			document.cookie = "mediaID=" + mediaClass;
			removeOldData(oldPortNav);
		}
		else
		{
			/*alert("cookie is set and values match. Now what?");*/
		}
	}
}