(function ($) {

    /**
    @class iconBrowserBox
    @namespace $
    **/
    $.fn.iconBrowserBox = function (options) {

        var 

        inner = {

            init: function (options) {

                this.options = $.extend({
                    wrapperCss: null,
                    width: 300,
                    editable: true,
                    click: null
                }, options);

                this.init_popUpBox();

                this.setIconHint();

                this.registerEventHandlers();

            },

            get_element: function () {
                return this.options.element;
            },

            init_popUpBox: function () {

                this.options.element.popUpBox({
                    width: this.options.width,
                    click: $.proxy(this.button_onClick, this)
                });

                this.options.element.addClass("pd-iconbox-txt");

                this.options.element.css({
                    paddingLeft: "22px"
                });

            },

            button_onClick: function (e) {
                
                PDJS.Shared.Dialogs.IconBrowserDialog.open({
                    callbacks: {
                        ok: _.bind(function (sender, data) {

                            this.options.element.val(data.value);
                            this.options.element.change();
                            this.setIconHint();

                        }, this)
                    }
                });

            },

            textBox_onBlur: function (e) {
                this.setIconHint();
            },

            setIconHint: function () {

                var value = $.trim(this.get_element().val());

                if (value.length > 0) {
                    this.options.element.css({
                        backgroundImage: "url(" + ProspectDirector.RUNTIME.resolveUrl("~/application/icons/16x16/") + value + ")"
                    });
                }
                else {
                    this.options.element.css({
                        backgroundImage: ""
                    });
                }

            },

            registerEventHandlers: function () {

                this.get_element().on("blur", $.proxy(this.textBox_onBlur, this));

            }

        };

        options = $.extend({
        }, options);

        options.element = this;

        inner.init(options);

        this.data("iconBrowserBox", inner);

    };

})(jQuery);
