/*

 Simple gallery 1.0
 By: Komma Mediadesign
 Author: Mike van der Sanden
 Date: 02/23/2013

*/

function SimpleGallery(slider,nav){

    var t = this;

    /*
     * @property int CurrentImage;
     * keep track of what image is active
     * default set to 1;
     */
    t.currentImage = 1;

    /*
     * @property int numImages;
     * number of images in the gallery
     */
    t.numImages = 0;

    /*
     * @property int loop;
     * interval which loops the gallery as a slideshow
     */
    t.loop = 500;

    /*
     * @property int distance;
     * distance the image has to cover, basically the width of the image
     */
    t.distance = null;

    /*
     * @property int speed;
     * slide speed
     */
    t.speed = 600;

    /*
     * @property int interval;
     * in how many milliseconds the loop repeats itself
     * default set to 4 seconds
     */
    t.interval = 4000;

    /*
     * @property int resetLoop
     * timeout which resets the loop
     */
    t.resetLoop = null;

    /*
     * @property int resetTime;
     * when a user hits a button the loop pauses.
     * resetTime is the time in how many milliseconds the loop starts again
     * default set to 5 seconds
     */
    t.resetTime = null;

    /*
     * @property boolean started;
     * Checks if the loop is already started.
     */
    t.started = false;

    /*
     * @property string slider;
     * id of the slider-ul object we need to move
     * this object needs to be an unsorted list which has a css-position,
     * moving is done by changing the css 'left'.
     */
    t.slider = slider;

    /*
     * @property string nav;
     * a class / id of the navigation.
     */
    t.nav = nav;

    /*
     * @property string counter;
     * a class / id of the image counter.
     * each image counter has its own id.
     * for example if this.counter = #counter;
     * you should have HTML like: #counter1, #counter2 etc.
     */
    //t.counter = counter;

    /*
     * Initialize gallery
     */
    this.init = function()
    {
        $(slider).each(function(){
            /*
             * we need to set the width of the ul
             * this is done by counting the images.
             * number of images in the list is being saved in the property.
             */
            t.numImages = $(this).children('li').size();
            if(t.numImages > 1)
            {
                /* Add extra li-item */
                var html = $('li',this).eq(0).html()
                $(this).append('<li>'+html+'</li>');

                /* Set first navigation item active */
                $(t.nav).children('li').eq(0).addClass('active');

                t.numImages++;
            }

            t.distance = $(this).attr('data-width');
            var w = t.distance * t.numImages;
            $(this).css({ width : w+'px' });
            $(this).children('li').css({ width : t.distance+'px' });

            /* Extension for Spire */
            if(slider != '#homeGallery')
            {
                var img = $(slider + ' li img');
                $(img).one('load', function() {
                    if($(this).height() < 488)
                    {
                        var mt = (488 - $(this).height()) / 2;
                        $(this).css({marginTop:mt+'px'});
                    }
                }).each(function() {
                        if(this.complete) $(this).load();
                });
            }
            /* End extension */
        });
        /*
         * Start loop
         */
        if(t.numImages > 1 && slider != '#homeGallery')
        {
            $('#playBtn').addClass('active');
            $('#playBtn').click(function(){ t.loopGallery(); $('#playBtn').addClass('active'); $('#pauseBtn').removeClass('active');});
            $('#pauseBtn').click(function(){ clearInterval(t.loop); $('#playBtn').removeClass('active'); $('#pauseBtn').addClass('active'); });
            t.loopGallery();
        }
        else
        {
            t.loopGallery();
        }
        /*
         * Set mouseEvent for the 'Next' button
         * When clicked, the loop pauses.
         * After 'resetTime' the loop starts again.
         */
        $(t.nav+' .next').click(function()
        {
            $('#playBtn').removeClass('active'); $('#pauseBtn').addClass('active');
            clearInterval(t.loop);
            var slideTo = t.currentImage+1;
            t.slide(slideTo);
            if(t.resetTime != null)
            {
                clearTimeout(t.resetLoop);
                t.resetLoop = setTimeout(t.loopGallery,t.resetTime);
            }
        });

        /*
         * Set mouseEvent for the 'Previous' button
         * When clicked, the loop pauses.
         * After 'resetTime' the loop starts again.
         */
        $(t.nav+' .previous').click(function()
        {
            $('#playBtn').removeClass('active'); $('#pauseBtn').addClass('active');
            clearInterval(t.loop);
            var slideTo = t.currentImage-1;
            t.slide(slideTo);
            if(t.resetTime != null)
            {
                clearTimeout(t.resetLoop);
                t.resetLoop = setTimeout(t.loopGallery,t.resetTime);
            }
        });


        /*
         * Add a go-to functionality
         * When clicked on a counter, go to that image
         */
        $(t.nav+' li').each(function(index)
        {
            $(this).click(function(e){
                $('#playBtn').removeClass('active'); $('#pauseBtn').addClass('active');

                e.preventDefault();
                clearInterval(t.loop);
                t.slide(index+1);
                if(t.resetTime != null)
                {
                    clearTimeout(t.resetLoop);
                    t.resetLoop = setTimeout(t.loopGallery,t.resetTime);

                }
            });
        });
    };


    /*
     * Loop gallery
     */
    t.loopGallery = function()
    {
        if(t.started)
        {
            t.slide(t.currentImage+1);
        }
        t.loop = setInterval(function(){
            t.slide(t.currentImage+1);
            /*
             * Ones the interval has started.
             * The speed is substracted from the looping time.
             * That's why we need to add the speed to the interval.
             */
            if(!t.started)
            {
                t.started = true;
                t.interval+=t.speed;
            }
        },t.interval)
    };


    /*
     * Slide function
     * @param int dir; "1" for next, "0" for previous
     */
    t.slide = function(index)
    {
        /*
         * Remove active class
         */
        //if(t.counter!=null)$(t.counter+t.currentImage).removeClass('active');
        $('li',t.nav).eq(t.currentImage-1).removeClass('active');


        /*
         * Set new currentImage
         * Check for direction first
         */
        var oldImage = t.currentImage;
        t.currentImage = index;

        /*
         * Calculate the css 'left' property.
         */
        var l = (t.currentImage-1) * t.distance * -1;

        /*
         * If direction is 'next', check if we aren't at the end of our loop.
         * In case of last image, slide to last image (which is the same as first)
         * On callback of that slide, jump to first image
         * Make sure currentImage is set back to 1 and add a active class to the first counter.
         */
        if(t.currentImage == t.numImages  && oldImage == t.numImages-1)
        {
            $(t.slider).stop().animate({ left: l+'px' },this.speed,function(){
                $(t.slider).css({ left: 0 });
            });
            t.currentImage = 1;
           // if(this.counter!=null)$(t.counter+t.currentImage).addClass('active');
            $('li',t.nav).eq(t.currentImage-1).addClass('active');
        }

        /*
         * If direction is 'previous', check if we aren't at the first image.
         * In case of first image, jump to last image (which is the same as first image) and slide one image back
         * Make sure currentImage is set back to "numImages-1" and add a active class to the last counter.
         * Slide from the last(same as first) to the singleLast image.
         */
        else if(t.currentImage == 0 && oldImage == 1)
        {
            var lastL = (t.numImages-1) * t.distance * -1;
            $(t.slider).css({ left: lastL+'px'  });
            t.currentImage = t.numImages-1;
            var singleLastL = (t.currentImage-1) * t.distance * -1;
            $(t.slider).stop().animate({ left: singleLastL+'px' },this.speed);
         //   if(t.counter!=null)$(t.counter+t.currentImage).addClass('active');
            $('li',t.nav).eq(t.currentImage-1).addClass('active');

        }

        /*
         * If none of above; Just slide to the calculated 'left' and set counter to active.
         */
        else
        {
          //  if(t.counter!=null)$(t.counter+t.currentImage).addClass('active');
            $('li',t.nav).eq(t.currentImage-1).addClass('active');
            $(t.slider).stop().animate({ left: l+'px' },t.speed);

        }
    }
}