var SearchPanel = function() {
    var basicTab;
    var advanceTab;
    var basicMap;
    var advanceMap;   
    var searchBasicPanel;
    var searchAdvancePanel;
    
    return {
        Init: function() {                  
            basicTab = Utils.Get('searchBasic');
            advanceTab = Utils.Get('searchAdvance');
            basicMap = Utils.Get('searchBasicMap');
            advanceMap = Utils.Get('searchAdvanceMap'); 
            searchBasicPanel = Utils.Get('searchBasicPanel');
            searchAdvancePanel = Utils.Get('searchAdvancePanel');   
            // bind the on click event
            basicMap.on('click', SearchPanel.OnSearchBasicClick);
            advanceMap.on('click', SearchPanel.OnSearchAdvanceClick);
        },
        
        OnSearchBasicClick: function(event, sender) {
            advanceTab.addClass('hidden');                        
            searchAdvancePanel.addClass('hidden');
            basicTab.removeClass('hidden');
            searchBasicPanel.removeClass('hidden');                  
        },
        
        OnSearchAdvanceClick: function(event, sender) {
            basicTab.addClass('hidden');
            searchBasicPanel.addClass('hidden');
            advanceTab.removeClass('hidden');
            searchAdvancePanel.removeClass('hidden');
        }
    };
}();

Ext.onReady(SearchPanel.Init, this);