/**
 * 搜索控件
 *
 *      @example
 *      var $anchor = $('<div>').css({
 *          position : 'absolute',
 *          top : 5,
 *          left : 5,
 *          width : 300,
 *          height : 300
 *      }).appendTo('body');
 *      var search = FR.createWidget({
 *          renderEl : $anchor,
 *          type : 'search'
 *      });
 *
 * @class FR.Search
 * @extends FR.EditCompBaseEditor
 *
 * @cfg {JSON} options 配置属性
 * @cfg {Number} [options.width=164] 宽度
 * @cfg {Number} [options.height=28] 高度
 * @cfg {String} [options.watermark] 水印
 * @cfg {Function} [options.onSearch] 搜索事件
 * @cfg {Boolean} [options.advanced] 是否为带有下拉条件筛选的高级搜索
 * @cfg {Boolean} [options.autoSearch] 是否自动搜索
 */
FR.Search = FR.extend(FR.EditCompBaseEditor, {
    _defaultConfig: function () {
        return $.extend(FR.Search.superclass._defaultConfig.apply(), {
            baseCls: 'fr-search',
            width : 164,
            height : 28, //固定高度,搜索按钮的高度
            width4searchBtn: 44,  //固定宽度,搜索按钮的宽度,
            defaultValue: null,  //默认值
            watermark: null,  //水印
            onSearch: null,  //搜索事件
            advanced: false,  //带有下拉条件筛选的高级搜索
            onTrigger: null,
            autoSearch: false, //是否自动搜索
            onKeyup: null,
            onFocus: null,
            onBlur: null,
            onEnter: null
        });
    },

    _init: function () {
        FR.Search.superclass._init.apply(this, arguments);
        var opts = this.options;
        this._initEditComp();
        if(!opts.autoSearch){
            this._createTriggerBtn();
            this.searchButton = this._createSearchBtn(this.element);
        }
        this.doResize(opts);
    },

    /**
     * 初始化搜索输入框及其绑定事件
     * @private
     */
    _initEditComp: function(){
        var opts = this.options,self = this;
        this.editComp = $("<input/>").appendTo(this.element);
        if(opts.watermark){
            this.setWaterMark(opts.watermark);
        }
        if(opts.defaultValue){
            this.editComp.val(opts.defaultValue).data('defaultValue', opts.defaultValue);
        }
        if(opts.autoSearch){
            this.editComp.addClass("fr-search-auto-text");
        }else{
            this.editComp.addClass("fr-search-editor-text");
        }
        this.editComp.keyup(function(e) {
                if (e.keyCode == FR.keyCode.ENTER) {
                    this.blur();
                    if(opts.onSearch){
                        opts.onSearch.apply(self, arguments);
                    }
                }
            });
        this.editComp.focus(function(e){
            $(this).addClass("fr-search-editor-focus");
            FR.applyFunc(self, opts.onFocus, [e], false);
        }).blur(function(e){
            $(this).removeClass("fr-search-editor-focus");
            FR.applyFunc(self, opts.onBlur, [e], false);
        }).keyup(function(e){
            if (e.keyCode == FR.keyCode.ENTER) {
                this.blur();
                if(opts.onSearch){
                    FR.applyFunc(self, opts.onSearch, [e], false);
                }
            }else{
                FR.applyFunc(self, opts.onKeyup, [e], false);
            }
        });
    },

    /**
     * 生成高级搜索的下拉按钮
     * @private
     */
    _createTriggerBtn: function(){
        var self = this, o = this.options;
        if(!o.advanced){
            return;
        }else{
            this.editComp.css({'border-right': 'none'});
            $('<div class="fr-search-trigger"/>').hover(
                function(){
                    $(this).addClass('fr-search-trigger-hover');
                },
                function(){
                    $(this).removeClass('fr-search-trigger-hover');
                }
            ).click(
                    function(){
                        FR.applyFunc(self, o.onTrigger, arguments, false);
                    }
                ).appendTo(this.element);
        }
    },

    /**
     * 生成搜索按钮
     * @param renderer {jQuery} 渲染DOM对象
     * @returns {*} 返回按钮的DOM对象
     * @private
     */
    _createSearchBtn: function(renderer){
        var opts = this.options, self = this;
        var config = {
            renderEl : $('<div/>').appendTo(renderer),
            baseClass: 'fr-search-button',
            width: 44,
            height: 28
        };
        if($.isFunction(opts.onSearch)){
            config.handler = opts.onSearch.createDelegate(self)
        }
        var searchBtn = new FR.IconButton(config);
        return searchBtn.element;
    },

    getText : function() {
        return this.editComp.val();
    },

    setText : function(txt) {
        this.editComp.val(txt);
    },

    getValue : function() {
        return this.getText();
    },

    setValue : function(v) {
        this.setText(v);
    },

    doResize: function(give){
        var o = this.options;
        var editCompWidth = give.width,
            editCompHeight = give.height;

        var fixw = 8, fixh = 4;
        if(o.autoSearch){
            fixw = 27;
        }else {
            editCompWidth -= o.width4searchBtn
        }
        if(o.advanced){
            editCompWidth -= 24;
        }
        if($.support.boxModel){
            editCompWidth -=fixw;
            editCompHeight -=fixh;
        }
        this.editComp.css({
            height: editCompHeight,
            width: editCompWidth
        });
        if ($.browser.msie) {
            this.editComp.css("line-height", editCompHeight + "px");
        }
        this.searchButton && this.searchButton.width(o.width4searchBtn).height(o.height);
    }
});
$.shortcut("search", FR.Search);