var warrantCalChart = {
	type : "",
	container : "",
	chart : null,
	init : function(chartID, type, ulastArr, callback){
		var self = this;
		var numOfset = 2;
		tagID = '#warrantCalChartContainer'+ chartID;
	
		/*
		var data = getChartdata(1);
        var data2 = getChartdata(2);
      
		data = self.decode(data);
		*/
		
		var chartData = [];
		for(var i = 1; i <= numOfset; i++){
			chartData[i] = getChartdata(i);
			chartData[i] = self.decode(chartData[i]);
			
		}

        
		if(chartData[1][type] != '' && chartData[2][type]) {
			$((self.container=='')?tagID:'#'+self.container).highcharts('StockChart', self.getJSON(chartData, type, ulastArr), function(chart){
				$(tagID + ' .highcharts-html-container').append("<div class='highcharts-loading' style='width:"+$(tagID).width()+"px;height:"+$(tagID).height()+"px'></div>");
				
				self.chart = chart;
				self.drawBackground();
				self.yaxisChange(type);
				if (callback!==undefined){
					callback(chart,data);
				}
				//console.log(data);
			});
		}
	},
	decode : function(_data){
		if (_data[0].code1 != null){
			for(var i = 0; i < _data[0].code1.length; i++) {
				//!isFinite(_data[0].code2[i][1])
				if(_data[0].code2 || isNaN(_data[0].code2[i][1])) {
					_data[0].code2[i][1] = null;
				}
				if(isNaN(_data[0].code3[i][1])) {
					_data[0].code3[i][1] = null;
				}
				if(isNaN(_data[0].code4[i][1])) {
					_data[0].code4[i][1] = null;
				}
			}
		}
		if (_data[1].code1 != null){
			for(var i = 0; i < _data[1].code1.length; i++) {
				if(isNaN(_data[1].code2[i][1])) {
					_data[1].code2[i][1] = null;
				}
				if(isNaN(_data[1].code3[i][1])) {
					_data[1].code3[i][1] = null;
				}
				if(isNaN(_data[1].code4[i][1])) {
					_data[1].code4[i][1] = null;
				}
			}
		}
		//console.log(_data);
		return _data;
	},
	colors :{line: "#25b0e9", line2: "#C5215D", line3: "#85399E", line4: "#A0B004", gridline: "#E5E5E5", tooltip: "#00b2ad", black: "#000000", blue: "#004B87", darkblue:"#004b87"},
	getJSON : function(_data, type, ulastArr){
	
		var self = this;
		
		var data1 = _data[1][type].code1; //first line
		var data2 = _data[2][type].code1; //second line

		//console.log(_data);
		/*
		var data3 = _data[1][type].code3;
		var data4 = _data[1][type].code4;
		*/
		var name1 = code;
		var name2 = $('#code2_txt').html();
		/*
		var name3 = $('#code3_txt').html();
		var name4 = $('#code4_txt').html();
		*/
		return {
			chart:{
				spacing: [0, 0, 0, 0],
				marginLeft: 99,
				marginRight: 0,
				marginTop: 22,
				marginBottom: 0,
				events: {
					redraw: function(event) {
						self.drawBackground();
					}
				},
				zoomType:false,
				pinchType:false
				
			},
			tooltip: {
				backgroundColor: "none",
				borderWidth: 0,
				shadow: false,
				useHTML: true,
				shape: "square",
				padding: 0,
				formatter: function() {
					//var html = '<div class="charttooltip"><span class="val1"><span class="value">'+(this.points[0].x).toFixed(2)+'</span></span></div>';
					var html = '<div class="charttooltip"><span class="val1">'+self.labels[lang].xtitle+':'+(this.points[0].x).toFixed(2)+'</span><br/>'; //&nbsp/&nbsp
					html += '<span class="val1"><span class="value">'+this.points[0].series.name + self.labels[lang].xtitle2 +':'+this.points[0].y.toFixed(3)+'</span></span>&nbsp;';
					
					if(this.points[1] != undefined) {
					
						html += '/&nbsp <span class="val2"><span class="value">'+ self.labels[lang].xtitle3 + ':'+this.points[1].y.toFixed(3)+'</span></span>';
					}
					
					if(this.points[2] != undefined) {
						html += '<span class="val2"><span class="value">'+this.points[2].series.name+':'+this.points[2].y.toFixed(3)+'</span></span>';
					}
					
					if(this.points[3] != undefined) {
						html += '<span class="val2"><span class="value">'+this.points[3].series.name+':'+this.points[3].y.toFixed(3)+'</span></span>';
					}
					
					html += '</div>';
					return html;
				},
				positioner: function (boxWidth, boxHeight, point) {
					var chart = this.chart;
					var padding = 9;
					var pos_x = point.plotX + chart.margin[3] - (boxWidth / 2);
					if(pos_x + boxWidth  > chart.plotWidth + chart.margin[3] + padding){
						pos_x = chart.plotWidth + chart.margin[3] - boxWidth + padding;
					}
					if(pos_x < 0 - padding){
						pos_x = 0 - padding;
					}
					return { x: pos_x, y: -6 };
				}
			},
			rangeSelector: {
				enabled: false,
			},
			xAxis: {
				tickLength:0,
				gridLineWidth: 1,
				gridZIndex: -1,	
				lineWidth: 0,
				gridLineColor: self.colors["gridline"],
				gridLineDashStyle: "ShortDot",
				align: "bottom",
				opposite: true,
				//width: 576,
				//width: 1019,
				events: {
					setExtremes: function(e) {
						if(typeof(e.rangeSelectorButton)!== 'undefined'){
							if (e.rangeSelectorButton.type == "all"){
							
							}else{
							
							}
						}
					}
				},
				labels: {
					y : -5,
					formatter : function() {
						return '<span style="fill: black;">'+this.value.toFixed(2)+'</span>';
						//return this.value.toFixed(2);
					},
				},			
				crosshair: {
					color: self.colors["black"],
					className: 'chart_crosshair',
					width: 1,
				},
				title: {
					//x: -560,  
					x: -570,  
					y: 35,
					text: self.labels[lang].xtitle,
					rotation: 0
				},
				plotLines: [
						{
						id: "hsi_line",
						color: self.colors["tooltip"],
						width: 2,
						value: ulastArr[0],
						zIndex: 6
					},{
						id: "hsi_line2",
						color: self.colors["darkblue"],
						width: 2,
						value: ulastArr[1],
						zIndex: 5
					}

				]
			},
			yAxis: [
			{
				title: {
					x: -16,  
					y: -38.5,
					text: self.labels[lang].ytitle2,
					rotation: (lang == 'en')? -90:0,
				},
				labels:{
					align:'right',
					x:-10,
					y:5,
					formatter: function () {
						return '<span style="fill: black;">'+(this.value).toFixed(3)+'</span>';
					},
				},
				top:22,
				offset:0,
				//height: 142,
				height: 291,
				tickPixelInterval:40,
				tickAmount : 8,			
				showLastLabel: false,
				showFirstLabel: false,
				gridLineColor: self.colors["gridline"],
				gridLineDashStyle: "ShortDot",
				gridZIndex: -1,
				lineWidth: 1,
				lineColor: self.colors["gridline"],
				lineDashStyle: "ShortDot",
				opposite: false
			}, {
				linkedTo:0,
				title: {
					x: -16,  //28 --> 20.5
					y: -38.5,
					text: self.labels[lang].ytitle1,
					rotation: (lang == 'en')? -90:0,
				},
				labels:{
					align:'right',
					x:-10,
					y:5,
					formatter: function () {
						return '<span style="fill: black;">'+(this.value).toFixed(3)+'</span>';
					},
				},
				top:22,
				offset:0,
				//height: 142,
				height: 291,
				tickPixelInterval:40,
				tickAmount : 8,			
				showFirstLabel: false,	
				showLastLabel: false,
				gridLineColor: self.colors["gridline"],
				gridLineDashStyle: "ShortDot",
				gridZIndex: -1,
				lineWidth: 1,
				lineColor: self.colors["gridline"],
				lineDashStyle: "ShortDot",
				opposite: false,
				plotLines: [{
					color: self.colors["black"],
					width: 2,
					value: 0
				}],
				visible: false,
			}],
			navigator : {
				enabled : false
			},
			scrollbar : {
				enabled : false
			},
			series: [{
				//draw line
				//name: 'code1',
				name: name1,
				data: data1,
				lineWidth: 2,
				color: self.colors["line"],
				zIndex: 2
			}, {
				//name: 'code2',
				name: name2,

				data: data2,
				lineWidth: 2,
				color: self.colors["line2"],
				zIndex: 1
			},/* {
				//name: 'code3',
				name: name3,
				data: data3,
				lineWidth: 2,
				color: self.colors["line3"],
			}, {
				//name: 'code4',
				name: name4,
				data: data4,
				lineWidth: 2,
				color: self.colors["line4"],
			}*/],
			exporting: {
				enabled: false
			},
			credits: {
				enabled: false
			},
		};
	},
	drawBackground: function(){
		$(".caltooltipBackground").remove();
		
		var chart = this.chart;
		var offsetx,offsety;
		
		offsetx = 0;
		offsety = 0;
		chart.renderer.rect(offsetx,offsety, chart.chartWidth, 2, 0).attr({
			fill: this.colors["black"],
			'stroke-width': 0,
			'zIndex': 2,
			class: 'caltooltipBackground',
		}).add();
		
		offsetx = 0;
		offsety = chart.margin[0];
		chart.renderer.rect(offsetx,offsety, chart.chartWidth, 1, 0).attr({
			fill: this.colors["black"],
			'stroke-width': 0,
			'zIndex': 2,
			class: 'caltooltipBackground',
		}).add();
		
		offsetx = 0;
		offsety = (chart.chartHeight - 1);
		chart.renderer.rect(offsetx,offsety, chart.chartWidth, 1, 0).attr({
			fill: this.colors["black"],
			'stroke-width': 0,
			'zIndex': 2,
			class: 'caltooltipBackground',
		}).add();
	},
	yaxisChange: function(val) {
		var y1 = false;
		var y2 = true;
		
		if(val == 1) {
			y1 = true;
			y2 = false;
		}
		
		this.chart.yAxis[0].update({
			visible: y1
		}); 
		
		this.chart.yAxis[1].update({
			visible: y2
		});
	},
	labels: {
		tc: {
			ytitle1: '產<br/>品<br/>盈<br/>虧<br/>︵<br/>每<br/>股<br/>︶',
			ytitle2: '產<br/>品<br/>參<br/>考<br/>價<br/>格<br/>︵<br/>每<br/>股<br/>︶',
			xtitle: '相關資產價格',
			xtitle2: '價格',
			xtitle3: '比較價格'
		},
		sc: {
			ytitle1: '产<br/>品<br/>盈<br/>亏<br/>︵<br/>每<br/>股<br/>︶',
			ytitle2: '产<br/>品<br/>参<br/>考<br/>价<br/>格<br/>︵<br/>每<br/>股<br/>︶',
			xtitle: '相关资产价格',
			xtitle2: '价格',
			xtitle3: '比较价格'
		},
		en: {
			ytitle1: 'Profit and Loss (Per Share)',
			ytitle2: 'Theoretical price (Per Share)',
			xtitle: 'Underlying',
			xtitle2: ' price',
			xtitle3: ' Comparative price'
		}
	}
}