/**
 * jquery.slitslider.js v1.1.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2012, Codrops
 * http://www.codrops.com
 */

;
(function ($, window, undefined) {

    'use strict';

    /*
     * debouncedresize: special jQuery event that happens once after a window resize
     *
     * latest version and complete README available on Github:
     * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
     *
     * Copyright 2011 @louis_remi
     * Licensed under the MIT license.
     */
    var $event = $.event,
        $special,
        resizeTimeout;

    $special = $event.special.debouncedresize = {
        setup: function () {
            $(this).on("resize", $special.handler);
        },
        teardown: function () {
            $(this).off("resize", $special.handler);
        },
        handler: function (event, execAsap) {
            // Save the context
            var context = this,
                args = arguments,
                dispatch = function () {
                    // set correct event type
                    event.type = "debouncedresize";
                    $event.dispatch.apply(context, args);
                };

            if (resizeTimeout) {
                clearTimeout(resizeTimeout);
            }

            execAsap ?
                dispatch() :
                resizeTimeout = setTimeout(dispatch, $special.threshold);
        },
        threshold: 20
    };

    // global
    var $window = $(window),
        $document = $(document),
        Modernizr = window.Modernizr;

    $.Slitslider = function (options, element) {

        this.$elWrapper = $(element);
        this._init(options);

    };

    $.Slitslider.defaults = {
        // transitions speed
        speed: 800,
        // if true the item's slices will also animate the opacity value
        optOpacity: false,
        // amount (%) to translate both slices - adjust as necessary
        translateFactor: 230,
        // maximum possible angle
        maxAngle: 40,
        // maximum possible scale
        maxScale: 2,
        // slideshow on / off
        autoplay: false,
        // keyboard navigation
        keyboard: true,
        // time between transitions
        interval: 4000,
        fullscreen: false,
        animation: 'fade',
        // callbacks
        onBeforeChange: function (slide, idx) {
            return false;
        },
        onAfterChange: function (slide, idx) {
            return false;
        }
    };

    $.Slitslider.prototype = {

        _init: function (options) {

            // options
            this.options = $.extend(true, {}, $.Slitslider.defaults, options);

            // https://github.com/twitter/bootstrap/issues/2870
            this.transEndEventNames = {
                'WebkitTransition': 'webkitTransitionEnd',
                'MozTransition': 'transitionend',
                'OTransition': 'oTransitionEnd',
                'msTransition': 'MSTransitionEnd',
                'transition': 'transitionend'
            };
            this.transEndEventName = this.transEndEventNames[Modernizr.prefixed('transition')];
            // suport for css 3d transforms and css transitions
            this.support = Modernizr.csstransitions && Modernizr.csstransforms3d;
            // the slider
            this.$el = this.$elWrapper.children('.sl-slider');
            // the slides
            this.$slides = this.$el.children('.sl-slide').hide();
            // total slides
            this.slidesCount = this.$slides.length;
            // current slide
            this.current = 0;
            // control if it's animating
            this.isAnimating = false;
            // get container size
            this._getSize();
            // layout
            this._layout();
            // load some events
            this._loadEvents();
            // slideshow
            if (this.options.autoplay) {

                this._startSlideshow();

            }

        },
        // gets the current container width & height
        _getSize: function () {
            this.size = {
                width: this.$elWrapper.outerWidth(true),
            };
            if (this.options.fullscreen)
                this.size.height = $(window).height();
            else
                this.size.height = this.$elWrapper.outerHeight(true);

        },
        _layout: function () {

            this.$slideWrapper = $('<div class="sl-slides-wrapper" />');

            // wrap the slides
            this.$slides.wrapAll(this.$slideWrapper).each(function (i) {

                var $slide = $(this),
                // vertical || horizontal
                    orientation = $slide.data('orientation');

                $slide.addClass('sl-slide-' + orientation)
                    .children()
                    .wrapAll('<div class="sl-content-wrapper" />')
                    .wrapAll('<div class="sl-content" />');

            });

            // set the right size of the slider/slides for the current window size
            this._setSize();
            // show first slide
            this.$slides.eq(this.current).show().addClass('sl-trans-elems');

        },
        _navigate: function (dir, pos) {

            if (this.isAnimating || this.slidesCount < 2) {

                return false;

            }

            this.isAnimating = true;

            var self = this,
                $currentSlide = this.$slides.eq(this.current);

            // if position is passed
            if (pos !== undefined) {

                this.current = pos;

            }
            // if not check the boundaries
            else if (dir === 'next') {

                this.current = this.current < this.slidesCount - 1 ? ++this.current : 0;

            }
            else if (dir === 'prev') {

                this.current = this.current > 0 ? --this.current : this.slidesCount - 1;

            }

            this.options.onBeforeChange($currentSlide, this.current);

            // next slide to be shown
            var $nextSlide = this.$slides.eq(this.current),
            // the slide we want to cut and animate
                $movingSlide = ( dir === 'next' ) ? $currentSlide : $nextSlide,

            // the following are the data attrs set for each slide
                configData = $movingSlide.data(),
                config = {};

            config.orientation = configData.orientation || 'horizontal',
            config.slice1angle = configData.slice1Rotation || 0,
            config.slice1scale = configData.slice1Scale || 1,
            config.slice2angle = configData.slice2Rotation || 0,
            config.slice2scale = configData.slice2Scale || 1;

            this._validateValues(config);

            var cssStyle = config.orientation === 'horizontal' ? {
                    marginTop: -this.size.height / 2
                } : {
                    marginLeft: -this.size.width / 2
                },
            // default slide's slices style
                resetStyle = {
                    'transform': 'translate(0%,0%) rotate(0deg) scale(1)',
                    opacity: 1
                },
            // slice1 style
                slice1Style = config.orientation === 'horizontal' ? {
                    'transform': 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
                } : {
                    'transform': 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
                },
            // slice2 style
                slice2Style = config.orientation === 'horizontal' ? {
                    'transform': 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
                } : {
                    'transform': 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
                };

            if (this.options.optOpacity) {

                slice1Style.opacity = 0;
                slice2Style.opacity = 0;

            }

            // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next"
            // or going "prev" according to the direction.
            // the idea is to make it more interesting by giving some animations to the respective slide's elements
            //( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' );

            if (this.options.animation && this.options.animation === 'fade') {
                $currentSlide.removeClass('sl-trans-elems').css('z-index', 10);
                $nextSlide.css({'z-index': 5, 'display': 'block'});

                setTimeout(function () {
                    $nextSlide.addClass('sl-trans-elems');
                }, this.options.speed / 2);

                $currentSlide.fadeOut(this.options.speed, function () {
                    self.isAnimating = false;
                });

                return;
            }

            $currentSlide.removeClass('sl-trans-elems');

            var transitionProp = {
                'transition': 'all ' + this.options.speed + 'ms ease-in-out'
            };

            // add the 2 slices and animate them
            $movingSlide.css('z-index', this.slidesCount)
                .find('div.sl-content-wrapper')
                .wrap($('<div class="sl-content-slice" />').css(transitionProp))
                .parent()
                .cond(
                dir === 'prev',
                function () {

                    var slice = this;
                    this.css(slice1Style);
                    setTimeout(function () {

                        slice.css(resetStyle);

                    }, 50);

                },
                function () {

                    var slice = this;
                    setTimeout(function () {

                        slice.css(slice1Style);

                    }, 50);

                }
            )
                .clone()
                .appendTo($movingSlide)
                .cond(
                dir === 'prev',
                function () {

                    var slice = this;
                    this.css(slice2Style);
                    setTimeout(function () {

                        $currentSlide.addClass('sl-trans-back-elems');

                        if (self.support) {

                            slice.css(resetStyle).on(self.transEndEventName, function () {

                                self._onEndNavigate(slice, $currentSlide, dir);

                            });

                        }
                        else {

                            self._onEndNavigate(slice, $currentSlide, dir);

                        }

                    }, 50);

                },
                function () {

                    var slice = this;
                    setTimeout(function () {

                        $nextSlide.addClass('sl-trans-elems');

                        if (self.support) {

                            slice.css(slice2Style).on(self.transEndEventName, function () {

                                self._onEndNavigate(slice, $currentSlide, dir);

                            });

                        }
                        else {

                            self._onEndNavigate(slice, $currentSlide, dir);

                        }

                    }, 50);

                }
            )
                .find('div.sl-content-wrapper')
                .css(cssStyle);

            $nextSlide.show();

        },
        _validateValues: function (config) {

            // OK, so we are restricting the angles and scale values here.
            // This is to avoid the slices wrong sides to be shown.
            // you can adjust these values as you wish but make sure you also ajust the
            // paddings of the slides and also the options.translateFactor value and scale data attrs
            if (config.slice1angle > this.options.maxAngle || config.slice1angle < -this.options.maxAngle) {

                config.slice1angle = this.options.maxAngle;

            }
            if (config.slice2angle > this.options.maxAngle || config.slice2angle < -this.options.maxAngle) {

                config.slice2angle = this.options.maxAngle;

            }
            if (config.slice1scale > this.options.maxScale || config.slice1scale <= 0) {

                config.slice1scale = this.options.maxScale;

            }
            if (config.slice2scale > this.options.maxScale || config.slice2scale <= 0) {

                config.slice2scale = this.options.maxScale;

            }
            if (config.orientation !== 'vertical' && config.orientation !== 'horizontal') {

                config.orientation = 'horizontal'

            }

        },
        _onEndNavigate: function ($slice, $oldSlide, dir) {

            // reset previous slide's style after next slide is shown
            var $slide = $slice.parent(),
                removeClasses = 'sl-trans-elems sl-trans-back-elems';

            // remove second slide's slice
            $slice.remove();
            // unwrap..
            $slide.css('z-index', 1)
                .find('div.sl-content-wrapper')
                .unwrap();

            // hide previous current slide
            $oldSlide.hide().removeClass(removeClasses);
            $slide.removeClass(removeClasses);
            // now we can navigate again..
            this.isAnimating = false;
            this.options.onAfterChange($slide, this.current);

        },
        _setSize: function () {

            // the slider and content wrappers will have the window's width and height
            var cssStyle = {
                width: this.size.width,
                height: this.size.height
            };

            this.$el.css(cssStyle).closest('.sl-slider-wrapper').css(cssStyle).find('div.sl-content-wrapper').css(cssStyle);

        },
        _loadEvents: function () {

            var self = this;

            $window.on('debouncedresize.slitslider', function (event) {

                // update size values
                self._getSize();
                // set the sizes again
                self._setSize();

            });

            if (this.options.keyboard) {

                $document.on('keydown.slitslider', function (e) {

                    var keyCode = e.keyCode || e.which,
                        arrow = {
                            left: 37,
                            up: 38,
                            right: 39,
                            down: 40
                        };

                    switch (keyCode) {

                        case arrow.left :

                            self._stopSlideshow();
                            self._navigate('prev');
                            break;

                        case arrow.right :

                            self._stopSlideshow();
                            self._navigate('next');
                            break;

                    }

                });

            }

        },
        _startSlideshow: function () {

            var self = this;

            this.slideshow = setTimeout(function () {

                self._navigate('next');

                if (self.options.autoplay) {

                    self._startSlideshow();

                }

            }, this.options.interval);

        },
        _stopSlideshow: function () {

            if (this.options.autoplay) {

                clearTimeout(this.slideshow);
                this.isPlaying = false;
                this.options.autoplay = false;

            }

        },
        _destroy: function (callback) {

            this.$el.off('.slitslider').removeData('slitslider');
            $window.off('.slitslider');
            $document.off('.slitslider');
            this.$slides.each(function (i) {

                var $slide = $(this),
                    $content = $slide.find('div.sl-content').children();

                $content.appendTo($slide);
                $slide.children('div.sl-content-wrapper').remove();

            });
            this.$slides.unwrap(this.$slideWrapper).hide();
            this.$slides.eq(0).show();
            if (callback) {

                callback.call();

            }

        },
        // public methos: adds more slides to the slider
        add: function ($slides, callback) {

            this.$slides = this.$slides.add($slides);

            var self = this;


            $slides.each(function (i) {

                var $slide = $(this),
                // vertical || horizontal
                    orientation = $slide.data('orientation');

                $slide.hide().addClass('sl-slide-' + orientation)
                    .children()
                    .wrapAll('<div class="sl-content-wrapper" />')
                    .wrapAll('<div class="sl-content" />')
                    .end()
                    .appendTo(self.$el.find('div.sl-slides-wrapper'));

            });

            this._setSize();

            this.slidesCount = this.$slides.length;

            if (callback) {

                callback.call($items);

            }

        },
        // public method: shows next slide
        next: function () {

            this._stopSlideshow();
            this._navigate('next');

        },
        // public method: shows previous slide
        previous: function () {

            this._stopSlideshow();
            this._navigate('prev');

        },
        // public method: goes to a specific slide
        jump: function (pos) {

            pos -= 1;

            if (pos === this.current || pos >= this.slidesCount || pos < 0) {

                return false;

            }

            this._stopSlideshow();
            this._navigate(pos > this.current ? 'next' : 'prev', pos);

        },
        // public method: starts the slideshow
        // any call to next(), previous() or jump() will stop the slideshow
        play: function () {

            if (!this.isPlaying) {

                this.isPlaying = true;

                this._navigate('next');
                this.options.autoplay = true;
                this._startSlideshow();

            }

        },
        // public method: pauses the slideshow
        pause: function () {

            if (this.isPlaying) {

                this._stopSlideshow();

            }

        },
        // public method: check if isAnimating is true
        isActive: function () {

            return this.isAnimating;

        },
        // publicc methos: destroys the slicebox instance
        destroy: function (callback) {

            this._destroy(callback);

        }

    };

    var logError = function (message) {

        if (window.console) {

            window.console.error(message);

        }

    };

    $.fn.slitslider = function (options) {

        var self = $.data(this, 'slitslider');

        if (typeof options === 'string') {

            var args = Array.prototype.slice.call(arguments, 1);

            this.each(function () {

                if (!self) {

                    logError("cannot call methods on slitslider prior to initialization; " +
                    "attempted to call method '" + options + "'");
                    return;

                }

                if (!$.isFunction(self[options]) || options.charAt(0) === "_") {

                    logError("no such method '" + options + "' for slitslider self");
                    return;

                }

                self[options].apply(self, args);

            });

        }
        else {

            this.each(function () {

                if (self) {

                    self._init();

                }
                else {

                    self = $.data(this, 'slitslider', new $.Slitslider(options, this));

                }

            });

        }

        return self;

    };

})(jQuery, window);
