var scrolls = {};
var leftBig = {};
var leftSmall = {};
var current = 0;
var photos = 0;
var anim = false;
var init = true;

$(document).ready(function() {
	$("#content-scroll").attr("style", "overflow: hidden;");
	 
	
	$("#content-scroll").before('<div id="content-slider"></div>');
	
	$("#content-slider").slider({
		animate: true,
		min: 0,
		max: 100,
		value: 100,
		change: handleSliderChange,
		slide: handleSliderSlide,
		orientation: "vertical",
	});
	
	if(!(jQuery.browser.msie && (jQuery.browser.version=="8.0")))
	{
		$("#content-scroll > a").each( function() {
				$(this).attr("class", "onclick");
				$(this).attr("onclick", "show_photo( '" + $(this).attr("source") + "')");
				$(this).removeAttr("href");
		});	   	   
	
	}
});

function initialize()
{
	if(init)
	{
		var j = 0;
		$("#slideshow > nobr > div").each( function() {
			$(this).css("left", (j*678) + "px"); // added
			var a = ((678 - $("#photo"+j).width())/2);
			if(a<0) a = 0;
			leftBig[j] = a;
			var b = (678 - ($("#photo"+j).width() / $("#photo"+j).height() * 225))/2;
			leftSmall[j] = b;
			scrolls[j] = $(this).position().left;
			j++;	 
		});
		photos = j;
		init = false;
	}
}

function handleSliderChange(e, ui)
{
	var max = $("#content-scroll").attr("scrollHeight") - $("#content-scroll").height();
	var go = (100 - ui.value) * (max / 100);
	$("#content-scroll").animate({scrollTop: go}, 1000);
}

function handleSliderSlide(e, ui)
{                                 
	var max = $("#content-scroll").attr("scrollHeight") - $("#content-scroll").height();
	var go = (100 - ui.value) * (max / 100);
	$("#content-scroll").attr({scrollTop: go});
}

function show_photo(src)
{
	initialize();
	//$("#photo > img").attr("src", src);
	$("#preview").css("display", "none");
	$("#preview").css("top", "0");
	 var j = 0;

	  $("#slideshow > nobr > div > img").each( function() {
	  		  if($(this).attr("source") == src) current = j;
	  		  j++;
	  });	

	  $("#preview").fadeIn("slow", function() { 
	  	calibrate_sliblings(current);
	  	calibrate_navigation(current);
	  	$("#slideshow").scrollLeft(scrolls[current]); 
	  	$("#slideshow").css("top", "27px");
	  });
}

function close_photo()
{
	$("#slideshow").css("top", "-1000px");
	$("#preview").fadeOut("slow"); 
}

function next_photo()
{
	if(!anim)
	{
		current++;
		if(current>=photos) current = photos-1;
		anim = true;
		calibrate_navigation(current);
		if(current-1>=0) $("#photo"+(current-1)).animate({height: "225px", marginTop: "116px", marginLeft: leftSmall[current-1]+"px"}, 1000);
		if(current+1<photos) $("#photo"+(current+1)).height("225px");
		if(current+1<photos) $("#photo"+(current+1)).css("margin-top", "116px");
		if(current+1<photos) $("#photo"+(current+1)).css("margin-left", leftSmall[current+1]+"px");
		$("#photo"+current).animate({height: "451px", marginTop: "3px", marginLeft: leftBig[current]+"px"}, 1000);
		$("#slideshow").animate({scrollLeft: scrolls[current]}, 1000, function() { anim = false; } );
	}
}

function calibrate_sliblings(i)
{
	if(i-1>=0) $("#photo"+(i-1)).height(225);
	if(i-1>=0) $("#photo"+(i-1)).css("margin-top", "116px");
	if(i-1>=0) $("#photo"+(i-1)).css("margin-left", leftSmall[i-1]+"px");
	if(i+1<photos) $("#photo"+(i+1)).css("margin-top", "116px");
	if(i+1<photos) $("#photo"+(i+1)).css("margin-left", leftSmall[i+1]+"px");
	if(i+1<photos) $("#photo"+(i+1)).height(225)
	$("#photo"+i).height(451);
	$("#photo"+i).css("margin-top", "3px");
	$("#photo"+i).css("margin-left", leftBig[i]+"px");
}

function calibrate_navigation(i)
{
	if(i==(photos-1)) $("#next").hide("fast");
	else $("#next").show();
	if(i==0) $("#prev").hide("fast");
	else $("#prev").show();
}

function prev_photo()
{
	if(!anim)
	{
		current--;
		if(current<0) current = 0;
		anim = true;
		calibrate_navigation(current);
		if(current-1>=0) $("#photo"+(current-1)).height("225px");
		if(current-1>=0) $("#photo"+(current-1)).css("margin-top", "116px");
		if(current-1>=0) $("#photo"+(current-1)).css("margin-left", leftSmall[current-1]+"px");
		if(current+1<photos) $("#photo"+(current+1)).animate({height: "225px", marginTop: "116px", marginLeft: leftSmall[current+1]+"px"}, 1000);
		$("#photo"+current).animate({height: "451px", marginTop: "3px", marginLeft: leftBig[current]+"px"}, 1000);
		$("#slideshow").animate({scrollLeft: scrolls[current]}, 1000, function() { anim = false; } );
	}
}