// JavaScript Document

$(document).ready(function() {
	//Code goes here
$(".rotate_buttons").show();

$(".rotate_buttons a:first").addClass("active");

$(".news_info").show();

$(".news_info article:first").addClass("visible");


var imageWidth = $(".news_pic").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

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

rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
	var triggerID2 = $active.attr("rel")
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
	
    $(".rotate_buttons a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
	
	
    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 

rotate2 = function(){
	
    
	$(".news_info article").removeClass('visible');
	$active2.addClass('visible');
	

}; 


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

rotateSwitch2 = function(){
    play2 = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
   
   
   $active2 = $('.news_info article.visible').next()
		if ( $active2.length === 0) {
			$active2 = $('.news_info article:first');
			
		} 
		
		
		
        rotate2(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};

		

rotateSwitch(); //Run function on launch
rotateSwitch2();
//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
	clearInterval(play2); //Stop the rotation

}, function() {
    rotateSwitch(); //Resume rotation timer
	rotateSwitch2();
});	


//On Click
$(".rotate_buttons a").click(function() {
	
    $active = $(this); //Activate the clicked paging

    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
	
	if ($active.attr("rel") == 1){
		
		$active2 = $('.news_info article:first');
		
	} else if ($active.attr("rel") == 2) {
		
		$active2 = $('.news_info article:nth-child(2)');
		
	} else if ($active.attr("rel") == 3) {
		
		$active2 = $('.news_info article:nth-child(3)');
		
	}  else if ($active.attr("rel") == 4) {
		
		$active2 = $('.news_info article:nth-child(4)');
		
	}

    //Reset Timer
    clearInterval(play2); //Stop the rotation
    rotate2(); //Trigger rotation immediately
    rotateSwitch2(); 


  
    return false; //Prevent browser jump to link anchor
});


});