$(document).ready(function() {

    /* Carousel */
    var carousel = $(".jCarousel");
    var itemList = $(".jCarousel .itemList");
    var item = $(".jCarousel .item");

    var n = 1;
    itemList.children().each(function() {
        $(this).attr("id", "item-" + n)
        n++;
    });
    if (item.size() < 4) {
        $(".jCarousel .prev").hide();
        $(".jCarousel .next").hide();
    };
    itemList.css("width", (itemList.children().size() * 31) + "em");

    $(".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);
        }
    );
    
    /*
    var animating = false;
    $(".jCarousel .next").bind("click", function() {
        if (animating == false) {
            animating = true;
            $(".jCarousel .item:first").clone(true).insertAfter(".jCarousel .item:last");
            itemList.css("width", parseFloat(itemList.css("width"), 10) + 30 + "em").animate({
                left: parseFloat(itemList.css("left"), 10) - 30 + "em"
            }, 500, "swing", function() {
                $(".jCarousel .item:first").remove()
                itemList.css("width", parseFloat(itemList.css("width"), 10) - 30 + "em");
                itemList.css("left", parseFloat(itemList.css("left"), 10) + 30 + "em");
                animating = false;
            });
        }
    });
    $(".jCarousel .prev").bind("click", function() {
        if (animating == false) {
            animating = true;
            itemList.css("left", parseFloat(itemList.css("left"), 10) - 30 + "em");
            itemList.css("width", parseFloat(itemList.css("width"), 10) + 30 + "em");
            $(".jCarousel .item:last").clone(true).insertBefore(".jCarousel .item:first");
            itemList.animate({
                left: parseFloat(itemList.css("left"), 10) + 29.99 + "em"
            }, 500, "swing", function() {
                $(".jCarousel .item:last").remove()
                itemList.css("width", parseFloat(itemList.css("width"), 10) - 30 + "em");
                animating = false;
            });
        }
    });
    */
    
    
    function next() {
        $(".jCarousel .item:first").clone(true).insertAfter(".jCarousel .item:last");
        itemList.css("width", parseFloat(itemList.css("width"), 10) + 30 + "em").animate({
            left: parseFloat(itemList.css("left"), 10) - 30 + "em"
        }, 1000, "swing", function() {
            $(".jCarousel .item:first").remove()
            itemList.css("width", parseFloat(itemList.css("width"), 10) - 30 + "em");
            itemList.css("left", parseFloat(itemList.css("left"), 10) + 30 + "em");
            $(".jCarousel").bind("mouseover", animate);
            if (isAnimating) {
                next();
            };
        });
    };
    
    
    function previous() {
        itemList.css("left", parseFloat(itemList.css("left"), 10) - 30 + "em");
        itemList.css("width", parseFloat(itemList.css("width"), 10) + 30 + "em");
        $(".jCarousel .item:last").clone(true).insertBefore(".jCarousel .item:first");
        itemList.animate({
            left: parseFloat(itemList.css("left"), 10) + 29.999 + "em"
        }, 1000, "swing", function() {
            $(".jCarousel .item:last").remove();
            $(".jCarousel").bind("mouseover", animate);
            itemList.css("width", parseFloat(itemList.css("width"), 10) - 30 + "em");
            if (isAnimating) {
                previous();
            };
        });
    };
    
    
    function animate(e) {
        if(e.target.className.search(/prev|next/g) !== -1) {
            isAnimating = true;
            $(".jCarousel").unbind("mouseover");
            // extract name of function to call based on element class name;
            var func = e.target.className.indexOf('next') !== -1 ? next : previous;
            // call function;
            func();
            // console.log(e.target.className+': '+isAnimating);
        };
    };
    
    var isAnimating = false;
    var isFinished = true;
    
    $(".jCarousel").bind("mouseover", animate);
    $(".jCarousel").bind("mouseout", function(e) {
        if(e.target.className.search(/prev|next/g) !== -1) {
            isAnimating = false;
            // $(".jCarousel").bind("mouseover", fire);
            //console.log(e.target.className+': '+isAnimating);
        };
    });

});