Highcharts.setOptions({lang :{
	rangeSelectorZoom : ""
	/*rangeSelectorFrom : "",
	rangeSelectorTo : "",*/
}});
var marketMFlowChart = {
	chart : null,
	type : "",
	fromdate : null,
	todate : null,
	mode : "desktop",
	container : "",
	lineWidth: 2,
	init : function(){
		var days = $("#days").val();
		var types = $("input[name=type]:checked").val();
		var self = this;
		self.labels["edu"] = self.labels["zh_cn"];
		self.labels["edu-zh_hk"] = self.labels["zh_hk"];		
		self.labels["edu-en_hk"] = self.labels["en_hk"];		
		self.labels["edu-zh_cn"] = self.labels["zh_cn"];
		self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";
		//console.log('/?q=/'+lang+'/data/chart/marketMFlowChart/code/'+ucode+'/days/'+days+'/type/'+types);
		$.getJSON('/?q=/'+lang+'/data/chart/marketMFlowChart/code/'+ucode+'/days/'+days+'/type/'+types, function(_data) {
			var data = self.decode(_data);

			$('#marketMFlowChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
				self.chart = chart;
				self.drawBackground();
			});
		});
	},
	decode : function(_data){
		return _data.mainData;
	},
	colors : {line1 : "#000", bar1 : "#1b435b", bar2 : "#8b460e"},
	margin : {mobile: 40, desktop: 100},
	chartheight : {mobile: 218, desktop: 280},	
	getJSON : function(data){
		var self = this;	
		var diff = [];
		var last = [];
		var udate = [];
		var tts = [];
		var linechart_max = 0;
		var barchart_max = 0;
		for (i = 0; i < data.length; i++) {
			if(data[i]["last"]*1>linechart_max){
				linechart_max = data[i]["last"]*1;
			}
			if(data[i]["diff"]*1>barchart_max){
				barchart_max = data[i]["diff"]*1;
			}
			diff.push([data[i]["tts"], data[i]["diff"]*1]);
			last.push([data[i]["tts"], data[i]["last"]*1]);
			tts.push(data[i]["tts"]);
		}

		var self = this;
		return {
			chart : {
             	//marginLeft: self.margin[self.mode],
             	marginRight: self.margin[self.mode],
             	marginBottom: 30,
             	marginTop: 50,
             	spacingTop: -5,
             	height: 270,
             	events: {
             		redraw: function(event) {
             			self.redraw();
             		}
             	}
             },
             plotOptions: {
             	series: {
             		grouping: false
             	},
             	column: {
             		stacking: 'normal',
             	}
             },
             tooltip: {
             	useHTML: true,
             	shared: true,
             	crosshairs: [{
             		width: 1,
             		color: "#C0C0C0",
             	}],
             	formatter: function() {
             		var index = this.points[0].point.index;
					var _html = '<div class="tooltip">' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b>';	
					if(this.points[1]){
						_html += '<br/><b><span style="color:#000000;">'+self.labels[lang].line1Title+':</span> ' + addcomma(this.points[1].y)+ '';
					}
					if(this.points[0]){
						_html += '<br/><b><span style="color:#000000;">'+self.labels[lang].bar1Title+':</span> ' + this.points[0].y+ '';	
					}
					return _html;
				}
			},
			rangeSelector : {
				inputEnabled:false,
				enabled: false
			},
			xAxis:[
			{
				type: 'datetime', 
				labels: { 
					formatter: function () { 
						return Highcharts.dateFormat('%d/%m', this.value); 
					} 
				},
			}
			],
			yAxis: [
			{
				max: barchart_max,
				title: {
					text: '',		
					rotation: 0,
				},
				labels:{
					align:'right',
					x: 0,
					y: 5,
					formatter: function () {
						value = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
						color ="";
						if(value>0){
							color = "#1b435b";
						}else if(value<0){
							color = "#8b460e";
						}
						return '<span style="color:'+color+'">'+value+'</span>';
					} 
				},
				top:40,
				height: 200,
				opposite: false,
				showLastLabel: true,
				showFirstLabel: false,
			},
			{
				max: linechart_max,
				title: {
					text: '',	
					rotation: 0,
				},
				labels:{
					align:'left',
					x: 0,
					y: 5,				
					formatter: function () {
						return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					}   
				},
				top:40,
				height: 200,
				opposite: true,
				showLastLabel: true,
				showFirstLabel: false,
			}			
			],
			navigator : {
				enabled : false,
			},
			scrollbar : {
				enabled : false
			},
			series : [
			{
				name : this.labels[lang].bar1Title,
				data : diff,
				color : this.colors["bar1"],
				negativeColor: this.colors["bar2"],
				yAxis: 0,
				type: 'column'
			},
			{
				name : this.labels[lang].line1Title,
				data : last,
				color : this.colors["line1"],
				lineWidth: this.lineWidth, 
				yAxis: 1
			}
			],
			exporting: {
				enabled: false
			}
		};
	},
	redraw: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;

		var offsetx = 0;
		var offsety = 10;
		if(lang=="en_hk"){
			this.addText(chart.plotWidth-70,offsety,this.labels[lang].line1Title,1);		
			this.addText(offsetx-30, offsety + 0,this.labels[lang].bar1Title,5);		
		}else{
			this.addText(chart.plotWidth-35,offsety,this.labels[lang].line1Title,1);		
			this.addText(offsetx-30, offsety + 0,this.labels[lang].bar1Title,5);		
		}
	},
	addText: function(x,y,text,i, color){
		var chart = this.chart;
		$("#drawLegendRect"+i).remove();
		$("#drawLegendText"+i).remove();
			
		/*chart.renderer.rect(x, y, 25,8, 0).attr({
				fill: color,
				'stroke-width': 0,
				id : 'drawLegendRect'+i,
				zIndex: 5,
			}).add();*/
			
		chart.renderer.label(text, x+30, y-8, '', '' + '', '' + '')
			.css({
				color: color,
				fontSize:'15px'
			})
			.attr({           
				zIndex: 5,
				id: 'drawLegendText'+i,
			})
			.add();
	},
	drawBackground: function(){
		var chart = this.chart;
		var offsetx,offsety;
		var self = this;
		this.redraw();
	},
	labels : {
		zh_hk :{
			line1Title : "歷史股價",
			bar1Title : "資金流向(百萬)"
		},
		zh_cn :{
			line1Title : "历史股价",
			bar1Title : "资金流向(百万)"
		},
		en_hk :{
			line1Title : "Historical Price",
			bar1Title : "Money Flow(Millions)"
		},
	}
}