Highcharts.setOptions({

    lang: {
        decimalPoint: '.',
        thousandsSep: ','
    }

});


var cnMoneyflowChart = {
	chart : null,
	container : "",
	isHSI: false,
	isHome: false,
	wtype : null,
	type : null,
	ctype : null,
	fromdate : null,
	todate : null,
	mode : "desktop",
	container : "",
	vol_unit: "",
	unit:"",
	title: "",
	init : function(){
		var self = this;	
		self.labels["edu"] = self.labels["zh_cn"];
		self.labels["zh-hk"] = self.labels["zh_hk"];
		self.labels["en-hk"] = self.labels["en_hk"];
		self.labels["zh-cn"] = self.labels["zh_cn"];
		self.labels["edu-zh_hk"] = self.labels["zh_hk"];
		self.labels["edu-en_hk"] = self.labels["en_hk"];
		self.labels["edu-zh_cn"] = self.labels["zh_cn"];
		
		self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";	
		$.getJSON('/?q=/'+lang+'/data/chart/cnMoneyflowChart/', function(_data) {
			var data = self.decode(_data);
			$(".bar_chart_area .stime").html(_data.stime);
			$('#cnMoneyflowChartContainer').highcharts('StockChart',self.getJSON(_data), function (chart){
				self.chart = chart;
				self.drawBackground();
			});
		});
	},
	decode : function(_data){
		return _data.mainData;
	},
// 	colors : {ftse: "#5484b5",msci : "#af81fe", csi300 : "#babc01"},
	colors : {up: "#1a7b99",down : "#e26e00"},
	margin : {mobile: 70, desktop: 80},
	chartheight : {mobile: 218, desktop: 262},
	getJSON : function(data){
		var self = this;
		var ftse = data.mainData.ftse;	
		var msci = data.mainData.msci;	
		var csi300 = data.mainData.csi300;		
		var total = data.mainData.total;			
		self.unit = data.unit;

		var _max = 0;
		for(i=0;i<total.length;i++){
			if(total[i][1]>_max){
				_max = total[i][1];
			}
		}
		
		return {
			chart : {
				marginBottom: 50,
				marginLeft: 50,
				marginRight: 50,
				marginTop: 50,
				spacingTop: -5,
				height: 400,
				events: {
					redraw: function(event) {
						self.redraw();
					}
				}
			},
			plotOptions: {
				column: {
					stacking: 'normal',
				},
				series: {
	                grouping: false
	            }
			},
			
			tooltip: {
// 				xDateFormat: '%y年%m月',
// 				valueSuffix: self.unit 
				useHTML: true,
				formatter: function() {
					var dateformat = "%y年%m月";
					if(lang=="en_hk" || lang=="en-hk"){
						dateformat = "%b %y";
					}
					var _html = '<div class="tooltip">' + Highcharts.dateFormat(dateformat, this.x) + '</b>';
					var key = Highcharts.dateFormat('%y%m', this.x);
					_html += '<br/><span>' +  self.labels[lang].ftse + ': ' + ftse[key] + data.unit_tooltip + '</span> ';
					_html += '<br/><span>' +  self.labels[lang].msci + ': ' + msci[key] + data.unit_tooltip + '</span> ';
					_html += '<br/><span>' +  self.labels[lang].csi300 + ': ' + csi300[key] + data.unit_tooltip + '</span> ';
					_html += '</div>';
					return _html;
				}
				
			},
			
			rangeSelector : {
				inputEnabled:false,
				enabled: false
			},

			xAxis:{
// 				 categories: data.categories
				type: 'datetime',
				labels: {
					style: {color: "#000" ,textOverflow: 'none'},
					rotation: 0,
					formatter : function() {
						if(self.mode=="mobile"){
							//var value = Highcharts.dateFormat('%H:%M', this.value);
							if(Highcharts.dateFormat('%m', this.value)=="01"){
								if(lang=="en_hk" || lang=="en-hk"){
									return Highcharts.dateFormat('Jan %y', this.value);
								}else{
									return Highcharts.dateFormat('%y年1月', this.value);
								}
							}else if(Highcharts.dateFormat('%m', this.value)*1%2 == 1){
								if(lang=="en_hk" || lang=="en-hk"){
									return Highcharts.dateFormat('%b', this.value);
								}else{
									return Highcharts.dateFormat('%m', this.value)*1 + '月';
								}
							}else{
								return '';
							}
						}else{
							if(lang=="en_hk" || lang=="en-hk"){
								return Highcharts.dateFormat('%b %y', this.value);
							}else{
								return Highcharts.dateFormat('%y年', this.value)+Highcharts.dateFormat('%m', this.value)*1 + '月';
							}
						}
					},
				},
				tickPositioner: function() {
						return  data.categories;
					}
			},
			yAxis: [{
						title: {
							useHTML: false,
							text: "",					
						},
						labels:{
							align:'left',
							x: -40,
							y: 5,	
							format: '{value:,.0f}',
// 							formatter: function () {
// 								return (this.value).toFixed(0);					
// 							},
							style: {color: "#000"}							
						},
						opposite: false,
						tickAmount : 7,
						showLastLabel: true,
						gridLineDashStyle: 'Solid',
						stackLabels: {
							enabled: true,
							formatter: function () {
								var sum = 0;
								var series = this.axis.series;
					
								for (var i = 0; i < series.length; i++){
									for(var j = 0; j < series[i].xData.length; j++) {
										if(series[i].xData[j] == this.x) {
											sum += series[i].yData[j];
											break;
										}
									}
								}
								if(sum>0){
									return "+" + sum + data.unit_tooltip;
								}else{
									return sum + data.unit_tooltip;
								}
							
							}
						},
						max: _max*1.2
					}],
			navigator : {
				enabled : false,
				// top:540
			},
			scrollbar : {
				enabled : false
			},
			series : [
			{
				data : total,
				color : this.colors['up'],
				negativeColor: this.colors["down"],
				name: this.labels[lang].total,
				type: 'column',
			}
			],
			exporting: {
				enabled: false
			}
		};
	},
	redraw: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;

		var offsetx = 0;
		var offsety = 10;
		// if (lang=='en_hk'){
// 			this.addLegendText(offsetx-30, offsety,this.labels[lang].ytitle1+'('+vol_unit+')','chart2_0',"#000");
// 			this.addLegendText(chart.chartWidth - 175, offsety,this.labels[lang].ytitle2,'chart2_1',"#000");
// 		}else{
			this.addLegendText(offsetx-30, offsety, self.unit+this.labels[lang].currency,'ytitle1',"#000");
// 			this.addLegendText(chart.chartWidth - 175, offsety,this.labels[lang].ytitle2,'chart2_1',"#000");
// 		}
	},
	addLegendText: function(x,y,text,i, color){
		var chart = this.chart;
		$("#drawLegendRect"+i).remove();
		$("#drawLegendText"+i).remove();
		/*	
		chart.renderer.rect(x, y, 25,8, 0).attr({
				fill: color,
				'stroke-width': 0,
				id : 'drawLegendRect'+i,
				zIndex: 5,
			}).add();
		*/	
		chart.renderer.label(text, x+30, y-8, '', '' + '', '' + '')
			.css({
				color: color,
				fontSize:'12px'
			})
			.attr({           
				zIndex: 5,
				id: 'drawLegendText'+i,
			})
			.add();
	},
	drawBackground: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;
		this.redraw();
	},
	labels : {
		zh_hk :{
			ftse: "富時中國A50指數",
			msci: "MSCI A50指數",
			csi300: '滬深300指數',
			yTitle: "A股指數ETF資金流向",
			currency: "港元"
		},
		zh_cn :{
			ftse: "富时中国A50指数",
			msci: "MSCI A50指数",
			csi300: '沪深300指数',
			yTitle: "A股指数ETF资金流向",
			currency: "港元"
		},
		en_hk :{
			ftse: "FTSE China A50 Index",
			msci: "MSCI A50 Index",
			csi300: 'CSI 300 Index',
			yTitle: "A-Share Index ETF Money Flow",
			currency: " (HKD)"
		},
	},
}