Highcharts.setOptions({lang :{
	rangeSelectorZoom : "",
	/*rangeSelectorFrom : "",
	rangeSelectorTo : "",*/
	noData : "沒有相關資料",
}});
var uIntradayChart = {
	chart : null,
	container : "",
	period : "intraday",
	chartType : "line",
	init : function(code, type){
		var self = this;	
		if (type == "intraday" || type == "daily" || type == "weekly" || type == "monthly"){
			self.period = type;
		}
		if(type == "candle"){
			self.chartType = type;
		}
		
		var urlstring;
		if(type != "candle" && self.period != "intraday"){
			urlstring = '/?q=/'+lang+'/data/chart/uIntradayChart/code/'+code+'/period/'+self.period;
		}else{
			urlstring = '/?q=/'+lang+'/data/chart/OHLC/code/'+code+'/type/'+type;
		}
		$.getJSON(urlstring, function(_data) {
			var data = self.decode(_data);
			// $('#uIntradayChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
			$((self.container=='')?'#uIntradayChartContainer':'#'+self.container).highcharts('StockChart', self.getJSON(data), function(chart){
				self.chart = chart;
				self.drawBackground();
				//self.chart.tooltip.refresh(self.chart.series[1].points[1]);
			});
		});
	},
	decode : function(_data){
		return _data.mainData;
	},
	colors : {line1 : "#7EDBD5", bar1 : "#FED03A", text:"#C6C6C6", grid:"#7D7D7D", grid2:"#BFBFBF"}, 
	getJSON : function(data){
		var close = [];
		var os = [];
		var osp = [];
		var turnover = [];
		var self = this;
		var chart = this.chart;
		
		if(data===null)
		{
		  var data=[];
		}
		
		for (i = 0; i < data.length; i++) {
			if(self.chartType != "candle" && self.period!="intraday"){
				close.push([data[i][0], data[i][1]]);
				turnover.push([data[i][0] , data[i][2]]);
			}else{
				if(self.chartType != "candle")
				{
					close.push([data[i][0], data[i][4]]);
					turnover.push([data[i][0] , data[i][6]]);					
				}else{
					close.push([data[i][0], data[i][1], data[i][2], data[i][3], data[i][4]]);
					turnover.push([data[i][0] , data[i][6]]);	
				}
			}
		}


		return {
			chart : {
				marginLeft: 60,
				marginRight: 5,
				// marginBottom: 5,
				marginBottom: 20,
				spacingTop: 50,
				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].hTitle1+':</span> ' + this.points[0].y + '';


					return _html;
				}
			},*/
			/*tooltip: {
				backgroundColor: 'none',
				borderWidth: 0,
				shadow: false,
				useHTML: true,
				padding: 0,
				formatter: function() {
					var html = '<span style="color:'+self.colors["line1"]+';">'+(this.points[0].y.toFixed(2))+"</span>";
					//console.log(this.points[0]);
					//if (!isNaN(this.points[1].y)){
					if(undefined !=this.points[1]){
						html +=  '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
						html +=  '<span style="color:'+self.colors["bar1"]+';">'+(this.points[1].y.toFixed(2)/100)+"</span>";
					}
					//html +=  '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
					//html +=  '<span style="color:#000000;">'+(Highcharts.dateFormat('%H:%M:%S', this.x))+"</span>";
					return "<b><div>"+html+"</div></b>";
				},
				positioner: function () {
					return { x: 78, y: 2 };
					// return { x: chart.chartWidth/2, y: 2 };
				}
			}*/
			tooltip: {
				useHTML: true,
				formatter: function() {
					var _html = "";
					//if(typeof this.points[2] != "undefined"){
						_html = '<div class="uintradaychart_tooltip">' + Highcharts.dateFormat('%Y/%m/%d', this.x) + '</b><b>';
						_html += '<br/><span style="color:'+self.colors["line1"]+'">'+ this.points[0].series.name +'</span> ' + this.points[0].y.toFixed(2) + '';
						_html += '<br/><span style="color:'+self.colors["bar1"]+'">' + this.points[1].series.name + '</span> ' + (this.points[1].y.toFixed(2)/1000); + "</b></div>";
					//}

					if(_html == ""){
						return false;
					}
					return _html;
				}
			},
			rangeSelector : {
				enabled : false,
			},
			/* xAxis:{
				type: 'datetime',
				gridLineWidth: 0,
				tickColor: '#00000000',
				labels: {
					formatter: function () {
						return Highcharts.dateFormat('%d/%m', this.value);
					}            
				}
			}, */
			xAxis:{
				type: 'datetime',
				gridLineWidth: 0,
				tickColor: '#00000000',
				lineColor: '#00000000',
				labels: {
					//enabled: false,
					style: {color: self.colors["grid"]},
					formatter : function() {
						if(self.period == "intraday"){
							return Highcharts.dateFormat('%H:%M', this.value);
						}else{
							return Highcharts.dateFormat('%m/%d', this.value);
						}
					}
				},
				/*tickPositioner: function () {
					if(self.period == "intraday"){
						// tickPositioner for daily 
						var positions = [];
						var msec = 60*60*1000;
						var lastday = 0;
						if(close.length>=1)
						{
							close[close.length-1][0];
						}
						for (i=0;i<close.length;i++){
							var _today = Math.floor(close[i][0]/msec)*msec;
							if (lastday != _today){
								lastday = _today;
								positions.push(close[i][0]);
							}
						}
						return positions;
					}else{
						return this.tickPositions;
					}
				},*/
			},
			yAxis: [{
				title: {
					text: null,
				},
				labels:{
					align:'right',
					x:-10,
					y:5,
					formatter: function () {
						return this.value.toFixed(2);					
					},
					style: {color: "#C6C6C6"},
				},
				offset: 0,
				tickAmount : 5,
				// height: 145,
				height: 168,
				opposite: false,
				showLastLabel: true,

			},
			{
				title: {
					text: null,
				},
				offset: 0,
				// top:215,
				top:240,
				// height: 80,
				height: 94,
				labels:{
					align:'right',
					x:-10,
					y:5,
					formatter: function () {
						return (this.isFirst)?"":(this.value/1000);					
					},
					style: {color: "#C6C6C6"},					
				},
				tickAmount : 4,
				tickPixelInterval:30,
				opposite: false,
			}
			],
			navigator : {
				enabled : false,
			},
			scrollbar : {
				enabled : false
			},
			series : [{
				name : this.labels[lang].legend1,
				data : close,
				type : (self.chartType == "candle" ? "candlestick" : "line"),
				color : this.colors["line1"],
				dataGrouping: {
					enabled: false
				},
			},
			{
				//name : this.labels[lang].legend4,
				name : this.labels[lang].legend2,
				data : turnover,
				type: 'column',
				yAxis: 1,
				color : this.colors["bar1"],
				pointWidth: 6,
				dataGrouping: {
					enabled: false
				},
			}],
			exporting: {
				enabled: false
			}
		};
	},
	redraw: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;
		var offsetx = 60;
		var offsety = 50;
		$("#chartBackground1").remove();
		$("#chartBackground2").remove();
		$("#chartLegend1").remove();
		$("#chartLegend2").remove();
		$("#chartFlag1").remove();
		$("#chartFlag2").remove();		
		
		// chart.renderer.rect(offsetx, offsety, chart.plotWidth, 145, 0).attr({
			// fill: '#F9F9F9',
			// stroke: '#C0C0C0',
			// 'stroke-width': 1,
			// id :'chartBackground1',
		// }).add();
		// chart.renderer.rect(offsetx, offsety+145+20, chart.plotWidth, 80, 0).attr({
			// fill: '#F9F9F9',
			// stroke: '#C0C0C0',
			// 'stroke-width': 1,
			// id :'chartBackground2',
		// }).add();	
		
		offsety = 5;
		chart.renderer.rect(15,offsety+13, 15, 2, 0).attr({
			fill: this.colors["line1"],
			'stroke-width': 0,
			id :'chartFlag1',
		}).add();
		chart.renderer.text(this.labels[lang].legend1, 35, offsety+18).css({
			fontSize: '12px',
			id :'chartLegend1',
		}).add();
		chart.renderer.rect(150,offsety+13, 15, 2, 0).attr({
			fill: this.colors["bar1"],
			'stroke-width': 0,
			id :'chartFlag2',
		}).add();
		chart.renderer.text(this.labels[lang].legend2, 20+150, offsety+18).css({
			fontSize: '12px',
			id :'chartLegend2',
		}).add();
		
		/*chart.renderer.text(this.labels[lang].legend5, 20+300, offsety+18).css({
			fontSize: '12px',
			id :'chartLegend2',
		}).add();*/
		var plotOption_max = {
                color: this.colors["grid"],
                width: 1,
                value: chart.yAxis[0].max,
                zIndex: 1,
            };
		var plotOption_min = {
                color: this.colors["grid"],
                width: 1,
                value: chart.yAxis[0].min,
                zIndex: 1,
            };			
		var plotOption_max1 = {
                color: this.colors["grid2"],
                width: 1,
                value: chart.yAxis[1].max,
                zIndex: 1,
            };
		var plotOption_min1 = {
                color: this.colors["grid2"],
                width: 1,
                value: chart.yAxis[1].min,
                zIndex: 1,
            };		
		chart.yAxis[0].addPlotLine(plotOption_max) ;
		chart.yAxis[0].addPlotLine(plotOption_min) ;
		chart.yAxis[1].addPlotLine(plotOption_max1) ;
		chart.yAxis[1].addPlotLine(plotOption_min1) ;	
		
	},
	drawBackground: function(){
		this.redraw();
	},
	labels : {
		en :{},
		sc :{},
		tc :{
			
				hTitle1 : "權證價格(元)",
				hTitle2 : "流通在外(張)",			
				hTitle3 : "成交值(元)",	
				hTitle4 : "流通在外(%)",				
				legend1 : "標的價格",
				legend2 : "標的成交量(K)",
				legend3 : "成交值(元)",
				legend4 : "流通在外(%)",
				legend5 : "時間: ",				
		},
	},
}