//Portfolio Page Object
function PortObj(){
	this.src = "";
	this.title = "";
	this.client="";
	this.role="";
	this.tools="";
}
var piece = new PortObj;
var portPieces = new Array();

//set border arround matte and change "div#frame img" padding to half border, in CSS
var border = 150;

var currentPlace = 0;

$(function(){

	//load and animate image function
	var workingImage = function(){	
		
		//grab the image properties
		var imagePath = $(this).attr("src");
		var imageWidth = $(this).attr("width");
		var imageHeight = $(this).attr("height");
		
		//hide the image so that you can fadeIn
		$(this).hide();
		
		//remove the load animation
		$("#loader").removeClass("loading").append(this);
		
		//animate the matte board to size up correctly
		$("#wrap-frame").animate({width:imageWidth+border, height:imageHeight+border}, "normal", showImage);
	}

	//function called to show image
	var showImage = function(){
		$("#frame img").fadeIn("slow");
	}
	
	//create new instance of the Image class
	var myImg = new Image();
	
	//Load image module
	var pointer=0;
	var pieceSelector = function(pointer){
		$(myImg).hide().load(workingImage).attr('src', portPieces[pointer].src);
		$("#title").hide().text("").append(portPieces[pointer].title).show("normal");
		$("#client").hide().html("<em>Client:</em>&nbsp;").append(portPieces[pointer].client).show("normal");
		$("#role").hide().html("<em>Role:</em>&nbsp;").append(portPieces[pointer].role).show("normal");
		$("#tools").hide().html("<em>Tools:</em>&nbsp;").append(portPieces[pointer].tools).show("normal");
		currentPlace = pointer;
		return false;
	}
	pieceSelector(currentPlace);
	
	// load next image
	$('.next').click(function(){
		if(portPieces.length-1 > currentPlace){
			pieceSelector(currentPlace+1);
		}
		else{return false;}
	});
	
	// load previous image
	$('.prev').click(function(){
		if(currentPlace > 0){
			pieceSelector(currentPlace-1);
		}
		else{return false;}
	});
	
	//function to load in project list links
	function projectList(){
		var myProjectList = $("#projectLinks");
		var myListItems = '<ul>';
		for(var loop=0; loop < portPieces.length; loop++){
			myListItems += ("<li>"+portPieces[loop].title+"</li>");
			//$("#projectLinks").append("<li>"+portPieces[loop].title+"</li>");
		}
		myListItems += '</ul>';
		myProjectList.html(myListItems);
	}
	projectList();
	
	$('#projectLinks li').click(function(e){
		var listItem = $('#projectLinks li').index(this);
		pieceSelector(listItem);
		return false;
	});
});