/*
jQuery(document).ready(function(){
	//initGallery();
});
*/


// googled this - need to move this in some library... at the top
// need this for showPhotoItem() - this was equalized w mootools, but missing from jQuery
// IE doesnt support array.indexOf() - need to add it
if (!Array.prototype.indexOf) {
	Array.prototype.indexOf = function(val, fromIndex) {
	if (typeof(fromIndex) != 'number') fromIndex = 0;
		for (var index = fromIndex,len = this.length; index < len; index++)
	 		if (this[index] == val) return index;
            return -1;
        }
}

function initGallery() {
	jQuery(".photoThumb img").each(function(){
		var item = $(this);
		var photoId = item.attr("id").replace(/^(photoId_)/,'');
		item.bind("click", function(){
			process(photoId);
		});
	});
}

function process(photoId){
	// need better way to deal with path issue - messy
	var popupContainer = jQuery("#popupContainer");
	var serverHost = location.host;
	if(serverHost == "localhost"){
		serverHost = serverHost + "/photography_jQuery2";
	}

	var serverAddress = "http://" + serverHost + "/includes/photoGalleryAjax.php?photoIdParam="+ photoId;
	var imgPath = "http://" + serverHost + "/static/images/";

	jQuery.getJSON(serverAddress, function(data){
		

		var html = "";
		html += '<img class="bigPic" id="bigPhotoId_'+photoId+'" src="' + data['ajaxResultPath'] + '" alt="'+data['ajaxResultTitle']+'" />';
		html += '<div id="metadata">';
		html += '<h3>' + data['ajaxResultTitle'] + '</h3>';
		html += '<p class="date">' + data['ajaxResultDate'] + '</p>';
		//html += '<p class="location">' + data['ajaxPicLocation'] + '</p>';
		html += '<p class="printSize">' + data['ajaxResultPrintDetails'] + '</p>';
		html += '</div>';
		/*
		html += '<h3>Orig width: ' + data['ajaxPicWidth'] + '</h3>';
		html += '<h3>Orig height: ' + data['ajaxPicHeight'] + '</h3>';
		html += '<h3>wRatio: ' + data['wRatio'] + '</h3>';
		html += '<h3>hRatio: ' + data['hRatio'] + '</h3>';
		*/

		var $metadata = jQuery("#metadata");
		
		jQuery("#popupContainer").animate(
			{ opacity: 0},
			{duration: 500,
			complete:function(){
				popupContainer.empty();
				popupContainer.append(html);
				$metadata.hide();
				popupContainer.animate(
				{opacity: 1}, 
				{duration: 500,
				complete:function(){$metadata.show();}}
				)
			}}
			);
		//popupContainer.empty();
		//popupContainer.append(html);
	});
}

/* probably need to use dom ready for this as 
1) we need to get image w/o relying on id, so need to first parse entire tree
2) need to access the photoIds array which is at the bottom
unless we can slap this code at the bottom of the page?
*/

function showPhotoItem(index) {
	//capture the current pic id
	//var currentPicId = jQuery("#popupContainer img.bigPic")[0].id;
	var currentPicId = jQuery("#popupContainer img.bigPic:eq(0)").attr("id");
	currentPicId =  currentPicId.replace(/^(bigPhotoId_)/,'');

	var currentPosition = photoIds.indexOf(currentPicId);
	var nextPhotoId = (photoIds[currentPosition + index]!= undefined? photoIds[currentPosition + index] : index > 0? photoIds[0] : photoIds[photoIds.length - 1]);
	process(nextPhotoId);
	
	// spaghetti here - redo all this stuff properly...
	// now change the selected item in the thumb gallery...
	jQuery("#photoGallery .photoThumb").removeClass("selected");
	//console.log(thumbId);
	jQuery("#photoId_" + nextPhotoId).parent().parent().addClass("selected");
}

// redo all this. instead of selected on <div> which then requires going back to parent etc...
// should simply put selected on the image - will simplify the query