var cnhkBarChart = {
	chart : null,
	container : "",
	isHSI: false,
	isHome: false,
	wtype : null,
	type : null,
	ctype : null,
	fromdate : null,
	todate : null,
	mode : "desktop",
	container : "",
	vol_unit: "",
	title: "",
	init : function(type,isHome){
		var self = this;	
		self.labels["edu"] = 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"];
		if (isHome){
			this.isHome = true;
		}
		self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";	
		$.getJSON('/?q=/'+lang+'/data/chart/cnhkBarChart/type/'+type, function(_data) {
			var data = self.decode(_data);
			if (self.isHome){
				var _date = new Date(data.total[data.total.length-1][0]);
				$(".cnhk_stime").html(data.sdate);
			}
			$('#cnhkBarChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
				self.chart = chart;
				self.drawBackground();
			});
		});
	},
	init : function(type,start, end, isHome){
		var self = this;	
		self.labels["edu"] = 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"];
		if (isHome){
			this.isHome = true;
		}
		this.type = (type!='')?type:'total';
		self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";	
		$.getJSON('/?q=/'+lang+'/data/chart/cnhkBarChart/type/'+type+'/end/'+end+'/start/'+start, function(_data) {
			var data = self.decode(_data);
			if (self.isHome){
				var _date = new Date(data.total[data.sh.length-1][0]);
				$(".cnhk_stime").html(data.sdate);
			}
			$('#cnhkBarChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
				self.chart = chart;
				self.drawBackground();
			});
		});
	},
	decode : function(_data){
		return _data.mainData;
	},
	decode_date : function(_data){
		return _data.date;
	},
	colors : {line1 : "#000",sz : "#88abd5", sh : "#ed8b00", total : "#1c6a64"},
	margin : {mobile: 70, desktop: 80},
	chartheight : {mobile: 218, desktop: 262},
	getJSON : function(data){
		var self = this;
		var sh = data.sh;	
		var sz = data.sz;	
		var total = data.total;			
		var barData =  {sz : sz, sh : sh, total : total};
		
		var vol_max = data.vol_max;	
		var vol_min = data.vol_min;
		var percent = data.percent;	
		var percent_max = data.percent_max;	
		var percent_min = data.percent_min;	
		vol_unit = data.vol_unit;	
		title = data.title;	
		
		return {
			chart : {
				marginBottom: 50,
				marginLeft: 50,
				marginRight: 50,
				marginTop: 50,
				spacingTop: -5,
				height: (self.isHome)?350:400,
				events: {
					redraw: function(event) {
						self.redraw();
					}
				}
			},
			plotOptions: {
				line: {
					events: {
						legendItemClick: function () {
							return false; 
						}
					}
				},
				column: {
					stacking: 'normal',
				},
				series: {
	                grouping: false
	            },
			},
			tooltip: {
				useHTML: true,
				formatter: function() {
					var _html = '<div class="tooltip">' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b>';
				
					if(total[this.points[0].point.index][1]!=null){
						var isNoData = (sh[this.points[0].point.index][1]==0 || sz[this.points[0].point.index][1]==0)?true:false;
						_html += self.formatTooltipQuotaUsage(total[this.points[0].point.index][1], self.labels[lang].total, isNoData);
					}				
					if(sh[this.points[0].point.index][1]!=null){
						var isNoData = (sh[this.points[0].point.index][1]==0)?true:false;
						_html += self.formatTooltipQuotaUsage(sh[this.points[0].point.index][1], self.labels[lang].sh, isNoData);
					}
					if(sz[this.points[0].point.index][1]!=null){
						var isNoData = (sz[this.points[0].point.index][1]==0)?true:false;
						_html += self.formatTooltipQuotaUsage(sz[this.points[0].point.index][1], self.labels[lang].sz, isNoData);
					}			
					_html += '<br/><span style="color:#000000;">' +  self.labels[lang].ytitle2 + ': ' + percent[this.points[0].point.index][1].toFixed(1) + '%</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:{
							align:'right',
							x: 40,
							y: 5,	
							formatter: function () {
								return (this.value).toFixed(1);					
							},
							style: {color: this.colors[this.type]}							
						},
						opposite: true,
						tickAmount : 6,
						showLastLabel: true,
						gridLineDashStyle: 'Solid',
						max: vol_max,
						min: vol_min
					},
					{
						title: {
							useHTML: false,
							text: "",					
						},
						labels:{
							align:'left',
							x: -40,
							y: 5,	
							formatter: function () {
								return (this.value).toFixed(1) + "%";					
							},
							style: {color: "#000"}							
						},
						opposite: false,
						tickAmount : 6,
						showLastLabel: true,
						gridLineDashStyle: 'Solid',
						max: percent_max,
						min: percent_min
					}],
			navigator : {
				enabled : false,
				// top:540
			},
			scrollbar : {
				enabled : false
			},
			series : [{
				data : barData[this.type],
				color : this.colors[this.type],
				type: 'column',
				yAxis: 0,
			},{
				data : percent,
				color : this.colors["line1"],
				yAxis: 1,
			}],
			exporting: {
				enabled: false
			}
		};
	},
	redraw: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;

		var offsetx = 0;
		var offsety = 10;
		this.addLegendText(offsetx-30, offsety,this.labels[lang].ytitle2,'chart2_0',"#000");
		
		if (lang=='en_hk'||lang=='en-hk'){
// 			this.addLegendText(offsetx-30, offsety,this.labels[lang].ytitle1+'('+vol_unit+')','chart2_0',"#000");
			this.addLegendText(chart.chartWidth - 170, offsety, this.labels[lang].ytitle1+'('+vol_unit+	self.labels[lang].rmb+')','chart2_1',this.colors[this.type]);
		}else{
			
			this.addLegendText(chart.chartWidth - 150, offsety, this.labels[lang].ytitle1+'('+vol_unit+	self.labels[lang].rmb+')','chart2_1',this.colors[this.type]);
		}
	},
	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();
	},
	formatTooltipQuotaUsage: function(number, title, isNoData){
		var self = this;
		//var _var =  number.toFixed(2);
		var _var =  number;
		var _string = '-';
		if(_var!=0){
			_string = (lang=='en_hk')?formatTurnover(_var*1000000000, lang, ''):formatTurnover(_var*100000000, lang, '');
			_string = _string.replace("+", self.labels[lang].inText);
			_string = _string.replace("-", self.labels[lang].outText);
		}
		var html = '<br/><span style="color:#000000;">' + self.labels[lang].ytitle1 + '('+ title+') : ' + _string +  	self.labels[lang].rmb +'</span> ';
		if(isNoData){
			html = '<br/><span style="color:#000000;">' + self.labels[lang].ytitle1 + '('+ title+') : ' + self.labels[lang].nodata  +'</span> ';
		}
		return html;
	},
	labels : {
		zh_hk :{
			ytitle1: "使用額度",
			ytitle2: "港股通成交佔大市成交",
			sh: '滬港通',
			sz: '深港通',
			total: '南向合計',
			inText: '流入',
			outText: '流出',
			rmb: '人民幣',
			nodata: '使用額度低於70%*'
		},
		zh_cn :{
			ytitle1: "使用额度",
			ytitle2: "港股通成交占大市成交",
			sh: '沪港通',
			sz: '深港通',
			total: '南向合计',
			inText: '流入',
			outText: '流出',
			rmb: '人民币',
			nodata: '使用额度低于70%*'
		},
		en_hk :{
			ytitle1: "Quota Usage",
			ytitle2: "Stock Connect Turnover/<br>Cash Turnover %",
			sh: 'Shanghai Southbound',
			sz: 'Shenzhen Southbound',
			total: 'Combined Northbound',
			inText: 'Buy ',
			outText: 'Sell ',
			rmb:  ' in RMB',
			nodata: 'Quota Usage is less than 70%*'
		},
	},
}