// Copyright 2009 - Bastiaan Nijkamp
// weSENSit Goor


/*

////////////////////////////////
 WERKING CODE:
////////////////////////////////

1. Maak een nieuwe instantie aan voor elke dropdown lijst die je wilt weergeven, geef hier een UNIEKE naam aan.
   doe dit via de methode "dropdownInstance" en geef de volgende velden op (in onderstaande volgorde)
   
   - de UNIEKE naam van de nieuwe dropdown instantie.
   - het id van de div (zonder #) dat pagina vullend wordt weergegeven om de dropdown weer te verbergen
   - het id van de div (zonder #) dat gaat dienen als lijst met dropdown items. 
   - het id van de div (zonder #) waarin de tekst van het geselecteerde item wordt weergegeven.
   - het id van het element (zonder #) dat gebruikt wordt om de dropdown uit te schuiven (deze MOET naast de voorgaande div staan)
   
2. Voeg elementen toe aan de dropdownbox doe dit via de methode "dropdownAdd" en geef de volgende velden op (in onderstaande volgorde)
	
	- de UNIEKE naam van de dropdown instantie die gebruikt moet worden.
	- de naam (tekst) van het nieuwe dropdown item
	- de waarde van het nieuwe dropdown item
	- true/false om het item te selecteren/niet te selecteren.

3. hang de onclick actie dropdown("<instantienaam>",1) op elk element dat de dropdown moet gaan tonen 
   (doorgaans de valuediv en het buttonelement) en hang de onclick actie dropdown("<instantienaam>",0)
   op de hider div.
   
4. de geselecteerde waarde van de dropdown is uit te lezen via dropdownValue("<instantienaam>")

*/

// Houder voor alle items van de dropdownlijst
var dropdownItems 		= new Array();
var dropdownInstances	= new Array();
var dropdownSelected 	= new Array();
var dropdownPrevious	= new Array();

var prevListBackup		= new Array();

// variabelen voor de ajax variant
var ajaxTimer;

// speed fixje.
// 0 = instanceName
// 1 = instanceID
// 2 = element
var dropdownLastUsed	= new Array();
var dropdownVisible		= false;

// Maak een nieuwe dropdown instantie.
function dropdownInstance(instanceName, hiderDiv, dropdownDiv, valueDiv, buttonElement) {

	//log("Dropdown Instance called, instance " + instanceName + " created.");

	// we voegen de nieuwe instantie toe aan de lijst met instanties.
	dropdownInstances[dropdownInstances.length] = new Array(instanceName,hiderDiv,dropdownDiv,valueDiv,buttonElement);
	
	// we maken ook een plekje aan voor deze instantie in de dropdownItems array.
	dropdownItems[dropdownItems.length] = new Array();
	
	// De vorige waarde die we willen herstellen. :)
	dropdownPrevious[dropdownPrevious.length] = -1;
	
	// we gaan ook even de selected op -1 zetten (niets geselecteerd)
	// voor deze instantie.
	dropdownSelected[dropdownSelected.length] = -1;
}

// Haal een instantie id op aan de hand van het id van
// de instantie.
function getDropDownByInstance(instanceName) {
	
	//log("getDropDownByInstance called -> Instance: " + instanceName);
	
	for(i=0;i < dropdownInstances.length;i++) {
		if(dropdownInstances[i][0] == instanceName) 
			return i;
	}
	
	warn("getDropDownByInstance failed to find instance -> Instance: " + instanceName);
	// als we niets vinden returnen we -1.
	return -1;
}


function dropdown(instanceName,show,ajaxUrl) {
	
	//log("dropdown called -> Instance: " + instanceName + ", show:" + show + ", ajaxUrl: " + ajaxUrl);

	var optClass = "";
	var instanceID = getDropDownByInstance(instanceName);
		
	var hBox = $('#' + dropdownInstances[instanceID][1]); // De box die zorgt voor het verbergen van de dropdown box
	var dBox = $('#' + dropdownInstances[instanceID][2]); // Dropdown lijst
	var sBox = $('#' + dropdownInstances[instanceID][3]); // Veld voor geselecteerde waarde dropdown
	var tStr = "<div>";

	if(ajaxUrl && ajaxUrl != 'doReload') {
		
		if(dropdownVisible == false) {

			dBox.html("&nbsp;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='/images/ajax-loader.gif' alt='loading'/> Laden...<br/>&nbsp;");
			
			// Zet de positie van de box goed.
			dropdownPosition(instanceName);	
			
			if(sBox[0].tagName.toLowerCase() == 'input')  sBox.val("");
			else					 		             sBox.html("");					
					
			dBox.show();
			dBox.scrollTop(0);
						
		}
		
		if(show == "refresh" || dropdownVisible == false) {
			
			dropdownVisible = true;	
			
			// dropdown leeg machen, jawohl.
			dropdownEmpty(instanceName);
	
			$.getScript(ajaxUrl + "&value=" + sBox.val(), function() {
				dropdown(instanceName,'1','doReload');
			});
			
		}
		
		
	} else if(show && (!dropdownVisible || ajaxUrl == 'doReload')) {
		
		var uid = dropdownPrevious[instanceID];
		
		if(uid != -1) {
			//info("uid is " + uid);
			dropdownSelected[instanceID] = restoreSelectedID(instanceID);
		} 
		
		// Ga uit alle items voor de lijst een html structuur samenstellen
		for(i=0;i < dropdownItems[instanceID].length;i++) {
			
			var tVal  = dropdownItems[instanceID][i].value;
			var tName = dropdownItems[instanceID][i].name;
			
			// Kijken of een item geselecteerd moet worden
			if((dropdownSelected[instanceID] == -1 && i == 0) || dropdownSelected[instanceID] == i) {	
				//log("setting dropSelected class on id " + i);
				optClass = "class='dropSelected' ";
			} else {
				optClass = "";
			}
		 
			var cutN = tName;
			if(cutN.length > 20) cutN = cutN.substr(0,20) + "..";
			
			// Voeg de nieuwe link toe aan de dropdown list
			tStr += "<a href='#' "+optClass+" onclick='return dropdownSelect(\""+ instanceName +"\","+ i +")' title='"+ tName +"'>&nbsp;"+ cutN +"</a>";
	
		}
					
		tStr += "</div>";
		dBox.html(tStr);
		
		// Zet de positie van de box goed.
		dropdownPosition(instanceName);
		hBox.show();
		
		// IE6 height fallback
		if(dropdownItems[instanceID].length >= 10) dBox.css("height",200);
		else									   dBox.css("height","auto");
		
		//dBox.slideDown("high");
		dBox.show();
		dBox.scrollTop(0);
		
		// we markeren even dat we hem al uitgeklappert hebben :)
		dropdownVisible = true;
		

	} else if(!show) {
		hBox.hide();
		dBox.hide();
		
		// en we markeren dat we hem verbergen.
		dropdownVisible = false;
		
	}
}

function restoreSelectedID(instanceID) {
	
	for(y=0;y < dropdownItems[instanceID].length;y++) {
		//log("trying to match " + dropdownItems[instanceID][y].value + " to " + dropdownPrevious[instanceID]); 
		if(dropdownItems[instanceID][y].value == dropdownPrevious[instanceID])	return y;
	}
		
	warn("restoreSelectedID returns -1, failed to find match.");		
	return -1;
	
}

function dropdownPosition(instanceName) {
	
	var instanceID = getDropDownByInstance(instanceName);

	var hBox = $('#' + dropdownInstances[instanceID][1]); // De box die zorgt voor het verbergen van de dropdown box
	var dBox = $('#' + dropdownInstances[instanceID][2]); // Dropdown lijst
	var sBox = $('#' + dropdownInstances[instanceID][3]); // Veld voor geselecteerde waarde dropdown
	var bBox = $('#' + dropdownInstances[instanceID][4]);  // Knop voor tonen dropdown		
	
	// Padding van dropdown lijst
	var pleft = 1;
	var pright = 1;
	
	// Haal de positie op van het element waar de dropdown lijst
	// onder moet verschijnen
	var position = sBox.offset();
		
	// Haal de breedte en de hoogte op van het element waar de dropdown lijst
	// onder moet
	var width	 = (sBox.outerWidth() + bBox.outerWidth()) - (pleft + pright);
	var height	 = sBox.outerHeight();
	
	// Geef de dropdownlist een breedte mee.
	dBox.width(width);
	
	// Positioneer de dropdown list	
	dBox.css('left',position.left + "px");
	dBox.css('top',(position.top + height) + "px");	
			
	// Laat de achterliggende "menu hider" paginavullend zijn werk doen. 		
	hBox.height($(document).height());
}

// leeg de opgegeven dropdownEmpty
function dropdownEmpty(instanceName) {
	
	var instanceID = getDropDownByInstance(instanceName);
	
	dropdownSelected[instanceID] = -1;
	dropdownItems[instanceID] = new Array(); 
}

function dropdownAdd(instanceName,name,value,selected,ignoreUpdate) {

	if(dropdownLastUsed[0] == instanceName) {
		
		var instanceID = dropdownLastUsed[1];
		var sBox 	   = dropdownLastUsed[2];
		
	} else {
		var instanceID = getDropDownByInstance(instanceName);
		var sBox 	   = $('#' + dropdownInstances[instanceID][3]); // Veld voor geselecteerde waarde dropdown
		
		dropdownLastUsed[0] = instanceName;
		dropdownLastUsed[1] = instanceID;
		dropdownLastUsed[2] = sBox;
	}
	
	var dropItem 		= new Object();
	dropItem.name 		= name;
	dropItem.value 		= value;
	
	// voeg het object toe aan de array.
	dropdownItems[instanceID][dropdownItems[instanceID].length] = dropItem;	
	
	// Kijk of we dit item als geselecteerd moeten aanmerken
	if(selected || dropdownSelected[instanceID] == -1 && dropdownPrevious[instanceID] == -1) {
		
		/*info("No selected item in set, selecting item for instance: " + instanceName);
		info("Selecting item '"+ name +"' with value '"+value+"'");*/
		
		dropdownSelected[instanceID] = dropdownItems[instanceID].length;
		dropdownPrevious[instanceID] = dropItem.value; 
		
		if(!ignoreUpdate) { 
			if(sBox[0].tagName.toLowerCase() == 'input')  sBox.val(name);
			else					 		             sBox.html(name);
		}
		
		// We slaan hier alvast de backup op, zodat we in elk geval dit item hebben. 
		// voor de cancel functie.
		prevListBackup	 = dropdownItems[instanceID];
	}
	

}

// Selecteert vorig item.
function dropdownCancel(instanceName,ajaxUrl) {
	
	//log("dropdownCancel called for instance: " + instanceName);
	clearTimeout(ajaxTimer);	
	
	var instanceID = getDropDownByInstance(instanceName);
	var uid = dropdownPrevious[instanceID];
	
	dropdownItems[instanceID] = prevListBackup;
	
	if(uid != -1) {
		for(t=0;t< dropdownItems[instanceID].length;t++) {
			if(dropdownItems[instanceID][t].value == uid) {
				dropdownSelect(instanceName,t);
				//info("dropdownCancel found match for uid: " + uid + " in instance: " + instanceName);
				return true;
			}
		}
	}	
	
	warn("dropdownCancel failed to find match for uid: " + uid + " in instance: " + instanceName);
	return false;
	
}

function dropdownSelect(instanceName,id) {

	var instanceID = getDropDownByInstance(instanceName);
	var sBox 	   = $('#' + dropdownInstances[instanceID][3]); // Veld voor geselecteerde waarde dropdown
	
	dropdownSelected[instanceID] = id;
	
	// backup, voor het selecten :)
	dropdownPrevious[instanceID] = dropdownItems[instanceID][id].value;
	prevListBackup 				 = dropdownItems[instanceID];
	
	if(sBox[0].tagName.toLowerCase() == 'input')  sBox.val(dropdownItems[instanceID][id].name);
	else					 		  			  sBox.html(dropdownItems[instanceID][id].name);	

	dropdown(instanceName,0);
	
	if(instanceName == "categorie") search();
	return false;
}

function dropdownValue(instanceName) {

	var instanceID = getDropDownByInstance(instanceName);

	// html_entity_decode vereist php.js!
	// http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_html_entity_decode/
	return html_entity_decode(dropdownItems[instanceID][(dropdownItems[instanceID] < 0) ? 0 : dropdownSelected[instanceID]].value);
}

function dropdownKeyDown(instanceName,ajaxUrl) {
		
	clearTimeout(ajaxTimer);
	ajaxTimer = setTimeout("dropdown('" + instanceName + "','refresh','"+ ajaxUrl +"')",1000);
}

$(window).resize(function(){
  for(i=0;i < dropdownInstances.length;i++) {
	  if($('#' + dropdownInstances[i][2]).css("display") == "block") {
		// Zet de positie van de box goed.
		dropdownPosition(dropdownInstances[i][0]);
	  }
  }
});