/*

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

 */

function SimpleGallery(slider,nav,counter){

    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 = false;

    /*
     * @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 = 5000;

    /*
     * @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(){
            /* Add extra li-item */
            var html = $(this).children('li').eq(0).html();
            $(this).append('<li>'+html+'</li>');

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

            /*
             * 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();
            t.distance = $(this).parent().width();

            console.log(t.distance);

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

            var img = $(slider + ' li img');
            $(img).each(function(){
                /*if($(this).height() < 520)
                {
                    var mt = (520 - $(this).height()) / 2;
                    $(this).css({marginTop:mt+'px'});
                    $(this).css({marginBottom:mt+'px'});
                }*/

                if($(this).width() < 860)
                {
                    var ml = (860 - $(this).width()) / 2;
                    //$(this).css({marginLeft:ml+'px'});
                    //$(this).css({marginRight:ml+'px'});
                }
            });
            /* End extension */
        });

        /*
         * Start loop
         */
        if(t.numImages > 1)
        {
            t.loopGallery();
        }
        /*
         * Set mouseEvent for the 'Next' button
         * When clicked, the loop pauses.
         * After 'resetTime' the loop starts again.
         */
        $(t.nav+' .next').click(function()
        {
            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()
        {
            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){
                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');

        /*
         * 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');
        }

        /*
         * 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;
            $(slider).stop().animate({ left: singleLastL+'px' },this.speed);
            if(t.counter!=null)$(t.counter+t.currentImage).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');
            $(t.slider).stop().animate({ left: l+'px' },t.speed);
        }
    }
}