/// <reference path="jquery-1.2.6-vsdoc.js" />

$(document).ready(function() {
    SetupItemCarousel();
});

function SetupItemCarousel() {
    // Set up the jCarousel
    $(".ItemCarouselDiv .prev").before("<div class='blindingdiv'></div>");
    $(".ItemCarouselDiv .ItemCarousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        speed: 1500,
        visible: 5,
        beforeStart: function(a) {
            
        },
        afterEnd: function(a) {

        }
    });
    $(".ItemCarouselDiv").css("visibility", "visible");
    CreateCarouselHoverEffect();
}

function CreateCarouselHoverEffect() {

    // Create an overlaying div to hover on instead of the actual elements
    // we need to do this because of the way IE handles ClearType fonts when using the "filter" property on elemtens containing text - see: http://mattberseth.com/blog/2007/12/ie7_cleartype_dximagetransform.html
    $(".ItemCarouselDiv .ItemCarousel ul li").each(function() {
        CreateLiOverlayDiv($(this));
    });

    // Create the jCarousel item hover effect)
    $(".ItemCarouselDiv .ItemCarousel ul li .liOverlayDiv").hover(function() {
        $(this).css({ opacity: "0", filter: "alpha(opacity=0)" });
    }, function() {
        $(this).css({ opacity: ".7", filter: "alpha(opacity=70)" });
    });

    $(".ItemCarouselDiv .ItemCarousel ul li a").hover(function() {
        $(this).css("color", "#008C43");
    }, function() {
        $(this).css("color", "#828284");
    });

}

function CreateLiOverlayDiv($object) {
    var $div = $("<div class='liOverlayDiv'></div>").prependTo($($object).find("a"));

    $div.height($($object).height());
    $div.width($($object).width());
    $div.position($($object).position());

    $div.css("background-color", "white");
    $div.css("position", "absolute");
    $div.css("z-index", "40000");
    $div.css("left", "0px");
    $div.css("top", "0px");
    $div.css("cursor", "pointer");
    $div.css({ opacity: ".7", filter: "alpha(opacity=70)" });
}