Highcharts.setOptions({lang :{
	rangeSelectorZoom : ""
	/*rangeSelectorFrom : "",
	rangeSelectorTo : "",*/
}});
var momentumChart = {
	chart : null,
	setting: null,
	mode : "desktop",
	init : function(){
		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"];	
		self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";	
		$.getJSON('/'+lang+'/data/chart/momentumChart/', function(_data) {
			var data = self.decode(_data);
		
			$('#momentumChartContainer').highcharts(self.getJSON(data), function (chart){
				self.chart = chart;
				self.drawBackground();
			});
		});
	},
	decode : function(_data){
		this.setting = _data.setting;
		return _data.mainData;
	},
	colors : {area1 : "#edf2c1", area2 : "#f1def1", area3 : "#ffcfd7", area4 : "#e3e5e4", area5 : "#ffeacb", area6 : "#ddefff"},	
	getJSON : function(data){
		var self = this;


		
		return {
			chart: {
				type: 'scatter',
				events: {
					redraw: function(event) {
						//self.redraw();
						self.drawBackground();	
					}
				}
			},
			title: {
				text: null,
			},
			xAxis: {
				title: {
					enabled: true,
					text: this.labels[lang].xTitle,
				},
				startOnTick: true,
				endOnTick: false,
				showLastLabel: true,
				max: this.setting.upperRSI*1,
				min: this.setting.lowerRSI*1,
			},
			yAxis: {
				title: {
					text: this.labels[lang].yTitle,
				},
				max: this.setting.upperbound*1,
				min: this.setting.lowerbound*1,
				opposite:true,
				gridLineWidth:0,
			},
			legend: {
				enabled:false,
			},
			plotOptions: {
				scatter: {
					marker: {
						radius: 5,
						states: {
							hover: {
								enabled: true,
							}
						}
					},
					states: {
						hover: {
							marker: {
								enabled: false
							}
						}
					},
					dataLabels: {
						enabled: true,
						formatter: function(){
							return this.point.options.ucode + " " + this.point.options.uname;
						},
						y:-5,
					}
				}
			},
			tooltip: {
				backgroundColor: "rgba(0,0,0,0)",
				borderWidth: 0,
				borderRadius: 0,
				useHTML: true,
				shadow: false,
				style: {
					pointerEvents: 'auto'
				},
				formatter: function(){
					var html = '<div class="val"><span class="name">'+this.point.options.ucode + " " + this.point.options.uname+"</span></div>";
					
					if (this.point.options.call){
						var code = this.point.options.call.code;
						html += '<div class="val"><span class="call"><a href="'+genURL(code)+'">'+ code +' (' + self.labels[lang].call+")</a></span></div>";
					}
					if (this.point.options.put){
						var code = this.point.options.put.code;
						html += '<div class="val"><span class="put"><a href="'+genURL(code)+'">'+ code +' (' + self.labels[lang].put+")</a></span></div>";
					}
					html += '<div class="val"><span class="label">RSI: ' + this.point.options.x.toFixed(2)+"</span></div>";
					html += '<div class="val"><span class="label">'+self.labels[lang].yTitle + ": " + this.point.options.y.toFixed(2)+"</span></div>";
					
					//console.log(this);
					html = '<div class="charttooltip" style="'+((html=="")?"display:none":"")+'">'+html+'</div>';
					return html;
				}
			},			
			series: [{
				data: data,
				color: "#000000",
			}],
			exporting: {
				enabled: false
			}
		};
	},
	drawBackground: function(){
		var chart = this.chart;
		var x,y,w,h;
		var xAxis = chart.xAxis[0];
		var yAxis = chart.yAxis[0];
		var self = this;
		self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";	
		
		var fontsize = (self.mode == "desktop")? '18px': '12px';
		var fontRightWidth = (self.mode == "desktop")? 50: 30;
		if(lang=="en_hk"){
			fontRightWidth = (self.mode == "desktop")? 85: 40;
			fontsize = (self.mode == "desktop")? '13px': '12px';
		}
		x=0;
		y=0;
		w=xAxis.toPixels(35);
		h=yAxis.toPixels(0);
		$("#area1").remove();
		$("#area1Text").remove();
		chart.renderer.rect(x, y, w, h, 0).attr({
			fill: this.colors.area1,
			'stroke-width': 0,
			zIndex: 0,
			id: 'area1'
		}).add();	
		chart.renderer.text(this.labels[lang].label.area1, 10, 25).css({color: '#000000', fontSize: fontsize,'font-weight': "bold"}).attr({zIndex: 1, id: 'area1Text'}).add();
				
		x=xAxis.toPixels(35);
		y=0;
		w=xAxis.toPixels(65)-xAxis.toPixels(35);
		h=yAxis.toPixels(0);		
		$("#area2").remove();
		$("#area2Text").remove();
		chart.renderer.rect(x, y, w, h, 0).attr({
			fill: this.colors.area2,
			'stroke-width': 0,
			zIndex: 0,
			id: 'area2'
		}).add();		
		chart.renderer.text(this.labels[lang].label.area2, x+(w/2)-10, 25).css({color: '#000000', fontSize: fontsize,'font-weight': "bold"}).attr({zIndex: 1, id: 'area2Text'}).add();
		
		x=xAxis.toPixels(65);
		y=0;
		w=xAxis.toPixels(this.setting.upperRSI*1) - xAxis.toPixels(65);
		//w = xAxis.toPixels(chart.xAxis[0].max) - xAxis.toPixels(65);
		h=yAxis.toPixels(0);			
		$("#area3").remove();
		$("#area3Text").remove();	
		chart.renderer.rect(x, y, w,h, 0).attr({
			fill: this.colors.area3,
			'stroke-width': 0,
			zIndex: 0,
			id: 'area3'
		}).add();		
		chart.renderer.text(this.labels[lang].label.area3, xAxis.toPixels(this.setting.upperRSI*1)-fontRightWidth, 25).css({color: '#000000', fontSize: fontsize,'font-weight': "bold"}).attr({zIndex: 1,id: 'area3Text'}).add();
		//chart.renderer.text(this.labels[lang].label.area3, xAxis.toPixels(chart.xAxis[0].max*1)-fontRightWidth, 25).css({color: '#000000', fontSize: fontsize,'font-weight': "bold"}).attr({zIndex: 1,id: 'area3Text'}).add();
		
		x=0;
		y=yAxis.toPixels(0);
		w=xAxis.toPixels(35);
		h=yAxis.toPixels(this.setting.lowerbound*1)-yAxis.toPixels(0);
		$("#area4").remove();
		$("#area4Text").remove();
		chart.renderer.rect(x, y, w, h, 0).attr({
			fill: this.colors.area4,
			'stroke-width': 0,
			zIndex: 0,
			id: 'area4'
		}).add();	
		chart.renderer.text(this.labels[lang].label.area4, 10, yAxis.toPixels(this.setting.lowerbound*1)-10).css({color: '#000000', fontSize: fontsize,'font-weight': "bold"}).attr({zIndex: 1, id: 'area4Text'}).add();
		
		x=xAxis.toPixels(35);
		y=yAxis.toPixels(0);
		w=xAxis.toPixels(65) - xAxis.toPixels(35);
		h=yAxis.toPixels(this.setting.lowerbound*1)-yAxis.toPixels(0);	
		$("#area5").remove();
		$("#area5Text").remove();
		chart.renderer.rect(x, y, w, h, 0).attr({
			fill: this.colors.area5,
			'stroke-width': 0,
			zIndex: 0,
			id: 'area5'
		}).add();
		chart.renderer.text(this.labels[lang].label.area5, x+(w/2)-10, yAxis.toPixels(this.setting.lowerbound*1)-10).css({color: '#000000', fontSize: fontsize,'font-weight': "bold"}).attr({zIndex: 1,id: 'area5Text'}).add();
				
		x=xAxis.toPixels(65);
		y=yAxis.toPixels(0);
		w=xAxis.toPixels(this.setting.upperRSI*1) - xAxis.toPixels(65)
		//w = xAxis.toPixels(chart.xAxis[0].max) - xAxis.toPixels(65);
		h=yAxis.toPixels(this.setting.lowerbound*1)-yAxis.toPixels(0);		
		$("#area6").remove();
		$("#area6Text").remove();
		chart.renderer.rect(x, y, w, h, 0).attr({
			fill: this.colors.area6,
			'stroke-width': 0,
			zIndex: 0,
			id: 'area6'
		}).add();			
		chart.renderer.text(this.labels[lang].label.area6, xAxis.toPixels(this.setting.upperRSI*1)-fontRightWidth, yAxis.toPixels(this.setting.lowerbound*1)-10).css({color: '#000000', fontSize: fontsize,'font-weight': "bold"}).attr({zIndex: 1,id: 'area6Text'}).add();
		//chart.renderer.text(this.labels[lang].label.area6, xAxis.toPixels(chart.xAxis[0].max*1)-fontRightWidth, yAxis.toPixels(this.setting.lowerbound*1)-10).css({color: '#000000', fontSize: fontsize,'font-weight': "bold"}).attr({zIndex: 1,id: 'area6Text'}).add();
			
	},
	labels : {
		zh_hk :{
			xTitle: "9日RSI相對強弱指數",
			yTitle: "資金動力",
			call: "購",
			put: "沽",
			label:{
			"area2" : "累積",
			"area6" : "套利",
			"area4" : "止蝕",
			"area1" : "低吸",
			"area5" : "減持",
			"area3" : "高追"}
		},
		zh_cn :{
			xTitle: "9日RSI相对强弱指数",
			yTitle: "资金动力",
			call: "购",
			put: "沽",
			label:{
			"area2" : "累积",
			"area6" : "套利",
			"area4" : "止蚀",
			"area1" : "低吸",
			"area5" : "减持",
			"area3" : "高追"}
		},
		en_hk :{
			xTitle: "9 Days Relative Strength Index",
			yTitle: "Momentum Value",
			call: "Call",
			put: "Put",
			label:{
			"area2" : "Accumulating",
			"area6" : "Profit-Taking",
			"area4" : "Loss-Cutting",
			"area1" : "Bottom-Fishing",
			"area5" : "Reducing",
			"area3" : "Chasing"}
		},
	}
}