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

var imgSum = $(".image_reel img").size();

$(".image_reel img:first").nextAll().css('opacity', '0');
$(".image_reel img:first").nextAll().css('z-index', '3');
$(".image_reel img:first").nextAll().css('display', 'none');
$(".image_reel img:first").css('opacity', '1');
$(".image_reel img:first").css('z-index', '4');
$(".image_reel img:first").css('display', 'block');

postprev = function() {
	$('.image_reel img.previmg').css('display', "none")
}

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1;

    $(".paging a").removeClass('active'); //Remove all active class
    $(".image_reel img").removeClass('activeimg'); //Remove all active class
    $(".image_reel img").removeClass('previmg'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
    $activeimg.addClass('activeimg'); //Add active class (the $active is declared in the rotateSwitch function)
    $previmg.addClass('previmg'); //Add active class (the $active is declared in the rotateSwitch function)

	$('.image_reel img.activeimg').css('opacity', 0);
	$('.image_reel img.activeimg').css('display', "block"); 

	$('.image_reel img.previmg').css('z-index', 3);
	$('.image_reel img.activeimg').css('z-index', 4); 

	$('.image_reel img.activeimg').animate({'opacity': 1.0}, 1000, postprev); 
	$('.image_reel img.previmg').animate({'opacity': 0.0}, 1000); 
	 
   	
    //Slider Animation
/*   $(".image_reel").animate({left: -image_reelPosition}, 650 );*/	
}; 

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

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

//On Click
$(".paging a").click(function() {
	var current=$(this).attr("rel");
	var selected=$active.attr("rel");
	if( current != selected ) {
	    $active = $(this); //Activate the clicked paging
	    var triggerID = $active.attr("rel");
	    $('.image_reel img').each(function(index) {
	    	if( $(this).attr("rel") == triggerID ) {
	    		$previmg = $('.image_reel img.activeimg');
	    		$activeimg=$(this);
	    		rotate();
	    	}
	  	});
	    	
	    //Reset Timer
	    clearInterval(play); //Stop the rotation
	    rotate(); //Trigger rotation immediately
	    rotateSwitch(); // Resume rotation timer
	    return false; //Prevent browser jump to link anchor
	}
});
});