(function($) {

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

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

    $.videoSlider = 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 videos = [];

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

                // Load first images
                t.loadVideos();

                // Adjust size
                t.adjust();

                // Set cIndex
                cIndex = 0;

                launched = true;
            }
        };

        t.loadVideos = function()
        {
            // Put all list items in an array.
            $ul.children('li').each(function()
            {
                var iFrame = $(this).html();
                videos.push(iFrame);
            });

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

            // Put the first  in the ul
            $li = $('<li/>');
            $li.css({ opacity:1 });
            $li.html(videos[0]);

            $ul.append($li);
        };

        // 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 = $('#videos_index_nav .active');
                $active.removeClass('active');
                $('#videos_index_nav').children('li').eq(tIndex+1).addClass('active');
                // End extension

                disable();

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

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

                // Slide down
                if(dir == 'next')
                {
                    loadKey = tIndex;

                    $ul.append('<li style="left: ' + ($element.width()) + 'px; opacity: ' + t.settings.opacity + ';">' + videos[loadKey] + '</li>');
                    $newVideo = $('.new');
                    t.adjustImage($newVideo);
                    $newVideo.removeClass('new');

                    // 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 + ';">' + videos[tIndex] + '</li>');
                    $newVideo = $('.new');
                    t.adjustImage($newVideo);
                    $newVideo.removeClass('new');

                    // 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
            // by the number of "grid rows" (default: 5), multiplied by the number of rows - 2 (2: next and previous)
            var imageHeight = $element.height() / t.settings.rows * (t.settings.rows - 2);

            // 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();
            if(ratioP >= ratioI)
            {
                // Make image as wide as parent
                $img.width($img.parent().width());
                $img.height($img.parent().width() / 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', left: $img.width() / 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.videoSlider = 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 slider = new $.videoSlider(this, options);
                $(this).data('slider', slider);
            }
        });
    }
})(jQuery);