/* GALLERY SPECIFIC FUNCTIONS */

var photos = new Array();
var THUMBS_MAX = 31;

function onGalleryLoaded()
{
	var page = $("#gallery");
	$(".btn-gallery-left", page).hide();
	$(".btn-gallery-right", page).hide();
	$(".btn-gallery-index", page).hide();
		
	getGalleryData();
}

function getGalleryData()
{
	$("#thumbs").html("<h3>LOADING GALLERY</p>");
	$.ajax({
		type: "GET", 
		url: "/gallery/get-photos.php", 
		data: {dump:"xml"}, 
		dataType: "xml", 
		success: onGalleryLoadSuccess, 
		error: onGalleryLoadError
	});
}

onGalleryLoadSuccess = function(data, textStatus)
{
	// iterate over the navLinks, store index
	$("photo", data).each(function (i) {
		
		// store this navLink's index!
		photos.push({
			url:$(this).attr("url"), 
			thumbUrl:$(this).attr("thumbUrl"), 
			largeUrl:$(this).attr("largeUrl"), 
			largeWidth:$(this).attr("largeWidth"), 
			largeHeight:$(this).attr("largeHeight"), 
			id:$(this).attr("id"), 
			title:$(this).attr("title"), 
			data:this
		});
	});
	//$("#thumbs").html("<h3>GALLERY LOADED, total = " + photos.length + "</p>");
	buildGallery();
}

onGalleryLoadError = function(XMLHttpRequest, textStatus, errorThrown)
{
	$("#thumbs").html("<h3>HMM, SOMETHING BROKE...  TRY AGAIN LATER?</h3><p>" + errorThrown + "</p>");
}

function buildGallery()
{
	var rowCount = 8;
	var count = 4;
	var html = "<ul>";
	for(var i = 0; i < THUMBS_MAX; i++)
	{
		var _class = false;
		if(i == 0)
		{
			_class = "first";
		} else 
		if(count == rowCount || i == THUMBS_MAX - 1)
		{
			_class = "last";
		}
		html += generateThumb(photos[i], "photo_" + i, _class);
		count++;
		if(count == rowCount) count = 0;
	}
	html += '<div id="flickr-legal"><p>Images via <a href="http://www.flickr.com">Flickr<span>&copy;</span></a></p></div>';
	html += "</ul>";
	$("#thumbs").html(html);
	
	$("#thumbs img").hover(
		function(){
			$(this).addClass("over");
		}, 
		function(){
			$(this).removeClass("over");
		}
	);
	$("#thumbs img").click(function(){
		//alert();
		showPhoto($(this).attr("id"));
	});
	
	// Init Photo Gallery - adds subpages per photo
	initGallery(photos);
}

function generateThumb(photo, id, _class)
{
	var html = "<li";
	if(_class) html += ' class="' + _class + '"';
	return html + '><img id="' + id + '" src="' + photo.thumbUrl + '" border="0" /></li>';
}

function generateImage(src, _class)
{
	var html = "<img";
	if(_class) html += ' class="' + _class + '"';
	return html + ' src="' + src + '" border="0" />';
}

function generateBackgroundImage(target, src, offsetY)
{
	var cssObj = {backgroundImage:'url(' + src + ')', 'backgroundPosition':"0 " + offsetY + "px"};
	$(target).css(cssObj);
	//$(target).css('background-color', 'red');
}

function showPhoto(id)
{
	var index = parseInt(id.split("_")[1]);
	var photo = photos[index];
	scrollToPhoto(index + 1);
	/*
	$("#photo").html(generateImage(photo.largeUrl));
	var scrollContent = $("#gallery .scroller-content");
	scrollContent.animate({left: '-=' + subpageWidth + 'px'}, 750, "easeInOutSine");
	$("#photo img").click(function(){
		scrollContent.animate({left: '+=' + subpageWidth + 'px'}, 750, "easeInOutSine");
	});
	*/
}

initGallery = function(photos)
{
	// Increment the number of subpages by 1 to account for the thumbs subpage
	subpages = THUMBS_MAX + 1;
	$("#gallery .scroller-content").width(subpageWidth * subpages);
	
	// Stash a data object to keep track of current index / total
	var page = $("#gallery");
	var scrollContent = $("#gallery .scroller-content");
	scrollContent.data("scrollState", {index:0, total:subpages});
	
	// Create divs for each photo
	for(var i = 0; i < THUMBS_MAX; i++)
	{
		var photo = photos[i];
		scrollContent.append('<div id="photo_' + i + '" class="content-page gallery-photo">' + generateImage(photo.largeUrl) + '</div>');
		
		var topX = 0;
		var topY = 0;
		var bottomX = 0;
		var bottomY = 0;
		var w = parseInt(photo.largeWidth);
		var h = parseInt(photo.largeHeight);
		
		if(h > 475)
		{
			var offsetY = (h - 475) / 2;
			topY = offsetY;
		}
		
		if(w > 760)
		{
			var offsetX = (w - 760) / 2;
			topX = offsetX;
			
		}
		
		bottomX = topX + Math.min(760, w);
		bottomY = topY + Math.min(475, h);
		
		var options = {
			allowZoom:false, 
			viewportWidth:Math.min(760, w), 
			viewportHeight:Math.min(475, h), 
			topX:topX, 
			topY:topY, 
			bottomX:bottomX, 
			bottomY:bottomY
		};
		$("#photo_" + i + " img", scrollContent).imagetool(options);
		
		var cssObj = {margin:"0 auto"};
		$("#photo_" + i + " .viewport", scrollContent).css(cssObj);
	}
	// --------------------------
	
	// Determine if we need to hide the next/prev buttons based on # of subpages
	if(subpages > 1)
	{
		$(".btn-gallery-left", page).hide();
	} else {
		$(".btn-gallery-left", page).hide();
		$(".btn-gallery-right", page).hide();
	}
	
	// Define the click actions
	$(".btn-gallery-right", page).click(function(e){
	
		e.preventDefault();
		var i = scrollContent.data("scrollState").index;
		var t = scrollContent.data("scrollState").total;
		
		if(i < t - 1)
		{
			scrollToPhoto(i + 1);
		}
		
		
	});
	
	$(".btn-gallery-left", page).click(function(e){
	
		e.preventDefault();
		var i = scrollContent.data("scrollState").index;
		var t = scrollContent.data("scrollState").total;
		
		if(i > 0)
		{
			scrollToPhoto(i - 1);
		}
	});
	
	$(".btn-gallery-index", page).click(function(e){
		e.preventDefault();
		scrollToPhoto(0);
	});
}

scrollToPhoto = function(index)
{
	var scrollContent = $("#gallery .scroller-content");
	var i = scrollContent.data("scrollState").index;
	var t = scrollContent.data("scrollState").total;
	
	if(index < i)
	{
		scrollToRight(index);
	} else {
		scrollToLeft(index);
	}
	
	// If target index is 0, hide the next/prev buttons as we are going back to the thumbs page
	if(index == 0)
	{
		$("#gallery .btn-gallery-left").hide();
		$("#gallery .btn-gallery-right").hide();
		$("#gallery .btn-gallery-index").hide();
	} else {
		$("#gallery .btn-gallery-index").show();
	}
	if(index < t - 1 && index > 0)
	{
		$("#gallery .btn-gallery-right").show();
	}
	if(index > 0)
	{
		$("#gallery .btn-gallery-left").show();
	}
}

scrollToRight = function(index)
{
	var page = $("#gallery");
	var scrollContent = $("#gallery .scroller-content");
	var i = scrollContent.data("scrollState").index;
	var t = scrollContent.data("scrollState").total;
	var delta = i - index;
	
	if(i > 0)
	{
		scrollContent.data("scrollState").index = index;
		scrollContent.animate({left: '+=' + (subpageWidth * delta) + 'px'}, (750 * (delta / 3)), "easeInOutSine");
		$(".btn-gallery-right", page).show();
		if(scrollContent.data("scrollState").index == 0) $(".btn-gallery-left", page).hide();
	}
}

scrollToLeft = function(index)
{
	var page = $("#gallery");
	var scrollContent = $("#gallery .scroller-content");
	var i = scrollContent.data("scrollState").index;
	var t = scrollContent.data("scrollState").total;
	var delta = index - i;
	
	if(i < t - 1)
	{
		scrollContent.data("scrollState").index = index;
		scrollContent.animate({left: '-=' + (subpageWidth * delta) + 'px'}, (750 * (delta / 3)), "easeInOutSine");
		$(".btn-gallery-left", page).show();
		if(scrollContent.data("scrollState").index == t - 1) $(".btn-gallery-right", page).hide();
	}
}