var underlyingCNHKChart = {
	chart : null,
	container : "",
	isHSI: false,
	wtype : null,
	type : null,
	ctype : null,
	fromdate : null,
	todate : null,
	mode : "desktop",
	container : "",
	vol_unit: "",
	title: "",
	init : function(code, start, end){
		var self = this;	
		self.labels["edu"] = self.labels["zh_cn"];
		self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";	
		$.getJSON('/?q=/'+lang+'/data/chart/underlyingCNHKChart/code/'+code+'/end/'+end+'/start/'+start, function(_data) {
			var data = self.decode(_data);
			$('#underlyingCNHKChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
				self.chart = chart;
				self.drawBackground();
			});
		});
	},
	decode : function(_data){
		return _data.mainData;
	},
	colors : {'bar1' : "#1b435b",'bar2' : "#8b460e", 'last' : "#000000",'zero' : "#000000" },
	margin : {mobile: 70, desktop: 80},
	chartheight : {mobile: 218, desktop: 262},
	getJSON : function(data){
		var bar = data.bar;	
		var bar_min = data.bar_min;	
		var bar_max = data.bar_max;	
		var last = data.last;	
		var last_max = data.last_max;	
		var last_min = data.last_min;	
		vol_unit = data.bar_unit;	
		var self = this;
		return {
			chart : {
				marginBottom: 50,
				marginLeft: 70,
				marginRight: 70,
				marginTop: 50,
				spacingTop: -5,
				height: 308,
				events: {
					redraw: function(event) {
						self.redraw();
					}
				}
			},
			plotOptions: {
				line: {
					events: {
						legendItemClick: function () {
							return false; 
						}
					}
				},
				series: {
	                grouping: false
	            },
			},
			tooltip: {
				useHTML: true,
				formatter: function() {
					var _html = '<div class="tooltip">' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b>';
				
               		var index = this.x;
					if(bar[this.points[0].point.index][1]!=null){
						var _var =  bar[this.points[0].point.index][1];
						var _string = '-';
						//_string = _var + vol_unit;
						if(_var!=0){
							_string = (lang=='en_hk')?formatTurnover(_var*1000000000, lang, ''):formatTurnover(_var*100000000, lang, '');
							_string = _string.replace("+", "");
							//_string = _string.replace("-", self.labels[lang].outText);
						}
						_html += '<br/><span style="color:#000000;">' + self.labels[lang].tooltip1 +' : ' + _string +  '</span> ';
					}
					if(last[this.points[0].point.index][1]!=null){
						var _var = addcomma(last[this.points[0].point.index][1].toFixed(1));						
						_html += '<br/><span style="color:#000000;">' + self.labels[lang].ytitle2 + self.labels[lang].hkd +' : ' + _var +  '</span> ';
					}					
					return _html;
					
				}
			},
			rangeSelector : {
				inputEnabled:false,
				enabled: false
			},

			xAxis:{
				 type: 'datetime', 
				 labels: { 
				 	formatter: function () { 
				 		//return Highcharts.dateFormat('%d/%m', this.value); 
				 		if(lang=="en_hk"){
				 			return Highcharts.dateFormat('%b %d', this.value);
				 		}else{
				 			return Highcharts.dateFormat('%m月%d日', this.value);
				 		}
				 	} 
				 },
			},
			yAxis: [{
						title: {
							useHTML: false,
							text: "",					
						},
						labels:{
							useHTML: false,
							align:'left',
							x: -50,
							y: 5,	
							formatter: function () {
								if((this.value)>0){
									color = ' style="color:'+self.colors["bar1"]+'";';
								}else if((this.value)<0){
									color =  ' style="color:'+self.colors["bar2"]+'";';
								}else{
									color = '';
								}	
								var _html =  '<span '+color+'>' +  (this.value).toFixed(2) + '</span>';
								return _html;					
							}						
						},
						opposite: false,
						tickAmount : 7,
						showLastLabel: true,
						gridLineDashStyle: 'Solid',
						max: bar_max,
						min: bar_min
					},
					{
						title: {
							useHTML: false,
							text: "",					
						},
						labels:{
							align:'right',
							x: 40,
							y: 5,	
							formatter: function () {
								return (this.value).toFixed(2);					
							},
							style: {color: "#000"}							
						},
						opposite: true,
						tickAmount : 7,
						showLastLabel: true,
						gridLineDashStyle: 'Solid',
						/*max: last_max,
						min: last_min*/
					}],
			navigator : {
				enabled : false,
				// top:540
			},
			scrollbar : {
				enabled : false
			},
			series : [{
				data : bar,
				color : this.colors["bar1"],
				negativeColor: this.colors["bar2"],
				type: 'column',
				yAxis: 0,
			},{
				data : last,
				color : this.colors["last"],
				yAxis: 1,
			}],
			exporting: {
				enabled: false
			}
		};
	},
	redraw: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;

		var offsetx = 0;
		var offsety = 15;
		
		this.addLegendText(offsetx-30, offsety,this.labels[lang].ytitle1+'('+vol_unit+')','chart1_0',"#000");
		this.addLegendText(chart.chartWidth - 95, offsety,this.labels[lang].ytitle2,'chart1_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 :{
			ytitle1: "南向合計淨買入/賣出金額",
			ytitle2: "正股價格",
			tooltip1: '淨買入/賣出金額',
			inText: '流入',
			outText: '流出',
			hkd: '(港元)'
		},
		zh_cn :{
			ytitle1: "南向合计净买入/卖出金额",
			ytitle2: "正股价格",
			tooltip1: '净买入/卖出金额',
			inText: '流入',
			outText: '流出',
			hkd: '(港元)'
		},
		en_hk :{
			ytitle1: "Southbound Net Inflow/Net Outflow",
			ytitle2: "Price",
			tooltip1: 'Net Inflow/Net Outflow',
			inText: 'In',
			outText: 'Out',
			hkd: '(HKD)'
		},
	},
}