﻿
function stopSlideShow() {
    $(".featuredArticles .tabsContainer .tabs").data("slideshow").stop();
    $('#stopSlideShow1').toggle();
    $('#StartSlideShow1').toggle();
}

$(function() {

    var interval = 5000;
    var widthAjustment = 24;
    


    /* Create slider html */
    var panelsLength = $(".featuredArticles .panes").children().length;
    setTimeout('stopSlideShow()', panelsLength * interval * 2 + interval/2);
    
    var slider = "";
    for (i = 0; i < panelsLength; i++) {
        slider += '<span><span class="caption">' + (i + 1) + '</span></span>';
    }

    $(slider).appendTo('.featuredArticles .tabsContainer .tabs');


    /* Ajust css properties */

    var sliderWidth = $(".featuredArticles .tabsContainer").css("width");
    var newWidth = eval(sliderWidth.replace("px", "")) + widthAjustment * panelsLength;
    $(".featuredArticles .tabsContainer").css("width", newWidth);
    var margint = $(".featuredArticles .panes").css("width");
    var newMargin = eval(margint.replace("px", "")) - newWidth - 20;
    $(".featuredArticles .tabsContainer").css("margin-left", newMargin);




    $(".featuredArticles .tabsContainer .tabs").tabs(".featuredArticles .panes > div", {
        event: "mouseover",
        effect: "fade",
        rotate: true
    }).slideshow({
        autoplay: true,
        clickable: false,
        interval: interval
    });




    $(".featuredArticles ").toggle();
    $('#StartSlideShow1').toggle();



    

    $('#stopSlideShow1').click(function() {

        $(".featuredArticles .tabsContainer .tabs").data("slideshow").stop();

        $('#stopSlideShow1').toggle();
        $('#StartSlideShow1').toggle();

    });

    $('#StartSlideShow1').click(function() {
        $(".featuredArticles .tabsContainer .tabs").data("slideshow").play();
        $('#stopSlideShow1').toggle();
        $('#StartSlideShow1').toggle();
    });

});
