var thumbArray = [];
var maxThumbsDisplay = 8;
var thumbScroll = 4;

$(document).ready(function() {
	// Setup carousel
	var container = $("div#gallery-container");
	var gallery = $("ul#gallery").remove();

	container.append("<div id=\"img-container\"><img src=\"/images/gallery/start.gif\" border=\"0\" width=\"412\" height=\"203\"/></div><div id=\"thumbnail-container\"><ul id=\"thumbnails\"></ul></div>");
	var thumbnails = container.find("ul#thumbnails");

	// Setup thumbnails
	gallery.find("li").each(function() {
		thumbArray.push($(this));
	});

	var thumbsDisplayed;
	
	for (var thumbCounter = 0; thumbCounter < maxThumbsDisplay; thumbCounter++) {
		var thumb = thumbArray[thumbCounter].find("img.thumb");

		thumbnails.append(
			"<li class=\"index-" + thumbCounter + "\">" + 
				"<img class=\"thumb\" src=\"" + thumb.attr("src") + "\" border=\"0\" width=\"" + thumb.attr("width") + "\" height=\"" + thumb.attr("height") + "\"/>" +
				"<div class=\"main-img\">" + 
					thumbArray[thumbCounter].html() +
					"<div id=\"img-fader\"></div>" +
				"</div>" +
			"</li>"
		);

		thumbsDisplayed++;

		if (thumbsDisplayed >= maxThumbsDisplay)
			break;
	}
	
	thumbnails.find("img.thumb").click(function() {
		container.find("div#img-container").empty();
		thumbnails.find("li.selected").removeClass("selected");
		container.find("div#img-container").append($(this).parent().find("div.main-img").html());
		container.find("div#img-container").find("a.main-img").fancybox();
		container.find("div#img-container").find("div#img-fader").css("display","block");
		container.find("div#img-container").find("div#img-fader").fadeOut(1500);
	});

	container.append(
		"<div id=\"controls\">" + 
			"<a title=\"Previous\" href=\"javascript:void(0);\" id=\"previous\">&lt;</a>" + 
			"<a title=\"Next\" href=\"javascript:void(0);\" id=\"next\">&gt;</a>" +
		"</div>"
	);
	
	$("div#controls").find("a#previous").click(function() {		
		// Remove the last X
		for (var counter = 0; counter < thumbScroll; counter++) {
			thumbnails.find("li:last").remove();
		}

		var first = thumbnails.find("li:first");
		var classes = first.attr("class").split(" ")
		for (var classCounter = 0; classCounter < classes.length; classCounter++) {
			if (classes[classCounter].indexOf("index-") > -1) {
				var firstIndex = classes[classCounter].split("-")[1];
				break;
			}
		}


		if (firstIndex) {
			var thumbsDisplayed = thumbnails.find("li").length;

			var thumbCounter = parseInt(firstIndex) - 1;

			for (thumbCounter; thumbCounter > -1; thumbCounter--) {
				var thumb = thumbArray[thumbCounter].find("img.thumb");

				thumbnails.prepend(
					"<li class=\"index-" + thumbCounter + "\">" + 
						"<img class=\"thumb\" src=\"" + thumb.attr("src") + "\" border=\"0\" width=\"" + thumb.attr("width") + "\" height=\"" + thumb.attr("height") + "\"/>" +
						"<div class=\"main-img\">" + 
							thumbArray[thumbCounter].html() +
							"<div id=\"img-fader\"></div>" +
						"</div>" +
					"</li>"
				);

				thumbsDisplayed++;

				if (thumbsDisplayed >= maxThumbsDisplay)
					break;
			}

			if (thumbsDisplayed < maxThumbsDisplay) {
				thumbCounter = (thumbArray.length - 1);
				for (thumbCounter; thumbsDisplayed < maxThumbsDisplay; thumbCounter--) {
					var thumb = thumbArray[thumbCounter].find("img.thumb");

					thumbnails.prepend(
						"<li class=\"index-" + thumbCounter + "\">" + 
							"<img class=\"thumb\" src=\"" + thumb.attr("src") + "\" border=\"0\" width=\"" + thumb.attr("width") + "\" height=\"" + thumb.attr("height") + "\"/>" +
							"<div class=\"main-img\">" + 
								thumbArray[thumbCounter].html() +
								"<div id=\"img-fader\"></div>" +
							"</div>" +
						"</li>"
					);	

					thumbsDisplayed++;
				}
			}		

			thumbnails.find("img.thumb").click(function() {
				container.find("div#img-container").empty();
				thumbnails.find("li.selected").removeClass("selected");
				container.find("div#img-container").append($(this).parent().find("div.main-img").html());
				container.find("div#img-container").find("a.main-img").fancybox();
				container.find("div#img-container").find("div#img-fader").css("display","block");
				container.find("div#img-container").find("div#img-fader").fadeOut(1500);
			});
		}
	});
	
	$("div#controls").find("a#next").click(function() {
		// Remove the first X
		for (var counter = 0; counter < thumbScroll; counter++) {
			thumbnails.find("li:first").remove();
		}

		var last = thumbnails.find("li:last");
		var classes = last.attr("class").split(" ")
		for (var classCounter = 0; classCounter < classes.length; classCounter++) {
			if (classes[classCounter].indexOf("index-") > -1) {
				var lastIndex = classes[classCounter].split("-")[1];
				break;
			}
		}

		if (lastIndex) {
			var thumbsDisplayed = thumbnails.find("li").length;
			
			var thumbCounter = parseInt(lastIndex) + 1;

			// Add X thumbnails to the end
			for (thumbCounter; thumbCounter < thumbArray.length; thumbCounter++) {
				var thumb = thumbArray[thumbCounter].find("img.thumb");

				thumbnails.append(
					"<li class=\"index-" + thumbCounter + "\">" + 
						"<img class=\"thumb\" src=\"" + thumb.attr("src") + "\" border=\"0\" width=\"" + thumb.attr("width") + "\" height=\"" + thumb.attr("height") + "\"/>" +
						"<div class=\"main-img\">" + 
							thumbArray[thumbCounter].html() +
							"<div id=\"img-fader\"></div>" +
						"</div>" +
					"</li>"
				);
				
				thumbsDisplayed++

				if (thumbsDisplayed >= maxThumbsDisplay)
					break;
			}

			// Loop back to first thumbnail.
			if (thumbsDisplayed < maxThumbsDisplay) {
				for (thumbCounter = 0; thumbsDisplayed < maxThumbsDisplay; thumbCounter++) {
					var thumb = thumbArray[thumbCounter].find("img.thumb");

					thumbnails.append(
						"<li class=\"index-" + thumbCounter + "\">" + 
							"<img class=\"thumb\" src=\"" + thumb.attr("src") + "\" border=\"0\" width=\"" + thumb.attr("width") + "\" height=\"" + thumb.attr("height") + "\"/>" +
							"<div class=\"main-img\">" + 
								thumbArray[thumbCounter].html() +
								"<div id=\"img-fader\"></div>" +
							"</div>" +
						"</li>"
					);	

					thumbsDisplayed++
				}
			}		

			thumbnails.find("img.thumb").click(function() {
				container.find("div#img-container").empty();
				thumbnails.find("li.selected").removeClass("selected");
				container.find("div#img-container").append($(this).parent().find("div.main-img").html());
				container.find("div#img-container").find("a.main-img").fancybox();
				container.find("div#img-container").find("a.main-img").fadeIn(1500);
				container.find("div#img-container").find("div#img-fader").css("display","block");
				container.find("div#img-container").find("div#img-fader").fadeOut(1500);
			});
		}
	});
});