$(document).ready(function() {
    
    
    // ------------------- FUNCTIONS ----------------------
    // show/hide info and links on hero mouseover
    function CarouselHover() {
        $(".carousel_horizontal").hover(function() {
            $(this).addClass("hover");
            $(".promotion_info").slideDown();
            $(".promotion_links").fadeIn();
        }, function() {
            $(this).removeClass("hover");
            $(".promotion_info").slideUp();
            $(".promotion_links").fadeOut("slow");
        });
    }

    // --------------- PAGE LOAD EVENTS -------------------

    // hide hero info and links panels
    $(".promotion_info").hide();
    $(".promotion_links").hide();

    // set up hero hover
    CarouselHover();

    /* ------------- CAROUSEL ------------ */

    // set up scrollable
    var scrollableOptions = {
        clickable: true,
        speed: 1000,       // animation time (1 sec)
        circular: true                
    }
    
    var autoScrollOptions = {
        autoplay: true,  
        interval: 5000,   // time between slides (5 secs)
        autopause: true
    }

    // get actual no of items
    var carouselItems = $(".carousel_horizontal li");
    
    // if there's more than one item turn it in to a carousel
    if (carouselItems.length > 1) {
        
        // get a reference to the api
        var api = $(".carousel_horizontal")
                    .scrollable(scrollableOptions)
                    .autoscroll(autoScrollOptions)
                    .data("scrollable");
        
        // just before it's scrolled    
        api.onBeforeSeek(function() {
           
        });

        // after it's scrolled
        api.onSeek(function() {
           
        });

    }

    // stop jumping to #
    $(".carousel_horizontal .prev, .carousel_horizontal .next").click( function( e ) { e.preventDefault(); } );


    // --------------- USER INITIATED EVENTS --------------

    // for those with JS, make the whole item clickable
    $(".carousel_horizontal li .promotion_info").click(function() {
        var ph_Url = $(this).find(".promotion_btn").attr("href");
        document.location.href = ph_Url;
    });

 
});
