var securityLPChart = {
	container : "",
	chart : "",
	view : "",
	mode : "",
	day : 100,
	rawdata: null,
	init : function(code,mode,callback){
		var self = this;
		self.mode = mode;
		self.view = $("body").attr("data-broswer-view");
		//code = "53927";
		self.container = (self.container=='')?'#securityLPChartContainer':'#'+self.container.replace("#","");
		if(mode == "popup"){
			var data = self.decode(self.rawdata);
			$(self.container).highcharts('StockChart', self.getJSON(data), function(chart){
				self.chart = chart;
			});
		}else{
			$.getJSON('/'+lang+'/data/chart/securityLPChart/code/'+code+'?_='+Math.random(), function(_data) {
				self.rawdata = $.extend(true, {}, _data);
				/*$(".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;
		/*var base = tempData[0][1];
		var min = 999999;
		var max = -999999;*/
		var avg = [];
		var market = [];
		var categories = [];
		/*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]);	
			//console.log(_data);
			//avg[i] = [];
			//avg[i][0] = Highcharts.dateFormat('%d/%m', tempData[i].ts*1000); //Math.floor(tempData[i].ts/(24*3600))*24*3600*1000;
			avg[i] = tempData[i].tick*1;
			//market[i] = [];
			//market[i][0] = Highcharts.dateFormat('%d/%m', tempData[i].ts*1000); //Math.floor(tempData[i].ts/(24*3600))*24*3600*1000;
			market[i] = tempData[i].mkt_tick*1;		
			categories[i] = Highcharts.dateFormat('%d/%m', tempData[i].ts*1000); //Math.floor(tempData[i].ts/(24*3600))*24*3600*1000;
		}
		/*_data.mainData.min = min;
		_data.mainData.max = max;*/	
		_data.mainData.avg = avg;
		_data.mainData.market = market;	
		_data.mainData.categories = categories;	
		return _data.mainData;
	},
	getJSON : function(data){
	var avg = data.avg;
	var market = data.market;
	/*var max = data.max;
	var min = data.min;*/
	var dp = 0;
	var self = this;
	//var fontSize = (self.view == "desktop")?13:12;
	var fontSize = 11;
	return {
			chart:{
				animation: false,
				marginTop: 10,
				spacing: [0, 0, 0, 0],
				//marginRight: (self.mode == "popup")?35:15,
				marginRight: 0,
				//marginLeft: (self.view == "desktop")?75:70,
				marginLeft: (lang == "en")?62:53,
				height: (self.mode == "popup")?200:160,
				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,
						}
					},
					marker: {
						enabled: (avg.length==1)?true:false,
						radius: 5,
						symbol: "circle"
					}
				},
			},
			xAxis:{
				//type: 'category',
				gridLineWidth: 0,
				tickColor: '#e6e6e6',
				labels: {
					style:{"color": "#000", "fontSize": "13px"},
					formatter : function() {
						//return Highcharts.dateFormat('%d/%m', this.value);
						return data.categories[this.value];
					}          
				},
				opposite: false,
				crosshair: {
					width: (self.mode=="popup")?1:0,
					color: "#000",
					snap:true,
					zIndex: 4, 
					dashStyle: "Dash",
					label: {
						enabled: false,
					}
				},
				showFirstLabel: true,	
				minRange:4,
			},
			yAxis: [{
					title: {
						text: self.labels()[lang].title1,
						y: (lang == "en")?-5:-60,
						x: (lang == "en")?0:2,
						rotation: (lang == "en")?90:0,
						offset: (lang == "en")?40:-70,
						style:{"fontSize": fontSize+"px"},
					},
					labels:{
						style:{"color": "#000", "fontSize": fontSize+"px"},
						y:5,
						padding: 0,
						formatter: function () {
							if (this.value*1 == (this.value*1).toFixed(2)*1){
								return (this.value*1).toFixed(2);	
							}
							return this.value;					
						},
					},
					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"},
						}
					}
				}
			],
			tooltip: {
				backgroundColor: 'none',
				borderWidth: 0,
				shadow: false,
				useHTML: true,
				enabled: (self.mode=="popup")?true:false,
				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 avg = this.points[0].y.toFixed(2);
					var market = this.points[1].y.toFixed(2);
					//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">'+data.categories[this.points[0].x]+'</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].avg+'</span><span class="value">'+avg+"</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].market+'</span><span class="value">'+market+"</span></div>";
					html += '</div>';
					
					return html;
				}
			},
			navigator : {
                enabled : false
            },
			scrollbar : {
                enabled : false
            },
            series : [{
				name : 'Avg',
                data : avg,
				color: '#003868',
				
            },{
				name : 'Market',
                data : market,
				color: '#00b2ac',
            }
			],
			exporting: {
				enabled: false
			},
			rangeSelector:{
				enabled: false
			},
        };
	},
	/*setPeriod : function(_from,_to){		
		if (this.data.last[0]){
			this.chart.xAxis[0].setExtremes(Math.max(_from,this.data.last[0][0]), _to);
		}
	}*/
	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/>賣<br/>差<br/>價<br/>︵<br/>格<br/>數<br/>︶",
				avg : "平均買賣差價: ",
				market : "市場平均: ",
			},
			sc :{
				title1 : "平<br/>均<br/>买<br/>卖<br/>差<br/>价<br/>︵<br/>格<br/>数<br/>︶",
				avg : "平均买卖差价: ",
				market : "市场平均: ",
			},
			en :{
				title1 : "Average quote spread<br>(tick)",
				avg : "Average quote spread: ",
				market : "Market average: ",
			},
		};
	}
}