$(document).ready(function () {

    /* Sort the divs */
    var mylist = $('#slider-wrapper');
    var listitems = mylist.children('li').get();
    listitems.sort(function (a, b) {
        var compA = $(a).attr('class');
        var compB = $(b).attr('class');
        return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    })
    $.each(listitems, function (idx, itm) {mylist.append(itm);});


    var timer = 500;
    var pause = 25000;      //25000

    var slider = $('#slider-wrapper').bxSlider({
        //autoControls: true,
        //autoDelay : timer,
        autoHover: true,
        mode: 'fade',
        pager: true,
        controls: false,
        auto: true,
        speed: timer,
        pause: pause,
        buildPager: function (slideIndex) {
            var hide = slideIndex > 5 ? 'style="display:none;"' : '';
            switch (slideIndex) {
                case 0:
                    //add timer for the slide
                    $('.bx-window').after('<div id="timer-wrapper"><div id="timer"></div></div>');
                    $('.bx-window').after('<img id="slide-arrow" style="z-index:5;bottom:45px;left:65px;position: absolute;" src="/templates/img/arrow_slider_active.png"/>');
                    $('#timer').startAnimation({ width: 940 }, ((pause) * 6), 'linear', function () { });
                    return '<a rel="0" class="pager-link pager-1 " href="">' + $('#slider-wrapper li').eq(slideIndex).attr('title') + '</a>';
                case 1:
                    return '<a rel="1" class="pager-link pager-2 " href="">' + $('#slider-wrapper li').eq(slideIndex).attr('title') + '</a>';
                default:
                    return '<a ' + hide + ' rel="' + slideIndex + '" class="pager-link pager-' + (slideIndex + 1) + ' " href="">' + $('#slider-wrapper li').eq(slideIndex).attr('title') + '</a>';
            }
        },
        onBeforeSlide: function (currentSlide, totalSlides) {
            if (currentSlide == 0) {
                //start the timer
                $('#timer').stop(true, true).css('width', '0px').startAnimation({ width: 940 }, ((pause) * 6), 'linear', function () {});}
            var arrow_placer = $('.pager-' + (currentSlide + 1)).position();

            //verplaats de slide arrow
            $('#slide-arrow').css({
                left: arrow_placer.left + 65
            });

        }
    });

    //click event wanneer je op een nummer klikt
    $('.pager-link').click(function (e) {
        $('#timer').stop();
        setTimeout(function () {
            slider.startShow();
            var nummer = $(e.currentTarget).attr('rel');
            var pos_ = $(e.currentTarget).position();
            $('#timer').stop(true, true).css('width', $(e.currentTarget).position().left).startAnimation({ width: 940 }, ((pause) * (6 - (parseInt(nummer)))), 'linear', function () {});}, timer);
    });

    //Hover event wanneer je over een slide heen gaat.
    //de timer moet ook op pause komen te staan.

    $('#slider-wrapper li').hover(function () {
        //$('#timer').pauseAnimation();
        $('#timer').stop();

    }, function (e) {
        var indexNr = $(this).index() + 1;
        var pagerWidth = $('.bx-pager a').eq(0).outerWidth();

        setTimeout(function () {
            $('#timer').css('width', indexNr * pagerWidth).startAnimation({ width: 940 }, ((pause) * (6 - (parseInt(indexNr)))), 'linear', function () { }); ;


        }, pause);

    });


});