// Slider Homepage

$j(document).ready(function () {

    var currentSlide = -1;
    var newSlide = 0;
    var speed = 5000;

    // Get array and split, place them in a template
    index = 0;
    var output = '<div id="diomask"><ul id="imageslider">'
    $.each(bannerInfo, function (index, value) {

        output += '<li class="active" index="' + index + '" id="slide' + index + '">';
        output += '   <span class="slideritemtitle">';
        output += '       <a href="' + bannerInfo[index][2] + '">' + bannerInfo[index][0] + '</a>';
        output += '   </span>';
        output += '   <img src="/Portals/0/Skins/Standaard/images/spacer.gif" style="background-image:url(' + bannerInfo[index][1] + ')"  alt="' + bannerInfo[index][3] + '"  />';
        output += '</li>';

    });

    // end template
    output += '</ul><div id="maskimg" ></div><ul id="menuslider"></ul></div>'

    // Place template in specific div
    $('#wrapper .bannerWrapper #swf435').append(output);

    var titlelist = "";
    var itemcounter = 0;
    var time

    // generate Menu
    $("#imageslider li span.slideritemtitle").each(function () {
        titlelist += "<li class='itemnr" + itemcounter + "' id='title" + itemcounter + "' index='" + itemcounter + "'>" + $(this).html() + "</li>";
        $(this).html("");
        itemcounter++;
    });

    // Place Menu in specific div
    $("#menuslider").append(titlelist);

    // Start slider Interval
    animateBannerHome();
    time = setInterval(animateBannerHome, speed);

    // Add Hitarea
    $('#hitArea').show();

    //Place Href Hitarea
    //var mapHref = bannerInfo[index][2];
  

    //focus and pause slide on mouseover
    $("#menuslider li").hoverIntent({
        sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
        interval: 30,   // number = milliseconds of polling interval
        over: function () {
            var hoverIndex = $(this).attr("index");
            if (currentSlide != hoverIndex) {
                newSlide = hoverIndex;
                animateBannerHome();
                clearInterval(time);
            }
        },
        out: function () {
            time = setInterval(animateBannerHome, speed);
        }
    });



    function animateBannerHome() {
        $("#menuslider li").removeClass("active");
        $("#title" + newSlide).addClass("active");

        if (currentSlide != newSlide) {
            var $listItems = $("#imageslider li");
            $listItems.removeClass("active")
            $("#slide" + newSlide).addClass("active");

            //fade out currentslide
            if (currentSlide != -1) {
                $("#slide" + currentSlide).animate({
                    'opacity': '0',
                    'margin-left': '-50px',
                }, 600, function () {

                    $(this).css("margin-left", "50px");
                    
                });
            }

            currentSlide = newSlide;

            $('#HomeMap area').attr('href', bannerInfo[currentSlide][2]);
            //show new slide
            $("#slide" + newSlide).delay(600).css({
                opacity: 0,
                visibility: "visible"
            }).animate({
                'opacity': '1',
                'margin-left': '0px'
            }, 600, function () {
        
                //configure new slide
                newSlide = parseInt(currentSlide) + 1;
                if (newSlide == 4) {
                    newSlide = 0;
                }
            });
        }
    }

});