$(window).on('resize.hsiCbbcBandChart', function(e) {
	//console.log('resize');
	 hsiCbbcBandChart.resize();
});	

var hsiCbbcBandChart = {
	chart : null,
	type : null,
	fromdate : null,
	todate : null,
	mode : "desktop",
	container : "",
	lineWidth: 3,
	init : function(){
		var self = this;	
		self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";
		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"]
		// console.log('/?q=/'+lang+'/data/chart/hsiCbbcBandChart/type/'+type);
		$.getJSON('/?q=/'+lang+'/data/chart/hsiCbbcBandChart/', function(_data) {
			var data = self.decode(_data);

			$('#hsiCbbcBandChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
				self.chart = chart;
				self.drawBackground();
				
				var last_index = data.length-1;
				$("#hsi_cbbc_band .summary_date").html(data[last_index]["udate"]);
				
				$("#hsi_cbbc_band .summary_area .hsi span").html(data[last_index]["hsi_close"]);
				$("#hsi_cbbc_band .summary_area .bull_ko span").html(data[last_index]["bull_band"]);
				$("#hsi_cbbc_band .summary_area .bull_number span").html(data[last_index]["bull_delta"]);
				
				$("#hsi_cbbc_band .summary_area .ratio span").html(data[last_index]["hsi_band"]);
				$("#hsi_cbbc_band .summary_area .bear_ko span").html(data[last_index]["bear_band"]);
				$("#hsi_cbbc_band .summary_area .bear_number span").html(data[last_index]["bear_delta"]);
			});
		});
	},
	decode : function(_data){
		return _data.mainData;
	},
	colors : {line1 : "#595959", line2 : "#1c6a64", line3 : "#cfa93e", line4 : "#595959", bar1 : "#1c6a64", bar2 : "#cfa93e"},
	margin : {mobile: 70, desktop: 70},
	chartTotalHeight : {mobile: 900, desktop: 900},	
	yaxisTop: {1:{mobile:70, desktop:50},2:{mobile:380, desktop:400}, 3:{mobile:650, desktop:650}},
	yaxisHeight: {1:{mobile:260, desktop:300},2:{mobile:200, desktop:200}, 3:{mobile:200, desktop:200}},
	getJSON : function(data){
		var self = this;
		var bull_band = [];
		var bear_band = [];
		var hsi_close = [];
		var hsi_band = [];
		var bull_delta = [];
		var bear_delta = [];
		var udate = [];
		var tts = [];
		var chart1_max = 0;
		var chart2_max = 0;
		var chart3_max = 0;
		for (i = 0; i < data.length; i++) {
			if(data[i]["bull_band"]*1>chart1_max){
				chart1_max = data[i]["bull_band"]*1;
			}
			if(data[i]["bear_band"]*1>chart1_max){
				chart1_max = data[i]["bear_band"]*1;
			}
			if(data[i]["hsi_close"]*1>chart1_max){
				chart1_max = data[i]["hsi_close"]*1;
			}
			if(data[i]["hsi_band"]*1>chart2_max){
				chart2_max = data[i]["hsi_band"]*1;
			}
			if((data[i]["bull_delta"]*1+data[i]["bear_delta"]*1)>chart3_max){
				chart3_max = (data[i]["bull_delta"]*1+data[i]["bear_delta"]*1);
			}
			bull_band.push([data[i]["tts"], data[i]["bull_band"]*1]);
			bear_band.push([data[i]["tts"], data[i]["bear_band"]*1]);
			hsi_close.push([data[i]["tts"], data[i]["hsi_close"]*1]);
			hsi_band.push([data[i]["tts"], data[i]["hsi_band"]*1]);
			bull_delta.push([data[i]["tts"], data[i]["bull_delta"]*1]);
			bear_delta.push([data[i]["tts"], data[i]["bear_delta"]*1]);
			tts.push(data[i]["tts"]);
		}
		
		var self = this;
		return {
			chart : {
             	//marginLeft: self.margin[self.mode],
				marginRight: self.margin[self.mode],
				marginBottom: 50,
//				marginTop: self.yaxisTop[1][self.mode],
				spacingTop: -5,
				height: self.chartTotalHeight[self.mode],
				events: {
					redraw: function(event) {
//						self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";
// 						self.redraw();
						self.drawBackground();						
					}
				}
			},
			plotOptions: {
				series: {
	                grouping: false,
	                dataGrouping: {
							enabled : false
						}	
	            },
	           column: {
					stacking: 'normal',
				}
			},
			tooltip: {
				useHTML: true,
				crosshairs: [{
			        width: 1,
			        color: "#C0C0C0",
			    }],
				formatter: function() {
					var index = this.points[0].point.index;
					// console.log(related.length);
					var _html = '<div class="tooltip">' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b>';
					_html += '<br/><b><span style="color:#000000;">'+self.labels[lang].line1Title+':</span> ' + addcomma(this.points[0].y)+ '';
					_html += '<br/><b><span style="color:#000000;">'+self.labels[lang].line2Title+':</span> ' + addcomma(this.points[1].y)+ '';
					_html += '<br/><b><span style="color:#000000;">'+self.labels[lang].line3Title+':</span> ' + addcomma(this.points[2].y)+ '';	
					_html += '<br/><b><span style="color:#000000;">'+self.labels[lang].line4Title+':</span> ' + this.points[3].y+ '';	
					_html += '<br/><b><span style="color:#000000;">'+self.labels[lang].bar1Title+':</span> ' + addcomma(this.points[5].y)+ '';	
					_html += '<br/><b><span style="color:#000000;">'+self.labels[lang].bar2Title+':</span> ' + addcomma(this.points[4].y)+ '';
					return _html;
				}
			},
			rangeSelector : {
				inputEnabled:false,
				enabled: false
			},
			xAxis:[
			{
				 type: 'datetime', 
				 labels: { 
				 	formatter: function () { 
				 		return Highcharts.dateFormat('%d/%m', this.value); 
				 	} 
				 },
			}
			],
			yAxis: [
			{
				max: chart1_max,
				title: {
					text: '',		
					rotation: 0,
				},
				labels:{
					align:'right',
					x: 45,
					y: 5,				
					formatter: function () {
						return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");					
					}   
				},
				offset: 0,
				tickAmount : 5,
				height: self.yaxisHeight[1][self.mode],
				top: self.yaxisTop[1][self.mode],
				opposite: true,
				showLastLabel: true,
				showFirstLabel: false,
			},
			{
				max: chart2_max,
				title: {
					text: '',		
					rotation: 0,
				},
				labels:{
					align:'right',
					x: 45,
					y: 5,				
					formatter: function () {
						return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");					
					}   
				},
				top: self.yaxisTop[2][self.mode],
				tickAmount : 6,
				height: self.yaxisHeight[2][self.mode],
				opposite: true,
				showLastLabel: true,
				showFirstLabel: false,
			},
			{
				max: chart3_max,
				title: {
					text: '',		
					rotation: 0,
				},
				labels:{
					align:'right',
					x: 45,
					y: 5,				
					formatter: function () {
						return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");					
					}   
				},
				top: self.yaxisTop[3][self.mode],
				tickAmount : 6,
				height: self.yaxisHeight[3][self.mode],
				opposite: true,
				showLastLabel: true,
				showFirstLabel: false,
			}
			],
			navigator : {
				enabled : false,
			},
			scrollbar : {
				enabled : false
			},
			series : [{
				name : this.labels[lang].line1Title,
				data : hsi_close,
				color : this.colors["line1"],
				lineWidth: this.lineWidth, 
				yAxis: 0,
			},
			{
				name : this.labels[lang].line2Title,
				data : bull_band,
				color : this.colors["line2"],
				lineWidth: this.lineWidth, 
				yAxis: 0,
			},
			{
				name : this.labels[lang].line3Title,
				data : bear_band,
				color : this.colors["line3"],
				lineWidth: this.lineWidth, 
				yAxis: 0,
			},
			{
				name : this.labels[lang].line4Title,
				data : hsi_band,
				color : this.colors["line4"],
				lineWidth: this.lineWidth, 
				yAxis: 1,
			},
			{
				name : this.labels[lang].bar2Title,
				data : bear_delta,
				color : this.colors["bar2"],
				yAxis: 2,
				type: 'column'
			},
			{
				name : this.labels[lang].bar1Title,
				data : bull_delta,
				color : this.colors["bar1"],
				yAxis: 2,
				type: 'column'
			}
			],
			exporting: {
				enabled: false
			}
		};
	},
	redraw: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;
	},
	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:'15px'
			})
			.attr({           
				zIndex: 5,
				id: 'drawLegendText'+i,
			})
			.add();
	},
	drawBackground: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;
		this.redraw();
				
		var offsetx =	 20;
		var offsety = 5;
		var textHeight = 20;
		//chart 1
		if(self.mode=="desktop"){
			this.addLegendText(offsetx,self.yaxisTop[1][self.mode]-textHeight-offsety,this.labels[lang].line1Title,1,this.colors["line1"]);
			if(lang=='en_hk'){
				this.addLegendText(offsetx + 100,self.yaxisTop[1][self.mode]-textHeight-offsety,this.labels[lang].line2Title,2,this.colors["line2"]);
				this.addLegendText(offsetx + 310,self.yaxisTop[1][self.mode]-textHeight-offsety,this.labels[lang].line3Title,3,this.colors["line3"]);
			}else{
				this.addLegendText(offsetx + 140,self.yaxisTop[1][self.mode]-textHeight-offsety,this.labels[lang].line2Title,2,this.colors["line2"]);
				this.addLegendText(offsetx + 325,self.yaxisTop[1][self.mode]-textHeight-offsety,this.labels[lang].line3Title,3,this.colors["line3"]);
			}
		
			//chart 2
			this.addLegendText(offsetx,self.yaxisTop[2][self.mode]-textHeight-offsety,this.labels[lang].line4Title,4,this.colors["line4"]);
		
			//chart 3
			this.addLegendText(offsetx, self.yaxisTop[3][self.mode]-textHeight-offsety,this.labels[lang].bar1Title,5,this.colors["bar1"]);		
			if(lang=='en_hk'){
				this.addLegendText(offsetx + 280, self.yaxisTop[3][self.mode]-textHeight-offsety,this.labels[lang].bar2Title,6,this.colors["bar2"]);
			}else{
				this.addLegendText(offsetx + 215, self.yaxisTop[3][self.mode]-textHeight-offsety,this.labels[lang].bar2Title,6,this.colors["bar2"]);
			}
		}else{
			this.addLegendText(offsetx,(self.yaxisTop[1][self.mode]-textHeight*3)-offsety,this.labels[lang].line1Title,1,this.colors["line1"]);
			this.addLegendText(offsetx ,(self.yaxisTop[1][self.mode]-textHeight*2)-offsety,this.labels[lang].line2Title,2,this.colors["line2"]);
			this.addLegendText(offsetx,(self.yaxisTop[1][self.mode]-textHeight*1)-offsety,this.labels[lang].line3Title,3,this.colors["line3"]);
		
			//chart 2
			this.addLegendText(offsetx,(self.yaxisTop[2][self.mode]-textHeight*1)-offsety,this.labels[lang].line4Title,4,this.colors["line4"]);
		
			//chart 3
			this.addLegendText(offsetx, (self.yaxisTop[3][self.mode]-textHeight*2)-offsety,this.labels[lang].bar1Title,5,this.colors["bar1"]);		
			this.addLegendText(offsetx, (self.yaxisTop[3][self.mode]-textHeight*1)-offsety, this.labels[lang].bar2Title,6,this.colors["bar2"]);
		}
	},
	resize: function() {
		var chart = this.chart;	
		var self = this;	
		self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";
		chart.yAxis[0].update({top:self.yaxisTop[1][self.mode], height:self.yaxisHeight[1][self.mode]});
		chart.yAxis[1].update({top:self.yaxisTop[2][self.mode], height:self.yaxisHeight[2][self.mode]});
		chart.yAxis[2].update({top:self.yaxisTop[3][self.mode], height:self.yaxisHeight[3][self.mode]});		

		this.drawBackground();
	},
	labels : {
		zh_hk :{
			line1Title : "恒生指數",
			line2Title : "牛證加權收回價",
			line3Title : "熊證加權收回價",
			line4Title : "牛熊證加權比例",
			bar1Title : "牛證街貨相對期指張數",
			bar2Title : "熊證街貨相對期指張數"
		},
		zh_cn :{
			line1Title : "恒生指数",
			line2Title : "牛证加权收回价",
			line3Title : "熊证加权收回价",
			line4Title : "牛熊证加权比例",
			bar1Title : "牛证街货相对期指张数",
			bar2Title : "熊证街货相对期指张数"
		},
		en_hk :{
			line1Title : "HSI",
			line2Title : "Bull Weighted-Barrier",
			line3Title : "Bear Weighted-Barrier",
			line4Title : "Bull Bear Weighted-Ratio",
			bar1Title : "No. of futures contracts for Bull",
			bar2Title : "No. of futures contracts for Bear"
		},
	}
}