$.ldWidget('smartfield.chart', {
	_charts: [],
	_loadDataQueue: [],
	_isLoadingData: false,
	options: {
		chartOptions: {},
		defaultChartOptions: {
			'chart': {
				'height': 400,
				'spacingTop': 0,
				'marginTop': 0,
				'events': {
				}
			},
			'credits': {
				'enabled': false
			},
			'title': {
				'text': null
			}
		},
		defaultChildChartOptions: {
			'chart': {
				'height': 150,
//				'height': 400,
//				'marginBottom': 150,
				'marginBottom': 0,
				'spacingTop': 0,
				'spacingBottom':0
			},
			'title': {
				'text': null,
			},
			'credit': {
				'enabled': false
			},
			'legend': {
				'enabled': false
			}
		}
	},
	_create: function() {
		var self = this;

		var childCharts = {};
		var options = self.options.chartOptions;
		$.each(options.series, function(i, series) {
			if (series.childChart) {
				if (!childCharts[series.childChart.code]) {
					childCharts[series.childChart.code] = [];
				}
				childCharts[series.childChart.code].push(series);
				delete options.series[i];
			}
		});

		options = self._merge(options, self.options.defaultChartOptions);
		self._addChart(options);


		options = self._merge(options, self.options.defaultChildChartOptions);
		for(code in childCharts) {
			series = childCharts[code];
			options.series = series;
			self._addChart(options);
		}
	
		self._loadData();	
	},
	_init: function() {
	},
	zoomIn: function(min, max) {
		console.log('zoomIn');
		var self = this;
		for(chartIndex in self._charts) {
			self._charts[chartIndex].zoomIn(min, max);
		}
	},
	zoomOut: function() {
		console.log('zoomOut');
		var self = this;
		for(chartIndex in self._charts) {
			self._charts[chartIndex].zoomOut();
		}

	},
	_merge: function() {
		var args = arguments;
                return $.extend(true, null, args[0], args[1], args[2], args[3]);
	},
	_addChart: function(options, main) {
		var self = this;

		var renderTo = $('<div></div>').prependTo(self.element).get(0);
		var options = self._merge(options, {
			'chart':{
				'renderTo': renderTo,
				'events': {
					'selection': function(event){
						if (event && !event.resetSelection) {
							self.zoomIn(event.xAxis[0].min, event.xAxis[0].max);
						}
						else {
							self.zoomOut();
						}
					}
				}

			}
		});

		var ajaxSeries = [];
		$.each(options.series, function(i, series) {
			if (series && series.dataUrl) {
				ajaxSeries.push(series);
				delete options.series[i];
			}
		});
		var chart = new Highcharts.Chart(options);
		self._charts.push(chart);
		for(i in ajaxSeries) {
			self._queueDataLoad(chart, ajaxSeries[i]);
		}
	},
	_queueDataLoad: function(chart, series) {
		var self = this;
	
		self._loadDataQueue.push({'chart':chart, 'series':series});
	},
	_loadData: function() {
		var self=this;
		
		if (self._isLoadingData) {
			return;
		}
		self._isLoadingData = true;	
	
		if (self._loadDataQueue.length) {
			self._isLoadingData = true;	
			self._charts[0].showLoading();
			for(i in self._loadDataQueue) {
				var options = self._loadDataQueue[i];
				self._loadSeriesData(options.chart, options.series, i);
				return;
			}
			self._isLoadingData = false;
			self._charts[0].hideLoading();
		}
		else {
			self._isLoadingData = false;
			self._charts[0].hideLoading();
		}
	},
	_loadSeriesData: function(chart, series, index) {
		var self=this;

		$.ajax({
			'url': __base + series.dataUrl,
			'success': function(data) {
				self._isLoadingData = false;
				series.data = data;
				chart.addSeries(series, false);
				var seriesCount = chart.series.length;
				var lineCount = Math.round(seriesCount/4);
				chart.options.chart.marginBottom = lineCount * 20;
				chart.redraw();
//				console.log($(chart.container).find('.highcharts-legend').html());//attr('height'));
				delete self._loadDataQueue[index];
				self._loadData();
			},
			'error': function() {
				self._isLoadingData = false;
				series.data = [];
				chart.addSeries(series);
				delete self._loadDataQueue[index];
				self._loadData();
			},
			'dataType': 'json',
			'async': true
		});
	},
});