// Load GET variables
// -------------------------------------------------------------------------

// This will create variables in the form 'get_' + variable name
var queryString = location.search.substring(1);
var getVariables = new Object();
if (queryString) {
	var getVariablesArray = queryString.split("&");
	for (i = 0; i < getVariablesArray.length; i++) {
		eval("getVariables." + getVariablesArray[i]);
	}
}

// Initialize currentPhotoID variable
if (getVariables.id) {
	var currentPhotoID = getVariables.id;
} else {
	var currentPhotoID = 0;
}

// Initialize things
// -------------------------------------------------------------------------

window.onload = function () {
	// Define elements
	var thumbnailLinks = $('thumbnails').getElementsByTagName('a');

	// Define photo object
	var Photo = {
		
		currentId : currentPhotoID,
		dirty: false,
		info : new Object,
		
		change : function(changeInfo) {
			// First we hide the current photo
			this.hide();
			switch (changeInfo.mode) {
				case 'next':
				case 'previous':
					changeInfo.id = Photo.currentId;
					break;
			}
			// Load info for next photo
			new ajax ('ajax/photos?mode=' + changeInfo.mode + '&id=' + changeInfo.id, {
				onComplete: this.update
			});
		},
		
		hide : function() {
			if (Photo.dirty == false) {
				photoFade.custom(1, 0);
			}
			Photo.dirty = true;
			$('photo').className = 'loading';
		},
		
		show : function() {
			if (Photo.dirty == true) {
				photoFade.custom(0, 1);
			}
			Photo.dirty = false;
			$('photo').className = '';
		},
		
		update : function(request) {
			// Create photoInfo object from request response
			eval('Photo.info = ' + request.responseText);
			// Create text node
			if (Photo.info.description) {
				// Add description and show caption div
				descriptionTextNode = document.createTextNode(Photo.info.description);
				$('caption').replaceChild(descriptionTextNode, $('caption').firstChild);
				$('caption').style.display = 'block';
				// Set 'title' attribute in image
				$('photoImage').setAttribute('title', Photo.info.description);
			} else {
				// Hide caption div
				$('caption').style.display = 'none';
				// Remove 'title' attribute in image
				$('photoImage').removeAttribute('title');
			}
			
			if (Photo.info.id && Photo.info.imageURL) {
				Photo.currentId = Photo.info.id;
				$('photoImage').src = Photo.info.imageURL;
			}
		}
	}


	// Define effects
	var photoFade = new fx.Opacity($('photoContainer'), {
		duration: 300
	});

	// Assign behaviors
	$('nextPhotoLink').onclick = function() {
		Photo.change({ 'mode' : 'next' });
		return false;
	}

	$('previousPhotoLink').onclick = function() {
		Photo.change({ 'mode' : 'previous' });
		return false;
	}
	
	$('photoImage').onload = function() {
		Photo.show();
	}
	
	// Assign behaviors for thumbnails
	for (i = 0; i < thumbnailLinks.length; i++) {
		var thumbnail = thumbnailLinks[i].firstChild;
		var link = thumbnailLinks[i];
		
		thumbnail.fadeOut = new fx.Opacity(thumbnail, { duration: 300 });

		thumbnail.onmouseover = function() {
			this.fadeOut.setOpacity(0.8);
		}
		thumbnail.onmouseout = function() {
			this.fadeOut.custom(0.8, 1);
		}
		
		link.onclick = function() {
			var stringChunks = new Array();
			var hrefString = this.getAttribute('href');
			stringChunks = hrefString.split('=');
			var targetID = stringChunks[1];
			Photo.change({ 'mode' : 'jump', 'id' : targetID });
			return false;
		}

	}

}