(function($) {

    // KE010101 - Image Slider
    // Created on june 25, 2013

    // Komma Mediadesign
    // www.komma-mediadesign.nl

    $.imageSlider = function(element, options) {

        var defaults = {
            nav : null,
            loop : null,
            prefix : 'ke01_',
            speed : 1000
        };

        // Reference to this
        var t = this;

        // Current Index
        var cIndex = 0;

        // Number of images
        var num = 0;

        // Create settings object
        t.settings = {};

        t.isMoving = false;

        // jQuery reference to element
        var $element = $(element);
        var $ul;

        // Constructor
        t.init = function ()
        {
            // Extend the defaults with options, save in settings
            t.settings = $.extend({}, defaults, options);

            t.speed = t.settings.speed;

            // Adjust to parent size
            t.adjust();

            // Set number of images
            $ul = $('#'+ t.settings.prefix + 'mask ul');
            num = $ul.children().length;

            // Set cIndex
            cIndex = 0;
            swapMenu(cIndex);

            // Loop ?
            t.isLooping = false;

            if(t.settings.loop != null)
            {
                t.isLooping = true;
                var intv = t.settings.loop;
                t.loop = setTimeout(function(){
                    t.next();
                    t.loop = setInterval(function(){ t.next(); },intv + t.speed);
                },intv);
            }

            // Nav ?
            if(t.settings.nav != null)
            {
                var $nav = $(t.settings.nav);
                var $timeSlider = $('.timer .slider');

                if( num > 1)
                {
                    $('li',$nav).click(function()
                    {
                        if( ! t.isMoving )
                        {
                            // Stop the loop
                            t.isLooping = false;
                            clearInterval(t.loop);
                            t.goto($(this).index());
                        }
                    });

                    // Slider
                    if($timeSlider.size() > 0)
                    {
                        if( t.isLooping )
                        {
                            $timeSlider.width(0);
                            $timeSlider.animate({ width: $timeSlider.parent().width() +'px' }, t.settings.loop,'linear');
                        }
                    }
                }
                else
                {
                    $nav.css({display: 'none'});
                    $('.timer').css({display: 'none'});
                }

            }


        };

        // Public method Next
        // Slide to the next image
        t.next = function()
        {
            // Get target
            var tIndex;
            if(cIndex != num-1)
            {
                tIndex = cIndex+1;
            }
            else
            {
                tIndex = 0;
            }

            t.goto(tIndex);
            swapMenu(tIndex);
        };

        // Public method Previous
        // Slide to the previous image
        t.previous = function()
        {
            var tIndex;
            if(cIndex != 0)
            {
                tIndex = cIndex-1;
            }
            else
            {
                tIndex = num-1;
            }

            t.goto(tIndex);
            swapMenu(tIndex);
        };

        // Public method Goto
        // Slide to the passed index
        t.goto = function(tIndex)
        {
            if(cIndex != tIndex)
            {
                t.isMoving = true;

                // Slider
                var $timeSlider = $('.timer .slider');

                if($timeSlider.size() > 0)
                {
                    //$timeSlider.css({ width: $timeSlider.parent().width(), left: 'auto', right: 0  });
                    $timeSlider.stop().animate({ width: 0 }, t.speed,'easeInOutExpo');
                    if( t.isLooping )
                    {
                        setTimeout(function(){
                            $timeSlider.stop();
                            $timeSlider.css({ width: 0, left: 0, right: 'auto'  });
                            $timeSlider.animate({ width: $timeSlider.parent().width() +'px' }, Number(t.settings.loop),'linear');
                        },Number(t.speed));
                    }
                }
                // Set target and current object
                var $target = $ul.children().eq(tIndex);
                var $current = $ul.children().eq(cIndex);

                var newW = $element.width();

                // Swap target to the top
                $target.css({ width: 0, left: newW+'px', zIndex : 3});
                $('img',$target).css({ left: newW / -2 +'px', zIndex : 3});

                // Animate old and new image
                var ease = 'easeInOutExpo';
                $('img',$target).animate({ left: newW / 2 , zIndex : 3},t.speed, ease);
                $target.stop().animate({ width: newW+'px', left: 0 },t.speed, ease,
                function()
                {
                    // After animation, swap zIndex
                    $current.css({ zIndex: 1});
                    $target.css({ zIndex : 2});

                    t.isMoving = false;
                });

                swapMenu(tIndex);
                cIndex = tIndex;
            }
        };

        // Public method Adjust
        // Adjust slider size to parent (element)
        t.adjust = function()
        {
            // Get element width and height
            var w = $element.width();
            var h = $element.height();

            // Mask gets with and height of element
            var $mask = $('#'+ t.settings.prefix + 'mask');
            $mask.width(w);
            $mask.height(h);

            // List item gets height of element and width of element
            var $li = $('#'+ t.settings.prefix + 'mask ul li');
            $li.width(w);
            $li.height(h);

            var $img = $('img',$li);

            // Check what image to load
            var wWidth = window.innerWidth || document.body.clientWidth;
            $img.each(function(){
                if(wWidth > 1440)
                {
                    $(this).attr('src', $(this).attr('data-large'))
                }
                else
                {
                    $(this).attr('src', $(this).attr('data-small'))
                }
            });

            $($img).one('load', function() {
                // Images adjust in full-width or full-height,
                // depending on ratio and parent dimensions
                var ratioI = $img.width() / $img.height();
                var ratioP = $li.width() / $li.height();
                if(ratioP >= ratioI)
                {
                    // Make image as wide as parent
                    $img.width($li.width());
                    $img.height($li.width() / ratioI);
                }
                else
                {
                    // Make image as high as parent
                    $img.height($li.height());
                    $img.width($li.height() * ratioI);
                }

                var ml = $img.width() / -2;
                $img.css({  display: 'block', left: w / 2 + 'px', marginLeft : ml+'px' });

            }).each(function() {
                if(this.complete) $(this).load();
            });

            $li.eq(cIndex).css({ zIndex: 2});
        };

        // Private method swapMenu
        // Activate the new menu item
        var swapMenu = function(tIndex)
        {
            if (t.settings.nav != null)
            {
                var $nav = $(t.settings.nav);
                $nav.children('li').eq(cIndex).removeClass('active');
                $nav.children('li').eq(tIndex).addClass('active');
            }
        };

        // Run plugin
        t.init();
    };

    $.fn.imageSlider = function(options)
    {
        return this.each(function()
        {
            // if plugin has not already been attached to the element
            if ($(this).data('imageSlider') == undefined)
            {
                // create a new instance of the plugin
                var imageSlider = new $.imageSlider(this, options);
                $(this).data('imageSlider', imageSlider);
            }
        });
    }
})(jQuery);