var historyCbbcRatioChart = {
	
	chart : null,
	type: 0,
	chartheight : {mobile: 257, desktop: 257},
	margin : {mobile: 50, desktop: 90},
	init : function(inputObj){
        var self = this,
        ucode = inputObj.ucode,
        period = inputObj.period;	

        self.mode = (window.innerWidth<991)?"mobile":"desktop";
      
        var seriesStr = "";
		$.each(inputObj.series, function (i, val) { 
			 seriesStr += "/"+val+"/1";
		});


		$.getJSON('/'+lang+'/data/chart/historyCbbcRatioChart/ucode/'+ucode+'/period/'+period+seriesStr , function(_data) {
		
			var chartData = self.decode(_data);
			
			self.uname = chartData.uname;

			
			$('[data-renderer="chart-historyRatio"]').highcharts('Chart',self.getJSON(chartData), function (chart){
				self.chart = chart;
				self.drawBackground();

				$(window).resize(function(){
					self.resizeChart();
				});
			});
			
		
          
		});
	},
	redraw : function(inputObj){
		var self = this,
        ucode = inputObj.ucode,
        period = inputObj.period;	

        self.mode = (window.innerWidth<991)?"mobile":"desktop";
      
        var seriesStr = "";
		$.each(inputObj.series, function (i, val) { 
			 seriesStr += "/"+val+"/1";
		});


		$.getJSON('/'+lang+'/data/chart/historyCbbcRatioChart/ucode/'+ucode+'/period/'+period+seriesStr , function(_data) {
		
			var chartData = self.decode(_data);
			
			self.uname = chartData.uname;

			if(self.chart !== null){
				self.chart.update(self.getJSON(chartData));
			}
				//self.chart = chart;
				//self.drawBackground();

				/*
				$(window).resize(function(){
					self.resizeChart();
				});*/
		
			
		
          
		});

	
	},
	decode : function(_data){
		var categories = [],
		bullData = [],
		bearData = [],
		ulastData = [];

		$.each(_data.main, function (key, row) { 
			var date = new Date(row.udate),
			timestammp = date.getTime();

			categories.push(timestammp);
			bullData.push([timestammp, row.bull === null? null: row.bull*1] );
			bearData.push([timestammp, row.bear === null? null: row.bear*1]);
			ulastData.push([timestammp, row.hsi === null? null: row.ulast*1]);
		});

		return {
			categories: categories,
			bullData : bullData,
			bearData: bearData,
			ulastData: ulastData,
			ucode: _data.ucode,
			uname: _data.uname
		};
	},
	resizeChart : function(){
		this.chart.setSize($('#outstanding').width(),'400',true);
	},
	colors : {underlying : "black", bear : "#c32121", bull: "#0072ce"}, 
	getJSON : function(data){
		var self = this,
		categories = data.categories,
		bearData = data.bearData,
		bullData = data.bullData,
		ulastData = data.ulastData,
		chartWidth = $('#outstanding').width();
		return {
			chart : {
				
				type: 'line',
				marginLeft: 60,				//self.margin[self.mode]
				marginRight: 70,				//self.margin[self.mode]
				spacingTop: 45,
				height: 400,
				width:chartWidth,
				reflow:false,
				events: {
					redraw: function(event) {
						//self.drawBackground();
					}
				}
			},
			title:{text: undefined},
			legend:{enabled: false},
			plotOptions: {	
				series: {
					animation: {
						duration: 1000
					},
					marker: {
						enabled: false,
						symbol: "circle",
						radius: 4,
						fillColor: null,
						lineWidth: 2,
		                lineColor: '#FFFFFF' // inherit from series
					},
		        }
		    },	
		   tooltip: {

		    	shape: 'square',
		    	//shared: false,
		    	followPointer: false,
				useHTML: true,
				shared: true,
		    	crosshairs: [{
		    		width: 1,
		    		color: "#C0C0C0",
				}],
				
		    	formatter: function() {
					
					var index = this.points[0].point.index;
		    		var _html  = '<div class="tooltip"><b><span style="color:#000">'+data.uname + (lang == "en"? " ":"")+self.labels[lang].title +'</span></b>';
					_html += '<br/><b><span style="color:'+this.color+'"></span></b> ' + Highcharts.dateFormat("%Y-%m-%d", categories[index]) ;


					$.each(this.points, function (i, pts) { 
						//_html += '<br/><b><span style="color:#000">'+data.uname+(lang == "en"? " ": "")+self.labels[lang]['yTitle'+(i+1)+'Tooltip']+':</span> ' + addcomma(pts.y.toFixed(0));

						_html += '<br/><b><span style="color:#000">'+self.labels[lang]['yTitle'+(i+1)+'Tooltip']+':</span> ' + addcomma(pts.y.toFixed(0)) + (pts.series.name == "underlying"? "": "%" );
						
						console.log(pts.series.name);
					});

					_html += '</div>';
					
				
					return _html;
					
		    	}
			},
			/*
		    rangeSelector : {
		    	inputEnabled:false,
		    	enabled: false
		    },*/
		    xAxis:
		    {
		    	gridLineWidth: 0,
		    	lineWidth: 2,
		    	tickColor: '#000',
		    	lineColor: '#000',
				tickmarkPlacement: 'on',
				
				//tickLength: 0,
		    	labels: {
					style: {color: "#000"},
					//step: Math.round(categories.length/ 6),
		    		formatter: function () {
						return Highcharts.dateFormat("%Y-%m-%d", this.value);
		    		}            
				},
				tickPositioner: function(){
					var posArr = [];
					var intNum = 7;
					var interval = Math.ceil(categories.length/intNum);
					//posArr.push(categories[0]);
					
					for(var i = Math.floor(categories.length*0.05); i < categories.length - 1; i+=interval){
						posArr.push(categories[i]);
					}

					//posArr.push(categories[categories.length - 1]);
					return posArr;
				},
		    	
		    	top:-11,
		    	categories: categories,
		    },
		    yAxis: [{
		    	title: {
		    		text: '', 							
		    		rotation: 0,		    	
		    		useHTML: true,
		    		style: {color: "#000"}
		    	},
		    	labels:{
		    		align:'right',
		    		x:-5,
		    		y:5,
		    		style: {color: "#000"}	,
		    		formatter: function () {
		    			return addcomma(this.value.toFixed(0));					
		    		}   
		    	},
				// max: 100,
				tickAmount : 6,
				// endOnTick: false,
				height: self.chartheight[self.mode],
				opposite: false,
				showLastLabel: true,
				showFristLabel: true,
				gridLineDashStyle: 'ShortDot',
				max: 100,
				min: 0
			},
			{ //hsi
				title: {
					text:'',
					rotation: 0,		
					useHTML: true,
					style: {color: "#000"}
				},
				labels:{
					align:'left',
					x:5,
					y:5,
					style: {color: "#000"}	,
					formatter: function () {
						return addcomma(this.value.toFixed(0));					
					}   
				},    
				// 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 : "underlying",
				type: 'line',
				data : ulastData,
				color : this.colors["underlying"],
				yAxis: 1,
			},
	
			{
				name : "bear",
				type: 'line',
				data : bearData,
				color : this.colors["bear"],
				yAxis: 0,
			},
			{
				name : "bull",
				type: 'line',
				data : bullData,
				color : this.colors["bull"],
				yAxis: 0,
			}
	
			],
			exporting: {
				enabled: false
			}

		};
	},
	drawBackground: function(){
		var $chartContainer = $('[data-renderer="chart-historyRatio"]');
		var chart = this.chart;
		var self = this;

		var offsetx = chart.plotLeft + chart.plotWidth,
		offsety = 50;	
		
		
		
		var legendX1 = 80, 
		legendX2 = lang == "en"? 250 : 150, 
		legendX3 = lang == "en"? 320 : 200;

		var legendY = offsety + 310;

		$chartContainer.find("#drawLegendText").remove();	
		$chartContainer.find('#drawLegendRect2').remove();
		$chartContainer.find("#drawLegendText2").remove();	
		$chartContainer.find("#drawLegendRect3").remove();
		$chartContainer.find("#drawLegendText3").remove();	


		$chartContainer.find("#title1a").remove();
		$chartContainer.find("#title1b").remove();

		
		this.addText(10,offsety-40,this.labels[lang]['yTitle1'][self.type],'title1a');

	
		this.addText(offsetx +13,offsety-40,"<b>"+this.labels[lang].yTitle1Tooltip +"</b>",'title1b');
	
		//rect( [x] [, y] [, width] [, height] [, r] [, strokeWidth])
		//text( [str] [, x] [, y] [, useHTML])

		// legend 
	

		chart.renderer.rect(legendX1, legendY, 11, 11, 0).attr({
			fill: this.colors["underlying"],
			'stroke-width': 0,
			id :'drawLegendRect1',
		}).add();

		chart.renderer.text(self.uname+(lang == "en"? " ":"")+this.labels[lang].yTitle1Tooltip, legendX1+15, legendY + 10).css({
			fontSize: '12px',
		}).attr({
			id :'drawLegendText1',
		}).add();

		//  legend 2
		chart.renderer.rect(legendX2, legendY, 11, 11, 0).attr({
			fill: this.colors["bear"],
			'stroke-width': 0,
			id :'drawLegendRect2',
		}).add();

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

		// legend 3
		chart.renderer.rect(legendX3, legendY, 11, 11, 0).attr({
			fill: this.colors["bull"],
			'stroke-width': 0,
			id :'drawLegendRect3',
		}).add();

		chart.renderer.text(this.labels[lang].legend2, legendX3+15, legendY+ 10).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>"],
			yTitle2 : [
				"<b>相對期指張數</b>",
				"<b>相對股份數目(千股)</b>"
			],
			yTitle1Tooltip : "價格",
			yTitle2Tooltip : "熊證比例",
			yTitle3Tooltip : "牛證比例",
			
			title: "歷史數據",
			legend1 : "熊證",
			legend2 : "牛證",
		},
		sc :{
			yTitle1 : ["<b>恒指牛熊证街货比例(%)</b>",
			"<b>国指牛熊证街货比例(%)</b>",
			"<b>A股牛熊证街货比例(%)</b>",
			"<b>牛熊证街货比例(%)</b>"],
			yTitle2 : [
				"<b>相对期指张数</b>",
				"<b>相对股份数目(千股)</b>"
			],
			yTitle1Tooltip : "价格",
			yTitle2Tooltip : "熊证比例",
			yTitle3Tooltip : "牛证比例",
		
			title: "历史数据",
			legend1 : "熊证",
			legend2 : "牛证",
		},
		en :{
			yTitle1 : ["<b>HSI CBBCs Ratio(%)</b>",
			"<b>HSCE CBBCs Ratio(%)</b>",
			"<b>A-Share CBBCs Ratio(%)</b>",
			"<b>CBBCs Ratio(%)</b>"],
			yTitle2 : [
				"<b>Equivalent Futures Contracts</b>",
				"<b>Equivalent Shares (K)</b>"
			],
			yTitle1Tooltip : "Last",
			yTitle2Tooltip : "Bear Ratio",
			yTitle3Tooltip : "Bull Ratio",
			title: "Historical Data",
			legend1 : "Bear",
			legend2 : "Bull",
		},
	},
}