function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, contentArray.length);
    carousel.add(i, mycarousel_getItemHTML(contentArray[idx - 1]));

    $("p.vidOver").addClass("displayNone").removeClass("Active");
    $("#" + contentArray[idx - 1].id + " p.vidOver").removeClass("displayNone").addClass("Active");
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
    carousel.remove(i);
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item) {

    (new Image()).src = item.url;
    var str = '<a href="' + item.link + '"><p style="background: url(' + item.url + ') no-repeat top left;width:688px;height:386px"></p><p class="carousel_pause"><img src="/windows/framework/subsites/screeningroom/images/pause.png" width="147" height="86" alt="' + item.title + '" /></p></a><br />' +
              '<p class="screeningroom_carousel_caption"><span class="carousel_title">' + item.title + ' </span><span class="carousel_duration">&nbsp;' + item.duration + '</span><br /><span class="carousel_description">' + item.description + '</span></p>';
    
    return str;
};

var contentArray = [
            { "id": "goodnews2", "title": "Kylie's Conversations", "duration": ":30", "url": "/windows/framework/subsites/screeningroom/images/videoImages/GoodNews2_Kylie_Carousel.jpg", "link": "/windows/watchtheads/video/goodnews2/", "description": "The happy words just keep on coming as Kylie creates another slideshow to share even more good news about Windows 7 with her friends." },
            { "id": "goodnews", "title": "Good News 1", "duration": ":30", "url": "/windows/framework/subsites/screeningroom/images/videoImages/GoodNews_Kylie_Carousel.jpg", "link": "/windows/watchtheads/video/goodnews/", "description": "Kylie has found a lot of happy words on her dad's computer. And it just so happens they're all about Windows 7." },
            { "id": "behindthescenes", "title": "Laptop Hunters – Behind The Scenes", "duration": ":60", "url": "/windows/framework/subsites/screeningroom/images/videoImages/LaptopHunters_BehindTheScenes_Carousel.jpg", "link": "/windows/watchtheads/video/behindthescenes/", "description": "Laptop Hunters - Behind The Scenes." },
            { "id": "lewis5", "title": "Rookies – Lewis", "duration": ":30", "url": "/windows/framework/subsites/screeningroom/images/videoImages/Rookies_Lewis_Carousel.jpg", "link": "/windows/watchtheads/video/lewis5/", "description": "Watch 5 year old Lewis share his photos." },
            { "id": "sam7", "title": "Rookies – Sam", "duration": ":30", "url": "/windows/framework/subsites/screeningroom/images/videoImages/Rookies_Sam_Carousel.jpg", "link": "/windows/watchtheads/video/sam7/", "description": "Watch 7 year old Sam stitch together a panoramic photo." }          
        ];

for (var i in contentArray) {
    (new Image()).src = contentArray[i]["url"];
};

jQuery(document).ready(function() {
    jQuery('#videoCarousel').jcarousel({
        wrap: 'circular',
        auto: 5,
        animation: null,
        easing: null,
        itemVisibleInCallback: { onBeforeAnimation: mycarousel_itemVisibleInCallback },
        itemVisibleOutCallback: { onAfterAnimation: mycarousel_itemVisibleOutCallback }
    });

    $(".screeningroom_carousel_caption").css("backgorund-color", "#000");
});