var totalImages;
var images = [];
var extLink;
var curImage = 0;

function switchImg(index){
	switchDot(index);
	
	$("#portfolio-img").animate({
		opacity:0
	},{duration: 380, easing: "easeInOutQuint"});
	
	setTimeout(function(){
		$("#portfolio-img").empty();
		loadImg(index);
	},400);
}

function switchDot(index){
	$("#buttons li a:not(:eq("+index+"))").animate({
		opacity:0,
	},{duration: 600, easing: "easeInOutQuint"});

	$("#buttons li a").eq(index).animate({
		opacity:1,
	},{duration: 800, easing: "easeInOutQuint"});
	
	curImage = index;
}

function loadImg(index){
	var img = new Image();
	
	$("#loader").fadeIn();
	$(img).load(function() {
		$("#portfolio-img").append(this).animate({
			opacity:1
		},{duration: 800, easing: "easeInOutQuint"});
		
		setTimeout(function(){
			$("#loader").fadeOut();
		},100);
		
	}).error(function () {
		// notify the user that the image could not be loaded
	}).attr('src', images[index]);
}



$(document).ready(function(){
	$("#buttons li a").each(function(){
		var href = this.getAttribute('href');
		images.push(href);
	})
	
	var newWidth = 92+(26*images.length)+'px';
	
	$("#pagination").animate({
		width:newWidth
	},1).animate({
		opacity:1
	},{duration: 600, easing: "easeInOutQuint"});
	
	setTimeout(function(){
		loadImg(0);
		switchDot(0);
	},200);
	
	$("#buttons li a").live("click", function(){
		var index = $("#buttons li a").index(this)
		
		if (curImage != index){	
			switchImg(index);
		}
		
		return false;
	});
	
	$("#left").click(function(){
		if(curImage <= 0){
			switchImg(images.length-1);
		}else{
			switchImg(curImage-1);
		}
	});
	
	$("#right").click(function(){
		if (curImage+2 > images.length){
			switchImg(0);
		}else{
			switchImg(curImage+1);
		}
	});	
});