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

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

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