Ext.onReady(function(){
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	Ext.QuickTips.init();

	function changeDate(datepicker,date) {
		var ymd = date.format('Y-m-d');
		var mdy = date.format('F dS, Y');
		Ext.Ajax.request({
			method: 'POST',
			url: '/ajax.php?setymd=true&ymd='+ymd,
			success: function (result, request) {
				store.removeAll();
				store.load();
				Ext.getCmp('gridpanel1').setTitle('TV Listings - ' + mdy);
			}
		});
	}

	var timezone_combo = new Ext.form.ComboBox({
		name: 'timezone',
		id: 'timezone-select',
		editable: false,
		disableFilterKey: true,
		forceSelection: true,
		triggerAction: 'all',
		typeAhead: true,
		selectOnFocus: true,
		mode: 'local',
		store: new Ext.data.SimpleStore({
			id: 0,
			fields: ['value','text'],
			data: [['Eastern','Eastern'],['Central','Central'],['Mountain','Mountain'],['Pacific','Pacific']]
		}),
		valueField: 'value',
		displayField: 'text'
	});

	timezone_combo.on('select',setTimeZone);

	function setTimeZone(obj) {
		var value = obj.value;
		Ext.Ajax.request({
			method: 'POST',
			url: '/ajax.php?settz=' + value,
			success: function () {
				//reload data with new timezone
				store.removeAll();
				store.load();
			}
		});
	}

	function getTimeZone() {
		Ext.Ajax.request({
			method: 'POST',
			url: '/ajax.php?gettz=true',
			success: function (result) {
				Ext.getCmp('timezone-select').setValue(result.responseText);
			}
		});
	}


	function getDateTitle() {
		Ext.Ajax.request({
			method: 'POST',
			url: '/ajax.php?getmdy=true',
			success: function(result,request) {
				var mdy = result.responseText;
				Ext.getCmp('gridpanel1').setTitle('TV Listings - ' + mdy);
			}
		});
	}
	
		var today = new Date;
		var maxdate = new Date;
		maxdate.setDate(maxdate.getDate() + 5);
		
		
		var tb = new Ext.Toolbar();
		var dateMenu = new Ext.menu.DateMenu({
			format: 'Y-m-d',
			minDate: today,
			maxDate: maxdate,
			handler: function (dp,date) {
				changeDate(dp,date);
			}
		});

		var tzmenu = new Ext.menu.Menu({
			id: 'tzMenu',
			style: {
				overflow: 'visible'
			},
			items: [
				timezone_combo
				]
		});

		tb.add({
			text: 'Timezone',
			iconCls: 'tz-icon',
			menu: tzmenu
		},{
			text: 'Date',
			iconCls: 'cal-icon',
			menu: dateMenu
		}
		);



// create the data store
var store = new Ext.data.JsonStore({
  id: 'store1',
	autoLoad: true,
	url: 'ajax.php',
  fields: [
	{name: 'time', type: 'string'},
	{name: 'cbs',type: 'string'},
	{name: 'nbc',type: 'string'},
	{name: 'abc',type: 'string'},
	{name: 'cw',type: 'string'},
	{name: 'fox',type: 'string'},
	{name: 'ae',type: 'string'},
	{name: 'abcf',type: 'string'},
	{name: 'amc',type: 'string'},
	{name: 'apl',type: 'string'},
	{name: 'bbc',type: 'string'},
	{name: 'bet',type: 'string'},
	{name: 'bio',type: 'string'},
	{name: 'brvo',type: 'string'},
	{name: 'cn',type: 'string'},
	{name: 'max',type: 'string'},
	{name: 'hbo',type: 'string'},
	{name: 'sho',type: 'string'},
	{name: 'com',type: 'string'},
	{name: 'cnn',type: 'string'},
	{name: 'cnbc',type: 'string'},
	{name: 'cmt',type: 'string'},
	{name: 'dsc',type: 'string'},
	{name: 'dis',type: 'string'},
	{name: 'e!',type: 'string'},
	{name: 'enc',type: 'string'},
	{name: 'espn',type: 'string'},
	{name: 'food',type: 'string'},
	{name: 'fnc',type: 'string'},
	{name: 'fx',type: 'string'},
	{name: 'hist',type: 'string'},
	{name: 'hgtv',type: 'string'},
	{name: 'life',type: 'string'},
	{name: 'mnbc',type: 'string'},
	{name: 'mtv',type: 'string'},
	{name: 'ngc',type: 'string'},
	{name: 'oxgn',type: 'string'},
	{name: 'soap',type: 'string'},
	{name: 'speed',type: 'string'},
	{name: 'spke',type: 'string'},
	{name: 'stz',type: 'string'},
	{name: 'syfy',type: 'string'},
	{name: 'tbs',type: 'string'},
	{name: 'tcm',type: 'string'},
	{name: 'tnt',type: 'string'},
	{name: 'trav',type: 'string'},
	{name: 'tvld',type: 'string'},
	{name: 'usa',type: 'string'},
	{name: 'vh1',type: 'string'}
        ]
});

	
    var grid = new Ext.grid.GridPanel({
        store: store,
				id: 'gridpanel1',
	colModel: new Ext.ux.grid.LockingColumnModel([ 
            {header: 'Time', width: 70, sortable: false, locked:true, dataIndex: 'time'},
 {id: 'cbs',header: '<img src="/tvicons/380WCBS.gif" /> CBS', width: 180, sortable: false, dataIndex: 'cbs'}
,
{id: 'nbc',header: '<img src="/tvicons/382WNBC.gif" /> NBC', width: 180, sortable: false, dataIndex: 'nbc'}
,
{id: 'abc',header: '<img src="/tvicons/386WABC.gif" /> ABC', width: 180, sortable: false, dataIndex: 'abc'}
,
{id: 'cw',header: '<img src="/tvicons/384WDCW.gif" /> CW', width: 180, sortable: false, dataIndex: 'cw'}
,
{id: 'fox',header: '<img src="/tvicons/388WNYW.gif" /> FOX', width: 180, sortable: false, dataIndex: 'fox'}
,
{id: 'a&amp;e',header: '<img src="/tvicons/265AETV.gif" /> A&amp;E', width: 180, sortable: false, dataIndex: 'ae'}
,
{id: 'abcf',header: '<img src="/tvicons/311ABCF.gif" /> ABCF', width: 180, sortable: false, dataIndex: 'abcf'}
,
{id: 'amc',header: '<img src="/tvicons/254AMC.gif" /> AMC', width: 180, sortable: false, dataIndex: 'amc'}
,
{id: 'apl',header: '<img src="/tvicons/282APL.gif" /> APL', width: 180, sortable: false, dataIndex: 'apl'}
,
{id: 'bbc',header: '<img src="/tvicons/264BBCA.gif" /> BBC', width: 180, sortable: false, dataIndex: 'bbc'}
,
{id: 'bet',header: '<img src="/tvicons/329BET.gif" /> BET', width: 180, sortable: false, dataIndex: 'bet'}
,
{id: 'bio',header: '<img src="/tvicons/266BIO.gif" /> BIO', width: 180, sortable: false, dataIndex: 'bio'}
,
{id: 'brvo',header: '<img src="/tvicons/273BRAVO.gif" /> BRVO', width: 180, sortable: false, dataIndex: 'brvo'}
,
{id: 'cn',header: '<img src="/tvicons/296TOON.gif" /> CN', width: 180, sortable: false, dataIndex: 'cn'}
,
{id: 'max',header: '<img src="/tvicons/515MAX.gif" /> MAX', width: 180, sortable: false, dataIndex: 'max'}
,
{id: 'hbo',header: '<img src="/tvicons/501HBO.gif" /> HBO', width: 180, sortable: false, dataIndex: 'hbo'}
,
{id: 'sho',header: '<img src="/tvicons/545SHOW.gif" /> SHO', width: 180, sortable: false, dataIndex: 'sho'}
,
{id: 'com',header: '<img src="/tvicons/249COMEDY.gif" /> COM', width: 180, sortable: false, dataIndex: 'com'}
,
{id: 'cnn',header: '<img src="/tvicons/202CNN.gif" /> CNN', width: 180, sortable: false, dataIndex: 'cnn'}
,
{id: 'cnbc',header: '<img src="/tvicons/355CNBC.gif" /> CNBC', width: 180, sortable: false, dataIndex: 'cnbc'}
,
{id: 'cmt',header: '<img src="/tvicons/327CMTV.gif" /> CMT', width: 180, sortable: false, dataIndex: 'cmt'}
,
{id: 'dsc',header: '<img src="/tvicons/278DSC.gif" /> DSC', width: 180, sortable: false, dataIndex: 'dsc'}
,
{id: 'dis',header: '<img src="/tvicons/290DISN.gif" /> DIS', width: 180, sortable: false, dataIndex: 'dis'}
,
{id: 'e!',header: '<img src="/tvicons/236E.gif" /> E!', width: 180, sortable: false, dataIndex: 'e!'}
,
{id: 'enc',header: '<img src="/tvicons/535ENCORE.gif" /> ENC', width: 180, sortable: false, dataIndex: 'enc'}
,
{id: 'espn',header: '<img src="/tvicons/206ESPN.gif" /> ESPN', width: 180, sortable: false, dataIndex: 'espn'}
,
{id: 'food',header: '<img src="/tvicons/231FOOD.gif" /> FOOD', width: 180, sortable: false, dataIndex: 'food'}
,
{id: 'fnc',header: '<img src="/tvicons/360FNC.gif" /> FNC', width: 180, sortable: false, dataIndex: 'fnc'}
,
{id: 'fx',header: '<img src="/tvicons/248FX.gif" /> FX', width: 180, sortable: false, dataIndex: 'fx'}
,
{id: 'hist',header: '<img src="/tvicons/269HISTORY.gif" /> HIST', width: 180, sortable: false, dataIndex: 'hist'}
,
{id: 'hgtv',header: '<img src="/tvicons/229HGTV.gif" /> HGTV', width: 180, sortable: false, dataIndex: 'hgtv'}
,
{id: 'life',header: '<img src="/tvicons/252LIFE.gif" /> LIFE', width: 180, sortable: false, dataIndex: 'life'}
,
{id: 'mnbc',header: '<img src="/tvicons/356MSNBC.gif" /> mnbc', width: 180, sortable: false, dataIndex: 'mnbc'}
,
{id: 'mtv',header: '<img src="/tvicons/331MTV.gif" /> MTV', width: 180, sortable: false, dataIndex: 'mtv'}
,
{id: 'ngc',header: '<img src="/tvicons/276NGC.gif" /> NGC', width: 180, sortable: false, dataIndex: 'ngc'}
,
{id: 'oxgn',header: '<img src="/tvicons/251OXYGEN.gif" /> OXGN', width: 180, sortable: false, dataIndex: 'oxgn'}
,
{id: 'soap',header: '<img src="/tvicons/262SOAP.gif" /> SOAP', width: 180, sortable: false, dataIndex: 'soap'}
,
{id: 'speed',header: '<img src="/tvicons/607SPEED.gif" /> SPEED', width: 180, sortable: false, dataIndex: 'speed'}
,
{id: 'spke',header: '<img src="/tvicons/241SPIKETV.gif" /> SPKE', width: 180, sortable: false, dataIndex: 'spke'}
,
{id: 'stz',header: '<img src="/tvicons/527STARZ.gif" /> STZ', width: 180, sortable: false, dataIndex: 'stz'}
,
{id: 'syfy',header: '<img src="/tvicons/244SYFY.gif" /> Syfy', width: 180, sortable: false, dataIndex: 'syfy'}
,
{id: 'tbs',header: '<img src="/tvicons/247TBS.gif" /> TBS', width: 180, sortable: false, dataIndex: 'tbs'}
,
{id: 'tcm',header: '<img src="/tvicons/256TCM.gif" /> TCM', width: 180, sortable: false, dataIndex: 'tcm'}
,
{id: 'tnt',header: '<img src="/tvicons/245TNT.gif" /> TNT', width: 180, sortable: false, dataIndex: 'tnt'}
,
{id: 'trav',header: '<img src="/tvicons/277TRAV.gif" /> TRAV', width: 180, sortable: false, dataIndex: 'trav'}
,
{id: 'tvld',header: '<img src="/tvicons/304TVLAND.gif" /> TVLD', width: 180, sortable: false, dataIndex: 'tvld'}
,
{id: 'usa',header: '<img src="/tvicons/242USA.gif" /> USA', width: 180, sortable: false, dataIndex: 'usa'}
,
{id: 'vh1',header: '<img src="/tvicons/335VH1.gif" /> VH1', width: 180, sortable: false, dataIndex: 'vh1'}


				]),
				layout: 'fit',
				viewConfig: {
					forceFit: true
				},
				loadMask: true,
				setAutoWidth: true,
        stripeRows: true,
				autoExpandColumn: 0,
        title: 'TV Listings',
        stateful: true,
        tbar: tb,
				stateId: 'grid',
				view: new Ext.ux.grid.LockingGridView()
		});
    grid.render('tvlisting');
   	getDateTitle(); 
		

				var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
               {
								id: 'northpanel',
								layout: 'border',
								border: false,
								margins: '0 0 0 0',
								region: 'north',
                //contentEl: 'north',
								height: 121,
								items : [
								{
									region: 'north',
									contentEl: 'menudiv'
								},{
									region: 'center',
									id: 'topadbardiv',
									contentEl: 'topbar',
									collapsable: true,
									stateful: false,
									collapsed: false,
									hideCollapseTool: false
								}]
            }, {
                region: 'south',
                id: 'south-panel',
								contentEl: 'south',
                collapsed: true,
								split: true,
                height: 60,
                collapsible: true,
								stateful: false,
                margins: '0 0 0 0'
            }, {
                region: 'east',
                collapsible: false,
                contentEl: 'east',
                width: 160, 
                margins: '0 5 0 0',
                layout: 'fit' 
						},{
								region: 'center',
								margins: '0 0 0 0',
								layout: 'fit',
								items: grid
						}]
    });
	var s = Ext.getCmp('south-panel');
	s.collapsed ? s.expand() : s.collapse();
	getTimeZone();
});