(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 = {};

        // 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 ?
            if(t.settings.loop != null)
            {
                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);
                $('li',$nav).click(function()
                {
                    // Stop the loop
                    clearInterval(t.loop);

                    t.goto($(this).index());
                });
            }

        };

        // 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)
            {
                // Set target and current object
                var $target = $ul.children().eq(tIndex);
                var $current = $ul.children().eq(cIndex);

                // Swap target to the top
                $target.css({ zIndex : 3});

                // Animate old and new image
                var dist = $element.width();
                var ease = 'easeInOutExpo';
                $target.stop().animate({ left: 0 },t.speed, ease);
                $('img',$target).stop().animate({ left: 0 },t.speed, ease);

                $current.stop().animate({ left: -1 * dist+'px' },t.speed, ease);
                $('img',$current).stop().animate({ left: dist+'px' },t.speed, ease
                ,function()
                {
                    // After animation, swap zIndex
                    $current.css({ zIndex: 1});
                    $target.css({ zIndex : 2});

                    // Reset target location
                    $current.css({ left: dist+'px' });
                    $('img',$current).css({ left: -1 * dist+'px' })
                });

                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);

            $($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);
                }
            }).each(function() {
                if(this.complete) $(this).load();
            });


            // Position li
            $li.each(function()
            {
                var i = $(this).index();
                if(i != cIndex)
                {
                    $(this).css({ left : w +'px' });
                    $('img',this).css({ left: -1 * w+'px'})
                }
            })
        };

        // 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);