$(document).ready(function() {
	$(".folio a:first").addClass("active");
	
	var boxWidth = $(".box").width();
	var imgLenght = $(".bg .item").size();
	var imageTotalWidth = boxWidth * imgLenght;
	var flashContainer = '<div id="flashContainer"></div>';
	var isFlash = false;
	
	$(".bg").css({'width' : imageTotalWidth});
	
	rotate = function(){
	    var triggerID = $active.attr("rel") - 1; 
	    var bgPosition = triggerID * boxWidth; 
	
	    $(".folio a").removeClass('active'); 
	    $active.addClass('active'); 
	
	    $(".bg").animate({
	        left: -bgPosition
	    }, 1000 );
	
	}; 
	
	rotateSwitch = function(){
	    play = setInterval(function(){ 
	        $active = $('.folio a.active').parent().next().children(); 
			
	        if ( $active.length === 0) {
	        	$active = $('.folio a:first');
	        }
	        rotate();
	    }, 4000);
	};
	
	rotateSwitch(); 
	
	$(".bg").hover(function() {
	    clearInterval(play); 
	}, function() {
		if(isFlash == false){
			rotateSwitch(); 	
		}
	});	
	
	$(".folio a").click(function() {
		
		if(isFlash == true){
			$("#flashContainer").remove();
			$('#last #play').css('display','block');
			isFlash = false;
		}
		
		$active = $(this); 
	    clearInterval(play); 
	    rotate(); 
	    rotateSwitch();
	    return false; 
	});
	
	
	$("#last a").click(function() {
		$("#lastItemContent").before(flashContainer);
		
		var so = new SWFObject("/swf/balle.swf", "balle", "952", "393", "9");
		so.addParam("wmode", "transparent");
		so.write("flashContainer");
		
		$('#last #play').css('display','none');
		isFlash = true;
	});
	
});