//------------------------------------------------
// Prepare everything necessary to provide a chart
//------------------------------------------------

//----------------
//...chart related
//----------------
var initialize = true;

// globally to have access from outer scope
var globalChart;

// dynamic credits
var creditsText = '';
var creditsLink = '';

var chartOptions = {

	chart: {

		resetZoomButton: {
			position: {
				x:-32,
				y:-40
			}
		},
		zoomType: 'x',
		
		events: {
			load: function() {
					this.credits.element.onclick = function() {
							window.open(
								creditsLink,
								'_blank' // <- This is what makes it open in a new window.
							);
					 }
			}
		}
	},
	
	title: {
		//text: 'Grafische Darstellung der Parameter',
		x: -20 //center
	},
  
	subtitle: {
		text: 'Hier der Zeitraum',
	    x: -20
	},
  
	legend :{
		// provide space between legend and credits text
		y: -16
	},
	
	tooltip: {
	  useHTML: true,
		crosshairs: true,
		shared: false
	}
	
};	// chartOptions

//--------------------------------------------
// .......................special theme
//--------------------------------------------

// Load the fonts
//Highcharts.createElement('link', {
//   href: '//fonts.googleapis.com/css?family=Signika:400,700',
//   rel: 'stylesheet',
//   type: 'text/css'
//}, null, document.getElementsByTagName('head')[0]);

Highcharts.theme = {
   colors:
	 //["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
	 ["#0000FF", "#FF0000", "#00FF00", "#404040", "#CCCC00", "#FF9900", "#8085E9", "#8D4654", "#FF0066", "#55BF3B", "#7798BF"],
   chart: {
      backgroundColor: null,
      style: {
         //fontFamily: "Signika, serif"
				 fontFamily: "Arial, serif"
      }
   },
   title: {
      style: {
         color: 'black',
         fontSize: '16px',
         fontWeight: 'normal'
      }
   },
   subtitle: {
      style: {
         fontSize: '14px',
         color: 'black'
      }
   },
   tooltip: {
		borderWidth: 1,
		style: {
			fontSize: '11px'
		}
   },
   legend: {
      itemStyle: {
         fontWeight: 'normal',
         fontSize: '16px'
      }
   },
   xAxis: {
      labels: {
         style: {
          //color: '#6e6e70'
					color: 'black',
					fontSize: '14px'
         }
      }
   },
   yAxis: {
      labels: {
					style: {
						//color: '#6e6e70'
						color: 'black',
						fontSize: '14px'
					}
      },
			title: {
				style: {
					color: 'black',
					fontSize: '16px'
				}
			}
   },
   plotOptions: {
      series: {
         shadow: true
      },
      candlestick: {
         lineColor: '#404048'
      },
      map: {
         shadow: false
      }
   },

   // Highstock specific
   navigator: {
      xAxis: {
         gridLineColor: '#D0D0D8'
      }
   },
   rangeSelector: {
      buttonTheme: {
         fill: 'white',
         stroke: '#C0C0C8',
         'stroke-width': 1,
         states: {
            select: {
               fill: '#D0D0D8'
            }
         }
      }
   },
   scrollbar: {
      trackBorderColor: '#C0C0C8'
   },

   // General
   background2: '#E0E0E8'

};

// --------------------------------
//...main chart function
// --------------------------------
function prepareCharts(jsonData) {

	$('#container').html('');

	//...It is recommended to destroy the obsolete highcharts objects
	//...Have a look at: http://api.highcharts.com/highcharts#Chart.destroy
	if ($('#container').highcharts()) $('#container').highcharts().destroy();
	if (Highcharts.charts.length > 0) Highcharts.charts.length = 0;
	
	// set charts
	var chartDiv =  document.getElementById('container');

	// global data
	creditsLink = jsonData.CreditsLink;
	creditsText = jsonData.CreditsText;
	var titleText = jsonData.TitleText;

	//...prepare chartoptions
	chartOptions.chart.renderTo = chartDiv;
	chartOptions.subtitle.text = jsonData.ChartInfo;
	chartOptions.xAxis = convertString2Bool(jsonData.Xaxis);
	chartOptions.yAxis = convertString2Bool(jsonData.Yaxis);
	chartOptions.series = jsonData.Series;

	//...set global chart options
	if (initialize) {
		
		Highcharts.setOptions(
			{
				lang: {
						months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',  'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
						shortMonths: [ "Jan" , "Feb" , "Mrz" , "Apr" , "Mai" , "Jun" , "Jul" , "Aug" , "Sep" , "Okt" , "Nov" , "Dez"],
						weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
						printChart: 'Grafik drucken...',
						contextButtonTitle: 'Optionen...',
						downloadPNG: 'Speichern als PNG Grafik...',
						downloadJPEG: 'Speichern als JPG Grafik...',
						downloadPDF: 'Speichern als PDF Dokument...',
						downloadSVG: 'Speichern als SVG Grafik...',
						resetZoom: '<< Zurück zur Übersicht',
						resetZoomTitle: 'Ansicht wieder herstellen',
						thousandsSep: ""
				},
				credits: {
					enabled: true,
					text: 'Quelle: ' + creditsText,
					position: {
							align: 'right',
							verticalAlign: 'bottom'
					}
				},
				tooltip: {
					formatter: function () {
						var pointTxt =  this.series.options.yCurrentDateHash[this.point.index][this.x] +
														'</br>' + this.series.name +
														'</br>Tag: ' + this.series.options.yDayDataHash[this.point.index][this.x] + 
														' kg</br>Kumuliert: ' + this.y  +
														' kg</br>Datum min: ' +  this.series.options.yMinDateHash[this.point.index][this.x] +
														'</br>Datum max: '  +  this.series.options.yMaxDateHash[this.point.index][this.x] +
														'<br>Anzahl Waagen:'  +  this.series.options.yAmountWaageHash[this.point.index][this.x];
						return pointTxt;
					}
				}				
			}
		);

		initialize = false;
	}

	// Apply the theme
	Highcharts.setOptions(Highcharts.theme);	

	//...create chart object
	globalChart = new Highcharts.Chart(chartOptions);

	// set title extra because we have more than one chart		
	globalChart.setTitle({ text: titleText });

	 // ...add dynamically event listener for period management when zooming in
	Highcharts.addEvent(			
		globalChart.xAxis[0],
		'setExtremes',
		syncExtremes
		);

	// build own custom legend for different years
	BuildCustomLegend();
}

// --------------------------------
//...main chart function
// --------------------------------
function emptyCharts() {

	$('#container').empty();
	//$('#container').hide();
	$('#customLegend').empty();
	$('#customLegend').hide();
}

// -----------------------------------------
// Manage custom legend for year selection
// -----------------------------------------
function BuildCustomLegend() {
	var yearCacheArr = [];
	$('#customLegend').show();
	$('#customLegend').html('');
	var legend = $('#customLegend');
	var dashStyle = 'solid'; // default line style
	var dashLineArr = ["Dash","DashDot","LongDash","ShortDash","LongDashDot"];
	var dotLineArr = ["Dot","ShortDot","ShortDashDot","ShortDashDotDot","LongDashDotDot"];
	var legendTmplReplaced = '';
	var legendTmpl = '<div>' +
										'<div id="customLine" style="border: none;border-bottom: 2px  VAR_dashstyle  VAR_seriecolor' +
										';width:20px;height: 5px;float: left;"></div>' +
										'<div id="customYear" style="border: none;">' +
										'<input type="button" id="VAR_yearid" class="btnYear" value="VAR_yearid">' +
										'</button>' + 
										'</div></div>';
		
	$.each(globalChart.series, function (j, serie) {
		// check line style
		if (dashLineArr.indexOf(serie.options.dashStyle) > 0) {
			dashStyle = 'dashed';
		}
		if (dotLineArr.indexOf(serie.options.dashStyle) > 0) {
			dashStyle = 'dotted';
		}
		
		if (yearCacheArr.indexOf(serie.options.yearId) >= 0) {
			// each year only once
			return true;
		}
		// set cache
		yearCacheArr.push(serie.options.yearId);
	
		// build legend
		legendTmplReplaced = legendTmpl.replace('VAR_dashstyle', dashStyle);
		legendTmplReplaced = legendTmplReplaced.replace('VAR_seriecolor', serie.color);
		legendTmplReplaced = legendTmplReplaced.replace('VAR_yearid', serie.options.yearId);		
		legendTmplReplaced = legendTmplReplaced.replace('VAR_yearid', serie.options.yearId);		
		legend.css('border', 'solid 1px #CCCCCC');
		legend.append(legendTmplReplaced);

		$('#' + serie.options.yearId).click(function(){
			var selYearId = this.id;
			if (this.className  === 'btnYear') {
				// disable year button
				this.className  = 'btnYearDisabled';
				$.each(globalChart.series, function (i, serie2Check) {
					if (serie2Check.options.yearId=== selYearId) {
						serie2Check.hide();
					}
				});
			}
			else {
				// enable year button
				this.className  = 'btnYear';
				$.each(globalChart.series, function (i, serie2Check) {
					if (serie2Check.options.yearId === selYearId) {
						serie2Check.show();
					}
				});
			}
		});
	});
}

// -----------------------------------------
// Synchronize zooming through the setExtremes event handler.
// -----------------------------------------
function syncExtremes(e) {
	var thisChart = this.chart;

	if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
		Highcharts.each(Highcharts.charts, function (chart) {
			if (chart !== thisChart) {
				if (chart.xAxis[0].setExtremes) { // It is null while updating
					chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
				}
			}
		});
	}
}

//----------------------------------------------------
//...triggered by 'onload'
//----------------------------------------------------
function dlgPrepare () {
	
	//...'hide' chart container
	$( "#container" ).height(0);	
		
	//...adapt divheight
	$( "#container" ).height($(window).innerHeight() - $( "#DataAccessForm").height() - 40);	
}

//----------------------------------------------------
//...triggered by 'onresize'
//----------------------------------------------------
window.onresize = function() {
	
	//...adapt divheight
	var minInnerHeight;
	var minHeigthPerChart = 248;
	
	minInnerHeight = $( "#DataAccessForm").height() + minHeigthPerChart;
	
	if ($(window).innerHeight() >  minInnerHeight){
		
		//...adapt chartheight
		$( "#container").height($(window).innerHeight() - $( "#DataAccessForm").height() - 40);
		
		//...adapt legend
		//$('#customLegend').css('margin-right', $(window).innerWidth() - 900);
	}
};

//----------------------------------------------------
// ............................some helper functions
//----------------------------------------------------
//----------------------------------------------------

function convertString2Bool(jsonData) {
	
	for(var i in jsonData) {
		
		var axis = jsonData[i];

		if(axis.opposite)
			if (axis.opposite.toUpperCase() === "TRUE")
				axis.opposite = true;
			else
				axis.opposite = false;

		if (axis.crosshair)
			if (axis.crosshair.toUpperCase() === "TRUE")
				axis.crosshair = true;
			else
				axis.crosshair = false;

		if(axis.title)
			if (axis.title.useHTML.toUpperCase() === "TRUE")
				axis.title.useHTML = true;
			else
				axis.title.useHTML = false;

		if (axis.labels)
			if (axis.labels.useHTML.toUpperCase() === "TRUE")
				axis.labels.useHTML = true;
			else
				axis.labels.useHTML = false;

		if (axis.endOnTick)
			if (axis.endOnTick.toUpperCase() === "TRUE")
				axis.endOnTick = true;
			else
				axis.endOnTick = false;
	}

   	return jsonData;
}

//----------------------------------------------------

function convertToDateUTC(jsonData) {
	for(var i in jsonData){
		var series = jsonData[i];
		if (series.pointStart !== null && series.pointStart.length > 0) {
			series.pointStart = Date.UTC(
				parseInt(series.pointStart.substr(0, 4), 10),
				parseInt(series.pointStart.substr(4, 2), 10) - 1,
				parseInt(series.pointStart.substr(6, 2), 10));
		}
   	}
   	return jsonData;
}