var RESIZE_MOTION_STEP = 8; //the amount of pixels to step each frame when resizing the window;
var RESIZE_MOTION_SPEED = 10; //the time between each frame of the resize motion tween
var LOADING_GIF = "../images/loading.gif"; //gif to display when loading an image..
var CLOSE_IMAGE = "../images/close.jpg";

var EXCESS_HEIGHT = 60;
var EXCESS_WIDTH = 20;
function photoBrowser() {

	var mySelf = this;

	this.popupDiv = null;

	this.errorContainer = null;
	this.imageContainer = null;
	this.commentContainer = null;
	this.nextContainer = null;
	this.previousContainer = null;
	this.imageElement = null;
	this.loadingElement = null;

	this.targetWidth = 0;
	this.targetHeight = 0;
	this.nextImageId = "";
	this.previousImageId = "";

	this.imageLoaded = false;
	this.atDestination = false;

	//public functions
	//----------------------------------
	this.popupBrowser = popupBrowser;
//	this.nextPhoto = nextPhoto;
//	this.previousPhoto = previousPhoto;
	this.closeBrowser = closeBrowser;
	//----------------------------------

	//popup the image browser, showing the image and comments related to 'photoId'
	function popupBrowser(photoId) {
	    if (mySelf.popupDiv == null) {
	        mySelf.popupDiv = createPopupDiv(document.body.offsetWidth/2 - 250, document.body.offsetHeight/2 - 250, 500, 500);
	        document.body.appendChild(mySelf.popupDiv);

		var closeButton = document.createElement('img');
		closeButton.src = CLOSE_IMAGE;
		closeButton.style.position = "absolute";
		closeButton.style.right = "2px";
		closeButton.style.top = "2px";
		closeButton.onclick = closeBrowser;

		mySelf.nextContainer = document.createElement('div');
		mySelf.previousContainer = document.createElement('div');

		var table = document.createElement('table');
		table.style.width = "100%";
		table.style.border = "0px";
		table.setAttribute('cellPadding', '0');
		table.setAttribute('cellSpacing', '0');

		var objRow = table.insertRow(table.rows.length);
		mySelf.imageContainer = objRow.insertCell(objRow.cells.length);
		mySelf.imageContainer.style.width = "100%";
		mySelf.imageContainer.setAttribute("align", "center");
		mySelf.imageContainer.setAttribute("valign", "center");

		objRow = table.insertRow(table.rows.length);
		mySelf.commentContainer = objRow.insertCell(objRow.cells.length);
		mySelf.commentContainer.style.width = "100%";
		mySelf.commentContainer.setAttribute("align", "center");

		objRow = table.insertRow(table.rows.length);
		mySelf.errorContainer = objRow.insertCell(objRow.cells.length);
		mySelf.errorContainer.style.width = "100%";
		mySelf.errorContainer.setAttribute("align", "center");

		mySelf.loadingElement = document.createElement('img');
		mySelf.loadingElement.src = LOADING_GIF;
		mySelf.loadingElement.border = "0";

		mySelf.imageElement = document.createElement('img');
		mySelf.imageElement.border = "0";
		mySelf.imageElement.style.display = "none";

		mySelf.imageContainer.appendChild(mySelf.loadingElement);
		mySelf.imageContainer.appendChild(mySelf.imageElement);

		mySelf.imageElement.style.border = "1px solid #000000";

		mySelf.popupDiv.appendChild(table);
		mySelf.popupDiv.appendChild(closeButton);
	        fadePageOn();
		getImage(photoId);
	    }
	}


	function closeBrowser() {
	    if (mySelf.popupDiv != null) {
		while (mySelf.popupDiv.childNodes.length > 0)
			mySelf.popupDiv.removeChild(mySelf.popupDiv.childNodes[0]);

	        document.body.removeChild(mySelf.popupDiv);
	        mySelf.popupDiv = null;
	        fadePageOff();
	    }
	}


	//private functions

	//get the image, image size, comments, postedAt, and next and previous imageIds for photoid, and draw them to the popup div.
	function getImage(photoId) {
		mySelf.imageElement.style.display = "none";
		mySelf.loadingElement.style.display = "";

		var xmlHttp = createRequestObject();
		xmlHttp.open('post', '../includes/ajaxPages/getPhotoDetails.php', true);
		var poststr = 'photoId=' + encodeURI(photoId);
		xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlHttp.setRequestHeader("Content-length", poststr.length);
		xmlHttp.setRequestHeader("Connection", "close");
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState==4) {
				var data = xmlHttp.responseText.split('\n');
				if (data[0] == 'error') {
					mySelf.errorContainer.innerHTML = data[1];
				}
				else {
					var tempImage = new Image();
					tempImage.onload = function() {
						mySelf.imageElement.src = this.src;
						mySelf.imageLoaded = true;
						if (mySelf.atDestination) {
							showImage();
						}						
					}

					mySelf.imageLoaded = false;
					tempImage.src = data[0]; //image Url
					mySelf.targetWidth = parseInt(data[1]) + EXCESS_WIDTH; //image width
					mySelf.targetHeight = parseInt(data[2]) + EXCESS_HEIGHT; //image height
					mySelf.commentContainer.appendChild(document.createTextNode(data[3])); //comments
					mySelf.commentContainer.appendChild(document.createElement('br'));
					mySelf.commentContainer.appendChild(document.createTextNode(data[4])); //postedAt
					this.previousImageId = data[5]; //previous ImageId
					this.nextImageId = data[6]; //next ImageId
					resizeDiv(); //begin the motion tween
				}
				xmlHttp = null;
			}
		};
		xmlHttp.send(poststr);
	}


	//resize the div smoothly to the given width and height
	function resizeDiv() {
		if (!isNaN(mySelf.targetHeight) && (!isNaN(mySelf.targetWidth))) {

			var divWidth = mySelf.popupDiv.style.width;
			divWidth = parseInt(divWidth.substring(0, divWidth.indexOf('px')));

			var divHeight = mySelf.popupDiv.style.height;
			divHeight = parseInt(divHeight.substring(0, divHeight.indexOf('px')));


			heightStep = Math.min(RESIZE_MOTION_STEP, Math.abs(divHeight, mySelf.targetHeight));
			var top = mySelf.popupDiv.style.top;
			top = parseInt(top.substring(0, top.indexOf('px')));

			//check if we are close to our destination...
			if (Math.abs(divHeight - mySelf.targetHeight) < heightStep) {
				mySelf.popupDiv.style.height = mySelf.targetHeight + "px";
				mySelf.atDestination = true;
			}
			else if (divHeight < mySelf.targetHeight) { //we are increasing our height
				mySelf.popupDiv.style.height = (divHeight + heightStep) + "px";
				top -= (heightStep/2);
				if (top < 0)
					top = 0;
				mySelf.popupDiv.style.top = top + "px";
				mySelf.atDestination = false;
			}
			else { //we are decreasing our height
				mySelf.popupDiv.style.height = (divHeight - heightStep) + "px";
				top += (heightStep/2);
				mySelf.popupDiv.style.top = top + "px";
				mySelf.atDestination = false;
			}

			widthStep = Math.min(RESIZE_MOTION_STEP, Math.abs(divWidth, mySelf.targetWidth));
			var left = mySelf.popupDiv.style.left;
			left = parseInt(left.substring(0, left.indexOf('px')));

			//check for width
			if (Math.abs(divWidth - mySelf.targetWidth) <= widthStep) {
				mySelf.popupDiv.style.width = mySelf.targetWidth + "px";
				mySelf.atDestination = true;
			}
			else if (divWidth < mySelf.targetWidth) { //we are increasing our width
				mySelf.popupDiv.style.width = (divWidth + widthStep) + "px";
				left -= (widthStep/2);
				if (left < 0)
					left = 0;
				mySelf.popupDiv.style.left = left + "px";
				mySelf.atDestination = false;
			}
			else { //we are decreasing our width
				mySelf.popupDiv.style.width = (divWidth - widthStep) + "px";
				left += (widthStep/2);
				mySelf.popupDiv.style.left = left + "px";
				mySelf.atDestination = false;
			}

			if (!mySelf.atDestination) {
				setTimeout(resizeDiv, RESIZE_MOTION_SPEED);
			}
			else if (mySelf.imageLoaded) {
				showImage();

			}
		}
	}	
	function showImage() {
		mySelf.loadingElement.style.display = "none";
		mySelf.imageElement.style.opacity = 0;
		mySelf.imageElement.style.display = "";				
		fadeImageOn();	
	}

	function fadeImageOn() {
		mySelf.imageElement.style.opacity = parseFloat(mySelf.imageElement.style.opacity) + 0.1;
		if (mySelf.imageElement.style.opacity != 1)
			setTimeout(fadeImageOn, RESIZE_MOTION_SPEED);
	}

}