var storeStats = undefined;
var storeDestinations = undefined;
var storeContent = undefined;

var pubkey = '0ec71848-688b-4d92-957d-d8ba67ad2647';
var domain = 'www.wired.com';

function loadData() {
	storeStats.proxy.conn.url = '/ajax?method=getPublisherStats&publisher=' + pubkey + '&domain=' + domain + '&start=' + Ext.get('dateStart').dom.value + '&end=' + Ext.get('dateEnd').dom.value;
	storeStats.load();
	storeDestinations.proxy.conn.url = '/ajax?method=getPublisherDestinations&publisher=' + pubkey + '&domain=' + domain + '&start=' + Ext.get('dateStart').dom.value + '&end=' + Ext.get('dateEnd').dom.value;
	storeDestinations.load();
}

function init() {
//	Ext.chart.Chart.CHART_URL = '/ext/resources/charts.swf';
		
	var selectDomain = new Ext.form.ComboBox({
		id: 'selectDomain',
		renderTo: 'cntSelectDomain',
		triggerAction: 'all',
		editable: false,
		mode: 'local',
		value: domains[0],
		store: new Ext.data.ArrayStore({
			fields: ['name'],
			data: domains
		}),
		valueField: 'name',
		displayField: 'name'
	});
	
	var dateStartDefault = new Date();
	dateStartDefault.setDate(dateStartDefault.getDate()-8);
	var dateStart = new Ext.form.DateField({
		id: 'dateStart',
		renderTo: 'cntDateStart',
		editable: false,
		showToday: false,
		value: (dateStartDefault.getMonth() + 1) + '/' + (dateStartDefault.getDate() + 1) + '/' + (dateStartDefault.getFullYear())
	});
	
	var dateEndDefault = new Date();
	dateEndDefault.setDate(dateEndDefault.getDate()-2);
	var dateEnd = new Ext.form.DateField({
		id: 'dateEnd',
		renderTo: 'cntDateEnd',
		editable: false,
		showToday: false,
		value: (dateEndDefault.getMonth() + 1) + '/' + (dateEndDefault.getDate() + 1) + '/' + (dateEndDefault.getFullYear())
	});
	
	var buttonLoad = new Ext.Button({
		id: 'buttonLoad',
		renderTo: 'cntButtonLoad',
		text: 'Update Report',
		handler: loadData
	});

	storeStats = new Ext.data.JsonStore({
		autoLoad: true,
		url: '/ajax?method=getPublisherStats&publisher=' + pubkey + '&domain=' + domain + '&start=' + Ext.get('dateStart').dom.value + '&end=' + Ext.get('dateEnd').dom.value,
		root: 'data',
	    idProperty: 'data',
		fields: ['date', 'page', 'pageUnique', 'widget', 'widgetUnique', 'ctr']
	});
	
	storeDestinations = new Ext.data.JsonStore({
		autoLoad: true,
		url: '/ajax?method=getPublisherDestinations&publisher=' + pubkey + '&domain=' + domain + '&start=' + Ext.get('dateStart').dom.value + '&end=' + Ext.get('dateEnd').dom.value,
		root: 'data',
	    idProperty: 'data',
		fields: ['destination', 'count']
	});
	
	storeContent = new Ext.data.ArrayStore({
		fields: ['title', 'count', 'url'],
		data: [
		       [ 'The Red Panda - New Favorite in Local Zoos', 141, 'javascript:void(0)' ],
		       [ 'Map the Olympic Torch on it\'s way to Beijing', 116, 'javascript:void(0)' ],
		       [ 'New Regulations for DND May Not Pass JGA Standards', 100, 'javascript:void(0)' ],
		       [ 'Direct Note Access - Paving the way for Music...', 96, 'javascript:void(0)' ],
		       [ 'Sharing is Good for the Soul', 87, 'javascript:void(0)' ],
		       [ 'ShareThis - Discover What Matters ', 54, 'javascript:void(0)' ],
		       [ 'Apple Shares Set To Rise On Strong Results', 40, 'javascript:void(0)' ],
		       [ 'ShareThis Named AlwaysOn OnMedia 100 Winner', 38, 'javascript:void(0)' ],
		       [ 'EA shows \'Creature Keeper\', \'Spore\' for kids', 21, 'javascript:void(0)' ]
		]
	});
	
	var graphStatsPage = new Ext.Panel({
		iconCls: 'chart',
		frame: false,
		autoWidth: true,
		height: 200,
		layout:'fit',
		border: false,
		items: {
			xtype: 'columnchart',
			store: storeStats,
			xField: 'date',
			yAxis: new Ext.chart.NumericAxis({
				displayName: 'Page Views',
				labelRenderer : Ext.util.Format.numberRenderer('0,0')
			}),
			tipRenderer : function(chart, record, index, series){
				if (series.yField == 'page') {
					return record.data.date + '\n' + 'Page Views: ' + Ext.util.Format.number(record.data.page, '0,0');
				} else {
					return record.data.date + '\n' + 'Unique Page Views: ' + Ext.util.Format.number(record.data.pageUnique, '0,0');
				}
			},
			chartStyle: {
				padding: 10,
				animationEnabled: true,
				font: { name: 'Tahoma', color: 0x444444, size: 11 },
				dataTip: {
					padding: 5,
					border: { color: 0x99bbe8, size:1 },
					background: { color: 0xDAE7F6, alpha: .9 },
					font: { name: 'Tahoma', color: 0x15428B, size: 10, bold: true }
                },
                xAxis: {
                	color: 0x69aBc8,
					majorTicks: {color: 0x69aBc8, length: 4},
					minorTicks: {color: 0x69aBc8, length: 2},
					majorGridLines: {size: 1, color: 0xeeeeee}
				},
				yAxis: {
					color: 0x69aBc8,
					majorTicks: {color: 0x69aBc8, length: 4},
					minorTicks: {color: 0x69aBc8, length: 2},
					majorGridLines: {size: 1, color: 0xdfe8f6}
				}
			},
			series: [{
				type: 'column',
				displayName: 'Page Views',
				yField: 'page',
				style: { image:'/images/analytics/bar.gif', mode: 'stretch', color:0x99BBE8 }
			},{
				type:'line',
				displayName: 'Unique Page Views',
				yField: 'pageUnique',
				style: { color: 0x15428B }
			}]
		}
	});
	
	var graphStatsWidget = new Ext.Panel({
		iconCls: 'chart',
		frame: false,
		autoWidth: true,
		height: 200,
		layout:'fit',
		border: false,
		items: {
			xtype: 'columnchart',
			store: storeStats,
			xField: 'date',
			yAxis: new Ext.chart.NumericAxis({
				displayName: 'Widget Serves',
				labelRenderer : Ext.util.Format.numberRenderer('0,0')
			}),
			tipRenderer : function(chart, record, index, series){
				if (series.yField == 'widget') {
					return record.data.date + '\n' + 'Widget Serves: ' + Ext.util.Format.number(record.data.widget, '0,0');
				} else {
					return record.data.date + '\n' + 'Unique Widget Serves: ' + Ext.util.Format.number(record.data.widgetUnique, '0,0');
				}
			},
			chartStyle: {
				padding: 10,
				animationEnabled: true,
				font: { name: 'Tahoma', color: 0x444444, size: 11 },
				dataTip: {
					padding: 5,
					border: { color: 0x99bbe8, size:1 },
					background: { color: 0xDAE7F6, alpha: .9 },
					font: { name: 'Tahoma', color: 0x15428B, size: 10, bold: true }
                },
                xAxis: {
                	color: 0x69aBc8,
					majorTicks: {color: 0x69aBc8, length: 4},
					minorTicks: {color: 0x69aBc8, length: 2},
					majorGridLines: {size: 1, color: 0xeeeeee}
				},
				yAxis: {
					color: 0x69aBc8,
					majorTicks: {color: 0x69aBc8, length: 4},
					minorTicks: {color: 0x69aBc8, length: 2},
					majorGridLines: {size: 1, color: 0xdfe8f6}
				}
			},
			series: [{
				type: 'column',
				displayName: 'Widget Serves',
				yField: 'widget',
				style: { image:'/images/analytics/bar.gif', mode: 'stretch', color:0x99BBE8 }
			},{
				type:'line',
				displayName: 'Unique Widget Serves',
				yField: 'widgetUnique',
				style: { color: 0x15428B }
			}]
		}
	});
	
	var graphStatsWidgetPerPage = new Ext.Panel({
		iconCls: 'chart',
		frame: false,
		autoWidth: true,
		height: 200,
		layout:'fit',
		border: false,
		items: {
			xtype: 'columnchart',
			store: storeStats,
			xField: 'date',
			yAxis: new Ext.chart.NumericAxis({
				displayName: 'CTR',
				labelRenderer: Ext.util.Format.numberRenderer('0.000%'),
				majorUnit: .1
			}),
			tipRenderer : function(chart, record, index, series){
				if (series.yField == 'ctr') {
					return record.data.date + '\n' + 'CTR: ' + Ext.util.Format.number(record.data.ctr, '0.000%');
				}
			},
			chartStyle: {
				padding: 10,
				animationEnabled: true,
				font: { name: 'Tahoma', color: 0x444444, size: 11 },
				dataTip: {
					padding: 5,
					border: { color: 0x99bbe8, size:1 },
					background: { color: 0xDAE7F6, alpha: .9 },
					font: { name: 'Tahoma', color: 0x15428B, size: 10, bold: true }
                },
                xAxis: {
                	color: 0x69aBc8,
					majorTicks: {color: 0x69aBc8, length: 4},
					minorTicks: {color: 0x69aBc8, length: 2},
					majorGridLines: {size: 1, color: 0xeeeeee}
				},
				yAxis: {
					color: 0x69aBc8,
					majorTicks: {color: 0x69aBc8, length: 4},
					minorTicks: {color: 0x69aBc8, length: 2},
					majorGridLines: {size: 1, color: 0xdfe8f6}
				}
			},
			series: [{
				type:'line',
				displayName: 'CTR',
				yField: 'ctr',
				style: { color: 0x15428B }
			}]
		}
	});

	var tabsStats = new Ext.TabPanel({
		renderTo: 'cntTabsStats',
		activeTab: 0,
		items: [
		        {title: 'Page Views', items: [graphStatsPage]},
		        {title: 'Widget Views', items: [graphStatsWidget]},
		        {title: 'Widget Views/Page View', items: [graphStatsWidgetPerPage]}
		]
	});
	
	var graphDestinationsPie = new Ext.Panel({
		iconCls: 'chart',
		frame: false,
		autoWidth: true,
		height: 200,
		layout: 'fit',
		border: false,
		items: {
			xtype: 'piechart',
			store: storeDestinations,
			dataField: 'count',
			categoryField: 'destination',
			extraStyle: {
				legend: {
					display: 'right',
					padding: 5,
					font: {
						family: 'Tahoma',
						size: 10
					}
				}
			}
		}
	})
	
	var graphDestinationsBar = new Ext.Panel({
		iconCls: 'chart',
		frame: false,
		autoWidth: true,
		height: 200,
		layout: 'fit',
		border: false,
		items: {
			xtype: 'columnchart',
			store: storeDestinations,
			xField: 'destination',
			yAxis: new Ext.chart.NumericAxis({
				displayName: 'Shares',
				labelRenderer: Ext.util.Format.numberRenderer('0,0')
			}),
			chartStyle: {
				padding: 10,
				animationEnabled: true,
				font: { name: 'Tahoma', color: 0x444444, size: 11 },
				dataTip: {
					padding: 5,
					border: { color: 0x99bbe8, size:1 },
					background: { color: 0xDAE7F6, alpha: .9 },
					font: { name: 'Tahoma', color: 0x15428B, size: 10, bold: true }
                },
                xAxis: {
                	color: 0x69aBc8,
					majorTicks: {color: 0x69aBc8, length: 4},
					minorTicks: {color: 0x69aBc8, length: 2},
					majorGridLines: {size: 1, color: 0xeeeeee}
				},
				yAxis: {
					color: 0x69aBc8,
					majorTicks: {color: 0x69aBc8, length: 4},
					minorTicks: {color: 0x69aBc8, length: 2},
					majorGridLines: {size: 1, color: 0xdfe8f6}
				}
			},
			series: [{
				type:'column',
				displayName: 'Count',
				yField: 'count',
				style: { image:'/images/analytics/bar.gif', mode: 'stretch', color:0x99BBE8 }
			}]
		}
	});	

	var tabsDestinations = new Ext.TabPanel({
		renderTo: 'cntTabsDestinations',
		activeTab: 1,
		items: [
		        {title: 'Pie Chart', items: [graphDestinationsPie]},
		        {title: 'Bar Chart', items: [graphDestinationsBar]}
		]
	});
	
	var gridContent = new Ext.grid.GridPanel({
		renderTo: 'cntGridContent',
		width: 680,
		autoHeight: true,
		stripeRows: true,
		store: storeContent,
		columns: [
		          { header: 'Title', width: 605, sortable: true, menuDisabled: true, dataindex: 'title',
		        	renderer: function(value, meta, record, rowIndex, colIndex, store) {
		        	  return '<a href="' + record.data.url + '">' + record.data.title + '</a>';
		          	}
		          },
		          { header: 'Count', width: 75, sortable: true, menuDisabled: true, dataindex: 'count', renderer: Ext.util.Format.numberRenderer('0,0') }
		]
	});
	
	var gridSummary = new Ext.grid.GridPanel({
		iconCls: 'icon-grid',
		renderTo: 'cntGridSummary',
		width: 680,
		autoHeight: true,
		stripeRows: true,
		store: storeStats,
		columns: [
		          { header: 'Date', menuDisabled: true, dataindex: 'date' },
		          { header: 'Pages', menuDisabled: true, dataindex: 'page', renderer: Ext.util.Format.numberRenderer('0,0') },
		          { header: 'Pages (Unique)', menuDisabled: true, dataindex: 'pageUnique', renderer: Ext.util.Format.numberRenderer('0,0') },
		          { header: 'Widgets', menuDisabled: true, dataindex: 'widget', renderer: Ext.util.Format.numberRenderer('0,0') },
		          { header: 'Widgets (Unique)', menuDisabled: true, dataindex: 'widgetUnique', renderer: Ext.util.Format.numberRenderer('0,0') },
		          { header: 'Widgets/Page', menuDisabled: true, dataindex: 'ctr', renderer: Ext.util.Format.numberRenderer('0.000%') },
		],
		viewConfig: {
			forceFit: true
		}
	});
	
	Ext.get('linkExportStats').on('click', function() {
		top.location = '/account/reporting_export.php?data=stats&publisher=' + pubkey + '&domain=' + domain + '&start=' + Ext.get('dateStart').dom.value + '&end=' + Ext.get('dateEnd').dom.value;
		return false;
	});

	Ext.get('linkExportDestinations').on('click', function() {
		top.location = '/account/reporting_export.php?data=destinations&publisher=' + pubkey + '&domain=' + domain + '&start=' + Ext.get('dateStart').dom.value + '&end=' + Ext.get('dateEnd').dom.value;
		return false;
	});

	Ext.get('linkExportSummary').on('click', function() {
		top.location = '/account/reporting_export.php?data=stats&publisher=' + pubkey + '&domain=' + domain + '&start=' + Ext.get('dateStart').dom.value + '&end=' + Ext.get('dateEnd').dom.value;
		return false;
	});
}