Highcharts.setOptions({lang :{
	rangeSelectorZoom : "",
	rangeSelectorFrom : "由",
	rangeSelectorTo : "至",
	noData : "沒有相關資料",
}});
var ivChart = {
	chart : null,
	mode : "desktop",
	init : function(code,cratio,issuer, callback){
		var self = this;
		self.mode = (window.innerWidth<991)?"mobile":"desktop";		
		$.getJSON('/?q=/'+lang+'/data/chart/ivChart/code/'+code, function(_data) {
			var data = self.decode(_data);
			$('#ivChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
				self.chart = chart;
				self.drawBackground();
			});
		});
	},
	decode : function(_data){
		return _data.mainData;
	},
	colors : {line1 : "#007DB7", line2: "#DC6801", bar1 : "#FDCD07", bar2 : "#184ABD", bar3 : "#77C07B"}, 
	margin : {mobile: 40, desktop: 90},
	getJSON : function(data){
		var close = [];
		var iv = [];
		var bar1 = [];
		var bar2 = [];
		var bar3 = [];
		// var volMap = [];
		for (i = 0; i < data.length; i++) {
			close.push([data[i]["ts"], data[i]["last"]]);
			iv.push([data[i]["ts"], data[i]["iv"]]);
			// bar1.push([data[i]["ts"], data[i]["s_buy"]]);
			// bar2.push([data[i]["ts"], data[i]["s_sell"]]);
			// bar3.push([data[i]["ts"], data[i]["market"]]);
			// volMap[data[i]["ts"]/1000] = data[i]["vol"];
		}
		var self = this;
		return {
			chart : {
				marginLeft: self.margin[self.mode],
				marginRight: self.margin[self.mode],
				spacingTop: 0,
				events: {
					redraw: function(event) {
						self.redraw();
					}
				}
			},
			plotOptions: {
				line: {
					events: {
						legendItemClick: function () {
							return false; 
						}
					}
				}
			},
			tooltip: {
				useHTML: true,
				formatter: function() {
					var _html = '<div class="chart_tooltip">' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b>';
					_html += '<br/><b><span style="color:'+self.colors["line1"]+'">'+self.labels[lang].yTitle1Tooltip+':</span> ' + this.points[0].y + '';
					_html += '<br/><span style="color:'+self.colors["line2"]+'">'+self.labels[lang].yTitle2Tooltip+':</span> ' + (this.points[1].y).toFixed(3);
					// _html += '<br/><span>'+self.labels[lang].legend3+' ('+self.labels[lang].million+')</span> ' + (volMap[this.x/1000]*this.points[2].y/100/1000000).toFixed(3);
					// _html += '<br/><span>'+self.labels[lang].legend4+' ('+self.labels[lang].million+')</span> ' + (volMap[this.x/1000]*this.points[3].y/100/1000000).toFixed(3) + "</b></div>";

					return _html;
				}
			},
			rangeSelector : {
				selected : 1,
				height: 55,
				buttons: [{
					type: 'day',
					count: 5,
					text: '5日'
				}, {
					type: 'month',
					count: 1,
					text: '1個月'
				}, {
					type: 'month',
					count: 2,
					text: '2個月'
				}, {
					type: 'month',
					count: 3,
					text: '3個月'
				}, 
				/* {
					type: 'all',
					text: 'All'
				} */
				],
				allButtonsEnabled : true,
				inputBoxHeight: 20,
				inputBoxWidth: 100,
				inputDateFormat: '%Y-%m-%d',
				// inputEditDateFormat: '%d-%m-%Y',
				buttonPosition: {
					x: 0,
				},
				inputPosition: {
					x: 270*((self.mode == "desktop")?1:-1),
					y: 2,
					align : "left"
				},
				inputStyle: {
					"fontSize": "14px",
				},
				labelStyle: {
					"fontSize": "14px",
				},
				buttonSpacing : 0,
				buttonTheme: {
					fill: 'none',
					padding: 6,
					stroke: '#FFCC07',
					'stroke-width': 1,
					style: {
						color: '#000',
						fontWeight: 'bold'
					},
					states: {
						select: {
							fill: '#FFCC07',
							stroke: '#FFCC07',
						},
						hover:{
							fill: '#FFCC07',
							stroke: '#FFCC07',
						}
						// disabled: { ... }
					}
				},
			},
			xAxis:{
				type: 'datetime',
				lineWidth: 0,
				gridLineWidth: 0,
				tickColor: '#00000000',
				lineColor: '#00000000',
				labels: {
					style: {color: "#000"}	,
					formatter: function () {
						return Highcharts.dateFormat('%m/%d', this.value);
					}            
				}
			},
			yAxis: [{
				title: {
					text: this.labels[lang].yTitle1,
					rotation: 0,
					y: -30,
					margin: 20,
					useHTML: true,
					style: {color: "#000"}
				},
				labels:{
					align:'left',
					x:10,
					y:5,
					style: {color: "#000"}	,
					formatter: function () {
						return this.value.toFixed(3);					
					}   
				},
				tickAmount : 7,
				height: 295,
			},
			{
				title: {
					useHTML: true,
					rotation: 0,
					y: -30,
					margin: 20,
					text: this.labels[lang].yTitle2,
					style: {color: "#000"}
				},
				labels:{
					align:'right',
					x:-10,
					y:5,
					style: {color: "#000"}	,
					formatter: function () {
						return (this.value).toFixed(1);					
					}  
				},
				tickAmount : 7,
				gridLineWidth: 0,
				opposite: false,
				height: 295,
				min:0,
				tickInterval:10
			},
		/* 	{
				min: 0,
				top:375,
				max:100,
				height: 130,
				title: {
					text: null,
				},
				labels:{
					align:'right',
					x:-50,
					y:5,
					formatter: function () {
						return (this.isFirst)?"":this.value;					
					}    
				},
				tickAmount : 5,
				tickPixelInterval:30,
				opposite: true,
			} */
			],
			navigator : {
				enabled : false,
				// top:540
			},
			scrollbar : {
				enabled : false
			},
			series : [{
				name : this.labels[lang].legend1,
				data : close,
				color : this.colors["line1"],
			},
			{
				name : this.labels[lang].legend2,
				data : iv,
				yAxis: 1,
				color : this.colors["line2"],
			},
			/* {
				name : this.labels[lang].legend3,
				data : bar1,
				type: 'column',
				stacking: 'normal',
				yAxis: 2,
				color : this.colors["bar1"],
			},
			{
				name : this.labels[lang].legend4,
				data : bar2,
				type: 'column',
				stacking: 'normal',
				yAxis: 2,
				color : this.colors["bar2"],
			},
			{
				name : this.labels[lang].legend5,
				data : bar3,
				type: 'column',
				stacking: 'normal',
				yAxis: 2,
				color : this.colors["bar3"],
			} */
			],
			exporting: {
				enabled: false
			}
		};
	},
	redraw: function(){
		var chart = this.chart;
		var offsetx,offsety;	
		var self = this;
		$("#chartBackground1").remove();
		$("#chartLegend1").remove();
		$("#chartLegend2").remove();
		$("#chartFlag1").remove();
		$("#chartFlag2").remove();
		chart.renderer.rect(self.margin[self.mode], 55, chart.plotWidth, 295, 0).attr({
			fill: '#F9F9F9',
			stroke: '#C0C0C0',
			'stroke-width': 1,
			id :'chartBackground1',
		}).add();	
		
		offsetx = self.margin[self.mode];
		offsety = 55;
		chart.renderer.rect(offsetx+15,offsety+13, 15, 2, 0).attr({
			fill: this.colors["line1"],
			'stroke-width': 0,
			id :'chartFlag1',
		}).add();
		chart.renderer.text(this.labels[lang].legend1, offsetx + 35, offsety+18).css({
			fontSize: '12px'
		}).attr({
			id :'chartLegend1',
		}).add();
		chart.renderer.rect(offsetx+15+100,offsety+13, 15, 2, 0).attr({
			fill: this.colors["line2"],
			'stroke-width': 0,
			id :'chartFlag2',
		}).add();
		chart.renderer.text(this.labels[lang].legend2, offsetx + 35+100, offsety+18).css({
			fontSize: '12px'
		}).attr({
			id :'chartLegend2',
		}).add();	
	},
	drawBackground: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;
		this.redraw();
	},
	labels : {
		tc :{
			yTitle1 : "<b>權<br/>證<br/>價<br/>格<br/>︵<br/>元<br/>︶</b>",
			yTitle2 : "<b>隱<br/>含<br/>波<br/>幅<br/>︵<br/>&nbsp;%<br/>︶</b>",			
			yTitle3 : "Outstanding Quantity (%)",
			yTitle1Tooltip : "權證價格(元)",
			yTitle2Tooltip : "隱含波幅(%)",			
			yTitle3 : "Outstanding Quantity (%)",			
			legend1 : "權證價格",
			legend2 : "隱含波幅",
			legend3 : "LP Bought",
			legend4 : "LP Sold",
			legend5 : "Market Volume",	
			million : "Million",	
		},
		sc :{
		
		},
		en :{
			yTitle1 : "Warrants Price (HKD)",
			yTitle2 : "Outstanding Quantity (Million)",			
			yTitle3 : "Outstanding Quantity (%)",		
			legend1 : "Warrant Price",
			legend2 : "Outstanding Quantity",
			legend3 : "LP Bought",
			legend4 : "LP Sold",
			legend5 : "Market Volume",	
			million : "Million",	
		},
	},
}