Ext.MeetingRoomCalendar = function(mainPanel){

	var tab = mainPanel.getComponent('docs-Meeting Room Calendar');
	if(tab){
		mainPanel.setActiveTab(tab);
	}
	else{	
	
		/**
		 * SHOWS STORE
		 */
		var storeShows = 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'},
	            {name: 'full_date', mapping: 'full_date'}
	
	        ])
	    });
		storeShows.load({params:{query:'', user_id: Ext.userId, user_level: Ext.userLevel }});
	
		
		/**
		 * DAY-BY-DAY SHOW STORE (CTIA Day 1, Day 2, etc.)
		 */
		var storeShowsDaily = new Ext.data.Store({
			proxy: new Ext.data.HttpProxy({url: Ext.urlScriptDir + '/application/shows.php'}),
			baseParams: { method: 'list_daily', 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'},
			 {name: 'full_date', mapping: 'full_date'}
	
			 ])
		});
	
		
		/**
		 * both show stores use the same template
		 */
	    var showTpl = new Ext.XTemplate(
	        '<tpl for="."><div class="search-item">',
	            '<b>{show_nm}</b><br />',
	            '{show_date}, {show_year}',
	        '</div></tpl>'
	    );
	
	    
	    /**
	     * CUSTOMER LIST STORE
	     */
	    var storeCustomers = new Ext.data.Store({
	        proxy: new Ext.data.HttpProxy({url: Ext.urlScriptDir + '/application/customer.php'}),
	        baseParams: { method: 'list_all', user_id: Ext.userId, user_level: Ext.userLevel },
	        reader: new Ext.data.JsonReader({
	            root: 'data',
	            totalProperty: 'totalCount',
	            id: 'cust_id'
	        },
	        [
	            {name: 'id', mapping: 'cust_id'},
	            {name: 'cust_name', mapping: 'cust_name'}
	        ])
	    });
	    storeCustomers.load({params:{query:'', user_id: Ext.userId, user_level: Ext.userLevel }});

	    var meetingCalendarAvailFormView = new Ext.form.FormPanel({
	        baseCls: 'x-plain',
	        labelWidth: 100,
	
	        items: [
	                
					/* CALENDAR OPTIONS */
					{
					    layout:'column',
					    anchor: '99%',
					    
					    items:[
					    {
					        columnWidth:.40,
					        layout: 'form',
					        items:[
								new Ext.form.MeetingCalendarComboBox({
									fieldLabel: 'Select a Show',
								    store: storeShows,
								    id: 'storeShowsMeetingCalendar',
								    anchor: '96%',
								    tpl: showTpl,
								    itemSelector: 'div.search-item'
								}),
								new Ext.form.MeetingCalendarComboBoxDaily({
									fieldLabel: 'Limit',
								    store: storeShowsDaily,
								    id: 'meetingCalendarStoreDaily',
								    anchor: '96%',
								    tpl: showTpl,
								    itemSelector: 'div.search-item',
								    disabled: true
								})
					        ]
					    },
					    {
					        columnWidth:.30,
					        layout: 'form',
					        items:[
						            new Ext.form.ComboBox({
					            	id: 'meeting_grid_view_customer_list',
					            	fieldLabel: 'Customers',
					            	anchor: '96%',
					                store: storeCustomers,
					                displayField:'cust_name',
					                mode: 'local',
					                triggerAction: 'all',
					                emptyText:'Limit results to a specific customer...',
					                selectOnFocus:true,
					            	listeners: {
					            		select: function(){
					                		var rowIndex = this.selectedIndex;
					                		var rowData = this.store.getAt(rowIndex).data;
					                		Ext.getCmp('meeting_grid_view_cust_id').setValue(rowData.id);
					                		
					                		/* load the calendar */
					                		Ext.loadMeetingRoomCalendar();
					               		}
					            	}
					            }),
					        	new Ext.form.Checkbox({
					        		fieldLabel: 'My Bookings',
					        		boxLabel: 'Show only your bookings',
					        		listeners: {
					            		check: function(){
					            			var checked = this.getValue();
					            			if(checked == true){
					            				Ext.getCmp('meeting_grid_view_my_booking').setValue(1);
					            			}
					            			else{
					            				Ext.getCmp('meeting_grid_view_my_booking').setValue(0);
					            			}
					            			
					            			/* load the calendar */
					            			Ext.loadMeetingRoomCalendar();
					            		}
					            	}
					        	})
					        ]
					    },	                
					    {
					        columnWidth:.30,
					        layout: 'form',
					        items:[
					               
						            {
					            	xtype:'statictextfield',
					            	fieldLabel: 'Color Key',
					                anchor: '96%',
					                fieldClass: 'x-static-text-field',
					                rawValue: '<b><span class="greencell">&nbsp;Green&nbsp;&nbsp;</span></b>: Available, no bookings<br /><b><span class="literedcell"><font color="#FFFFFF">&nbsp;Red&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></span></b>: Unavailable, completely booked<br />'
					            },		                           
					            {
					            	xtype: 'hidden',
					            	name:'meeting_grid_view_show_id',
					            	id:'meeting_grid_view_show_id',
					            	value: 0
					            },
					            {
					            	xtype: 'hidden',
					            	name:'meeting_grid_view_show_date',
					            	id:'meeting_grid_view_show_date',
					            	value: 0
					            },
					            {
					            	xtype: 'hidden',
					            	name:'meeting_grid_view_my_booking',
					            	id:'meeting_grid_view_my_booking',
					            	value: 0
					            },
					            {
					            	xtype: 'hidden',
					            	name:'meeting_grid_view_cust_id',
					            	id:'meeting_grid_view_cust_id',
					            	value: 0,
					            	listeners: {
					            		render: function(){
					            			Ext.getCmp('storeMeetingRoomCalendar').store.load({params:{organize_js: '1' }});
					            			
					            			/* wait for the show store to finish loading */
				                			storeShows.on('load', function(p){
				                			    /* select the show */
				                				if(Ext.default_show){
				                					Ext.selectStore('storeShowsMeetingCalendar', 'show_nm', Ext.default_show, Ext.default_show);
				                				}
				                			});					            			
					            		}
					            	}
					            }
					        ]
					    }
					]
				}
	        ]
	    });
	
	    // Using the generic AdminPanel ux (in rpmPanel), we will create a panel to hold our data
	    var meetingCalendarViewPanel = new Ext.ux.AdminPanel({
	    	region:'north',
	        id:'meetingCalendarViewPanel',
	        height: 80,
	        collapsible: true,
	        collapseMode: 'mini',
	
	        items: [ meetingCalendarAvailFormView ]
	    });
	
      	// Create the Data Store
		var store = new Ext.data.JsonStore({
			root: 'data',
			totalProperty: 'totalCount',
			idProperty: 'id',
			remoteSort: true,

			fields: [
			   'id',
			   'resource_name',
			   'resource_date',
			   'resource_num',
			   'show_id',
			   'show_nm',
			   '0800',
			   '0830',
			   '0900',
			   '0930',
			   '1000',
			   '1030',
			   '1100',
			   '1130',
			   '1200',
			   '1230',
			   '1300',
			   '1330',
			   '1400',
			   '1430',
			   '1500',
			   '1530',
			   '1600',
			   '1630',
			   '1700',
			   '1730',
			   '1800',
			   '1830',
			   '1900',
			   '1930',
			   '2000',
			   '2030',
			   '2100',
			   '2130',
			   '2200',
			   '2230',
			   '2300',
			   '2330'
			],

          	// load using script tags for cross domain, if the data in on the same domain as this page, an HttpProxy would be better
			proxy: new Ext.data.HttpProxy({
				url: Ext.urlScriptDir + '/application/calendar.php'
			}),
			baseParams: { method: 'generate', user_id: Ext.userId, user_level: Ext.userLevel },
			listeners:{
    			beforeload: function()
				{
					var onload = Ext.getCmp('storeMeetingRoomCalendar');
					if (onload)
						onload.getEl().mask('Loading...', 'x-mask-loading');
				},
				load: function()
				{
					var onload = Ext.getCmp('storeMeetingRoomCalendar');
					if (onload)
						onload.getEl().unmask();
				},
				loadexception: function()
				{
					var onload = Ext.getCmp('storeMeetingRoomCalendar');
					if (onload)
						onload.getEl().unmask();
				}
    		}
      	});
      	store.setDefaultSort('resource_id', 'asc');
		
      	// create the Grid
      	var grid = new Ext.grid.GridPanel({
      		title: 'Meeting Room Calendar',
			id: 'storeMeetingRoomCalendar',
			region:'center',

			store: store,
			// Grid columns
			columns:[{
				header: "Resource",
				dataIndex: 'resource_name',
				width: 150,
				sortable: true
			},
	        { header: "Date", dataIndex: 'resource_date', width: 80, sortable: true },
	        { header: "Cap", dataIndex: 'resource_num', width: 35, sortable: true },
	        { header: "8:00", dataIndex: '0800', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "8:30", dataIndex: '0830', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "9:00", dataIndex: '0900', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "9:30", dataIndex: '0930', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "10:00", dataIndex: '1000', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "10:30", dataIndex: '1030', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "11:00", dataIndex: '1100', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "11:30", dataIndex: '1130', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "12:00", dataIndex: '1200', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "12:30", dataIndex: '1230', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "13:00", dataIndex: '1300', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "13:30", dataIndex: '1330', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "14:00", dataIndex: '1400', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "14:30", dataIndex: '1430', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "15:00", dataIndex: '1500', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "15:30", dataIndex: '1530', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "16:00", dataIndex: '1600', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "16:30", dataIndex: '1630', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "17:00", dataIndex: '1700', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "17:30", dataIndex: '1730', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "18:00", dataIndex: '1800', width: 55, renderer: renderFullShow, sortable: false },
	        { header: "18:30", dataIndex: '1830', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "19:00", dataIndex: '1900', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "19:30", dataIndex: '1930', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "20:00", dataIndex: '2000', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "20:30", dataIndex: '2030', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "21:00", dataIndex: '2100', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "21:30", dataIndex: '2130', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "22:00", dataIndex: '2200', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "22:30", dataIndex: '2230', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "23:00", dataIndex: '2300', width: 55, renderer: renderFullShow, sortable: false },
	      	{ header: "23:30", dataIndex: '2330', width: 55, renderer: renderFullShow, sortable: false }
	      	],

	      	stripeRows: true,
	      	autoscroll: true,
	      	trackMouseOver:false,
	      	disableSelection:true,
	      	loadMask: false,
	      	tools:[{
    		    id:'print',
    		    qtip: 'Print this Calendar',
    		    handler: function(event, toolEl, panel){
	      			Ext.printScreen('storeMeetingRoomCalendar');
	      		}
	      	}]
      	});
	
      	var border = {
      		layout:'border',
		    bodyBorder: true,
		    iconCls: 'icon-meeting',

		    animFloat: false,

		    items: [ grid, meetingCalendarViewPanel ]
        };
	
      	// Now that we've created the Panel properly, load the component
        rpmCom.loadComp(border, 'Meeting Room Calendar', mainPanel, 1, 'icon-meeting');
	
	    if(Ext.isIE){
	    	/* global fn to resize all non-center panels */
	    	Ext.resizePanelIE();
	    }
	}
};

/**
 * load meeting room calendar
 * 
 * This global fn will reload the meeting room calendar using the stored variables
 * Alternatively, if you want to use the last sent params, instead of grabbing new 
 * values, you can use store.reload();
 */

Ext.loadMeetingRoomCalendar = function(){
	
	// Load the grid
	var filter, id, show_date, cust_id, my_booking;
    
	id = Ext.getCmp('meeting_grid_view_show_id').value;
    show_date = Ext.getCmp('meeting_grid_view_show_date').value;
    my_booking = Ext.getCmp('meeting_grid_view_my_booking').value;
    cust_id = Ext.getCmp('meeting_grid_view_cust_id').value;

    /* calls calendar.php using the meeting_room_only flag */
    Ext.getCmp('storeMeetingRoomCalendar').store.load({params:{method:'generate', show_date:String(show_date), show_id:String(id), meeting_cust_id:String(cust_id), my_booking:String(my_booking), meeting_room_only:'1'}});

};

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

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

        // Select fires AFTER you click on a comboBox item (the list is collaspsed)
        this.on('select', this.onThisSelect, 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, limit: '1'}});
            }
        }
    },

    onThisSelect: function(record){
        var rowIndex = record.selectedIndex;
        var rowData = record.store.getAt(rowIndex).data;
        var id = rowData.id;
        var show_date = rowData.full_date;
        
        /* enable the limit by day drop down */
        Ext.getCmp('meetingCalendarStoreDaily').enable();

        Ext.getCmp('meeting_grid_view_show_id').setValue(id);
        Ext.getCmp('meeting_grid_view_show_date').setValue(show_date);

        /* load the calendar */
        Ext.loadMeetingRoomCalendar();        
    
    }
});

Ext.form.MeetingCalendarComboBoxDaily = Ext.extend(Ext.form.ComboBox, {
    typeAhead: false,
    displayField: 'show_nm',
    mode: 'remote',
    triggerAction: 'all',
    loadOnTrigger: true,
    emptyText: 'Limit by day...',
    selectOnFocus: true,
    minChars: 2,

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

        // Select fires AFTER you click on a comboBox item (the list is collaspsed)
        this.on('select', this.onThisSelect, 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){
    			var show_id;
    			show_id = Ext.getCmp('meeting_grid_view_show_id').value;
    			if(show_id){
    				this.store.load({params:{query:this.getRawValue(), show_id:String(show_id), user_id: Ext.userId}});
    			}
    			else{
    				this.store.load({params:{query:this.getRawValue(), show_id:'-1', user_id: Ext.userId}});
    			}
            }
        }
    },

    onThisSelect: function(record){
        var rowIndex = record.selectedIndex;
        var rowData = record.store.getAt(rowIndex).data;
        var id = rowData.id;
        var show_date = rowData.full_date;

        Ext.getCmp('meeting_grid_view_show_id').setValue(id);
        Ext.getCmp('meeting_grid_view_show_date').setValue(show_date);

        /* load the calendar */
        Ext.loadMeetingRoomCalendar();        
    
    }
});