// JavaScript Document

var clicked = 0;
var effect = 0;

function SlideShow(holder) {
	
	$(holder + " img").wrapAll("<div id=\"ss_thumbs\" class=\"right\"></div>");
	$(holder + " #ss_thumbs").before("<div id=\"jsSlideshow_images\"></div>");
	$(holder + " #ss_thumbs").before("<div id=\"jsSlideshow_title\"></div>")
	$(holder + " #ss_thumbs").wrap("<div id=\"ss_thumbs_holder\"></div>");
	
	$(holder + " #ss_thumbs img").each( function(i) { 
		$(holder + " #jsSlideshow_images").append("<img src=\"" + $(this).attr("src") + "\" id=\"pic_" + i + "\" />");
		$(this).attr({"src": getThumbSrc($(this).attr("src"))});
		if(i==0) {
			$(this).attr({"class": "selected"});
			$(holder + " #pic_" + i).css("z-index", 2);
			$(holder + " #jsSlideshow_title").html($(this).attr("alt"));
		} else {
			$(this).fadeTo("fast", 0.5 ); 
			$(this).css("z-index", 1);	
			$(holder + " #pic_" + i).css("display", "none");	
			$(this).removeClass("selected");
		}
		$(this).attr("id", i);	
	});
	
	$(holder + " #ss_thumbs img")
		.mouseover(function() { 
			if(!$(this).hasClass("selected")) $(this).fadeTo(1, 1); 
		})
		.mouseout(function() { 
			if(!$(this).hasClass("selected")) $(this).fadeTo(1, 0.5); 
		});
	
 	$(holder + " #ss_thumbs img")
		.bind("click", function(e) {
			if($(this).attr("id") != clicked) {
				$(holder + " #" + clicked).removeClass("selected");
				$(this).addClass("selected");
				$(holder + " #" + clicked).fadeTo(1, 0.5, function() { slide(null, holder); }); 
				showPicture($(this).attr("id"), holder);			
			}
		});
	
	slide(true, holder);
	$(holder + " #ss_thumbs").show();
	setTimeout("showPicture(0,'"+holder+"')",500);
}

function showPicture(index, holder) {
	$(holder + " #jsSlideshow_title").fadeOut(0).fadeIn(400);		
	$(holder + " #jsSlideshow_title").html($(holder + " #"+index).attr("alt"));
	$(holder + " #jsSlideshow_images img").each(function() { $(this).css("z-index", 1); });
	$(holder + " #jsSlideshow_images #pic_"+index).fadeOut(0).fadeIn(400);			
	$(holder + " #jsSlideshow_images #pic_"+index).css("z-index", 3);	
	$(holder + " #jsSlideshow_images #pic_"+clicked).css("z-index", 2);
	$(holder + " #jsSlideshow_images #pic_"+index).css("top", 0);
	clicked = index;
}

function slide(dontanimate, holder) {
	// thumbWidth should be the width of the thumbnails, 
	// jquery won't get the proper width riht off the bat so hardcoding is required.
	// Be sure to change thumbWidth accordingly if you change the size of the thumbnails.
	var thumbWidth = 80 
	$(holder + " #ss_thumbs").stop(true,true);
	var duration = 500;
	if(dontanimate) duration = 0;
	var animTo = ($("#ss_thumbs_holder").outerWidth()/2)-(clicked*thumbWidth);
	animTo -= thumbWidth/2;
	$(holder + " #ss_thumbs").animate({left:animTo + "px"}, duration);
}

function getThumbSrc(src) {
	var srcSplit = src.split("/");
	srcSplit[srcSplit.length-1] = "mini_" + srcSplit[srcSplit.length-1];
	return srcSplit.join("/");
}