/**
 * @author firdaus
 */

iStat = function(){
	
	var statData;
	
	var stat = ['probcat', 'probtype', 'areamain', 'probgroup']
	
	var statCfg = {
		probcat: {swf: 'Pie3D', sswf: 'Pie3D', el: 'chart1', title: 'ADUAN MENGIKUT KATEGORI MASALAH (%25)', bgC: '9BAA80'},
		probtype: {swf: 'Column2D', sswf: 'Column2D', el: 'chart2', title: 'ADUAN MENGIKUT JENIS MASALAH (%25)', bgC: '99CCFF'},
		areamain: {swf: 'Column2D', sswf: 'Column2D', el: 'chart3', title: 'ADUAN MENGIKUT KAWASAN DUN  (%25)', bgC: '99CCFF'},
		probgroup: {swf: 'Doughnut3D', sswf: 'Doughnut2D', el: 'chart4', title: 'ADUAN MENGIKUT KUMPULAN PELAKSANA (%25)', bgC: '9BAA80'}
	};
		
	var cc = new Ext.XTemplate(
		'<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse">',
          '<tr>',
            '<td width="50%" align="center" id="chart1"><img class="loadingIndicator" src="widget/chartsv2/spinning_wheel_throbber.gif" width="32" height="32"></td>',
            '<td align="center" id="chart2"><img src="widget/chartsv2/spinning_wheel_throbber.gif" width="32" height="32"></td>',
          '</tr>',
          '<tr>',
            '<td width="50%" align="center" id="chart3"><img src="widget/chartsv2/spinning_wheel_throbber.gif" width="32" height="32"></td>',
            '<td align="center" id="chart4"><img src="widget/chartsv2/spinning_wheel_throbber.gif" width="32" height="32"></td>',
          '</tr>',
        '</table>'
	);
	
	return {
		
		init:function(){
			
			this.swf = this.getTemplate();
	    	this.swf.compile();
	    	this.load();			
			
		},
		
		load: function() {
		
			Ext.Ajax.request
		    ({
		      url: 'widget/chartsv2/data.cfc',
		      params: {method: 'statistic'},
		      method: 'post',
		      scope: this,
		      success: function(response, options) 
		      {
		      	//console.log(Ext.decode(response.responseText));
		      	statData = Ext.decode(response.responseText);
		      	
		      	this.constructGrid();
		      	
		      },
		      failure: function(response, options)
		      {
				alert('Invalid reply from server!')
		      }
		    });
			
		},
		
		constructGrid: function() {
			
			var el;
			Ext.get('statBack').hide();
			cc.overwrite('chartContainer',{});
			
			Ext.each(stat, function(i,pos){
				
				el = this.swf.overwrite(statCfg[i].el, {
					
					id: i,
					sPos: pos,
					caption: statCfg[i].title,
					showLabels: 0,
			      	width: 384,
			      	height: 220,
			      	swf: 'widget/chartsv2/charts/' + statCfg[i].swf + '.swf',
			      	singleView: false,
					bgcolor: statCfg[i].bgC,
			      	data: statData[i]
					
				}, true);
				
			}, this)
			
		},
		
		singleView: function(sPos) {
		
			Ext.get('statBack').show();
			
			this.swf.overwrite('chartContainer', {
			
				singleView: true,
				caption: statCfg[stat[sPos]].title,
				showLabels: 1,
				bgcolor: statCfg[stat[sPos]].bgC,
				width: 768,
				height: 440,
				swf: 'widget/chartsv2/charts/' + statCfg[stat[sPos]].sswf + '.swf',
				data: statData[stat[sPos]]
				
			}, this);	
			
		},
		
		getTemplate : function(){
 	
	 		if(Ext.isIE)
	 			return new Ext.XTemplate
				    (
				      '<object id="fc{id}" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}">',
				      '<param name="movie" value="{swf}" />',
				      '<param name="quality" value="high" />',
				      '<param name="wmode" value="opaque" />',
				      '<param name="allowScriptAccess" value="always" />',
				      '<param name="flashvars" value="chartWidth={width}&chartHeight={height}&debugMode=0&DOMId=fc{id}&registerWithJS=0&scaleMode=noScale&lang=EN&dataXML=',
				      '<chart decimals=\'1\' showYAxisValues=\'0\' showLabels=\'{showLabels}\' formatNumberScale=\'0\' bgColor=\'{bgcolor}\' bgAlpha=\'40,100\' bgRatio=\'0,100\' palette=\'3\' caption=\'{caption}\' subCaption=\'{subcaption}\' xAxisName=\'{xAxisName}\' yAxisName=\'{yAxisName}\' clickURL=\'{[this.hotspot(values.singleView, values.sPos)]}\'>',
				      	'<tpl for="data">',
				      		'<set value=\'{TOTAL}\' label=\'{[parent.foreignKey == "probgroup" ? siteAbbr[values.LABEL] : values.LABEL]}\' />',
				      	'</tpl>',
				      '</chart>',
				      '" />',
				      '</object>',
				     	{
					     hotspot: function(sv, p){
					         if(sv)
					         	return '';
					         else
					         	return 'Javascript:iStat.singleView('+p+')';
					     }}
				    )
			else
				return new Ext.XTemplate
				    (
				      '<embed id="fc{id}" src="{swf}" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" ',
				      'flashvars="chartWidth={width}&chartHeight={height}&debugMode=0&DOMId=fc{id}&registerWithJS=0&scaleMode=noScale&lang=EN&dataXML=',
				      '<chart decimals=\'1\' showYAxisValues=\'0\' borderAlpha=\'1\' showLabels=\'{showLabels}\' formatNumberScale=\'0\' bgColor=\'{bgcolor}\' bgAlpha=\'40,100\' bgRatio=\'0,100\' palette=\'3\' caption=\'{caption}\' subCaption=\'{subcaption}\' xAxisName=\'{xAxisName}\' yAxisName=\'{yAxisName}\' clickURL=\'{[this.hotspot(values.singleView, values.sPos)]}\'>',
				      	'<tpl for="data">',
				      		'<set value=\'{TOTAL}\' label=\'{[parent.foreignKey == "probgroup" ? siteAbbr[values.LABEL] : values.LABEL]}\' />',
				      	'</tpl>',
				      	'<styles>',
					      '<definition>',
					         '<style name=\'myFont\' type=\'font\' isHTML=\'1\' bold=\'1\' size=\'8\' ></style>',
					      '</definition>',
					      '<application>',
					         '<apply toObject=\'DataLabels\' styles=\'myFont\' />',
					      '</application>',
					   ' </styles>',
				      '</chart>',
				      '" type="application/x-shockwave-flash" width="{width}" height="{height}" wmode="opaque" />',
				     	{
					     hotspot: function(sv, p){
					         if(sv)
					         	return '';
					         else
					         	return 'Javascript:iStat.singleView('+p+')';
					     }}
				    )
	 		
	 	}
		
	};
}();


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