// JavaScript Document
(function($)
{
    $.fn.heijmansImageSlide = function(_options)
    {
        var options = $.extend({
            slideWidth: 0,
            slideHeight: 0,
            pauseTime: 12000,
            fadeDuration: 1000,
            slidesContainerClassName: 'slides',
            slideClassName: 'slide',
            slides: []
        }, _options);
        //check sommige options
        if (options.slideWidth < 0)options.slideWidth *= -1;
        if (options.slideHeight < 0)options.slideHeight *= -1;
        if (options.pauseTime < 0)options.pauseTime *= -1;
        if (options.fadeDuration < 0)options.fadeDuration *= -1;
        if (options.pauseTime < options.fadeDuration)
        {
            var dumD = options.pauseTime;
            options.pauseTime = options.fadeDuration;
            options.fadeDuration = dumD;
        }
        var shorterPause = options.fadeDuration - options.fadeDuration / 10;
        //
        $this = $(this);
        $this.css({'background':'url(content/common/heijmans-image-slide/gfx/ajax-loader.gif) no-repeat center center'});
        $slidesContainers = $('.' + options.slidesContainerClassName);
        //
        /*
        *Als options.slideHeight en options.slideWidth == 0 dan moet er gestijld zijn voor parent()
         */
        var parentWidth=parseInt($(this).parent().css('width'));
        var parentHeight=parseInt($(this).parent().css('height'));
        if(parentWidth>0 && options.slideWidth==0){
            options.slideWidth=parentWidth;
        }else if(options.slideWidth==0){
            options.slideWidth=735;
        }
        if(parentHeight>0 && options.slideHeight==0){
            options.slideHeight=parentHeight;
        }else if(options.slideHeight==0){
            options.slideHeight=424;
        }
        var thumbsArray = new Array();
        var $thumbs = false;
        if ($slidesContainers.length > 0)
        {

            $slidesContainers.each(function(num1, el_slides)
            {
                options.slides[num1] = new Array();
                thumbsArray[num1] = $('.thumb', el_slides).clone();

                $('a[rel=slide]', this).each(function(num, el)
                {
                    options.slides[num1][num] = $(el).attr('href');
                });
                thumbsArray[num1].attr('id', 'thumb_' + num1);
                thumbsArray[num1].css('left', (8 + num1 * 242));
            });
        }
        else
        {

            options.slides[0] = new Array();
            thumbsArray[0] = $('.thumb', this).clone();

            $('a[rel=slide]', this).each(function(num, el)
            {

                options.slides[0][num] = $(el).attr('href');
            });
            if (thumbsArray[0].length > 0)
            {
                thumbsArray[0].attr('id', 'thumb_' + 0);
                thumbsArray[0].css('left', 10);
            }
        }

        //Voor de zekerheid heijmansImage = $this leegmaken
        $this.empty();
        for (var ti = 0; ti < thumbsArray.length; ti++)
        {
            $this.parent().append(thumbsArray[ti]);
            $thumbs = true;
        }
        var thumbsOuterHeight=0;
        if($thumbs){
            thumbsOuterHeight=$(thumbsArray[0]).outerHeight(true);
            $('.thumb').css({'top':options.slideHeight});
        }
        //welke image staat open
        var openImageNumber = 0;
        //
        var openSlidesNumber = 0;
        //
        var openThumbNumber = 0;
        //welek image stond open
        var lastOpenImageNumber = 0;
        var lastOpenSlidesNumber = 0;
        var slideDiv = $(this);
        var totalSlidesContainers = options.slides.length;

        var txt = "";
        var slideArray = new Array();
        /*		var w=0;
         var h=0;*/
        //zet eventueel, als dat nog niet gedaan is, de css position = relative, voor de parent container
        if (!($this.parent().css('position') == 'absolute' || $this.parent().css('position') == 'relative'))$this.parent().css('position', 'relative');

        $this.parent().css({'width':options.slideWidth,'height':options.slideHeight});
        //hierna, parent is absolute of relative, dit kind kan absolute gezet worden
        $this.css({'position':'absolute', 'left':0,'top':0,'overflow':'hidden'});
        //creeer een imagecontainer in de body, hierin komen alle images.
        //fadeIn animatie is niet mooi als er te veel images zitten in één container
        $('body').append("<div id=\"imagecontainer\" style=\"position: absolute; left: -10000px; top: -10000px;display: none\"></div>");
        //top en min Z-index numebr
        var topZ = 100;
        var minZ = 50;
        //er wordt een id voor de TimeOut gezet, zodat deze uitgezet kan worden
        var timerId = null;
        //Is de fadeIn bezig, dan geen next/prev image
        var slideCounter = 0;
        var fadeInAnimation = false;
        var dumId = "";
        //door de totale aantal slides heen
        //

        for (var i = 0; i < options.slides.length; i++)
        {
            //slideArray[number] wordt array
            slideArray[i] = new Array();
            for (var j = 0; j < options.slides[i].length; j++)
            {
                slideArray[i][j] = new Image();
                // doe er wat mee
                dumId = i + '_' + j;
                $(slideArray[i][j])
                    // image geladen? initialize
                        .load(function ()
                {
                    $("#imagecontainer").append($(this));
                    $(this).attr('width', options.slideWidth);
                    $(this).attr('height', options.slideHeight);
                    //als dit de eerste image is, ga naar functie showNextImageFirstTime
                    if ($(this).attr('id') == 'slide_0_0')
                    {
                        showImageFirstTime(0, 0);
                    }
                })
                    // load error zet null in slideArray array j i position
                        .error(function (ev)
                {
                    var deID = $(this).attr('id');
                    var deI = parseInt($(this).attr('id').split('_')[1]);
                    var deJ = parseInt($(this).attr('id').split('_')[2]);
                    $("#imagecontainer").append('<div class="geenafbeelding" id="' + $(this).attr('id') + '"></div>');
                    slideArray[deI][deJ] = '#' + deID;
                    $(slideArray[deI][deJ]).css({'width':options.slideWidth,'height':options.slideHeight});

                    if ($(this).attr('id') == 'slide_0_0')
                    {
                        showImageFirstTime(0, 0);
                    }
                    /**/
                })
                    //zet een unieke id, die wordt niet gebruikt, but joe never know
                        .attr('id', ('slide_' + dumId))
                    //zet nog wat css
                        .css({'position':'absolute','left':0,'top':0,'z-index':'100'})
                    // zet de src attribute zodat image gaat laden
                        .attr('src', options.slides[i][j]);
            }

        }
        //
        /*
         *first Image, staat meteen aan maar start wel de Timer
         */
        //
        function showImageFirstTime(i, j)
        {
            openSlidesNumber = 0;
            openImageNumber = 0;
            openThumbNumber = 0;
            if ($thumbs)thumbsArray[0].addClass('thumbactive');
            $this.css({'background':'none'});
            $this.prepend($(slideArray[i][j]));
            $('#fi_slider_bolcontainer').empty();
            for (var bt = j; bt < slideArray[i].length; bt++) {
                if (slideArray[i][bt] != null) {
                    $('#fi_slider_bolcontainer').append('<div class="fi_slider_bol" id="sliderbol_' + bt + '"></div>');
                    $('#sliderbol_' + bt).click(imageBolClick);
                }
            }
            $('#fi_slider_bolcontainer #sliderbol_' + j).addClass('active');
            startSliderTimer();
            //startTimer();
        }

        /*
         *show next image
         */
        //
        var hardAnimationStop = false;

        function showNextImage(i, j)
        {

            //de huidige image een lage z-index geven
            $(slideArray[openSlidesNumber][openImageNumber]).css('z-index', minZ);
            //de nieuwe image voorbereiden, opacity op 0, z-index op top

            $(slideArray[i][j]).css({'opacity':0});
            $(slideArray[i][j]).css('z-index', topZ);

            //log($(slideArray[i][j]).attr('id'));
            //verplaats image naar de slider container

            $this.prepend($(slideArray[i][j]));

            //nu image geladen wordt zet j van slideArray in 'openImageNumber'
            //navigtaion uitzetten van vorige li-a active
            $("#fi-slide-holder").stop(true, true);
            $('#fi_slider_slider').stop(true, true);
            if (i != openSlidesNumber)
            {
                if($thumbs){
                    thumbsArray[openSlidesNumber].removeClass('thumbactive');
                    thumbsArray[i].addClass('thumbactive');
                    var newLeft = parseInt($('.thumbactive').css('left'));
                    $("#fi-slide-holder").animate({'left':newLeft}, shorterPause, 'swing');
                }
                //zet er de bolletjes in
                $('#fi_slider_bolcontainer').empty();
                for (var bt = 0; bt < slideArray[i].length; bt++) {

                    $('#fi_slider_bolcontainer').append('<div class="fi_slider_bol" id="sliderbol_' + bt + '"></div>');
                    $('#sliderbol_' + bt).click(imageBolClick);
                }


            }
            $('#fi_slider_bolcontainer #sliderbol_' + openImageNumber).removeClass('active');
            $('#fi_slider_bolcontainer #sliderbol_' + j).addClass('active');
            $('#fi_slider_slider').animate({'opacity':0}, options.fadeDuration / 2);

            lastOpenImageNumber = openImageNumber;
            lastOpenSlidesNumber = openSlidesNumber;
            openImageNumber = j;
            openSlidesNumber = i;

            // start de fade iN, als ie daarmee klaar is naar functie fadeInReady

            $(slideArray[i][j]).animate({'opacity':1}, options.fadeDuration, 'swing', fadeInReady);

            //Er wordt geanimeerd, zet de vlag fadeInAnimation op true;

            fadeInAnimation = true;
        }

        /*
         fade in ready callback
         */
        //
        function fadeInReady()
        {


            $(slideArray[openSlidesNumber][openImageNumber]).css({'opacity':1});
            //check of er wel meer images zijn anders blijft het hierbij
            if (slideArray.length > 1 || slideArray[0].length > 1)
            {

                //de vorige slide wordt weer verplaatst naar imagecontainer
                removeLastImage();
                //timer wordt gezet om volgende slide te plaatsen
                if (!hardAnimationStop) {
                    startSliderTimer();

                    //startTimer();
                }
                hardAnimationStop = false;
            }
            fadeInAnimation = false;

        }

        /*
         *  start timer test function
         */
        function startTimer() {
            killTimer();
            timerId = setTimeout(nextImage, options.pauseTime);
        }

        /*
         stop oftw killTimer
         */
        function killTimer()
        {
            if (fadeInAnimation) {
                hardAnimationStop = true;
                $(slideArray[openSlidesNumber][openImageNumber]).stop(true, true);
                
            }
            if (timerId)clearTimeout(timerId);
            timerId = null;
        }

        /*
         Next image
         */
        function nextImage()
        {
            killTimer();
            var dumObj = getNextPrevIJ('nextImage');
            showNextImage(dumObj.i, dumObj.j);

        }

        /*
         Prev Image
         */
        function prevImage()
        {
            killTimer();
            var dumObj = getNextPrevIJ('prevImage');
            showNextImage(dumObj.i, dumObj.j);

        }

        /*
         Next thumb
         */
        function nextThumb() {
            killTimer();
            var dumObj = getNextPrevIJ('nextThumb');
            showNextImage(dumObj.i, dumObj.j);

        }

        //
        function prevThumb() {
            killTimer();
            var dumObj = getNextPrevIJ('prevThumb');
            showNextImage(dumObj.i, dumObj.j);
        }

        /*
         thumb click
         */
        function thumbClick(ev) {
            numId = parseInt($(this).parent().attr('id').split('_')[1]);
            killTimer();
            showNextImage(numId, 0);
        }

        /*
         bolletje klik
         */
        function imageBolClick() {
            var name = $(this).attr('id');
            var num = parseInt(name.split('_')[1]);
            if (num != openImageNumber) {
                killTimer();
                showNextImage(openSlidesNumber, num);
            }
        }

        /*
         Maak nieuw I en J nummners aan
         */
        function getNextPrevIJ(soort) {
            var i = openSlidesNumber;
            var j = openImageNumber;

            var dumObj = {};
            var dO = {};
            switch (soort) {
                case 'nextImage':

                    if (j < slideArray[i].length - 1){
                        j++;

                    }
                    else
                    {
                        if (i < slideArray.length - 1)
                        {

                            i++;
                            j = 0;
                        }
                        else
                        {
                            i = 0;
                            j = 0;
                        }
                    }

                    break;
                case 'prevImage':
                    if (j > 0)j--;
                    else
                    {
                        if (i > 0)
                        {
                            i--;
                            j = slideArray[i].length - 1;
                        }
                        else
                        {
                            i = slideArray.length - 1;
                            j = slideArray[i].length - 1;
                        }
                    }
                    break;
                case 'nextThumb':
                    if (i < slideArray.length - 1)i++;
                    else i = 0;
                    j = 0;
                    break;
                case 'prevThumb':
                    if (i > 0)i--;
                    else i = slideArray.length - 1;
                    j = 0;
                    break;
            }
            dumObj.i = i;
            dumObj.j = j;
            return dumObj;
        }


        /*
         *
         */
        function startSliderTimer()
        {
            //eerst de eventueel lopendeTimer uitzetten
            killTimer();
            startIntervalSlider();
        }

        /*
         slidertje functies
         */
        var startSliderIntervalTime = 0;
        var pausedSliderIntervalTime = 0;
        var thisSliderTime = 0;
        var sliderProcent = 0;
        var sliderIntervalStep = 50;

        function playIntervalSlider() {    
            var d = new Date();
            thisSliderTime = d.getTime() - startSliderIntervalTime;
            //log('tik = '+thisSliderTime);
            sliderProcent = (thisSliderTime / options.pauseTime) * 100;
            if (thisSliderTime < options.pauseTime) {
                $('#fi_slider_slider').css('width',sliderProcent + "%");
                if (timerId)clearTimeout(timerId);
                timerId = setTimeout(playIntervalSlider, sliderIntervalStep);
            } else {
                $('#fi_slider_slider').width("100%");
                resetSliderVariables();
                nextImage();
            }
        }

        function resetSliderVariables() {
            startSliderIntervalTime = 0;
            pausedSliderIntervalTime = 0;
            thisSliderTime = 0;
            sliderProcent = 0;
            if ($('#fi_slider_playpause').hasClass('pp_selected')) {
                $('#fi_slider_playpause').removeClass('pp_selected');
            }
        }

        function pauseSlider() {
            var p = new Date();
            pausedSliderIntervalTime = p.getTime() - startSliderIntervalTime;
            killTimer();
        }

        function herstartSlider() {
            var p = new Date();
            startSliderIntervalTime = p.getTime() - pausedSliderIntervalTime;
            playIntervalSlider();
        }

        function startIntervalSlider() {
            resetSliderVariables();
            d = new Date();
            startSliderIntervalTime = d.getTime();

            $('#fi_slider_slider').width("0");
            $('#fi_slider_slider').css('opacity', 1);
            playIntervalSlider();
        }

        /* end slidertje functies */
        //
        function removeLastImage()
        {
            if (lastOpenSlidesNumber >= 0)$("#imagecontainer").append($(slideArray[lastOpenSlidesNumber][lastOpenImageNumber]));
        }

        var orgTxt = "";

        function trace(t)
        {
            if ($('#tracer').length > 0) {
                orgTxt = $('#tracer').html();
                $('#tracer').html(t + "<br />\n" + orgTxt);
            }
        }

        /*
         * Navigatie
         */
        //
        if (thumbsArray[0].length > 0) {
            $thumbs = true;

            for (var ti = 0,tii = thumbsArray.length; ti < tii; ti++) {
                $('img', thumbsArray[ti]).click(thumbClick);
                $('img', thumbsArray[ti]).css({'cursor':'pointer'});
            }
        }
        //als er meer dan één image is moet er genavigeerd kunnen worden
        //een stop play knop boven op de images maken
        var buildString="";
        if (slideArray.length > 1)
        {

            /* build slider */
            buildString = '<div id="fi-slide-holder"><div id="fi_slider" class="fi_slider_thumbs"><div id="fi_slider_prev"></div><div id="fi_slider_next"></div><div id="fi_slider_playpause"></div><div id="fi_slider_slidecontainer"><div id="fi_slider_slider"></div></div><div id="fi_slider_bolcontainer"></div></div></div>';
            $(this).parent().append(buildString);
            $(this).parent().css({'height':(options.slideHeight+thumbsOuterHeight)});
            //log("thumbsOuterHeight : "+thumbsOuterHeight);
            //navigation on top
            $("#fi-slide-holder").css({'z-index': 10000,'position':'absolute'});
            var sliderHeight = parseInt($("#fi_slider").css('height'));
            if (!sliderHeight || sliderHeight <= 0)sliderHeight = 20;
            $("#fi-slide-holder").show();
            $("#fi-slide-holder").css({'left':$('#thumb_0').css('left'),'top':(options.slideHeight - sliderHeight)});
            $('#fi_slider_playpause').click(function() {
                if ($(this).hasClass('pp_selected')) {
                    $(this).removeClass('pp_selected');
                    herstartSlider()
                } else {
                    $(this).addClass('pp_selected');
                    pauseSlider();
                }
            });
            $('#fi_slider_prev').click(prevThumb);
            $('#fi_slider_next').click(nextThumb);
        }
        else
        {
             var totalBolletjes=slideArray[0].length-1;
            /* build slider */
             buildString = '<div id="fi-slide-holder" class="fi_slide_holder_nothumbs"><div id="fi_slider"><div id="fi_slider_prev"></div><div id="fi_slider_next"></div><div id="fi_slider_playpause"></div><div id="fi_slider_slidecontainer"><div id="fi_slider_slider"></div></div><div id="fi_slider_bolcontainer"></div></div></div>';
            $(this).parent().append(buildString);
            //navigation on top

            var sliderHeight = parseInt($("#fi_slider").css('height'));
            if (!sliderHeight || sliderHeight <= 0)sliderHeight = 20;
            $("#fi-slide-holder").show();
            $("#fi-slide-holder").css({'z-index': 10000,'position':'absolute','left':0,'top':options.slideHeight,'width':options.slideWidth,'height':sliderHeight});
            $(this).parent().css({'height':(options.slideHeight+sliderHeight)});
            $('#fi_slider_playpause').click(function() {
                if ($(this).hasClass('pp_selected')) {
                    $(this).removeClass('pp_selected');
                    herstartSlider()
                } else {
                    $(this).addClass('pp_selected');
                    pauseSlider();
                }
            });
            $('#fi_slider_prev').click(prevImage);
            $('#fi_slider_next').click(nextImage);
            if(totalBolletjes>4){
                var extra=(totalBolletjes-2)*14;
                var breed=parseInt($('#fi_slider').css('width'))+extra;
                $('#fi_slider').css({'width':breed});
                $('#fi_slider_next').css({'left':(breed-20)})
            }
            //var slidecenter= $("#fi-slide-holder").width()/2-$('#fi_slider').width()/2;
            //$('#fi_slider').css({'left':slidecenter,'border-right':'1px solid #fff','border-left':'1px solid #fff'});
        }
        return $(this);
    }
})(jQuery);