//	This file requires that dojo 1.0.2 is loaded before it is run - add the following to the containing html page: 
// 	<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js"></script>
//	<script>
//	dojo.require('dojo.query');
//	</script>
// 	This will load the cross domain version of dojo from aol

//	The dom node referenceListContainer
var referenceListContainer;
//	The dom  node referenceDetailsContainer
var referenceDetailsContainer;
// The dom node for the type selectBox
var typeSelect;
// 	The dom node for the funktionalitet selectBox
var funktionalitetSelect;
//	The dom node for the branche select box
var brancheSelect;
//	A flag to check wether or not the entire javascript initializing routine has finished. 
//	this check is mainly for debugging purposes. If all should have run, and this is still
//	false, it indicates that some dom node is missing.
var jsReady = false;

// The currently selected type, funktionalitet and branche.
var selected = new Array();

// current filter, used to get references
var currentField = 'type';
var currentValue = '0';
var currentPage = 0;

var activeListElement;

/* 
*	Init function, links global variables to their dom nodes. 
*	Furthermore it calls the setEventHandlers method, which is
*	responsible for setting eventhandlers for the page. This 
*	is called when the page (and dojo) has loaded. 
*/
function init() {
	referenceListContainer = dojo.byId('referenceListContainer');
	referenceDetailsContainer = dojo.byId('referenceDetailsContainer');
	typeSelect = dojo.byId('tx_wreferencer_type');
	funktionalitetSelect = dojo.byId('tx_wreferencer_funktionalitet');
	brancheSelect = dojo.byId('tx_wreferencer_branche');
	dojo.byId('referenceLoading').style.display = 'none';
	//All eventhandlers are set in this method. 
	setEventHandlers();
}

/*
*	Method for setting eventhandlers on the page. All eventhandlers should be registered here. 
*/
function setEventHandlers() {
	dojo.connect(typeSelect, 'onchange', 'typeChanged');
	dojo.connect(funktionalitetSelect, 'onchange', 'funktionalitetChanged');
	dojo.connect(brancheSelect, 'onchange', 'brancheChanged');
	dojo.connect(dojo.byId('referencePicture'),'onload', function() {
		dojo.fadeIn({ node: dojo.byId('referencePicture'), duration:600}).play();
		dojo.fadeIn({ node: dojo.byId('referenceTitel'), duration:600}).play();
		dojo.fadeIn({ node: dojo.byId('referenceBeskrivelse'), duration:600}).play();
		dojo.byId('referenceLoading').style.display = 'none';
	});
	jsReady = true;
}

function fadeIn() {
	dojo.fadeIn({ node: dojo.byId('referencePicture'), duration:600}).play();
	dojo.fadeIn({ node: dojo.byId('referenceTitel'), duration:600}).play();
	dojo.fadeIn({ node: dojo.byId('referenceBeskrivelse'), duration:600}).play();
}

/*
*	Eventhandler for the type-selectbox onchange event
*/
function typeChanged() {
	filterType(getSelectValue(dojo.byId('tx_wreferencer_type')));
}

/*
*	Eventhandler for the funktionalitet-selectbox onchange event
*/
function funktionalitetChanged() {
	filterFunktionalitet(dojo.byId('tx_wreferencer_funktionalitet'));
}

/*
*	Eventhandler for the branche-selectbox onchange event
*/
function brancheChanged() {
	filterBranche(dojo.byId('tx_wreferencer_branche'));
}

/*
*	Eventhandler for the onload event of the getReferenceDetails, 
*	which is called whenever a reference in the referenceList is
*	clicked. 
*/
function referenceDetailsLoaded(jsonData){
	
}

/*
*	Eventhandler for the onclick event of every single reference
*	in the referenceList. It gets the reference from the server, 
*	and calls the refrenceDetailsLoaded eventhandler, with the 
*	returned data. 
*/
function getReferenceDetails(referenceId, elm) {
	
	dojo.fadeOut({ node: dojo.byId('referencePicture'), duration:100}).play();
	dojo.fadeOut({ node: dojo.byId('referenceTitel'), duration:100}).play();
	dojo.fadeOut({ node: dojo.byId('referenceBeskrivelse'), duration:100}).play();
	
	
	//dojo.byId('referenceLoading').style.display = 'block';

	request = {reference: referenceId, cmd: 'loadReference'};
	dojo.xhrGet({
		url: "index.php?eID=wref",
		load: function(data){
			//Dojo.query efter billedet - sørg for at hente den fra referenceDetailsContainer - da den også findes (flere gange) i referenceListContainer
			data = dojo.fromJson(data);

			if(data.url != "") {
				var url_title = data.url;

				// remove leading "http"
				if(url_title.substring(0,7) == "http://") {
					url_title = url_title.substring(7);
				}
				// remove trailing slash
				if(url_title[url_title.length - 1] == '/') {
					url_title = url_title.substring(0,url_title.length - 1);
				}

				content = "<p><a target='_blank' href='" + data.url + "'>" + url_title + "</a></p>";
				data.beskrivelse = data.beskrivelse + content;
			}

			// hide the start message
			var startMessage = dojo.byId('startMessage');
			dojo.style(startMessage,'display','none');

			// only generate a link if an URL was entered
			var link_begin = "";
			var link_end = "";
			if(data.url != "") {
				link_begin = "<a href='" + data.url + "'>";
				link_end = "</a>";
			}

			refPicture = dojo.byId('referencePicture');
			console.log(refPicture);
			refPicture.src = data.img;
			//Dojo.query efter titelen - sørg for at hente den fra referenceDetailsContainer - da den også findes (flere gange) i referenceListContainer
			refTitel = dojo.byId('referenceTitel');
			refTitel.innerHTML = '<h1>' + data.titel + '</h1>';
			//Dojo.query efter beskrivelsen
			refBeskrivelse = dojo.byId('referenceBeskrivelse');
			refBeskrivelse.innerHTML = data.beskrivelse;

			dojo.byId('referenceLoading').style.display = 'none';
			dojo.query('#referenceTitel').style("display",'block');
			dojo.query('#referenceBeskrivelse').style("display",'block');
		},
		handleAs: "text", 
		content: request
	});
	
	dojo.query('.referenceThumb').forEach(function(n){
				dojo.style(n,"opacity","0.4");
				dojo.connect(n,"onmouseover",_showImg);
                dojo.connect(n,"onmouseout",_hideImg);
			}, this);

	if(elm != false) {
		dojo._fade({ node: elm, end: 0.99, duration: 100 }).play();
		activeListElement = elm;
	}
}

/*
*	Specific method for filtering type
*/
function filterType(value) {
	filter('type',value);
}

/*
*	Specific method for filtering branche
*/
function filterBranche(value) {
	filter('branche',value);
}

/*
*	Specific method for filtering funktionalitet
*/
function filterFunktionalitet(value) {
	filter('funktionalitet',value);
}

/*
*	General method for filtering data in the referenceList. 
*	it calls the server with filtering information, and 
*	the server returns the filtered data. This method calls 
*	the referenceListLoaded eventhandler when data is returned. 
*/
function refreshReferences() {
	var field = currentField;
	var value = currentValue;
	var page = currentPage;

	// mark the currently selected item with a class
	if(field == 'type' || field == 'branche' || field == 'funktionalitet') {
		var htmlid = 'tx_wreferencer_' + field;

		// remember the selected item
		selected[field] = value;

		// assign the selectedReference class to the selected item
		dojo.query('#tx_wreferencer_type .item').removeClass("selectedReference");
		dojo.query('#tx_wreferencer_branche .item').removeClass("selectedReference");
		dojo.query('#tx_wreferencer_funktionalitet .item').removeClass("selectedReference");
		dojo.query('#' + htmlid + value).addClass("selectedReference");
	}

	// hide the current (old) list of references
	var ref_list = dojo.byId('referenceListContainer');
	ref_list.innerHTML = "Henter referencer...";

	// hide the currently active reference and display the start message
	dojo.query('#referenceTitel').style("display",'none');
	dojo.byId('referenceBeskrivelse').innerHTML = '';
	dojo.byId('referencePicture').src='/fileadmin/templates/grafik/spacer.gif';
	dojo.query('#startMessage').style("display",'block');

	//dojo.byId('referenceLoading').style.display = 'block';
	request = {field: field, value: value, cmd: 'loadList', page: page};
	dojo.xhrGet({
		url: "index.php?eID=wref",
		load: function(data) {
			dojo.byId('referenceListContainer').innerHTML = data;
			setFadedImages();
			dojo.byId('referenceLoading').style.display = 'none';

			// show/hide the navigation
			var page_size = 12;
			var page = dojo.byId('reference_page').innerHTML;
			var index = dojo.byId('reference_index').innerHTML;
			var total_results = dojo.byId('reference_total').innerHTML;
			var more_results = dojo.byId('reference_more').innerHTML;

			if(total_results > page_size) {
				dojo.query('#referenceListNavigation').style("display","block");

				var back_style = (page == 0) ? 'none' : 'block';
				dojo.query('#referenceListBack').style("display",back_style);

				var next_style = (more_results == '0') ? 'none' : 'block';
				dojo.query('#referenceListNext').style("display",next_style);

				var pos = dojo.byId('navigation_position');
				pos.innerHTML = index + " af " + total_results;
			}
		},
		handleAs: "text", 
		content: request
	});
}

function referenceBack() {
	--currentPage;
	refreshReferences();
}

function referenceNext() {
	++currentPage;
	refreshReferences();
}

function filter(field, value) {
	currentPage = 0;
	dojo.query('#referenceListNavigation').style("display","none");

	currentField = field;
	currentValue = value;
	refreshReferences();
}

/*
*	dojo method for adding onload methods. The methods called in
*	the internal function are called when the page, and all js 
*	including dojo has been loaded, and the dom tree is ready. 
*	A check is made, to make sure, that the needed domNodes, 
*	exists - so that no eventhandlers are called, without the 
*	domnodes exists.
*/

var _showImg = function(e){
            dojo._fade({ node: e.target, end: 0.99, duration: 150 }).play();
    };


    var _hideImg = function(e){
            if(e.target!=activeListElement)
				dojo._fade({ node: e.target, end:0.4, duration:150 }).play();
    };

function setFadedImages()
{
	dojo.query('.referenceThumb').forEach(function(n){
                        dojo.style(n,"opacity","0.4");
                        dojo.connect(n,"onmouseover",_showImg);
                        dojo.connect(n,"onmouseout",_hideImg);
		                },this);
	
}

dojo.addOnLoad(function() {
	if(dojo.byId('referenceListContainer'))
	{
			init();
	}

	// show all references after the page has loaded
	filter('type',0);

	// if a GET parameter with an ID for a specific reference was sent,
	// show it immediately
	var reference_id = dojo.byId('reference_id').innerHTML;
	if(reference_id > 0) {
		getReferenceDetails(reference_id, false);
	}
});

/*
*	General function for getting the value of a select box. 
*/
function getSelectValue(object) {
	return object.options[object.selectedIndex].value;
}

//General function to check wether or not a variable is an array
function isArray(obj) {
   if (obj.constructor.toString().indexOf("Array") == -1)
      return false;
   else
      return true;
}