var cnIndexCompareChart = {
	chart : null,
	container : "",
	colors : {CSI300 : "#b9bc00", MSCI : "#b080ff"},
	options : {
		groupingUnits: [['day',[1]],], 
	},
	period:5,
	init : function(period){
		var self = this;
		$.getJSON('/?q=/'+lang+'/data/chart/cnIndexCompareChart/period/'+period, function(_data) {
			var _periodArray = period.split("_");
		 	self.period = _periodArray[0];
		 	if(_periodArray[1]!="day"){
		 		self.period = _periodArray[0]*30;
		 	}
			$("#compare_bar_chart_stime").html(_data.stime);
			var data = _data.mainData;
			$('#cnIndexCompareChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
				self.chart = chart;
				self.drawBackground();
			});
		});
	},	
	getJSON : function(data){
		var self = this;
		var _height = 300;
		var _fontSize = 10;
		var _marginTop = 10;
		var _lineWidth = 2;

		return {
			chart : {
				panning: false,
				height: _height,
				marginTop: _marginTop,
			},
			plotOptions: {
				series: {
					states: {
						hover: {
							enabled: false,
						},
					},
					lineWidth: _lineWidth,
					turboThreshold:0,
					dataGrouping: {
					  forced: true,
					  units: [
						['day', [1]]
					  ]
					}
				}
			},
			tooltip: {
				useHTML: true,
				crosshairs: [{
					width: 1,
					color: "#C0C0C0",
				}],
				formatter: function() {
					var _html = '<div class="tooltip">';
					var key = '';
					if(self.period==1){
						_html += Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x);
						key = Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x);
					}else{
						_html += Highcharts.dateFormat('%Y-%m-%d', this.x);
						key= Highcharts.dateFormat('%Y-%m-%d', this.x);
					}
					
					_html += self.tooltipFormat(self.labels()[lang].CSI300, data.sdate[key]['CSI300']["last"], '');
					_html += self.tooltipFormat(self.labels()[lang].performance, data.sdate[key]['CSI300']["y"], '%');
					_html += self.tooltipFormat(self.labels()[lang].MSCI, data.sdate[key]['MSCI']["last"], '');
					_html += self.tooltipFormat(self.labels()[lang].performance,  data.sdate[key]['MSCI']["y"], '%');		
					// this.points.forEach(function(point) {
// 						console.log(point.point);
// 						if(point.series.name=="CSI300"){
// 							_html += self.tooltipFormat(self.labels()[lang].CSI300,formatPrice(point.point.last),'');
// 							_html += self.tooltipFormat(self.labels()[lang].performance,point.y,'%');
// 						}else if(point.series.name=="MSCI"){
// 							_html += self.tooltipFormat(self.labels()[lang].MSCI,formatPrice(point.point.last),'');
// 							_html += self.tooltipFormat(self.labels()[lang].performance,point.y,'%');
// 						}
// 					});
					return _html;
				}
			},
			rangeSelector : {
				inputEnabled:false,
				enabled: false
			},
			xAxis:[
			{
				type: 'datetime',
				gridLineWidth: 0,
				lineWidth: 0,
				tickColor: '#00000000',
				tickWidth: 2,
				tickPositioner: function () {
					var positions = [];
					
					var tickPositions = this.series[0].processedXData;
					var tickInterval = 1;

					if(self.period==1){

						if(tickPositions.length>15){
							for (var i=0;i<tickPositions.length;i+=tickInterval){
								var tick = tickPositions[i]; 

								if(Highcharts.dateFormat('%H:%M', tick) == "09:30"||
									Highcharts.dateFormat('%H:%M', tick) == "10:00"||
									Highcharts.dateFormat('%H:%M', tick) == "11:00"||
									Highcharts.dateFormat('%H:%M', tick) == "13:00"||
									Highcharts.dateFormat('%H:%M', tick) == "14:00"||
									Highcharts.dateFormat('%H:%M', tick) == "15:00"||
									Highcharts.dateFormat('%H:%M', tick) == "16:00")
								{
									positions.push(tick);
								}
							}
							return positions;
						}
						

					}else{
						if(self.period==5){
							tickInterval=1;
						}else if(self.period==12*30*3){
							tickInterval=Math.ceil(tickPositions.length/3);
						}else{
							tickInterval=Math.ceil(tickPositions.length/5);
						}
						
						for (var i=0;i<tickPositions.length;i+=tickInterval){
							var tick = tickPositions[i]; 
							positions.push(tick);
						}
						return positions;
					}
					
					

				},
				labels: { 
					formatter: function () {
						if(self.period==1){
							return Highcharts.dateFormat('%H:%M', this.value); 
						}else if(self.period>12*30){
							if(lang=="en_hk"||lang=="en-hk"){
								return Highcharts.dateFormat('%Y', this.value); 
							}else{
								return Highcharts.dateFormat('%y年', this.value); 
							}
							
						}else{
							if(Highcharts.dateFormat('%m', this.value)*1==1 && Highcharts.dateFormat('%d', this.value)*1<=5){
								if(lang=="en_hk"||lang=="en-hk"){
									return Highcharts.dateFormat('%Y', this.value); 
								}else{
									return Highcharts.dateFormat('%y年', this.value); 
								}
							}else{
								return Highcharts.dateFormat('%d/%m', this.value); 
							}
						}
					},
					style:{
						fontSize: _fontSize+"px",
					}
				},
			},
			],
			yAxis: [
			{
				labels:{
					align:'right',
					x: -5,
					y: 5,
					formatter: function () {
						value = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")+'%';
						return value;
					},
					style:{
						fontSize: _fontSize+"px",
					} 
				},
				opposite: false,
				showLastLabel: true,
				showFirstLabel: true,
			},
			],
			navigator : {
				enabled : false,
			},
			scrollbar : {
				enabled : false
			},
			series : [{
				name: 'CSI300',
				type: 'line',				
				data : data.CSI300,
				yAxis: 0,
				color: this.colors["CSI300"],
			},{
				name: 'MSCI',
				type: 'line',				
				data : data.MSCI,
				yAxis: 0,
				color: this.colors["MSCI"],
			}
			],
			exporting: {
				enabled: false
			}
		};
	},
	redraw: function(){
		// var chart = this.chart;
		// var offsetx,offsety;
		// var self = this;

		// var offsetx = 0;
		// var offsety = 15;

	},
	drawBackground: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;
		this.redraw();
	},
	tooltipFormat: function(title, value, unit){
		var html = '<br/><b><span style="color:#000000;">'+title+':</span> '+value;
		html +=  (unit!="")?unit:"";
		html += "</b>"
		return html;
	},
	labels : function (){
		var _out = {
			zh_hk :{
				CSI300 : '滬深300指數',
				MSCI : 'MSCI中國A50互聯互通指數',
				performance : '期內表現',
			},
			zh_cn :{
				CSI300 : '滬深300指數',
				MSCI : 'MSCI中國A50互聯互通指數',
				performance : '期內表現',
			},
			en_hk :{
				CSI300 : 'CSI 300',
				MSCI : 'MSCI',
				performance : 'Price Change',
			},
		};
		_out["edu"] = _out["zh_cn"];
		_out["zh-hk"] = _out["zh_hk"];
		_out["zh-cn"] = _out["zh_cn"];
		_out["en-hk"] = _out["en_hk"];
		_out["edu-zh_hk"] = _out["zh_hk"];
		_out["edu-zh_cn"] = _out["zh_cn"];
		_out["edu-en_hk"] = _out["en_hk"];
		return _out;
	}
}