/// <reference path="vsdoc.js" />

(function($) {

    $.widget("ui.inputEntry", {

        _init: function() {
            var o = this.options;
            var initialValue = this.element.attr("title");
            var id = this.element.attr("id");
            this.element.addClass("ui-widget ui-state-active ui-corner-all ui-input-entry").attr("title", "").attr("disabled", !o.editable);
            var row = $('<tr></tr>').appendTo(this.element);

            this.leftIconSpan = this._createIcon(row);
            this.setLeftIcon();

            var widget = this;
            var cell = $('<td></td>').appendTo(row);
            this.textBox = $('<input type="' + (o.isPassword ? 'password' : 'text') + '" name="' + id + 'Entry" class="ui-widget ui-input-entry-text"></input>').appendTo(cell).attr("disabled", !o.editable);

            this.textBox.keyup(function() {
                widget._textChange();
            });
            this.textBox.change(function() {
                widget._trigger('textConfirm', null, widget.textBox.val());
                widget._leaveTextBox();
            });
            this.textBox.focus(function() {
                if (widget.options.emptyHint && $(this).hasClass("ui-input-entry-hint")) {
                    $(this).removeClass("ui-input-entry-hint").removeClass("ui-state-disabled");
                    $(this).val("");
                }
            });
            this.textBox.keydown(function(aEvent) {
                var handled = false;

                if (aEvent.keyCode == 13) {
                    widget._trigger('textConfirm', null, widget.textBox.val());
                    handled = true;
                }
                return !handled;
            });

            this.rightIconSpan = this._createIcon(row);
            this.setRightIcon();
            this.value(initialValue);
            this._leaveTextBox();
        },

        _leaveTextBox: function() {
            if (this.options.emptyHint && this.textBox.val().length == 0) {
                this.textBox.addClass("ui-input-entry-hint").addClass("ui-state-disabled");
                this.textBox.val(this.options.emptyHint);
            }
        },

        _textChange: function() {
            this._trigger('textChange', null, this.textBox.val());
        },

        _createIcon: function(aRow) {
            var cell = $('<td class="ui-input-entry-icon ui-corner-all"></td>').appendTo(aRow);
            return $('<span></span>').appendTo(cell);
        },

        setLeftIcon: function() {
            this._setIconStyle(this.leftIconSpan);
        },

        getOption: function(aIcon, aOptionName) {
            return this._getOption(aIcon == 0 ? this.leftIconSpan : this.rightIconSpan, aOptionName);
        },

        setRightIcon: function() {
            this._setIconStyle(this.rightIconSpan);
        },

        clear: function() {
            if (!this.textBox.hasClass("ui-state-disabled") && this.textBox.val().length > 0)
                this.clearForce();
        },

        textBox: function() {
            return this.textBox;
        },

        clearForce: function() {
            this.textBox.val("");
            this._textChange();
            this._leaveTextBox();
        },

        value: function(aNewValue) {
            if (undefined != aNewValue) {
                this.textBox.val(aNewValue);
                this._trigger('textChange', null, aNewValue);
            }

            return this.textBox.val();
        },

        focus: function() {
            this.textbox.focus();
        },

        _getOption: function(aIcon, aOption) {
            var optionName = "this.options." + (aIcon == this.leftIconSpan ? "left" : "right") + "Icon" + aOption;
            return eval(optionName);
        },

        _setData: function(key, value) {
            $.widget.prototype._setData.apply(this, arguments);

            this._setIconStyle(this.leftIconSpan);
            this._setIconStyle(this.rightIconSpan);

            this.textBox.attr("disabled", !this.options.editable);
        },

        _setIconStyle: function(aIcon) {
            aIcon.removeClass();
            aIcon.unbind();

            aIcon.addClass("ui-icon ui-icon-" + this._getOption(aIcon, "Type"));
            var widget = this;

            if (this._getOption(aIcon, "Title"))
                aIcon.attr("title", this._getOption(aIcon, "Title"));

            if (this._getOption(aIcon, "Displayed"))
                aIcon.parent().show();
            else
                aIcon.parent().hide();

            if (this._getOption(aIcon, "Clickable")) {
                aIcon.parent().addClass("ui-state-default");
                aIcon.addClass("ui-input-entry-icon-clickable");
                aIcon.mouseover(function() {
                    $(this.parentNode).addClass("ui-state-hover");
                });
                aIcon.mouseout(function() {
                    $(this.parentNode).removeClass("ui-state-hover");
                });
                aIcon.click(function() {
                    var eventName = (aIcon == widget.leftIconSpan ? "left" : "right") + "IconClick";
                    widget._trigger(eventName, null, {});
                });
            }
            else {
                aIcon.parent().removeClass("ui-state-default");
            }
        },

        destroy: function() {
        }
    });

    $.extend($.ui.inputEntry, {
        version: "0.1.0",
        getter: "value textBox",
        defaults: {
            leftIconDisplayed: false,
            leftIconClickable: false,
            leftIconType: "help",
            rightIconDisplayed: true,
            rightIconClickable: true,
            rightIconType: "help",
            emptyHint: undefined,
            editable: true,
            isPassword: false
        }
    });

})(jQuery);