Ext.ns('Hdv.lot.toolbar');

Hdv.lot.toolbar.Panel = Ext.extend(Ext.Panel, {

    modeList: 'list',

    modePhoto: 'photos',

    cssMode : 'vacation-selector-mode-{0}-{1}',

    getVacationPanel: function() {
        return this.getComponent(0);
    },

    onSearchFieldKeyPress: function(field, e) {
        var code = e.getCharCode();
        if (code == e.ENTER) {
            this.sendSearch(field.getValue());
        }
    },

    getWebPath: function(params, file) {
        var qstring = this.queryUrl;
        if (qstring.q !== 'undefined') {
            delete qstring.q;
        }
        var new_qstring = Ext.apply(qstring, params || {});
        return file + '?' + Ext.urlEncode(new_qstring);
    },

    changeMode: function(type) {
        //this.btnModes.setIconClass(String.format(this.cssMode, type, 'large'));
        this.btnModes.setIconClass('action-loading');
        document.location.href = this.getWebPath({mode: type}, this.config.file_current);
    },

    sendSearch: function(value) {
        this.btnSearch.setIconClass('action-loading');
        document.location.href = this.getWebPath({search: value}, this.config.file_searchresults);
    },

    initTbar: function() {
        var url = Ext.urlDecode(this.config.query_string_current);
        var toolbar = [];
        if (!this.config.hideSearch) {
            toolbar.push({
                text   : this.config.wording.lot_toolbar_button_search,
                scale  : 'large',
                iconCls: 'vacation-selector-search',
                ref  : '../btnSearch',
                scope  : this,
                handler: function(){
                    this.sendSearch(this.fieldSearch.getValue());
                }
            },{
                xtype: 'textfield',
                value: url.search,
                ref  : '../fieldSearch',
                enableKeyEvents: true,
                listeners: {
                    keyup: {scope: this, fn: this.onSearchFieldKeyPress}
                }
            });
        }
        toolbar.push(
        '->',
        {
            text   : this.config.wording.lot_toolbar_button_modes,
            scale  : 'large',
            iconCls: 'vacation-selector-mode-' + this.config.mode + '-large',
            ref    : '../btnModes',
            menu   : {
                xtype : 'menu',
                plain : true,
                scale : 'small',
                items: [{
                    text   : this.config.wording.lot_toolbar_button_modes_list,
                    iconCls: String.format(this.cssMode, this.modeList, 'small'),
                    ref    : '../../btnModeList',
                    scope  : this,
                    handler: function(){
                        this.changeMode(this.modeList);
                    }
                },{
                    text: this.config.wording.lot_toolbar_button_modes_photo,
                    iconCls: String.format(this.cssMode, this.modePhoto, 'small'),
                    ref    : '../../btnModeList',
                    scope  : this,
                    handler: function(){
                        this.changeMode(this.modePhoto);
                    }
                }]
            }
        },{
            text   : this.config.wording.lot_toolbar_button_collapse,
            iconCls: 'vacation-selector-collapse',
            scale  : 'large',
            hidden : !this.config.showVacations,
            ref    : '../btnCollapse',
            scope  : this,
            handler: function() {
                var v = this.getVacationPanel();
                if (v.collapsed) {
                    this.btnCollapse.setText(this.config.wording.lot_toolbar_button_collapse);
                    this.queryUrl.dv = 1;
                } else {
                    this.btnCollapse.setText(this.config.wording.lot_toolbar_button_expand);
                    this.queryUrl.dv = 0;
                }
                v.toggleCollapse();
            }
        });
        return toolbar;
    },
    
    initComponent: function() {
        var cfg = {html: ''};
        if (this.config.el) {
            var n = this.config.el;
            var o = Ext.get(n);
            cfg = {
                contentEl : n,
                height    : o.getHeight()
            }
        }

        this.queryUrl = Ext.urlDecode(this.config.query_string_current);

        Ext.apply(this, {
            width      : '100%',
            border     : false,
            renderTo   : this.config.renderTo,
            layout     : 'fit',
            items: [Ext.apply({
                xtype     : 'panel',
                border    : false
            }, cfg)],
            tbar: this.initTbar()
        });

        Hdv.lot.toolbar.Panel.superclass.initComponent.call(this);

        this.on({
            afterrender: {scope: this, single: true, fn: function(){
                return;
                var v = this.getVacationPanel();
                if (this.queryUrl.dv == 0) {
                    this.btnCollapse.setText(this.config.wording.lot_toolbar_button_collapse);
                } else {
                    this.btnCollapse.setText(this.config.wording.lot_toolbar_button_expand);
                }
                v.toggleCollapse();
            }}
        });
    }
    
});