var $j = jQuery.noConflict();
$j(document).ready(function(){
	// Local variables for elements
	var imageContainers = $j("#image-preview li");
	var images = $j("#image-preview li img");
	var imageBox = $j("#image-preview");
	// Center each image in the image preview box
	
	images.each(function(index){	
		var image = $j(this);
		image.load(function(){
			image.css({
				"position":"absolute",
				"display":"block",
				"margin-top": ((imageBox.height() -  image.height()) /2)+"px",
				"margin-left": ((imageBox.width() -  image.width()) /2)+"px"

			})
			.queue(function(){
				if(index != 0)
					imageContainers.eq(index).hide();
										
			});
		});		
	});	

	// Add an event to each image thumbnail
	var thumbs = $j("#image-thumbnails img");
	
	thumbs.each(function(index){
		$j(this).click(function(){
			changeImage(index);
		});
	});

	/*
	 * Cycle through portfolio images
	 */ 
	var leftArrow = $j("#left-arrow").hide();
	var rightArrow = $j("#right-arrow");	
	var currentID = 0;
	var maxID = imageContainers.size() - 1;
	

	if(maxID < 1)
		rightArrow.hide();
	
	leftArrow.click(function(){
		
		if(currentID != 0)
		{
			changeImage(currentID - 1);
		}		
	});
	
	rightArrow.click(function(){
		
		if(currentID < maxID)
		{
			changeImage(currentID + 1);
		}

	});
	
	function changeImage(imageID){
		
		// Hide current image
		imageContainers.eq(currentID).hide();


		// Show specified image
		currentID = imageID;
		imageContainers.eq(currentID).show();

		
		
		if(currentID == 0){
			leftArrow.hide();
			
			if(currentID != maxID)
				rightArrow.show();
		}else if(currentID == maxID){
			rightArrow.hide();
			
			if(currentID != 0)
				leftArrow.show();
		}
		else
		{
			
			leftArrow.show();
			rightArrow.show();
		}
			
	}
});