$(document).ready(function() {
//Show the paging and activate its first link
$(".slideshow_nav").show();
$(".slideshow_nav a:first").addClass("active");
$(".image_reel img:first").addClass("activeIMG");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".slideshow_window").width(); //slideshow_window
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging  and Slider Function
rotate = function(){
   var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".slideshow_nav a").removeClass('active'); //Remove all active class
    $next.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

	$(".image_reel img").removeClass('activeIMG');
	$activeIMG = $(".image_reel img:eq("+ triggerID + ")");
	$activeIMG.addClass('activeIMG');
	
	var $nextIMG =  $activeIMG.next().length ? $activeIMG.next()
        : $('.image_reel IMG:first');

	$activeIMG.addClass('last-activeIMG');

    $nextIMG.css({opacity: 0.0})
        .addClass('activeIMG')
        .animate({opacity: 1.0}, 500, function() {
            $activeIMG.removeClass('activeIMG last-activeIMG');
        });
	

}; 

//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds			
        $active = $('.slideshow_nav a.active'); //Move to the next paging
		$next = $active.next();
        if ( $next.length === 0) { //If paging reaches the end...
            $next = $('.slideshow_nav a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 5000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch


//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
});	

//On Click
$(".slideshow_nav a").click(function() {
    $active = $(this).prev();
	$next = $(this);
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});


/* ################################################################################################################### */
/* ### Product Slider 						########################################################################## */
/* ################################################################################################################### */


	var containerWidth = $(".galleryList").width();  
	var listNum = 6;
	var totalPages = ($(".listImg li").length / listNum);
	var curPage = (curPage) ? curPage : 1; 
	
	function moveSlider(direction) {
		
		
		if( direction && (curPage >= totalPages)) { curPage = 0; }
		
		var leftValue = $(".listImg").css("margin-left");
		//var movement = direction ? parseFloat(leftValue, 10) - containerWidth: parseFloat(leftValue, 10) + containerWidth;
		var nextPage = direction ? curPage + 1 : curPage - 1;
		if(nextPage == 0) { nextPage = totalPages };	
		var movement = (0 - ((nextPage-1) * containerWidth)) ;
		
		$(".listImg").animate({
			"margin-left": movement
			}, 200	); 		
		curPage = nextPage;
	}
	
	$(".prev").click(function(){ moveSlider(false); });
	$(".next").click(function(){  moveSlider(true); }); 	
		
});