var Dom = YAHOO.util.Dom;
var EventRF = YAHOO.util.Event; // called EventRF because is was bitching with a variable of concat-js
var tagsArray_arr = new Array();
var cfcProxyJSON;
var professionsAPI;
var t ;
var timedMethodArguments_obj;
var tagReferences_obj = new Object();

// This is to shorten the Dom.get to just get()
function get(str)
{
	return Dom.get(str);
}

EventRF.on("search", "submit", preventFormSubmit);

function preventFormSubmit(e)
{
	EventRF.preventDefault(e);
}

window.onload = function()
{
	initJSONProxy();

	// Alleen nodig in talentenvertaler
	if(get('tagDescription')) {
		hideTags();
		setRedirectHelpHandler();
		setSuggestionFieldListener();
		initCurrentTags();
		setResultTextListener();
		newWindowListener();
		initButtons();
		showTranslateButton();
		setSaveSearchListener();
		if(talent) {
			initWithSuggestion(talent);
		}
	}
}

function setFocusOnField(node)
{
	if(get(node))
	{
		get(node).focus();
	}
}

// IE geeft een opmaak aan elementen die disabled zijn, dit niet niet gewenst
// In het geval van IE het disabled attribuut dus verwijderen en het default event voorkomen
function initButtons() {
		if(BrowserDetect.browser == 'Explorer') {	
			var el = get('resetDiv').getElementsByTagName("button");
			for(var i = 0; i < el.length; i++)
			{
					el[i].removeAttribute('disabled');
					disableButton(el[i].id);
			}
		}
}

function disableButton(obj) {
	btn_obj = get(obj);
	Dom.addClass(btn_obj,'disabled');
	if(BrowserDetect.browser == 'Explorer') {
		EventRF.addListener(btn_obj,'click',preventDefault);
	}
	else {
		btn_obj.setAttribute('disabled','disabled');
	}
}

function enableButton(obj) {
	btn_obj = get(obj);
	Dom.removeClass(btn_obj,'disabled');
	btn_obj.disabled = "";
	if(BrowserDetect.browser == 'Explorer') {
		EventRF.removeListener(btn_obj,'click',preventDefault);
	}
	else {
		btn_obj.removeAttribute('disabled');
	}
}

function preventDefault(e) {
	EventRF.preventDefault(e);
}


// Save Search functions
function setSaveSearchListener() 
{
	var btnSave = Dom.getElementsByClassName('zoekopdrachtopslaan');
	EventRF.addListener(btnSave, 'click', saveBox);
	EventRF.addListener('btnCloseSaveBox','click',closeSaveBox)
}

function saveBox(e) {
	//Is de input leeg dan niet submitten maar opslaan div tonen
	if(get('wfi_searchname').value == '') {
		var saveBox = Dom.getElementsByClassName("save-zoekopdracht");
		Dom.removeClass(saveBox[0],"collapsed");
		EventRF.preventDefault(e);
	}
}

function closeSaveBox(e) {
	var saveBox = Dom.getElementsByClassName("save-zoekopdracht");
	Dom.addClass(saveBox[0],"collapsed");
}


function clearResultText(e)
{
	EventRF.preventDefault(e);
	get("tagDescription").value = "";
	get("suggestionBox").style.display = "none";
	Dom.removeClass("tagDescriptionContainer","rf-shadow");
}

function showTranslateButton() {
	if(get("tagBoxList")){
		var arr = get("tagBoxList").getElementsByTagName("input");
		if(arr.length) {
			enableButton('btnTranslate');
		}
	}
}

function newWindowListener()
{
	if (Dom.getElementsByClassName("newWindow"))
	{
		var nodes = Dom.getElementsByClassName("newWindow");
		var nodesLength = nodes.length;
		var i;
		for(i = 0; i < nodesLength; i++)
		{
			nodes[i].target = "_blank";
		}
	}
}

function setResultTextListener()
{
	var items_arr = Dom.getElementsByClassName("readmore");
	if(items_arr.length) {
		EventRF.addListener(items_arr, "click", switchResultText);
	}
}

function switchResultText(e)
{
	EventRF.preventDefault(e);
	switch (this.className)
	{
		case "less":
			hideResultText(this);
			break;
		case "readmore":
			showResultText(this);
			break;
	}
}

function showResultText(item)
{
	item.className = "less";
	item.innerHTML = "<span>Inklappen</span>";
	paragraph = item.parentNode.getElementsByTagName('p')[0];
	Dom.removeClass(paragraph,'collapsed');
}

function hideResultText(item)
{
	item.className = "readmore";
	item.innerHTML = "<span>Lees meer</span>";
	paragraph = item.parentNode.getElementsByTagName('p')[0];
	Dom.addClass(paragraph,'collapsed');
}

function hideTags()
{
	// Verberg 
	var nodes = Dom.getElementsByClassName('hide');
	for ( var i = 0; i < nodes.length; i++)
	{
		nodes[i].style.display = "none";
	}
}

function setRedirectHelpHandler()
{
	if (get("helpRedirect"))
	{
		get("helpRedirect").onclick = function()
		{
			get("redirectInner").style.display = "none";
			get("helpText").style.display = "block";
			return false;
		}
		get("helpClose").onclick = function()
		{
			get("redirectInner").style.display = "block";
			get("helpText").style.display = "none";
			return false;
		}
	}
}

function setSuggestionFieldListener()
{
	
	EventRF.addListener("tagDescription", "keyup", tagDescriptionKeyUpHandler);
	EventRF.addListener("bodyContainer", "click", hideSuggestionBox);
}

function hideSuggestionBox(e) {
	//Verberg met timeout, anders is de suggestielijst al weg voor dat de onclick uitgevoerd kan worden
	if(get("suggestionBox")){
		setTimeout('get("suggestionBox").style.display = "none"',250)
		Dom.removeClass("tagDescriptionContainer","rf-shadow");
	}
}

function tagDescriptionKeyUpHandler(e)
{
	if (this.value.length > 1)
	{
		if(e.keyCode == 38) {
			handleArrowUp();
		}
		else if (e.keyCode == 13){
			selectSuggestion();
		}
		else if (e.keyCode == 40){
			handleArrowDown();
		}
		else {
			clearTimeout(t);
			timedMethodArguments_obj = new Object();
			var uniqueKey_str = new Date().getTime().toString();
			timedMethodArguments_obj[uniqueKey_str] = {method: getTagSuggestions,
			arguments: [this.value]};
			t = setTimeout("handleTimer('" + uniqueKey_str + "')", 300);
		}
	} else
	{
		get("suggestionBox").style.display = "none";
		Dom.removeClass("tagDescriptionContainer","rf-shadow");
	}
}

function selectSuggestion() {
	var node = Dom.getElementsByClassName('ac_selected');
	if(node.length == 1) {
		ahref = node[0].getElementsByTagName('a')[0];
		//fireEvent(ahref[0],'click');
		
		
		// because the fireEvent() above doesn't work anymore, we'll call it manual ..
		var suggestionContainer_obj = get("tagBoxContainer");
		var btnTranslate_obj = get("btnTranslate");
		suggestionContainer_obj.className = "wizard-step2";
		
		//Als info open is dan sluiten
		var oToggleInfoContainer = document.getElementById('toggleInfoContainer')
		if(Dom.hasClass(oToggleInfoContainer,'open1')){
			toggleInfoHelpContainers('info');
		}
		if(Dom.hasClass(oToggleInfoContainer,'open2')){
			toggleInfoHelpContainers('help');
		}
		
		enableButton('btnTranslate');
	
		var professionId_str = ahref.className;
		var professionDescription_str = ahref.innerHTML;
		var tagsItem_obj = {
			id :professionId_str,
			description :professionDescription_str
		};
		tagsArray_arr.push(tagsItem_obj);
		tagAdded();
		setTagBox();
		Dom.removeClass("tagDescriptionContainer","rf-shadow");
	}
}
/*
function fireEvent(element,event){
   if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}*/

function handleArrowUp() {
	var node = Dom.getElementsByClassName('ac_selected');
	var arr = get('suggestionBoxList').getElementsByTagName('li');
	var setPrevious = false;
	if(node.length == 0) {
		arr[arr.length-1].className = 'ac_selected';
	}
	else {
		for ( var i = arr.length-1; i >= 0; i--)
		{
			if(setPrevious) {
				arr[i].className = 'ac_selected';
				arr[i].scrollIntoView(false);
				setPrevious = false;
			}
			else if(arr[i].className == 'ac_selected') {
				arr[i].className = '';
				setPrevious = true;
			}
		}
	}
}

function handleArrowDown() {
	var node = Dom.getElementsByClassName('ac_selected');	
	var arr = get('suggestionBoxList').getElementsByTagName('li');
	var setNext = false;
	if(node.length == 0) {
		arr[0].className = 'ac_selected';
	}
	else {
		for ( var i = 0; i < arr.length; i++)
		{
			if(setNext) {
				arr[i].className = 'ac_selected';
				arr[i].scrollIntoView(false);
				setNext = false;
			}
			else if(arr[i].className == 'ac_selected') {
				arr[i].className = '';
				setNext = true;
			}
		}
	}
}

function handleTimer(uniqueKey_str) {
	var info_obj = timedMethodArguments_obj[uniqueKey_str];
	info_obj.method.apply(this, info_obj.arguments);
}

function activateTextField() {
	if (get("tagDescription"))
	{
		get("tagDescription").style.display = "inline";
	}
}

function getActualResult(o)
{
	return eval("(" + o.responseText + ")");
}

function initJSONProxy()
{
	cfcProxyJSON = new fly.CFCProxyJSON();
	cfcProxyJSON.init("none", {
		success :handleSettingsSuccess,
		failure :handleFailure
	}, "/talentenvertaler/");
}

function handleFailure(o)
{
	alert("Error occurred while calling cfcProxyJSON.init()");
}

function handleSettingsSuccess(o)
{
	professionsAPI = cfcProxyJSON
			.getService("fly.TICC2.modules.professions.ProfessionsAPI");
	activateTextField();
}

function getTagSuggestions(searchString)
{
	setLoader();
	
	var callback_obj = {
		success :getTagSuggestionsResult,
		failure :handleFailure,
		scope :this
	}
	var suggestionVO = new Object();
	suggestionVO.__type__ = "fly.TICC2.modules.professions.VOs.SuggestionVO";
	suggestionVO.suggestionSearchString = searchString;
	suggestionVO.Approved = 1;
	
	var queryVO = new Object();
	queryVO.__type__ = "fly.DAOs.VOs.QueryVO";
	queryVO.OrderBy = "Tags_approved, LEN(Tags_description) ASC";
	
	var arguments_obj = {
		suggestionVO :suggestionVO,
		queryVO :queryVO
	}
	professionsAPI.callMethod("getTagSuggestionsAsArray", callback_obj, arguments_obj);
}

function setLoader() {
	//Region itagDescription input bepalen
	var inputRegion = Dom.getRegion('tagDescription');
	var y = inputRegion.bottom;
	var x = inputRegion.left;
	
	
	
	var suggestionContainer_obj = get("suggestionBox");
	Dom.setStyle(suggestionContainer_obj,'top',y-143+'px');	// nu nog maar even zo, wachten op definitieve design
	var innerHtmlSting_str = "";

	suggestionContainer_obj.style.display = "block";
	Dom.addClass("tagDescriptionContainer","rf-shadow");

	innerHtmlSting_str = innerHtmlSting_str + "<div class='rf-shadow'></div>"; 
	innerHtmlSting_str = innerHtmlSting_str + "<div class='loader'><img src='assets/images/ajax-loader.gif' /></div>";
	
	suggestionContainer_obj.innerHTML = innerHtmlSting_str;
}

function getTagSuggestionsResult(o)
{
	var result_obj = getActualResult(o);
	if (result_obj.error)
	{
		alert("Het is momenteel niet mogelijk suggesties op te halen, probeert u het later nog eens.");
		return;
	}
	var items_arr = result_obj.data;
	setSuggestionBox(items_arr);
}

function setSuggestionBox(items_arr)
{
	//Region itagDescription input bepalen
	var inputRegion = Dom.getRegion('tagDescription');
	var y = inputRegion.bottom;
	var x = inputRegion.left;
	
	var suggestionContainer_obj = get("suggestionBox");
	Dom.setStyle(suggestionContainer_obj,'top',y-143+'px');	// nu nog maar even zo, wachten op definitieve design
	var innerHtmlSting_str = "";
	
	if (items_arr.length > 0)
	{
		innerHtmlSting_str = innerHtmlSting_str + "<div class='rf-shadow'></div><ul id='suggestionBoxList'>";
		Dom.addClass("tagDescriptionContainer","rf-shadow");
		suggestionContainer_obj.style.display = "block";
		for ( var i = 0; items_arr.length > i; i++)
		{
			var compareBool_bool = false;
			for ( var j = 0; tagsArray_arr.length > j; j++)
			{
				if (!items_arr[i].ID.indexOf(tagsArray_arr[j].id))
				{
					compareBool_bool = true;
				}
			}
			if (!compareBool_bool)
			{
				innerHtmlSting_str = innerHtmlSting_str
						+ "<li><a href='/' class='"
						+ items_arr[i].ID
						+ "'><em>"
						+ items_arr[i].description + "</em></a></li>";
			}
		}
		innerHtmlSting_str = innerHtmlSting_str + "</ul>";
		suggestionContainer_obj.innerHTML = innerHtmlSting_str;
		setAddSuggestionHandler();
	} else
	{
		suggestionContainer_obj.style.display = "block";
		Dom.addClass("tagDescriptionContainer","rf-shadow");

		innerHtmlSting_str = innerHtmlSting_str + "<div class='rf-shadow'></div>"; 
		innerHtmlSting_str = innerHtmlSting_str + "<div class='nodata'><h1><span class='text-color-red'>ik</span> <span class='text-color-yellow'>kan</span>";
		innerHtmlSting_str = innerHtmlSting_str + "dit talent nog niet vinden in de database</h1>";
		innerHtmlSting_str = innerHtmlSting_str + "<ul>";
		innerHtmlSting_str = innerHtmlSting_str + "<li><span class='number'>1</span> Probeer een deel van het woord dat je bedoelt. Kijk bij de suggestie eronder.</li>"
		innerHtmlSting_str = innerHtmlSting_str + "<li><span class='number'>2</span> Probeer een andere omschrijving van je talent.</li>"
		innerHtmlSting_str = innerHtmlSting_str + "<li><span class='number'>3</span> Controleer de spelling.</li>"
		innerHtmlSting_str = innerHtmlSting_str + "</ul>"
		innerHtmlSting_str = innerHtmlSting_str + "</div>";
		
		suggestionContainer_obj.innerHTML = innerHtmlSting_str;
		setErrorFormListener();
	}
}

function setErrorFormListener()
{
	EventRF.on("errorForm", "submit", submitAddTagForm);
}

function submitAddTagForm(e)
{
	YAHOO.util.Event.preventDefault(e);
	var callback = 
	{
		success: tagAdded,
		failure: tagNotAdded
	};
	YAHOO.util.Connect.setForm("errorForm");
	var transaction = YAHOO.util.Connect.asyncRequest('POST', "?fuseaction=insertTagSuggestion", callback);
}

function tagAdded()
{
	get("tagDescription").value = "";
	get("suggestionBox").innerHTML = "";

}

function setAddSuggestionHandler()
{
	var elements_arr = Dom.get("suggestionBoxList").getElementsByTagName("a");
	EventRF.addListener(elements_arr, "click", addSuggestionToList);
	EventRF.addListener(elements_arr, "mouseover", selectedAutoComplete);
}

function selectedAutoComplete(e) {
	//huidige selectie verwijderen
	var node = Dom.getElementsByClassName('ac_selected');
	if(node.length == 1) node[0].className = '';
	//nieuwe toevoegen
	this.parentNode.className = 'ac_selected';
}

function addSuggestionToList(e)
{
	var suggestionContainer_obj = get("tagBoxContainer");
	var btnTranslate_obj = get("btnTranslate");
	suggestionContainer_obj.className = "wizard-step2";
	
	//Als info open is dan sluiten
	var oToggleInfoContainer = document.getElementById('toggleInfoContainer')
	if(Dom.hasClass(oToggleInfoContainer,'open1')){
		toggleInfoHelpContainers('info');
	}
	if(Dom.hasClass(oToggleInfoContainer,'open2')){
		toggleInfoHelpContainers('help');
	}
	
	EventRF.preventDefault(e);
	enableButton('btnTranslate');

	var professionId_str = this.className;
	var professionDescription_str = this.innerHTML;
	var tagsItem_obj = {
		id :professionId_str,
		description :professionDescription_str
	};
	tagsArray_arr.push(tagsItem_obj);
	tagAdded();
	setTagBox();
	Dom.removeClass("tagDescriptionContainer","rf-shadow");

}

function setTagBox()
{
	var innerHtmlSting_str = "";
	innerHtmlSting_str = innerHtmlSting_str + "<ul class='talents' id='tagBoxList'>";
	for ( var i = 0; tagsArray_arr.length > i; i++)
	{
		innerHtmlSting_str = innerHtmlSting_str + "<li><input type='hidden' value='"+ tagsArray_arr[i].id + "' id='frmTagProfileIDs" + tagsArray_arr[i].id + "' name='frmTagProfileIDs' />";
		innerHtmlSting_str = innerHtmlSting_str + "<strong class='sifr-talent'>" + stripHTML(tagsArray_arr[i].description) + "</strong>";
		innerHtmlSting_str = innerHtmlSting_str + "<a title='Verwijder dit talent' href='?fuseaction=removeTagFromProfile&Tag_ID=" + tagsArray_arr[i].id + "' class='remove'><span>Verwijder talent</span></a></li>";
		
	}
	
	//Aanvullen tot minimaal 4 items
	var fillItems = 4 - tagsArray_arr.length;
	for ( var i = 0; fillItems > i; i++)
	{
		innerHtmlSting_str = innerHtmlSting_str + "<li class='dummy'><span>&nbsp;</span></li>";
	}
	//4 of meer items dan extra blok toevoegen
	if(tagsArray_arr.length >= 4) { innerHtmlSting_str = innerHtmlSting_str + "<li class='dummy'><span>&nbsp;</span></li>"; } 
	innerHtmlSting_str = innerHtmlSting_str + "</ul>";
	get("tagBox").innerHTML = innerHtmlSting_str;
	addTagRemovelisteners();
	

	//sifr uitvoeren
	sIFR.replace(ikkan, {
		selector: '.sifr-talent',
		wmode:'opaque',
	 	css: '.sIFR-root { background-color: #f7b322; font-size: 13.5px; }'
	});
}

function addTagRemovelisteners()
{
	var elements_arr = Dom.get("tagBoxList").getElementsByTagName("a");
	EventRF.addListener(elements_arr, "click", removeTagFromList);
}

function removeTagFromList(e)
{

	EventRF.preventDefault(e);
	for ( var k = 0; tagsArray_arr.length > k; k++)
	{
		if (!tagsArray_arr[k].id.indexOf(this.parentNode.getElementsByTagName("input")[0].value))
		{
			tagsArray_arr.splice(k, 1);
		}
	}
	if (tagsArray_arr.length == 0)
	{
		var innerHtmlSting_str = "<ul class='talents' id='tagBoxList'>";
		innerHtmlSting_str = innerHtmlSting_str + "<li class='dummy'><span>&nbsp;</span></li>";
		innerHtmlSting_str = innerHtmlSting_str + "<li class='dummy'><span>&nbsp;</span></li>";
		innerHtmlSting_str = innerHtmlSting_str + "<li class='dummy'><span>&nbsp;</span></li>";
		innerHtmlSting_str = innerHtmlSting_str + "<li class='dummy'><span>&nbsp;</span></li></ul>";
		
		get("tagBox").innerHTML = innerHtmlSting_str;
		var suggestionContainer_obj = get("tagBoxContainer");
		suggestionContainer_obj.className = "wizard-step2 disabled";
		//btnTranslate_obj = get('btnTranslate');
		disableButton('btnTranslate');
		//Dom.addClass(btnTranslate_obj,'disabled');
		//btnTranslate_obj.setAttribute('disabled','disabled');

	} else
	{
		setTagBox();
	}
	if (get("suggestionBoxList"))
	{
		getTagSuggestions(get("tagDescription").value);
	}
}

function initCurrentTags()
{
	if (get("professionsList"))
	{
		currentItems_arr = get("professionsList").getElementsByTagName("li");
		for ( var i = 0; currentItems_arr.length > i; i++)
		{
			if (currentItems_arr[i].className.indexOf("divider"))
			{
				var professionId_str = currentItems_arr[i]
						.getElementsByTagName("input")[0].value;
				var professionDescription_str = currentItems_arr[i]
						.getElementsByTagName("span")[0].innerHTML;
				var tagsItem_obj = {
					id :professionId_str,
					description :professionDescription_str
				};
				tagsArray_arr.push(tagsItem_obj);
			}
		}
		setTagBox();
	}
}

//Vanuit een banner gelijk starten met een talent
function initWithSuggestion(suggestion) {
	var descr = get('tagDescription');
	Dom.removeClass(descr,'tagDescriptionDefault');
	descr.value = suggestion;
	fireEvent(descr,'keyup');
	descr.focus();
	
	// because the fireEvent() above doesn't work anymore, we'll call it manual ..
	clearTimeout(t);
	timedMethodArguments_obj = new Object();
	var uniqueKey_str = new Date().getTime().toString();
	timedMethodArguments_obj[uniqueKey_str] = {
		method: getTagSuggestions,
		arguments: [suggestion]
	};
	t = setTimeout("handleTimer('" + uniqueKey_str + "')", 300);
}

function goToTalentvertaler(result) {
	if(!result){ var url = "index.cfm?fuseaction=start";}
	else { var url = "index.cfm?fuseaction=results";}
		
	location.href = url;		
}

function toggleInfoHelpContainers(type) {
		var oToggleInfoContainer = document.getElementById('toggleInfoContainer');
		var oInfoSpanHref = document.getElementById('infoSpanHref');		
		var oHelpSpanHref = document.getElementById('helpSpanHref');				
		var oInfoDivContainer = document.getElementById('infoDivContainer');		
		var oHelpDivContainer = document.getElementById('helpDivContainer');		
		if(type == 'info'){
			if(Dom.hasClass(oToggleInfoContainer,'open1')){ //we gaan info en help verbergen
				Dom.removeClass(oToggleInfoContainer,'open1');
				Dom.removeClass(oToggleInfoContainer,'open2');		
				Dom.addClass(oInfoDivContainer,'collapsed'); 
				Dom.addClass(oHelpDivContainer,'collapsed'); 				
				oInfoSpanHref.innerHTML='informatie tonen';
				oHelpSpanHref.innerHTML='uitleg tonen';
			} else {
				Dom.addClass(oToggleInfoContainer,'open1'); //openen
				Dom.removeClass(oToggleInfoContainer,'open2');	
				Dom.removeClass(oInfoDivContainer,'collapsed'); 
				Dom.addClass(oHelpDivContainer,'collapsed'); 								
				oInfoSpanHref.innerHTML='informatie verbergen';						}			
				oHelpSpanHref.innerHTML='uitleg tonen';
		}
		if(type == 'help' || type == 'helpInline'){
			if(Dom.hasClass(oToggleInfoContainer,'open2')){//we gaan info en help verbergen
				Dom.removeClass(oToggleInfoContainer,'open1');
				Dom.removeClass(oToggleInfoContainer,'open2');	
				Dom.addClass(oInfoDivContainer,'collapsed'); 
				Dom.addClass(oHelpDivContainer,'collapsed'); 							
				oHelpSpanHref.innerHTML='uitleg tonen';
				oInfoSpanHref.innerHTML='informatie tonen';
			} else {
				Dom.addClass(oToggleInfoContainer,'open2');
				Dom.removeClass(oToggleInfoContainer,'open1');				
				Dom.addClass(oInfoDivContainer,'collapsed');
				Dom.removeClass(oHelpDivContainer,'collapsed'); 					
				oHelpSpanHref.innerHTML='uitleg verbergen';
				oInfoSpanHref.innerHTML='informatie tonen';
			}						
		}			
}

function stripHTML(oldString) {

   var newString = "";
   var inTag = false;
   for(var i = 0; i < oldString.length; i++) {
   
        if(oldString.charAt(i) == '<') inTag = true;
        if(oldString.charAt(i) == '>') {
              if(oldString.charAt(i+1)=="<")
              {
              		//dont do anything
		}
		else
		{
			inTag = false;
			i++;
		}
        }
        if(!inTag) newString += oldString.charAt(i);
   }

   return newString;
}