Highcharts.setOptions({lang :{
	rangeSelectorZoom : "",
	noData : "沒有相關資料",
}});

var summarycbbcbandChart = {
	
	chart : null,
	type: 0,
	chartheight : {mobile: 257, desktop: 257},
	margin : {mobile: 50, desktop: 90},
	init : function(ucode, spread, sdate){
		var self = this;	
		if(sdate != ''){
			sdate = '/sdate/'+sdate.replace(/-/g,'_');
		}
		
		if(typeof spread == 'undefined'){
			spread = '100';
		}
		self.mode = (window.innerWidth<991)?"mobile":"desktop";
		var threeM = $('[data-controller="sumControls"] [name="3m"]').prop('checked')? '/check3m/1': '',
		sixM = $('[data-controller="sumControls"] [name="6m"]').prop('checked')? '/check6m/1': '',
		oneY = $('[data-controller="sumControls"] [name="1y"]').prop('checked')? '/check1y/1': '',
		threeY = $('[data-controller="sumControls"] [name="3y"]').prop('checked')? '/check3y/1': '';

		//console.log('/'+lang+'/ajax/cbbc-band-json-all/chartType/ratio/ucode/'+ucode+'/spread/'+spread+sdate + threeM + sixM + oneY + threeY);
		$.getJSON('/'+lang+'/ajax/cbbc-band-json-all/chartType/ratio/ucode/'+ucode+'/spread/'+spread+sdate + threeM + sixM + oneY + threeY, function(_data) {
			var data = self.decode(_data);		


			if (ucode=="hsi") {
				self.type=0;
			} else if (ucode=="hsce") {
				self.type=1;
			} else if (ucode=="hstech") {
				self.type=4;
			} else if (ucode=="2822"||ucode=="2823"||ucode=="3188") {
				self.type=2;
			} else {
				self.type=3;
			}
			
			$('#summarycbbcbandChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
				self.chart = chart;
				self.drawBackground();
			});
		});
	},
	decode : function(_data){
		return _data;
	},
	resizeChart : function(){
		this.chart.setSize($('#outstanding').width(),'400',true);
	},
	colors : {bar1 : "#c32121", bar2: "#0072ce", line1: "#c32121", line2: "#0072ce"}, 
	getJSON : function(data){
		var self = this;
		var categories = [];
		var sumBear = [];
		var sumBull = [];
		var ratioBear = [];
		var ratioBull = [];

		for (var i=0;i<5;i++) {
			categories.push(data.udates[i]);
		
			var r_bear = data.sumBear[i]*1/(data.sumBear[i]*1+data.sumBull[i]*1)*100;
			var r_bull = data.sumBull[i]*1/(data.sumBear[i]*1+data.sumBull[i]*1)*100;
			
			ratioBear.push(r_bear.toFixed(0)*1);
			ratioBull.push(r_bull.toFixed(0)*1);

			var s_bear = data['sumBear'][i]*1;
			var s_bull = data['sumBull'][i]*1;
			sumBear.push((s_bear.toFixed(0))*1);
			sumBull.push((s_bull.toFixed(0))*1);
			
		}
		categories.reverse();
		sumBear.reverse();
		sumBull.reverse();
		ratioBear.reverse();
		ratioBull.reverse();
		
		var chartWidth = $('#outstanding').width();

		return {
			chart : {
				type: 'column',
				marginLeft: 50	,				//self.margin[self.mode]
				marginRight: 60,				//self.margin[self.mode]
				spacingTop: 45,
				height: 400,
				width:chartWidth,
				reflow:false,
				events: {
					redraw: function(event) {
						self.drawBackground();
					}
				}
			},
			plotOptions: {
				series: {
					marker: {
						enabled: true,
						radius: 4,
						fillColor: null,
						lineWidth: 2,
		                lineColor: '#FFFFFF' // inherit from series
		            }
		        }
		    },	
		   tooltip: {
			  
		    	shape: 'square',
		    	//shared: false,
		    	//followPointer: true,
				useHTML: true,
				 
		    	crosshairs: [{
		    		width: 1,
		    		color: "#C0C0C0",
		    	}],
		    	formatter: function() {
				
					var index = this.points[0].point.index;
		    		var _html  = '<div class="tooltip"><b><span style="color:'+this.color+'"></span></b> ' + categories[index] + '';
		    		_html += '<br/><b><span style="color:#000">'+self.labels[lang].yTitle1Tooltip+':</span> ' + this.points[3].y+ '';
		    		_html += '<br/><b><span style="color:#000">'+self.labels[lang].yTitle2Tooltip+':</span> ' + this.points[2].y+ '';
		    		_html += '<br/><b><span style="color:#000">'+self.labels[lang].yTitle3Tooltip+':</span> ' + this.points[1].y + ':' + this.points[0].y + '';
					
					return _html;
					
		    	}
		    },
		    rangeSelector : {
		    	inputEnabled:false,
		    	enabled: false
		    },
		    xAxis:
		    {
		    	gridLineWidth: 0,
		    	lineWidth: 2,
		    	tickColor: '#000',
		    	lineColor: '#000',
		    	tickmarkPlacement: 'on',
		    	labels: {
		    		style: {color: "#000"},
		    		formatter: function () {
		    			return categories[this.value];
		    		}            
		    	},
		    	offset: -56,
		    	//top:0,
		    	categories: categories,
		    },
		    yAxis: [{
		    	title: {
		    		text: '', //this.labels[lang]['yTitle1'][self.type]								
		    		rotation: 0,		    	
		    		useHTML: true,
		    		style: {color: "#000"}
		    	},
		    	labels:{
		    		align:'right',
		    		x:-5,
		    		y:5,
		    		style: {color: "#000"}	,
		    		formatter: function () {
		    			return this.value;					
		    		}   
		    	},
				// max: 100,
				tickAmount : 11,
				// endOnTick: false,
				height: self.chartheight[self.mode],
				opposite: false,
				showLastLabel: true,
				showFristLabel: true,
				gridLineDashStyle: 'ShortDot',	
			},
			{
				title: {
					text:'',
					rotation: 0,		
					useHTML: true,
					style: {color: "#000"}
				},
				labels:{
					align:'left',
					x:5,
					y:5,
					style: {color: "#000"}	,
					formatter: function () {
						return this.value;					
					}   
				},    
				// top: 50+0.1,
				tickAmount : 11,
				height: self.chartheight[self.mode],
				showLastLabel: true, 
				opposite: true,
				showLastLabel: true,
				gridLineDashStyle: 'ShortDot',	
			}
			],
			navigator : {
				enabled : false,
			},
			scrollbar : {
				enabled : false
			},
			series : [
			{
				name : this.labels[lang].legend1,
				type: 'column',
				stacking: 'percent',
				data : ratioBear,
				color : this.colors["bar1"],
				pointWidth: 28, 
				yAxis: 0,
			},
			{
				name : this.labels[lang].legend2,
				type: 'column',
				stacking: 'percent',
				data : ratioBull,
				color : this.colors["bar2"],
				pointWidth: 28, 
				yAxis: 0,
			},
			{
				name : this.labels[lang].legend1,
				type: 'line',
				data : sumBull,
				color : this.colors["line2"],
				yAxis: 1,
			},
			{
				name : this.labels[lang].legend2,
				type: 'line',
				data : sumBear,
				color : this.colors["line1"],
				yAxis: 1,
			}
			],
			exporting: {
				enabled: false
			}

		};
	},
	drawBackground: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;

		$("#drawLegendText").remove();	
		$("#drawLegendRect2").remove();
		$("#drawLegendText2").remove();	
		$("#drawLegendRect3").remove();
		$("#drawLegendText3").remove();	
		
		offsetx = 60;
		offsety = 50;	
		
		offsetx = chart.plotLeft + chart.plotWidth;
		
		$("#title1a").remove();
		$("#title1b").remove();
		this.addText(20,offsety-40,this.labels[lang]['yTitle1'][self.type],'title1a');

		


		if(_type == 'hsi' || _type == 'hsce' || _type == 'hstech'){
			(lang=='en')?offsetx-=180:offsetx-=50;
			this.addText(offsetx ,offsety-40,this.labels[lang]['yTitle2'][0],'title1b');

		}else{
			(lang=='en')?offsetx-=180:offsetx-=160;
			this.addText(offsetx + 40, offsety - 40, this.labels[lang]['yTitle2'][1],'title1b');
		}
		//this.addText(offsetx,offsety-40,this.labels[lang].yTitle2,'title1b');
	
		chart.renderer.rect(80, offsety+310, 11, 11, 0).attr({
			fill: this.colors["bar1"],
			'stroke-width': 0,
			id :'drawLegendRect2',
		}).add();

		chart.renderer.text(this.labels[lang].legend1, 80+15, offsety+320).css({
			fontSize: '12px',
		}).attr({
			id :'drawLegendText2',
		}).add();

		chart.renderer.rect(200, offsety+310, 11, 11, 0).attr({
			fill: this.colors["bar2"],
			'stroke-width': 0,
			id :'drawLegendRect3',
		}).add();

		chart.renderer.text(this.labels[lang].legend2, 200+15, offsety+320).css({
			fontSize: '12px',
		}).attr({
			id :'drawLegendText3',
		}).add();
	},
	addText: function(x,y,text,id){
		var chart = this.chart;
		chart.renderer.label(text, x, y, '', '' + '', '' + '')
		.css({
			color: '#000000',
			fontSize:'15px'
		})
		.attr({           
			zIndex: 5,
			id: id
		})
		.add();
	},
	labels : {
		tc :{
			yTitle1 : ["<b>恒指牛熊證街貨比例(%)</b>",
			"<b>國指牛熊證街貨比例(%)</b>",
			"<b>A股牛熊證街貨比例(%)</b>",
			"<b>牛熊證街貨比例(%)</b>",
			"<b>科指牛熊證街貨比例(%)</b>"],
			yTitle2 : [
				"<b>相對期指張數</b>",
				"<b>相對股份數目(千股)</b>"
			],
			yTitle1Tooltip : "熊證總街貨",
			yTitle2Tooltip : "牛證總街貨",
			yTitle3Tooltip : "牛熊街貨比例",
			legend1 : "熊證",
			legend2 : "牛證",
		},
		sc :{
			yTitle1 : ["<b>恒指牛熊证街货比例(%)</b>",
			"<b>国指牛熊证街货比例(%)</b>",
			"<b>A股牛熊证街货比例(%)</b>",
			"<b>牛熊证街货比例(%)</b>",
			"<b>科指牛熊证街货比例(%)</b>"],
			yTitle2 : [
				"<b>相对期指张数</b>",
				"<b>相对股份数目(千股)</b>"
			],
			yTitle1Tooltip : "熊证总街货",
			yTitle2Tooltip : "牛证总街货",
			yTitle3Tooltip : "牛熊街货比例",
			legend1 : "熊证",
			legend2 : "牛证",
		},
		en :{
			yTitle1 : ["<b>HSI CBBCs Ratio(%)</b>",
			"<b>HSCE CBBCs Ratio(%)</b>",
			"<b>A-Share CBBCs Ratio(%)</b>",
			"<b>CBBCs Ratio(%)</b>",
			"<b>HSTECH CBBCs Ratio(%)(%)</b>"],
			yTitle2 : [
				"<b>Equivalent Futures Contracts</b>",
				"<b>Equivalent Shares (K)</b>"
			],
			yTitle1Tooltip : "Bear Outstanding",
			yTitle2Tooltip : "Bull Outstanding",
			yTitle3Tooltip : "CBBCs Ratio",
			legend1 : "Bear",
			legend2 : "Bull",
		},
	},
}