var etfChart = {
	container : "",
	chart:null,
	view: "",
	status: 15,
	type: "ashare",
	lastupdated: "",
	etf: [2823,2822,3188],
	init : function(start,end,status,callback){
		var self = this;
		this.status = status;
		this.view = $("body").attr("data-broswer-view");
		if (self.type == "hstech"){
			self.etf = [3032,3033,3067,3088,"hstech"];
		}
		$.getJSON('/'+lang+'/data/chart/etfChart?type='+self.type+'&sdate='+((start)?start:"")+"&edate="+((end)?end:""), function(_data) {
			var data = self.decode(_data);
			self.container = (self.container=='')?'#etfChartContainer':'#'+self.container.replace("#","");
			$(self.container).highcharts('StockChart', self.getJSON(data), function(chart){
				self.chart = chart;
				for(var i=0;i<4;i++){
					chart.series[i].setVisible((status>>i)%2);
				}
				if (callback!==undefined){
					callback(data,status,self.lastupdated);
				}
			});
		});
	},
	decode : function(data){
		var last;
		var self = this;
		var _data = {
			etf1:[],
			etf2:[],
			etf3:[],
			etf4:[],
			etf5:[],
			min:null,
			max:null,
		}
		var min = 999999;
		var max = -999999;
		if (data["stime"]){
			self.lastupdated = data["stime"];
		}
		
		for (var k=0; k<self.etf.length;k++){
			var etf = [];
			var etf_code = self.etf[k]+"";
			last = data[etf_code][data[etf_code].length-1].last*1;
			for (i = 0; i < data[etf_code].length; i++) {
				var percent = (data[etf_code][i].last)?round((data[etf_code][i].last*1-last)*100/last,2)*1:null;
				etf.push({
					x:data[etf_code][i].ts,
					y:percent,
				});
				min = isNaN(percent)?min:Math.min(min,percent);
				max = isNaN(percent)?max:Math.max(max,percent);
			}
			etf = etf.reverse();
			_data["etf"+(k+1)] = etf;
		}
		_data.min = min;
		_data.max = max;
		
		return _data;
	},
	redraw: function(){
		var self = this;
		var chart = this.chart;
		
		$(self.container).find(".chartBackgroundLine").remove();
		$(self.container).find(".chartLegend").remove();
		//var chart = (chart2)?chart2:this.chart;
		
		var fontstyle = {color: '#000', fontSize: ((this.view == "mobile"))?'11px':'14px', "font-weight": "bold"};

		chart.renderer.path(['M', chart.margin[3]+chart.plotWidth, 0+5 ,'L', chart.margin[3]+chart.plotWidth, 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();
		
	},
	redrawLabel : function(points){
		var self = this;
		var chart = this.chart;
		var px = [];
		$(self.container).find(".yAxisLabel").remove();
		for (var i=0;i<points.length;i++){
			px[i] = chart.yAxis[i].toPixels(points[i].y);
		}
		var labelzIndex = 10;
		var offset = 0;
		var labelWidth = (this.view == "mobile")?45:60;
		var labelHeight = (this.view == "mobile")?20:30;
		var shift = (this.view == "mobile")?5:7;
		for (var i=0;i<px.length;i+=2){
			var fontstyle = {color: '#fff', fontSize: ((this.view == "mobile"))?'11px':'14px', "font-weight": "bold"};
			offset *=-1;
			if (px[i+2] && Math.abs(px[i+2]-px[i])<labelHeight){
				offset = labelHeight/2;
				if (px[i+2]-px[i]>0){
					offset*=-1;
				}
			}
			
			chart.renderer.rect(chart.margin[3]-labelWidth, px[i]-(labelHeight/2)+offset, labelWidth, labelHeight).attr({
				class :'yAxisLabel',
				'stroke-width': 0,
				fill: points[i].color,
				zIndex: labelzIndex++
			}).add();
			chart.renderer.text(points[i].y+"%", chart.margin[3]-labelWidth+shift,px[i] + shift +offset).css(fontstyle).attr({
				class :'yAxisLabel',
				zIndex: labelzIndex++,
			}).add();
		}
		var offset = 0;
		for (var i=1;i<px.length;i+=2){
			var fontstyle = {color: '#fff', fontSize: ((this.view == "mobile"))?'11px':'14px', "font-weight": "bold"};
			offset *=-1;
			if (px[i+2] && Math.abs(px[i+2]-px[i])<labelHeight){
				offset = labelHeight/2;
				if (px[i+2]-px[i]>0){
					offset*=-1;
				}
			}
			chart.renderer.rect(chart.margin[3] + chart.plotWidth, px[i]-(labelHeight/2)+offset, labelWidth, labelHeight).attr({
				class :'yAxisLabel',
				'stroke-width': 0,
				fill: points[i].color,
				zIndex: labelzIndex++
			}).add();
			chart.renderer.text(points[i].y+"%", chart.margin[3] + chart.plotWidth+shift, px[i]+shift+offset).css(fontstyle).attr({
				class :'yAxisLabel',
				zIndex: labelzIndex++,
			}).add();
		}		
	},
	options : {
		chartHeight : 294,
		marginLeft : 70,
		marginRight : 70,
		marginTop : 20,
		chart1Height : 235,
		/*chart2Height : 90,*/
	},
	getJSON : function(_data){
		var dp = 0;
		var etf1 = _data.etf1;
		var etf2 = _data.etf2;
		var etf3 = _data.etf3;
		var etf4 = _data.etf4;
		var min = _data.min;
		var max = _data.max;
		//var fdata = _data.furtherData;
		var groupingUnits = [['minute',[5]], ['hour',[1]]];

		var self = this;
		var fontSize = (self.view == "desktop")?13:11;
		/*if (self.view == "pad"){
			this.options.marginLeft = 30;
			this.options.marginRight = 50;
			this.options.chart1Height = 180;
			this.options.chart2Height = 100;
			this.options.chartHeight = 350;
		}else */if (self.view == "mobile"){
			this.options.marginLeft = 50;
			this.options.marginRight = 50;
			this.options.chart1Height = 155;
			this.options.chartHeight = 214;
		}else{
			this.options.marginLeft = 70;
			this.options.marginRight = 70;
			this.options.chart1Height = 235;
			this.options.chartHeight = 294;
		}
		return {
				chart:{
					marginLeft: this.options.marginLeft,
					marginRight: this.options.marginRight,
					marginTop: this.options.marginTop,
					animation: false,
					height: this.options.chartHeight,
					events: {
						load: function(event) {
							self.redraw();
							//self.refreshSeries();
						},
						redraw: function(event) {
							self.redraw();
							//self.refreshSeries();
						}
					},
				},
				tooltip:{
					enabled: true,
					shadow: false,
					borderWidth: 0,
					positioner: function () {
						return { x: 0, y: -100 };
					},
					formatter: function () {
						if (typeof self.redrawLabel == "function"){
							self.redrawLabel(this.points);
						}
						return "";
					},
				},
				rangeSelector: {
					enabled: false,
					selected: 1
				},
				plotOptions: {
					line:{
						lineWidth: 2,
						color: '#00716C',
					},
					series: {
						animation:false,
						dataGrouping: {
							enabled : false
						},
						states: {
							hover: {
								enabled: false
							},
							inactive:{
								opacity:100,
							}
                        },	
						point:{
							events:{
								mouseOut:function(){
									console.log("mouseout");
									$(self.container).find(".yAxisLabel").remove();
								}
							}
						}
					},
				},
				xAxis: {
					type: 'datetime',
					gridLineWidth: 0,
					tickColor: '#e6e6e6',
					labels: {
						style:{"color": "#000", "fontSize": "13px"},
						formatter : function() {
							return Highcharts.dateFormat('%d/%m', this.value);
						}          
					},
					opposite: false,
					tickPositions: this.tickPositions,
					crosshair: {
						width: 1,
						color: "#000",
						snap:true,
						zIndex: 4, 
						dashStyle: "Dash",
						label: {
							enabled: false,
						}
					},
					showFirstLabel: true,	
				},
				yAxis: [{
					labels:{
						style:{"color": "#000", "fontSize": fontSize+"px"},
						align:'left',
						x:5,
						y:5,
						formatter: function () {
							return this.value.toFixed(1)+"%";					
						}  
					},
					opposite: true,
					height: this.options.chart1Height,
					showFirstLabel: false,
					showLastLabel: true,
					tickPixelInterval: 50,
					min:min,
					max:max,
					crosshair: {
						width: 1,
						color: "#000",
						snap:true,
						zIndex: 4, 
						dashStyle: "Dash",
						/*label: {
							backgroundColor: "#005b66",
							enabled: true,
							format: '{value:.2f}%',
							style:{"color": "#fff","fontSize": fontSize+"px"},
						}*/
					}
				},{
					linkedTo:0,
					labels:{
						enabled:false,
					},
					opposite: false,
					gridLineWidth:0,
					crosshair: {
						width: 1,
						color: "#000",
						snap:true,
						zIndex: 4, 
						dashStyle: "Dash",
						/*label: {
							backgroundColor: "#00b2ac",
							enabled: true,
							format: '{value:.2f}%',
							style:{"color": "#fff","fontSize": fontSize+"px"},
						}*/
					}
				},{
					linkedTo:0,
					labels:{
						enabled:false,
					},
					gridLineWidth:0,
					crosshair: {
						width: 1,
						color: "#000",
						snap:true,
						zIndex: 4, 
						dashStyle: "Dash",
						/*label: {
							backgroundColor: "#0072ce",
							enabled: true,
							format: '{value:.2f}%',
							style:{"color": "#fff"},
						}*/
					}
				},{
					linkedTo:0,
					labels:{
						enabled:false,
					},
					opposite: false,
					gridLineWidth:0,
					crosshair: {
						width: 1,
						color: "#000",
						snap:true,
						zIndex: 4, 
						dashStyle: "Dash",
						/*label: {
							backgroundColor: "#da0c6f",
							enabled: true,
							format: '{value:.2f}%',
							style:{"color": "#fff"},
						}*/
					}
				}],
				navigator : {
					enabled : false
				},
				scrollbar : {
					enabled : false
				},
				series : [{
					name : "etf1",
					data : etf1,
					tooltip: {
						valueDecimals: dp
					},
					dataGrouping:  {
						approximation: "etf1",
						enabled: true,
						forced: true,
						units: groupingUnits,
						groupPixelWidth: 10
					},
					lineWidth: 2,
					color: '#005b66',
					yAxis:0,
				},{
					name : "etf2",
					data : etf2,
					tooltip: {
						valueDecimals: dp
					},
					dataGrouping:  {
						approximation: "etf2",
						enabled: true,
						forced: true,
						units: groupingUnits,
						groupPixelWidth: 10
					},
					lineWidth: 2,
					color: '#00b2ac',
					yAxis:1,
				},{
					name : "etf3",
					data : etf3,
					tooltip: {
						valueDecimals: dp
					},
					dataGrouping:  {
						approximation: "etf3",
						enabled: true,
						forced: true,
						units: groupingUnits,
						groupPixelWidth: 10
					},
					lineWidth: 2,
					color: '#0072ce',
					yAxis:2,
				},{
					name : "etf4",
					data : etf4,
					tooltip: {
						valueDecimals: dp
					},
					dataGrouping:  {
						approximation: "etf4",
						enabled: true,
						forced: true,
						units: groupingUnits,
						groupPixelWidth: 10
					},
					lineWidth: 2,
					color: '#da0c6f',
					yAxis:3,
				}/*,{
					id: 'turnover',
					type: 'column',
					data: turnover,
					visible: true,
					yAxis: 1,
					dataGrouping:  {
						approximation: "sum",
						enabled: true,
						forced: true,
						units: groupingUnits,
						groupPixelWidth: 10
					},
					lineWidth: 2,
					color: '#005b66',
					states: {
						hover: {
							color: '#D19012',
						}
					}
				}*/],
				exporting: {
					enabled: false
				},
			};
	},
	refreshSeries : function(){
		var chart = this.chart;
		var _series = [];
		for (var i=0;i<this.chart.series.length;i++){
			//_series.push(this.chart.series[i].points[this.chart.series[i].points.length-1]);
			if (!chart.series[i].points){
				continue;
			}
			var selectedIndex = chart.series[i].points.length-1;
			if(chart.series[i].points && chart.series[i].points[selectedIndex]) {
				_series.push(chart.series[i].points[selectedIndex]);
			}
		}
		//this.chart.tooltip.refresh(_series); 		
		if (_series.length>0){
			chart.tooltip.refresh(_series); 	
		}
	},
	labels : function (){
		return {
			tc :{
				title : {
				}
			},
			sc :{
				title : {
				}
			},
			en :{
				title : {
				}
			},
		}
	},
}