Gecko [ midwest-tb.com ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
.mad-root	0 B	-rw-r--r--
lobibox.js	55.61 KB	-rw-r--r--
messageboxes.js	38.06 KB	-rw-r--r--
notifications.js	17.55 KB	-rw-r--r--

Code Editor : lobibox.js

//Author      : @arboshiki
//create lobibox object
var Lobibox = Lobibox || {};
(function () {

Lobibox.counter = 0;
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------

//User can set default properties for prompt in the following way
    //Lobibox.prompt.DEFAULT_OPTIONS = object;
    Lobibox.prompt = function (type, options) {
        return new LobiboxPrompt(type, options);
    };
    //User can set default properties for confirm in the following way
    //Lobibox.confirm.DEFAULT_OPTIONS = object;
    Lobibox.confirm = function (options) {
        return new LobiboxConfirm(options);
    };
    //User can set default properties for progress in the following way
    //Lobibox.progress.DEFAULT_OPTIONS = object;
    Lobibox.progress = function (options) {
        return new LobiboxProgress(options);
    };
    //Create empty objects in order user to be able to set default options in the following way
    //Lobibox.error.DEFAULT_OPTIONS = object;
    //Lobibox.success.DEFAULT_OPTIONS = object;
    //Lobibox.warning.DEFAULT_OPTIONS = object;
    //Lobibox.info.DEFAULT_OPTIONS = object;

Lobibox.error = {};
    Lobibox.success = {};
    Lobibox.warning = {};
    Lobibox.info = {};

//User can set default properties for alert in the following way
    //Lobibox.alert.DEFAULT_OPTIONS = object;
    Lobibox.alert = function (type, options) {
        if (["success", "error", "warning", "info"].indexOf(type) > -1) {
            return new LobiboxAlert(type, options);
        }
    };
    //User can set default properties for window in the following way
    //Lobibox.window.DEFAULT_OPTIONS = object;
    Lobibox.window = function (options) {
        return new LobiboxWindow('window', options);
    };

/**
     * Base prototype for all messageboxes and window
     */
    var LobiboxBase = {
        $type: null,
        $el: null,
        $options: null,
        debug: function () {
            if (this.$options.debug) {
                window.console.debug.apply(window.console, arguments);
            }
        },
        _processInput: function (options) {
            if ($.isArray(options.buttons)) {
                var btns = {};
                for (var i = 0; i < options.buttons.length; i++) {
                    btns[options.buttons[i]] = Lobibox.base.OPTIONS.buttons[options.buttons[i]];
                }
                options.buttons = btns;
            }
            options.customBtnClass = options.customBtnClass ? options.customBtnClass : Lobibox.base.DEFAULTS.customBtnClass;
            for (var i in options.buttons) {
                if (options.buttons.hasOwnProperty(i)) {
                    var btn = options.buttons[i];
                    btn = $.extend({}, Lobibox.base.OPTIONS.buttons[i], btn);
                    if (!btn['class']) {
                        btn['class'] = options.customBtnClass;
                    }
                    options.buttons[i] = btn;
                }
            }
            options = $.extend({}, Lobibox.base.DEFAULTS, options);
            if (options.showClass === undefined) {
                options.showClass = Lobibox.base.OPTIONS.showClass;
            }
            if (options.hideClass === undefined) {
                options.hideClass = Lobibox.base.OPTIONS.hideClass;
            }
            if (options.baseClass === undefined) {
                options.baseClass = Lobibox.base.OPTIONS.baseClass;
            }
            if (options.delayToRemove === undefined) {
                options.delayToRemove = Lobibox.base.OPTIONS.delayToRemove;
            }
            if (!options.iconClass) {
                options.iconClass = Lobibox.base.OPTIONS.icons[options.iconSource][this.$type];
            }
            return options;
        },
        _init: function () {
            var me = this;

me._createMarkup();
            me.setTitle(me.$options.title);
            if (me.$options.draggable && !me._isMobileScreen()) {
                me.$el.addClass('draggable');
                me._enableDrag();
            }
            if (me.$options.closeButton) {
                me._addCloseButton();
            }
            if (me.$options.closeOnEsc) {
                $(document).on('keyup.lobibox', function (ev) {
                    if (ev.which === 27) {
                        me.destroy();
                    }
                });
            }
            if (me.$options.baseClass) {
                me.$el.addClass(me.$options.baseClass);
            }
            if (me.$options.showClass) {
                me.$el.removeClass(me.$options.hideClass);
                me.$el.addClass(me.$options.showClass);
            }
            me.$el.data('lobibox', me);
        },

/**
         * Calculate top, left position based on string keyword
         *
         * @param {string} position "'top', 'center', 'bottom'"
         * @returns {{left: number, top: number}}
         * @private
         */
        _calculatePosition: function (position) {
            var me = this;
            var top;
            if (position === 'top') {
                top = 30;
            } else if (position === 'bottom') {
                top = $(window).outerHeight() - me.$el.outerHeight() - 30;
            } else {
                top = ($(window).outerHeight() - me.$el.outerHeight()) / 2;
            }
            var left = ($(window).outerWidth() - me.$el.outerWidth()) / 2;
            return {
                left: left,
                top: top
            };
        },

_createButton: function (type, op) {
            var me = this;
            var btn = $('<button></button>')
                .addClass(op['class'])
                .attr('data-type', type)
                .html(op.text);
            if (me.$options.callback && typeof me.$options.callback === 'function') {
                btn.on('click.lobibox', function (ev) {
                    var bt = $(this);
                    me._onButtonClick(me.$options.buttons[type], type);
                    me.$options.callback(me, bt.data('type'), ev);
                });
            }
            btn.click(function () {
                me._onButtonClick(me.$options.buttons[type], type);
            });
            return btn;
        },

_onButtonClick: function (buttonOptions, type) {
            var me = this;

if ((type === 'ok' && me.$type === 'prompt' && me.isValid() || me.$type !== 'prompt' || type !== 'ok')
                && buttonOptions && buttonOptions.closeOnClick) {
                me.destroy();
            }
        },

_generateButtons: function () {
            var me = this;
            var btns = [];
            for (var i in me.$options.buttons) {
                if (me.$options.buttons.hasOwnProperty(i)) {
                    var op = me.$options.buttons[i];
                    var btn = me._createButton(i, op);
                    btns.push(btn);
                }
            }
            return btns;
        },
        _createMarkup: function () {
            var me = this;
            var lobibox = $('<div class="lobibox"></div>');
            lobibox.attr('data-is-modal', me.$options.modal);
            var header = $('<div class="lobibox-header"></div>')
                .append('<span class="lobibox-title"></span>')
                ;
            var body = $('<div class="lobibox-body"></div>');
            lobibox.append(header);
            lobibox.append(body);
            if (me.$options.buttons && !$.isEmptyObject(me.$options.buttons)) {
                var footer = $('<div class="lobibox-footer"></div>');
                footer.append(me._generateButtons());
                lobibox.append(footer);
                if (Lobibox.base.OPTIONS.buttonsAlign.indexOf(me.$options.buttonsAlign) > -1) {
                    footer.addClass('text-' + me.$options.buttonsAlign);
                }
            }
            me.$el = lobibox
                .addClass(Lobibox.base.OPTIONS.modalClasses[me.$type])
            ;
        },
        _setSize: function () {
            var me = this;
            me.setWidth(me.$options.width);
            if (me.$options.height === 'auto') {
                me.setHeight(me.$el.outerHeight());
            } else {
                me.setHeight(me.$options.height);
            }
        },
        _calculateBodyHeight: function (height) {
            var me = this;
            var headerHeight = me.$el.find('.lobibox-header').outerHeight();
            var footerHeight = me.$el.find('.lobibox-footer').outerHeight();
            return height - (headerHeight ? headerHeight : 0) - (footerHeight ? footerHeight : 0);

/**
         * Add backdrop in case if backdrop does not exist
         *
         * @private
         */
        _addBackdrop: function () {
            if ($('.lobibox-backdrop').length === 0) {
                $('body').append('<div class="lobibox-backdrop"></div>');
            }
        },

_triggerEvent: function (type) {
            var me = this;
            if (me.$options[type] && typeof me.$options[type] === 'function') {
                me.$options[type](me);
            }
        },

_calculateWidth: function (width) {
            var me = this;
            width = Math.min(Math.max(width, me.$options.width), $(window).outerWidth());
            if (width === $(window).outerWidth()) {
                width -= 2 * me.$options.horizontalOffset;
            }
            return width;
        },

_calculateHeight: function (height) {
            var me = this;
            console.log(me.$options.height);
            height = Math.min(Math.max(height, me.$options.height), $(window).outerHeight());
            if (height === $(window).outerHeight()) {
                height -= 2 * me.$options.verticalOffset;
            }
            return height;
        },

_addCloseButton: function () {
            var me = this;
            var closeBtn = $('<span class="btn-close">&times;</span>');
            me.$el.find('.lobibox-header').append(closeBtn);
            closeBtn.on('mousedown', function (ev) {
                ev.stopPropagation();
            });
            closeBtn.on('click.lobibox', function () {
                me.destroy();
            });
        },
        _position: function () {
            var me = this;

me._setSize();
            var pos = me._calculatePosition();
            me.setPosition(pos.left, pos.top);
        },
        _isMobileScreen: function () {
            return $(window).outerWidth() < 768;
        },
        _enableDrag: function () {
            var el = this.$el,
                heading = el.find('.lobibox-header');

heading.on('mousedown.lobibox', function (ev) {
                el.attr('offset-left', ev.offsetX);
                el.attr('offset-top', ev.offsetY);
                el.attr('allow-drag', 'true');
            });
            $(document).on('mouseup.lobibox', function () {
                el.attr('allow-drag', 'false');
            });
            $(document).on('mousemove.lobibox', function (ev) {
                if (el.attr('allow-drag') === 'true') {
                    var left = ev.clientX - parseInt(el.attr('offset-left'), 10) - parseInt(el.css('border-left-width'), 10);
                    var top = ev.clientY - parseInt(el.attr('offset-top'), 10) - parseInt(el.css('border-top-width'), 10);
                    el.css({
                        left: left,
                        top: top
                    });
                }
            });
        },

/**
         * Set the message of messagebox
         *
         * @param {string} msg "new message of messagebox"
         * @returns {LobiboxBase}
         * @private
         */
        _setContent: function (msg) {
            var me = this;
            me.$el.find('.lobibox-body').html(msg);
            return me;
        },

_beforeShow: function () {
            var me = this;
            me._triggerEvent('onShow');
        },

_afterShow: function () {
            var me = this;
            Lobibox.counter++;
            me.$el.attr('data-nth', Lobibox.counter);
            if (!me.$options.draggable){
                $(window).on('resize.lobibox-'+me.$el.attr('data-nth'), function(){
                    me.refreshWidth();
                    me.refreshHeight();
                    me.$el.css('left', '50%').css('margin-left', '-'+(me.$el.width()/2)+'px');
                    me.$el.css('top', '50%').css('margin-top', '-'+(me.$el.height()/2)+'px');
                });
            }

me._triggerEvent('shown');
        },

_beforeClose: function () {
            var me = this;
            me._triggerEvent('beforeClose');
        },

_afterClose: function () {
            var me = this;
            if (!me.$options.draggable){
                $(window).off('resize.lobibox-'+me.$el.attr('data-nth'));
            }
            me._triggerEvent('closed');
        },
//------------------------------------------------------------------------------
//--------------------------PUBLIC METHODS--------------------------------------
//------------------------------------------------------------------------------

/**
         * Hide the messagebox
         *
         * @returns {LobiboxBase}
         */
        hide: function () {
            var me = this;
            if (me.$options.hideClass) {
                me.$el.removeClass(me.$options.showClass);
                me.$el.addClass(me.$options.hideClass);
                setTimeout(function () {
                    callback();
                }, me.$options.delayToRemove);
            } else {
                callback();
            }
            function callback() {
                me.$el.addClass('lobibox-hidden');
                if ($('.lobibox[data-is-modal=true]:not(.lobibox-hidden)').length === 0) {
                    $('.lobibox-backdrop').remove();
                    $('body').removeClass(Lobibox.base.OPTIONS.bodyClass);
                }
            }

return this;
        },

/**
         * Removes the messagebox from document
         *
         * @returns {LobiboxBase}
         */
        destroy: function () {
            var me = this;
            me._beforeClose();
            if (me.$options.hideClass) {
                me.$el.removeClass(me.$options.showClass).addClass(me.$options.hideClass);
                setTimeout(function () {
                    callback();
                }, me.$options.delayToRemove);
            } else {
                callback();
            }
            function callback() {
                me.$el.remove();
                if ($('.lobibox[data-is-modal=true]').length === 0) {
                    $('.lobibox-backdrop').remove();
                    $('body').removeClass(Lobibox.base.OPTIONS.bodyClass);
                }
                me._afterClose();
            }

return this;
        },

/**
         * Set the width of messagebox
         *
         * @param {number} width "new width of messagebox"
         * @returns {LobiboxBase}
         */
        setWidth: function (width) {
            var me = this;
            me.$el.css('width', me._calculateWidth(width));
            return me;
        },

refreshWidth: function(){
            this.setWidth(this.$el.width());
        },

refreshHeight: function(){
            this.setHeight(this.$el.height());
        },

/**
         * Set the height of messagebox
         *
         * @param {number} height "new height of messagebox"
         * @returns {LobiboxBase}
         */
        setHeight: function (height) {
            var me = this;
            me.$el.css('height', me._calculateHeight(height))
                .find('.lobibox-body')
                .css('height', me._calculateBodyHeight(me.$el.innerHeight()));
            return me;
        },

/**
         * Set the width and height of messagebox
         *
         * @param {number} width "new width of messagebox"
         * @param {number} height "new height of messagebox"
         * @returns {LobiboxBase}
         */
        setSize: function (width, height) {
            var me = this;
            me.setWidth(width);
            me.setHeight(height);
            return me;
        },

/**
         * Set position of messagebox
         *
         * @param {number|String} left "left coordinate of messsagebox or string representaing position. Available: ('top', 'center', 'bottom')"
         * @param {number} top
         * @returns {LobiboxBase}
         */
        setPosition: function (left, top) {
            var pos;
            if (typeof left === 'number' && typeof top === 'number') {
                pos = {
                    left: left,
                    top: top
                };
            } else if (typeof left === 'string') {
                pos = this._calculatePosition(left);
            }
            this.$el.css(pos);
            return this;
        },
        /**
         * Set the title of messagebox
         *
         * @param {string} title "new title of messagebox"
         * @returns {LobiboxBase}
         */
        setTitle: function (title) {
            return this.$el.find('.lobibox-title').html(title);
        },

/**
         * Get the title of messagebox
         *
         * @returns {string}
         */
        getTitle: function () {
            return this.$el.find('.lobibox-title').html();
        },

/**
         * Show messagebox
         *
         * @returns {LobiboxBase}
         */
        show: function () {
            var me = this,
                $body = $('body');

me._beforeShow();

me.$el.removeClass('lobibox-hidden');
            $body.append(me.$el);
            if (me.$options.buttons) {
                var buttons = me.$el.find('.lobibox-footer').children();
                buttons[0].focus();
            }
            if (me.$options.modal) {
                $body.addClass(Lobibox.base.OPTIONS.bodyClass);
                me._addBackdrop();
            }
            if (me.$options.delay !== false) {
                setTimeout(function () {
                    me.destroy();
                }, me.$options.delay);
            }
            me._afterShow();
            return me;
        }
    };
    //User can set default options by this variable
    Lobibox.base = {};
    Lobibox.base.OPTIONS = {
        bodyClass: 'lobibox-open',

modalClasses: {
            'error': 'lobibox-error',
            'success': 'lobibox-success',
            'info': 'lobibox-info',
            'warning': 'lobibox-warning',
            'confirm': 'lobibox-confirm',
            'progress': 'lobibox-progress',
            'prompt': 'lobibox-prompt',
            'default': 'lobibox-default',
            'window': 'lobibox-window'
        },
        buttonsAlign: ['left', 'center', 'right'],
        buttons: {
            ok: {
                'class': 'lobibox-btn lobibox-btn-default',
                text: 'OK',
                closeOnClick: true
            },
            cancel: {
                'class': 'lobibox-btn lobibox-btn-cancel',
                text: 'Cancel',
                closeOnClick: true
            },
            yes: {
                'class': 'lobibox-btn lobibox-btn-yes',
                text: 'Yes',
                closeOnClick: true
            },
            no: {
                'class': 'lobibox-btn lobibox-btn-no',
                text: 'No',
                closeOnClick: true
            }
        },
        icons: {
            bootstrap: {
                confirm: 'glyphicon glyphicon-question-sign',
                success: 'glyphicon glyphicon-ok-sign',
                error: 'glyphicon glyphicon-remove-sign',
                warning: 'glyphicon glyphicon-exclamation-sign',
                info: 'glyphicon glyphicon-info-sign'
            },
            fontAwesome: {
                confirm: 'fa fa-question-circle',
                success: 'fa fa-check-circle',
                error: 'fa fa-times-circle',
                warning: 'fa fa-exclamation-circle',
                info: 'fa fa-info-circle'
            }
        }
    };
    Lobibox.base.DEFAULTS = {
        horizontalOffset: 5,                //If the messagebox is larger (in width) than window's width. The messagebox's width is reduced to window width - 2 * horizontalOffset
        verticalOffset: 5,                  //If the messagebox is larger (in height) than window's height. The messagebox's height is reduced to window height - 2 * verticalOffset
        width: 600,
        height: 'auto',                     // Height is automatically calculated by width
        closeButton: true,                  // Show close button or not
        draggable: false,                   // Make messagebox draggable
        customBtnClass: 'lobibox-btn lobibox-btn-default', // Class for custom buttons
        modal: true,
        debug: false,
        buttonsAlign: 'center',             // Position where buttons should be aligned
        closeOnEsc: true,                   // Close messagebox on Esc press
        delayToRemove: 200,                 // Time after which lobibox will be removed after remove call. (This option is for hide animation to finish)
        delay: false,                       // Time to remove lobibox after shown
        baseClass: 'animated-super-fast',   // Base class to add all messageboxes
        showClass: 'zoomIn',                // Show animation class
        hideClass: 'zoomOut',               // Hide animation class
        iconSource: 'bootstrap',            // "bootstrap" or "fontAwesome" the library which will be used for icons

//events
        //When messagebox show is called but before it is actually shown
        onShow: null,
        //After messagebox is shown
        shown: null,
        //When messagebox remove method is called but before it is actually hidden
        beforeClose: null,
        //After messagebox is hidden
        closed: null
    };
//------------------------------------------------------------------------------
//-------------------------LobiboxPrompt----------------------------------------
//------------------------------------------------------------------------------
    function LobiboxPrompt(type, options) {
        this.$input = null;
        this.$type = 'prompt';
        this.$promptType = type;

options = $.extend({}, Lobibox.prompt.DEFAULT_OPTIONS, options);

this.$options = this._processInput(options);

this._init();
        this.debug(this);
    }

LobiboxPrompt.prototype = $.extend({}, LobiboxBase, {
        constructor: LobiboxPrompt,

_processInput: function (options) {
            var me = this;

var mergedOptions = LobiboxBase._processInput.call(me, options);
            mergedOptions.buttons = {
                ok: Lobibox.base.OPTIONS.buttons.ok,
                cancel: Lobibox.base.OPTIONS.buttons.cancel
            };
            options = $.extend({}, mergedOptions, LobiboxPrompt.DEFAULT_OPTIONS, options);
            return options;
        },

_init: function () {
            var me = this;
            LobiboxBase._init.call(me);
            me.show();
        },

_afterShow: function () {
            var me = this;
            me._setContent(me._createInput())._position();
            me.$input.focus();
            LobiboxBase._afterShow.call(me);
        },

_createInput: function () {
            var me = this,
                label;
            if (me.$options.multiline) {
                me.$input = $('<textarea></textarea>').attr('rows', me.$options.lines);
            } else {
                me.$input = $('<input type="' + me.$promptType + '"/>');
            }
            me.$input.addClass('lobibox-input').attr(me.$options.attrs);
            if (me.$options.value) {
                me.setValue(me.$options.value);
            }
            if (me.$options.label) {
                label = $('<label>' + me.$options.label + '</label>');
            }
            return $('<div></div>').append(label, me.$input);
        },

/**
         * Set value of input
         *
         * @param {string} val "value of input"
         * @returns {LobiboxPrompt}
         */
        setValue: function (val) {
            this.$input.val(val);
            return this;
        },

/**
         * Get value of input
         *
         * @returns {String}
         */
        getValue: function () {
            return this.$input.val();
        },

isValid: function () {
            var me = this,
                $error = me.$el.find('.lobibox-input-error-message');

if (me.$options.required && !me.getValue()){
                me.$input.addClass('invalid');
                if ($error.length === 0){
                    me.$el.find('.lobibox-body').append('<p class="lobibox-input-error-message">'+me.$options.errorMessage+'</p>');
                    me._position();
                    me.$input.focus();
                }
                return false;
            }
            me.$input.removeClass('invalid');
            $error.remove();
            me._position();
            me.$input.focus();

return true;
        }
    });

LobiboxPrompt.DEFAULT_OPTIONS = {
        width: 400,
        attrs: {},          // Object of any valid attribute of input field
        value: '',          // Value which is given to textfield when messagebox is created
        multiline: false,   // Set this true for multiline prompt
        lines: 3,           // This works only for multiline prompt. Number of lines
        type: 'text',       // Prompt type. Available types (text|number|color)
        label: '',          // Set some text which will be shown exactly on top of textfield
        required: true,
        errorMessage: 'The field is required'
    };
//------------------------------------------------------------------------------
//-------------------------LobiboxConfirm---------------------------------------
//------------------------------------------------------------------------------
    function LobiboxConfirm(options) {
        this.$type = 'confirm';

//        options = $.extend({}, Lobibox.confirm.DEFAULT_OPTIONS, options);

this.$options = this._processInput(options);
        this._init();
        this.debug(this);
    }

LobiboxConfirm.prototype = $.extend({}, LobiboxBase, {
        constructor: LobiboxConfirm,

_processInput: function (options) {
            var me = this;

var mergedOptions = LobiboxBase._processInput.call(me, options);
            mergedOptions.buttons = {
                yes: Lobibox.base.OPTIONS.buttons.yes,
                no: Lobibox.base.OPTIONS.buttons.no
            };
            options = $.extend({}, mergedOptions, Lobibox.confirm.DEFAULTS, options);
            return options;
        },

_init: function () {
            var me = this;

LobiboxBase._init.call(me);
            me.show();
        },

_afterShow: function () {
            var me = this;

var d = $('<div></div>');
            if (me.$options.iconClass) {
                d.append($('<div class="lobibox-icon-wrapper"></div>')
                    .append('<i class="lobibox-icon ' + me.$options.iconClass + '"></i>'))
                ;
            }
            d.append('<div class="lobibox-body-text-wrapper"><span class="lobibox-body-text">' + me.$options.msg + '</span></div>');
            me._setContent(d.html());

me._position();

LobiboxBase._afterShow.call(me);
        }
    });

Lobibox.confirm.DEFAULTS = {
        title: 'Question',
        width: 500
    };
//------------------------------------------------------------------------------
//-------------------------LobiboxAlert------------------------------------------
//------------------------------------------------------------------------------
    function LobiboxAlert(type, options) {
        this.$type = type;

//        options = $.extend({}, Lobibox.alert.DEFAULT_OPTIONS, Lobibox[type].DEFAULT_OPTIONS, options);

this.$options = this._processInput(options);

this._init();
        this.debug(this);
    }

LobiboxAlert.prototype = $.extend({}, LobiboxBase, {
        constructor: LobiboxAlert,

_processInput: function (options) {

//            ALERT_OPTIONS = $.extend({}, LobiboxAlert.OPTIONS, Lobibox.alert.DEFAULTS);
            var me = this;
            var mergedOptions = LobiboxBase._processInput.call(me, options);
            mergedOptions.buttons = {
                ok: Lobibox.base.OPTIONS.buttons.ok
            };

options = $.extend({}, mergedOptions, Lobibox.alert.OPTIONS[me.$type], Lobibox.alert.DEFAULTS, options);

return options;
        },

_init: function () {
            var me = this;
            LobiboxBase._init.call(me);
            me.show();
        },

_afterShow: function () {
            var me = this;

LobiboxBase._afterShow.call(me);
        }
    });
    Lobibox.alert.OPTIONS = {
        warning: {
            title: 'Warning'
        },
        info: {
            title: 'Information'
        },
        success: {
            title: 'Success'
        },
        error: {
            title: 'Error'
        }
    };
    //User can set default options by this variable
    Lobibox.alert.DEFAULTS = {};
//------------------------------------------------------------------------------
//-------------------------LobiboxProgress--------------------------------------
//------------------------------------------------------------------------------
    function LobiboxProgress(options) {
        this.$type = 'progress';
        this.$progressBarElement = null;
        this.$options = this._processInput(options);
        this.$progress = 0;

this._init();
        this.debug(this);
    }

LobiboxProgress.prototype = $.extend({}, LobiboxBase, {
        constructor: LobiboxProgress,

_processInput: function (options) {
            var me = this;
            var mergedOptions = LobiboxBase._processInput.call(me, options);

options = $.extend({}, mergedOptions, Lobibox.progress.DEFAULTS, options);
            return options;
        },

_init: function () {
            var me = this;

LobiboxBase._init.call(me);
            me.show();
        },

_afterShow: function () {
            var me = this;

if (me.$options.progressTpl) {
                me.$progressBarElement = $(me.$options.progressTpl);
            } else {
                me.$progressBarElement = me._createProgressbar();
            }
            var label;
            if (me.$options.label) {
                label = $('<label>' + me.$options.label + '</label>');
            }
            var innerHTML = $('<div></div>').append(label, me.$progressBarElement);
            me._setContent(innerHTML);
            me._position();

LobiboxBase._afterShow.call(me);
        },

_createProgressbar: function () {
            var me = this;
            var outer = $('<div class="lobibox-progress-bar-wrapper lobibox-progress-outer"></div>')
                .append('<div class="lobibox-progress-bar lobibox-progress-element"></div>')
                ;
            if (me.$options.showProgressLabel) {
                outer.append('<span class="lobibox-progress-text" data-role="progress-text"></span>');
            }

return outer;
        },

/**
         * Set progress value
         *
         * @param {number} progress "progress value"
         * @returns {LobiboxProgress}
         */
        setProgress: function (progress) {
            var me = this;
            if (me.$progress === 100) {
                return;
            }
            progress = Math.min(100, Math.max(0, progress));
            me.$progress = progress;
            me._triggerEvent('progressUpdated');
            if (me.$progress === 100) {
                me._triggerEvent('progressCompleted');
            }
            me.$el.find('.lobibox-progress-element').css('width', progress.toFixed(1) + "%");
            me.$el.find('[data-role="progress-text"]').html(progress.toFixed(1) + "%");
            return me;
        },

/**
         * Get progress value
         *
         * @returns {number}
         */
        getProgress: function () {
            return this.$progress;
        }
    });

Lobibox.progress.DEFAULTS = {
        width: 500,
        showProgressLabel: true,  // Show percentage of progress
        label: '',  // Show progress label
        progressTpl: false,  //Template of progress bar

//Events
        progressUpdated: null,
        progressCompleted: null
    };
//------------------------------------------------------------------------------
//-------------------------LobiboxWindow----------------------------------------
//------------------------------------------------------------------------------
    function LobiboxWindow(type, options) {
        this.$type = type;

this.$options = this._processInput(options);

this._init();
        this.debug(this);
    }

LobiboxWindow.prototype = $.extend({}, LobiboxBase, {
        constructor: LobiboxWindow,
        _processInput: function (options) {
            var me = this;
            var mergedOptions = LobiboxBase._processInput.call(me, options);

if (options.content && typeof options.content === 'function') {
                options.content = options.content();
            }
            if (options.content instanceof jQuery) {
                options.content = options.content.clone();
            }
            options = $.extend({}, mergedOptions, Lobibox.window.DEFAULTS, options);
            return options;
        },

_init: function () {
            var me = this;

LobiboxBase._init.call(me);
            me.setContent(me.$options.content);
            if (me.$options.url && me.$options.autoload) {
                if (!me.$options.showAfterLoad) {
                    me.show();
                }
                me.load(function () {
                    if (me.$options.showAfterLoad) {
                        me.show();
                    }
                });
            } else {
                me.show();
            }
        },

_afterShow: function () {
            var me = this;

me._position();

LobiboxBase._afterShow.call(me);
        },

/**
         * Setter method for <code>params</code> option
         *
         * @param {object} params "new params"
         * @returns {LobiboxWindow}
         */
        setParams: function (params) {
            var me = this;
            me.$options.params = params;
            return me;
        },
        /**
         * Getter method for <code>params</code>
         *
         * @returns {object}
         */
        getParams: function () {
            var me = this;
            return me.$options.params;
        },
        /**
         * Setter method of <code>loadMethod</code> option
         *
         * @param {string} method "new method"
         * @returns {LobiboxWindow}
         */
        setLoadMethod: function (method) {
            var me = this;
            me.$options.loadMethod = method;
            return me;
        },
        /**
         * Getter method for <code>loadMethod</code> option
         *
         * @returns {string}
         */
        getLoadMethod: function () {
            var me = this;
            return me.$options.loadMethod;
        },
        /**
         * Setter method of <code>content</code> option.
         * Change the content of window
         *
         * @param {string} content "new content"
         * @returns {LobiboxWindow}
         */
        setContent: function (content) {
            var me = this;
            me.$options.content = content;
            me.$el.find('.lobibox-body').html('').append(content);
            return me;
        },
        /**
         * Getter method of <code>content</code> option
         *
         * @returns {string}
         */
        getContent: function () {
            var me = this;
            return me.$options.content;
        },
        /**
         * Setter method of <code>url</code> option
         *
         * @param {string} url "new url"
         * @returns {LobiboxWindow}
         */
        setUrl: function (url) {
            this.$options.url = url;
            return this;
        },
        /**
         * Getter method of <code>url</code> option
         *
         * @returns {String}
         */
        getUrl: function () {
            return this.$options.url;
        },
        /**
         * Loads content to window by ajax from specific url
         *
         * @param {Function} callback "callback function"
         * @returns {LobiboxWindow}
         */
        load: function (callback) {
            var me = this;
            if (!me.$options.url) {
                return me;
            }
            $.ajax(me.$options.url, {
                method: me.$options.loadMethod,
                data: me.$options.params
            }).done(function (res) {
                me.setContent(res);
                if (callback && typeof callback === 'function') {
                    callback(res);
                }
            });
            return me;
        }
    });

Lobibox.window.DEFAULTS = {
        width: 480,
        height: 600,
        content: '',  // HTML Content of window
        url: '',  // URL which will be used to load content
        draggable: true,  // Override default option
        autoload: true,  // Auto load from given url when window is created
        loadMethod: 'GET',  // Ajax method to load content
        showAfterLoad: true,  // Show window after content is loaded or show and then load content
        params: {}  // Parameters which will be send by ajax for loading content
    };

})();

//Author      : @arboshiki
/**
 * Generates random string of n length.
 * String contains only letters and numbers
 *
 * @param {int} n
 * @returns {String}
 */
Math.randomString = function (n) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for (var i = 0; i < n; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

return text;
};
var Lobibox = Lobibox || {};
(function () {

var LobiboxNotify = function (type, options) {
//------------------------------------------------------------------------------
//----------------PROTOTYPE VARIABLES-------------------------------------------
//------------------------------------------------------------------------------
        this.$type = null;
        this.$options = null;
        this.$el = null;
//------------------------------------------------------------------------------
//-----------------PRIVATE VARIABLES--------------------------------------------
//------------------------------------------------------------------------------        
        var me = this;
//------------------------------------------------------------------------------
//-----------------PRIVATE FUNCTIONS--------------------------------------------
//------------------------------------------------------------------------------
        var _processInput = function (options) {

if (options.size === 'mini' || options.size === 'large') {
                options = $.extend({}, Lobibox.notify.OPTIONS[options.size], options);
            }
            options = $.extend({}, Lobibox.notify.OPTIONS[me.$type], Lobibox.notify.DEFAULTS, options);

if (options.size !== 'mini' && options.title === true) {
                options.title = Lobibox.notify.OPTIONS[me.$type].title;
            } else if (options.size === 'mini' && options.title === true) {
                options.title = false;
            }
            if (options.icon === true) {
                options.icon = Lobibox.notify.OPTIONS.icons[options.iconSource][me.$type];
            }
            if (options.sound === true) {
                options.sound = Lobibox.notify.OPTIONS[me.$type].sound;
            }
            if (options.sound) {
                options.sound = options.soundPath + options.sound + options.soundExt;
            }
            return options;
        };

var _appendInWrapper = function ($el, $wrapper) {
            if (me.$options.size === 'normal') {
                if ($wrapper.hasClass('bottom')) {
                    $wrapper.prepend($el);
                } else {
                    $wrapper.append($el);
                }

} else if (me.$options.size === 'mini') {
                if ($wrapper.hasClass('bottom')) {
                    $wrapper.prepend($el);
                } else {
                    $wrapper.append($el);
                }
            } else if (me.$options.size === 'large') {
                var tabPane = _createTabPane().append($el);
                var $li = _createTabControl(tabPane.attr('id'));
                $wrapper.find('.lb-notify-wrapper').append(tabPane);
                $wrapper.find('.lb-notify-tabs').append($li);
                _activateTab($li);
                $li.find('>a').click(function () {
                    _activateTab($li);
                });
            }
        };
        var _activateTab = function ($li) {
            $li.closest('.lb-notify-tabs').find('>li').removeClass('active');
            $li.addClass('active');
            var $current = $($li.find('>a').attr('href'));
            $current.closest('.lb-notify-wrapper').find('>.lb-tab-pane').removeClass('active');
            $current.addClass('active')
        };
        var _createTabControl = function (tabPaneId) {
            var $li = $('<li></li>', {
                'class': Lobibox.notify.OPTIONS[me.$type]['class']
            });
            $('<a></a>', {
                'href': '#' + tabPaneId
            }).append('<i class="tab-control-icon ' + me.$options.icon + '"></i>')
                .appendTo($li);
            return $li;
        };
        var _createTabPane = function () {
            return $('<div></div>', {
                'class': 'lb-tab-pane',
                'id': Math.randomString(10)
            })
        };
        var _createNotifyWrapper = function () {
            var selector = (me.$options.size === 'large' ? '.lobibox-notify-wrapper-large' : '.lobibox-notify-wrapper')
                    + "." + me.$options.position.replace(/\s/gi, '.'),
                $wrapper;

//var classes = me.$options.position.split(" ");
            $wrapper = $(selector);
            if ($wrapper.length === 0) {
                $wrapper = $('<div></div>')
                    .addClass(selector.replace(/\./g, ' ').trim())
                    .appendTo($('body'));
                if (me.$options.size === 'large') {
                    $wrapper.append($('<ul class="lb-notify-tabs"></ul>'))
                        .append($('<div class="lb-notify-wrapper"></div>'));
                }
            }
            return $wrapper;
        };
        var _createNotify = function () {
            var OPTS = Lobibox.notify.OPTIONS,
                $iconEl,
                $innerIconEl,
                $iconWrapper,
                $body,
                $msg,
                $notify = $('<div></div>', {
                    'class': 'lobibox-notify ' + OPTS[me.$type]['class'] + ' ' + OPTS['class'] + ' ' + me.$options.showClass
                });

$iconWrapper = $('<div class="lobibox-notify-icon-wrapper"></div>').appendTo($notify);
            $iconEl = $('<div class="lobibox-notify-icon"></div>').appendTo($iconWrapper);
            $innerIconEl = $('<div></div>').appendTo($iconEl);

// Add image or icon depending on given parameters
            if (me.$options.img) {
                $innerIconEl.append('<img src="' + me.$options.img + '"/>');
            } else if (me.$options.icon) {
                $innerIconEl.append('<div class="icon-el"><i class="' + me.$options.icon + '"></i></div>');
            } else {
                $notify.addClass('without-icon');
            }
            // Create body, append title and message in body and append body in notification
            $msg = $('<div class="lobibox-notify-msg">' + me.$options.msg + '</div>');

if (me.$options.messageHeight !== false) {
                $msg.css('max-height', me.$options.messageHeight);
            }

$body = $('<div></div>', {
                'class': 'lobibox-notify-body'
            }).append($msg).appendTo($notify);

if (me.$options.title) {
                $body.prepend('<div class="lobibox-notify-title">' + me.$options.title + '<div>');
            }
            _addCloseButton($notify);
            if (me.$options.size === 'normal' || me.$options.size === 'mini') {
                _addCloseOnClick($notify);
                _addDelay($notify);
            }

// Give width to notification
            if (me.$options.width) {
                $notify.css('width', _calculateWidth(me.$options.width));
            }

return $notify;
        };
        var _addCloseButton = function ($el) {
            if (!me.$options.closable) {
                return;
            }
            $('<span class="lobibox-close">&times;</span>').click(function () {
                me.remove();
            }).appendTo($el);
        };
        var _addCloseOnClick = function ($el) {
            if (!me.$options.closeOnClick) {
                return;
            }
            $el.click(function () {
                me.remove();
            });
        };
        var _addDelay = function ($el) {
            if (!me.$options.delay) {
                return;
            }
            if (me.$options.delayIndicator) {
                var delay = $('<div class="lobibox-delay-indicator"><div></div></div>');
                $el.append(delay);
            }
            var time = 0;
            var interval = 1000 / 30;
            var currentTime = new Date().getTime();
            var timer = setInterval(function () {
                if (me.$options.continueDelayOnInactiveTab){
                    time = new Date().getTime() - currentTime;
                } else {
                    time += interval;
                }

var width = 100 * time / me.$options.delay;
                if (width >= 100) {
                    width = 100;
                    me.remove();
                    timer = clearInterval(timer);
                }
                if (me.$options.delayIndicator) {
                    delay.find('div').css('width', width + "%");
                }

}, interval);

if (me.$options.pauseDelayOnHover) {
                $el.on('mouseenter.lobibox', function () {
                    interval = 0;
                }).on('mouseleave.lobibox', function () {
                    interval = 1000 / 30;
                });
            }
        };
        var _findTabToActivate = function ($li) {
            var $itemToActivate = $li.prev();
            if ($itemToActivate.length === 0) {
                $itemToActivate = $li.next();
            }
            if ($itemToActivate.length === 0) {
                return null;
            }
            return $itemToActivate;
        };
        var _calculateWidth = function (width) {
            width = Math.min($(window).outerWidth(), width);
            return width;
        };
//------------------------------------------------------------------------------
//----------------PROTOTYPE FUNCTIONS-------------------------------------------
//------------------------------------------------------------------------------
        /**
         * Delete the notification
         *
         * @returns {LobiboxNotify}
         */
        this.remove = function () {
            me.$el.removeClass(me.$options.showClass)
                .addClass(me.$options.hideClass);
            var parent = me.$el.parent();
            var wrapper = parent.closest('.lobibox-notify-wrapper-large');

var href = '#' + parent.attr('id');

var $li = wrapper.find('>.lb-notify-tabs>li:has(a[href="' + href + '"])');
            $li.addClass(Lobibox.notify.OPTIONS['class'])
                .addClass(me.$options.hideClass);
            setTimeout(function () {
                if (me.$options.size === 'normal' || me.$options.size === 'mini') {
                    me.$el.remove();
                } else if (me.$options.size === 'large') {

if (typeof me.$options.position === 'string') {
                var $wrapper = _createNotifyWrapper();
                _appendInWrapper($notify, $wrapper);
                if ($wrapper.hasClass('center')) {
                    $wrapper.css('margin-left', '-' + ($wrapper.width() / 2) + "px");
                }
            } else {
                $('body').append($notify);
                $notify.css({
                    'position': 'fixed',
                    left: me.$options.position.left,
                    top: me.$options.position.top
                })
            }

me.$el = $notify;
            if (me.$options.sound) {
                var snd = new Audio(me.$options.sound); // buffers automatically when created
                snd.play();
            }
            if (me.$options.rounded) {
                me.$el.addClass('rounded');
            }
            me.$el.on('click.lobibox', function(ev){
                if (me.$options.onClickUrl){
                    window.location.href = me.$options.onClickUrl;
                }
                if (me.$options.onClick && typeof me.$options.onClick === 'function'){
                    me.$options.onClick.call(me, ev);
                }
            });
            me.$el.data('lobibox', me);
        };
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
        this.$type = type;
        this.$options = _processInput(options);
        if (!me.$options.showAfterPrevious || Lobibox.notify.list.length === 0){
            this._init();
        }

};

Lobibox.notify = function (type, options) {
        if (["default", "info", "warning", "error", "success"].indexOf(type) > -1) {
            var lobibox = new LobiboxNotify(type, options);
            Lobibox.notify.list.push(lobibox);
            return lobibox;
        }
    };
    Lobibox.notify.list = [];
    Lobibox.notify.closeAll = function () {
        var list = Lobibox.notify.list;
        for (var i in list){
            list[i].remove();
        }
    };
    //User can set default options to this variable
    Lobibox.notify.DEFAULTS = {
        title: true,                // Title of notification. If you do not include the title in options it will automatically takes its value 
        //from Lobibox.notify.OPTIONS object depending of the type of the notifications or set custom string. Set this false to disable title
        size: 'normal',             // normal, mini, large
        soundPath: 'sounds/',   // The folder path where sounds are located
        soundExt: '.ogg',           // Default extension for all sounds
        showClass: 'fadeInDown',    // Show animation class.
        hideClass: 'zoomOut',       // Hide animation class.
        icon: true,                 // Icon of notification. Leave as is for default icon or set custom string
        msg: '',                    // Message of notification
        img: null,                  // Image source string
        closable: true,             // Make notifications closable
        hideCloseButton: false,     // Notification may be closable but you can hide close button and it will be closed by clicking on notification itsef
        delay: 5000,                // Hide notification after this time (in miliseconds)
        delayIndicator: true,       // Show timer indicator
        closeOnClick: true,         // Close notifications by clicking on them
        width: 400,                 // Width of notification box
        sound: true,                // Sound of notification. Set this false to disable sound. Leave as is for default sound or set custom soud path
        // Place to show notification. Available options: "top left", "top right", "bottom left", "bottom right", "center top", "center bottom"
        // It can also be object {left: number, top: number} to position notification at any place
        position: "bottom right",
        iconSource: 'bootstrap',    // "bootstrap" or "fontAwesome" the library which will be used for icons
        rounded: false,             // Whether to make notification corners rounded
        messageHeight: 60,          // Notification message maximum height. This is not for notification itself, this is for <code>.lobibox-notify-msg</code>
        pauseDelayOnHover: true,    // When you mouse over on notification delay (if it is enabled) will be paused.
        onClickUrl: null,           // The url which will be opened when notification is clicked
        showAfterPrevious: false,   // Set this to true if you want notification not to be shown until previous notification is closed. This is useful for notification queues
        continueDelayOnInactiveTab: true, // Continue delay when browser tab is inactive

// Events
        onClick: null
    };
    //This variable is necessary.
    Lobibox.notify.OPTIONS = {
        'class': 'animated-fast',
        large: {
            width: 500,
            messageHeight: 96
        },
        mini: {
            'class': 'notify-mini',
            messageHeight: 32
        },
        default: {
            'class': 'lobibox-notify-default',
            'title': 'Default',
            sound: false
        },
        success: {
            'class': 'lobibox-notify-success',
            'title': 'Success',
            sound: 'sound2'
        },
        error: {
            'class': 'lobibox-notify-error',
            'title': 'Error',
            sound: 'sound4'
        },
        warning: {
            'class': 'lobibox-notify-warning',
            'title': 'Warning',
            sound: 'sound5'
        },
        info: {
            'class': 'lobibox-notify-info',
            'title': 'Information',
            sound: 'sound6'
        },
        icons: {
            bootstrap: {
                success: 'glyphicon glyphicon-ok-sign',
                error: 'glyphicon glyphicon-remove-sign',
                warning: 'glyphicon glyphicon-exclamation-sign',
                info: 'glyphicon glyphicon-info-sign'
            },
            fontAwesome: {
                success: 'fa fa-check-circle',
                error: 'fa fa-times-circle',
                warning: 'fa fa-exclamation-circle',
                info: 'fa fa-info-circle'
            }
        }
    };
})();

${this.title}

Code Editor : lobibox.js