var productIntradayChart = {
	code : "",
	period : "",
	period_tab: "",
	container : "",
	isMobile: $('.m-only').is(':visible'),
	chart : null,
	init : function(code, period, callback){
		var self = this;
		if (code != ""){
			self.code = code;
		}
		if(period == "") {
			period = '1d';
		}
		self.period_tab = period;
		
		if(self.period_tab == '1d') {
			self.period = 'hour';
		} else if(self.period_tab == '5d') {
			self.period = 'day';
		} else if(self.period_tab == '1m') {
			self.period = 'week';
		} else if(self.period_tab == '6m' || self.period_tab == 'ytd' || self.period_tab == '1y') {
			self.period = 'month';
		} else if(self.period_tab == '5y') {
			self.period = 'year';
		}
		//self.period = period;
		$.getJSON('/'+lang+'/data/chart/productIntradayChart?code='+self.code+"&period="+self.period_tab, function(_data) {
			var data = self.decode(_data);
			$((self.container=='')?'#productIntradayChartContainer':'#'+self.container).highcharts('StockChart', self.getJSON(data), function(chart){
				self.chart = chart;
				self.drawBackground();
				if (callback!==undefined){
					callback(chart,data);
				}
			});
		});
	},
	decode : function(_data){
		return _data;
	},
	colors :{line: "#082A4D", bar: "#F4842A", label: "#84888B", gridline: "#999999", yTooltip: "#F28528", xTooltip: "#606060", lastc: "#F48528", black: "#000000", grey: "#8e8e8e"},
	getJSON : function(_data){
		var dp = 0;
		var close = [];
		var turnover = [];
		var pchng = [];
		var data = _data.mainData;
		var fdata = _data.furtherData;
		var min_last = fdata.lastc*1;
		var max_last = fdata.lastc*1;
		var groupingUnits = [['minute',[5]], ['hour',[1]]];
		if(data) {
			for (i = 0; i < data.length; i++) {
				if (data[i][1] == null)
					data[i][2] = null;
				
				if (min_last == 0 && data[i][1]*1 > 0)
					min_last = data[i][1];
				
				if (data[i][1]*1 > 0) {
					min_last = Math.min(min_last, data[i][1]);
					
					/*close.push([data[i][0], data[i][1]]);
					turnover.push([data[i][0], data[i][2]]);
					pchng.push(data[i][3]);*/
				}
				
				close.push([data[i][0], data[i][1]]);
				turnover.push([data[i][0], data[i][2]]);
				pchng.push(data[i][3]);
					
				max_last = Math.max(max_last, data[i][1]);
			}		
		}
		
		if (min_last == max_last)
			min_last = 0;
		
		var self = this;
		return {
			chart:{
				//spacing: [0, 0, 0, 0],
				//marginLeft: 55,
				marginLeft: 0,
				//marginRight: 55,
				marginRight: 43,
				marginTop: 0,
				marginBottom: 22,
			},
			tooltip: {
				backgroundColor: "none",
				borderWidth: 0,
				shadow: false,
				useHTML: true,
				shape: "square",
				padding: 0,
				formatter: function() {
					var yval = (this.points[0].y >= 1000)? addcomma(this.points[0].y):this.points[0].y.toFixed(3);
					var ypos = this.points[0].point.plotY;
					
					var yval2 = this.points[1].y;
					var ypos2 = this.points[1].point.plotY;
					
					var xval = this.points[0].x;
					var xpos = this.points[0].point.plotX;
					
					var index = this.points[0].point.index;
					
					var arr = new Array();
					arr['x'] = new Array(xval, xpos);
					arr['y1'] = new Array(yval, ypos);
					arr['y2'] = new Array(yval2, ypos2);
					//arr['pchng'] = data[index][3];
					arr['pchng'] = pchng[index];
					
					//console.log(data);
					
					self.drawTooltip(arr);
				}
				
			},
			rangeSelector: {
				enabled: false,
				buttons: [{
					type: 'day',
					count: 1,
					text: 'intraday'
				}, {
					type: 'week',
					count: 1,
					text: '1week'
				}, {
					type: 'all',
					text: 'All'
				}],
				selected: 0
			},
			xAxis: {
				tickLength:0,
				gridLineWidth: 0,
				gridZIndex: -1,	
				lineWidth: 0,
				gridLineColor: self.colors["gridline"],
				gridLineDashStyle: "ShortDot",
				align: "top",
				opposite: false,
				margin: 100,
				/*events: {
					setExtremes: function(e) {
						if(typeof(e.rangeSelectorButton)!== 'undefined'){
							if (e.rangeSelectorButton.type == "all"){
							
							}else{
							
							}
						}
					}
				},*/
				labels: {
					y : 17,
					formatter : function() {
						if(self.period == "year") {
							return Highcharts.dateFormat('%m/%Y', this.value);
						} else if (self.period == "month" || self.period == "week" || self.period == "day"){
							return Highcharts.dateFormat('%d/%m', this.value);
						}else{
							return Highcharts.dateFormat('%H:00', this.value);
						}
					},
					style: {
						color: self.colors['label'],
						fontSize: '11px'
					}
				},
				tickPositioner: function () {
					var positions = [];
					var lastday = 0;
					var msec;
					
					if(self.period == "year" && close.length) {
						msec = 60*60*24*1000*30*6;
						lastday = Math.floor(close[0][0]/msec)*msec;
					} else if (self.period == "month" && close.length){
						msec = 60*60*24*1000*30;
						lastday = Math.floor(close[0][0]/msec)*msec;
					}else if (self.period == "week"){  
						msec = 60*60*24*1000*7;
						//lastday = Math.floor(close[0][0]/msec)*msec;
						lastday = 0;
					}else if (self.period == "day"){
						msec = 60*60*24*1000;
						//lastday = Math.floor(close[0][0]/msec)*msec;
						lastday = 0;
					}else if (self.period == "hour"){
						msec = 60*60*1000;
						lastday = Math.floor(close[0][0]/msec)*msec;
					}
					
					if(self.period == "hour" || self.period == "day") {
						for (i=0;i<close.length;i++){
							/*if (self.period == "month"){
								if (i%5==(close.length-1)%5){
									positions.push(close[i][0]);
								}
							}*/
							var _today = Math.floor(close[i][0]/msec)*msec;	
							//console.log(lastday, _today);
							if (lastday != _today){
								lastday = _today;
								positions.push(close[i][0]);
							}
						}	
					} else {
						var k = (self.isMobile)? 4:5;
						var a = Math.floor(close.length/k);
						if(a != 0) {
							for(i = 0; i < close.length; i += a) {
								positions.push(close[i][0]);
							}	
						}
					}
					
					//console.log(positions);
					return positions;
				},
				crosshair: {
					color: self.colors["gridline"],
					className: 'chart_crosshair',
					dashStyle: "shortdot"
				}
			},
			yAxis: [{
				title: {
					text: null
				},
				labels:{
					align:'right',
					x:40,
					y:5,
					formatter: function () {
						//this.value = (this.value > 1000) ? this.value.toFixed(0) : this.value;
						//return (this.isLast)?"":addcomma(this.value);
						this.value = (this.value >= 1000) ? this.value.toFixed(0) : this.value.toFixed(3);
						return (this.isLast)?"":this.value;
					},
					style: {
						color: self.colors['label'],
						fontSize: '11px'
					}
				},
				//top:22,
				top:0,
				offset:0,
				height: ($('#productIntradayChartContainer').height()-22)*0.7 - 22,
				//tickPixelInterval:40,
				tickAmount : 7,			
				showFirstLabel: false,	
				showLastLabel: true,
				gridLineColor: self.colors["gridline"],
				gridLineDashStyle: "ShortDot",
				gridZIndex: -1,
				gridLineWidth: 0,
				lineWidth: 0,
				lineColor: self.colors["gridline"],
				lineDashStyle: "ShortDot",
				opposite: true,
				max: (max_last*1 == fdata.lastc*1) ? max_last : null,
				min: (min_last*1 == fdata.lastc*1) ? min_last : null,
				
				plotLines: [{
					value: fdata.lastc,
					color: self.colors["lastc"],
					dashStyle: "Solid",
					width: 1,
					zIndex: 1,
				}]
			}, {
				title: {
					text: null
				},
				labels:{
					align:'right',
					x:40,
					y:5,
					style: {
						color: self.colors['label'],
						fontSize: '11px'
					},
					formatter: function () {
						return formatTurnover(this.value, true);
					}
				},
				top: ($('#productIntradayChartContainer').height()-22)*0.7 + 1,
				offset:0,
				height: (($('#productIntradayChartContainer').height()-22)*0.3),
				//height: 124,
				min: 0,        
				tickAmount : 4,	
				//tickPixelInterval:40,
				showFirstLabel: false,	
				showLastLabel: true,
				gridLineWidth: 0,
				gridZIndex: -1,	
				lineWidth: 0,
				lineColor: self.colors["gridline"],
				lineDashStyle: "ShortDot",	
				opposite: true
			}],
			navigator : {
				enabled : false
			},
			scrollbar : {
				enabled : false
			},
			series : [{
				name : "last",
				data : close,
				tooltip: {
					valueDecimals: dp
				},
				dataGrouping:  {
					approximation: "close",
					enabled: true,
					forced: true,
					units: groupingUnits,
					groupPixelWidth: 10
				},
				lineWidth: 1.5,
				color: self.colors["line"],
			},{
				id: 'turnover',
				type: 'column',
				data: turnover,
				yAxis: 1,
				dataGrouping:  {
					approximation: "sum",
					enabled: true,
					forced: true,
					units: groupingUnits,
					groupPixelWidth: 10
				},
				color: self.colors["bar"],
			},
			],
			exporting: {
				enabled: false
			},
			credits: {
				enabled: false
			},
		};
	},
	drawBackground: function(){
		var chart = this.chart;
		var offsetx,offsety;
		
		var fontstyle = {color: this.colors["grey"], fontSize: '12.5px', 'font-weight': 'bold'};
		
		offsetx = 0;
		offsety = chart.chartHeight - chart.marginBottom + 1;
		chart.renderer.rect(offsetx,offsety, chart.chartWidth, 1, 0).attr({
			fill: this.colors["black"],
			'stroke-width': 0,
			'zIndex': 2,
		}).add();
		
		offsety = chart.yAxis[0].height;
		chart.renderer.rect(offsetx,offsety, chart.chartWidth, 1, 0).attr({
			fill: this.colors["black"],
			'stroke-width': 0,
			'zIndex': 2,
		}).add();
		
		var txt = lang=='en'?"Last Intrinsic Close":'내재가치';
		offsety = chart.yAxis[0].height+16;
		chart.renderer.text(txt, 2, offsety).css(fontstyle).add();
		
		offsety = offsety - 5;
		rectx = lang=='en'?140:60;
		chart.renderer.rect(rectx, offsety, 15, 2).attr({
			fill: this.colors["lastc"],
			'stroke-width': 0,
			'zIndex': 2,
		}).add();
    
		var txt = lang=='en'?"Bid ":'매수';
		var fontstyle = {color: this.colors["grey"], fontSize: '12.5px', 'font-weight': 'bold'};
		offsety = chart.yAxis[0].height+16;
		chart.renderer.text(txt, 180, offsety).css(fontstyle).add();
    
		offsety = offsety - 5;
		chart.renderer.rect(210, offsety, 15, 2).attr({
			fill: this.colors["line"],
			'stroke-width': 0,
			'zIndex': 2,
		}).add();
		
		//console.log(chart.yAxis[0].height);
	},
	drawTooltip: function(arr){  //arr[x, y1, y2] => arr[val, pos]
		var chart = this.chart;
		var fontstyle = {color: '#fff', fontSize: '11px'};
		var textattr = {zIndex: 7, class: "tooltipElement"};
		
		$(".highcharts-axis-labels text").removeAttr("class", "tooltipElement");
		$(".tooltipElement").remove();
	
		//console.log(arr);
		
		//yAxis last
		y_posY = arr['y1'][1]-7;
		y_posX = chart.chartWidth - chart.marginRight;
		chart.renderer.rect(y_posX, y_posY, chart.margin[1], 15, 0).attr({
			fill: this.colors["yTooltip"],
			'stroke-width': 0,
			'zIndex':7,
			class: 'tooltipElement'
		}).add();
		
		//chart.renderer.text(arr['y1'][0], y_posX+5, (y_posY+11.5)).css(fontstyle).attr(textattr).add();
		lastLabel = chart.renderer.label(arr['y1'][0], y_posX, (y_posY-3)).css(fontstyle).attr(textattr).add();
		lastLabel.attr({
			x: chart.chartWidth - lastLabel.width
		});
		
		//yAxis pchng
		y_posX = chart.chartWidth - chart.marginRight - 55 - 2;
		chart.renderer.rect(y_posX, y_posY, 55, 15, 0).attr({
			fill: this.colors["yTooltip"],
			'stroke-width': 0,
			'zIndex':7,
			class: 'tooltipElement'
		}).add();
		
		//pchngLabel = chart.renderer.text(arr['pchng'], y_posX+3, (y_posY+11.5)).css(fontstyle).attr(textattr).add();
		pchngLabel = chart.renderer.label(arr['pchng'], y_posX, (y_posY-3)).css(fontstyle).attr(textattr).add();
		pchngLabel.attr({
			x: chart.chartWidth - chart.marginRight - 2 - pchngLabel.width
		});
		
		
		//xAxis time
		x_posX = arr['x'][1]-19;
		x_posY = chart.chartHeight - chart.marginBottom + 5;
		
		var format;
		var w = 38;
		if(this.period == 'year' || this.period == 'week' || this.period == 'month') {
			format = '%Y-%m-%d';
			w = 74;
			x_posX = x_posX - 19;
		} else if(this.period == 'hour' || this.period == 'day') {
			format = '%H:%M';
		}
		
		if(x_posX < 0) {
			x_posX = 0;
		}
		
		chart.renderer.rect(x_posX, x_posY, w, 15, 0).attr({
			fill: this.colors["xTooltip"],
			'stroke-width': 0,
			'zIndex':7,
			class: 'tooltipElement'
		}).add();
		
		chart.renderer.text(Highcharts.dateFormat(format, arr['x'][0]), x_posX+3, (x_posY+12)).css(fontstyle).attr(textattr).add();
		
		
		//yAxis turnover
		y2_posY = chart.yAxis[0].height + 22 + arr['y2'][1]-7;
		y2_posX = chart.chartWidth - chart.marginRight;
		chart.renderer.rect(y2_posX, y2_posY, chart.margin[1], 15, 0).attr({
			fill: this.colors["yTooltip"],
			'stroke-width': 0,
			'zIndex':7,
			class: 'tooltipElement'
		}).add();
		
		//chart.renderer.text(addcomma(arr['y2'][0]), y2_posX_2, (y2_posY+11.5)).css(fontstyle).attr(textattr).add();
		turnoverLabel = chart.renderer.label(formatTurnover(arr['y2'][0], true), y2_posX, y2_posY-3).css(fontstyle).attr(textattr).add();
		turnoverLabel.attr({
			x: chart.chartWidth - turnoverLabel.width
		});
	}
}