(function ($) {

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

        var 

        inner = {

            init: function (options) {

                this.options = $.extend({
                    wrapperCss: null,
                    readOnly: false,
                    click: null,
                    focus: null,
                    keydown: null
                }, options);

                this.init_element();
                this.init_button();

                this.registerEventHandlers();

            },

            //---------------------------
            //--- PROPERTIES
            //---------------------------

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

            get_wrapper: function () {
                return this.get_element().parent();
            },

            get_button: function () {
                return this.get_wrapper().find("[type=button]");
            },

            //---------------------------
            //--- INITIALIZATION METHODS
            //---------------------------

            init_element: function () {

                var width = this.getStylizedWidth();

                this.get_element().css({
                    width: ""
                });

                this.get_element().wrap("<span class=\"pd-popbox\" style=\"width:" + (width !== null ? width : "100%") + "\"></span>").wrap("<span class=\"pd-popbox-wrap\"></span>");
                this.get_element().after("<input type=\"button\" class=\"pd-popbox-button\" />");
                this.get_element().addClass("pd-popbox-input");

                if (this.options.wrapperCss !== null) {
                    this.get_wrapper().css(this._options.wrapperCss);
                }

                if (this.options.readOnly) {
                    this.get_element().attr("readonly", "readonly");
                }

            },

            init_button: function () {

                this.get_button().attr("title", "Select...");
                this.get_button().val("...");

            },

            //---------------------------
            //--- EVENT HANDLERS
            //---------------------------

            button_onClick: function (e) {
                this.options.click(e);
            },

            input_onFocus: function (e) {
                this.options.focus(e);
            },

            input_onKeyDown: function (e) {
                this.options.keydown(e);
            },

            //---------------------------
            //--- METHODS
            //---------------------------

            registerEventHandlers: function () {

                if ($.isFunction(this.options.click)) {
                    this.get_button().on("click", $.proxy(this.button_onClick, this));
                }

                if ($.isFunction(this.options.focus)) {
                    this.get_element().on("focus", $.proxy(this.input_onFocus, this));
                }

                if ($.isFunction(this.options.keydown)) {
                    this.get_element().on("keydown", $.proxy(this.input_onKeyDown, this));
                }

            },

            getStylizedWidth: function () {

                var width = this.get_element().attr("style"),
                    begin = 0
                    end = 0;

                if (width !== undefined && width.indexOf("width:") >= 0) {
                    begin = width.indexOf("width:") + 6;
                    end = width.indexOf(";", width.indexOf(begin));
                    end = end == -1 ? width.length : end;
                    return width.substring(begin, end);
                }

                return null;

            },

            getValue: function () {
                return this.get_element().val();
            }

        };

        options = $.extend({
            element: this
        }, options);

        inner.init(options);

        this.data("popUpBox", inner);

    };

})(jQuery);
