$(document).ready(onReady);

var thumbsPerPage = 10;
var albumsPerPage = 5;
var data;
var currentImageIndex = 0; //thumb highlighty black and whitey type stuff

function onReady()
{
	//get the first albums images
	$.getJSON("images.json?album_id=2", parseJson);
	
	//addScroll to albums if necessary
	if($("#albumList ul").children('li').size() > albumsPerPage)
	{
		albumOverflow();
	}
	else
	{
		$("#left").hide();
		$("#right").hide();
	}
}

function getImagesByAlbum(id)
{
	//on album click handler
	$.getJSON("images.json?album_id=" + id + "", parseJson);
}

function parseJson(data)
{
	//set album name
	this.data = data;
	$("#albumName").html(data.album.name);
	//set thumbnails
	$("#thumbnails").html("<ul>")
	for (var i = 0; i < data.album.images.length; i++)
	{
		var image = data.album.images[i];
		var id = 'image' + i;
	//	$("#thumbnails").append('<li><a id="' + id + '"><img id="img'+i+'" src="' + image.thumb_path +  '" width="120" height="80" alt="' + image.name + '" /></a></li>');
	//	$("#"+id).bind('click', {image:image}, function(event) { displayImage(event.data.image); });
	
		$("#thumbnails").append('<li><a id="' + id + '"><div id="'+"div"+i+'"><img src="' + image.thumb_path_bw +  '" width="120" height="80" alt="' + image.name + '" /><img id="img'+i+'" src="' + image.thumb_path +  '" width="120" height="80" alt="' + image.name + '" /></div></a></li>');
		//dirty css image overlay hacks :/
		$("#div"+i).css('position','relative');
		$("#div"+i).css('width','100%');
		$("#img"+i).css('position','absolute');
		$("#img"+i).css('left', '0');
		
		$("#"+id).bind('click', {image:image, index:i}, function(event) { displayImage(event.data.image, event.data.index); });

		$("#img"+i).hover(function()
		{
			$(this).stop().animate({opacity: 1},500);
		},
		function()
		{
			if($(this).attr("id").indexOf(currentImageIndex) > -1) return;
			$(this).stop().animate({opacity: 0.1}, 500);
		});
	}
	$("#thumbnails").append("</ul>");
	//set main image
	displayImage(data.album.images[0], 0);
	//paginate if necessary
	var numThumbs = $("#thumbnails").children('li').size();
	if(numThumbs > thumbsPerPage) paginate(numThumbs);
}

function displayImage(image, index)
{
	currentImageIndex = index;
	for(var i = 0; i < $("#thumbnails").children('li').size(); i++)
	{
		$("#img"+i).stop().animate({opacity: 0.1}, 500); //b+w all
	}
	$("#img"+currentImageIndex).stop().animate({opacity: 1}, 500); //highlight selected
	//set the main image
	$("#mainImage").fadeOut(500, function()
	{
		$("#mainImage").html('<img src="' + image.image_path +  '" width="640" height="425" />');
		$("#mainImage").fadeIn(500);
	});
}

//handle album overflow
var currentAlbumIndex = 0;

function albumOverflow() 
{
	$("#left img").click(scrollLeft);
	$("#right img").click(scrollRight);
	$("#albumList ul").children('li').hide();
	$("#albumList ul").children('li').slice(currentAlbumIndex, albumsPerPage).show(); //show first page
}

function scrollLeft()
{
	currentAlbumIndex = nextAlbumIndex(-1);
	$("#albumList ul").children('li').hide();
	$("#albumList ul").children('li').slice(currentAlbumIndex, albumsPerPage + currentAlbumIndex).show();
}

function scrollRight()
{
	currentAlbumIndex = nextAlbumIndex(1);
	$("#albumList ul").children('li').hide();
	$("#albumList ul").children('li').slice(currentAlbumIndex, albumsPerPage + currentAlbumIndex).show();
}

function nextAlbumIndex(dir)
{
	var index = currentAlbumIndex + dir;
	if(index < 0) return 0;
	else if(index > $("#albumList ul").children('li').size()) return $("#albumList ul").children('li').size();
	return index;
}

//pagination of thumbnails
var currentPage = 0;

function paginate(numThumbs)
{
	var numPages = Math.ceil(numThumbs / thumbsPerPage);
	var navHtml = '';
	var currentPageIndex = 0;
	while(currentPageIndex < numPages)
	{
		navHtml += '<a href="javascript:displayPage(' + currentPageIndex +')">'+ (currentPageIndex + 1) +'</a>';
		currentPageIndex++;
	}
	$('#pagination').html(navHtml);
	$("#thumbnails").children('li').css('display', 'none'); //hide all
	$("#thumbnails").children('li').slice(0, thumbsPerPage).css('display', 'block'); //show first page
}

function displayPage(pageNum)
{
	currentPage = pageNum;
	var start = currentPage * thumbsPerPage;
	var end = start + thumbsPerPage;
	$("#thumbnails").children('li').css('display', 'none'); //hide all
	$("#thumbnails").children('li').slice(start, end).css('display', 'block'); //show selected page
}