$(document).ready(function() {

    //enableGallery();

});

var imageSum=0;
var imageIncrement=0;
var numberPosition;

function showImageAt(a)
{
    imageIncrement++;
    //console.log("Inc : "+imageIncrement);
    //console.log("Sum : "+imageSum);
    if(imageIncrement==imageSum)
    {
        imageIncrement=0;
        $('.preloading-image').hide();
        $(".image_reel img").last().css({'margin-right' : 0});
        $(".image_reel img").each(function(){
            $(this).fadeIn("fast");
        });
    }
}


function enableGallery()
{

    //numberPosition

    //reset active position
    $(".paging a").removeClass('active');
    $active = $('.paging a:first'); //go back to first

    if(window.play)clearInterval(play);

    //Show the paging and activate its first link
    $(".paging").show();
    $(".paging a:first").addClass("active");
    numberPosition=$(".paging a:first").position();
    $('#numberHighlight').css("left",numberPosition.left+2);

    var minImageWidth=580;
    var imageWidth=580;// = $(".window").width();
    var imageReelWidth =0;
    imageSum = $(".image_reel img").size();
    //console.log("Total image : " + imageSum);
    var imagePadding=10;

	$(".image_reel img").each(function(index) {
		//console.log(index);
		$(this).imagesLoaded( function( $image ) {
			//console.log("Loaded");
			if($image.width() < minImageWidth)imagePadding=imagePadding+(minImageWidth-$image.width());
			$image.css({"margin-right" : imagePadding});
			imageReelWidth=imageReelWidth + $image.width() + imagePadding;
            imagePadding=20;
            $(".image_reel").css({'width' : imageReelWidth});
            showImageAt();

		});
	
	});
	
	
/*
    $(".image_reel img").each(function(index) {
    	return;
        //$(this).bind('load',function() {
        $(this).imagesLoaded( function( $images ) {
        	//$images.sort();
            //console.log("Current Image : " + index);
            //console.log("Image Src : " + $(this).attr("src"));
            console.log("Image Width : " + $(this).width());
            //$(this).css({"display" : "none"});
            if($(this).width() < minImageWidth)imagePadding=10+(minImageWidth-$(this).width());
            //if($images.index()==$(".image_reel img").length-1)$(this).css({"margin-right" : 0});
            //console.log($($images).index());
            $(this).css({"margin-right" : imagePadding});
            console.log("Margin Right : " + imagePadding);
            console.log("TOTAL : " + (imagePadding + $(this).width()));
            
            imageReelWidth=imageReelWidth + $(this).width() + imagePadding;
            imagePadding=10;
            $(".image_reel").css({'width' : imageReelWidth});
            //console.log("Image Reel Width : " + imageReelWidth);            
            //$(this).ready(showImageAt(index));
            showImageAt(index);
        });


    });
*/
    

/*    
    $(".image_reel img").imagesLoaded( function( $images ) {
    	//$images.sort();
        //console.log("Current Image : " + index);
        //console.log("Image Src : " + $(this).attr("src"));
        //console.log("Image Width : " + $(this).width());
        //$(this).css({"display" : "none"});
        if($images.width() < minImageWidth)imagePadding=20+(minImageWidth-$images.width());
        //if($images.index()==$(".image_reel img").length-1)$(this).css({"margin-right" : 0});
        //console.log($($images).index());
        $images.css({"margin-right" : imagePadding});
        //console.log("Margin Right : " + imagePadding);
        imageReelWidth=imageReelWidth + $images.width() + imagePadding;
        imagePadding=20;
        $(".image_reel").css({'width' : imageReelWidth});
        //console.log("Image Reel Width : " + imageReelWidth);            
        //$(this).ready(showImageAt(index));
        showImageAt();
    });
*/    
    //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) + (triggerID * imagePadding); //Determines the distance the image reel needs to slide
        //alert(triggerID);
        $(".paging a").removeClass('active'); //Remove all active class
        //$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        numberPosition = $active.position();
        //alert(p.left);
        //Slider Animation
        /*
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 700 );
        */

        $('.image_reel').animate(
             { left: -image_reelPosition }, // what we are animating
             {
              duration: 'slow', // how fast we are animating
              easing: 'easeInOutExpo'
         });
         
         $('#numberHighlight').animate(
             { left: (numberPosition.left+2) }, // what we are animating
             {
              duration: 'slow', // how fast we are animating
              easing: 'easeInOutExpo'
         });
         

    };

    //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
        }, 4000); //Timer speed in milliseconds (4 seconds)
    };

    //rotateSwitch(); //Run function on launch

    /*
    //On Hover
    $(".image_reel a").hover(function() {
        if(window.play)clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation timer
    });
    */
    
    //On Click
    $(".paging a").click(function() {
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        if(window.play)clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        //rotateSwitch(); // Resume rotation timer
        return false; //Prevent browser jump to link anchor
    });

    //rotate();
}