$(document).ready(function() {
    
    //TOP ROTATE IMAGE - 1ST ROW
    
        //Show the paging and activate its first link
        $(".paging").show();
        $(".paging a:first").addClass("active");
        
        //Get size of the image, how many images there are, then determin the size of the image reel.
        var imageWidth = $(".window").width();
        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
        
        $(".paging 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
        }, 1000 );
        
        }; 
        
        //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
                if ( $active.length === 0) { //If paging reaches the end...
                    $active = $('.paging a:first'); //go back to first
                }
                rotate(); //Trigger the paging and slider function
            }, 8000); //Timer speed in milliseconds (4 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
        $(".paging a").click(function() {
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate(); //Trigger rotation immediately
            rotateSwitch(); // Resume rotation timer
            return false; //Prevent browser jump to link anchor
        });
         

         
         $(".window").touchwipe({
         wipeLeft: function() {},
         wipeRight: function() {},
         //wipeLeft: function() {alert("left");},
         //wipeRight: function() {alert("right");},
        preventDefaultEvents: true
		});




 //ANIMAL TOUR TOP ANIMATION
    
        //Show the paging and activate its first link
        $(".paging_5").show();
        $(".paging_5 a:first").addClass("active_5");
        
        //Get size of the image, how many images there are, then determin the size of the image reel.
        var imageWidth_5 = $(".window_5").width();
        var imageSum_5 = $(".image_reel_5 img").size();
        var imageReelWidth_5 = imageWidth_5 * imageSum_5;
        
        //Adjust the image reel to its new size
        $(".image_reel_5").css({'width' : imageReelWidth_5});
        
        //Paging  and Slider Function
        rotate_5 = function(){
        var triggerID_5 = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition_5 = triggerID_5 * imageWidth_5; //Determines the distance the image reel needs to slide
        
        $(".paging_5 a").removeClass('active_5'); //Remove all active class
        $active.addClass('active_5'); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $(".image_reel_5").animate({
                left: -image_reelPosition_5
        }, 1000 );
        
        }; 
        
        //Rotation  and Timing Event
        rotateSwitch_5 = function(){
            play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
                $active = $('.paging_5 a.active_5').next(); //Move to the next paging
                if ( $active.length === 0) { //If paging reaches the end...
                    $active = $('.paging_5 a:first'); //go back to first
                }
                rotate_5(); //Trigger the paging and slider function
            }, 8000); //Timer speed in milliseconds (4 seconds)
        };
        
        rotateSwitch_5(); //Run function on launch
        
        
        
        //On Hover
        $(".image_reel_5 a").hover(function() {
            clearInterval(play); //Stop the rotation
        }, function() {
            rotateSwitch_5(); //Resume rotation timer
        });	
        
        //On Click
        $(".paging_5 a").click(function() {
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate_5(); //Trigger rotation immediately
            rotateSwitch_5(); // Resume rotation timer
            return false; //Prevent browser jump to link anchor
        });
		
		 $(".window_5").touchwipe({
         wipeLeft: function() {},
         wipeRight: function() {},
         //wipeLeft: function() {alert("left");},
         //wipeRight: function() {alert("right");},
        preventDefaultEvents: true
		});

		
		
		


//MEDIA TOP ANIMATION



		//TOP ROTATE IMAGE - 1ST ROW
    
        //Show the paging and activate its first link
        $(".paging_4").show();
        $(".paging_4 a:first").addClass("active_4");
        
        //Get size of the image, how many images there are, then determin the size of the image reel.
        var imageWidth_4 = $(".window_4").width();
        var imageSum_4 = $(".image_reel_4 img").size();
        var imageReelWidth_4 = imageWidth_4 * imageSum_4;
        
        //Adjust the image reel to its new size
        $(".image_reel_4").css({'width' : imageReelWidth_4});	
		
        
       //Paging  and Slider Function
        rotate_4 = function(){
            var triggerID_4 = $active.attr("rel") - 1; //Get number of times to slide
            var image_reelPosition_4 = triggerID_4 * imageWidth_4; //Determines the distance the image reel needs to slide
        
            $(".paging_4 a").removeClass('active_4'); //Remove all active class
            $active.addClass('active_4'); //Add active class (the $active is declared in the rotateSwitch function)
        
            //Slider Animation
            $(".image_reel_4").animate({
                left: -image_reelPosition_4
            }, 1000 );
        
        }; 
        
          //Rotation  and Timing Event
        rotateSwitch_4 = function(){
            play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
                $active = $('.paging_4 a.active_4').next(); //Move to the next paging
                if ( $active.length === 0) { //If paging reaches the end...
                    $active = $('.paging_4 a:first'); //go back to first
                }
				rotate_4(); //Trigger the paging and slider function
            }, 8000); //Timer speed in milliseconds (4 seconds)
        };
        
        rotateSwitch_4(); //Run function on launch
        
        
        
       //On Hover
        $(".image_reel_4 a").hover(function() {
            clearInterval(play); //Stop the rotation
        }, function() {
            rotateSwitch_4(); //Resume rotation timer
        });	
        
        //On Click
        $(".paging_4 a").click(function() {
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate_4(); //Trigger rotation immediately
            rotateSwitch_4(); // Resume rotation timer
            return false; //Prevent browser jump to link anchor
        });
		
		
		 $(".window_4").touchwipe({
         wipeLeft: function() {},
         wipeRight: function() {},
         //wipeLeft: function() {alert("left");},
         //wipeRight: function() {alert("right");},
        preventDefaultEvents: true
		});

		
	

//CAROUSEL HIGHLIGHTED - 3RD ROW

    
        //Show the paging and activate its first link
        $(".paging_2").show();
        $(".paging_2 a:first").addClass("active_2");
        
        //Get size of the image, how many images there are, then determin the size of the image reel.
        var imageWidth_2 = $(".window_2").width();
        var imageSum_2 = $(".image_reel_2 img").size();
        var imageReelWidth_2 = imageWidth_2 * imageSum_2;
        
        //Adjust the image reel to its new size
        $(".image_reel_2").css({'width' : imageReelWidth_2});
        
        
        
        //Paging  and Slider Function
        rotate_2 = function(){
            var triggerID_2 = $active.attr("rel") - 1; //Get number of times to slide
            var image_reelPosition_2 = triggerID_2 * imageWidth_2; //Determines the distance the image reel needs to slide
        
            $(".paging_2 a").removeClass('active_2'); //Remove all active class
            $active.addClass('active_2'); //Add active class (the $active is declared in the rotateSwitch function)
        
            //Slider Animation
            $(".image_reel_2").animate({
                left: -image_reelPosition_2
            }, 500 );
        
        }; 
        
        
        //On Hover
        $(".image_reel a").hover(function() {
            clearInterval(play); //Stop the rotation
        }, function() {
            rotateSwitch(); //Resume rotation timer
        });	
        
        //On Click
        $(".paging a").click(function() {
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate(); //Trigger rotation immediately
            rotateSwitch(); // Resume rotation timer
            return false; //Prevent browser jump to link anchor
        });
		
		
		
        
        //Rotation  and Timing Event
        rotateSwitch_2 = function(){
            play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
                $active = $('.paging_2 a.active_2').next(); //Move to the next paging
                if ( $active.length === 0) { //If paging reaches the end...
                    $active = $('.paging_2 a:first'); //go back to first
                }
            }, 10000); //Timer speed in milliseconds (4 seconds)
        };
        
        rotateSwitch_2(); //Run function on launch
        
        
        
        //On Hover
        $(".image_reel_2 a").hover(function() {
            clearInterval(play); //Stop the rotation
        }, function() {
            rotateSwitch_2(); //Resume rotation timer
        });	
        
        //On Click
        $(".paging_2 a").click(function() {
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate_2(); //Trigger rotation immediately
            rotateSwitch_2(); // Resume rotation timer
            return false; //Prevent browser jump to link anchor
        });
	
	
	
//FALLBACK

    
        //Show the paging and activate its first link
        $(".paging_3").show();
        $(".paging_3 a:first").addClass("active_3");
        
        //Get size of the image, how many images there are, then determin the size of the image reel.
        var imageWidth_3 = $(".window_3").width();
        var imageSum_3 = $(".image_reel_3 img").size();
        var imageReelWidth_3 = imageWidth_3 * imageSum_3;
        
        //Adjust the image reel to its new size
        $(".image_reel_3").css({'width' : imageReelWidth_3});
        
        
        
        //Paging  and Slider Function
        rotate_3 = function(){
            var triggerID_3 = $active.attr("rel") - 1; //Get number of times to slide
            var image_reelPosition_3 = triggerID_3 * imageWidth_3; //Determines the distance the image reel needs to slide
        
            $(".paging_3 a").removeClass('active_3'); //Remove all active class
            $active.addClass('active_3'); //Add active class (the $active is declared in the rotateSwitch function)
        
            //Slider Animation
            $(".image_reel_3").animate({
                left: -image_reelPosition_3
            }, 500 );
        
        }; 
        
        //Rotation  and Timing Event
        rotateSwitch_3 = function(){
            play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
                $active = $('.paging_3 a.active_3').next(); //Move to the next paging
                if ( $active.length === 0) { //If paging reaches the end...
                    $active = $('.paging_3 a:first'); //go back to first
                }
            }, 10000); //Timer speed in milliseconds (4 seconds)
        };
        
        rotateSwitch_3(); //Run function on launch
        
        
        
        //On Hover
        $(".image_reel_3 a").hover(function() {
            clearInterval(play); //Stop the rotation
        }, function() {
            rotateSwitch_3(); //Resume rotation timer
        });	
        
        //On Click
        $(".paging_3 a").click(function() {
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate_3(); //Trigger rotation immediately
            rotateSwitch_3(); // Resume rotation timer
            return false; //Prevent browser jump to link anchor
        });
		
		
		
		
	 

		




//HOT SPOT AT CAROUSEL 3RD ROW
		
	$(".more").hover(function(){
		$(this).find("img").attr("src", "images/more_high_over.png");
		$(this).css({'width': '350px', 'height' : '200px'});
		$(this).stop().find(".test").fadeIn('slow').css({'z-index' : '100'}); 
		},
                function () {
		$(this).find("img").attr("src", "images/more_high.png");
		$(this).stop().find(".test").fadeOut('normal').css({'z-index' : '10'});
		$(this).css({'width' : '50px', 'height' : '50px'});
	});
	
	
      		
		
		

//GALLERY

$("ul#thumb li").hover(function() {
	$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
	$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
		.animate({
			marginTop: '-10px', /* The next 4 lines will vertically align this image */ 
			marginLeft: '-10px',
			top: '0',
			left: '0',
			width: '111px', /* Set new width */
			height: '111px', /* Set new height */
			padding: '0px',
                        border: '3px solid #ffffff'
		}, 200);

	} , function() {
	$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
	$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
		.animate({
			marginTop: '0', /* Set alignment back to default */
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '91px', /* Set width back to default */
			height: '91px', /* Set height back to default */
			padding: '0px',
                        border: '0px solid #ffffff'
		}, 400);
});
});