$(document).ready(function () {

    $("#TwelveSteps .item").pngfix();

    $("a.item, a.sessions").tooltip({
        delay: 0,
        showURL: false
    });

    $("#TwelveSteps").carousel({
        stage: $("#TwelveSteps .stage"),
        slides: $("#TwelveSteps .step"),
        slidesPadEnd: 2,
        wrap: false
    });
    
    $("#TwelveSteps").change(function() {
        
        var index, buttonPrev, buttonNext, marker;
        
        index = $(this).carousel("getIndex");
        
        // Update the Previous Button
        buttonPrev = $("#ButtonPrevious");
        
        if (index === 0 && buttonPrev.is(":visible")) {
            buttonPrev.fadeOut(500);    
        }                
        else if (index !== 0 && !buttonPrev.is(":visible")) {
            buttonPrev.fadeIn(500);                    
        }
        
        // Update the Next Button
        buttonNext = $("#ButtonNext");
        
        if (index === 9 && buttonNext.is(":visible")) {
            buttonNext.fadeOut(500);
        }        
        else if (index !== 9 && !buttonNext.is(":visible")) {
            buttonNext.fadeIn(500);
        }
        
        // Move the marker
        // NOTE: 30px is the width of one button.
        $("#PaginationMarker").animate({
            "left": "" + (index * 30) + "px"
        }, 500);        

        $(".pagination-links a.selected").removeClass("selected");
        $(".pagination-links a[rel=slide-" + index + "]").addClass("selected");
    });
    
    $("#ButtonPrevious").click(function () {
        $("#TwelveSteps").carousel("advance", -3);
        return false;
    });

    $("#ButtonNext").click(function () {
        $("#TwelveSteps").carousel("advance", 3);
        return false;
    });
    
    $("a.pagination").click(function () {
        var slide = $(this).attr("rel").substr(6);
        $("#TwelveSteps").carousel("select", slide);
        return false;
    });
    
});