Highcharts.setOptions({lang :{
	rangeSelectorZoom : "",
	/*rangeSelectorFrom : "",
	rangeSelectorTo : "",*/
}});
$(termsChart).ajaxStart(function() {
	$(termsChart.loadingContainer).show();
});
$(termsChart).ajaxStop(function() {
	$(termsChart.loadingContainer).hide();
});
$(window).on('resize.termsChart', function(e) {
	//console.log('resize');
	termsChart.updateSeriesPosition();
});	
var termsChart = {
	chart : null,
	cur_chart : null,
	data : null,
	period: 0,
	usedSlot : ["","","","","",""],
	usedMASlot : ["","","","",""],
	//maColors : {10: "#F48B28", 20: "#FF68D3", 50: "#00DEBB", 100: "#9FA1F3",250:"#BC6BC6"},
	maColors : ["#F48B28","#FF68D3","#00DEBB","#9FA1F3","#BC6BC6"],
	maIndex : {10: 0, 20: 1, 50: 2, 100:3, 250:4},
	maIndex2 : [10,20,50,100,250],
	colors : {wntLine : "#4F8ABD",underlyingLine : "#000000"},
	navigatorUpdated : null,
	toolTipMoved : null, 
	selectedRange : [-1,-1],
	stockcode: "",
	ucode:'',
	comparecode : "",
	backgroundColor: "",
	selected_ts:0,
	loadingContainer:null,
	lastTooltipPoint:null,
	charttype: "candlestick",
	isMobile: ($('div .header.scroll_down').is(':visible'))?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;	
		self.navigatorUpdated = (navUpdated!==undefined)?navUpdated:null;
		self.toolTipMoved = (ttMoved!==undefined)?ttMoved:null; 
		$('#termsChartContainer .highcharts-html-container .highcharts-loading').show();
		$.getJSON('/'+lang+'/data/chart/termsChart/code/'+code+'/period/'+self.period, function(_data) {
			self.data = self.decode(_data);
			self.isFx = _data.isFx;
			var htmlContainer = null;
			if ($('#termsChartContainer .highcharts-html-container').length>0){
				htmlContainer = $('#termsChartContainer .highcharts-html-container');
			}
			$("#stime_chart").html(self.labels()[lang].stime+_data.stime);
			$('#termsChartContainer').highcharts('StockChart',self.getJSON(self.data), function (chart){
				if ($(chart.renderTo).attr("id")){
					if (!$('#termsChartContainer').hasClass("noSetting")){
						if (htmlContainer){
							$('#termsChartContainer').append(htmlContainer);
						}else{
							$('#termsChartContainer').append("<div class='highcharts-html-container' style='position: absolute; top: 0px;'></div>");
							$('#termsChartContainer .highcharts-html-container').append("<div class='highcharts-loading' style='width:"+$('#termsChartContainer').width()+"px;height:"+$('#termsChartContainer').height()+"px'></div>");
							self.loadingContainer = $('#termsChartContainer .highcharts-html-container .highcharts-loading');
						}
					}
					self.chart = chart;
					self.cur_chart = chart;
					self.stockcode = code;
					self.drawBackground();
					//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]);
					if(self.data.last.length>0){
						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]);
					}
					
					self.changeChartType(self.charttype);
	
					if (callback){
						callback();
					}
					
				}else{
					chart.reflow();
				}
				$('#termsChartContainer .highcharts-html-container .highcharts-loading').hide();
			});
		});
	},
	decode : function(_data){
		this.ucode = _data.mainData.ucode;
		var udata = _data.mainData.underlying;
        var uohlc = [], uvolume = [], uturnover = [],ulast = [];
        for (i = 0; i < udata.length; i++) {
			uohlc.push({
				x: udata[i].ts,
				y: udata[i].last,
				high: udata[i].high,
				low: udata[i].low,
				open: udata[i].open,
				close: udata[i].last,
			});
			ulast.push([
                udata[i].ts, // the date
                udata[i].last // close
            ]);            
            uvolume.push([
                udata[i].ts, // the date
                udata[i].vol // the volume
            ]);
           uturnover.push([
                udata[i].ts, // the date
                udata[i].turnover // the turnover
            ]);			
        }   
		var data = _data.mainData.warrant;
        var ohlc = [], volume = [], turnover = [],last = [], os=[];
        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
            ]);			
			 os.push([
                data[i].ts, // the date
                data[i].os // the turnover
            ]);		
        }
		return {vol:volume, turnover: turnover, last:last, os:os, uohlc : uohlc, uvol:uvolume, uturnover: uturnover, ulast:ulast};
	},
	options : {
        groupingUnits : [['day',[1]],], 
		chartHeight : 270,
		chartTop : 23,
		subChartTitle : 23,
	},
	getJSON : function(data){
		
		var self = this;

		return {
			chart : {
				animation: false,
				renderTo: 'termsChartContainer',
				backgroundColor : (self.toolTipMoved !=null)?"rgba(255, 255, 255, 0.0)":"#FFFFFF",
				marginLeft: 50,
				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);
							}
						}
					}
				}
			},
			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 (termsChart.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 = '';
					for(var j = 0; j<this.points.length;j++){
						if (this.points[j].series.name == "primary"){			
							if (this.points[j].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[j].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[j].point.high+"</span></div>";
								html +=  '<div class="val2"><span class="name">'+self.labels()[lang].toolTip.underlyinglow+'</span><span class="value">'+this.points[j].point.low+"</span></div>";
								html +=  '<div class="val2"><span class="name">'+self.labels()[lang].toolTip.underlyingopen+'</span><span class="value">'+this.points[j].point.open+"</span></div>";
								html +=  '<div class="val2"><span class="name">'+self.labels()[lang].toolTip.underlyinglast+'</span><span class="value">'+this.points[j].point.close+"</span></div>";
							}
						}else if (this.points[j].series.name == "w_primary"){
							html +=  '<div class="val2"><span class="name">'+self.labels()[lang].toolTip.wlast+'</span><span class="value">'+this.points[j].y+"</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>";	
								//compare
								}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
				},
				tickPixelInterval:200,
				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){
									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){
									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,				
				},
				gridLineWidth: (self.toolTipMoved !=null)?0:1,
				tickAmount : 7,
				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:"right",
					x: -3,
					y: 4,		
				},
				opposite: false,
				showFirstLabel: false,	
				showLastLabel: true,
				tickAmount : 7,
				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 : true,
				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.uohlc,
                yAxis: 0,
                dataGrouping: {
                    units: self.options.groupingUnits,
					groupPixelWidth: 1000
                }
			},{
				name: 'w_primary',
				//type: 'candlestick',
				id: 'w_primary',
				data : data.last,
                yAxis: 1,
                color: this.colors['wntLine'],
                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.length>0){
			this.chart.xAxis[0].setExtremes(Math.max(_from,this.data.last[0][0]), _to);
		}
	},
	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 = $('#termsChartContainer').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 if (segment[1] == "os"){
								_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, termsChart.chart.margin[3], _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 - termsChart.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: '#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, termsChart.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)?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 += ")";
						}
						
					}
				}
		
				if(j==0){
					chart.renderer.text(this.labels()[lang].subTitle[chartType]+days, termsChart.chart.margin[3], _top+16).css(fontstyle).attr(textattr).add();
				}else{
					chart.renderer.text(this.labels()[lang].subTitle2[chartType]+days, termsChart.chart.margin[3], _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.ucode.toUpperCase() == "NDX" || self.ucode.toUpperCase() == "SPX" || self.ucode.toUpperCase() == "DJI" || self.ucode.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 =  this.colors['underlyingLine'];
			}
			this.chart.series[1].update({
				type: type,
				lineWidth: _width,
				color: _color,
			});
		}
	},
	changePeriodType: function (type,callback){
		var self = this;
		if (type.endsWith("min")){
			$(".range").hide();
			if (self.ucode.toUpperCase() == "NDX" || self.ucode.toUpperCase() == "SPX" || self.ucode.toUpperCase() == "DJI" || self.ucode.toUpperCase() == "RTY" || self.isFx==1){
				$(".chart_type").hide();
				self.charttype = "line";
			}
			
			this.period = type.replace("min","")*1;
			this.options.groupingUnits = [["minute",[this.period]],];
			this.init(this.stockcode,function(){
				if(self.data.last.length>0){
					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;
		}
		$.getJSON('/'+lang+'/data/chart/termsChart/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/termsChart/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" || type == "os")){
			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/termsChart/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();
				$("#termsChartContainer").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;
				if(id==0){
					series[0].data = this.data['u'+type];
				}else{
					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();
			$("#termsChartContainer").height(self.getChartHeight());
			$(self.loadingContainer).height(self.getChartHeight());
			chart.reflow();
		}
	},
	addSettingBox: function(type){
		/*var container = $('#termsChartContainer .highcharts-html-container');
		if (container.find("."+type+"_box").length>0){
			return;
		}
		var chartWidth = $('#termsChartContainer').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 = ($('div .header.scroll_down').is(':visible'))?false:true;
		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.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 = $('#termsChartContainer .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);
			$("#termsChartContainer").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];
			//var _name = (i==0)?"sub1":"sub2";
			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;
		for(var i = 0; i < this.usedSlot.length; i++) {    
			if (this.usedSlot[i] != ""){
				height += offset+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.ucode + ((this.ucode*1>0)?".HK":"") + " 成交額",
				},
				subTitle2 : {			
					turnover : this.stockcode + ((this.stockcode*1>0)?".HK":"") + " 成交額",
					os : this.stockcode + ((this.stockcode*1>0)?".HK":"") + " 街貨量",
				},
				toolTip : {
					open:"O:",
					high:"H:",
					low:"L:",
					last:"C:",
					volume:"成交量:",
					underlyinghigh:  this.ucode + " 最高價",
					underlyinglow:  this.ucode + " 最低價",
					underlyingopen:  this.ucode + " 開市價",
					underlyinglast:  this.ucode + " 價格",
					wlast:  this.stockcode + " 價格",
					MASlot: ["10天移動平均線","20天移動平均線","50天移動平均線","100天移動平均線","250天移動平均線",["保歷加平均線","保歷加下限線","保歷加上限線"],adddigit(this.comparecode) + " 價格"],
					TASlot: {
						os : "街貨量",
						turnover:"成交額",
						rsi:"RSI",
						macd:["MACD-棒形圖","MACD","MACD-訊號"],
					},
				},
				calllv : "收回價",	
				maturity : "到期日",
				strike : "行使價",
				gearing : "有效槓桿",
				egearing : "有效槓桿",
				x: "倍",
				call : "認購",
				put : "認沽",
				bull : "牛證",
				bear : "熊證",
				stime: "最後更新時間: "
			},
			zh_cn :{
				unit:{
					K:"千",
					M:"百万",
					B:"十亿",
				},
				yTitle1 : this.stockcode + ((this.stockcode*1>0)?".HK":"")+"价格",
				subTitle : {
					macd : "移动平均汇聚背驰指标",
					rsi : "相对强弱指数",
					turnover : this.ucode + ((this.ucode*1>0)?".HK":"") + " 成交额",
				},
				subTitle2 : {			
					turnover : this.stockcode + ((this.stockcode*1>0)?".HK":"") + " 成交额",
					os : this.stockcode + ((this.stockcode*1>0)?".HK":"") + " 街货量",
				},
				toolTip : {
					open:"O:",
					high:"H:",
					low:"L:",
					last:"C:",
					volume:"成交量:",
					underlyinghigh:  this.ucode + " 最高价",
					underlyinglow:  this.ucode + " 最低价",
					underlyingopen:  this.ucode + " 开市价",
					underlyinglast:  this.ucode + " 价格",
					wlast:  this.stockcode + " 价格",
					MASlot: ["10天移动平均线","20天移动平均线","50天移动平均线","100天移动平均线","250天移动平均线",["保历加平均线","保历加下限线","保历加上限线"],adddigit(this.comparecode) + " 价格"],
					TASlot: {
						os : "街货量",
						turnover:"成交额",
						rsi:"RSI",
						macd:["MACD-棒形图","MACD","MACD-讯号"],
					},
				},
				calllv : "收回价",	
				maturity : "到期日",
				strike : "行使价",
				gearing : "有效杠杆",
				egearing : "有效杠杆",
				x: "倍",
				call : "认购",
				put : "认沽",
				bull : "牛证",
				bear : "熊证",
				stime: "最后更新时间: "
			},
			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.ucode + ((this.ucode*1>0)?".HK":"")+ " Turnover",
				},
				subTitle2 : {			
					turnover : this.stockcode + ((this.stockcode*1>0)?".HK":"") + " Turnover",
					os : this.stockcode + ((this.stockcode*1>0)?".HK":"") + " Outstanding",
				},
				toolTip : {
					open:"O:",
					high:"H:",
					low:"L:",
					last:"C:",
					volume:"Volume:",
					underlyinghigh:  this.ucode + " high",
					underlyinglow:  this.ucode + " low",
					underlyingopen:  this.ucode + " open",
					underlyinglast:  this.ucode + " last",
					wlast:  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: {
						os : "Outstanding",
						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",
				stime: "Last update: "
			},
		};
		_out["edu"] = _out["zh_cn"];
		return _out;
	},
}