/**
 Image editable input.
 **/
(function ($) {
    "use strict";

    var Image = function (options) {
        this.init('image', options, Image.defaults);

        if ('on_error' in options.image) {
            this.on_error = options.image['on_error'];
            delete options.image['on_error']
        }
        if ('on_success' in options.image) {
            this.on_success = options.image['on_success'];
            delete options.image['on_success']
        }
        if ('max_size' in options.image) {
            this.max_size = options.image['max_size'];
            delete options.image['max_size']
        }

        this.initImage(options, Image.defaults);
    };

    //inherit from Abstract input
    $.fn.editableutils.inherit(Image, $.fn.editabletypes.abstractinput);

    $.extend(Image.prototype, {
        initImage: function (options, defaults) {
            this.options.image = $.extend({}, defaults.image, options.image);
            this.name = this.options.image.name || 'editable-image-input';
        },

        /**
         Renders input from tpl

         @method render()
         **/
        render: function () {
            var self = this;
            this.$input = this.$tpl.find('input[type=hidden]:eq(0)');
            this.$file = this.$tpl.find('input[type=file]:eq(0)');

            this.$file.attr({'name': this.name});
            this.$input.attr({'name': this.name + '-hidden'});


            this.options.image.before_change = this.options.image.before_change || function (files, dropped) {
                var file = files[0];
                if (typeof file === "string") {
                    //files is just a file name here (in browsers that don't support FileReader API)
                    if (!(/\.(jpe?g|png|gif)$/i).test(file)) {
                        if (self.on_error) self.on_error(1);
                        return false;
                    }
                }
                else {//file is a File object
                    var type = $.trim(file.type);
                    if (( type.length > 0 && !(/^image\/(jpe?g|png|gif)$/i).test(type) )
                        || ( type.length == 0 && !(/\.(jpe?g|png|gif)$/i).test(file.name) )//for android default browser!
                        ) {
                        if (self.on_error) self.on_error(1);
                        return false;
                    }
                    if (self.max_size && file.size > self.max_size) {
                        if (self.on_error) self.on_error(2);
                        return false;
                    }
                }

                if (self.on_success) self.on_success();
                return true;
            }
            this.options.image.before_remove = this.options.image.before_remove || function () {
                self.$input.val(null);
                return true;
            }

            this.$file.ace_file_input(this.options.image).on('change',function () {
                var $rand = (self.$file.val() || self.$file.data('ace_input_files')) ? Math.random() + "" + (new Date()).getTime() : null;
                self.$input.val($rand)//set a random value, so that selected file is uploaded each time, even if it's the same file, because inline editable plugin does not update if the value is not changed!
            }).closest('.ace-file-input').css({'width': '150px'}).closest('.editable-input').addClass('editable-image');
        }

    });


    Image.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        tpl: '<span><input type="hidden" /></span><span><input type="file" /></span>',
        inputclass: '',
        image: {
            style: 'well',
            btn_choose: 'Change Image',
            btn_change: null,
            no_icon: 'icon-picture',
            thumbnail: 'large'
        }
    });

    $.fn.editabletypes.image = Image;

}(window.jQuery));


//Wysiwyg
(function ($) {
    "use strict";

    var Wysiwyg = function (options) {
        this.init('wysiwyg', options, Wysiwyg.defaults);

        //extend wysiwyg manually as $.extend not recursive 
        this.options.wysiwyg = $.extend({}, Wysiwyg.defaults.wysiwyg, options.wysiwyg);
    };

    $.fn.editableutils.inherit(Wysiwyg, $.fn.editabletypes.abstractinput);

    $.extend(Wysiwyg.prototype, {
        render: function () {
            this.$editor = this.$input.nextAll('.wysiwyg-editor:eq(0)');

            this.$tpl.parent().find('.wysiwyg-editor').show().ace_wysiwyg({
                toolbar: [
                    'font',
                    null,
                    'fontSize',
                    null,
                    {name: 'bold', className: 'btn-info'},
                    {name: 'italic', className: 'btn-info'},
                    {name: 'underline', className: 'btn-info'},
                    null,
                    {name: 'insertunorderedlist', className: 'btn-success'},
                    {name: 'outdent', className: 'btn-purple'},
                    {name: 'indent', className: 'btn-purple'},
                    null,
                    {name: 'justifyleft', className: 'btn-primary'},
                    {name: 'justifycenter', className: 'btn-primary'},
                    {name: 'justifyright', className: 'btn-primary'},
                    {name: 'justifyfull', className: 'btn-inverse'},
                    null,
                    {name: 'createLink', className: 'btn-pink'},
                    {name: 'unlink', className: 'btn-pink'},
                    null,
                    null,
                    'foreColor',
                    null,
                    {name: 'undo', className: 'btn-grey'},
                    {name: 'redo', className: 'btn-grey'}
                ],
                speech_button: false
            }).prev().addClass('wysiwyg-style2')
                .closest('.editable-input').addClass('editable-wysiwyg')
                .closest('.editable-container').css({'display': 'block'});//if display is inline-block, putting large images inside the editor will expand it out of bounding box!

            if (this.options.wysiwyg && this.options.wysiwyg.css)
                this.$tpl.closest('.editable-wysiwyg').css(this.options.wysiwyg.css);
        },


        value2html: function (value, element) {
            $(element).html(value);
            return false;
        },

        html2value: function (html) {
            return html;
        },

        value2input: function (value) {
            this.$editor.html(value);
        },
        input2value: function () {
            return this.$editor.html();
        },

        activate: function () {
            //this.$editor.focus().get(0).setSelectionRange(200,200);
        }
    });


    Wysiwyg.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        tpl: '<input type="hidden" /><div class="wysiwyg-editor"></div>',
        inputclass: 'editable-wysiwyg',
        wysiwyg: {

        }
    });

    $.fn.editabletypes.wysiwyg = Wysiwyg;

}(window.jQuery));


/**
 Spinner editable input.
 **/
(function ($) {
    "use strict";

    var Spinner = function (options) {
        this.init('spinner', options, Spinner.defaults);
        this.initSpinner(options, Spinner.defaults);
    };

    //inherit from Abstract input
    $.fn.editableutils.inherit(Spinner, $.fn.editabletypes.abstractinput);

    $.extend(Spinner.prototype, {
        initSpinner: function (options, defaults) {
            this.options.spinner = $.extend({}, defaults.spinner, options.spinner);
        },

        /**
         Renders input from tpl

         @method render()
         **/
        render: function () {
        },

        /**
         Activates input: sets focus on the first field.

         @method activate()
         **/
        activate: function () {
            if (this.$input.is(':visible')) {
                this.$input.focus();
                $.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);

                var val = parseInt(this.$input.val());
                var options = $.extend({value: val}, this.options.spinner);
                this.$input.ace_spinner(options);
            }
        },

        /**
         Attaches handler to submit form in case of 'showbuttons=false' mode

         @method autosubmit()
         **/
        autosubmit: function () {
            this.$input.keydown(function (e) {
                if (e.which === 13) {
                    $(this).closest('form').submit();
                }
            });
        }
    });

    Spinner.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        tpl: '<input type="text" />',
        inputclass: '',
        spinner: {
            min: 0,
            max: 100,
            step: 1,
            icon_up: 'icon-plus',
            icon_down: 'icon-minus',
            btn_up_class: 'btn-success',
            btn_down_class: 'btn-danger'
        }
    });

    $.fn.editabletypes.spinner = Spinner;

}(window.jQuery));


/**
 Slider editable input.
 **/
(function ($) {
    "use strict";

    var Slider = function (options) {
        this.init('slider', options, Slider.defaults);
        this.initSlider(options, Slider.defaults);
    };

    //inherit from Abstract input
    $.fn.editableutils.inherit(Slider, $.fn.editabletypes.abstractinput);

    $.extend(Slider.prototype, {
        initSlider: function (options, defaults) {
            this.options.slider = $.extend({}, defaults.slider, options.slider);
        },

        /**
         Renders input from tpl

         @method render()
         **/
        render: function () {
        },
        /**
         Activates input: sets focus on the first field.

         @method activate()
         **/
        activate: function () {
            if (this.$input.is(':visible')) {
                this.$input.focus();
                $.fn.editableutils.setCursorPosition(this.$input.get(0), this.$input.val().length);

                var self = this;
                var val = parseInt(this.$input.val());
                var width = this.options.slider.width || 200;
                var options = $.extend(this.options.slider, {
                    value: val,
                    slide: function (event, ui) {
                        var val = parseInt(ui.value);
                        self.$input.val(val);

                        if (ui.handle.firstChild == null) {/* no tooltips attached to it */
                            $(ui.handle).append("<div class='tooltip top in' style='display:none;top:-38px;left:-5px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>");
                        }
                        $(ui.handle.firstChild).show().children().eq(1).text(val);
                    }
                });

                this.$input.parent().addClass('editable-slider').css('width', width + 'px').slider(options);
            }
        },

        value2html: function (value, element) {
        },

        /**
         Attaches handler to submit form in case of 'showbuttons=false' mode

         @method autosubmit()
         **/
        autosubmit: function () {
            this.$input.keydown(function (e) {
                if (e.which === 13) {
                    $(this).closest('form').submit();
                }
            });
        }
    });

    Slider.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        tpl: '<input type="text" /><span class="inline ui-slider-green"><span class="slider-display"></span></span>',
        inputclass: '',
        slider: {
            min: 1,
            max: 100,
            step: 1,
            range: "min"
        }
    });

    $.fn.editabletypes.slider = Slider;

}(window.jQuery));