Highcharts.setOptions({lang :{
	rangeSelectorZoom : "",
	rangeSelectorFrom : "由",
	rangeSelectorTo : "至",
	noData : "沒有相關資料",
}});
var productChart = {
	chart : null,
	chart2 : null,
	mode : "desktop",
	wtype : null,
	init : function(code, callback){
		var self = this;	
		self.mode = (window.innerWidth<991)?"mobile":"desktop";
		self.wtype = (code.endsWith("C") || code.endsWith("B") || code.endsWith("X") || code.endsWith("Y"))?"cbbc":"warrant";
		$.getJSON('/?q=/'+lang+'/data/chart/productChart/code/'+code, function(_data) {
			var data = self.decode(_data);
			$('#productChartContainer').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 : "#04BDD3", bar3 : "#79D5F3"}, 
	margin : {mobile: 40, desktop: 90},
	getJSON : function(data){
		var last = [];
		var ulast = [];
		var bar1 = [];
		var bar2 = [];
		var bar3 = [];
		var candle1 = [];
		var candle2 = [];
		for (i = 0; i < data.length; i++) {
			last.push([data[i]["ts"], data[i]["last"]]);
			ulast.push([data[i]["ts"], data[i]["ulast"]]);
			bar1.push([data[i]["ts"], data[i]["vol"]]);
			bar2.push([data[i]["ts"], data[i]["uvol"]]);
			bar3.push([data[i]["ts"], data[i]["os"]]);
			
			// candle1.push([data[i]["ts"], data[i]["open"], data[i]["high"], data[i]["low"], data[i]["close"]]);
			// candle2.push([data[i]["ts"], data[i]["uopen"], data[i]["uhigh"], data[i]["ulow"], data[i]["uclose"]]);
			candle1.push([data[i]["ts"], data[i]["open"], data[i]["high"], data[i]["low"], data[i]["low"]]);
			candle2.push([data[i]["ts"], data[i]["uopen"], data[i]["uhigh"], data[i]["ulow"], data[i]["ulow"]]);
		}
		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 = "";
					var i = 0;
					if(typeof this.points[2] != "undefined"){
						_html = '<div class="chart_tooltip">' + Highcharts.dateFormat('%m/%d', this.x) + '</b><b>';
						if(this.points[i].series.name == self.labels[lang][self.wtype].legend1){
							_html += '<br/><span style="color:'+self.colors["line1"]+'">'+self.labels[lang][self.wtype].tooltip1+'</span> ' + this.points[i].y + '';
							i++;
						}
						if(this.points[i].series.name == self.labels[lang][self.wtype].legend2){
							_html += '<br/><span style="color:'+self.colors["line2"]+'">'+self.labels[lang][self.wtype].tooltip2+'</span> ' + (this.points[i].y);
							i++;
						}
						_html += '<br/><span style="color:'+self.colors["bar2"]+'">' + this.points[i].series.name + '</span> ' + (this.points[i].y);
						i++;
						_html += '<br/><span style="color:'+self.colors["bar1"]+'">' + this.points[i].series.name + '</span> ' + (this.points[i].y);
						i++;
						_html += '<br/><span style="color:'+self.colors["bar3"]+'">'+self.labels[lang][self.wtype].legend5+'</span> ' + (this.points[i].y) + "</b></div>";
					}

					if(_html == ""){
						return false;
					}
					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: '全部'
				}],
				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',
				labels: {
					formatter: function () {
						return Highcharts.dateFormat('%m/%d', this.value);
					}            
				},
				visible: false,
			},
			yAxis: [
			{
				top:375,
				height: 130,
				offset: 0,
				title: {
					text: null,
				},
				labels:{
					align:'right',
					y:5,
					x:-5,
					formatter: function () {
						return (this.isFirst)?"":this.value;					
					}    
				},
				tickAmount : 5,
				tickPixelInterval:30,
				opposite: false,
			},{
				top:375,
				height: 130,
				offset: 0,
				title: {
					text: null,
				},
				labels:{
					align:'left',
					y:5,
					x:5,
					formatter: function () {
						return (this.isFirst)?"":this.value;					
					}    
				},
				tickAmount : 5,
				tickPixelInterval:30,
				opposite: true,
			},{
				top:550,
				height: 130,
				offset: 0,
				title: {
					text: null,
				},
				labels:{
					align:'left',
					y:5,
					x:5,
					formatter: function () {
						return (this.isFirst)?"":this.value;					
					}    
				},
				tickAmount : 5,
				tickPixelInterval:30,
				opposite: true,
			},{
				offset: 0,
				title: {
					useHTML: true,
					margin: 20,
					text: this.labels[lang][this.wtype].yTitle1,
					rotation: 0,
				},
				labels:{
					align:'left',
					y:5,
					x:5,
					formatter: function () {
						return this.value.toFixed(2);					
					}   
				},
				tickAmount : 7,
				height: 295,
			},
			{
				offset: 0,
				title: {
					useHTML: true,
					margin: 20,
					text: this.labels[lang][this.wtype].yTitle2,
					rotation: 0,
				},
				labels:{
					align:'right',
					y:5,
					x:-5,
					formatter: function () {
						return this.value.toFixed(1);					
					}  
				},
				tickAmount : 7,
				opposite: false,
				height: 295,
			},
			],
			navigator : {
				enabled : true,
				top:730,
				xAxis:{
					labels: {
						formatter: function () {
							return Highcharts.dateFormat('%m/%d', this.value);
						}            
					}
				},
			},
			scrollbar : {
				enabled : false
			},
			series : [{
				id : '1',
				name : this.labels[lang][this.wtype].legend1,
				data : last,
				yAxis: 3,
				color : this.colors["line1"],
			},
			{
				id : '2',
				name : this.labels[lang][this.wtype].legend2,
				data : ulast,
				// yAxis: 1,
				yAxis: 4,
				color : this.colors["line2"],
			},
			{
				id : '3',
				name : this.labels[lang][this.wtype].legend2,
				data : candle2,
				type : 'candlestick',
				// yAxis: 1,
				yAxis: 4,
				color : this.colors["line2"],
				visible : false,
			},
			{
				name : this.labels[lang][this.wtype].legend4,
				data : bar2,
				type: 'column',
				// stacking: 'normal',
				// yAxis: 2,
				yAxis: 0,
				color : this.colors["bar2"],
			},
			{
				name : this.labels[lang][this.wtype].legend3,
				data : bar1,
				type: 'column',
				// stacking: 'normal',
				// yAxis: 3,
				yAxis: 1,
				color : this.colors["bar1"],
			},
			{
				name : this.labels[lang][this.wtype].legend5,
				data : bar3,
				type: 'column',
				// stacking: 'normal',
				// yAxis: 4,
				yAxis: 2,
				color : this.colors["bar3"],
			},			
			],
			exporting: {
				enabled: false
			}
		};
	},
	redraw: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;
		
		$("#chartBackground1").remove();
		$("#chartBackground2").remove();
		$("#chartBackground3").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();
		chart.renderer.rect(self.margin[self.mode], 55+295+25, chart.plotWidth, 130, 0).attr({
			fill: '#F9F9F9',
			stroke: '#C0C0C0',
			'stroke-width': 1,
			id :'chartBackground2',
		}).add();
		chart.renderer.rect(self.margin[self.mode], 55+295+25+175, chart.plotWidth, 130, 0).attr({
			fill: '#F9F9F9',
			stroke: '#C0C0C0',
			'stroke-width': 1,
			id :'chartBackground3',
		}).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][this.wtype].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][this.wtype].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();
		

		if (self.mode == "desktop"){
			chart.renderer.image('/home/images/chart/icon_calendar.png', 245, 0, 30, 30).add();
		}
		offsetx = self.margin[self.mode];
		offsety = 520;
		chart.renderer.rect(offsetx,offsety, 15, 15, 0).attr({
			fill: this.colors["bar1"],
			'stroke-width': 0,
		}).add();
		chart.renderer.text(this.labels[lang][this.wtype].legend3, offsetx + 20, offsety+12).css({
			fontSize: '11px'
		}).add();
		
		offsetx = self.margin[self.mode]+128;
		offsety = 520;
		chart.renderer.rect(offsetx,offsety, 15, 15, 0).attr({
			fill: this.colors["bar2"],
			'stroke-width': 0,
		}).add();
		chart.renderer.text(this.labels[lang][this.wtype].legend4, offsetx + 20, offsety+12).css({
			fontSize: '11px'
		}).add();
		
		offsetx = self.margin[self.mode];
		offsety = 700;
		chart.renderer.rect(offsetx,offsety, 15, 15, 0).attr({
			fill: this.colors["bar3"],
			'stroke-width': 0,
		}).add();
		chart.renderer.text(this.labels[lang][this.wtype].legend5, offsetx + 20, offsety+12).css({
			fontSize: '12px'
		}).add();
		/*chart.renderer.rect(offsetx+125,offsety, 15, 15, 0).attr({
			fill: this.colors["bar2"],
			'stroke-width': 0,
		}).add(); 
		chart.renderer.text(this.labels[lang][this.wtype].legend4, offsetx + 20+125, offsety+12).css({
			fontSize: '12px'
		}).add();		
		chart.renderer.rect(offsetx+250,offsety, 15, 15, 0).attr({
			fill: this.colors["bar3"],
			'stroke-width': 0,
		}).add();
		chart.renderer.text(this.labels[lang][this.wtype].legend5, offsetx + 20+250, offsety+12).css({
			fontSize: '12px'
		}).add();	*/	
	},
	showSeries : function(id){
		var chart = this.chart;
		var self = this;		
		var selected = chart.rangeSelector.selected;
		chart.get(id).show();
		var yAxisID = (id == '1' ? 3 : 4);
		chart.yAxis[yAxisID].userOptions.title.text = (id == '1' ? this.labels[lang][this.wtype].yTitle1 : this.labels[lang][this.wtype].yTitle2);
		chart.yAxis[yAxisID].update();
		if(selected != null){
			chart.rangeSelector.clickButton(selected);
		}
	},
	hideSeries : function(id){
		var chart = this.chart;
		var self = this;
		var selected = chart.rangeSelector.selected;
		chart.get(id).hide();
		var yAxisID = (id == '1' ? 3 : 4);
		chart.yAxis[yAxisID].userOptions.title.text = "";
		chart.yAxis[yAxisID].update();
		if(selected != null){
			chart.rangeSelector.clickButton(selected);
		}
	},
	labels : {
		tc :{
			warrant:{
				yTitle1 : "權<br>證<br>價<br>格<br>︵<br>元<br>︶",
				yTitle2 : "標<br>的<br>價<br>格<br>︵<br>元<br>︶",
				tooltip1 : "權證價格 (元)",
				tooltip2 : "標的價格 (元)",
				legend1 : "權證價格",
				legend2 : "標的",
				legend3 : "權證成交量 (張)",
				legend4 : "標的成交量 (張)",
				legend5 : "流通在外",
				million : "千元",
			},
			cbbc:{
				yTitle1 : "牛<br>熊<br>證<br>價<br>格<br>︵<br>元<br>︶",
				yTitle2 : "標<br>的<br>價<br>格<br>︵<br>元<br>︶",
				tooltip1 : "權證價格 (元)",
				tooltip2 : "標的價格 (元)",
				legend1 : "牛熊證價格",
				legend2 : "標的價格",
				legend3 : "牛熊證成交量 (張)",
				legend4 : "標的成交量 (張)",
				legend5 : "流通在外",
				million : "千元",	
			}
		},
		sc :{
		},
		en :{},
	},
}