Highcharts.setOptions({lang :{
	rangeSelectorZoom : "",
	/*rangeSelectorFrom : "",
	rangeSelectorTo : "",*/
}});
$(document).ajaxStart(function() {
	$(stockChart.loadingContainer).show();
});
$(document).ajaxStop(function() {
	$(stockChart.loadingContainer).hide();
});
$(window).on('resize.stockChart', function(e) {
	if (isMobileView){
		stockChart.resize(e);
	}
});	
var stockChart = {
	chart : null,
	cur_chart : null,
	data : null,
	period: 5,
	usedSlot : ["","","","","",""],
	usedMASlot : ["","","","",""],
	//maColors : ["#61A1C6","#a1af00","#82389b","#e60028","#fbc189"],
	maColors : ["#78c043","#865bbc","#da0c6f","#7a004c","#4c227c"],
	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:false,
	init : function(code, callback, navUpdated, ttMoved){
		var self = this;	
		self.navigatorUpdated = (navUpdated!==undefined)?navUpdated:null;
		self.toolTipMoved = (ttMoved!==undefined)?ttMoved:null; 
		self.isMobile = (isMobileView || $("body").attr("data-broswer-view") == "mobile")?true:false;
		if (self.isMobile){
			self.options.subChartHeight = 75;
			self.options.chartHeight = 238;
		}
		if (code.toLowerCase() == "zzzb" || code.toLowerCase() == "zzzc1" || code.toLowerCase() == "ssea"){
			this.period = 0;
			this.options.groupingUnits = [["day",[1]],];
		}
		$.getJSON('/'+lang+'/data/chart/stockChart/code/'+code+'/period/'+self.period, function(_data) {
			$("#chartContainer").show();
			if (_data.mainData.underlying.length == 0){
				$("#chartContainer").hide();
				return;
			}
			
			self.data = self.decode(_data);
			var htmlContainer = null;
			if ($('#stockChartContainer .highcharts-html-container').length>0){
				htmlContainer = $('#stockChartContainer .highcharts-html-container');
			}
			$(".chart-stime").html(_data.stime);
			$(".isdelayed").show();
			$('#stockChartContainer').highcharts('StockChart',self.getJSON(self.data), function (chart){
				if ($(chart.renderTo).attr("id")){
					if (!$('#stockChartContainer').hasClass("noSetting")){
						if (htmlContainer){
							$('#stockChartContainer').append(htmlContainer);
						}else{
							$('#stockChartContainer').append("<div class='highcharts-html-container' style='position: absolute; top: 0px;'></div>");
							$('#stockChartContainer .highcharts-html-container').append("<div class='highcharts-loading' style='width:"+$('#stockChartContainer').width()+"px;height:"+$('#stockChartContainer').height()+"px'></div>");
							self.loadingContainer = $('#stockChartContainer .highcharts-html-container .highcharts-loading');
						}
					}
					self.chart = chart;
					self.cur_chart = chart;
					self.stockcode = code;
					self.drawBackground();
					if (self.period == 0){
						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]);
					}else if(self.data.last[0]){
						self.setPeriod(self.data.last[Math.max(self.data.last.length-71,0)][0],self.data.last[self.data.last.length-1][0]);
					}
					self.changeChartType(self.charttype);
					if (callback){
						callback();
					}
				}else{
					chart.reflow();
				}
			});
		});
	},
	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 : [["minute",[5]],],//[['day',[1]],], 
		chartHeight : 400,
		chartTitle : 45,
		subChartHeight : 100,
		subChartTitle : 23,
		dateBarHeight : 25,
		footerPadding : 5,
	},
	resize: function(e){
		var self = this;
		var chart = this.chart;
		var count = 0;
		//usedSlot
		for(var i=0;i<this.usedSlot.length;i++){
			if (this.usedSlot[i]!=""){
				count++;
			}
		}
		if (isMobileView){
			var _height = window.innerHeight - $(".chart_head").height();
			self.options.chartHeight = Math.max(_height,390) - count*(self.options.subChartHeight+self.options.subChartTitle)-self.options.chartTitle-self.options.dateBarHeight-self.options.footerPadding;
		}
		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();
		self.updateSeriesPosition();
		$("#stockChartContainer").height(self.getChartHeight());
		//self.refreshSeries();
	},
	getJSON : function(data){
		
		var self = this;

		return {
			chart : {
				animation: false,
				renderTo: 'stockChartContainer',
				backgroundColor : (self.toolTipMoved !=null)?"rgba(255, 255, 255, 0.0)":"#FFFFFF",
				marginLeft: 0,
				marginRight: 70,
				marginTop: this.options.chartTitle,
				panning: true,
				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);
							}
						}
					}
				},
				resetZoomButton: {
					theme: {
						display: 'none'
					}
				},
			},
			annotationsOptions: {
				enabled: true,
				noButtons: true,
				/*buttonsElementId: "underlyingMasterTools",*/
			},
			exporting: {
				enabled: false,
			},
			plotOptions: {
                candlestick: {
                    oxymoronic: true,
                    color: '#d91e19',
                    lineColor: '#d91e19',
                    upColor: '#003868',
                    upLineColor: '#003868'
                },
				area: {
					threshold: null,
				},
				series: {
					turboThreshold: 2000,
					states:{
						hover: {
							enabled: false,
						},
						inactive:{
							opacity:1,
						}
					}
				}
			},
			tooltip: {
				followTouchMove: true,
				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);
					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',
				crosshair: {
					width: 1,
					color: "#000",
					zIndex: 4,
					dashStyle: "Dash",
				},
				labels: {
					style:{"color": "#000"},
					formatter: function () {
						if (Highcharts.dateFormat('%H:%M', this.value) != "00:00"){
							if (Highcharts.dateFormat('%H%M', this.value)*1 < 920){
								return Highcharts.dateFormat('09:20', this.value);
							}
							return Highcharts.dateFormat('%H:%M', this.value);
						}else{
							return Highcharts.dateFormat('%d/%m', this.value);
						}
					}							
				},
				opposite: true,
				offset: this.options.chartHeight*-1-30,
			},
			yAxis: [{
				labels:{
					style:{"color": "#000"},
					formatter: function () {
						return formatPrice(this.value);		
					},
					align:'left',
					x: 3,	
					y: 4,					
				},
				gridLineWidth: (self.toolTipMoved !=null)?0:1,
				height: this.options.chartHeight,
				top:this.options.chartTitle,
				opposite: true,
				showFirstLabel: false,	
				showLastLabel: true,	
				crosshair: {
					width: 1,
					color: "#000",
					snap:true,
					zIndex: 4, 
					dashStyle: "Dash",
					label: {
						backgroundColor: "#575757",
						enabled: true,
						format: '{value:.2f}',
						style:{"color": "#fff"},
					}
				},
			},
			{
				labels:{
					formatter: function () {
						return formatPrice(this.value);				
					},
					align:"left",
					x: 3,
				},
				opposite: false,
				height: this.options.chartHeight,
				top:this.options.chartTitle,
			},
			{
				top:-100,//this.options.chartHeight-43,
				height: 90,
				gridLineWidth: 0,
				labels:{
					enabled: false
				},
			},
			{
				top:-100,height: this.options.subChartHeight,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false, 
				labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4,style:{"color": "#000"}}, crosshair: {width: 0},
			},{
				top:-100,height: this.options.subChartHeight,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false, 
				labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4,style:{"color": "#000"}}, crosshair: {width: 0},
			},{
				top:-100,height: this.options.subChartHeight,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
				labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4,style:{"color": "#000"}}, crosshair: {width: 0},
			},{
				top:-100,height: this.options.subChartHeight,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
				labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4,style:{"color": "#000"}}, crosshair: {width: 0},
			},{
				top:-100,height: this.options.subChartHeight,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
				labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4,style:{"color": "#000"}}, crosshair: {width: 0},
			},{
				top:-100,height: this.options.subChartHeight,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
				labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4,style:{"color": "#000"}}, crosshair: {width: 0},
			}],
			navigator : {
				enabled : (this.isMobile || this.period != 0)?false:true,
				height : 60,
				baseSeries: 0, 
				outlineColor: '#00716C',
				maskFill: 'rgba(36, 130, 125, 0.1)',
				handles: {
					backgroundColor: "#a8d0ce",
					borderColor: "#00716C"
				},
				xAxis: {
					gridLineWidth: 0,
					labels:{
					  enabled: false
					}
				},
				yAxis: {
					gridLineWidth: 0,
					labels:{
					  enabled: false
					}
				},
				series: {
					data: data.last,
					type: 'area',
					fillColor: 'rgba(237,237,237,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,
				zIndex: 1,
                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;
		var chart = this.cur_chart;
		var fontstyle = {color: '#000', fontSize: '13px'};
		var textattr = {zIndex: 7, class: "tooltipElement"};
		var xoffset = 0;
		//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);
		}
		if (this.period!=0){
			chart.renderer.text(Highcharts.dateFormat('%y/%m/%d %H:%M',obj.points[0].x), 10, 18).css(fontstyle).attr(textattr).add();
			xoffset = 50;
		}else{
			chart.renderer.text(Highcharts.dateFormat('%y/%m/%d',obj.points[0].x), 10, 18).css(fontstyle).attr(textattr).add();
		}
		//chart.renderer.text(Highcharts.dateFormat('%y/%m/%d',obj.points[0].x), 15, 18).css(fontstyle).attr(textattr).add();
		try {
			var _points = [];
			for(var j = 0; j<obj.points.length;j++){
				_points[j] = obj.points[j];
			}
			_points.sort(function (a, b) {
				return a.series.name > b.series.name ? 1 : -1;
			});	
			for(var j = 0; j<_points.length;j++){
				/*if (this.points[j].series.name.startsWith(self.usedMASlot[i])){
					_index = j;
					break;
				}*/
				this.selected_ts = _points[0].x;
				if (_points[j].series.name == "primary"){
					//chart.renderer.text(Highcharts.dateFormat('%y/%m/%d',_points[j].x), 15, 18).css(fontstyle).attr(textattr).add();
					if (_points[j].point.close){
						chart.renderer.text(this.labels()[lang].toolTip.open + formatPrice(_points[j].point.open), 10, 37).css(fontstyle).attr(textattr).add();
						chart.renderer.text(this.labels()[lang].toolTip.high + formatPrice(_points[j].point.high), 90, 37).css(fontstyle).attr(textattr).add();
						chart.renderer.text(this.labels()[lang].toolTip.low + formatPrice(_points[j].point.low), 170, 37).css(fontstyle).attr(textattr).add();
						chart.renderer.text(this.labels()[lang].toolTip.last + formatPrice(_points[j].point.close), 250, 37).css(fontstyle).attr(textattr).add();
					}else{
						chart.renderer.text(this.labels()[lang].toolTip.last+formatPrice(_points[j].point.y), 10, 37).css(fontstyle).attr(textattr).add();
					}
				}else if (_points[j].series.name == "vol"){
				/*
					chart.renderer.text(this.labels()[lang].toolTip.volume+(_points[0].y/1000000).toFixed(2)+this.labels()[lang].unit.M, (_points[1].series.userOptions.type=="line")?170:390, 18).css(fontstyle).attr(textattr).add();
					*/
				}else if (_points[j].series.name.indexOf("_sma")>0 || _points[j].series.name.indexOf("_ema")>0 ){
					for(var i =0; i<this.usedMASlot.length;i++){
						if (_points[j].series.name == this.usedMASlot[i]){
							_index = i;
							break;
						}
					}
					chart.renderer.rect(_index*145+85+xoffset, 11, 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 (_points[j].series.name.indexOf("_sma")>0){
						chart.renderer.text("SMA("+days+"):"+formatPrice(_points[j].y), 145*_index+105+xoffset, 18).css(fontstyle).attr(textattr).add();
					}else{
						chart.renderer.text("EMA("+days+"):"+formatPrice(_points[j].y), 145*_index+105+xoffset, 18).css(fontstyle).attr(textattr).add();
					}
				}else if (_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(_points[j].y), 90, 38).css(fontstyle).attr(textattr).add();
				*/
				}else if (_points[j].series.name.indexOf("_bol")>0 && _points[j].point.high){
					var _label1 = this.labels()[lang].toolTip.MASlot[5][0]+": "; //"("+_points[j].series.userOptions.p1+","+_points[j].series.userOptions.p2+"): ";
					var _label2 = this.labels()[lang].toolTip.MASlot[5][1]+": ";
					var _label3 = this.labels()[lang].toolTip.MASlot[5][2]+": ";
					_label1 += (_points[j-1].y).toFixed(2);
					_label2 += (_points[j].point.high).toFixed(2);
					_label3 += (_points[j].point.low).toFixed(2);
					chart.renderer.text(_label1, 25+60+xoffset, 18).css(fontstyle).attr(textattr).add();
					chart.renderer.text(_label2, 185+60+xoffset, 18).css(fontstyle).attr(textattr).add();
					chart.renderer.text(_label3, 345+60+xoffset, 18).css(fontstyle).attr(textattr).add();
				}else if (_points[j].series.name.indexOf("_sar")>0){
					var _label = this.labels()[lang].toolTip.MASlot.sar+"("+_points[j].series.options.p1+","+_points[j].series.options.p2+"): ";
					_label += (_points[j].y).toFixed(3);
					chart.renderer.text(_label, 15, 36).css(fontstyle).attr(textattr).add();
				}else{
					var segment = _points[j].series.name.split("_");
					var days = "";
					if (segment.length==2){
						textattr.class = "tooltipElement text_subchart";
						
						var index = segment[0].replace("s","")*1;
						var _top = (this.options.chartHeight+this.options.chartTitle)+((this.options.subChartHeight+this.options.subChartTitle)*index)+this.options.dateBarHeight;
						for(var i =0; i<index;i++){
							if (this.usedSlot[i] == ""){
								_top -= (this.options.subChartHeight+this.options.subChartTitle);
							}
						}
						if (!isNaN(_top)){
							var _val = "";
							var chartWidth = $('#stockChartContainer').width();
							if (segment[1] == "macd"){
								var val1 = this.labels()[lang].toolTip.TASlot[segment[1]][0]+": "+(_points[j].y).toFixed(3);
								var val2 = this.labels()[lang].toolTip.TASlot[segment[1]][1]+": "+(_points[j+2].y).toFixed(3);
								var val3 = this.labels()[lang].toolTip.TASlot[segment[1]][2]+": "+(_points[j+1].y).toFixed(3);
								_val = val1 + " " + val2 + " " + val3;
							}else if (segment[1] == "turnover"){
								_val = this.labels()[lang].toolTip.TASlot[segment[1]]+": "+(addcomma(_points[j].y));
							}else{
								_val = this.labels()[lang].toolTip.TASlot[segment[1]]+": "+(_points[j].y).toFixed(3);
							}
							if (_points[j].series.userOptions.p1){
								days = "("+_points[j].series.userOptions.p1;
								if (_points[j].series.userOptions.p2){
									days += ","+_points[j].series.userOptions.p2;
									if (_points[j].series.userOptions.p3){
										days += ","+_points[j].series.userOptions.p3;
									}
								}
								days += ")";
							}
							_val = this.labels()[lang].subTitle[segment[1]]+days + " " + _val;
							
							var clientwidth = chart.renderer.text(_val, 0, -100).css(fontstyle).attr(textattr).add().element.getBoundingClientRect().width;
							chart.renderer.text(_val, chartWidth - 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(){
		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: '#000', fontSize: '13px'};
		var textattr = {zIndex: 7,class: "tooltipLabel"};
		var chartWidth = $('#stockChartContainer').width();
		//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.rect(chartWidth - chart.margin[1], 0, chart.margin[1]*1, 1000, 0).attr({
			fill: '#FFFFFF',
			'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 _top = (this.options.chartHeight+this.options.chartTitle)+((this.options.subChartHeight+this.options.subChartTitle)*j)+this.options.dateBarHeight;
				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 += ")";
						}
						
					}
				}
				chart.renderer.text(this.labels()[lang].subTitle[chartType]+days, 0, _top+16).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";
			}
			if(type == "line") {
				this.chart.series[1].update({
					type: type,
					lineWidth: _width,
					color: _color,
					dataGrouping: {
						approximation: 'average'
					},
					keys: ['x', 'y'],
					marker:{
						enabled:false,
					},
				});
			}else{
				this.chart.series[1].update({
					type: type,
					lineWidth: _width,
					color: _color,
					dataGrouping: {
						approximation: 'ohlc'
					},
					keys: ['x', 'open', 'high', 'low', 'close'],
				});			
			}
		}
	},
	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];
	},
	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"){
					if (i == tempArr.length-1 && !$.isNumeric(self.maIndex[tempArr[i]])){
						_para += "&p4="+(tempArr[i]*1);
						self.maIndex2[3] = tempArr[i]*1;
					}else{
						_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{
				$(".tooltipElement").remove();
				$.getJSON('/'+lang+'/data/chart/stockChart/code/'+self.stockcode+'/period/'+self.period+_para, function(_data) {
					self.removeMAline([0,1,2,3,4]);
					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;
							series[i].p1 = tempArr[1];
							series[i].p2 = tempArr[2];
							self.setUsedMASlot(id, "t"+id+"_"+type);	
						}
						chart.addSeries(series[i]);
					}
					self.addSettingBox(_type);
					chart.yAxis[0].update();
					setTimeout(function(){ self.refreshSeries(); }, 500);
				});
			}
		}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 = -100;
					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;
		$(".tooltipElement").remove();
		
		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/stockChart/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.resize();
				self.drawBackground();
				$("#stockChartContainer").height(self.getChartHeight());
				$(self.loadingContainer).height(self.getChartHeight()).hide();
				chart.reflow();
				setTimeout(function(){ self.refreshSeries(); }, 500);
			});
		}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.resize();
			self.drawBackground();
			$("#stockChartContainer").height(self.getChartHeight());
			$(self.loadingContainer).height(self.getChartHeight());
			chart.reflow();
			setTimeout(function(){ self.refreshSeries(); }, 500);
		}
	},
	addSettingBox: function(type){
		/*var container = $('#stockChartContainer .highcharts-html-container');
		if (container.find("."+type+"_box").length>0){
			return;
		}
		var chartWidth = $('#stockChartContainer').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;
		for (var i=0;i<this.usedSlot.length;i++){
			var yAxisID = i + 3;
			if (this.usedSlot[i] != ""){
				var _top = (this.options.chartHeight+this.options.chartTitle)+(1)+((this.options.subChartHeight+this.options.subChartTitle)*j)+this.options.subChartTitle+this.options.dateBarHeight;
				chart.yAxis[yAxisID].userOptions.top = _top;
				var tempArr = this.usedSlot[i].split("_");
				var _type = tempArr[1];
				var container = $('#stockChartContainer .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 = "";
// 		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");	
			}
		}*/		
		if ($("#confirm_btn").length>0){
			$("#confirm_btn").trigger("click");	
		}else if (typeof updateChartLayout == "function"){
			updateChartLayout();
		}
	},
	getChartHeight : function(){
		var height = this.options.chartHeight+this.options.chartTitle+25;
		if (!(this.isMobile || this.period != 0)){
			height += 90;
		}
		for(var i = 0; i < this.usedSlot.length; i++) {    
			if (this.usedSlot[i] != ""){
				height += this.options.subChartHeight+this.options.subChartTitle;
			}
		}	
		/*this.chart.xAxis[0].userOptions.top = height-70;
		this.chart.xAxis[0].update();*/
		
		//return height-((this.isIntraday)?70:0);
		return height+this.options.footerPadding;
	},
	labels : function (){
		var _out = {
			tc :{
				currency: "港元",
				unit:{
					K:"千",
					M:"百萬",
					B:"十億",
				},
				yTitle1 : "價格",
				subTitle : {
					macd : "平滑異同移動平均線",
					rsi : "相對強弱指數",
					turnover : "成交額",
				},
				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天移動平均線","200天移動平均線","250天移動平均線",["保力加平均線","保力加下限線","保力加上限線"],adddigit(this.comparecode) + " 價格"],
					TASlot: {
						turnover:"",
						rsi:"",
						macd:["MACD","MACD-訊號","MACD-差異"],
					},
				},
				calllv : "收回價",	
				maturity : "到期日",
				strike : "行使價",
				gearing : "有效槓桿",
				egearing : "有效槓桿",
				x: "倍",
				call : "認購",
				put : "認沽",
				bull : "牛證",
				bear : "熊證",
			},
			sc :{
				currency: "港元",
				unit:{
					K:"千",
					M:"百万",
					B:"十亿",
				},
				yTitle1 : "价格",
				subTitle : {
					macd : "平滑异同移动平均线",
					rsi : "相对强弱指数",
					turnover : "成交额",
				},
				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天移动平均线","200天移动平均线","250天移动平均线",["保力加平均线","保力加下限线","保力加上限线"],adddigit(this.comparecode) + " 价格"],
					TASlot: {
						turnover:"",
						rsi:"",
						macd:["MACD","MACD-讯号","MACD-差异"],
					},
				},
				calllv : "收回价",	
				maturity : "到期日",
				strike : "行使价",
				gearing : "有效杠杆",
				egearing : "有效杠杆",
				x: "倍",
				call : "认购",
				put : "认沽",
				bull : "牛证",
				bear : "熊证",
			},
			en :{
				currency: "HKD",
				unit:{
					K:"K",
					M:"M",
					B:"B",
				},
				yTitle1 : "last",
				subTitle : {
					macd : "MACD",
					rsi : "RSI",
					turnover :  "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-200","SMA-250",["Moving average","Bollinger lower bound","Bollinger upper bound"],adddigit(this.comparecode) + " last"],
					TASlot: {
						turnover:"",
						rsi:"",
						macd:["MACD","MACD-signal","MACD-Diff"],
					},
				},
				calllv : "Call level",	
				maturity : "Maturity",
				strike : "Strike",
				gearing : "Gearing",
				egearing : "Eff.Gearing",
				x: "X",
				call : "Call",
				put : "Put",
				bull : "Bull",
				bear : "Bear",
			},
		};
		if (typeof currency == "string"){
			_out[lang].currency = currency;
		}
		return _out;
	},
}