Ext.ns('DJIndexes');
DJIndexes.SearchPanel = Ext.extend(Ext.Panel, {
	defaultConfig: {
		height: 300,
		layout: 'fit',
		title: 'Search'
	},
	constructor: function(userConfig){
		this.config = Ext.apply(this.defaultConfig, userConfig);
		
		criteria = DJIndexes.Utils.getQueryParams('criteria') || '';
		this.storeAutoLoad = criteria!='' ? true:false;
		
		this.store = new Ext.data.JsonStore({
            url: '/DataService/v4/search.cfm',
            root: 'docs',
            totalProperty: 'total',
            idProperty: 'url',
            method: 'post',
            baseParams: {
                start: 0,
                limit: 10,
                criteria: criteria
            },
            fields: ['title', 'url', 'content', 'includeDetail', 'anchor', 'custom_description', 'detail', 'custom_title', 'custom_keywords', 'custom_navigation'],
            autoLoad:this.storeAutoLoad 
        });

		this.tbar = {
		            xtype: 'form',
		            layout: 'hbox',
		            items: [{
		                xtype: 'textfield',
		                hideLabel: true,
		                name: 'criteria',
		                value:criteria,
		                height: 25,
		                flex: 10,
		                maxLength: 50,
		                maxLengthText: 'Search criteria must be less than 50 characters long',
		                invalidText: 'Please provide valid search criteria',
		                allowBlank: false,
		                minLength: 2,
		                minLengthText: 'Search criteria must be at least 2 characters long',
		                blankText: 'Please provide valid search criteria',
		                tabIndex: 0,
		                bodyStyle: 'background:#D4E1F2'
		            }, {
		                xtype: 'button',
		                text: 'Search',
		                icon: 'http://www.djindexes.com/global-img/icons/silk/zoom.png',
		                height: 25,
		                flex: 5,
		                listeners:{
		                	click: this.submitForm,
			            	scope: this
		                }
		            }, {
		                xtype: 'paging',
		                border: false,
		                store:this.store,
		                flex: 10,
		                height: 25,
		                bodyStyle: 'background:#D4E1F2',
		                pageSize: 14
		            }],
		            bodyStyle: 'background:#F0F0F0; background-image:url("http://www.djindexes.com/global-js/ext/3.4.0/resources/images/gray/toolbar/bg.gif");'
		};
		
		DJIndexes.widget.SearchWindow.superclass.constructor.call(this, this.config);
		
		this.on('afterrender', this.handleOnRender, this);
		
		this.store.on('load', this.onStoreLoad, this);
		
		this.tpl.compile();
				
		this.add([{xtype:'container', cls:'x-window-mc', autoScroll: true}]);
		this.render( this.container );
	},
    
    handleOnRender: function(){
        var resultContainer, dView;
        
        resultContainer = this.getResultContainer();

        if ($ && $.fn.jScrollPane) {
        	
            $('#' + resultContainer.id).jScrollPane({
                showArrows: true
            });
            
            dView = new Ext.DataView({
                store: this.store,
                tpl: this.tpl,
                autoScroll: false,
                itemSelector: 'div.thumb-wrap',
                renderTo: Ext.DomQuery.selectNode('.jspPane', resultContainer.id)
            });
            
        }
        else {
        	
        	dView = new Ext.DataView({
                store: this.store,
                tpl: this.tpl,
                autoScroll: false,
                itemSelector: 'div.thumb-wrap'
            });
            
        	resultContainer.add(dView);
        	resultContainer.doLayout();
        }

        if(!this.storeAutoLoad){
        	Ext.Msg.alert('Sorry', 'Search criteria must be at least 2 characters long.');
        }
        
    },
    
    getResultContainer: function(){
        var containers = this.findByType('container');
        return containers[containers.length - 1];
    },
	
	onStoreLoad: function(event){
        var count = event.getCount();        
        if (count == 0) {
            Ext.Msg.alert('Sorry', 'No results returned for your search criteria');
        }
        else {
            
            if ($ && $.fn.jScrollPane) {
                this.handleOnStoreUpdated();
            }
        }
        this.syncShadow();
        return;
    },
    
    handleOnStoreUpdated: function(){
        var resultContainer, jspApi;
        resultContainer = this.getResultContainer();
        jspApi = $('#' + resultContainer.id).data('jsp');
        
        if (jspApi) {
            jspApi.reinitialise({
                showArrows: true
            });
        }
    },
    
    submitForm: function(e){

    	var c = this.getTopToolbar().getForm().getFieldValues().criteria.trim()
        if (c && c.length >= 2) {
            this.store.setBaseParam('criteria', c);
            this.store.load();
        }else{
        	Ext.Msg.alert('Sorry', 'Search criteria must be at least 2 characters long.');
        }
    },
    
    tpl: new Ext.XTemplate('<tpl for=".">', '<div class="{[this.getDetailStyle(values)]}">', '<h3><a href="{url}">{custom_title}</a></h3>', '<div class="abstract">{custom_description:ellipsis(300)}</div>', '<div class="dispurl"><a href="{url}">{url}</a></div>', '<tpl if="this.hasDetails(values)">', '<ul class="detail-items">', '<div class="featured-result-detail">', '<tpl for="detail">', '<li>{link}</li>', '</tpl>', '</ul>', '</div>', '</tpl>', '</div>', '</tpl>', '<div class="x-clear"></div>', {
        hasDetails: function(values){
            return values.includeDetail;
        },
        getDetailStyle: function(values){
            return this.hasDetails(values) ? "featured-result" : "search-result";
        }
    })
});