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

    $title = $('h1');
    $subtitle = $('#slidedesc p');

    // insert images to front and end
    var $imageReel = $('.image_reel');
    var $images = $imageReel.children();
    var numImages = $images.length;
    var first = $images.eq(0);
    var second = $images.eq(1);
    var last = $images.eq(-1);
    first.before(last.clone());
    last.after(second.clone());
    last.after(first.clone());

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

    //Adjust the image reel to its new size
    $imageReel.hide();
    $imageReel.css({'width' : imageReelWidth, left: -imageWidth}).fadeIn();

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

        var v = $active.attr("alt");
        $("#overimage .inner").fadeOut(function(){
            $(this).html(v).fadeIn();
        });

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

        //Slider Animation
        var finishFunction = function() {};
        if(triggerID == 1 && previousTriggerID == numImages) {
            finishFunction = function() {
                $imageReel.css({left: -imageWidth});
            }
        }
        $imageReel.animate({
            left: -image_reelPosition
        }, 500, finishFunction);
        previousTriggerID = triggerID;

	// set texts
	/*var currentItem = $images.eq(triggerID -1);
	var currentImage = currentItem.children('img');
	$title.animate({opacity: 0}, 250, function() {
		$title.text(currentImage.attr('title'));
		$subtitle.html('<a href="' + currentItem.attr('href') + '">' + currentImage.attr('alt') + '</a>');
		Cufon.replace($title, {fontFamily: "'DINOT-Bold'"});
		Cufon.replace($subtitle, {fontFamily: "'DINOT-Regular'"});
		$title.animate({opacity: 1}, 250);
	});
	$subtitle.animate({opacity: 0}, 250).animate({opacity: 1}, 250);*/
    };

    //Rotation  and Timing Event
    rotateSwitch = function(){
        play = setInterval(function(){ //Set timer - this will repeat itself every 5 seconds
            $active = $('.paging a.active').next();  //Move to the next paging , function(){
            if ( $active.length === 0) { //If paging reaches the end...
                
                $active = $('.paging a:first'); //go back to first


            }
            rotate(); //Trigger the paging and slider function
        }, 5000); //Timer speed in milliseconds (5 seconds)
    };

    // Run on launch
    rotateSwitch();

    // set (sub)title
    //$title.text(currentImage.attr('title'));
    //$subtitle.html('<a href="' + currentItem.attr('href') + '">' + currentImage.attr('alt') + '</a>');

    //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(this); //Trigger rotation immediately
        rotateSwitch(this); // Resume rotation timer
        return false; //Prevent browser jump to link anchor
    });
});