(function($) {
    'use strict';

    var namespace = 'jquery-flipbox';

    function flipbox($element, options) {
        options = options || {};
        this.$element = $element;

        this.rotation = 0;
        this.contents = this.$element.children().detach().map(function() {
            return this
        });
        this.contentindex = math.min(math.max(options.index, 0), this.contents.length - 1) || 0;

        this.config(options);
        this.create();
    }

    flipbox.prototype.config = function(options) {
        options = options || {};

        if (this.options) {
            delete options.vertical;
            delete options.width;
            delete options.height;
        }

        this.options = $.extend({
            vertical: false,
            width: this.$element.width(),
            height: this.$element.height(),
            animationduration: 400,
            animationeasing: 'ease',
            autoplay: false,
            autoplayreverse: false,
            autoplaywaitduration: 3000,
            autoplaypauseonhover: false
        }, this.options, options);
    };

    flipbox.prototype.create = function() {
        var _this = this;
        this.$element.addclass('flipbox-wrapper');

        this.$box = $('<div></div>')
            .addclass('flipbox-box')
            .css('transition-duration', (this.options.animationduration || 0) + 'ms')
            .css('transition-timing-function', this.options.animationeasing)
            .appendto(this.$element);

        this.$front = $('<div></div>').addclass('flipbox-side flipbox-front').appendto(this.$box);
        this.$back = $('<div></div>').addclass('flipbox-side flipbox-back').appendto(this.$box);

        if (this.options.vertical) {
            this.$box.addclass('flipbox-vertical');
            this.$top = $('<div></div>').addclass('flipbox-side flipbox-top').appendto(this.$box);
            this.$bottom = $('<div></div>').addclass('flipbox-side flipbox-bottom').appendto(this.$box);
        } else {
            this.$box.addclass('flipbox-horizontal');
            this.$left = $('<div></div>').addclass('flipbox-side flipbox-left').appendto(this.$box);
            this.$right = $('<div></div>').addclass('flipbox-side flipbox-right').appendto(this.$box);
        }

        this.$front.append(this.contents[this.contentindex]);

        if (this.options.autoplay && this.options.autoplaypauseonhover) {
            this.$element.on('mouseenter.' + namespace, function() {
                _this.toggleautoplay(false);
            }).on('mouseleave.' + namespace, function() {
                _this.toggleautoplay(true);
            });
        }

        this.resize();
        this.toggleautoplay(this.options.autoplay);

        $(window).on('focus.' + namespace, function() {
            _this.toggleautoplay(_this.options.autoplay);
        });
        $(window).on('blur.' + namespace, function() {
            _this.toggleautoplay(false);
        });

        this.trigger('created');
    };

    flipbox.prototype.update = function() {
        this.$box
            .css('transition-duration', (this.options.animationduration || 0) + 'ms')
            .css('transition-timing-function', this.options.animationeasing);

        this.$element.off('mouseenter.' + namespace + ' mouseleave.' + namespace);
        if (this.options.autoplay && this.options.autoplaypauseonhover) {
            var _this = this;
            this.$element.on('mouseenter.' + namespace, function() {
                _this.toggleautoplay(false);
            }).on('mouseleave.' + namespace, function() {
                _this.toggleautoplay(true);
            });
        }

        this.resize();
        this.toggleautoplay(this.options.autoplay);

        this.trigger('updated');
    };

    flipbox.prototype.destroy = function() {
        $(window).off('focus.' + namespace + ' blur.' + namespace);
        this.$element.off('mouseenter.' + namespace + ' mouseleave.' + namespace);
        this.$element.removeclass('flipbox-wrapper');
        this.$element.empty();
        this.$element.append(this.contents);

        this.trigger('destroyed');
    };

    flipbox.prototype.resize = function() {
        if (this.options.vertical) {
            this.$box.css('transform-origin', '0 ' + (this.options.height / 2) + 'px -' + (this.options.height / 2) + 'px');
            this.$back.css('transform', 'translatez(-' + this.options.height + 'px) rotatex(180deg)');
            this.$top.css('transform', 'rotatex(-270deg) translatey(-' + this.options.height + 'px)');
            this.$bottom.css('transform', 'rotatex(-90deg) translatey(' + this.options.height + 'px)');
        } else {
            this.$box.css('transform-origin', (this.options.width / 2) + 'px 0 -' + (this.options.width / 2) + 'px');
            this.$back.css('transform', 'translatez(-' + this.options.width + 'px) rotatey(180deg)');
            this.$left.css('transform', 'rotatey(270deg) translatex(-' + this.options.width + 'px)');
            this.$right.css('transform', 'rotatey(-270deg) translatex(' + this.options.width + 'px)');
        }
    };

    flipbox.prototype.displaycontent = function(contentindex, reverse) {
        if (this.contentindex !== contentindex) {
            var $side = this.getnextside(reverse);
            $side.find('>').detach();
            $side.append(this.contents[contentindex]);
            var previndex = this.contentindex;
            this.contentindex = contentindex;
            this.flip(reverse, previndex, contentindex);
        }
    };

    flipbox.prototype.refreshcurrentcontent = function() {
        var $side = this.getcurrentside();
        $side.find('>').detach();
        $side.append(this.contents[this.contentindex]);
    };

    flipbox.prototype.addcontent = function(newcontent, contentindex) {
        contentindex = contentindex || contentindex === 0 ? contentindex : this.contents.length;
        contentindex = math.min(math.max(0, contentindex), this.contents.length);

        this.contents.splice(contentindex, 0, $(newcontent)[0]);

        this.contentindex = math.max(this.contentindex, 0);
        if (this.contentindex === contentindex) {
            this.refreshcurrentcontent();
        }

        this.trigger('added', {
            index: contentindex
        });
    };

    flipbox.prototype.removecontent = function(contentindex) {
        contentindex = math.min(math.max(0, contentindex), this.contents.length);

        this.contents.splice(contentindex, 1);

        if (this.contentindex === contentindex) {
            this.contentindex = math.min(this.contentindex, this.contents.length - 1);
            this.refreshcurrentcontent();
        }

        this.trigger('removed', {
            index: contentindex
        });
    };

    flipbox.prototype.replacecontent = function(newcontent, contentindex) {
        contentindex = contentindex || contentindex === 0 ? contentindex : this.contentindex;
        contentindex = math.min(math.max(0, contentindex), this.contents.length);

        this.contents[contentindex] = $(newcontent)[0];

        if (this.contentindex === contentindex) {
            this.refreshcurrentcontent();
        }

        this.trigger('replaced', {
            index: contentindex
        });
    };

    flipbox.prototype.flip = function(reverse, fromindex, toindex) {
        var _this = this;

        this.trigger('flipping', {
            reverse: reverse,
            currentindex: fromindex,
            nextindex: toindex
        });

        this.$box
            .off('transitionend.' + namespace)
            .one('transitionend.' + namespace, function() {
                _this.trigger('flipped', {
                    reverse: reverse,
                    previndex: fromindex,
                    currentindex: toindex
                });
            });

        if (this.options.vertical) {
            this.rotation += 90 * (reverse ? -1 : 1);
            this.$box.css('transform', 'rotatex(' + this.rotation + 'deg)');
        } else {
            this.rotation -= 90 * (reverse ? -1 : 1);
            this.$box.css('transform', 'rotatey(' + this.rotation + 'deg)');
        }
    };

    flipbox.prototype.getcurrentside = function() {
        var current = (this.rotation / 90) % 4;
        current = current < 0 ? 4 + current :  current;
        if (this.options.vertical) {
            if (current === 0) {
                return this.$front;
            } else if (current === 1) {
                return this.$bottom;
            } else if (current === 2) {
                return this.$back;
            } else {
                return this.$top;
            }
        } else {
            if (current === 0) {
                return this.$front;
            } else if (current === 1) {
                return this.$left;
            } else if (current === 2) {
                return this.$back;
            } else {
                return this.$right;
            }
        }
    };

    flipbox.prototype.getnextside = function(reverse) {
        var current = (this.rotation / 90) % 4;
        current = current < 0 ? 4 + current :  current;
        if (this.options.vertical) {
            if (current === 0) {
                return reverse ? this.$top : this.$bottom;
            } else if (current === 1) {
                return reverse ? this.$front : this.$back;
            } else if (current === 2) {
                return reverse ? this.$bottom : this.$top;
            } else {
                return reverse ? this.$back : this.$front;
            }
        } else {
            if (current === 0) {
                return reverse ? this.$left : this.$right;
            } else if (current === 1) {
                return reverse ? this.$back : this.$front;
            } else if (current === 2) {
                return reverse ? this.$right : this.$left;
            } else {
                return reverse ? this.$front : this.$back;
            }
        }
    };

    flipbox.prototype.toggleautoplay = function(autoplay) {
        clearinterval(this.autoplaytimer);
        if (autoplay) {
            var _this = this;
            this.autoplaytimer = setinterval(function() {
                _this.next(_this.options.autoplayreverse);
            }, this.options.autoplaywaitduration);
        }
    };

    flipbox.prototype.next = function(reverse) {
        this.displaycontent(this.contentindex + 1 < this.contents.length ? this.contentindex + 1 : 0, reverse);
    };

    flipbox.prototype.prev = function(reverse) {
        this.displaycontent(this.contentindex > 0 ? this.contentindex - 1 : this.contents.length - 1, reverse);
    };

    flipbox.prototype.jump = function(index, reverse) {
        this.displaycontent(math.min(math.max(index, 0), this.contents.length - 1), reverse);
    };

    flipbox.prototype.trigger = function(name, data) {
        this.$element.trigger(name, data);
    };

    $.fn.flipbox = function(options) {
        var args = arguments;
        if (options === 'size') {
            return $(this).data(namespace).contents.length;
        } else if (options === 'current') {
            return $(this).data(namespace).contentindex;
        } else {
            return this.each(function() {
                var $element = $(this);
                var flipbox = $element.data(namespace);

                if (options === 'destroy') {
                    flipbox.destroy();
                    $element.data(namespace, null);
                } else if (options === 'next') {
                    flipbox.next(args[1]);
                } else if (options === 'prev') {
                    flipbox.prev(args[1]);
                } else if (options === 'jump') {
                    flipbox.jump(args[1], args[2]);
                } else if (options === 'add') {
                    flipbox.addcontent(args[1], args[2]);
                } else if (options === 'remove') {
                    flipbox.removecontent(args[1]);
                } else if (options === 'replace') {
                    flipbox.replacecontent(args[1], args[2]);
                } else {
                    if (!flipbox) {
                        flipbox = new flipbox($element, options);
                        $element.data(namespace, flipbox);
                    } else {
                        flipbox.config(options);
                        flipbox.update();
                    }
                }
            });
        }
    };

})(jquery);