/* presentation.js
 *
 * Defines presentation behaviours (primarily mouse events etc) for the ELT site 
 * Note: binds everything to the window.onload event
 */

/* Uses following vars defined elsewhere: 
 *
 *     sSearchText (search.js)
 */

/* event counters for regional sites menu */
var iOvCnt = 0;
var iFoCnt = 0;

/* for search */
var bSearchIsFocused = false;

/********************
 *   branding bar   *
 ********************/

function regFocus(sArg) {
    if (sArg == 'over') { iOvCnt++; }
    if (sArg == 'focus') { iFoCnt++; }
    o = document.getElementById("regional-sites");
    o.style.backgroundPosition = "bottom right";
    return false;
}

function regBlur(sArg) {
    if (sArg == 'over') { iOvCnt--; }
    if (sArg == 'focus') { iFoCnt--; }
    if (iOvCnt <= 0 && iFoCnt <= 0) {
	iOvCnt = 0; iFoCnt = 0;
	o = document.getElementById("regional-sites");
	o.style.backgroundPosition = "top right";
    }
    return false;
}


function addHandlers() {
    /* The check for DOM methods is done once here so no need in individual event handlers */

    if (document.getElementById) {

	/* regional sites menu */

o = document.getElementById("regional-sites");

	o.onmouseover = function() { regFocus('over') }
	o.onfocus = function() { regFocus('focus') }
	o.onmouseout = function() { regBlur('over') }
	o.onblur = function() { regBlur('focus') }

o = document.getElementById("countries");

	o.onmouseover = function() { regFocus('over') }
	o.onfocus = function() { regFocus('focus') }
	o.onmouseout = function() { regBlur('over') }
	o.onblur = function() { regBlur('focus') }

	/* basket icon */

o = document.getElementById("basket").firstChild;

	o.onmouseover = function() { this.style.backgroundPosition = "bottom right"; }
	o.onfocus = function() { this.style.backgroundPosition = "bottom right"; }
	o.onblur = function() { this.style.backgroundPosition = "top left"; }
	o.onmouseout = function() { this.style.backgroundPosition = "top left"; }

	/* help icon */

o = document.getElementById("help").firstChild;

	o.onmouseover = function() { this.style.backgroundPosition = "bottom right"; }
	o.onfocus = function() { this.style.backgroundPosition = "bottom right"; }
	o.onblur = function() { this.style.backgroundPosition = "top left"; }
	o.onmouseout = function() { this.style.backgroundPosition = "top left"; }

	
	/* Search box */

o = document.getElementById("searchButton");

	o.onmouseover = function() {
	    document.getElementById("searchField").style.borderColor = "#f29b00";
	    this.style.backgroundPosition = "bottom right";
	}
	o.onfocus = function() { this.style.backgroundPosition = "bottom right"; }
	o.onblur = function() { this.style.backgroundPosition = "top right"; }
	o.onmouseout = function() {
	    if (!document.bSearchIsFocused) { document.getElementById("searchField").style.borderColor = "#c0c0c0"; }
	    this.style.backgroundPosition = "top right"; 
	}

o = document.getElementById("searchField");

	o.onfocus = function() { this.style.backgroundColor = "#f2ebbb";
				 this.style.borderColor = "#f29b00"; 
				 if (this.value == sSearchText) { this.value=''; }
				 document.bSearchIsFocused = true;
	}
	o.onblur = function() { this.style.backgroundColor = "white";
				this.style.borderColor = "#c0c0c0";  
				if (this.value == '') { this.value = sSearchText; }
				 document.bSearchIsFocused = false;
	}
	o.onmouseover = function() {
	    document.getElementById("searchButton").style.backgroundPosition = "bottom right";
	    this.style.borderColor = "#f29b00";
	}
	o.onmouseout = function() {
	    document.getElementById("searchButton").style.backgroundPosition = "top right";
	    if (!document.bSearchIsFocused) { this.style.borderColor = "#c0c0c0"; }
	}

	/* dictionary box */

o = document.getElementById("searchword");

	o.onfocus = function() { this.style.backgroundColor = "#ffffff";
				 this.style.borderColor = "#cc0000"; 
				 if (this.value == 'enter a word') { this.value=''; }


	}
	o.onblur = function() { this.style.backgroundColor = "#d8d8ff";
				this.style.borderColor = "#000099";  
				if (this.value == '') { this.value = 'enter a word'; }
	}


    }
}





window.onload = function(){
    addHandlers();
}
