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

/**
@class SearchBox
@namespace Web.UI.Controls
@constructor
**/
ProspectDirector.Web.UI.Controls.SearchBox = ProspectDirector.Web.UI.Controls.Control.extend({

    _searchIcon: null,
    _cancelIcon: null,

    //===================================
    // CONSTRUCTOR
    //===================================

    init: function (options) {
        this._super(options);

        this._searchIcon = this.resolveUrl("~/application/icons/misc/ICON_SEARCH_16X16.GIF");
        this._cancelIcon = this.resolveUrl("~/application/icons/misc/CANCEL.PNG");

        this.setDomNode("<div class=\"-pd-ctrl-searchbox\"><input type=\"text\" data-watermark=\"Search...\"/><button data-action=\"search\"><img src=\"" + this._searchIcon + "\"/></button></div>");
        this.render();

        this._init_textBox();
        this._init_button();

    },

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

    get_textBox: function () {
        return this.get_container().find("INPUT");
    },

    get_button: function () {
        return this.get_container().find("BUTTON");
    },

    //===================================
    // INITIALIZERS
    //===================================

    _init_textBox: function () {
        this.get_textBox().attr("maxlength", "50");
        this.get_textBox().on("keypress", $.proxy(this._textBox_onKeyPress, this));
        this.get_textBox().on("blur", $.proxy(this._textBox_onBlur, this));
        this.get_textBox().on("focus", $.proxy(this._textBox_onFocus, this));
        this._addWatermark();
    },

    _init_button: function () {
        this.get_button().on("click", $.proxy(this._button_onClick, this));
    },

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

    _button_onClick: function () {
        this._trigger(this.get_button().attr("data-action"));
    },

    _textBox_onKeyPress: function (e) {
        if (e.which === 13) {
            this._trigger("search");
            e.preventDefault();
        }
    },

    _textBox_onFocus: function (e) {
        if (this._isWatermarked()) {
            this._removeWatermark();
        }
    },

    _textBox_onBlur: function (e) {
        if ($.trim(this.get_textBox().val()) === "") {
            this._addWatermark();
        }
    },

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

    getValue: function () {

        var result = "";

        if (!this._isWatermarked()) {
            result = $.trim(this.get_textBox().val());
        }

        return result;

    },

    //===================================
    // PRIVATE METHODS
    //===================================

    _isWatermarked: function () {
        return this.get_textBox().val() === this.get_textBox().data("watermark");
    },

    _addWatermark: function () {
        this.get_textBox().val(this.get_textBox().data("watermark"));
        this.get_textBox().addClass("-pd-ctrl-watermark");
    },

    _removeWatermark: function () {
        this.get_textBox().val("");
        this.get_textBox().removeClass("-pd-ctrl-watermark");
    },

    _trigger: function (action) {

        if (action === "search") {
            this._search();
        }
        else {
            this._cancel();
        }

    },

    _search: function () {

        var value = this.getValue();

        this.get_button().find("IMG").attr("src", this._cancelIcon);
        this.get_button().attr("data-action", "cancel");

        if ($.isFunction(this.get_options().search)) {
            this.get_options().search(this, {
                value: value
            });
        }

        if (value.length === 0) {
            this._cancel();
            this.get_button().focus();
        }

    },

    _cancel: function () {

        this.get_button().find("IMG").attr("src", this._searchIcon);
        this.get_button().attr("data-action", "search");
        this.get_textBox().val("");

        if ($.isFunction(this.get_options().cancel)) {
            this.get_options().cancel(this, {});
            this._addWatermark();
        }

    }

});