(function($) {

    // KE010201 - Image Slider
    // Created on july 15, 2013

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

    $.imageSlider = function(element, options) {

        var defaults = {
            prefix : 'ke0103_',
            speed : 800,
            opacity: .4 };

        // Reference to this
        var t = this;

        // Launched ?
        var launched = false;
        var disabled = false;

        // Current Index
        var cIndex = 0;

        // Number of children
        var num = 0;

        var loop = null;

        // Images
        var images = [];
        var alts = [];

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

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

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

                // Set speed of animation
                t.speed = t.settings.speed;

                // Set number of images
                num = $element.children('ul').children('li').length;

                if( num == 1)
                {
                    $element.children('ul').css({ cursor: 'default' });
                }

                // Load first images
                t.loadImages();

                // Adjust size
                t.adjust();

                // Set cIndex
                cIndex = 0;

                launched = true;

                var loopSpeed = 4000;
                loop = setTimeout(function()
                {
                    loop = setInterval(function()
                    {
                        t.next()
                    },loopSpeed);
                }, loopSpeed - t.speed);
            }
        };

        t.loadImages = function()
        {
            // Put all list items in an array.
            $ul.children('li').each(function()
            {
                var src = $(this).children('img').attr('data-src');
                var alt = $(this).children('img').attr('alt');
                images.push(src);
                alts.push(alt);
            });

            // Clear the ul
            $ul.html('');

            // Put the first  in the ul
            $li = $('<li/>');
            $li.css({ opacity:1  });
            $li.html('<img style="opacity:0" src="' + images[0] + '" alt="' + alts[0] + '" /><div class="loader"></div>');

            $ul.append($li);
            $('img',$li).one('load', function(){ $(this).stop().animate({ opacity: 1}); $(this).next().remove(); }).each(function() { if(this.complete) $(this).load(); });
        };

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

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

            t.goto(tIndex,'previous');
        };

        // Public method Goto
        // Slide to the passed index
        t.goto = function(tIndex, dir)
        {
            if( cIndex != tIndex && ! disabled)
            {
                // Keystud extension
                var $active = $('#photos_index_nav .active');
                $active.removeClass('active');
                $('#photos_index_nav').children('li').eq(tIndex+1).addClass('active');
                // End extension


                disable();

                if (typeof dir === 'undefined') dir = 'next';

                // Calculate image width:
                var y, $newImage,loadKey = null;

                // Slide down
                if(dir == 'next')
                {

                    $ul.append('<li style="left: ' + ($element.width()) + 'px; opacity: ' + t.settings.opacity + ';"><img src="' + images[tIndex] + '" alt="' + alts[tIndex] + '" class="new" /></li>');
                    $newImage = $('.new');
                    $($newImage).one('load', function()
                    {
                        t.adjustImage($newImage);
                        $newImage.removeClass('new');
                    }).each(function() {
                        if(this.complete) $(this).load();
                    });

                    // Slide up
                    $ul.children().each(function()
                    {
                        var x = $(this).index() * $element.width() - ($element.width());

                        if($(this).index() == 0)
                        {
                            $(this).stop().animate({ left: x+'px', opacity: t.settings.opacity }, t.speed);
                        }
                        else if($(this).index() == 1)
                        {
                            $(this).stop().animate({ left: x+'px', opacity: 1 }, t.speed);
                        }
                        else
                        {
                            $(this).stop().animate({ left: x+'px' }, t.speed);
                        }
                    });

                    setTimeout(function()
                    {
                        $ul.children().first().remove();
                        enable();
                    }, t.speed);
                }
                // Slide up
                else
                {
                    $ul.prepend('<li style="left: ' + (-1 * $element.width()) + 'px; opacity: ' + t.settings.opacity + ';"><img src="' + images[tIndex] + '" alt="' + alts[tIndex] + '" class="new" /></li>');
                    $newImage = $('.new');
                    $($newImage).one('load', function()
                    {
                        t.adjustImage($newImage);
                        $newImage.removeClass('new');
                    }).each(function() {
                            if(this.complete) $(this).load();
                        });

                    // Slide down
                    $ul.children().each(function()
                    {
                        var x = $(this).index() * $element.width() ;

                        if($(this).index() == 1)
                        {
                            $(this).stop().animate({ left: x+'px', opacity: t.settings.opacity }, t.speed);
                        }
                        else if($(this).index() == 0)
                        {
                            $(this).stop().animate({ left: x+'px', opacity: 1 }, t.speed);
                        }
                        else
                        {
                            $(this).stop().animate({ left: x+'px' }, t.speed);
                        }
                    });

                    setTimeout(function()
                    {
                        $ul.children().last().remove();
                        enable();

                    }, t.speed);

                }
            }
            cIndex = tIndex;
        };

        // Public method Adjust
        // Adjust slider size to parent (element)
        t.adjust = function()
        {
            // Calculate image height:
            // The image height is calculated by dividing the parent height
            var imageHeight = $element.height();

            // Set image heights
            var $images = $ul.children();
            $images.height(imageHeight);

            // Set image position
            $images.each(function()
            {
                var y = $(this).index() * imageHeight - (imageHeight / (t.settings.rows - 2) * (t.settings.rows - 3));
                $(this).css({top:y+'px'});
            });

            // Adjust image to parent container
            $('img',$images).one('load', function()
            {
                t.adjustImage($(this));
            }).each(function() {
                    if(this.complete) $(this).load();
            });
        };

        t.adjustImage = function($img)
        {
            // Images adjust in full-width or full-height,
            // depending on ratio and parent dimensions
            var ratioI = $img.width() / $img.height();
            var ratioP = $img.parent().width() / $img.parent().height();

            console.log(ratioP + ' ' + ratioI);
            if(ratioP < ratioI)
            {
                // Make image as wide as parent
                $img.width($img.parent().width());
                $img.height($img.parent().width() / ratioI);

                // Portrait image?
                /*if(ratioI < 1)
                {
                    // Make image as wide as parent
                    $img.height($img.parent().height());
                    $img.width($img.height() * ratioI);
                }*/
            }
            else
            {
                // Make image as high as parent
                $img.height($img.parent().height());
                $img.width($img.parent().height() * ratioI);
            }
            $img.css({  display: 'block', top: $img.height() / 2 + 'px',  marginLeft : $img.width() / -2 +'px',marginTop : $img.height() / -2 +'px' });
        };

        var enable = function()
        {
            disabled = false;
        };

        var disable = function()
        {
            disabled = true;
        };

        t.pause = function()
        {
            clearTimeout(loop);
            clearInterval(loop);
        };
        // 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('slider') == undefined)
            {
                // create a new instance of the plugin
                var imageSlider = new $.imageSlider(this, options);
                $(this).data('slider', imageSlider);
            }
        });
    }
})(jQuery);