/*************************** Global vars *****************************/
// Charts groups used in URVAL
CHARTSGROUPS = new Array();

// Charts periods used in URVAL
CHARTSPERIODS = new Array();

// Preview data loaded from server
PREVIEWDATA = new Array();

// Current urval selected chart, year, period
URVAL = new Object();
/************************* End of Global vars *************************/

function loadUrval() {
	//Create sliding panel effect
	$('#urval h2').click(function(){
		$('#urvaltxt').toggle(0, function(){
			$('#urval.closed').switchClass('closed', 'open', 700);
			$('#urval.open').switchClass('open', 'closed', 700);
		});
	});

	//Load Urval content from server
	$.getJSON(
		SCRIPTURL + 'chartgroups.json?callback=?',
		function(data){
			//Check if correct response received
			if (isDefined(data.chartsgroups)) {
				
				//Get listGroups
				var listGroups = data.chartsgroups;
				var groupsCount = listGroups.length;

				var listitems = '';		//list items that compose tabs
				var tabcontents = '';	//the content div for each tab
				
				//For each entry in listGroups (except first, which is F - featured)
				for (var i = 1; i < groupsCount; i++) {
					
					//Get name of tab
					var name	= listGroups[i].listGroupText;
					var alias	= standardize(name);
					
					//Store groups in global charts groups array
					CHARTSGROUPS[alias] = listGroups[i];

					//and build list item that will become tabs
					listitems += '<li class="jqtablink"><a href="#' + alias + '">' + name + '</a></li>';

					//then build the content of tab
					tabcontents += '<div id="' + alias + '" class="jqtabcontent grouptab" ></div>';
				}

				//Build the html used in urval panel
				html = '<ul>' + listitems + '</ul>' + tabcontents;

				//Insert urval html in sliding panel
				$('#urvaltxt').html(html);

				//Create tabs in urval panel
				$('#urvaltxt').tabs({
					selected: 0,
					show: function(event, ui) {
						//Get URVAL to local scope
						var urval = URVAL;
						
						//Get tab name
						var tabname = $(ui.panel).attr('id');
						
						//and load its content
						loadUrvalGroupContent(tabname);

						/* @todo implement a function to get all params */
						//get and store liid of current previewed chart (only panel where class is not hidden)
						urval.liid = $('#' + tabname + '>div:not(.ui-tabs-hide)')[0].id;
						//and use it to store the params
						urval.dspy = $('#dspy_' + urval.liid).val();
						urval.dspp = $('#dspp_' + urval.liid).val();
					}
				});
			}
			return false;
		}
	);
	
}


function loadUrvalGroupContent(name) {
	//get Global vars to local scope
	var chartgroup = CHARTSGROUPS[name];
	var urval = URVAL;
	
	//If tab was not yet loaded, load it
	if (isDefined(chartgroup) && !isDefined(chartgroup.loaded)) {

		//load subgroups
		$('#' + name).html(loadUrvalSubGroupsCharts(chartgroup.charts));

		//Mark it as a loaded group
		chartgroup.loaded = 'loaded';

		//Transform subgroups in tabs
		$('#' + name).tabs({
			selected: 0,
			show: function(event, ui) {
				//when subgroup tab is showed, get liid and store it
				urval.liid = $(ui.panel).attr('id');
				urval.dspy = $('#dspy_' + urval.liid).val();
				urval.dspp = $('#dspp_' + urval.liid).val();
				//and build content with chart periods
				buildChartPeriodsSliders();
			}
		});
	}
}


function loadUrvalSubGroupsCharts(charts) {
	var count = charts.length;
	var listitems = '';
	var tabcontents = '';

	//For each chart
	for(var i in charts){

		//...get chart id
		var liid = charts[i].liid;
		
		//...and name for tab
		var name = charts[i].rubr;

		//...create an item list that will become a tab
		listitems += '<li><a href="#' + liid + '">' + removeFirstWord(name) + '</a></li>';

		//...Build div that will be the content of each tab
		tabcontents += '<div class="urvaltabpanel" id="' + liid + '"></div>';
	}

	//return html with list and tab contents
	return '\
		<ul>\
			' + listitems + '\
		</ul>\
		' + tabcontents;

}


function buildChartPeriodsSliders() {
	//get Global var to local scope
	var urval = URVAL;
	//If this was loaded before, retrieve params and return
	if (isDefined(CHARTSPERIODS[urval.liid])) {
		//get selected and store to global
		urval.dspy = $('#dspy_' + urval.liid).val();
		urval.dspp = $('#dspp_' + urval.liid).val();
		return;
	}

	//Else, use ajax to load from server and callback to insert to its div
	//Retrieve from server periods json
	$.ajax({
		async:		false,
		dataType:	'json',
		url:		SCRIPTURL + 'chartperiods.json?xpdato=' + $.cookie("xpdato") + '&xpwlnr=' + $.cookie("xpwlnr") + '&liid=' + urval.liid + '&callback=?',
		success:	function (data) {
			if (isDefined(data) && data.liid == urval.liid) {
				//get urval liid as a local var for performance
				var uliid = urval.liid;
				
				//Store in global charts periods array
				CHARTSPERIODS[uliid] = data;

				//Parse information of this chart
				var optionList = '';
				$.each(CHARTSPERIODS[uliid].chartperiods, function(key, value) {
					chartperiods = CHARTSPERIODS[uliid].chartperiods[key];
					CHARTSPERIODS[uliid][chartperiods.dspy] = chartperiods.dspp;									//store as array...
					optionList += '	<option value="' + chartperiods.dspy + '" >' + chartperiods.dspy + '</option>';	//...and add to option list
				});

				//Create subgroup tab, with select/slider for year selection and below the div that will hold dspp select/slider
				var tabcontents = '\
					<label for="dspy_' + uliid + '" >Välj år: </label>\
					<select class="jqselect" name="dspy_' + uliid + '" id="dspy_' + uliid + '" >\
						' + optionList + '\
					</select>\
					<div id="dspp_holder_' + uliid + '"></div>\
					<div id="prev_holder_' + uliid + '" class="prev_holder" ></div>';

				//insert it in the chart div
				$('#' + uliid).html(tabcontents);

				//convert it to slider
				$('#' + uliid + ' .jqselect').selectToUISlider({
					labels: 5,
					sliderOptions: {
						animate: true,
						change: function() {
							//On change, disable sliders (while building/changing dspp slider)
							disableSliders();
							
							//and load the periods (dspp) select/slider
							buildDsppSlider(this);
						}
					}
				}).hide();

				//And build slider of first selected year (default when built)
				buildDsppSlider();
			}
			else {
				console.log('Error retrieving chartperiods');
			}
		}
	});
}

function buildDsppSlider(dspyslider) {

	//get year selected and store to global
	URVAL.dspy = $('#dspy_' + URVAL.liid).val();

	//get vars as local for performance
	var uliid = URVAL.liid;
	var udspy = URVAL.dspy;

	var dspp_select = '';

	//check if periods slider was not built previously
	if (!isDefined(CHARTSPERIODS[uliid][udspy]['dspp'])) {

		//if not, build the options for the select/slider
		var options = '';
		$.each(CHARTSPERIODS[uliid][udspy], function(key, value) {
			URVAL.dspp = CHARTSPERIODS[uliid][udspy][key];
			options = '\
				<option value="' + URVAL.dspp + '" >' + URVAL.dspp + '</option>\
				' + options;
		});
		//and insert it into select/slider
		dspp_select = '\
			<label for="dspp_' + uliid + '" >Välj period: </label>\
			<select class="jqselect" name="dspp_' + uliid + '" id="dspp_' + uliid + '" >\
				'+ options + '\
			</select>';
			
		//then store dspp select built
		CHARTSPERIODS[uliid][udspy]['dspp'] = dspp_select;
	}
	else {
		//It was build previously, just use it
		dspp_select = CHARTSPERIODS[uliid][udspy]['dspp'];
	}

	//Append loaded or retrieved slider to its holder
	$('#dspp_holder_' + uliid).html(dspp_select);

	//transform dspp select into slider
	$('#dspp_' + uliid).selectToUISlider({
		labels: 5,
		sliderOptions: {
			animate: true,
			change: function() {
				//On change, disable sliders (while loading chart and building preview)
				disableSliders();
				
				//Store value, load and store chart, and show preview
				URVAL.dspp = $('#dspp_' + uliid).val();
				loadChartPreview();
			}
		}
	}).hide();

	//Before loading preview, assure sliders are disabled
	//(in case it was built for a dspy slider change)
	disableSliders();

	//Load and preview chart of subgroup tab (initial sliders' state)
	URVAL.dspp = $('#dspp_' + uliid).val();
	loadChartPreview();
}


/**
 * Function that loads a chart preview (first 5 positions) in content panel
 * from its category id (URVAL.liid), year (URVAL.dspy) and period (URVAL.dspp).
 */
function loadChartPreview() {
	//get var as local
	var urval = URVAL;

	if (!urval.liid || !urval.dspy || !urval.dspp) {
		console.log('Can\'t load chart preview, missing parameter. LIID = ' + urval.liid + '; DSPY = ' + urval.dspy + '; DSPP = ' + urval.dspp + ';');
		return;
	}

	//Check if this chart preview was loaded before and stored in cache
	var cachedPreview = getPreviewData(urval.liid, urval.dspy, urval.dspp);
	if (cachedPreview) {
		//if positive, show and return
		showUrvalPreview();
		return;
	}

	//If it was not cached, build chart url from the parameters
	var chartURL = SCRIPTURL + 'chart.json?xpdato=' + $.cookie("xpdato") + '&xpwlnr=' + $.cookie("xpwlnr") + '&liid=' + urval.liid + '&dspy=' + urval.dspy + '&dspp=' + urval.dspp + '&preview=1&callback=?';

	//Then load chart
	$.getJSON(
		chartURL,
		function(data) {

			if (data.success == 'true') {

				//If first element is defined
				if (isDefined(data.chart[0].arso)) {
					
					//store chart data in memory
					storePreviewData(data.liid, data.dspy, data.dspp, data);

					//Insert parsed result or error msg into innerpanel
					showUrvalPreview(data);
				}
			}
			else {
				console.log("Could not retrieve chart preview. Please, check JSON link and server.");
			}
		}
	);
}


function showUrvalPreview(data) {
	//get vars as local for performance
	var uliid = URVAL.liid;
	var udspy = URVAL.dspy;
	var udspp = URVAL.dspp;
	
	//if undefined (clicked on current position) get same preview
	if (!isDefined(data))
		data = getPreviewData(uliid, udspy, udspp);
		
	//Create button to load chart, insert preview in data
	data.preview = '<input type="submit" value="Visa!" name="loadchart" class="loadchart" />';
	
	//Build preview img (covers) of first 5 pos on chart
	for (var i = 0; i < 5; i++) {
		var entry = data.chart[i];
		var src  = entry.kvb ? (BASEURL + entry.kvb) : NOIMAGE_KVB;
		var pos  = entry.rowid;
		var arso = entry.arso;
		var tit  = entry.tit;
		var legend = arso + ' - ' + tit;
		data.preview += '<span class="pos previewpos" >' + pos + '<img src="' + src + '" alt="' + legend + '" title="' + legend + '" /></span>';
		//Defining Navigation buttons
		data.rightdspy = '<input type="submit" value="År &gt;&gt;" class="urvalrightdspy" >';
		data.rightdspp = '<input type="submit" value="Period &gt;" class="urvalrightdspp" >';
		data.leftdspp = '<input type="submit" value="&lt; Period" class="urvalleftdspp" >';
		data.leftdspy = '<input type="submit" value="&lt;&lt; År" class="urvalleftdspy" >';
	}
	$('#prev_holder_' + uliid).html('\
		<h2>Vald lista - ' + data.rubr + ' - ' + data.text + '</h2>\
		<span class="urvalnav" >' + data.leftdspy + ' ' + data.leftdspp + ' ' + data.rightdspp + ' ' + data.rightdspy + '</span><br />\
		' + data.preview
	);

	//When load is clicked, show chart on background
	$('#urvaltxt input.loadchart').button().unbind('click').click(function(){
		//Load chart
		loadChart(uliid, udspy, udspp);

		//After loading, simulate click on header to close urval panel
		$('#urval h2').trigger('click');
	});
	//==================== Urval Navigation Buttons ===================
	//When föreg year is clicked, show preview of previous chart year
	$('#prev_holder_' + uliid + ' .urvalleftdspy').button().unbind('click').click(function(){
		var index = $('#dspy_' + uliid + ' option:selected').index();
		if (index > 0)
			$('#dspy_' + uliid + ' option:eq(' + (index-1) + ')').attr('selected', 'selected').click();
	});
	//When föreg period is clicked, show preview of previous chart period
	$('#prev_holder_' + uliid + ' .urvalleftdspp').button().unbind('click').click(function(){
		var index = $('#dspp_' + uliid + ' option:selected').index();
		if (index > 0)
			$('#dspp_' + uliid + ' option:eq(' + (index-1) + ')').attr('selected', 'selected').click();
		else //if there is no more period to the left, click year button
			$('#prev_holder_' + uliid + ' .urvalleftdspy').trigger('click').click();
	});
	//When nästa period is clicked, show preview next of next chart period
	$('#prev_holder_' + uliid + ' .urvalrightdspp').button().unbind('click').click(function(){
		var index = $('#dspp_' + uliid + ' option:selected').index();
		if (index < $('#dspp_' + uliid + ' option').length - 1)
			$('#dspp_' + uliid + ' option:eq(' + (index+1) + ')').attr('selected', 'selected').click();
		else //if there is no more period to the right, click year button
			$('#prev_holder_' + uliid + ' .urvalrightdspy').trigger('click').click();
	});
	//When nästa year is clicked, show preview next of next chart period
	$('#prev_holder_' + uliid + ' .urvalrightdspy').button().unbind('click').click(function(){
		var index = $('#dspy_' + uliid + ' option:selected').index();
		if (index < $('#dspy_' + URVAL.liid + ' option').length - 1)
			$('#dspy_' + uliid + ' option:eq(' + (index+1) + ')').attr('selected', 'selected').click();
	});

	//Re-enable dspy slider after building/changing dspp slider and
	//Re-enable dspp slider after showing correctly the preview of chart
	enableSliders();
}

function disableSliders() {
	$('#dspy_' + URVAL.liid).next().slider("option", "disabled", true);
	$('#dspp_' + URVAL.liid).next().slider("option", "disabled", true);
}

function enableSliders() {
	$('#dspy_' + URVAL.liid).next().slider("option", "disabled", false);
	$('#dspp_' + URVAL.liid).next().slider("option", "disabled", false);
}


/**
 * Function which stores a loaded chart preview data to cache so it can
 * be retrieved later without having to load it again from the server.
 * @param liid string Category of chart
 * @param dspy string Year of the chart
 * @param dspp string Period/publication of chart
 * @return void
 */
function storePreviewData(liid, dspy, dspp, data) {
	PREVIEWDATA[liid + '.' + dspy + '.' + dspp] = data;
}


/**
 * Function which retrieves a previously loaded chart preview data from
 * the cache. Return the data of cached preview or false if not stored.
 * @param liid string Category of chart
 * @param dspy string Year of the chart
 * @param dspp string Period/publication of chart
 * @return html string Data with chart preview content or false if it
 * was not cached.
 */
function getPreviewData(liid, dspy, dspp) {
	var key = liid + '.' + dspy + '.' + dspp;
	//if chart is defined and stored in cache
	if (isDefined(PREVIEWDATA[key]))
		return PREVIEWDATA[key];

	//if not defined (not cached), return false
	return false;
}