var hstechChart = {
	container : "",
	chart : "",
	view : "",
	day : 100,
	rawdata: null,
	init : function(p1,p2,callback){
		var self = this;
		self.view = $("body").attr("data-broswer-view");
		self.container = (self.container=='')?'#hstechChartContainer':'#'+self.container.replace("#","");
		$.getJSON('/'+lang+'/data/chart/hstechChart/p1/'+p1+'/p2/'+p2+'?_='+Math.random(), function(_data) {
			self.rawdata = $.extend(true, {}, _data.mainData);
			$(".hlegend .date_cur").html(Highcharts.dateFormat('%Y-%m-%d', self.rawdata.hsi[self.rawdata.hsi.length-1][0]));
			$(".hlegend .legend_list .hsi").html(formatPrice(self.rawdata.hsi[self.rawdata.hsi.length-1][1]));
			$(".hlegend .legend_list .hstech").html(formatPrice(self.rawdata.hstech[self.rawdata.hsi.length-1][1]));
			var data = self.decode(_data);
			$(self.container).highcharts('StockChart', self.getJSON(data), function(chart){
				self.chart = chart;
			});
			if (typeof callback == "function"){
				callback(data);
			}
		});
	},
	decode : function(_data){

		var tempData = _data.mainData.hsi;
		var base = tempData[0][1];
		var min = 999999;
		var max = -999999;
		for (var i=0; i<tempData.length;i++){
			tempData[i][1] = ((tempData[i][1]-base)/base)*100;
			min = Math.min(min,tempData[i][1]);
			max = Math.max(max,tempData[i][1]);	
		}
		tempData = _data.mainData.hstech;
		base = tempData[0][1];
		for (var i=0; i<tempData.length;i++){
			tempData[i][1] = ((tempData[i][1]-base)/base)*100;
			min = Math.min(min,tempData[i][1]);
			max = Math.max(max,tempData[i][1]);	
		}
		_data.mainData.min = min;
		_data.mainData.max = max;	
		return _data.mainData;
	},
	getJSON : function(data){
	var hsidata = data.hsi;
	var hstechdata = data.hstech;
	var max = data.max;
	var min = data.min;
	var dp = 0;
	var self = this;
	var fontSize = (self.view == "desktop")?13:12;
	return {
			chart:{
				animation: false,
				marginTop: 10,
				spacing: [0, 0, 0, 0],
				marginRight: (self.view == "desktop")?30:25,
				marginLeft: (self.view == "desktop")?65:60,
				height: (self.view == "desktop")?236:236,
				events: {
					load: function(event) {
						self.redraw();
					},
					redraw: function(event) {
						self.redraw();
					}
				},
			},
            rangeSelector : {
                selected : 1
            },
			plotOptions: {
				series: {
					animation:false,
					dataGrouping: {
						enabled : false
					},
					states: {
						hover: {
							enabled: false
						},
						inactive:{
							opacity:100,
						}
					},	
				},
			},
			xAxis:{
				type: 'datetime',
				gridLineWidth: 0,
				tickColor: '#e6e6e6',
				labels: {
					style:{"color": "#000", "fontSize": "13px"},
					formatter : function() {
						return Highcharts.dateFormat('%d/%m', this.value);
					}          
				},
				opposite: false,
				crosshair: {
					width: 1,
					color: "#000",
					snap:true,
					zIndex: 4, 
					dashStyle: "Dash",
					label: {
						enabled: false,
					}
				},
				showFirstLabel: true,	
			},
			yAxis: [{
					title: {
						text: self.labels()[lang].title1,
						y: -25,
						x: 0,
						rotation: (lang == "en")?90:0,
						offset: (lang == "en")?69:19,
						style:{"fontSize": fontSize+"px"},
					},
					labels:{
						style:{"color": "#000", "fontSize": fontSize+"px"},
						y:5,
						padding: 0,
						formatter: function () {
							return this.value.toFixed(1)+"%";					
						},
					},
					offset:-10,
					opposite: false,
					tickPixelInterval : 40,
					showLastLabel: true,	
					showFirstLabel: false,	
					min:min,
					max:max,
					crosshair: {
						width: 0,
						color: "#000",
						snap:true,
						zIndex: 4, 
						dashStyle: "Dash",
						label: {
							backgroundColor: "#003868",
							enabled: false,
							format: '{value:.2f}%',
							style:{"color": "#fff","fontSize": fontSize+"px"},
						}
					}
				},{
					title: {
						text: self.labels()[lang].title2,
						y:-25,
						rotation: (lang == "en")?90:0,
						offset: (self.view == "desktop")?((lang == "en")?10:-35):((lang == "en")?15:-30),
						style:{"fontSize": fontSize+"px"},
					},
					linkedTo:0,
					labels:{
						enabled:false,
					},
					opposite: true,
					gridLineWidth:0,
					crosshair: {
						enabled: false,
						width: 0,
						color: "#000",
						snap:true,
						zIndex: 4, 
						dashStyle: "Dash",
						label: {
							/*shape: "rect",*/
							backgroundColor: "#00b2ac",
							enabled: false,
							format: '{value:.2f}%',
							style:{"color": "#fff","fontSize": fontSize+"px"},
						}
					}
				}
			],
			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 index = this.points[0].point.index;
					//$(".hlegend .date_cur").html(stime);
					//$(".hlegend .legend_list .hsi").html(formatPrice(self.rawdata.hsi[index][1]));
					//$(".hlegend .legend_list .hstech").html(formatPrice(self.rawdata.hstech[index][1]));
					var html = '<div class="charttooltip"><div class="stime">'+stime+'</div>';
					html +=  '<div class="val1"><span class="name">'+self.labels()[lang].hsi+'</span><span class="value">'+formatPrice(self.rawdata.hsi[index][1])+"</span></div>";
					html +=  '<div class="val2"><span class="name">'+self.labels()[lang].pchange+'</span><span class="value">'+hsi.toFixed(2)+"%</span></div>";
					html +=  '<div class="val3"><span class="name">'+self.labels()[lang].hstech+'</span><span class="value">'+formatPrice(self.rawdata.hstech[index][1])+"</span></div>";
					html +=  '<div class="val4"><span class="name">'+self.labels()[lang].pchange+'</span><span class="value">'+vhsi.toFixed(2)+"%</span></div>";
					html += '</div>';
					
					return html;
				}
			},
			navigator : {
                enabled : false
            },
			scrollbar : {
                enabled : false
            },
            series : [{
				name : 'HSI',
                data : hsidata,
				color: '#003868',
			/*	marker: {
					symbol: "circle",
				},
				lineWidth: 2,*/
            },{
				name : 'HSTECH',
                data : hstechdata,
				color: '#00b2ac',
				yAxis:1,
			/*	marker: {
					symbol: "circle",
				},
				lineWidth: 2,*/
            }
			],
			exporting: {
				enabled: false
			},
			rangeSelector:{
				enabled: false
			}
        };
	},
	redraw: function(){
		var self = this;
		var chart = this.chart;
		
		$(self.container).find(".chartBackgroundLine").remove();
		
		var fontstyle = {color: '#000', fontSize: ((this.view == "mobile"))?'11px':'14px', "font-weight": "bold"};

		chart.renderer.path(['M', chart.margin[3], 0+5 ,'L', chart.margin[3], chart.margin[0]+chart.plotHeight]).attr({
            stroke: '#000',
			'stroke-width': 1,
			opacity: 1,
			class :'chartBackgroundLine',
			zIndex: 2,
        }).add();	
		chart.renderer.path(['M', chart.margin[3], chart.margin[0]+ chart.plotHeight,'L', chart.plotWidth+chart.margin[3], chart.margin[0]+ chart.plotHeight]).attr({
            stroke: '#000',
			'stroke-width': 1,
			opacity: 1,
			class :'chartBackgroundLine',
			zIndex: 2,
        }).add();
	},
	labels : function (){
		return {
			tc :{
				title1 : "指<br/>數<br/>表<br/>現",
				title2 : "指<br/>數<br/>水<br/>平",
				hsi : "恒生指數: ",
				hstech : "恒生科技指數: ",
				pchange : "期內表現: ",
			},
			sc :{
				title1 : "指<br/>数<br/>表<br/>现",
				title2 : "指<br/>数<br/>水<br/>平",
				hsi : "恒生指数: ",
				hstech : "恒生科技指数: ",
				pchange : "期内表现: ",
			},
			en :{
				title1 : "Index performance",
				title2 : "Index level",
				hsi : "HSI: ",
				hstech : "HSTECH: ",
				pchange : "Change: ",
			},
		};
	}
}