function showCardInfo(i)
{
	$("#cardTitle").html(cards[i].title);
	$("#cardSummary").html(cards[i].summary);
	$("#cardNext").html(cards[i].next);
	$(".tabs").removeClass("active");
	$("#tab"+i).addClass("active");
	showPage(pageOfCard(i));
	displayCard(i);	
	
	return false;
}
function pageOfCard(card)
{
	return Math.ceil(card / 5);
}
function displayCardNoAnimation(current) {
	var last=lastBlock[currentPage];
	$("#a"+last + " .cardHolder").width(minWidth);
	$("#a"+current).width(maxWidthBorder);
	$("#a"+ current + " .cardHolder").width(maxWidthBorder);//.animate({width: maxWidth+"px"}, { queue:false, duration:253});
	lastBlock[currentPage]=current;
}
function displayCardFirst(i) {
	$("#a"+i).width(maxWidthBorder);
	$("#a"+ i + " .cardHolder").width(maxWidthBorder);
}
function displayCard(i, overRide)
{
	if (overRide==null && lastBlock[currentPage] == i)
		return;
	var q=$("#projectsP" + currentPage).queue();
	
	if (q.length)
		{
			setTimeout("displayCard(" + i + ",null)", 10);
			return;
		}
	
	$("#projectsP" + currentPage).queue(function() {
		onDisplayCardAnimate(i, 100, overRide);
	});
	
}

function onDisplayCardAnimate(current, duration, overRide)
{
	var last=lastBlock[currentPage];
	//console.log("starting animate last:" ,last, " current:", current, "duration:", duration);
	if (overRide==null && lastBlock[currentPage] == current)
		{
				$("#projectsP" + currentPage).dequeue();	
				return;	
		}
	//console.log("starting animate last:" ,last, " current:", current, "duration:", duration);
	$("#a"+last).animate({width: minWidth+"px"}, { queue:true, duration:duration, 
			step: function( currentWidth, fx ){
				onDisplayCardStep(currentWidth, fx, last, current);
 			},
			complete: function(){
				onDisplayCardComplete(last, current);
			}
	});
}
function onDisplayCardStep(currentWidth, fx, last, current ) {

	$("#a"+ last + " .cardHolder").width(currentWidth);
	$("#a"+ current).width(maxWidthBorder-currentWidth+50);
	$("#a"+ current + " .cardHolder").width(maxWidthBorder-currentWidth+50);

}
function onDisplayCardComplete(last, current) {
	$("#a"+last + " .cardHolder").width(minWidth);
	$("#a"+current).width(maxWidthBorder);
	$("#a"+ current + " .cardHolder").width(maxWidthBorder);//.animate({width: maxWidth+"px"}, { queue:false, duration:253});
	lastBlock[currentPage]=current;
	$("#projectsP" + currentPage).dequeue();

}
function nextPage()
{
	var newPage=((currentPage) % numPages)+1;
	if (newPage==1) {
		for (var i=2; i<numPages; i++)
			{
				$("#projectsP"+i).css({left: "800px"}, { queue:false, duration:1000, easing:"linear"});
			}					
	}
	showPage(newPage);
	var firstCard=lastBlock[newPage];
	showCardInfo(firstCard,true);
	return false;
}
function numOfSlidesOfPage(p) 
{
	if (p<numPages)
		{
			return 5;
		}
	else if (p==numPages)
	{
		return numCards % 5;
	}
}
function showPage(p)
{
	if (p>numPages || currentPage == p)
		return;
	newPage=p;
	if (newPage > currentPage)
		left="-800px";
	else
		left="800px";
	
	$("#projectsP"+newPage).animate({left: "0px"}, { queue:false, duration:1000, easing:"easeOutBack"});
	$("#projectsP"+currentPage).animate({left: left}, { queue:false, duration:1000, easing:"easeOutBack"});
	currentPage=newPage;
/*	
*/

	/*
	//Reflect destination page
	var firstCard=(newPage-1)*5+1;
	displayCard(firstCard);
	var lastCard=(newPage-1)*5+numOfSlidesOfPage(newPage);
	$("#a" + firstCard).width( maxWidthBorder);
	$("#a" + firstCard + " .cardHolder").width( maxWidthBorder);
	//$("#a" + i + " .imageCard").width( maxWidth);
	for (var i=firstCard+1;i<=lastCard;i++)
	{
		$("#a" + i).width( minWidth);
		$("#a" + i + " .cardHolder").width( minWidth);
		//$("#a" + i + " .imageCard").width( minWidth);
	}
	
	*/
	return false;
}	
$(document).ready(function(){
		//initSuperFish();
	    lastBlock=new Array();
	    maxWidth = 303;
		maxWidthBorder = 304;
	    minWidth = 50;	
		currentPage = 0;
		animating=0;
		queued=0;
		if (numPages==1)
		{
			$(".nav_arrow").hide();
		}
		
		$(".imageCard").reflect({height:25, opacity:".5"});
		
		
		for (var i=1; i<=numPages; i++)
		{
			lastBlock[i]=(i-1)*5+1;
			displayCardFirst(lastBlock[i]);
			/*$("#a" + lastBlock[i] ).width(maxWidthBorder);
			$("#a" + lastBlock[i] + " .imageCard").width(maxWidth);*/
		}
		$("ul.projectCards li a").hover(function(){
			var i=$(this).attr("id").replace("a","");
			displayCard(i);
		});
		showCardInfo(currentCard);	
		
		//$(".imageCard").css({width:minWidth + "px"});
	});