Highcharts.setOptions({lang :{
	rangeSelectorZoom : "",
	/*rangeSelectorFrom : "",
	rangeSelectorTo : "",*/
}});
$(document).ajaxStart(function() {
	$(underlyingChart.loadingContainer).show();
});
$(document).ajaxStop(function() {
	$(underlyingChart.loadingContainer).hide();
});
var underlyingChart = {
	chart : null,
	cur_chart : null,
	data : null,
	period: 0,
	usedSlot : ["","","","","",""],
	usedMASlot : ["","","","",""],
	//maColors : ["#61A1C6","#a1af00","#82389b","#e60028","#fbc189"],
	maColors : ["#8048CD","#00B3B0","#007193","#AEBC1F","#FA961C"],
	maIndex : {10: 0, 20: 1, 50: 2, 100:3, 250:4},
	maIndex2 : [10,20,50,100,250],
	navigatorUpdated : null,
	toolTipMoved : null, 
	selectedRange : [-1,-1],
	stockcode: "",
	comparecode : "",
	backgroundColor: "",
	selected_ts:0,
	loadingContainer:null,
	charttype: "candlestick",
	lastTooltipPoint:null,
	//mobile_header
	isMobile: ($(window).width()< 768)?true:false,
	mobileHeight:{true:85, false:100},
	mobileTop:{true:20, false:0},
	isIntraday: 0,
	init : function(code, callback, navUpdated, ttMoved){
		var self = this;	
		this.code = code;
		self.navigatorUpdated = (navUpdated!==undefined)?navUpdated:null;
		self.toolTipMoved = (ttMoved!==undefined)?ttMoved:null; 
		self.isIntraday = (self.period > 0);

		$.getJSON('/'+lang+'/data/chart/underlyingChart/code/'+code+'/period/'+self.period, function(_data) {
			self.data = self.decode(_data);
			var htmlContainer = null;
			if ($('#underlyingChartContainer .highcharts-html-container').length>0){
				htmlContainer = $('#underlyingChartContainer .highcharts-html-container');
			}
			
			$('#underlyingChartContainer').highcharts('StockChart',self.getJSON(self.data), function (chart){
				
				
				if ($(chart.renderTo).attr("id")){
					if (!$('#underlyingChartContainer').hasClass("noSetting")){
						if (htmlContainer){
							$('#underlyingChartContainer').append(htmlContainer);
						}else{
							$('#underlyingChartContainer').append("<div class='highcharts-html-container' style='position: absolute; top: 0px;'></div>");
							$('#underlyingChartContainer .highcharts-html-container').append("<div class='highcharts-loading' style='width:"+$('#underlyingChartContainer').width()+"px;height:"+$('#underlyingChartContainer').height()+"px'></div>");
							self.loadingContainer = $('#underlyingChartContainer .highcharts-html-container .highcharts-loading');
						}
					}
					self.chart = chart;
					
					self.cur_chart = chart;
					self.stockcode = code;
				
					self.setPeriod(self.data.last[self.data.last.length-1][0]- (60*60*24*1000)*180,self.data.last[self.data.last.length-1][0]);
					self.changeChartType(self.charttype);
					if (callback){
						callback();
						
					}
					
				}
			
				let container = $("#underlyingChartContainer");
				container.width($('.underlying_chart').width() - $('.tool').width() -5);
				container.offset({
					left: $('.tool').offset().left + $('.tool').width() 
				});

				
				self.isMobile = ($(window).width() < 768) ? true:false;
				
				if(self.isMobile){
				
					chart.update({
						navigator: {
							top: 730,
						}
					});
				}else{
					chart.update({
						navigator: {
							top: undefined,
						}
					});
				}
				$('#underlyingChartContainer .tooltipElement').each(function(){
					$(this).hide();
				});
				chart.xAxis[0].hideCrosshair(); 
				chart.yAxis[0].hideCrosshair(); 
				self.drawBackground();
				self.updateSeriesPosition();
				if(self.isMobile){
					chart.setSize(container.width(),800, true);
				}else{
					chart.setSize(container.width(),800, true);
				}
				
			});
		});
	},
	decode : function(_data){
		var data = _data.mainData.underlying;
		var ohlc = [], volume = [],turnover = [],last = [];
	
        for (i = 0; i < data.length; i++) {
			ohlc.push({
				x: data[i].ts,
				y: data[i].last,
				high: data[i].high,
				low: data[i].low,
				open: data[i].open,
				close: data[i].last,
			});
			last.push([
                data[i].ts, // the date
                data[i].last // close
            ]);
            volume.push([
                data[i].ts, // the date
                data[i].vol // the volume
            ]);
            turnover.push([
                data[i].ts, // the date
                data[i].turnover // the turnover
            ]);			
			
        }
		return {ohlc : ohlc, vol:volume, turnover: turnover, last:last};
	},
	options : {
        groupingUnits : [['day',[1]],], 
		chartHeight : 270,
		chartTop : 23,
		subChartTitle : 23,
	},
	resizeChart : function(){
		let container = $("#underlyingChartContainer");
		container.width($('.underlying_chart').width() - $('.tool').width() -5);
		container.offset({
			left: $('.tool').offset().left + $('.tool').width() 
		});

		let chart = $("#underlyingChartContainer").highcharts();
		this.isMobile = ($(window).width() < 768) ? true:false;
		
		if(this.isMobile){
		
			chart.update({
				navigator: {
					top: 730,
				}
			});
		}else{
			chart.update({
				navigator: {
					top: undefined,
				}
			});
		}
		
		$('#underlyingChartContainer .tooltipElement').each(function(){
			$(this).hide();
		});
		chart.xAxis[0].hideCrosshair(); 
		chart.yAxis[0].hideCrosshair(); 
		this.drawBackground();
		this.updateSeriesPosition();
		
		chart.setSize(container.width(),800, true);
		//chart.redraw();
		
	},
	getJSON : function(data){

		var self = this;
		let cwidth,mRight;

		if($(window).width()<850){
			//cwidth = $(window).width()*0.96;
			mRight = 50;
			margin = 20;
			
			navigatorTop = 730;
		}else if($(window).width()<573){
			//cwidth = $(window).width()*0.50;
			mRight = 50;
			margin = 20;
			
			navigatorTop = 730;
		}else{
		//	cwidth = 850;
			mRight = 0;
			margin = 0;
			
			navigatorTop = undefined;
		}

		return {
			chart : {
				animation: false,
				renderTo: 'underlyingChartContainer',
				backgroundColor : (self.toolTipMoved !=null)?"rgba(255, 255, 255, 0.0)":"#FFFFFF",
				//marginLeft: 20,
				//marginRight: 20,
				//width: cwidth,
				margin: margin,
			

				events: {
					load: function(){
						if (this == self.chart){
							//self.refreshSeries();
						}else{
							//console.log("load: copy");
							self.cur_chart = this;
							//self.refreshSeries();
							setTimeout(function(){ self.cur_chart = self.chart; }, 100);
						}
					},
					redraw: function(event) {
						if ((self.selectedRange[0]!=event.target.xAxis[0].min || self.selectedRange[1]!=event.target.xAxis[0].max) || (self.selectedRange[0]==-1 && self.selectedRange[1]==-1)){
							//console.log("redraw",self.navigatorUpdated);
							self.selectedRange[0] = event.target.xAxis[0].min;
							self.selectedRange[1] = event.target.xAxis[0].max;
							if (self.navigatorUpdated){
								self.navigatorUpdated(event.target.xAxis[0].min,event.target.xAxis[0].max);
							}
						}
					}
				}
			},
			annotationsOptions: {
				enabled: true,
				noButtons: true,
				/*buttonsElementId: "underlyingMasterTools",*/
			},
			exporting: {
				enabled: false,
				/*url: "http://hsbc2.dbpower.com.hk/highchart_export/export.php",*/
			},
			plotOptions: {
                candlestick: {
                    oxymoronic: true,
                    color: '#E6321B',
                    lineColor: '#E6321B',
                    upColor: '#2EAF52',
                    upLineColor: '#2EAF52'
                },
				area: {
					threshold: null,
				},
				series: {
					turboThreshold: 2000,
					states:{
						hover: {
							enabled: false,
						}
					}
				}
			},
			tooltip: {
				backgroundColor: "rgba(0,0,0,0)",
				borderWidth: 0,
				borderRadius: 0,
				useHTML: true,
				positioner: function(width, height, point){
					var pos = this.getPosition(width, height, point);
					if (self.lastTooltipPoint && self.lastTooltipPoint.series.type == "line"){
						var _point = self.lastTooltipPoint.point;
						pos.y = _point.plotY;
					}
					return pos;
				},
				formatter : function(){
					
					self.drawToolTip(this);

					if (underlyingChart.chart.annotations.selected > 0){
						return "";
					}
					
					var stime;
					if (Highcharts.dateFormat('%H:%M', this.points[0].x) != "00:00"){
						stime = Highcharts.dateFormat('%Y-%m-%d %H:%M', this.points[0].x);
					}else{
						stime = Highcharts.dateFormat('%Y-%m-%d', this.points[0].x);
					}
					
					var html = '';
				
					if (this.points[0].series.type == "line"){
						self.lastTooltipPoint = this.points[0];
						html +=  '<div class="val2"><span class="name"><div class="legend" style="background-color:#00716C"></div>'+self.labels()[lang].toolTip.underlyinglast+'</span><span class="value">'+this.points[0].y+"</span></div>";
					}else{
						self.lastTooltipPoint = null;
						html +=  '<div class="val2"><span class="name">'+self.labels()[lang].toolTip.underlyinghigh+'</span><span class="value">'+this.points[0].point.high+"</span></div>";
						html +=  '<div class="val2"><span class="name">'+self.labels()[lang].toolTip.underlyinglow+'</span><span class="value">'+this.points[0].point.low+"</span></div>";
						html +=  '<div class="val2"><span class="name">'+self.labels()[lang].toolTip.underlyingopen+'</span><span class="value">'+this.points[0].point.open+"</span></div>";
						html +=  '<div class="val2"><span class="name">'+self.labels()[lang].toolTip.underlyinglast+'</span><span class="value">'+this.points[0].point.close+"</span></div>";
					}
					
					
					var k=3;
					for(var i =0; i<self.usedMASlot.length;i++){
						var _index = 0;
						if (self.usedMASlot[i] != ""){
							for(var j = 1; j<this.points.length;j++){
								if (this.points[j].series.name.startsWith(self.usedMASlot[i])){
									
									_index = j;
									break;
								}
							}
							if (!this.points[_index]){
								break;
							}
							if (_index>0){
								if (self.usedMASlot[i].indexOf("_bol-")>0){
									while(_index>0 && typeof this.points[_index].point.high == "undefined"){
										_index--;
									}
									var val = formatPrice(this.points[_index+1].y);
									var _val1 = formatPrice(this.points[_index].point.high);
									var _val2 = formatPrice(this.points[_index].point.low);	
									html +=  '<div class="val1"><span class="name">'+self.labels()[lang].toolTip.MASlot[5][0]+'</span>';	
									html +=  '<span class="value">'+val+"</span></div>";	
									html +=  '<div class="val1"><span class="name">'+self.labels()[lang].toolTip.MASlot[5][2]+'</span>';	
									html +=  '<span class="value">'+_val2+"</span></div>";
									html +=  '<div class="val1"><span class="name">'+self.labels()[lang].toolTip.MASlot[5][1]+'</span>';	
									html +=  '<span class="value">'+_val1+"</span></div>";	
								}else if(self.usedMASlot[i].indexOf("_compare")>0){
									var val = formatPrice(this.points[_index].y);
									html +=  '<div class="val'+k+'"><span class="name"><div class="legend" style="background-color:#E9A115"></div>'+self.labels()[lang].toolTip.MASlot[i]+'</span>';
									html +=  '<span class="value">'+val+"</span></div>";
								}else{
									var val = formatPrice(this.points[_index].y);
									html +=  '<div class="val'+k+'"><span class="name">'+self.labels()[lang].toolTip.MASlot[i]+'</span>';
									html +=  '<span class="value">'+val+"</span></div>";	
								}
								k++;
							}	
						}
					}
				
					html = '<div class="charttooltip" style="'+((html=="")?"display:none":"")+'"><div class="stime">'+stime+'</div>'+html+'</div>';
					return html;
				},
				shadow: false,
			},
			rangeSelector : {
				enabled: false,
				selected: 1
			},
			xAxis:{
				type: 'datetime',
				gridLineWidth: 0,
				lineWidth: 0,
				tickColor: '#00000000',
				tickPixelInterval:200,
				crosshair: {
					width: 1,
					color: "#000",
					zIndex: 4
				},
				labels: {
					formatter: function () {
						if (Highcharts.dateFormat('%H:%M', this.value) != "00:00"){
							if (Highcharts.dateFormat('%H%M', this.value)*1 < 920){
								return Highcharts.dateFormat('%d/%m 09:20', this.value);
							}
							return Highcharts.dateFormat('%d/%m %H:%M', this.value);
						}else{
							return Highcharts.dateFormat('%d/%m', this.value);
						}
					}				
				},
				opposite: true,
				offset: this.options.chartHeight*-1-30,
			},
			yAxis: [{
				labels:{
					formatter: function () {
						return formatPrice(this.value);		
					},
					x: -3,					
				},
				gridLineWidth: (self.toolTipMoved !=null)?0:1,
				height: this.options.chartHeight,
				top:this.options.chartTop,
				crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
			},
			{
				labels:{
					formatter: function () {
						return formatPrice(this.value);				
					},
					align:"left",
					x: 3,
				},
				opposite: false,
				height: this.options.chartHeight,
				top:this.options.chartTop,
			},
			{
				top:this.options.chartHeight-43,
				height: 90,
				gridLineWidth: 0,
				labels:{
					enabled: false
				},
			},
			{
				top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false, 
				labels:{formatter: this.subChartLabelFormatter,x: -3}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
			},{
				top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false, 
				labels:{formatter: this.subChartLabelFormatter,x: -3}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
			},{
				top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
				labels:{formatter: this.subChartLabelFormatter,x: -3}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
			},{
				top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
				labels:{formatter: this.subChartLabelFormatter,x: -3}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
			},{
				top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
				labels:{formatter: this.subChartLabelFormatter,x: -3}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
			},{
				top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
				labels:{formatter: this.subChartLabelFormatter,x: -3}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
			}],
			navigator : {
				enabled : (!this.isIntraday)?true:false,
				baseSeries: 0, 
				height : 60,
				
				top :navigatorTop,
				outlineColor: '#ffffff',
				maskFill: 'rgba(36, 125, 130, 0.1)',
				handles: {
					backgroundColor: "#a8d0ce",
					borderColor: "#00a2e0"
				},
				xAxis: {
					gridLineWidth: 0,
					labels:{
					  enabled: false
					}
				},
				yAxis: {
					gridLineWidth: 0,
					labels:{
					  enabled: false
					}
				},
				series: {
					data: data.last,
					type: 'area',
					fillColor: 'rgba(220,220,220,1)',
					lineColor: '#00000000'
				}
			},
			scrollbar : {
				enabled : false
			},
			series : [{
				id : "vol",
                type: 'column',
                name: 'vol',
                data: data.vol,
                yAxis: 2,
				color: "#cad3da",
                dataGrouping: {
					approximation: "sum",
                    units: self.options.groupingUnits,
					groupPixelWidth: 1000
                }
            },{
				name: 'primary',
				type: 'candlestick',
				id: 'primary',
				data : data.ohlc,
                yAxis: 0,
                dataGrouping: {
                    units: self.options.groupingUnits,
					groupPixelWidth: 1000
                }
			}],
		};
	},
	refreshSeries : function(){
		var chart = this.cur_chart;
		var _series = [];
		for (var i=0;i<this.chart.series.length;i++){
			//_series.push(this.chart.series[i].points[this.chart.series[i].points.length-1]);
			var selectedIndex = chart.series[i].points.length-1;
			if (this.selected_ts>0 && this.cur_chart!=this.chart){
				for (var j=0;j<chart.series[i].points.length;j++){
					if (chart.series[i].points[j].x==this.selected_ts){
						selectedIndex = j;
						break;
					}
				}
			}
			if(chart.series[i].points && chart.series[i].points[selectedIndex]) {
				_series.push(chart.series[i].points[selectedIndex]);
			}
		}
		
		//this.chart.tooltip.refresh(_series); 		
		if (_series.length>0){
			chart.tooltip.refresh(_series); 	
		}
	},
	setPeriod : function(_from,_to){		
		if (this.data.last[0][0]){
			this.chart.xAxis[0].setExtremes(Math.max(_from,this.data.last[0][0]), _to);
		}
	},
	drawToolTip: function(obj){
		//console.log("start drawToolTip");
		//console.log(obj);
		//var chart = this.chart;
		this.isMobile = ($(window).width() < 850 )? true: false;
		var chart = this.cur_chart;
		var fontstyle = {color: '#666666', fontSize: '13px'};
		//var textattr;

		var textattr = {zIndex: 7, class: "tooltipElement"};

		//if ($(".tooltipElement.s"+obj.points[0].x).length>0){
		if ($(".tooltipElement.s"+obj.points[0].x).length>0 && this.cur_chart == this.chart){
			return;
		}
		
		if (this.cur_chart == this.chart){
			$(".tooltipElement").remove();
		}
		
		if (this.toolTipMoved){
			this.toolTipMoved(obj.points[0].x);
		}

		//chart.renderer.text(Highcharts.dateFormat('%y/%m/%d',obj.points[0].x), 15, 18).css(fontstyle).attr(textattr).add();
		try {
			for(var j = 0; j<obj.points.length;j++){
				/*if (this.points[j].series.name.startsWith(self.usedMASlot[i])){
					_index = j;
					break;
				}*/
				this.selected_ts = obj.points[0].x;
				if (obj.points[j].series.name == "primary"){
					/*chart.renderer.text(Highcharts.dateFormat('%y/%m/%d',obj.points[0].x), 15, 18).css(fontstyle).attr(textattr).add();
					if (obj.points[j].point.close){
						chart.renderer.text("O:"+formatPrice(obj.points[j].point.open), 90, 18).css(fontstyle).attr(textattr).add();
						chart.renderer.text("H:"+formatPrice(obj.points[j].point.high), 165, 18).css(fontstyle).attr(textattr).add();
						chart.renderer.text("L:"+formatPrice(obj.points[j].point.low), 240, 18).css(fontstyle).attr(textattr).add();
						chart.renderer.text("C:"+formatPrice(obj.points[j].point.close), 315, 18).css(fontstyle).attr(textattr).add();
					}else{
						chart.renderer.text("C:"+formatPrice(obj.points[j].point.y), 90, 18).css(fontstyle).attr(textattr).add();
					}*/
				}else if (obj.points[j].series.name == "vol"){
				/*
					chart.renderer.text(this.labels()[lang].toolTip.volume+(obj.points[0].y/1000000).toFixed(2)+this.labels()[lang].unit.M, (obj.points[1].series.userOptions.type=="line")?170:390, 18).css(fontstyle).attr(textattr).add();
					*/
				}else if (obj.points[j].series.name.indexOf("_sma")>0 || obj.points[j].series.name.indexOf("_ema")>0 ){
					/*for(var i =0; i<this.usedMASlot.length;i++){
						if (obj.points[j].series.name == this.usedMASlot[i]){
							_index = i;
							break;
						}
					}
					chart.renderer.rect(15+_index*130, 29, 12, 5, 0).attr({
						fill: this.maColors[_index],
						stroke: '#fff',
						'stroke-width': 0.5,
						zIndex: 6,
						class: "tooltipElement",
					}).add();
					var days = (this.usedMASlot[i].split("-"))[1];
					if (obj.points[j].series.name.indexOf("_sma")>0){
						chart.renderer.text("SMA("+days+"):"+formatPrice(obj.points[j].y), 130*_index+35, 36).css(fontstyle).attr(textattr).add();
					}else{
						chart.renderer.text("EMA("+days+"):"+formatPrice(obj.points[j].y), 130*_index+35, 36).css(fontstyle).attr(textattr).add();
					}*/
				}else if (obj.points[j].series.name.indexOf("_compare")>0){
					/*chart.renderer.text(this.labels()[lang].toolTip.MASlot.compare, 15, 38).css(fontstyle).attr(textattr).add();
					chart.renderer.text("C:"+formatPrice(obj.points[j].y), 90, 38).css(fontstyle).attr(textattr).add();
				*/
				}else if (obj.points[j].series.name.indexOf("_bol")>0 && obj.points[j].point.high){
				/*	var _label1 = this.labels()[lang].toolTip.MASlot.bol[0]+"("+obj.points[j].series.options.p1+","+obj.points[j].series.options.p2+"): ";
					var _label2 = this.labels()[lang].toolTip.MASlot.bol[1]+": ";
					var _label3 = this.labels()[lang].toolTip.MASlot.bol[2]+": ";
					_label1 += (obj.points[j+1].y).toFixed(2);
					_label2 += (obj.points[j].point.high).toFixed(2);
					_label3 += (obj.points[j].point.low).toFixed(2);
					chart.renderer.text(_label1, 15, 38).css(fontstyle).attr(textattr).add();
					chart.renderer.text(_label2, 240, 38).css(fontstyle).attr(textattr).add();
					chart.renderer.text(_label3, 390, 38).css(fontstyle).attr(textattr).add();
				*/
				}else if (obj.points[j].series.name.indexOf("_sar")>0){
					/*var _label = this.labels()[lang].toolTip.MASlot.sar+"("+obj.points[j].series.options.p1+","+obj.points[j].series.options.p2+"): ";
					_label += (obj.points[j].y).toFixed(3);
					chart.renderer.text(_label, 15, 38).css(fontstyle).attr(textattr).add();
				*/
				}else{
					var segment = obj.points[j].series.name.split("_");
					if (segment.length==2){
						textattr.class = "tooltipElement text_subchart";
						
						var index = segment[0].replace("s","")*1;
						var offset = (this.isMobile)?65:43;
						
						//var _top = (this.options.chartHeight+this.options.chartTop)+((100+this.options.subChartTitle)*index)+27;
						var _top = (this.options.chartHeight+this.options.chartTop)+((this.mobileHeight[this.isMobile]+this.options.subChartTitle)*index)+(this.mobileTop[this.isMobile]*index)+offset;
						for(var i =0; i<index;i++){
							if (this.usedSlot[i] == ""){
								//_top -= (100+this.options.subChartTitle);
								_top -= (100+this.options.subChartTitle);
							}
						}
						if(segment[1] == "turnover" && this.isMobile === true){
							_top += 15;
						}
						if (!isNaN(_top)){
							var _val = "";
							var chartWidth = $('#underlyingChartContainer').width();
							
							if (segment[1] == "macd"){
								var val1 = this.labels()[lang].toolTip.TASlot[segment[1]][0]+": "+(obj.points[j].y).toFixed(3);
								var val2 = this.labels()[lang].toolTip.TASlot[segment[1]][1]+": "+(obj.points[j+1].y).toFixed(3);
								var val3 = this.labels()[lang].toolTip.TASlot[segment[1]][2]+": "+(obj.points[j+2].y).toFixed(3);
								_val = val1 + " " + val2 + " " + val3;
								if(this.isMobile){
									_val = val1 + " " + val2 + " <br>" + val3;
								}else{
									_val = val1 + " " + val2 + " " + val3;
								}
							}else if (segment[1] == "turnover"){
								
								_val = this.labels()[lang].toolTip.TASlot[segment[1]]+": "+(addcomma(obj.points[j].y));
							}else{
								_val = this.labels()[lang].toolTip.TASlot[segment[1]]+": "+(obj.points[j].y).toFixed(3);
							}
							
							if(this.isMobile){
								chart.renderer.text(_val, underlyingChart.chart.margin[3], _top).css(fontstyle).attr(textattr).add();
							}else{
								var clientwidth = chart.renderer.text(_val, 0, -100).css(fontstyle).attr(textattr).add().element.getBoundingClientRect().width;
								chart.renderer.text(_val, chartWidth - clientwidth - 5, _top).css(fontstyle).attr(textattr).add();
							}
							
						}
					}
				}
			}
		} catch (err) {
			//console.log(err);
		}
		$(".tooltipElement:eq(0)").attr("class",$(".tooltipElement:eq(0)").attr("class")+" s"+obj.points[0].x);
		//console.log("end drawToolTip");
		this.drawBackground();
	},
	drawBackground: function(){
		if (this.cur_chart == this.chart){
			$(".tooltipBackground").remove();
			$(".tooltipLabel").remove();
		}
		//$(".tooltipBackground").remove();
		//$(".tooltipLabel").remove();
		//var chart = this.chart;
		var chart = this.cur_chart;
		this.isMobile = ($(window).width() < 850 )? true: false;

		var fontstyle = {color: '#666666', fontSize: '13px'};
		var textattr = {zIndex: 7,class: "tooltipLabel"};
		//var offsetx,offsety;
		chart.renderer.rect(0, 0, 1920, 22, 0).attr({
			
			fill: '#FFFFFF',
			stroke: '#000',
			'stroke-width': 0,
			zIndex: 5,
			class: "tooltipBackground",
			
		}).add();
		
		//chart.renderer.text(this.labels()[lang].yTitle1, 0, 15).css({color: '#4F8ABD', fontSize: '13px'}).attr(textattr).add();
		//first subtitle
		//same top buf diff left
		if(this.isMobile){
			chart.renderer.text(this.labels()[lang].yTitle1, underlyingChart.chart.margin[3]  , 15).css({color: '#4F8ABD', fontSize: '13px'}).attr(textattr).add();
		}else{
			chart.renderer.text(this.labels()[lang].yTitle1, underlyingChart.chart.margin[3] , 15).css({color: '#4F8ABD', fontSize: '13px'}).attr(textattr).add();
		}
		var j=0;
		for (var i=0;i<this.usedSlot.length;i++){
			
			if (this.usedSlot[i] != ""){
				var offset = (this.isMobile)?25:43;
				//var _top = (this.options.chartHeight+this.options.chartTop)+((100+this.options.subChartTitle)*j)+25;
				var _top = (this.options.chartHeight+this.options.chartTop)+(this.mobileHeight[this.isMobile]+this.options.subChartTitle)*j+(this.mobileTop[this.isMobile]*(j+1))+offset;
				var chartType = (this.usedSlot[i].split("_"))[1];
				var days = "";

				for (var k=chart.series.length-1;k>=0;k--){
					if (chart.series[k].name && chart.series[k].name == this.usedSlot[i]){
						if (chart.series[k].userOptions.p1){
							days = "("+chart.series[k].userOptions.p1;
							if (chart.series[k].userOptions.p2){
								days += ","+chart.series[k].userOptions.p2;
								if (chart.series[k].userOptions.p3){
									days += ","+chart.series[k].userOptions.p3;
								}
							}
							days += ")";
						}
						
					}
				}
			
				if(this.isMobile){
					
					if(chartType == 'macd'){
						_top += 2;
					}else if(chartType == 'turnover'){
						_top += 18;
					}
				}
					chart.renderer.text(this.labels()[lang].subTitle[chartType]+days, underlyingChart.chart.margin[3] , _top).css(fontstyle).attr(textattr).add();
				j++;
			}
		}
	},
	changeChartType: function (type){
		if (type != this.chart.series[1].type){
			this.charttype = type;
			if(type == "line") {
				_width = 2;
			} else {
				_width = 1;
			}
			if(type == 'candlestick') {
				_color = "#e60028";
			}else{
				_color = "#000000";
			}
			this.chart.series[1].update({
				type: type,
				lineWidth: _width,
				color: _color,
			});
		}
	},
	changePeriodType: function (type,callback){
		var self = this;
		if (type.endsWith("min")){
			this.period = type.replace("min","")*1;
			this.options.groupingUnits = [["minute",[this.period]],];
			this.init(this.stockcode,function(){
				//self.setPeriod(self.data.last[Math.max(self.data.last.length-71,0)][0],self.data.last[self.data.last.length-1][0]);
				callback();
			},this.navigatorUpdated,this.toolTipMoved);
			return;
		}else if (this.period != 0){
			this.period = 0;
			this.options.groupingUnits = [[type,[1]],];
			this.init(this.stockcode,callback,this.navigatorUpdated,this.toolTipMoved);
			return;
		}
		this.chart.series.forEach(function(ser) {
            ser.update({
                dataGrouping: {
                    units: [ [type, [1]] ]
                }
            }, false);
        });
		this.options.groupingUnits = [[type,[1]],];
		this.chart.redraw();
		this.selected_ts = this.chart.xAxis[0].tickPositions[this.chart.xAxis[0].tickPositions.length-1];
	},
	addCompare: function (code,callback){
		var self = this;
		if (code==""){
			this.chart.yAxis[1].setTitle({text:""});
			this.addMAline("",0);
			return;
		}
		$.getJSON('/'+lang+'/data/chart/underlyingChart/code/'+code+"/period/"+self.period, function(_data) {
			var compare = [];
			var data = _data.mainData;
			for (i = 0; i < data.underlying.length; i++) {
				compare.push({
					x: data.underlying[i]["ts"],
					y: data.underlying[i]["last"],
					high: data.underlying[i]["high"],
					low: data.underlying[i]["low"],
					open: data.underlying[i]["open"],
					close: data.underlying[i]["last"],
					vol: data.underlying[i]["vol"],
				});
			}
			if (compare.length>0){
				for(var i =0; i<self.usedMASlot.length;i++){
					self.addMAline("",i);
				}
				self.comparecode = code;
				self.data.compare = compare;
				self.addMAline("compare",0);
				self.refreshSeries();
			}else{
				/*self.chart.yAxis[1].setTitle({text:""});
				self.addMAline("",6);*/
				showMessage("nodata");
				callback();
			}
		});
	},
	removeMAline:  function(id){
		var chart = this.chart;
		var _id = [];
		if (Array.isArray(id)){
			_id = id;
		}else{
			_id[0] = id;
		}
		for (var j=0;j<_id.length;j++){
			if (this.usedMASlot[_id[j]] != ""){
				for (var i=chart.series.length-1;i>=0;i--){
					if (chart.series[i].name && (chart.series[i].name == this.usedMASlot[_id[j]] || chart.series[i].name.startsWith(this.usedMASlot[_id[j]]+"_"))){
						chart.series[i].remove();
					}
				}
			}
			this.setUsedMASlot(_id[j], "");	
		}
	},
	addMAline: function(type, id){
		var chart = this.chart;
		var self = this;	
		
		//return;
		if (type!=""){
			var tempArr = type.split("-");
			var _type = tempArr[0];	
			var _para = "?type="+_type;
			for (var i=1; i<tempArr.length; i++){
				if(_type == "sma" || _type == "ema"){
					_para += "&p"+(self.maIndex[tempArr[i]]+1)+"="+(tempArr[i]*1);
				}else{
					_para += "&p"+i+"="+(tempArr[i]*1);
				}
			}
			if ((_type == "sma" || _type == "ema") && id==-1){
				id = [0,1,2,3,4];
			}
			if (type == "compare"){
				self.removeMAline(id);
				var series = highchart_default_options(type,self.options).series;
				series[0].data = this.data[type];
				series[0].name = "s"+id+"_"+type;				
				self.setUsedMASlot(id, series[0].name);	
				chart.addSeries(series[0]);
				self.addSettingBox(type);
				chart.yAxis[0].update();
			}else{
				$.getJSON('/'+lang+'/data/chart/underlyingChart/code/'+self.stockcode+'/period/'+self.period+_para, function(_data) {
					// self.removeMAline(id);
// 					var outData = highchart_decode_indicators(_type,_data.mainData.indicator);
// 					var series = highchart_default_options(_type,self.options).series;
// 					if ((_type == "sma" || _type == "ema") && !Array.isArray(id)){
// 						series[id].data = outData[_type+"-0"];
// 						series[id].name = "t"+id+"_"+_type+"-"+tempArr[1];
// 						series[id].color = _color;
// 						self.setUsedMASlot(id, series[id].name);
// 						chart.addSeries(series[id]);
// 					}else{
// 						for (var i=0; i<series.length; i++){
// 							series[i].data = outData[series[i].name];
// 							if (_type == "sma" || _type == "ema"){
// 								series[i].name = "t"+i+"_"+_type+"-"+tempArr[i+1];
// 								series[i].color = _color;
// 								self.setUsedMASlot(id[i], series[i].name);	
// 							}else{
// 								series[i].name = "t"+id+"_"+type;
// 								self.setUsedMASlot(id, "t"+id+"_"+type);	
// 							}
// 							chart.addSeries(series[i]);
// 						}
// 					}
// 					self.addSettingBox(_type);
// 					chart.yAxis[0].update();
					self.removeMAline(id);
					var outData = highchart_decode_indicators(_type,_data.mainData.indicator);
					var __outData = _data.mainData.indicator;
					var series = highchart_default_options(_type,self.options).series;
					for (var i=0; i<series.length; i++){
						var _color = self.maColors[i];
						var _index = i;
						//console.log(outData[series[i].name]);
						series[i].data = outData[series[i].name];			
						if (_type == "sma" || _type == "ema"){
							var _color = self.maColors[i];
							series[i].color = _color;
							var _count = Object.keys(__outData[series[i].name]).length;
							series[i].name = "t"+i+"_"+_type+"-"+self.maIndex2[_index];
							if(_count>0){
								self.setUsedMASlot(_index, series[i].name);	
							}
						}else{
							series[i].name = "t"+id+"_"+type;
							self.setUsedMASlot(id, "t"+id+"_"+type);	
						}
						chart.addSeries(series[i]);
					}
					self.addSettingBox(_type);
					chart.yAxis[0].update();
				});
			}
		}else{
			self.removeMAline(id);
		}


		//chart.setSize(this.options.chartWidth,this.getChartHeight());
	},
	removeSeries:  function(id){
		var chart = this.chart;
		var yAxisID = id + 3;
		if (this.usedSlot[id] != ""){
			for (var i=chart.series.length-1;i>=0;i--){
				if (chart.series[i].name && (chart.series[i].name == this.usedSlot[id] || chart.series[i].name.startsWith(this.usedSlot[id]+"_"))){
					chart.series[i].remove();
					chart.yAxis[yAxisID].userOptions.top = 0;
					chart.yAxis[yAxisID].userOptions.min = null;
					chart.yAxis[yAxisID].userOptions.max = null;
				}
			}
		}
		this.setUsedSlot(id, "");	
	},
	addSeries: function(type, id){
		var chart = this.chart;
		var yAxisID = id + 3;
		var self = this;
		if (id>=0 && type!="" && !(type == "vol" || type == "turnover")){
			var tempArr = type.split("-");
			var _type = tempArr[0];	
			var _para = "?type="+_type;
			for (var i=1; i<tempArr.length; i++){
				_para += "&p"+i+"="+(tempArr[i]*1);
			}
			$.getJSON('/'+lang+'/data/chart/underlyingChart/code/'+self.stockcode+'/period/'+self.period+_para, function(_data) {
				self.removeSeries(id);
				
				var outData = highchart_decode_indicators(_type,_data.mainData.indicator);
				var series = highchart_default_options(_type,self.options).series;
				
		
		
				
				for (var i=0; i<series.length; i++){
					series[i].yAxis = yAxisID;
					//chart.yAxis[yAxisID2].setTitle({text:this.labels()[lang].subTitle[series[i].name]});	
					series[i].data = outData[series[i].name];
					if (_type == "rsi"){
						chart.yAxis[yAxisID].userOptions.min = 0;
						chart.yAxis[yAxisID].userOptions.max = 100;
					}
					series[i].name = "s"+id+"_"+series[i].name;
					for (var j=1; j<tempArr.length; j++){
						series[i]["p"+j] = (tempArr[j]*1);
					}
					chart.addSeries(series[i]);
				}
				self.addSettingBox(_type);
				self.setUsedSlot(id, "s"+id+"_"+_type);	
				self.updateSeriesPosition();
				self.drawBackground();
				$("#underlyingChartContainer").height(self.getChartHeight());
				$(self.loadingContainer).height(self.getChartHeight()).hide();
				
				chart.reflow();
				
			});
		}else{
			self.removeSeries(id);
			if (type!=""){
				var series = highchart_default_options(type,self.options).series;
				series[0].data = this.data[type];
				series[0].name = "s"+id+"_"+type;
				series[0].yAxis = yAxisID;
				chart.addSeries(series[0]);
				self.addSettingBox(type);
				self.setUsedSlot(id, "s"+id+"_"+type);		
			}
			self.updateSeriesPosition();
			self.drawBackground();
			$("#underlyingChartContainer").height(self.getChartHeight());
			$(self.loadingContainer).height(self.getChartHeight());
			
			chart.reflow();
		}
		
	},
	addSettingBox: function(type){
		/*var container = $('#underlyingChartContainer .highcharts-html-container');
		if (container.find("."+type+"_box").length>0){
			return;
		}
		var chartWidth = $('#underlyingChartContainer').width();
		var sbox = '<div class="setting_box '+type+'_box" style="position: absolute;top: 25px;left: 1080px;"><a href="javascript:void(0)" onclick="openSetting(\''+type+'\');"><img src="/home/images/icon_setting_box.jpg" width="16" height="16"></a></div>';
		var cbox = '<div class="closing_box '+type+'_box" style="display:none;position: absolute;top: -100px;left: 1080px;"><a href="javascript:void(0)" onclick="closeChart(\''+type+'\');"><img src="/home/images/icon_close_box.jpg" width="16" height="16"></a></div>';
		
		container.append(sbox+cbox);*/
	},
	updateSeriesPosition: function(){

		var chart = this.chart;
		var j=0;
		this.isMobile = ($(window).width() < 850 )? true: false;
		for (var i=0;i<this.usedSlot.length;i++){
			var yAxisID = i + 3;
			if (this.usedSlot[i] != ""){
				var tempArr = this.usedSlot[i].split("_");
				var _type = tempArr[1];
				//change the gap distance between charts
				//var _top = (this.options.chartHeight+this.options.chartTop)+(1)+((100+this.options.subChartTitle)*j)+this.options.subChartTitle+25;
				
				
				var _top = (this.options.chartHeight+this.options.chartTop )+(1)+((this.mobileHeight[this.isMobile]+this.options.subChartTitle)*j)+this.options.subChartTitle+25+(this.mobileTop[this.isMobile]*(j+1));
				if(this.isMobile){
					if((_type == 'macd' || _type == 'turnover') ){
						_top += 20;
					}
				}else{
					
				}
				
				chart.yAxis[yAxisID].userOptions.top = _top ;
				chart.yAxis[yAxisID].userOptions.height = this.mobileHeight[this.isMobile] ;
				
				var container = $('#underlyingChartContainer .highcharts-html-container');
				container.find("."+_type+"_box").css("top",(_top-20)+"px").show();
				container.find("."+_type+"_box.setting_box").css("left","1060px").show();
				j++;
			}
			chart.yAxis[yAxisID].update();	
		}

	},
	setUsedSlot : function(id, val){
		if (id>=0 && id<this.usedSlot.length){
			this.usedSlot[id] = val;
		}
	},
	setUsedMASlot : function(id, val){
		if (id>=0 && id<this.usedMASlot.length){
			this.usedMASlot[id] = val;
		}
	},
	restoreSlot : function(){
		var self = this;
		var command = "";
		$(".tool ul li").removeClass("active");
		if (this.isIntraday){
			$(".filter .chart_type").hide();
			$(".filter .bollinger").hide();
			$(".filter .moving_average").hide();
			$(".filter .subchartta").hide();
			$(".bollinger input[name='checkbox_bol']").attr('checked', false);
			underlyingChart.addMAline("",0);
			underlyingChart.addSeries("",0);
			underlyingChart.addSeries("",1);
			underlyingChart.addSeries("",2);
			underlyingChart.addSeries("turnover",0);
			return;
		}else{
			$(".filter .chart_type").show();
			$(".filter .bollinger").show();
			$(".filter .moving_average").show();
			$(".filter .subchartta").show();	
		}

// 		if (self.usedMASlot[0].indexOf("_sma")>0 || self.usedMASlot[0].indexOf("_ema")>0 ){
// 			command = (self.usedMASlot[0].split("_"))[1];
// 			for(var i=1;i<self.usedMASlot.length;i++){
// 				command += "-"+(self.usedMASlot[i].split("-"))[1];
// 			}
// 		}else{
// 			command = (self.usedMASlot[0].split("_"))[1];
// 		}

		for(var i=0;i<self.usedMASlot.length;i++){
			if(command=="" && self.usedMASlot[i]!=""){
				var _type =  (self.usedMASlot[i].split("_"))[1];
				command =  (_type.split("-"))[0];
			}
			if (self.usedMASlot[0].indexOf("_bol")>0){
				var _value = (self.usedMASlot[i].split("-"));
				for(var j=1; j<_value.length;j++){
					command += "-"+_value[j];
				}
			}else{	
				if(self.usedMASlot[i]!=""){
						command += "-"+(self.usedMASlot[i].split("-"))[1];
				//	self.addMAline(command, i);
				}
			}
		}
		
		if (command){
			self.addMAline(command, -1);
		}
		
		/*for(var i=0;i<self.usedSlot.length;i++){
			command = (self.usedSlot[i].split("_"))[1];
			if (command){
				$("#technical_picker"+(i+1)+" div[data-type='"+command+"_setting'] button.apply").trigger("click");	
			}
		}*/		
		$("#enter_btn").trigger("click");	
		
	},
	getChartHeight : function(){

		/*
		var offset =this.mobileHeight[this.isMobile]+this.mobileTop[this.isMobile];		
		var height = this.options.chartHeight+this.options.chartTop+90+25;
		for(var i = 0; i < this.usedSlot.length; i++) {    
			if (this.usedSlot[i] != ""){
				height += offset+this.options.subChartTitle;
			}
		}	

		return height;
		
		*/
		this.isMobile = ($(window).width() < 850 )? true: false;
		var offset =this.mobileHeight[this.isMobile]+this.mobileTop[this.isMobile];	

		var height = this.options.chartHeight+this.options.chartTop+90+25;
	
		for(var i = 0; i < this.usedSlot.length; i++) {    
			if (this.usedSlot[i] != ""){
			
					height += offset+this.options.subChartTitle;
					//height += 100+this.options.subChartTitle;
				
				
			}
		}	
		
		
		return height-((this.isIntraday)?70:0);
	
	},
	labels : function (){
		return {
			tc :{
				unit:{
					K:"千",
					M:"百萬",
					B:"十億",
				},
				yTitle1 : this.stockcode + ((this.stockcode*1>0)?".HK":"")+"價格",
				subTitle : {
					macd : "移動平均匯聚背馳指標",
					rsi : "相對強弱指數",
					turnover : this.stockcode + ((this.stockcode*1>0)?".HK":"") + " 成交額",
				},
				toolTip : {
					open:"O:",
					high:"H:",
					low:"L:",
					last:"C:",
					volume:"成交量:",
					underlyinghigh:  this.stockcode + " 最高價",
					underlyinglow:  this.stockcode + " 最低價",
					underlyingopen:  this.stockcode + " 開市價",
					underlyinglast:  this.stockcode + " 價格",
					MASlot: ["10天移動平均線","20天移動平均線","50天移動平均線","100天移動平均線","250天移動平均線",["保歷加平均線","保歷加下限線","保歷加上限線"],adddigit(this.comparecode) + " 價格"],
					TASlot: {
						turnover:"成交額",
						rsi:"RSI",
						macd:["MACD-棒形圖","MACD","MACD-訊號"],
					},
				},
				calllv : "收回價",	
				maturity : "到期日",
				strike : "行使價",
				gearing : "有效槓桿",
				egearing : "有效槓桿",
				x: "倍",
				call : "認購",
				put : "認沽",
				bull : "牛證",
				bear : "熊證",
			},
			sc :{
				unit:{
					K:"千",
					M:"百万",
					B:"十亿",
				},
				yTitle1 : this.stockcode + ((this.stockcode*1>0)?".HK":"")+"价格",
				subTitle : {
					macd : "移动平均汇聚背驰指标",
					rsi : "相对强弱指数",
					turnover : this.stockcode + ((this.stockcode*1>0)?".HK":"")+ " 成交额",
				},
				toolTip : {
					open:"O:",
					high:"H:",
					low:"L:",
					last:"C:",
					volume:"成交量:",
					underlyinghigh:  this.stockcode + " 最高价",
					underlyinglow:  this.stockcode + " 最低价",
					underlyingopen:  this.stockcode + " 开市价",
					underlyinglast:  this.stockcode + " 价格",
					MASlot: ["10天移动平均线","20天移动平均线","50天移动平均线","100天移动平均线","250天移动平均线",["保历加平均线","保历加下限线","保历加上限线"],adddigit(this.comparecode) + " 价格"],
					TASlot: {
						turnover:"成交额",
						rsi:"RSI",
						macd:["MACD-棒形图","MACD","MACD-讯号"],
					},
				},
				calllv : "收回价",	
				maturity : "到期日",
				strike : "行使价",
				gearing : "有效杠杆",
				egearing : "有效杠杆",
				x: "倍",
				call : "认购",
				put : "认沽",
				bull : "牛证",
				bear : "熊证",
			},
			en :{
				unit:{
					K:"K",
					M:"M",
					B:"B",
				},
				yTitle1 : this.stockcode + ((this.stockcode*1>0)?".HK":"")+ " last",
				subTitle : {
					macd : "MACD",
					rsi : "RSI",
					turnover :  this.stockcode + ((this.stockcode*1>0)?".HK":"")+ " Turnover",
				},
				toolTip : {
					open:"O:",
					high:"H:",
					low:"L:",
					last:"C:",
					volume:"Volume:",
					underlyinghigh:  this.stockcode + " high",
					underlyinglow:  this.stockcode + " low",
					underlyingopen:  this.stockcode + " open",
					underlyinglast:  this.stockcode + " last",
					MASlot: ["SMA-10","SMA-20","SMA-50","SMA-100","SMA-250",["Moving average","Bollinger lower bound","Bollinger upper bound"],adddigit(this.comparecode) + " last"],
					TASlot: {
						turnover:"Turnover",
						rsi:"RSI",
						macd:["MACD-histogram","MACD","MACD-signal"],
					},
				},
				calllv : "Call level",	
				maturity : "Maturity",
				strike : "Strike",
				gearing : "Gearing",
				egearing : "Eff.Gearing",
				x: "X",
				call : "Call",
				put : "Put",
				bull : "Bull",
				bear : "Bear",
			},
		}
	},
}