/// class PD.Web.UI.Controls.SearchBox
/// using PD.Web.UI.Controls.Control

PD.Web.UI.Controls.SearchBox =
PD.Web.UI.Controls.Control.extend({

    //===================================
    // FIELDS
    //===================================

    _isEmpty: null,
    _input: null,
    _label: null,
    _button: null,
    _hasValueClass: "has-value",

    //===================================
    // PROPERTIES
    //===================================

    get_input: function () {
        return this.get_node().find("INPUT");
    },

    get_hasValue: function () {
        return this.get_node().hasClass(this._hasValueClass);
    },

    get_watermark: function () {
        return this.get_options()["watermark"] ? this.get_options()["watermark"] : "Search...";
    },

    //===================================
    // PROTECTED EVENT HANDLERS
    //===================================

    onInit: function () {
        this._isEmpty = true;
    },

    template: function (e) {
        return [
            "<div class='-pd-searchbox'>",
                "<input type='text' />",
                "<button>",
                    "<span></span>",
                "</button>",
                "<label>" + this.get_watermark() + "</label>",
            "</div>",
        ];
    },

    onActivate: function () {

        this._input = this.get_node().find("INPUT");
        this._label = this.get_node().find("LABEL");
        this._button = this.get_node().find("BUTTON");

        this._label.on("click", $.proxy(this._label_onFocus, this));
        this._input.on("blur", $.proxy(this._input_onBlur, this));
        this._input.on("focus", $.proxy(this._input_onFocus, this));
        this._input.on("keyup", $.proxy(this._input_onKeyUp, this));
        this._button.on("click", $.proxy(this._button_onClick, this));
        this._label.show();

    },

    //===================================
    // PRIVATE EVENT HANDLERS
    //===================================

    _label_onFocus: function (e) {
        this._label.hide();
        this._input.focus();
    },

    _input_onFocus: function (e) {
        this._label.hide();
    },

    _input_onBlur: function (e) {
        if (this._input.val() == "") {
            this._label.show();
            if (this.get_hasValue()) {
                this._clearSearch();
            }
        }
    },

    _input_onKeyUp: function (e) {
        if (e.keyCode === 13) {
            e.stopPropagation();
            e.cancelBubble = true;
            e.returnValue = false;
            this._executeSearch();
            return false;
        }
    },

    _button_onClick: function (e) {

        var hasClass = this.get_hasValue();

        if (hasClass) {
            this._clearSearch();
        }
        else {
            this._executeSearch();
        }

    },

    //===================================
    // PUBLIC METHODS
    //===================================

    value: function () {
        return this._input.val()
    },

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

    //===================================
    // PRIVATE METHODS
    //===================================
    
    _clearSearch: function () {
        this._input.val("");
        this._label.show();
        this.get_node().removeClass(this._hasValueClass);
        this._callSearch();
    },

    _executeSearch: function () {
        if (this.value() !== "") {
            this.get_node().addClass(this._hasValueClass);
            this._callSearch();
        }
    },

    _callSearch: function () {
        if (this._options.search) {
            this._options.search(this.value());
        }
    }

});