// Photo gallery
function gallery() {

// Gallery subnavigation
	$("#galleryNav li:first").addClass("first");
	$("#galleryNav li:gt(1)").addClass("last");
	$("<span class='bull'>&bull;</span>").insertBefore(".counter");
	$("<span class='bull'>&bull;</span>").insertAfter(".counter");

	//Add Container for media and text
	$("#gallery").append("<div id='showcase'></div>");	
	$("#showcase").append("<div id='media'><div id='imageWrapper'></div></div><div class='caption'></div>");

	// Make first gallery item active by default
	$("#thumbs li:first").each(function() {
		var link = $(this).children("a").attr("href");
		var thumbSrc = $(this).children("a").children("span").children("img").attr("src");
		var altText = $(this).children("a").children("img").attr("alt");
		var caption = $(this).children("a").children(".caption").html();
		if(thumbSrc != null) var newThumbSrc = link;

		$(this).siblings().removeClass("active");
		$(this).addClass("active");
		
		var mediaContent = getMediaContent($(this));
		addMediaToPage($(this), mediaContent, caption);

//		$("#showcase div.caption").html(caption);
		
	});

	var $thumbs = $("#thumbs li")
	$thumbs.each(function() {

		var caption = $(this).children("a").children(".caption").html();	
		var mediaContent = getMediaContent($(this));

		//When thumbnail clicked, set as active item and load content into main display area
		$(this).click(function() {
			addMediaToPage($(this), mediaContent, caption);
			return false;
		});

})
}

/* 
 * parse the media url and determine the type of media file
 * return the appropriate html to display the media
 */
function getMediaContent(el) {
	var link = el.children("a").attr("href");
	var altText = el.children("a").children("img").attr("alt");
	var splitLink = link.split("?");
	var end = splitLink[0].lastIndexOf(".");
	var mediaType = splitLink[0].substring(end+1);
	var height, width;
	var mediaContent;

		//Generate code based on the type of media to be displayed
		switch(mediaType) {
			//Images
			case "jpg":
			case "jpeg":
			case "gif":
			case "png":
			case "bmp":
				mediaContent = '<img alt="' +  altText + '" class="item" src="' + link + '" />';
			break;
		}
		return mediaContent;

		//When thumbnail clicked, set as active item and load content into main display area
		$(this).click(function() {
			addMediaToPage($(this), mediaContent, caption);
			return false;
		});
		this.onclick = function() { return false; };
}

/*
 * After all the work has been done, this will add the html to the page
 * It also removes any existing media in the showcase
 */
function addMediaToPage(el, mediaContent, caption) {
	$("#showcase").empty();
	$("#showcase").append("<div id='media'><div id='imageWrapper'></div></div><div class='caption'></div>");

	//Set current item as active
	el.siblings().removeClass("active");
	el.addClass("active");

	//Remove existing content
	try {
		document.gallery-media.Stop();
	}
	catch(e){}
	$("#imageWrapper .item").css("display", "none");
	$("#imageWrapper").empty();
	
	//Add new content
	document.getElementById("imageWrapper").innerHTML = mediaContent;
	$("#showcase div.caption").html(caption);
	
	//Remove existing content
	try {
		document.gallery-media.Stop();
	}
	catch(e){}
	$("#imageWrapper .item").css("display", "none");
	$("#imageWrapper").empty();

	//Add new content
	document.getElementById("imageWrapper").innerHTML = mediaContent;
	$("#showcase div.caption").html(caption);	
}