var warrantCalChart = {
	//type : "",
	container : "",
	chart : null,
	ulast : "",
	wlast : "",
	fix_wlast : "",
	init : function(ulast, callback){
		var self = this;
		self.labels["edu"] = self.labels["zh_cn"];
		var data = getChartdata();
		data = self.decode(data, ulast);
		//if(data[type] != '') {
			$((self.container=='')?'#warrantCalChartContainer':'#'+self.container).highcharts('StockChart', self.getJSON(data, ulast), function(chart){
				self.chart = chart;
				self.ulast = ulast;
				self.wlast = data[0].wlast;
				self.fix_wlast =  data[0].fix_wlast;
				self.drawBackground(ulast, [data[0].wlast, data[0].fix_wlast]);
				//self.drawYaxisTooltip();
				//self.yaxisChange(type);
				if (callback!==undefined){
					callback(chart,data);
				}
				//console.log(data);
			});
		//}
	},
	decode : function(_data, _ulast){
		//var _max1 = 0;
		for(var i = 0; i < _data[0].code1.length; i++) {
			//!isFinite(_data[0].code2[i][1])
			if(isNaN(_data[0].code1[i][1])) {
				//_data[0].code1[i][1] = null;
				_data[0].code1[i][1] = 0;
			}
			
			if(_data[0].code1[i][1] < 0) {
				_data[0].code1[i][1] = 0;
			}
			
			/*if(_data[0].code1[i][1] >= _max1) {
				_max1 = _data[0].code1[i][1];
			}*/
		}
		
		//var _max2 = 0;
		for(var i = 0; i < _data[0].code2.length; i++) {
			if(isNaN(_data[0].code2[i][1])) {
				//_data[0].code2[i][1] = null;
				_data[0].code2[i][1] = 0;
			}
			
			if(_data[0].code2[i][1] < 0) {
				_data[0].code2[i][1] = 0;
			}
			
			/*if(_data[0].code2[i][1] >= _max2) {
				_max2 = _data[0].code2[i][1];
			}*/
			
			if(_data[0].code2[i][0] == _ulast) {
				_data[0].wlast = _data[0].code2[i][1];
				if(_data[0].wlast != null) {
					_data[0].wlast = _data[0].wlast.toFixed(_spreadTable(_data[0].wlast))*1;
				}
			}
		}
		//_data[0].max = (_max1 > _max2)? _max1:_max2;
		//console.log(_data);
		return _data;
	},
	colors :{yaxis: "#f7952a", line: "#f7952a", gridline: "#E5E5E5", tooltip: "#FDA438", black: "#000000", blue: "#8BA9D3"},
	getJSON : function(_data, ulast){
		var self = this;
		var data1 = _data[0];
		
		//console.log(data1);
		
		return {
			chart:{
				spacing: [0, 0, 0, 0],
				//marginLeft:	48,
				marginLeft:	0,
				marginRight: 0,
				marginTop: 20,
				marginBottom: 0,
				events: {
					redraw: function(event) {
						self.drawBackground(self.ulast, [self.wlast, self.fix_wlast]);
					}
				}
				//height: 299
			},
			tooltip: {
				backgroundColor: "none",
				borderWidth: 0,
				shadow: false,
				useHTML: true,
				shape: "square",
				padding: 0,
				formatter: function() {
					//console.log(this);
					var yval = this.points[0].y;
					var ypos = this.points[0].point.plotY;
					self.drawYaxisTooltip(yval.toFixed(_spreadTable(yval))*1, ypos);
				},
			},
			rangeSelector: {
				enabled: false,
			},
			/*plotOptions: {
				series: {
					animation: false
				}
			},*/
			xAxis: {
				tickLength:0,
				gridLineWidth: 0,
				gridZIndex: -1,	
				lineWidth: 0,
				//gridLineColor: self.colors["gridline"],
				//gridLineDashStyle: "ShortDot",
				align: "bottom",
				opposite: false,
				//width: 420,
				//width: 548,
				//tickInterval : 1,		
				/*tickPositioner: function() {
					var positions = [];
					var a = Math.floor(5*data1.code1.length/(data1.code1.length-15));
					//var a = Math.floor(5*data1.code1.length/(data1.code1.length));
					var interval = Math.floor(data1.code1.length / a);
					
					//var x = 0;
					for(var i = 0; i < 5; i++) {
						var x = i*interval+15;
						/*if(x > data1.code1.length) {
							positions[i] = data1.code1[data1.code1.length-1][0];
							break;
						} else {*
							positions[i] = data1.code1[x][0];
						//}
					}
					//console.log(positions);
					return positions;
				},*/
				tickPositions: xAxis,
				crosshair: false,
				events: {
					setExtremes: function(e) {
						if(typeof(e.rangeSelectorButton)!== 'undefined'){
							if (e.rangeSelectorButton.type == "all"){
							
							}else{
							
							}
						}
					} 
				},
				labels: {
					y : -25,
					formatter : function() {
						/*if($.inArray(ucode, ucodeArr) >= 0) {
							val = this.value.toFixed(0);
						} else {
							if(this.value >= 19.5) {
								val = this.value.toFixed(0);
							} else {
								val = this.value.toFixed(1);
							}
							//val = this.value.toFixed(_spreadTable(this.value));
						}*/
						val = this.value;
						return '<span style="fill: black;">'+val+'</span>'
						//return this.value.toFixed(2);
					},
					style: {
						color: ''
					}
				},		
				title: {
					x: -5,  
					y: -5,
					text: self.labels[lang].xtitle,
					rotation: 0
				},
				plotLines: [{
					id: "underlying_line",
					//color: self.colors["black"],
					color: self.colors["line"],
					width: 2,
					value: ulast,
					zIndex: 5
				}, /*{
					id: "fix_underlying_line",
					color: 'grey',
					width: 2,
					value: _ulast*1,
					zIndex: 4,
					dashStyle: 'ShortDash'
				}*/]
			},
			yAxis: [{
				//original
				labels:{
					align:'left',
					//x:-5,
					x:9,
					y:11,
					formatter: function () {
						//return '<span>'+(this.value).toFixed(3)+'</span>';
						return '<span>'+this.value+'</span>';
					},
					style: {
						color: self.colors["yaxis"]
					}
				},
				top:20,
				offset:0,
				//height: 238,
				height: 274,
				tickPixelInterval:70,
				//tickAmount : 6,			
				showLastLabel: true,
				showFirstLabel: false,
				gridLineColor: self.colors["gridline"],
				//gridLineDashStyle: "ShortDot",
				gridZIndex: -1,
				lineWidth: 1,
				lineColor: self.colors["gridline"],
				//lineDashStyle: "ShortDot",
				opposite: false,
				//linkedTo: 1
				//min: 0,
				//max: Math.ceil(data1.max),
				//crosshair: false,
				crosshair: {
					color: self.colors["yaxis"],
					className: 'chart_crosshair',
					width: 2,
				},
			}/*,{	
				//new line
				top:20,
				offset:0,
				//height: 238,
				height: 274,
				tickPixelInterval:70,
				//tickAmount : 8,			
				showLastLabel: true,
				showFirstLabel: false,
				gridLineColor: self.colors["gridline"],
				//gridLineDashStyle: "ShortDot",
				gridZIndex: -1,
				lineWidth: 1,
				lineColor: self.colors["gridline"],
				//lineDashStyle: "ShortDot",
				opposite: false,
				linkedTo: 0,
				/*plotLines: [{
					id: "wlast_line",
					color: self.colors["yaxis"],
					width: 2,
					value: data1.wlast,
					zIndex: 5
				}],*
				crosshair: {
					color: self.colors["yaxis"],
					className: 'chart_crosshair',
					width: 2,
				},
			}*/],
			navigator : {
				enabled : false
			},
			scrollbar : {
				enabled : false
			},
			series: [ {
				name: 'code2',
				data: data1.code2,
				lineWidth: 2,
				color: self.colors["line"],
				//yAxis: 1,
				zIndex: 8,
				animation: false,
				dataGrouping: {
					enabled: false
				}
			},{
				name: 'code1',    //original
				data: data1.code1,
				lineWidth: 2,
				color: 'grey',
				//yAxis: 0,
				zIndex: 8,
				animation: false,
				enableMouseTracking: false,
				dataGrouping: {
					enabled: false
				}
			}
			],
			exporting: {
				enabled: false
			},
			credits: {
				enabled: false
			},
		};
	},
	drawBackground: function(ulast, wlast){
		var chart = this.chart;
		var offsetx,offsety;
		
		//var fontstyle = {color: this.colors['yaxis'], fontSize: '13px'};
		var fontstyle = {color: 'grey', fontSize: '13px'};
		var textattr = {zIndex: 7, id: 'ytitle1'};
		$("#ytitle1").remove();
		chart.renderer.text(this.labels[lang].ytitle1, 7, 15).css(fontstyle).attr(textattr).add();
		
		//chart.renderer.rect(90, 8, 14, 5, 0).attr({
		var label_x_pos=67;
		if(lang=="en_hk")
		{
			label_x_pos = 87;
		}		
		$("#ytitleRect1").remove();
		chart.renderer.rect(label_x_pos, 8, 14, 5, 0).attr({
			fill: 'grey',
			//stroke: '#fff',
			'stroke-width': 0.5,
			zIndex: 6,
			id: 'ytitleRect1'
			//class: "tooltipElement",
		}).add();
		
		fontstyle = {color: this.colors['yaxis'], fontSize: '13px'};
		textattr = {zIndex: 7, id: 'ytitle2'};
		$("#ytitle2").remove();
		chart.renderer.text(this.labels[lang].ytitle2, 127, 15).css(fontstyle).attr(textattr).add();
		
		//chart.renderer.rect(75, 8, 14, 5, 0).attr({
		label_x_pos=187;
		if(lang=="en_hk")
		{
			label_x_pos = 217;
		}
		$("#ytitleRect2").remove();
		chart.renderer.rect(label_x_pos, 8, 14, 5, 0).attr({
			fill: this.colors['yaxis'],
			//stroke: '#fff',
			'stroke-width': 0.5,
			zIndex: 6,
			id: 'ytitleRect2'
			//class: "tooltipElement",
		}).add();
		
		//fix underlying label
		val = _ulast*1;
		val_length = val.toString().length;
		w_label = val_length*9;
		fontstyle2 = {color: '#fff', fontSize: '11px'};
		//uplotline = chart.xAxis[0].plotLinesAndBands[1];
		//upos = chart.xAxis[0].toPixels(uplotline.options.value);
		upos = chart.xAxis[0].toPixels(val);
		//offsetx = upos - (52/2);
		offsetx = upos - (w_label/2);
		//offsety = 20;
		if(offsetx < 0) {
			offsetx = 0;
		} else if(offsetx+w_label > chart.chartWidth) {
			offsetx = chart.chartWidth-w_label;
		}		
		offsety = 294;
		$("#w_labelRect").remove();
		chart.renderer.rect(offsetx, offsety, w_label,17,0).attr({
			fill: 'grey',
			'stroke-width': 0,
			'zIndex':8,
			id: 'w_labelRect'
			//class: 'tooltipBackground'
		}).add();
		
		//chart.renderer.text(val, offsetx+val_length, offsety+12.5).css(fontstyle2).attr(textattr).add();
		$("#w_labelText").remove();
		chart.renderer.text(val, offsetx+val_length, offsety+12.5).css(fontstyle2).attr({zIndex: 8, id: 'w_labelText'}).add();
		
		//fix underlying line(plotline)
		//console.log(chart.yAxis[0].toPixels(chart.yAxis[0].min)); --> 294
		ypos = chart.yAxis[0].toPixels(wlast[1]);
		$(".classRect").remove();
		/*for(var i = ypos; i < (294); i+=4) { //dot line
			l = 7;
			if(i+l > 294) {
				l = 294-i;
			}
			chart.renderer.rect(upos-1, i, 2,l,0).attr({
				fill: 'grey',
				//fill: '#ff0000',
				'stroke-width': 0,
				'zIndex':4,
				class: "classRect"
			}).add();
			i += 7;
		}*/
		chart.renderer.rect(upos-1, ypos, 2,294-ypos,0).attr({
				fill: 'grey',
				//fill: '#ff0000',
				'stroke-width': 0,
				'zIndex':4,
				class: "classRect"
			}).add();		
		
		//underlying label
		val = ulast;
		val_length = val.toString().length;
		w_label = val_length*9;
		uplotline = chart.xAxis[0].plotLinesAndBands[0];
		upos = chart.xAxis[0].toPixels(uplotline.options.value);
		//offsetx = upos - (52/2);
		offsetx = upos - (w_label/2);
		if(offsetx < 0) {
			offsetx = 0;
		} else if(offsetx+w_label > chart.chartWidth) {
			offsetx = chart.chartWidth-w_label;
		}
		offsety = 20;
		$("#w_labelRect2").remove();
		chart.renderer.rect(offsetx, offsety, w_label,17,0).attr({
			//fill: this.colors["black"],
			fill: this.colors["line"],
			'stroke-width': 0,
			'zIndex':6,
			//class: 'tooltipBackground'
			id: 'w_labelRect2'
		}).add();
		$("#w_label2").remove();
		textattr = {zIndex: 7, id: 'w_label2'};
		chart.renderer.text(val, offsetx+val_length, offsety+12.5).css(fontstyle2).attr(textattr).add();
		
		//wlast label
		fontstyle = {color: '#fff', fontSize: '12px'};
		var w_val = wlast[0];
		w_val = (w_val == undefined)? 0:w_val;
		//console.log(w_val);
		var wlast_pos = chart.yAxis[0].toPixels(w_val);
		wlast_pos -= 10;
		chart.renderer.rect(0, wlast_pos, 48, 20, 0).attr({
			fill: this.colors["yaxis"],
			'stroke-width': 0,
			'zIndex':5,
			class: 'ytooltipElement'
		}).add();
		
		chart.renderer.text(w_val, 9, wlast_pos+14).css(fontstyle).attr({zIndex: 7, class: 'ytooltipElement'}).add();
		
		chart.renderer.rect(0, wlast_pos+9, chart.chartWidth-5, 2, 0).attr({
			fill: this.colors["yaxis"],
			'stroke-width': 0,
			'zIndex':5,
			class: 'ytooltipElement'
		}).add();
		
		//fix wlast label
		fontstyle = {color: '#fff', fontSize: '12px'};
		var w_val = wlast[1];
		w_val = (w_val == undefined)? 0:w_val;
		var wlast_pos = chart.yAxis[0].toPixels(w_val);
		wlast_pos -= 10;
		$(".wlast_posRect").remove();
		chart.renderer.rect(0, wlast_pos, 48, 20, 0).attr({
			fill: 'grey',
			'stroke-width': 0,
			'zIndex':7,
			id: 'wlast_posRect'
		}).add();
		$(".wlast_pos").remove();
		chart.renderer.text(w_val, 9, wlast_pos+14).css(fontstyle).attr({zIndex: 7, id: 'wlast_pos'}).add();
		
		$(".wlastLine").remove();
		chart.renderer.rect(0, wlast_pos+9, chart.chartWidth-5, 2, 0).attr({
			fill: 'grey',
			'stroke-width': 0,
			'zIndex':5,
			class: 'wlastLine'
		}).add();
		
	},
	drawYaxisTooltip: function(yval, ypos) {
		var chart = this.chart;
		var fontstyle = {color: '#fff', fontSize: '12px'};
		var textattr = {zIndex: 7, class: "ytooltipElement"};
		
		$(".highcharts-axis-labels text").removeAttr("class", "ytooltipElement");
		$(".ytooltipElement").remove();
		
		var pos = ypos+(20/2);
		
		chart.renderer.rect(0, pos, 48, 20, 0).attr({
			fill: this.colors["yaxis"],
			'stroke-width': 0,
			'zIndex':7,
			class: 'ytooltipElement'
		}).add();
		
		chart.renderer.text(yval, 9, pos+14).css(fontstyle).attr(textattr).add();
	},
	labels: {
		zh_hk: {
			xtitle: '相關資產價格',
			//ytitle: '認股證價格',
			ytitle1: '現時價格',
			ytitle2: '模擬價格'
		},
		zh_cn: {
			xtitle: '相关资产价格',
			//ytitle: '认股证价格',
			ytitle1: '现时价格',
			ytitle2: '模拟价格'
		},
		en_hk: {
			xtitle: 'Underlying Price',
			//ytitle: 'Warrant Price',
			ytitle1: 'Current price',
			ytitle2: 'Simulated price'
		}
	}
}