﻿
function CreateCarousel(){

    var ItemCollectionWidth = 680;
    var ItemWidth = 68;
    var ItemsToShift = 3;
    
    /* Add rollovers to next and previous buttons */
    $(".Carousel .ButtonPrev, .Carousel .ButtonNext").hover(
      function () {
        $(this).removeClass("Active").addClass("Hover");
      }, 
      function () {
        $(this).removeClass("Hover").addClass("Active");
      }
    );
    
    /* Add mose down events to next and previous buttons */    
    $(".Carousel .ButtonPrev, .Carousel .ButtonNext").mousedown(
      function () {
        $(this).removeClass("Hover").addClass("Click");
      }
    );
    $(".Carousel .ButtonPrev, .Carousel .ButtonNext").mouseup(
      function () {
        $(this).removeClass("Click").addClass("Hover");
      }
    );
    
    $(".Carousel .ButtonPrev").click(function() {
        
        /* Grab the carousel that was clicked and some other variables */        
        var Carousel = $(this).parent();
        var CarouselItems = $(this).parent().find(".Items");
        var CarouselItemCount = CarouselItems.children().size();
        var CarouselItemsWidth = CarouselItemCount * ItemWidth;
        var CurrentScrollPosition = parseInt(CarouselItems.css("left"));
        
        /* Set new scroll position */        
        var NewScrollPosition = 0;
        
        if (CurrentScrollPosition > - (ItemWidth*ItemsToShift)){
            NewScrollPosition = 0;
        }
        else {
            NewScrollPosition = CurrentScrollPosition + (ItemWidth * ItemsToShift);
        }
        
        /* Disable previous button if necessary */        
        if (NewScrollPosition == 0) {
            $(this).removeClass().addClass("ButtonPrev").addClass("Disabled");
        }
        
        /* Enable Next Button */        
        $(this).parent().find(".ButtonNext").removeClass().addClass("ButtonNext").addClass("Active");
        
        /* Do the animation */ 
        $(this).parent().find(".Items").animate({left: NewScrollPosition}, {duration: 500, easing: 'easeInSine'});
                
    });  
    
    $(".Carousel .ButtonNext").click(function() {
    
        /* Grab the carousel that was clicked and some other variables */        
        var Carousel = $(this).parent();
        var CarouselItems = $(this).parent().find(".Items");
        var CarouselItemCount = CarouselItems.children().size();
        var CarouselItemsWidth = CarouselItemCount * ItemWidth;
        var CurrentScrollPosition = parseInt(CarouselItems.css("left"));
        
        /* Set new scroll position */        
        var NewScrollPosition = 0;
        
        if ((CarouselItemsWidth - Math.abs(CurrentScrollPosition) - ItemCollectionWidth) < (ItemWidth * ItemsToShift)){
            NewScrollPosition = CurrentScrollPosition - (CarouselItemsWidth - Math.abs(CurrentScrollPosition) - ItemCollectionWidth);
        }
        else {
            NewScrollPosition = CurrentScrollPosition -(ItemWidth * ItemsToShift);
        }
        
        /* Disable next button if necessary */        
        if ((CarouselItemsWidth - Math.abs(CurrentScrollPosition) - ItemCollectionWidth) < (ItemWidth * ItemsToShift + 1) ) {
            $(this).removeClass().addClass("ButtonNext").addClass("Disabled");
        }
        
        /* Enable Previous Button */        
        $(this).parent().find(".ButtonPrev").removeClass().addClass("ButtonPrev").addClass("Active");
        
        /* Do the animation */ 
        $(this).parent().find(".Items").animate({left: NewScrollPosition}, {duration: 500, easing: 'easeInSine'});
        
    });
    
    ResetCarousel()

}

function ResetCarousel(){

    /* set previous buttons to disabled */    
    $(".Carousel .ButtonPrev").removeClass("Active").addClass("Disabled");

    /* set next button to enabled */    
    $(".Carousel .ButtonNext").removeClass("Disabled").addClass("Active");

    /* Add rollovers to all the phones 
    $(".Carousel .Items li").hover(
      function () {
        $(this).animate({top: -5}, {duration: 200});
      }, 
      function () {
        $(this).animate({top: 0}, {duration: 200});
      }
    );
    */
}

$(document).ready(function() {
    
    CreateCarousel();
    
});

