$(document).ready(function()
{
	/* This code is executed after the DOM has been completely loaded */
	var totDesc=0;
	var totWidth=0;
	var positions = new Array();
	$('#slides .slide').each(function(i)
	{
		/* Loop through all the slides and store their accumulative widths in totWidth */
		positions[i]= totWidth;
		totWidth += $(this).width();
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		totDesc++;
	});
	$('#slides').width(totWidth);
	/* Change the cotnainer div's width to the exact width of all the slides combined */
	$('#menu ul li a').click(function(e)
	{
		/* On a thumbnail click */
		$('li.menuItem').removeClass('act').addClass('inact');
		$(this).parent().addClass('act');
		var pos = $(this).parent().prevAll('.menuItem').length;
		$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
		/* Start the sliding animation */
		e.preventDefault();
		/* Prevent the default action of the link */
		
		/* Animation for the Description DIV */
		ChangeDesc((pos+1));
		
	});
	
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	/* Initialization of the descriptive text */
	DescInit();
});

function PopDescText(x)
{
	$('.DescSpan').siblings().css('display', 'none');
	if($('#Desc' + x).length)
	{
		$('#Desc' + x).css('display', 'block');
	}
}

/*function ChangeDesc(x)
{
	var d = $('#GalDesc');
	if($('#Desc' + x).length && $('#Desc' + x).html() != '')
	{
		d.animate({top:String("-" + SetDescTop() + "px"),opacity:0}, 200, function(){
			PopDescText(x);
			d.animate({top:"0px", opacity:0.50}, 450);
		});		
	}
	else
	{
		d.stop().animate({top:String("-" + SetDescTop() + "px"), opacity:0}, 450);	
	}
}*/

function ChangeDesc(x)
{
	var d = $('#GalDesc');
	if($('#Desc' + x).length && $('#Desc' + x).html() != '')
	{
		d.slideUp(200, function(){
			PopDescText(x);
			d.slideDown(450);
		});		
	}
	else
	{
		d.slideUp(200);	
	}
}

function DescInit()
{
	/*
	TO USE IT WITH WORDPRESS:
	Create divs with ids "DescX" where X is the number of the thumbnail you want a description above it.
	
	EX: ----------------------
	<div id="GalDesc">
		<div class="DescSpan" id="Desc2">
			<span class="DescTitle">Description Title for second thumbnail</span><br />
			<span class="DescText">Description goes here.</span><br />
			<a class="DescLink" href="#">Visit the Website</a>
		</div>
	</div>
	*/
	DescMouseEnter();
	var d = $('#GalDesc');
	var t = 0;
	PopDescText(1);
	//d.css('margin-bottom',String("-" + SetDescTop() + "px"));
	
	var w = $('#DescWrapper');
	w.css('margin-bottom',String("-" + SetDescTop() + "px"));
	w.css('height',String(SetDescTop() + "px"));
	w.css('top',String("-" + SetDescTop() + "px"));
}

function SetDescTop()
{
	var d = $('#GalDesc');
	var t = d.height();
	t += parseInt(d.css("padding-top"), 10);
	t += parseInt(d.css("padding-bottom"), 10);
	if(t<=38)
	{
		t = 38;	
	}
	return t;
}

function DescMouseEnter()
{
	$('#GalDesc').mouseenter(function()
	{
		$('#GalDesc').animate({opacity:1}, 100);
	}).mouseleave(function()
	{
		$('#GalDesc').animate({opacity:0.70}, 100);
	});
}