Ext.EditUpload = function(mainPanel){

	var tab = mainPanel.getComponent('docs-Upload Content');
	if(tab){
		mainPanel.setActiveTab(tab);
	}
	else{
	
		
	    /**
	     * UPLOAD STORE
	     */
	    var dataUpload = [
		      ['Users'],
		      ['Customers']
	    ];
	    var storeContent = new Ext.data.SimpleStore({
	        fields: [
	           {id: 'upload_id', name: 'upload_id'}
	        ]
	    });    
	    storeContent.loadData(dataUpload);		
		
		/************* Show list store *************/
		var storeUploads = new Ext.data.Store({
	        proxy: new Ext.data.HttpProxy({url: Ext.urlScriptDir + '/application/shows.php'}),
	        baseParams: { method: 'list', user_id: Ext.userId, user_level: Ext.userLevel },
	        reader: new Ext.data.JsonReader({
	            root: 'data',
	            totalProperty: 'totalCount',
	            id: 'show_id'
	        },
	        [
	            {name: 'id', mapping: 'show_id'},
	            {name: 'show_nm', mapping: 'show_nm'},
	            {name: 'show_date', mapping: 'show_date'},
	            {name: 'show_year', mapping: 'show_year'}
	            
	        ])
	    });
	    // Preload the showGroup combobox list
		storeUploads.load({params:{query:'', user_id: Ext.userId, user_level: Ext.userLevel }});
	    // Custom rendering Template using the 'name' field from above
	    var showTpl = new Ext.XTemplate(
	        '<tpl for="."><div class="search-item">',
	            '<b>{show_nm}</b><br />',
	            '{show_date}, {show_year}',
	        '</div></tpl>'
	    );
	
	    // Create the email form that is populated with the Panel display
	    var uploadForm = new Ext.form.FormPanel({
	        baseCls: 'x-plain',
	        labelWidth: 100,
	        url: Ext.urlScriptDir + '/application/upload.php',
	        id: 'uploadFormItems',
	        defaultType: 'textfield',
	        monitorValid: true,
	        fileUpload: true,
	
	        reader: new Ext.data.JsonReader({
	            root: 'data', // the root of the json array
	            totalProperty: 'totalCount',
	            id: 'id',
	            fields: [
	                {name: 'id', mapping: 'show_id'},
	                {name: 'upload_id', mapping: 'upload_id'}
	            ]
	        }),
	
	        items: [
	            new Ext.form.UploadComboBox({
	                store: storeUploads,
	                id: 'storeUploads',
	                fieldLabel: 'Show',
	                anchor: '96%',
	                tpl: showTpl,
	                itemSelector: 'div.search-item'         
	            }),
	            
  	            new Ext.form.ComboBox({
	            	id: 'storeContent',
	            	name: 'upload_id',
	            	fieldLabel: 'Content Type',
	            	anchor: '96%',
	            	store: storeContent,
	            	displayField:'upload_id',
	            	mode: 'local',
	            	triggerAction: 'all',
	            	emptyText:'Select...',
	            	value: 'Users', // default value
	        	   	selectOnFocus:true,
	        	   	forceSelection: true,
	        	   	tooltipText: "Here you choose what you want to upload. The file-type must be in XLS format (Excel). The exact format for each type (how many columns are required, etc.) is in the User Guide.",
	                listeners: { render: Ext.setFormFieldTooltip }
	           	}),	   
        
	            {
	                xtype: 'fileuploadfield',
	                id: 'uploadName',
	                emptyText: 'Select a show, content type, & Excel file...',
	                fieldLabel: 'File',
	                name: 'file',
	                anchor: '96%',
	                buttonCfg: {
	                    text: '',
	                    iconCls: 'task-folder'
	                }
	            },
	            {
	                xtype: 'hidden',
	                name:'id',
	                id:'show_id_upload',
	                value: 0,
	            	listeners: {
	            		render: function(){
			    			/* wait for the show store to finish loading */
	            			storeUploads.on('load', function(p){
	            			    /* select the show */
	            				if(Ext.default_show){
	            					Ext.selectStore('storeUploads', 'show_nm', Ext.default_show, Ext.default_show);
	            				}
	            			});
			    		}
			    	}
	            }
	        ],
	
	        buttons: [
		    {
		        text: 'Upload',
		        type: 'submit',
		        formBind:true, // combined with monitorValid above, the submit button will remain disabled until everything is properly validated. -nk
		        handler: function(){
		    		Ext.saveResourceGlobal('uploadFormItems', 'uploadName', 'editUploadSB', '/application/upload.php', 'upload', 'storeUploads');
		    	}
		    },
		    {
		    	text: 'Reset',
		    	type: 'reset',
		    	handler: function(){
		    		// Clear all the values in the form
		    		uploadForm.getForm().reset();
		    		// Set the focus to the FROM field
		    		Ext.getCmp('uploadName').focus();
		      	}
		    }]
	    });
	
	    // Using the generic AdminPanel ux (in rpmPanel), we will create a panel to hold our form
	    var uploadPanel = new Ext.ux.AdminPanel({
	        id:'uploadPanel',
	        items: [ uploadForm ],
	        tbar: [
	            {
	                // SAVE
	                icon: Ext.urlScriptDir + Ext.urlIconDir + '/save.gif',
	                cls: 'x-btn-icon',
	                tooltip: '<b>Upload Registered Users</b><br />First select a show then choose an Excel file to upload.',
	                handler: function(){
	            		Ext.saveResourceGlobal('uploadFormItems', 'uploadName', 'editUploadSB', '/application/upload.php', 'upload', 'storeUploads'); // the store we want to reload on a "method: save_as" return from the php file
	            	}
	            }        
	        ],
	        // Bottom Bar which holds the status bar for updates, etc
	        bbar: new Ext.StatusBar({
	            id: 'editUploadSB',
	            defaultText: 'Ready', // The default text when the status is cleared
	            defaultIconCls: 'default-icon',
	            text: 'Ready', // The default text shown when the SB is first loaded
	            iconCls: 'ready-icon'
	        })
	    });
	    // Now that we've created the Panel properly, load the component
	    rpmCom.loadComp(uploadPanel, 'Upload Content', mainPanel, 0, 'icon-page-excel');
	    // Set focus to the name field
	    Ext.getCmp('uploadName').focus('', 100);	
	    
	    if(Ext.isIE){
		    // Resize north panels in various calendars
		    if(Ext.getCmp('fullShowPanel')){
		    	Ext.getCmp('fullShowPanel').setHeight(120);
		    }
		    
		    if(Ext.getCmp('gridViewPanel')){
		    	Ext.getCmp('gridViewPanel').setHeight(120);
		    }
		    
		    if(Ext.getCmp('meetingCalendarViewPanel')){
		    	Ext.getCmp('meetingCalendarViewPanel').setHeight(90);
		    }
		    
		    if(Ext.getCmp('gridViewPanelDemo')){
		    	Ext.getCmp('gridViewPanelDemo').setHeight(40);
		    }
		    
		    if(Ext.getCmp('resourceAvailViewPanel')){
		    	Ext.getCmp('resourceAvailViewPanel').setHeight(70);
		    }
		    
		    if(Ext.getCmp('myViewFormPanel')){
		    	Ext.getCmp('myViewFormPanel').setHeight(50);
		    }
		    
		    if(Ext.getCmp('reportViewPanel')){
		    	Ext.getCmp('reportViewPanel').setHeight(90);
		    }
	    }
	}
};

Ext.form.UploadComboBox = Ext.extend(Ext.form.ComboBox, {
    typeAhead: false,
    displayField: 'show_nm',
    mode: 'remote',
    triggerAction: 'all',
    loadOnTrigger: true,
    emptyText: 'Select a show from the dropdown to edit, or search by typing...',
    selectOnFocus: true,
    minChars: 2,

    id: 'show-tour-combo',

    // private
    initEvents : function(){
        // Call the parent (make sure this matches the object above!)
		Ext.form.UploadComboBox.superclass.initEvents.call(this);

        // Select fires AFTER you click on a comboBox item (the list is collaspsed)
        this.on('select', this.onUploadSelect, this);

    },

    onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        if(this.isExpanded()){
            this.collapse();
            this.el.focus();
        }else {
            this.onFocus({});
            if(this.triggerAction == 'all') {
                this.doQuery(this.allQuery, true);
            } else {
                this.doQuery(this.getRawValue());
            }
            this.el.focus();
            if(this.loadOnTrigger){
                this.store.load({params:{query:this.getRawValue(), user_id: Ext.userId}});
            }
        }

    },
 
    onUploadSelect: function(record){
        var rowIndex = record.selectedIndex;
        var rowData = record.store.getAt(rowIndex).data;
        var id = rowData.id;

        // Make sure the shows combobox doesn't reset
        this.setValue(rowData.show_nm);
   		// Manually set the show_id field
   		Ext.getCmp('show_id_upload').setValue(id);
    }
});