/**
 * @author Bohonyi Balazs Zsolt
 */

var x = 0;
var thumbWidth = 0; // just initializing
var thumbsVisible = 2;
var thumbsToScroll = 1;
//var $animationType = "easeOutElastic";
//var $animationType = "easeOutBack";
var $animationType = "easeOutBounce";
var $animationSpeed = 500;

$(window).load(function() {
	if ($("#work-scroll img:eq(0)").length > 0) {
		// The initial width of the thumb is the width of the first image
		var first_image = $("#work-scroll img:eq(0)");
		thumbWidth = first_image.width();
		
		// left/right margin and padding widths
		var image_margin_width = parseInt(first_image.css("marginLeft").replace("px", "")) + parseInt(first_image.css("marginRight").replace("px", ""));
		var image_padding_width = parseInt(first_image.css("paddingLeft").replace("px", "")) + parseInt(first_image.css("paddingRight").replace("px", ""));
		var image_border_width = parseInt(first_image.css("borderLeftWidth").replace("px", "")) + parseInt(first_image.css("borderRightWidth").replace("px", ""));

		// top/bottom margin and padding widths
		var image_margin_height = parseInt(first_image.css("marginTop").replace("px", "")) + parseInt(first_image.css("marginBottom").replace("px", ""));
		var image_padding_height = parseInt(first_image.css("paddingTop").replace("px", "")) + parseInt(first_image.css("paddingBottom").replace("px", ""));
		var image_border_height = parseInt(first_image.css("borderTopWidth").replace("px", "")) + parseInt(first_image.css("borderBottomWidth").replace("px", ""));
		
		// Recalculate the height of the carousel
		var thumbHeight = $("#work-scroll ul li").height() + "px";
		
		// Recalculate the thumbWidth
		thumbWidth = thumbWidth + image_margin_width;
		thumbWidth = thumbWidth + image_padding_width;
		thumbWidth = thumbWidth + image_border_width;

		// Set the inital width of the mask
		$("#work-mask").css("width", "100%");

		// Get the the width of the mask in pixels
		var maskWidth = $("#work-mask").width();

		// Calculate the number of the visible thumbnails
		thumbsVisible = parseInt(maskWidth / thumbWidth);
		
		// Work Mask
		$("#work-mask").css("width", (thumbWidth + 4) * thumbsVisible);
		$("#work-mask").css("height", thumbHeight); // Set the height of the carousel
		$("#work-scroll ul li").css("width", (thumbWidth + 4));
				
		// Work Scroller
		var numThumbs = $("#work-scroll img").length;
		
		$(".next").click(function(){
			updateOffset(1, numThumbs);
			$("#work-scroll").animate({
				left: x
			}, $animationSpeed, $animationType);
			return false;
		});
		
		$(".prev").click(function(){
			updateOffset(0, numThumbs);
			$("#work-scroll").animate({
				left: x
			}, $animationSpeed, $animationType);
			return false;
		});
	}
});// end doc ready


function updateOffset(next,thumbs) {
	if (next == 1) {
		if (x == (0 - ((thumbs - thumbsToScroll) * (thumbWidth + 4)))) {
			x = 0;
		} else {
			x = x - ((thumbWidth + 4) * thumbsToScroll);
		}
	}
	
	if (x <= 0 && next != 1) {
		if (x == 0) {
			x = (0 - ((thumbs - thumbsToScroll) * (thumbWidth + 4)));
		} else {
			x = x + ((thumbWidth + 4) * thumbsToScroll);
		}
	}
}// end updateOffset