var vhsiChart = {
	container : "",
	type : "",
	day : "",
	init : function(day,type,callback){
		var self = this;
		this.type = type;
		this.day = day;
		$.getJSON('/'+lang+'/data/chart/vhsiChart/day/'+day+'?_='+Math.random(), function(_data) {
			var data = self.decode(_data);
			$((self.container=='')?'#vhsiChartContainer':'#'+self.container).highcharts('StockChart', self.getJSON(data), function(chart){
				//******************



				//******************


				//******************
				$((self.container=='')?'#vhsiChartContainer':'#'+self.container).find(".highcharts-container").attr("aria-hidden","true");
				if($((self.container=='')?'#vhsiChartContainer':'#'+self.container).find(".link_table_a").length == 0){
					
					var _text = [];
					if (lang == "tc"){
						_text[0] = "查看圖表恒指波幅指數數據";
						_text[1] = "於表單查看恒指波幅指數數據";
					}else if (lang == "sc"){
						_text[0] = "查看图表恒指波幅指数数据";
						_text[1] = "於表单查看恒指波幅指数数据";					
					}else{
						_text[0] = "View detailed data";
						_text[1] = "View VHSI chart detail from table";	
					}
					$((self.container=='')?'#vhsiChartContainer':'#'+self.container).append('<a href="/'+lang+'/data/text-data/vhsiChart/day/'+day+'" class="link_table_a" >'+_text[1]+'</a>');
				}
				//******************




			});
			if (typeof callback == "function"){
				callback(data);
			}
		});
	},
	decode : function(_data){
		return _data.mainData;
	},
	getJSON : function(data){
	var hsidata = data.hsi;
	var vhsidata = data.vhsi;
	var dp = 0;
	var self = this;
	return {
			chart:{
				marginTop: (this.type == "inner")?10:0,
				spacing: [0, 0, 0, 0],
				marginRight: (this.type == "inner")?80:50,
				marginLeft: (this.type == "inner")?80:50,
			},
			plotOptions: {
				series: {
					events: {
						mouseOver: function() { 
							if (this.name=="HSI"){
								this.graph.attr('stroke', '#005E59');
							}else{
								this.graph.attr('stroke', '#D19012');
							}
						},
						mouseOut: function() {
							if (this.name=="HSI"){
								this.graph.attr('stroke', '#00716C');
							}else{
								this.graph.attr('stroke', '#E9A115');
							}
						}
					}			
				}
			},
            rangeSelector : {
                selected : 1
            },
			xAxis:{
				tickLength:3,
				type: 'datetime',
				labels: {   
					formatter : function() {
						if (self.day >1){
							return Highcharts.dateFormat('%d/%m', this.value);
						}else{
							return Highcharts.dateFormat('%H:%M', this.value);
						}
					}
				},
				lineColor: "#D7D8D6",
				tickColor: "#D7D8D6",
				tickPositioner: function () {
					var positions = [];
					var lastday = 0;
					var msec;
					
					if (self.day > 5){
						msec = 60*60*24*7*1000;
						lastday = 0;
					}else if (self.day == 5){
						msec = 60*60*24*1000;
						lastday = Math.floor(hsidata[0][0]/msec)*msec;
					}else{
						msec = 60*60*2*1000;
						lastday = Math.floor(hsidata[0][0]/msec)*msec;
					}
					for (i=0;i<hsidata.length;i++){
						
						if (self.day > 60){
							if (i%30==(hsidata.length-1)%30){
								positions.push(hsidata[i][0]);
							}							
						}else if (self.day == 60){
							if (i%15==(hsidata.length-1)%15){
								positions.push(hsidata[i][0]);
							}							
						}else if (self.day == 20){
							if (i%5==(hsidata.length-1)%5){
								positions.push(hsidata[i][0]);
							}
						}else{
							var _today = Math.floor(hsidata[i][0]/msec)*msec;
							if (lastday != _today){
								lastday = _today;
								positions.push(hsidata[i][0]);
							}
						}
					}
					return positions;
				},
			},
			yAxis: [{
					title: {
						text: self.labels()[lang].hsi,
						y:(this.type == "inner")?0:-95,
						rotation: (this.type == "inner")?270:0,
						offset: (this.type == "inner")?((lang=="en")?75:75):((lang=="en")?25:36),
					},
					labels:{
						y:5,
						align:'left',
						formatter: function () {
							return addcomma(this.value);					
						},
					},
					offset:-10,
					tickAmount : 6,
					showLastLabel: (this.type == "inner")?true:false,	
					showFirstLabel: false,	
				}, 
				{
					title: {
						text: self.labels()[lang].vhsi,
						y:(this.type == "inner")?0:-95,
						rotation: (this.type == "inner")?270:0,
						offset: (this.type == "inner")?((lang=="en")?65:65):((lang=="en")?25:36),
					},
					labels:{
						y:5,
						padding: 0,
						formatter: function () {
							return this.value.toFixed(1);					
						},
					},
					offset:-10,
					opposite: false,
					tickAmount : 6,
					showLastLabel: (this.type == "inner")?true:false,	
					showFirstLabel: false,	
				}
			],
			tooltip: {
				backgroundColor: 'none',
				borderWidth: 0,
				shadow: false,
				useHTML: true,
				padding: 0,
				formatter: function() {
					var stime;
					if (self.day <=5){
						stime = Highcharts.dateFormat('%Y-%m-%d %H:%M', this.points[0].x);
					}else{
						stime = Highcharts.dateFormat('%Y-%m-%d', this.points[0].x);
					}
					var hsi = this.points[0].y;
					var vhsi = this.points[1].y;
					var html = '<div class="charttooltip"><div class="stime">'+stime+'</div>';
					html +=  '<div class="val1"><span class="name">'+((true)?'<div class="legend" style="background-color:#00716C"></div>':"")+self.labels()[lang].hsi+'</span><span class="value">'+hsi+"</span></div>";
					html +=  '<div class="val2"><span class="name">'+((true)?'<div class="legend" style="background-color:#E9A115"></div>':"")+self.labels()[lang].vhsi+'</span><span class="value">'+vhsi+"</span></div>";
					html += '</div>';
					return html;
				}
			},
			navigator : {
                enabled : false
            },
			scrollbar : {
                enabled : false
            },
            series : [{
				name : 'HSI',
                data : hsidata,
				color: '#00716C',
				marker: {
					symbol: "circle",
				},
				lineWidth: 2,
            },{
				name : 'VHSI',
                data : vhsidata,
				yAxis: 1,
				color: '#E9A115',
				marker: {
					symbol: "circle",
				},
				lineWidth: 2,
            }
			],
			exporting: {
				enabled: false
			},
			rangeSelector:{
				enabled: false
			}
        };
	},
	labels : function (){
		return {
			tc :{
				hsi : "恒生指數",
				vhsi : "波幅指數",
			},
			sc :{
				hsi : "恒生指数",
				vhsi : "波幅指数",
			},
			en :{
				hsi : "HSI",
				vhsi : "VHSI",
			},
		};
	}
}