/*! uikit 2.25.0 | http://www.getuikit.com | (c) 2014 yootheme | mit license */
(function(addon) {

    var component;

    if (window.uikit) {
        component = addon(uikit);
    }

    if (typeof define == "function" && define.amd) {
        define("uikit-slideshow-fx", ["uikit"], function() {
            return component || addon(uikit);
        });
    }

})(function(ui) {

    "use strict";

    var animations = ui.slideshow.animations;

    ui.$.extend(ui.slideshow.animations, {
        'slice': function(current, next, dir, fromfx) {

            if (!current.data('cover')) {
                return animations.fade.apply(this, arguments);
            }

            var d = ui.$.deferred();

            var slicewidth = math.ceil(this.element.width() / this.options.slices),
                bgimage    = next.data('cover').css('background-image'),
                ghost      = ui.$('<li></li>').css({
                    top    : 0,
                    left   : 0,
                    width  : this.container.width(),
                    height : this.container.height(),
                    opacity: 1,
                    zindex : 15
                }),
                ghostwidth  = ghost.width(),
                ghostheight = ghost.height(),
                pos         = fromfx == 'slice-up' ? ghostheight:'0',
                bar;

            for (var i = 0; i < this.options.slices; i++) {

                if (fromfx == 'slice-up-down') {
                    pos = ((i % 2) + 2) % 2==0 ? '0':ghostheight;
                }

                var width    = (i == this.options.slices-1) ? slicewidth : slicewidth,
                    clipto   = ('rect(0px, '+(width*(i+1))+'px, '+ghostheight+'px, '+(slicewidth*i)+'px)'),
                    clipfrom;

                //slice-down - default
                clipfrom = ('rect(0px, '+(width*(i+1))+'px, 0px, '+(slicewidth*i)+'px)');

                if (fromfx == 'slice-up' || (fromfx == 'slice-up-down' && ((i % 2) + 2) % 2==0 )) {
                    clipfrom = ('rect('+ghostheight+'px, '+(width*(i+1))+'px, '+ghostheight+'px, '+(slicewidth*i)+'px)');
                }

                bar = ui.$('<div class="uk-cover-background"></div>').css({
                    'position'           : 'absolute',
                    'top'                : 0,
                    'left'               : 0,
                    'width'              : ghostwidth,
                    'height'             : ghostheight,
                    'background-image'   : bgimage,
                    'clip'               : clipfrom,
                    'opacity'            : 0,
                    'transition'         : 'all '+this.options.duration+'ms ease-in-out '+(i*60)+'ms',
                    '-webkit-transition' : 'all '+this.options.duration+'ms ease-in-out '+(i*60)+'ms'

                }).data('clip', clipto);

                ghost.append(bar);
            }

            this.container.append(ghost);

            ghost.children().last().on(ui.support.transition.end, function() {
                ghost.remove();
                d.resolve();
            });

            ghost.width();

            ghost.children().each(function() {
                var bar = ui.$(this);

                bar.css({
                    'clip': bar.data('clip'),
                    'opacity': 1
                });
            });

            return d.promise();
        },

        'slice-up': function(current, next, dir) {
            return animations.slice.apply(this, [current, next, dir, 'slice-up']);
        },

        'slice-down': function(current, next, dir) {
            return animations.slice.apply(this, [current, next, dir, 'slice-down']);
        },

        'slice-up-down': function(current, next, dir) {
            return animations.slice.apply(this, [current, next, dir, 'slice-up-down']);
        },

        'fold': function(current, next, dir) {

            if (!next.data('cover')) {
                return animations.fade.apply(this, arguments);
            }

            var d = ui.$.deferred();

            var slicewidth = math.ceil(this.element.width() / this.options.slices),
                bgimage    = next.data('cover').css('background-image'),
                ghost      = ui.$('<li></li>').css({
                    width  : next.width(),
                    height : next.height(),
                    opacity: 1,
                    zindex : 15
                }),
                ghostwidth  = next.width(),
                ghostheight = next.height(),
                bar;

            for (var i = 0; i < this.options.slices; i++) {

                bar = ui.$('<div class="uk-cover-background"></div>').css({
                    'position'           : 'absolute',
                    'top'                : 0,
                    'left'               : 0,
                    'width'              : ghostwidth,
                    'height'             : ghostheight,
                    'background-image'   : bgimage,
                    'transform-origin'   : (slicewidth*i)+'px 0 0',
                    'clip'               : ('rect(0px, '+(slicewidth*(i+1))+'px, '+ghostheight+'px, '+(slicewidth*i)+'px)'),
                    'opacity'            : 0,
                    'transform'          : 'scalex(0.000001)',
                    'transition'         : 'all '+this.options.duration+'ms ease-in-out '+(100+i*60)+'ms',
                    '-webkit-transition' : 'all '+this.options.duration+'ms ease-in-out '+(100+i*60)+'ms'
                });

                ghost.prepend(bar);
            }

            this.container.append(ghost);

            ghost.width();

            ghost.children().first().on(ui.support.transition.end, function() {
                ghost.remove();
                d.resolve();
            }).end().css({
                'transform': 'scalex(1)',
                'opacity': 1
            });

            return d.promise();
        },

        'puzzle': function(current, next, dir) {

            if (!next.data('cover')) {
                return animations.fade.apply(this, arguments);
            }

            var d = ui.$.deferred(), $this = this;

            var boxcols   = math.round(this.options.slices/2),
                boxwidth  = math.round(next.width()/boxcols),
                boxrows   = math.round(next.height()/boxwidth),
                boxheight = math.round(next.height()/boxrows)+1,
                bgimage   = next.data('cover').css('background-image'),
                ghost     = ui.$('<li></li>').css({
                    width   : this.container.width(),
                    height  : this.container.height(),
                    opacity : 1,
                    zindex  : 15
                }),
                ghostwidth  = this.container.width(),
                ghostheight = this.container.height(),
                box, rect, width;

            for (var rows = 0; rows < boxrows; rows++) {

                for (var cols = 0; cols < boxcols; cols++) {

                    width  = (cols == boxcols-1) ? (boxwidth + 2) : boxwidth;

                    rect = [
                        (boxheight * rows)       +'px', // top
                        (width  * (cols+1))      +'px', // right
                        (boxheight * (rows + 1)) +'px', // bottom
                        (boxwidth  * cols)       +'px'  // left
                    ];

                    box = ui.$('<div class="uk-cover-background"></div>').css({
                        'position'          : 'absolute',
                        'top'               : 0,
                        'left'              : 0,
                        'opacity'           : 0,
                        'width'             : ghostwidth,
                        'height'            : ghostheight,
                        'background-image'  : bgimage,
                        'clip'              : ('rect('+rect.join(',')+')'),
                        '-webkit-transform' : 'translatez(0)', // fixes webkit opacity flickering bug
                        'transform'         : 'translatez(0)'          // fixes moz opacity flickering bug
                    });

                    ghost.append(box);
                }
            }

            this.container.append(ghost);

            var boxes = shuffle(ghost.children());

            boxes.each(function(i) {
                ui.$(this).css({
                    'transition': 'all '+$this.options.duration+'ms ease-in-out '+(50+i*25)+'ms',
                    '-webkit-transition': 'all '+$this.options.duration+'ms ease-in-out '+(50+i*25)+'ms'
                });
            }).last().on(ui.support.transition.end, function() {
                ghost.remove();
                d.resolve();
            });

            ghost.width();

            boxes.css({'opacity': 1});

            return d.promise();
        },

        'boxes': function(current, next, dir, fromfx) {

            if (!next.data('cover')) {
                return animations.fade.apply(this, arguments);
            }

            var d = ui.$.deferred();

            var boxcols   = math.round(this.options.slices/2),
                boxwidth  = math.round(next.width()/boxcols),
                boxrows   = math.round(next.height()/boxwidth),
                boxheight = math.round(next.height()/boxrows)+1,
                bgimage   = next.data('cover').css('background-image'),
                ghost     = ui.$('<li></li>').css({
                    width   : next.width(),
                    height  : next.height(),
                    opacity : 1,
                    zindex  : 15
                }),
                ghostwidth  = next.width(),
                ghostheight = next.height(),
                box, rect, width, cols;

            for (var rows = 0; rows < boxrows; rows++) {

                for (cols = 0; cols < boxcols; cols++) {

                    width  = (cols == boxcols-1) ? (boxwidth + 2) : boxwidth;

                    rect = [
                        (boxheight * rows)       +'px', // top
                        (width  * (cols+1))      +'px', // right
                        (boxheight * (rows + 1)) +'px', // bottom
                        (boxwidth  * cols)       +'px'  // left
                    ];

                    box = ui.$('<div class="uk-cover-background"></div>').css({
                        'position'          : 'absolute',
                        'top'               : 0,
                        'left'              : 0,
                        'opacity'           : 1,
                        'width'             : ghostwidth,
                        'height'            : ghostheight,
                        'background-image'  : bgimage,
                        'transform-origin'  : rect[3]+' '+rect[0]+' 0',
                        'clip'              : ('rect('+rect.join(',')+')'),
                        '-webkit-transform' : 'scale(0.0000000000000001)',
                        'transform'         : 'scale(0.0000000000000001)'
                    });

                    ghost.append(box);
                }
            }

            this.container.append(ghost);

            var rowindex = 0, colindex = 0, timebuff = 0, box2darr = [[]], boxes = ghost.children(), prevcol;

            if (fromfx == 'boxes-reverse') {
                boxes = [].reverse.apply(boxes);
            }

            boxes.each(function() {

                box2darr[rowindex][colindex] = ui.$(this);
                colindex++;

                if(colindex == boxcols) {
                    rowindex++;
                    colindex = 0;
                    box2darr[rowindex] = [];
                }
            });

            for (cols = 0, prevcol = 0; cols < (boxcols * boxrows); cols++) {

                prevcol = cols;

                for (var row = 0; row < boxrows; row++) {

                    if (prevcol >= 0 && prevcol < boxcols) {

                        box2darr[row][prevcol].css({
                            'transition': 'all '+this.options.duration+'ms linear '+(50+timebuff)+'ms',
                            '-webkit-transition': 'all '+this.options.duration+'ms linear '+(50+timebuff)+'ms'
                        });
                    }
                    prevcol--;
                }
                timebuff += 100;
            }

            boxes.last().on(ui.support.transition.end, function() {
                ghost.remove();
                d.resolve();
            });

            ghost.width();

            boxes.css({
                '-webkit-transform': 'scale(1)',
                'transform': 'scale(1)'
            });

            return d.promise();
        },

        'boxes-reverse': function(current, next, dir) {
            return animations.boxes.apply(this, [current, next, dir, 'boxes-reverse']);
        },

        'random-fx': function(){

            var animations = ['slice-up', 'fold', 'puzzle', 'slice-down', 'boxes', 'slice-up-down', 'boxes-reverse'];

            this.fxindex = (this.fxindex === undefined ? -1 : this.fxindex) + 1;

            if (!animations[this.fxindex]) this.fxindex = 0;

            return animations[animations[this.fxindex]].apply(this, arguments);
        }
    });


    // helper functions

    // shuffle an array
    var shuffle = function(arr) {
        for (var j, x, i = arr.length; i; j = parseint(math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x) {}
        return arr;
    };

    return ui.slideshow.animations;
});