var highlightCBBCMap = {
	chart : null,
	container : "",
	furtherData : null,
	view : "",
	topIndex : 1,
	init : function(wtype, callback){
		var container = this.container;
		var self = this;
		this.view = $("body").attr("data-broswer-view");
		if (this.view == "mobile" && screen && screen.orientation && screen.orientation.angle){
			if (screen.orientation.angle == 90 || screen.orientation.angle == 270){
				this.view = "pad";
			}
		}
		$.getJSON('/'+lang+'/data/chart/highlightCBBCMap?wtype='+wtype+"&view="+this.view, function(_data) {
			self.furtherData = _data.furtherData;
			var data = self.decode(_data);
			if (data.length == 0){
				$((container=='')?'#highlightCBBCMapContainer':'#'+container).html("");
				if (callback!==undefined){
					callback(_data);
				}	
			}else{
				$((container=='')?'#highlightCBBCMapContainer':'#'+container).highcharts(self.getJSON(data), function(chart){
					self.chart = chart;
					self.redraw();
					if (callback!==undefined){
						callback(_data);
					}	
				});
			}
		});
	},
	decode : function(_data){
		var self = this;
		var mainData = _data.mainData;
		var data = [];
		var min_x = 999999;
		var max_x = 0;
		var min_y = 999999;
		var max_y = 0;
		var _box_min = 999999;
		var _box_max = 0;
		//ulast = mainData[0].ulast;
		for (var i =0; i<mainData.length; i++){
			//var risk = ((mainData[i].calllv-ulast)/ulast)*100;
			//this.furtherData.ulast = mainData[i].ulast*1;
			if (mainData[i].gearing <= 1){
				continue;
			}
			var _obj = {
				x: mainData[i].calllv,
				y: mainData[i].gearing, 
				data: mainData[i]
			};
			min_x = Math.min(mainData[i].calllv,min_x);
			max_x = Math.max(mainData[i].calllv,max_x);
			min_y = Math.min(mainData[i].gearing,min_y);
			max_y = Math.max(mainData[i].gearing,max_y);
			_box_max = Math.max(mainData[i].calllv,_box_max);
			_box_min = Math.min(mainData[i].calllv,_box_min);
			data.push(_obj);
		}
		min_x = Math.min(this.furtherData.highest_to,min_x);
		min_x = Math.min(this.furtherData.highest_from,min_x);
		min_x = Math.min(this.furtherData.ulast,min_x);
		max_x = Math.max(this.furtherData.highest_to,max_x);			
		max_x = Math.max(this.furtherData.highest_from,max_x);
		max_x = Math.max(this.furtherData.ulast,max_x);		
		if (mainData.length == 0){
			return [];
		}
		this.furtherData.wtype = mainData[0].wtype;
		
		
		this.furtherData.interval_x = (this.view == "mobile")?300:100;
		
		var spread_x = (max_x- min_x)/8;
		
		if (spread_x<100){
			this.furtherData.interval_x = (this.view == "mobile")?300:100;
		}else if (spread_x<200){
			this.furtherData.interval_x = (this.view == "mobile")?500:200;
		}else{
			this.furtherData.interval_x = (this.view == "mobile")?1000:500;
		}
		
		var spread_y = (max_y- min_y)/8;
		if (spread_y<2){
			this.furtherData.interval_y = 2;
		}else if (spread_y<5){
			this.furtherData.interval_y = 5;
		}else if (spread_y<10){
			this.furtherData.interval_y = 10;
		}else if (spread_y<20){
			this.furtherData.interval_y = 20;
		}else {
			this.furtherData.interval_y = 30;
		}

		if (mainData[0].wtype=="BEAR"){
			min_x -= (max_x - min_x)*0.1;
		}else{
			max_x += (max_x - min_x)*0.1;
		}
		
		var _boxHeight = ((this.view == "desktop")?78:31)*1.1;
		var _boxWidth = ((this.view == "desktop")?230:((this.view == "mobile")?78:170))*1.1;		
		
		var _halfBox = (((Math.ceil(max_y/this.furtherData.interval_y)*this.furtherData.interval_y)-(Math.floor(min_y/this.furtherData.interval_y)*this.furtherData.interval_y))*((_boxHeight)/2))/(this.options.chartHeight-this.options.marginTop-this.options.marginBottom);
		min_y = Math.min(min_y-_halfBox,min_y);		
		max_y = Math.max(max_y+_halfBox,max_y);	
		this.furtherData.min_y = min_y;
		this.furtherData.max_y = max_y;
		
		var _chartwidth = $((self.container=='')?'#highlightCBBCMapContainer':'#'+self.container).width();
		_halfBox = (((Math.ceil(max_x/this.furtherData.interval_x)*this.furtherData.interval_x)-(Math.floor(min_x/this.furtherData.interval_x)*this.furtherData.interval_x))*((_boxWidth)/2))/(_chartwidth-this.options.marginLeft-this.options.marginRight);

		min_x = Math.min(_box_min-_halfBox,min_x);		
		max_x = Math.max(_box_max+_halfBox,max_x);	
		if (this.view == "mobile"){
			var divided = Math.ceil(min_x/this.furtherData.interval_x);
			max_x = Math.max(this.furtherData.interval_x*(divided+2),max_x);	
		}
		this.furtherData.min_x = min_x;
		this.furtherData.max_x = max_x;	
		//console.log(mainData[0].wtype+":"+_halfBox+","+this.furtherData.min_y+","+this.furtherData.max_y);
		return data;
	},
	options : {
		chartHeight : 400,
		marginBottom : 30,
		marginTop : 40,
		marginLeft : 65,
		marginRight : 30,
	},
	getJSON : function(data){

		var self = this;
		var series = [];
		var labelx = -8;
		if (self.view == "pad"){
			this.options.marginTop = 20;
			this.options.marginLeft = 65;
		}else if (self.view == "mobile"){
			labelx = -5;
			this.options.marginTop = 18;
			this.options.marginLeft = 55;
		}else{
			this.options.marginTop = 50;
			this.options.marginLeft = 65;
		}
		for(var i=0; i<data.length;i++){
			var _data = data[i].data;
			series.push(
			{
				name: _data.code,
				type: "scatter",
				marker: {
					symbol: 'url('+_data.label+')',
				},
				data: [data[i]],
			});
		}
		return {
			chart:{
				marginTop: this.options.marginTop,
				marginRight: this.options.marginRight,
				marginLeft: this.options.marginLeft,
				marginBottom: this.options.marginBottom,
				height: this.options.chartHeight,
				events: {
					redraw: function(event) {
						self.redraw();
					}
				},
			},
			title: {
				text: null
			},
			xAxis: [{
				title: {
					text: null,
				},
				gridLineDashStyle: "dash",
				gridLineWidth:1,
				tickWidth: 0,
				labels:{
					formatter: function () {
						return formatStrike(this.value);					
					},
					style:{"color": "#000", "fontSize": "13px"},
					x:labelx,
					autoRotation: false,
				},
				crosshair:{
					width:2,
					color:"#575757",
					label:{
						backgroundColor: "#575757",
						enabled: true,
						style:{"color": "#fff", "fontSize": (self.view == "mobile")?"12px":"13px"},
						shape: "rect",
						borderRadius: 0,
						formatter: function(val){
							return addcomma(val);
						}
					}
				},
				showLastLabel: false,
				max:self.furtherData.max_x,
				min:self.furtherData.min_x,
				tickInterval:self.furtherData.interval_x,
			}],
			yAxis: [
			{
				title: {
					/*text: self.labels[lang].yTitle,
					x:labelx,*/
					text: null,
				},
				labels:{
					style:{"color": "#000", "fontSize": "13px"},
				},
				crosshair:{
					width:2,
					color:"#575757",
					label:{
						backgroundColor: "#575757",
						enabled: true,
						style:{"color": "#fff", "fontSize": (self.view == "mobile")?"12px":"13px"},
						shape: "rect",
						borderRadius: 0,
						formatter: function(val){
							$(".highcharts-yaxis-labels .highcharts-crosshair-label rect").attr("transform","translate(20,0)");
							$(".highcharts-yaxis-labels .highcharts-crosshair-label text").attr("transform","translate(20,0)");
							return (val.toFixed(2));
						}
					}
				},
				showFirstLabel: false,
				showLastLabel: (self.view == "desktop")?true:false,
				max:self.furtherData.max_y,
				min:self.furtherData.min_y,
				tickInterval:self.furtherData.interval_y,
			}],
			plotOptions: {
				scatter: {
					events: {
						click : function (e){
							window.location.href = genURL(e.point.data.code);
						},
						mouseOver: function (e){
							if (self.topIndex-1 != e.target.chart.series[e.target.index].userOptions.zIndex){
								e.target.chart.series[e.target.index].update({zIndex:self.topIndex++});
							}
						},
					},
					cursor : "pointer",
					states:{
						inactive:{
							opacity:1,
						}
					}
				},
			},
			legend: {
				enabled: false
			},
			series: series,
			exporting : {
				enabled: false
			},
			tooltip: {
				useHTML: true,
				positioner: function(labelWidth, labelHeight, point){
					if (this.label.text.textStr.indexOf("tooltip_hidden")>0){ 
						return { x: -1000, y: -1000};
					}else if (this.label.text.textStr.indexOf("tooltip_height78")>0){
						return { x: point.plotX, y: point.plotY - 48};
					}else{
						return { x: point.plotX, y: point.plotY - 60};
					}
				},
				formatter: function(a){
					//this.series.userOptions.zIndex = topIndex++;
					/*if (self.topIndex-1 != this.series.userOptions.zIndex){
						try {
							this.series.update({zIndex:self.topIndex++});
							return "";
						}catch (e) {}
						//return;
					}*/
					//console.log(this.series);
					//this.series.data[0].graphic.toFront();
					//var imgheight = this.point.graphic.imgheight;
					var label = "";
					var imgheight = this.point.graphic.imgheight;
					if (self.furtherData.wtype == "BEAR"){
						if (this.x - self.furtherData.highest_from >0){
							return self.labels[lang].call2future+": <span class='tooltip_blue tooltip_height"+imgheight+"'>"+(this.x - self.furtherData.highest_from).toFixed(2)+self.labels[lang].unit+"<span>";
						}else{
							return "<span class='tooltip_hidden'></span>";
						}
					}else{
						if (self.furtherData.highest_to - this.x>0){
							return self.labels[lang].call2future+": <span class='tooltip_blue tooltip_height"+imgheight+"'>"+(self.furtherData.highest_to - this.x).toFixed(2)+self.labels[lang].unit+"<span>";
						}else{
							return "<span class='tooltip_hidden'></span>";
						}
					}
				}
			},
		};
	},
	setPeriod : function(_from,_to){		
		this.chart.xAxis[0].setExtremes(_from, _to);
	},
	redraw: function(){
		var chart = this.chart;
		var self = this;
		var px_last = chart.xAxis[0].toPixels(self.furtherData.ulast);
		//$("#chartBackground").remove();	
		$((self.container=='')?'#highlightCBBCMapContainer':'#'+self.container).find(".chartLegend").remove();
		$((self.container=='')?'#highlightCBBCMapContainer':'#'+self.container).find(".chartBackgroundLine").remove();
		chart.xAxis[0].removePlotBandOrLine("highfuture");
		
		var textcss = {
			"color": '#000',
			"fontSize": "15px",
			"fontWeight": "bold",
		};
		var textcss2 = {
			"color": '#000',
			"fontSize": "13px",
			"fontWeight": "bold",
		};
		
		//_htmllabel1 = "";
		_htmllabel2 = "";
		_htmllabel1 = "<div class='newlistchart_last'>"+self.labels[lang].pclose+": "+addcomma(self.furtherData.ulast)+"</div>";
		
		if (self.view == "desktop"){
			_htmllabel2 = "<div class='newlistchart_range'><a href='/"+lang+"/cbbc/outstanding-chart'>"+self.furtherData.highest_sdate+" "+self.labels[lang].highfuture+"<br/>"+self.furtherData.highest_from+"-"+self.furtherData.highest_to+"<br/><div class='newlistchart_detailbutton'></div></a></div>";
		}
		
		chart.renderer.path(['M', px_last, 20,'L', px_last, chart.margin[0]+ chart.plotHeight]).attr({
            stroke: '#A8A8A8',
			'stroke-width': 2,
			opacity: 1,
			class :'chartBackgroundLine',
			dashstyle:"Dash",
			zIndex: 2,
        }).add();
		
		chart.renderer.text(_htmllabel1,px_last-50,12,true).css(textcss).attr({
			class :'chartLegend',
			zIndex: 2,
		}).add();		
		
		if (self.view == "mobile"){
			chart.renderer.text(self.labels[lang].yTitle, chart.margin[3]-55, 15).css(textcss2).attr({
				class :'chartLegend',
				zIndex: 2,
			}).add();
		}else{
			chart.renderer.text(self.labels[lang].yTitle, chart.margin[3]-65, 15).css(textcss).attr({
				class :'chartLegend',
				zIndex: 2,
			}).add();
		}
		if (this.furtherData.wtype == "BEAR"){
			chart.xAxis[0].addPlotLine({
				label: {
					text: _htmllabel2,
					style: { "color": "#0072ce", "fontSize": "14px"},
					x: -45,
					y: -24,
					useHTML:true,
					rotation: false,
				},
				value: self.furtherData.highest_from,
				width: 2,
				color: "#0072ce",
				id: 'highfuture',
				zIndex: 2,
			});
		}else{
			chart.xAxis[0].addPlotLine({
				label: {
					text: _htmllabel2,
					style: { "color": "#0072ce", "fontSize": "14px"},
					x: -45,
					y: -24,
					useHTML:true,
					rotation: false,
				},
				value: self.furtherData.highest_to,
				width: 2,
				color: "#0072ce",
				id: 'highfuture',
				zIndex: 2,
			});
		}
		

		chart.renderer.text(self.labels[lang].xTitle, chart.plotWidth+chart.margin[1]+chart.margin[3]-65, chart.margin[0]+chart.plotHeight+20).css(textcss).attr({
			class :'chartLegend',
			zIndex: 2,
		}).add();	
		chart.renderer.path(['M', chart.margin[3], 0 ,'L', chart.margin[3], chart.margin[0]+chart.plotHeight]).attr({
            stroke: '#000',
			'stroke-width': 1,
			opacity: 1,
			class :'chartBackgroundLine',
			zIndex: 2,
        }).add();	
		chart.renderer.path(['M', chart.margin[3], chart.margin[0]+ chart.plotHeight,'L', chart.plotWidth+chart.margin[1]+chart.margin[3], chart.margin[0]+ chart.plotHeight]).attr({
            stroke: '#000',
			'stroke-width': 1,
			opacity: 1,
			class :'chartBackgroundLine',
			zIndex: 2,
        }).add();

		if (this.furtherData.wtype == "BEAR"){
			var px_diff = chart.xAxis[0].toPixels(self.furtherData.ulast + self.furtherData.hsi_diff);
			var px_gap = chart.xAxis[0].toPixels(self.furtherData.ulast + self.furtherData.hsi_gap);	
			var labeloffset = chart.renderer.text("00000.00", 0, -100).css(textcss).attr({class :'chartLegend'}).add().element.getBoundingClientRect().width;
		}else{
			var px_diff = chart.xAxis[0].toPixels(self.furtherData.ulast - self.furtherData.hsi_diff);
			var px_gap = chart.xAxis[0].toPixels(self.furtherData.ulast - self.furtherData.hsi_gap);
			var labeloffset = 0;
		}
		chart.renderer.path(['M', px_last, chart.margin[0]+ chart.plotHeight - 48,'L', px_gap, chart.margin[0]+ chart.plotHeight - 48]).attr({
            stroke: '#0072ce',
			'stroke-width': 2,
			opacity: 1,
			class :'chartBackgroundLine',
			zIndex: 999,
        }).add();
		
		chart.renderer.path(['M', px_last, chart.margin[0]+ chart.plotHeight - 15,'L', px_diff, chart.margin[0]+ chart.plotHeight - 15]).attr({
            stroke: '#A8A8A8',
			'stroke-width': 2,
			opacity: 1,
			class :'chartBackgroundLine',
			zIndex: 999,
        }).add();	
		
		chart.renderer.path(['M', px_gap, chart.margin[0]+ chart.plotHeight,'L', px_gap, chart.margin[0]+ chart.plotHeight+5]).attr({
            stroke: '#0072ce',
			'stroke-width': 1,
			opacity: 1,
			class :'chartBackgroundLine',
			zIndex: 999,
        }).add();
		chart.renderer.path(['M', px_diff, chart.margin[0]+ chart.plotHeight,'L', px_diff, chart.margin[0]+ chart.plotHeight+5]).attr({
            stroke: '#A8A8A8',
			'stroke-width': 1,
			opacity: 1,
			class :'chartBackgroundLine',
			zIndex: 999,
        }).add();
		
		chart.renderer.text("<div class='chartlinelabel "+self.furtherData.wtype.toLowerCase()+"'>"+(self.furtherData.ulast - self.furtherData.hsi_gap*((this.furtherData.wtype == "BEAR")?-1:1)).toFixed(2)+"</div>",px_gap - labeloffset,chart.margin[0]+ chart.plotHeight - 48,true).css(textcss).attr({
			class :'chartLegend',
			zIndex: 2,
		}).add();	
		chart.renderer.text("<div class='chartlinelabel gray "+self.furtherData.wtype.toLowerCase()+"'>"+(self.furtherData.ulast - self.furtherData.hsi_diff*((this.furtherData.wtype == "BEAR")?-1:1)).toFixed(2)+"</div>",px_diff - labeloffset,chart.margin[0]+ chart.plotHeight - 15,true).css(textcss).attr({
			class :'chartLegend',
			zIndex: 2,
		}).add();
		/*hsi_diff
		hsi_gap*/
		
	},
	labels : {
		tc :{
			xTitle : "收回價",
			yTitle : "槓桿比率",
			pclose : "現價",
			highfuture: "重貨區", 
			call2future: "距重貨區", 
			unit: "點",
		},
		sc :{
			xTitle : "收回价",
			yTitle : "杠杆比率",
			pclose : "現价",
			highfuture: "重货区", 
			call2future: "距重货区", 
			unit: "点",
		},
		en :{
			xTitle : "Call level",
			yTitle : "Gearing",
			pclose : "Last",
			highfuture: "Highest OS",
			call2future: "Call level to highest future", 
			unit: "",
		},
	},
}