var projectImages = [];
var projectImageIndex = 0;
var BaseProjectImageURL = "";

$(document).ready(function() {

	// set base project images url
	BaseProjectImageURL = $('#BaseProjectImageURL').val();

	$('.thumbnailCarousel').jCarouselLite({
		btnNext: ".thumbnail-next",
		btnPrev: ".thumbnail-prev",
		scroll: 3,
		visible: 14,
		easing: "easeOutBounce",
		speed: 1000
	});
	
	$('.thumbnail-prev').ifixpng();
	$('.thumbnail-next').ifixpng();

	// bind thumbnail images to load project details via AJAX
	$('#ThumbnailList li a').click(function() {
		
		var thumbnail = this;
	
		// do ajax call
		url = "../getProject/" + $(this).attr('projectId');
		
		$.getJSON(url, function(json) {
			
		
			// set client name
			$('#ClientInfo .portfolioText').html(json.client_name);
			
			// set media
			$('#otherInfo .portfolioText').html(json.media);
			
			// set description
			$('#MoreDetails .portfolioText p').html(json.description);
			
			// handle images
			projectImages = json.images;
			projectImageIndex = 0;
			rotateImage();
			
			// initiate transfer effect
			/*$(thumbnail).effect("transfer", {
				to: "#LargeProjectImage"
			},1000);*/

			
			
		});
	
	});
	
	
	// bind prev & next buttons
	$('#PortfolioPrev a').click(function() {
		
		projectImageIndex--;
		
		if (projectImageIndex < 0) {
			projectImageIndex = projectImages.length -1;
		}
				
		rotateImage();
		
	});
	
	$('#PortfolioNext a').click(function() {
		
		projectImageIndex++;
				
		if (projectImageIndex > (projectImages.length - 1)) {
			projectImageIndex = 0;
		}
		
		rotateImage();
		
	});

});

function rotateImage() {
	$('#LargeProjectImage').attr('src', BaseProjectImageURL + "/" + projectImages[projectImageIndex]);
	$('#PortfolioInnerCtn a.thickbox').attr('href', BaseProjectImageURL + "/" + projectImages[projectImageIndex]);
	$('#PortfolioDetails').html('Image ' + (projectImageIndex+1) + ' of ' + projectImages.length);
}