var onresize_url = "resizePage.php?";
var initImage_url = "initImage.php?";
var thumb_nav = "thumbNav.php?";
var full_size = "fullSize.php?";

function handleHttpResponseImage() {
//when the image is changed, update image with image, comment, and details
	if (http.readyState == 4) {
		if (http.responseText.indexOf('invalid') == -1) {
			// Split the pipe delimited response into an array
			results = http.responseText.split("|");
			document.getElementById('draggable').innerHTML = results[0];
			document.getElementById('ImageText').innerHTML = results[1];
			document.getElementById('curImg').value = results[2];
			document.getElementById('ImageNav').innerHTML = results[3];
			//document.getElementById('curAlbum').value = results[4];
			document.getElementById('outer').style.width = results[4]; //set image container div width
			document.getElementById('outer').style.height = results[5]; //set image container div height
			document.getElementById('imgSize').value = 0;
			
			//set some values manually
			document.getElementById('container').style.width = results[4]; //set container div width
			document.getElementById('container').style.height = results[5]; //set container div height
			document.getElementById('container').style.marginLeft = "0px"; //set container div margin left (negative)
			document.getElementById('container').style.marginTop = "0px"; //set container div top (negative)
			document.getElementById('draggable').style.width = results[4]; //set draggable width
			document.getElementById('draggable').style.height = results[5]; //set draggable height
			document.getElementById('draggable').style.left = "0px"; //set draggable left
			document.getElementById('draggable').style.top = "0px"; //set draggable top
			document.getElementById('draggable').style.cursor = "default"; //set draggable mouse pointer
			document.getElementById('ImageMetaData').innerHTML = results[6];
			isWorking = false;
		}
	}
}
var isWorking = false;

function handleHttpResponseImageInit() {
//when the album page loads, put in the image
	if (http.readyState == 4) {
		if (http.responseText.indexOf('invalid') == -1) {
			results = http.responseText.split("|");
			document.getElementById('draggable').innerHTML = results[0]; //set image
			document.getElementById('outer').style.width = results[1]; //set image container div width
			document.getElementById('outer').style.height = results[2]; //set image container div height
			document.getElementById('ImageMetaData').innerHTML = results[3];
			isWorking = false;
		}
	}
}


function handleHttpResponseMenu() {
//change the contents of the thumbnails area
        if (http.readyState == 4) {
		if (http.responseText.indexOf('invalid') == -1) {
			returned = http.responseText;
			document.getElementById('thumbnails').innerHTML = returned;
			isWorking = false;
		}
	}
}

function handleHttpResponseFullSize() {
//change from regular to full size image in album
	if (http.readyState == 4) {
		if (http.responseText.indexOf('invalid') == -1) {
			results = http.responseText.split("|");
			document.getElementById('draggable').innerHTML = results[0]; //set image src
			document.getElementById('fullSize').innerHTML = results[1]; //change fullsize link option
			document.getElementById('outer').style.width = results[2]; //set outer div width
			document.getElementById('outer').style.height = results[3]; //set outer div height
			document.getElementById('container').style.width = results[4]; //set container div width
			document.getElementById('container').style.height = results[5]; //set container div height
			document.getElementById('container').style.marginLeft = results[6]; //set container div margin left (negative)
			document.getElementById('container').style.marginTop = results[7]; //set container div top (negative)
			document.getElementById('draggable').style.width = results[8]; //set draggable width
			document.getElementById('draggable').style.height = results[9]; //set draggable height
			document.getElementById('draggable').style.left = results[10]; //set draggable left
			document.getElementById('draggable').style.top = results[11]; //set draggable top
			document.getElementById('draggable').style.cursor = "pointer"; //set draggable mouse pointer
			document.getElementById('ImageMetaData').innerHTML = results[12];
			document.getElementById('imgSize').value = 1;
			isWorking = false;
		}
	}
}


function switchImage(thisid) {
//change the current image when next or previous are clicked on album page
	if (!isWorking && http) {
		//get the element that was the target of the click 
		//this is used to identify which image to show next
		thisid = thisid.id;
		sizes = getSizes();
		width = sizes[0];
		height = sizes[1];
		albumid = document.getElementById('curAlbum').value;
		//need to trim the "img-" part off the id (chars needed as numerical ids invalid)
		//or "nav-" if coming from the nav buttons
		thisid = thisid.replace(/img-/, "");
		thisid = thisid.replace(/nav-/, "");
		http.open("GET", onresize_url + "albumid="+escape(albumid) + "&width="+escape(width) + "&height="+escape(height) + "&picid="+escape(thisid), true);
		http.onreadystatechange = handleHttpResponseImage;
		isWorking = true;
	        http.send(null);
	}
}
function showImageDetails() {
//function called onresize to display navigation, image and comment
	if (!isWorking && http) {
		sizes = getSizes();
		width = sizes[0];
		height = sizes[1];
		picid = document.getElementById('curImg').value;
		albumid = document.getElementById('curAlbum').value;
		whichSize = document.getElementById('imgSize').value;
		if(whichSize == 0) {
			http.open("GET", onresize_url + "albumid="+escape(albumid) + "&width="+escape(width) + "&height="+escape(height) + "&picid="+escape(picid), true);
			http.onreadystatechange = handleHttpResponseImage;
		}
		else {
			http.open("GET", full_size + "&picid="+escape(picid) + "&width="+escape(width) + "&height="+escape(height), true);
			http.onreadystatechange = handleHttpResponseFullSize;
		}
		isWorking = true;
		http.send(null);
	}
}

function showImageOnly() {
//called onload on album page to display only picture
	if (!isWorking && http) {
		sizes = getSizes();
		width = sizes[0];
		height = sizes[1];
		picid = document.getElementById('curImg').value;
		albumid = document.getElementById('curAlbum').value;
		http.open("GET", initImage_url + "albumid="+escape(albumid) + "&width="+escape(width) + "&height="+escape(height) + "&picid="+escape(picid), true);
		http.onreadystatechange = handleHttpResponseImageInit;
		isWorking = true;
		http.send(null);
	}
}

function changeMenu(id,albumid) {
//change pages on thumbnails in response to next or previous
	if (!isWorking && http) {
		//get the value to pass
		// get whether we clicked up or down
		//need to trim the "img-" part off the id (chars needed as numerical ids invalid)
		id = id.id;
		id = id.replace(/nav-/, "");
		http.open("GET", thumb_nav + "albumid="+escape(albumid) + "&position="+escape(id), true);
		http.onreadystatechange = handleHttpResponseMenu;
		isWorking = true;
		http.send(null);
	}
}

function fullSize(id) {
//switch image from regular to full size, and back again
	if (!isWorking && http) {
		sizes = getSizes();
		width = sizes[0];
		height = sizes[1];
		whichSize = document.getElementById('imgSize').value;
		if(whichSize == 0) { 
			//if the current image display is not full screen
			http.open("GET", full_size + "&picid="+escape(id) + "&width="+escape(width) + "&height="+escape(height), true);
			http.onreadystatechange = handleHttpResponseFullSize;
		}
		else {
			//if the image is already full screen
			picid = document.getElementById('curImg').value;
			albumid = document.getElementById('curAlbum').value;
			http.open("GET", onresize_url + "albumid="+escape(albumid) + "&width="+escape(width) + "&height="+escape(height) + "&picid="+escape(picid), true);
			http.onreadystatechange = handleHttpResponseImage;
		}
		isWorking = true;
		http.send(null);
	}
}

function getSizes() {
//returns the dimensions of the current window
	var myWidth = 0, 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 [myWidth, myHeight];
}


function getHTTPObject() {
	var xmlhttp;
	/*@cc_on
	@if (@_jscript_version >= 5)
		try {
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) {
			try {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} 
			catch (E) {
				xmlhttp = false;
			}
		}
	@else
		xmlhttp = false;
	@end @*/

	if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
		try {
			xmlhttp = new XMLHttpRequest();
		} 
		catch (e) {
			xmlhttp = false;
		}
	}
	return xmlhttp;
}

var http = getHTTPObject(); // We create the HTTP Object