var categorySearch = function(){
    var categoryStore = new Ext.data.JsonStore({
        url: '/date/listAsJSON/category',
        method: 'POST',
        fields: ['sellername', 'usercategory', 'userid', 'targetprofile', 'profilename', 'title', 'usertitle', 'description', 'sellerid', 'category_description', 'thumbnail'],
        autoLoad: false,
        id: 'categoryStore',
        data: browseData
    });
    
    var resultsDisplay = new Ext.DataView({
        store: categoryStore,
        tpl: new Ext.XTemplate('<tpl for="."><div class="{[xindex % 2 === 0 ? "even" : "odd"]} category-item"><div class="category_item category_photo"><a href="/user/profile/{userid}"><img class="photo" src="{thumbnail}"></a></div><div class="category_item category_details"><h3>{title}</h3><p>{[ Ext.util.Format.ellipsis(values.description,200) ]}<a href="/user/profile/{userid}">More Info</a></p></div><div class="clear"></div></div></tpl>'),
        itemSelector: 'div.category-item-selector',
        singleSelect: true,
        id: 'resultsDisplay',
        loadingText: 'Searching...',
        emptyText: 'No dates to display. Please refine your search criteria',
		deferEmptyText:false
    });
    
    var locateForm = new Ext.form.FormPanel({
        frame: true,
        id: 'locateForm',
        layout: 'form',
        url: '/date/category',
        method: 'POST',
        labelAlign: 'top',
        defaults: {
            labelSeparator: ''
        },
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Keywords',
            emptyText: 'e.g. Celebrity, Singer, Chef...',
            width: 215,
            name: 'keywords'
        }, {
            xtype: 'combo',
            fieldLabel: 'Category',
            width: 215,
            displayField: 'description',
            valueField: 'categoryid',
            hiddenName: 'categoryid',
            triggerAction: 'all',
            mode: 'local',
            emptyText: 'Limit your search by category',
            store: new Ext.data.JsonStore({
                fields: ['categoryid', 'description'],
                data: dateCategory
            })
        }, {
            xtype: 'combo',
            fieldLabel: "Date Type",
            width: 215,
            displayField: 'description',
            valueField: 'target',
            hiddenName: 'target',
            triggerAction: 'all',
            mode: 'local',
            store: new Ext.data.SimpleStore({
                fields: ['target', 'description'],
                data: [['forsale', 'Dates for Sale'], ['wanted', 'Dates Wanted']]
            })
        
        }, {
            xtype: 'datefield',
            format: 'm-d-Y',
            fieldLabel: 'Start Date Range',
            emptyText: 'Start date range',
            width: 200,
            name: 'startdaterange'
        }, {
            xtype: 'datefield',
            format: 'm-d-Y',
            fieldLabel: 'End Date Range',
            emptyText: 'End date range',
            width: 200,
            name: 'enddaterange'
        }],
        buttons: [{
            text: 'Search',
            handler: function(){
                this.ownerCt.getForm().getEl().dom.submit();
                /*
                 var rObj = [];
                 var values = this.ownerCt.form.getValues();
                 var form = this.ownerCt.form;
                 
                 for (var n in values) {
                 var value = Ext.escapeRe(values[n]).replace(/\+/g, ' ').replace(/\\/g, '');
                 var field = form.findField(n);
                 
                 if (value != field.emptyText) {
                 rObj[n] = value;
                 }
                 }
                 
                 Ext.getCmp('resultsDisplay').store.load({params:rObj});
                 */
            }
        }],
        listeners: {
            render: function(){
				if(console) {
					console.info('locateform',this.getForm());
					console.info('filter',filterData);
				}
                this.getForm().setValues(filterData);
            }
        }
    });
    
    return {
        displayResults: function(results){
        
        },
        init: function(){
            resultsDisplay.render('list');
            locateForm.render('locate_form');
        }
    }
};

Ext.onReady(function(){
    categorySearch().init();
});