Highcharts.setOptions({lang :{
	rangeSelectorZoom : "",
	/*rangeSelectorFrom : "",
	rangeSelectorTo : "",*/
}});
$(document).ajaxStart(function() {
	$(underlyingChart.loadingContainer).show();
});
$(document).ajaxStop(function() {
	$(underlyingChart.loadingContainer).hide();
});

$(window).on('resize.underlyingChart', function(e) {
	//console.log('resize');
	underlyingChart.updateSeriesPosition();
	
	underlyingChart.chart.reflow();
	$('.highcharts-crosshair ').css('visibility','hidden');
	//$.each(underlyingChart.emptySlot, function(index, value){
		underlyingChart.drawEmptyBackground();
	//});
});	

var underlyingChart = {
	chart : null,
	cur_chart : null,
	data : null,
	period: 0,
	emptySlot:["","","","","",""],
	usedSlot : ["","","","","",""],
	usedMASlot : ["","","","",""],
	//maColors : ["#61A1C6","#a1af00","#82389b","#e60028","#fbc189"],
	maColors : ["#F48B28","#FF68D3","#00DEBB","#9FA1F3","#BC6BC6"],
	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,
	isMobile: ($(".mobile_header").is(":hidden"))?false:true,
	mobileHeight:{true:85, false:100},
	mobileTop:{true:30, false:0},
	lastObj: null,
	isFx: 0,
	init : function(code, callback, navUpdated, ttMoved){
		var self = this;	
		var delay = (typeof isSameOrigin !== "undefined" && isSameOrigin*1 == 0)? '/delay/1': '';

		self.navigatorUpdated = (navUpdated!==undefined)?navUpdated:null;
		self.toolTipMoved = (ttMoved!==undefined)?ttMoved:null; 
		$.getJSON('/'+lang+'/data/chart/underlyingChart/code/'+code+'/period/'+self.period + delay, function(_data) {
			self.data = self.decode(_data);
			

			var htmlContainer = null;
			if ($('#underlyingChartContainer .highcharts-html-container').length>0){
				htmlContainer = $('#underlyingChartContainer .highcharts-html-container');
			}
			self.stockcode = code;
			self.fdate = _data.mainData.fdate;
			self.edate = _data.mainData.edate;
			self.isFx = _data.mainData.isFx;


			$('#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.drawBackground();
					if(type!="index"){
						self.setPeriod(self.data.last[self.data.last.length-1][0]- (60*60*24*1000)*365,self.data.last[self.data.last.length-1][0]);
					}else{
						self.setPeriod(self.data.last[self.data.last.length-1][0]- (60*60*24*1000)*365+(60*60*24*1000)*183,self.data.last[self.data.last.length-1][0]);
					}
					self.changeChartType(self.charttype);
					if (callback){
						callback();
					}
					
					$("#startDay, #endDay").datepicker({
						dateFormat: 'yy-mm-dd',
						minDate: self.fdate,
						maxDate: self.edate
					});
					$("#startDay, #endDay").change(function(){
						var startDay = $("#startDay").val();
						var endDay = $("#endDay").val();
						if(startDay!="" && endDay!=""){
							self.setPeriod(Date.parse(startDay),Date.parse(endDay));
						}
					});
					
				}else{
					chart.reflow();
				}
			});
		});
	},
	decode : function(_data){


		var data = _data.mainData.underlying;
        var ohlc = [], volume = [],turnover = [],last = [], recommData = [];
        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
			]);		
				
		}
		for(var i = 0; i < _data.recommData.length; i++){
			let y;
			
			if(_data.recommData.length>1){
				if(i == 0){
				
					y = (_data.recommData[i].value*1 > _data.recommData[i+1].value*1) ? -10 : 11;
				
				}else{
					
					y = (_data.recommData[i].value*1 > _data.recommData[i-1].value*1) ? -10 : 11;
				
				}
			}else{
				y = -10;
			}

			
			recommData.push({
				//properties for plotlines
				className: "recomm",
				width: 2,
				value: _data.recommData[i].value*1,
				//color: "#ed8b00", //line color
				color: _data.recommData[i].wtypeValue.toLowerCase() == 'call'? "#4D7AA7": "#ed8b00",
				zIndex: 4,
				label:{
					useHTML: true,
					text: '<div class="recomProduct" style="background : '+(_data.recommData[i].wtypeValue.toLowerCase() == 'call'? "#4D7AA7": "#ed8b00")+'; padding: 3px 3px 3px 0;" value="' + _data.recommData[i].code + '"><a style="color: inherit;" href="' + _data.recommData[i].url + '">' + _data.recommData[i].code + '(' +  _data.recommData[i].wtype + ')' + '</a></div>',
					y: y,
					x: 0,
					style: {
						color: 'white',
					}
				},
				
				//properties for hover tooltip
				uname: _data.recommData[i].uname,
				code: _data.recommData[i].code,
				wtype: _data.recommData[i].wtype,
				egearing: _data.recommData[i].egearing,
				mdate: _data.recommData[i].mdate,
				wtypeValue: _data.recommData[i].wtypeValue,

			});	
		}

		return {ohlc : ohlc, vol:volume, turnover: turnover, last:last, recommData: recommData,};
	},
	options : {
        groupingUnits : [['day',[1]],], 
		chartHeight : 270,
		chartTop : 23,
		subChartTitle : 23,
	},
	getJSON : function(data){
		
		var self = this;
		
		return {
			chart : {
				animation: false,
				renderTo: 'underlyingChartContainer',
				backgroundColor : (self.toolTipMoved !=null)?"rgba(255, 255, 255, 0.0)":"#FFFFFF",
				marginLeft: 0,
				marginRight: 70,
				marginTop: this.options.chartTop,
				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);
							}
						}
					},
					click: function(event) {
						$('.highcharts-crosshair').css('visibility','visible');
					}
				}
			},
			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: '#e60028',
                    lineColor: '#e60028',
                    upColor: '#1a9656',
                    upLineColor: '#1a9656'
                },
				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,false);

					if (underlyingChart.chart.annotations.selected > 0){
						return "";
					}
					
					
					
					var html = '';

					var tooltipHead;
					
					

					if($("#underlyingChartContainer .recomProduct:hover").length == 1){
						let hoverEle = $("#underlyingChartContainer .recomProduct:hover");
						
						let hoverCode = hoverEle.attr("value");
						$.each( data.recommData, function(key) {
							//console.log(data.recommData[key].code );
							let recommCode = data.recommData[key].code;
							let wtypeStr = data.recommData[key].wtype;
							
							if(recommCode == hoverCode){
								//恒指認購證12345

								let spacer = "";
								if(lang == "en_hk"){
									spacer = " ";
								}
								tooltipHead = data.recommData[key].uname + spacer + wtypeStr + " " + recommCode;
								
								let valueName, egearingName;
								if(data.recommData[key].wtypeValue == "CALL" || data.recommData[key].wtypeValue == "PUT"){
									valueName = self.labels()[lang].strike;
									egearingName = self.labels()[lang].egearing;
								}else{
									valueName = self.labels()[lang].calllv;
									egearingName = self.labels()[lang].gearing;
								}
								html +=  '<div class="val2"><span class="name">'+ valueName +'</span><span class="value">' + data.recommData[key].value + '</span></div>';
								html +=  '<div class="val2"><span class="name">'+ self.labels()[lang].maturity +'</span><span class="value">' + data.recommData[key].mdate + '</span></div>';
								html +=  '<div class="val2"><span class="name">'+ egearingName +'</span><span class="value">' + data.recommData[key].egearing + '</span></div>';

							}
						});
					}else{
						
						if (Highcharts.dateFormat('%H:%M', this.points[0].x) != "00:00"){
							tooltipHead = Highcharts.dateFormat('%Y-%m-%d %H:%M', this.points[0].x);
						}else{
							tooltipHead = Highcharts.dateFormat('%Y-%m-%d', this.points[0].x);
						}
					
						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">'+tooltipHead+'</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
				},
				
				tickPositioner: function () {
					var positions = [];
					var _last = 0;
					if (Highcharts.dateFormat('%H:%M', this.max) != "00:00"){
						return null;
					}
					//console.log(data.last);
					if(data.last.length > 1){
						for (var i=0;i<this.ordinalPositions.length;i++){
							var tick = this.ordinalPositions[i]; 
							if (tick>=this.min && tick<=this.max){
								var _date = new Date(tick);
								var _flag;
								if ((this.max-this.min)>3600*1000*24*30*36){
									_flag =  Math.floor(_date.getMonth()%6);
								}else if ((this.max-this.min)>3600*1000*24*30*12){
									_flag = Math.floor(_date.getMonth()%3);
								}else if ((this.max-this.min)>3600*1000*24*30*3){
									_flag = _date.getDate();
								}else{
									_flag = _date.getDay();
								} 
								if (_flag < _last && tick != this.min){
									positions.push(tick);
								}
								_last = _flag;
							}
						}
					}else if(data.last.length == 1){
						positions.push(data.last[0][0]);
					}
					
					
					return positions;
				},
				labels: {
					formatter: function () {
						if (Highcharts.dateFormat('%H:%M', this.value) != "00:00"){
							if (lang == "en_hk"){
								if (Highcharts.dateFormat('%H%M', this.value)*1 < 920
								&& (self.stockcode.toUpperCase() != "NDX" && self.stockcode.toUpperCase() != "SPX" && self.stockcode.toUpperCase() != "DJI" && self.stockcode.toUpperCase() != "RTY" && self.isFx!=1)
								){
									return Highcharts.dateFormat('%b %d 09:20', this.value);
								}
								return Highcharts.dateFormat('%b %d %H:%M', this.value);		
							}else{
								if (Highcharts.dateFormat('%H%M', this.value)*1 < 920
								&& (self.stockcode.toUpperCase() != "NDX" && self.stockcode.toUpperCase() != "SPX" && self.stockcode.toUpperCase() != "DJI" && self.stockcode.toUpperCase() != "RTY" && self.isFx!=1)
								){
									return Highcharts.dateFormat('%m月%d日 09:20', this.value);
								}
								return Highcharts.dateFormat('%m月%d日 %H:%M', this.value);
							}
						}else{
							if (lang == "en_hk"){
								return Highcharts.dateFormat('%b %d', this.value);
							}else{
								return Highcharts.dateFormat('%m月%d日', this.value);
							}
						}
					}				
				},
				opposite: true,
				offset: this.options.chartHeight*-1-30,
			},
			yAxis: [{
				labels:{
					formatter: function () {
						return formatPrice(this.value);		
					},
					align:'left',
					x: 3,	
					y: 4,				
				},
				plotLines: data.recommData,
				gridLineWidth: (self.toolTipMoved !=null)?0:1,
				height: this.options.chartHeight,
				top:this.options.chartTop,
				opposite: true,
				showFirstLabel: false,	
				showLastLabel: true,					
				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,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, 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,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, 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,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, 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,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, 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,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, 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,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
			}],
			navigator : {
				enabled : (typeof longversion == "undefined")?true:false,
				series: {
					data: data.last,
				},
				height : 60,
			},
			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);
			$("#startDay").val(Highcharts.dateFormat('%Y-%m-%d', Math.max(_from,this.data.last[0][0])));
			$("#endDay").val(Highcharts.dateFormat('%Y-%m-%d', _to));
		}
	},
	setPeriod2 : function(period){		
		if (this.data.last[0][0]){
			var endDay = this.edate;
			var d = new Date(endDay);
			d.setMonth(d.getMonth() - period);
			d.setDate(d.getDate() + 1);
			var yyyy = d.getFullYear().toString();
			var mm = (d.getMonth()+1).toString();
			var dd  = d.getDate().toString();
			var startDay = yyyy +"-"+ (mm[1]?mm:"0"+mm[0]) +"-"+ (dd[1]?dd:"0"+dd[0]);

			this.setPeriod(Date.parse(startDay),Date.parse(endDay));
		}
	},
	drawToolTip: function(obj, isReset){
		//console.log("start drawToolTip");
		//console.log(obj);
		//var chart = this.chart;
		this.lastObj = obj; 
		var chart = this.cur_chart;
		var fontstyle = {color: '#666666', fontSize: '13px'};
		var textattr = {zIndex: 7, class: "tooltipElement"};
		
		//if ($(".tooltipElement.s"+obj.points[0].x).length>0){
		if(!isReset){
			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)?45: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);
							}
						}
						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);
								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, 0, _top+16).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 - underlyingChart.chart.margin[1]  - clientwidth - 5, _top+16).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(){
		/*
		let recomCSS = {
			"text-decoration": "none",
			"color": "#000000",
		};*/
		//$('.recomProduct a').css(recomCSS);
		
		if (this.cur_chart == this.chart){
			$(".tooltipBackground").remove();
			$(".tooltipLabel").remove();
		}
		//$(".tooltipBackground").remove();
		//$(".tooltipLabel").remove();
		//var chart = this.chart;
		var chart = this.cur_chart;
		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();
		var j=0;
		for (var i=0;i<this.usedSlot.length;i++){
			if (this.usedSlot[i] != ""){
				var offset = (this.isMobile)?0:27;
				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 += ")";
						}
						
					}
				}
				// var _y =  _top+41+(this.mobileTop[this.isMobile]*(j+1));
// 				if(this.isMobile){
// 					_y =  _top+15+(this.mobileTop[this.isMobile]*(j+1));
// 				}
				chart.renderer.text(this.labels()[lang].subTitle[chartType]+days, 0, _top+16).css(fontstyle).attr(textattr).add();
				j++;
			}
		}
	},
	changeChartType: function (type){
		var self = this;
		if (type != this.chart.series[1].type){
			if (self.period!=0 && (self.stockcode.toUpperCase() == "NDX" || self.stockcode.toUpperCase() == "SPX" || self.stockcode.toUpperCase() == "DJI" || self.stockcode.toUpperCase() == "RTY" || self.isFx==1)){
				type = "line";
			}
			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;
		$(".chart_type").show();
		if (type.endsWith("min")){
			$(".range").hide();
			if (self.stockcode.toUpperCase() == "NDX" || self.stockcode.toUpperCase() == "SPX" || self.stockcode.toUpperCase() == "DJI" || self.stockcode.toUpperCase() == "RTY" || self.isFx==1){
				$(".chart_type").hide();
				self.charttype = "line";
			}
			this.period = type.replace("min","")*1;
			if(self.isFx==1){
				this.period = 10;
			}
			this.options.groupingUnits = [["minute",[this.period]],];
			console.log(this);
			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){
			$(".range").show();
			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;
		}
		var delay = (typeof isSameOrigin !== "undefined" && isSameOrigin*1 == 0)? '/delay/1': '';

		$.getJSON('/'+lang+'/data/chart/underlyingChart/code/'+code+ delay+"/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{
				var delay = (typeof isSameOrigin !== "undefined" && isSameOrigin*1 == 0)? '/delay/1': '';
				$.getJSON('/'+lang+'/data/chart/underlyingChart/code/'+self.stockcode + delay + '/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 series = highchart_default_options(_type,self.options).series;

			
					var outData = highchart_decode_indicators(_type,_data.mainData.indicator);
					var __outData = _data.mainData.indicator;
					
					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();
					self.drawEmptyBackground();
				});
			}
		}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, "");	
	},   
	drawline:function(renderer, lineColor, zIndex, x1, y1, x2, y2){
		renderer.path(['M', x1, y1,'L', x2, y2]).attr({
			stroke: lineColor,
			//stroke: 'red',
			'stroke-width': 1,
			opacity: 1,
			class :'gridline',
			zIndex: zIndex,

        }).add();
		
	},
	drawEmptyBackground: function(){
	
		let self = this;
		let chart = this.chart;
		$('#underlyingChartContainer .gridline').remove();
		

		let offsetTop = 49;
		
		
		var totalsubchart=0;
		for (var i=0;i<this.usedSlot.length;i++){
			if (this.usedSlot[i] != ""){
				totalsubchart++;
			}
		}
		//$.each(self.emptySlot,function(index, value){
		for (var j=0;j<totalsubchart;j++){
			var index = j;
			let topCounter = index*1;
			let _top = (self.options.chartHeight+self.options.chartTop)+(self.mobileHeight[self.isMobile]+self.options.subChartTitle)*topCounter+(self.mobileTop[self.isMobile]*(topCounter+1))+offsetTop;
		
			let isMobile = ($(".mobile_header").is(":hidden"))?false:true;
		
			let offsetBottom = (isMobile) ? -30:0;
			
			//let _bottom = _top + self.mobileHeight[self.isMobile] + self.mobileTop[self.isMobile] + offsetBottom;
					
			let tick = (self.mobileHeight[self.isMobile] + self.mobileTop[self.isMobile] + offsetBottom)/4;
	
			//self.drawline(chart.renderer,"red", 1, 0, _top, chart.plotWidth, _top);
			//self.drawline(chart.renderer,"red", 1, 0, _bottom, chart.plotWidth, _bottom);
	
			//e6e6e6
			for(var i = 0; i <5; i++){
				self.drawline(chart.renderer,"#e6e6e6", 1, 0, _top + tick*i, chart.plotWidth, _top + tick*i);
			}
		};

	
	
		

	},
	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);
			}
			var delay = (typeof isSameOrigin !== "undefined" && isSameOrigin*1 == 0)? '/delay/1': '';
		
			$.getJSON('/'+lang+'/data/chart/underlyingChart/code/' + self.stockcode + delay +'/period/' + self.period+_para , function(_data) {
				self.removeSeries(id);
				
				let nullSlot = 0;
		
				if(typeof _data.mainData.indicator[_type] != "object" && _type == 'macd'){
					
					nullSlot = 1;
				}
			
				var series = highchart_default_options(_type,self.options).series;

				if(nullSlot == 0){
					var outData = highchart_decode_indicators(_type,_data.mainData.indicator);
					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.emptySlot[id] = "";
				}else{
				
					self.emptySlot[id] = _type;
				
				}
			
				self.drawEmptyBackground();
				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;
		this.isMobile = ($(".mobile_header").is(":hidden"))?false:true;
		var j=0;
		for (var i=0;i<this.usedSlot.length;i++){
			if (this.usedSlot[i] != ""){
				j++;
			}
		}
		var _chartHeight = 270;
		if (j<=1){
			_chartHeight = 270 + (this.mobileHeight[this.isMobile]+this.options.subChartTitle);
		}
		if (_chartHeight != this.options.chartHeight){
			this.options.chartHeight = _chartHeight;
			chart.yAxis[0].userOptions.height = this.options.chartHeight;
			chart.yAxis[1].userOptions.height = this.options.chartHeight;
			chart.yAxis[0].update();	
			chart.yAxis[1].update();	
			chart.xAxis[0].userOptions.offset = this.options.chartHeight*-1-30;
			chart.xAxis[0].update();
			this.drawEmptyBackground();			
		}
		j=0;
		for (var i=0;i<this.usedSlot.length;i++){
			var yAxisID = i + 3;
			if (this.usedSlot[i] != ""){
				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));
				chart.yAxis[yAxisID].userOptions.top = _top;
				chart.yAxis[yAxisID].userOptions.height = this.mobileHeight[this.isMobile];
				var tempArr = this.usedSlot[i].split("_");
				var _type = tempArr[1];
				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();	
		}
		if(this.lastObj){
			this.drawToolTip(this.lastObj,true);
			$("#underlyingChartContainer").height(this.getChartHeight());
			$(self.loadingContainer).height(this.getChartHeight());
		}
	},
	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 = "";
// 		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");	
			}
		}		
		
	},
	getChartHeight : function(){
		var offset =this.mobileHeight[this.isMobile]+this.mobileTop[this.isMobile];				
		var height = this.options.chartHeight+this.options.chartTop+90+25-((typeof longversion == "undefined")?0:60);		
		for(var i = 0; i < this.usedSlot.length; i++) {    
			if (this.usedSlot[i] != ""){
				height += offset+this.options.subChartTitle;
				//height += this.mobileHeight[this.isMobile]+this.options.subChartTitle;
			}
		}	
		/*this.chart.xAxis[0].userOptions.top = height-70;
		this.chart.xAxis[0].update();*/
		
		//return height-((this.isIntraday)?70:0);
		return height;
	},
	labels : function (){
		var _out = {
			zh_hk :{
				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 : "熊證",
			},
			zh_cn :{
				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_hk :{
				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",
			},
		};
		_out["edu"] = _out["zh_cn"];
		_out["zh-hk"] = _out["zh_hk"];
		_out["zh-cn"] = _out["zh_cn"];
		_out["en-hk"] = _out["en_hk"];
		_out["edu-zh_hk"] = _out["zh_hk"];
		_out["edu-zh_cn"] = _out["zh_cn"];
		_out["edu-en_hk"] = _out["en_hk"];
		return _out;
	},
}