﻿$(document).ready(function() {

    var Carousel = {
    
        isAnimating: false,
        isComplete: true,
        direction: null,
        itemWidth: null,
        
        init: function() {
        
            this.element = $('.jCarousel ul');
            this.items = $('li', this.element);
            this.itemWidth = this.items.eq(0).outerWidth(true);
        
            // if no carousel items hide buttons and quit; 
            if (this.items.length === 0) {
                $('.jCarousel .prev').add('.jCarousel .next').hide();
                return false;
            };
            
            this.element.css({
                left: -(this.itemWidth-30),
                width: this.element.width()+(this.itemWidth*2)
            });
               
            this.items.each(function(i) {
                $(this).attr('id', 'item_'+i).css('left', i*Carousel.itemWidth);
            });
        },
        
        
        animate: function() {
            var i = 0;
            var els = $('.jCarousel .item');
            if (this.isAnimating && this.isComplete) {
                var d = this.direction;
                this.isComplete = false;
                if (d === 'prev') {
                    Carousel.setPosition(d);
                };
                this.items.each(function(i) {
                    var el = $(this);
                    el.animate({
                        left: Carousel.getPosition(el.css('left'), d)}, 1500, function() {
                            i++;
                            if(i === Carousel.items.length) {
                                if (d === 'next') {
                                    Carousel.setPosition(d);
                                };
                                Carousel.isComplete = true;
                                Carousel.animate();
                            };
                    });
                });
            };
        },
        
        
        setPosition: function(d) {
            // get the current NOT default items list
            // i.e not this.items;
            var items = $('.jCarousel li');
            if (d === 'prev') {
                return items.eq(0)
                    .appendTo(this.element).css('left', this.itemWidth*items.length);
            } else {
                return items.eq(items.length-1)
                    .prependTo(this.element).css('left', '0px');
            }
        }, 
        
        
        getPosition: function(x, d) {
            return d === 'prev' ? 
                parseInt(x)-this.itemWidth : parseInt(x)+this.itemWidth;       
        }
    
    };


    function handler(e) {
        Carousel.isAnimating = e.type.indexOf('enter') !== -1 ? true : false;
        if(Carousel.isAnimating) {
            Carousel.direction = e.target.className;
            Carousel.animate();
        };
    };
    
    $('.jCarousel .next').bind("mouseenter", handler);
    $('.jCarousel .next').bind("mouseleave", handler);
    $('.jCarousel .prev').bind("mouseenter", handler);
    $('.jCarousel .prev').bind("mouseleave", handler);
    
    
    $(".jCarousel .item").hover(
        function() {
            $(this).children(".container").stop().animate({
                width: "22em",
                height: "17em",
                top: "-1.5em",
                left: "-2em"
            }, 250);
            $(this).children(".container").children("img").stop().animate({
                height: "10em"
            }, 250);
        },
        function() {
            $(this).children(".container").stop().animate({
                width: "18em",
                height: "14em",
                top: "0",
                left: "0"
            }, 250);
            $(this).children(".container").children("img").stop().animate({
                height: "8em"
            }, 250);
        }
    );
    

    Carousel.init();

});
