we're using to display the lookup results, and create the
if it doesn't already exist.
*/
getDiv: function(divID)
{
if (!this.globalDiv)
{
// if the div doesn't exist on the page already, create it
if (!document.getElementById(divID)) {
var newNode = document.createElement("div");
if (this.listStyle == "")
newNode.className = "_listStyle";
else
newNode.className = this.listStyle;
newNode.setAttribute("id", divID);
document.body.appendChild(newNode);
}
// set the globalDiv reference
this.globalDiv = document.getElementById(divID);
// figure out where the top corner of the div should be, based on the
// bottom left corner of the input field
var x = this.queryField.offsetLeft;
var y = this.queryField.offsetTop + this.queryField.offsetHeight;
var parent = this.queryField;
while (parent.offsetParent) {
parent = parent.offsetParent;
x += parent.offsetLeft;
y += parent.offsetTop;
}
//x+=1
// add some formatting to the div, if we haven't already
if (!this.divFormatted)
{
this.globalDiv.style.backgroundColor = this.DIV_BG_COLOR;
if (this.listStyle == "")
{
this.globalDiv.style.fontFamily = "Verdana, Geneva, Arial, Helvetica, sans-serif";
this.globalDiv.style.fontSize = "90%";
this.globalDiv.style.padding = "4px";
this.globalDiv.style.border = "1px solid black";
}
this.globalDiv.style.position = "absolute";
this.globalDiv.style.left = x + "px";
this.globalDiv.style.top = y + 20 + "px";
this.globalDiv.style.visibility = "hidden";
this.globalDiv.style.zIndex = 10000;
//this.globalDiv.style.overflowY = "scroll";
//this.globalDiv.style.height = Math.min(317, document.body.clientHeight - y) + "px";
if (this.listWidth != "") this.globalDiv.style.width = this.listWidth;
if(divID == 'shopsearchkeywordLookupdiv') {
document.getElementById('shopsuggestiediv').style.position = "absolute";
document.getElementById('shopsuggestiediv').style.left = x + "px"
document.getElementById('shopsuggestiediv').style.top = y + "px"
this.suggestiedivID = 'shopsuggestiediv';
}
else {
document.getElementById('suggestiediv').style.position = "absolute";
document.getElementById('suggestiediv').style.left = x + "px"
document.getElementById('suggestiediv').style.top = y + "px"
this.suggestiedivID = 'suggestiediv';
}
this.divFormatted = true;
}
}
return this.globalDiv;
}
,
/**
searchString setter
*/
setSearchString: function(searchString)
{
this.searchString = searchString;
}
,
/**
This is the function that should be returned by the XMLHTTP call. It will
format and display the lookup results.
*/
showQueryDiv: function(r, key, columnlist)
{
var div = this.getDiv(this.divName);
// remove any results that are already there
while (div.childNodes.length > 0)
div.removeChild(div.childNodes[0]);
var keyArray = eval('r.' + key)
var arr_columnlist = columnlist.toLowerCase().split(',')
// add an entry for each of the results in the resultArray
for (var i = 0; i < keyArray.length; i++)
{
// each result will be contained within its own div
var result = document.createElement("div");
if (this.listItemStyle != "")
{
result.className = this.listItemStyle;
}
else
{
result.style.cursor = "pointer";
result.style.borderBottom = "2px solid #777777";
result.style.padding = "3px 0px 3px 0px"
}
this._unhighlightResult(result);
result.onmousedown = this.selectResult;
result.onmouseover = this.highlightResult;
result.onmouseout = this.unhighlightResult;
var result1 = document.createElement("span");
if (this.listItemKey == "")
result1.className = "_listItemKey";
else
result1.className = this.listItemKey;
if (this.listItemKey == "")
{
result1.style.textAlign = "left";
result1.style.fontWeight = "bold";
}
result1.innerHTML = keyArray[i];
var result2 = document.createElement("span");
if (this.listItemValue == "")
result2.className = "_listItemValue";
else
result2.className = this.listItemValue;
if (this.listItemValue == "")
{
result2.style.textAlign = "right";
result2.style.paddingLeft = "20px";
}
// each element of columnlist is appended to result2
result2Value = "";
for (j = 0; j < arr_columnlist.length; j++) {
// set column result
colValue = eval('r.' + arr_columnlist[j] + '[' + i + ']')
if (colValue != null) {
result2Value += colValue
if (arr_columnlist.length > 1 && j < arr_columnlist.length) {
result2Value += ' '
}
}
}
result2.innerHTML = result2Value.trim();
var result3 = document.createElement("span");
result3.className = keyArray[i] + ";" + result2Value.trim();
result.appendChild(result3);
if (this.showKey) result.appendChild(result1);
result.appendChild(result2);
if(typeof r.type != "undefined")
{
var result4 = document.createElement("span");
colValue = eval('r.type[' + i + ']')
result4.innerHTML = "";
result4.className = colValue;
result.appendChild(result4);
}
div.appendChild(result);
}
// if this resultset isn't already in our cache, add it
var isCached = this.cache[this.searchString];
if (!isCached)
this.addToCache(this.searchString, r, key, columnlist);
// display the div if we had at least one result
this.showDiv(keyArray.length > 0);
// set searching to false
this.searching = false
}
,
/**
This is called whenever the user clicks one of the lookup results.
It puts the value of the result in the queryField and hides the
lookup div.
*/
selectResult: function()
{
selectedSuggestObject._selectResult(this);
}
,
/** This actually fills the field with the selected result and hides the div */
_selectResult: function(item)
{
var spans = item.getElementsByTagName("span");
if (spans) {
var data = spans[0].className.split(";");
if (this.queryFieldHolds == 0) {
//key
this.queryField.value = data[0];
} else if (this.queryFieldHolds == 1) {
//value
this.queryField.value = data[1];
} else if (this.queryFieldHolds == 2) {
//both key and value
this.queryField.value = data[0] + " - " + data[1];
}
this.lastVal = val = escape(this.queryField.value);
this.searching = false;
suggestMainLoop();
this.queryField.focus();
this.showDiv(false);
var _retData = new Array();
_retData.KEY = data[0];
_retData.VALUE = data[1];
if(typeof spans[2] != "undefined") _retData.TYPE = spans[2].className;
this.selectionListener(_retData);
return;
}
}
,
/**
This is called when a user mouses over a lookup result
*/
highlightResult: function()
{
selectedSuggestObject._highlightResult(this);
}
,
/** This actually highlights the selected result */
_highlightResult: function(item)
{
item.style.backgroundColor = selectedSuggestObject.DIV_HIGHLIGHT_COLOR;
}
,
/**
This is called when a user mouses away from a lookup result
*/
unhighlightResult: function()
{
selectedSuggestObject._unhighlightResult(this);
}
,
/** This actually unhighlights the selected result */
_unhighlightResult: function(item)
{
item.style.backgroundColor = selectedSuggestObject.DIV_BG_COLOR;
}
,
/**
This either shows or hides the lookup div, depending on the value of
the "show" parameter.
*/
showDiv: function(show)
{
var div = this.getDiv(this.divName);
if (show) {
div.style.visibility = "visible"
document.getElementById(this.suggestiedivID).style.visibility = "visible"
//adjustDiv()
} else {
div.style.visibility = "hidden"
document.getElementById(this.suggestiedivID).style.visibility = "hidden"
}
this.adjustiFrame()
}
,
/**
This either shows or hides the lookup div, depending on the value of
the "show" parameter.
*/
adjustDiv: function()
{
var div = this.getDiv(this.divName);
// figure out the max height of the div
var wHeight = document.body.clientHeight
var wWidth = document.body.clientWidth
var dHeight = div.height
var dWidth = div.width
//alert('wHeight: ' + wHeight + ' wWidth: ' + wWidth)
}
,
/**
Use an "iFrame shim" to deal with problems where the lookup div shows up behind
selection list elements, if they're below the queryField. The problem and solution are
described at:
http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx
*/
adjustiFrame: function()
{
if (!document.getElementById(this.ifName))
{
var newNode = document.createElement("iFrame");
newNode.setAttribute("id", this.ifName);
newNode.setAttribute("src", "javascript:false;");
newNode.setAttribute("scrolling", "no");
newNode.setAttribute("frameborder", "0");
newNode.setAttribute("width", "0");
document.body.appendChild(newNode);
}
iFrameDiv = document.getElementById(this.ifName);
var div = this.getDiv(this.divName);
try {
iFrameDiv.style.position = "absolute"
if (this.listWidth != "") {
//this.globalDiv.style.width = this.listWidth
iFrameDiv.style.width = this.listWidth
} else {
iFrameDiv.style.width = div.offsetWidth
}
//alert(div.offsetWidth);
iFrameDiv.style.height = div.offsetHeight
iFrameDiv.style.top = div.style.top
iFrameDiv.style.left = div.style.left
iFrameDiv.style.zIndex = div.style.zIndex - 1
iFrameDiv.style.visibility = div.style.visibility
} catch(e) {
}
}
,
/**
Get the number of the result that's currently selected/highlighted
(the first result is 0, the second is 1, etc.)
*/
getSelectedSpanNum: function(div)
{
var count = -1;
var spans = div.getElementsByTagName("div");
if (spans)
{
for (var i = 0; i < spans.length; i++)
{
count++;
if (spans[i].style.backgroundColor != div.style.backgroundColor)
return count;
}
}
return -1;
}
,
/**
Select/highlight the result at the given position
*/
setSelectedSpan: function(div, spanNum)
{
var count = -1;
var thisSpan;
var spans = div.getElementsByTagName("div");
if (spans)
{
for (var i = 0; i < spans.length; i++)
{
if (++count == spanNum)
{
this._highlightResult(spans[i]);
thisSpan = spans[i];
} else {
this._unhighlightResult(spans[i]);
}
}
}
return thisSpan;
}
,
defaultSelectionListener: function(result)
{
//do nothing -- customer listener required
}
}
var selectedSuggestObject = null
var suggestMainloopID
function onSuggestFieldFocus(object)
{
if (selectedSuggestObject)
{
suggestHideDiv(false)
}
// set suggest object
selectedSuggestObject = object;
// set document on mouse up event
document.onmouseup = suggestHideDiv;
// start loop
suggestMainloopID = setTimeout("suggestMainLoop()", 100)
}
/**
We originally used showDiv as the function that was called by the onBlur
event of the field, but it turns out that Firefox will pass an event as the first
parameter of the function, which would cause the div to always be visible.
So onBlur now calls suggestHideDiv instead.
*/
function suggestHideDiv(clearEvent)
{
// set searching is false
selectedSuggestObject.searching = false;
// hide div
selectedSuggestObject.showDiv(false);
// clear on mouse up event
if (!clearEvent) document.onmouseup = null
}
/**
This is the key handler function, for when a user presses the up arrow,
down arrow, tab key, or enter key from the input field.
*/
function suggestKeypressHandler(evt)
{
// don't do anything if the div is hidden
var div = selectedSuggestObject.getDiv(selectedSuggestObject.divName);
if (div.style.visibility == "hidden")
return true;
// make sure we have a valid event variable
if(!evt && window.event)
{
evt = window.event;
}
var key = evt.keyCode;
// if this key isn't one of the ones we care about, just return
var KEYUP = 38;
var KEYDOWN = 40;
var KEYENTER = 13;
var KEYTAB = 9;
if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))
return true;
// get the span that's currently selected, and perform an appropriate action
var selNum = selectedSuggestObject.getSelectedSpanNum(div);
var selSpan = selectedSuggestObject.setSelectedSpan(div, selNum);
if ((key == KEYENTER) || (key == KEYTAB))
{
if (selSpan)
{
selectedSuggestObject._selectResult(selSpan);
}
evt.cancelBubble=true;
return false;
} else {
if (key == KEYUP)
selSpan = selectedSuggestObject.setSelectedSpan(div, selNum - 1);
if (key == KEYDOWN)
selSpan = selectedSuggestObject.setSelectedSpan(div, selNum + 1);
if (selSpan)
selectedSuggestObject._highlightResult(selSpan);
}
selectedSuggestObject.showDiv(true)
return true
}
/**
This is the function that monitors the queryField, and calls the lookup
functions when the queryField value changes.
*/
function suggestMainLoop()
{
val = escape(selectedSuggestObject.queryField.value.trim())
if (val.length >= selectedSuggestObject.minCharToStartSearch)
{
// if the field value has changed and we're not currently waiting for
// a lookup result to be returned, do a lookup (or use the cache, if
// we can)
if (selectedSuggestObject.lastVal != val && selectedSuggestObject.searching == false)
{
var cacheResult = selectedSuggestObject.cache[val]
if (cacheResult) {
selectedSuggestObject.showQueryDiv(cacheResult[0], cacheResult[1], cacheResult[2])
}
else {
// set searching to true
selectedSuggestObject.searching = true
// call get data function
getSuggestData(val)
}
selectedSuggestObject.lastVal = val
}
}
else if (val.length == 0 && selectedSuggestObject.lastVal != val) {
// hide the div
suggestHideDiv()
// save last val
selectedSuggestObject.lastVal = val
}
suggestMainloopID = setTimeout("suggestMainLoop()", 100)
return true
}
var _globalSearchSuggestInited = false
var _shopSearchSuggestInited = true
var globalKeywordLookup = null
var shopKeywordLookup = null
function getSuggestData(str) {
// which method to use
var theMethod = "select"
// saves the string inside the suggest object
window[selectedSuggestObject.name].setSearchString(str)
// init data to send so CF
var theData = new Object()
theData.impl_name = _impl_name
theData.criteria = window[selectedSuggestObject.name].searchString
theData.shopSearch = (selectedSuggestObject.name == 'shopKeywordLookup')
// set loading image
//DWRUtil.useLoadingImage(_webfolder + "gfx/ajax/loading5.gif")
// do ajax request
DWREngine._execute(_webfolder + "impls/" + _impl_name + "/framework/ajax/suggest.cfc", null, theMethod, theData, getSuggestDataResult)
}
// call back function
function getSuggestDataResult(r) {
// show query div
window[selectedSuggestObject.name].showQueryDiv(r, "id", "title", "type")
}
function globalKeywordLookupSelectionListener(result) {
var oForm = document.forms['globalSearch']
//this function to sets the hidden field with key value.
oForm.type.value = result.TYPE
oForm.criteria_id.value = result.KEY
// delayed click
setTimeout("document.forms['globalSearch'].btnSubmit.click()", 50)
}
function shopKeywordLookupSelectionListener(result) {
var oForm = document.forms['shopSearch']
//this function to sets the hidden field with key value.
oForm.type.value = result.TYPE
oForm.criteria_id.value = result.KEY
// delayed click
setTimeout("document.forms['shopSearch'].btnSubmit.click()", 50)
}
function submitOnEnter(e, oForm) { //e is event object passed from function invocation
var characterCode; //literal character code will be stored in this variable
if (e && e.which){ //if which property of event object is supported (NN4)
e = e
characterCode = e.which //character code is contained in NN4's which property
} else {
e = event
characterCode = e.keyCode //character code is contained in IE's keyCode property
}
if (characterCode == 13) { //if generated character code is equal to ascii 13 (if enter key)
oForm.btnSubmit.click() //submit the form
}
}
function initGlobalSearchSuggest() {
// initialize a new suggest component
globalKeywordLookup = new Suggest()
globalKeywordLookup.minCharToStartSearch = 2
globalKeywordLookup.InitQueryCode("globalKeywordLookup", "searchkeyword")
globalKeywordLookup.setSelectionListener(globalKeywordLookupSelectionListener)
// set inited flag
_globalSearchSuggestInited = true
}
function initShopSearchSuggest() {
// initialize a new suggest component
shopKeywordLookup = new Suggest()
shopKeywordLookup.minCharToStartSearch = 2
shopKeywordLookup.InitQueryCode("shopKeywordLookup", "searchkeyword")
shopKeywordLookup.setSelectionListener(shopKeywordLookupSelectionListener)
// set inited flag
_shopSearchSuggestInited = true
}
// validate searchForm
function checkSearchForm(oForm) {
if ( (oForm.name == 'globalSearch' && oForm.searchkeyword.value == '') || (oForm.name == 'shopSearch' && oForm.extrasearchkeyword.value == '') ) {
oForm.criteria_id.value = ''
alert('voer eerst een trefwoord in')
return false
} else {
return true
}
}
// Mega drop down menu
var currentVisibleMegaDropdownMenuName = '',
currentVisibleMegaDropdownMenuVisible = false,
currentSelectedTab = '',
activeMegaDropDownTab = '',
showMegaDropDownMenuTimeOut,
hideMegaDropDownMenuTimeOut,
e_branchesMenu,
e_onderwerpenMenu,
e_overHBDMenu,
e_branchesTab,
e_onderwerpenTab,
e_overHBDTab;
function setCurrentSelectedTab(tabName) {
currentSelectedTab = tabName
}
function setActiveMegaDropDownTab(tabName) {
activeMegaDropDownTab = tabName
}
function onHoverShowMegaDropDownMenuItem(menuName, mouseover, e) {
e_branchesMenu = document.getElementById('megaDropDown_branches');
e_onderwerpenMenu = document.getElementById('megaDropDown_onderwerpen');
e_overHBDMenu = document.getElementById('megaDropDown_overHBD');
if(currentVisibleMegaDropdownMenuName != '' && currentVisibleMegaDropdownMenuName != menuName) {
clearTimeout(showMegaDropDownMenuTimeOut);
clearTimeout(hideMegaDropDownMenuTimeOut);
hideMegaDropDownMenu(currentVisibleMegaDropdownMenuName);
}
changeTabDisplays(menuName, mouseover);
if (mouseover) {
currentVisibleMegaDropdownMenuName = menuName;
clearTimeout(hideMegaDropDownMenuTimeOut);
showMegaDropDownMenuTimeOut = setTimeout('showMegaDropDownMenu()', 100);
} else if (!mouseover) {
clearTimeout(showMegaDropDownMenuTimeOut);
hideMegaDropDownMenuTimeOut = setTimeout('hideMegaDropDownMenu()', 500);
};
}
function changeTabDisplays(menuName, mouseover) {
var oMegaDropDownMenu = document.getElementById('MegaDropDownMenu');
var h = -54
var basePosY = 0;
var posY = 0;
if (activeMegaDropDownTab == 'branches') {
basePosY = h * 1;
} else if (activeMegaDropDownTab == 'onderwerpen') {
basePosY = h * 5;
} else if (activeMegaDropDownTab == 'overHBD') {
basePosY = h * 9;
};
if (mouseover) {
if (activeMegaDropDownTab != '') {
if (menuName == 'branches') {
posY = h * 1;
} else if (menuName == 'onderwerpen') {
posY = h * 2;
} else if (menuName == 'overHBD') {
posY = h * 3;
};
} else {
if (menuName == 'branches') {
posY = h * 2;
} else if (menuName == 'onderwerpen') {
posY = h * 7;
} else if (menuName == 'overHBD') {
posY = h * 12;
};
};
};
oMegaDropDownMenu.style.backgroundPosition = '0px ' + (basePosY + posY) + 'px';
}
function showMegaDropDownMenu() {
currentVisibleMegaDropdownMenuVisible = true;
changeTabDisplays(currentVisibleMegaDropdownMenuName, true);
//changeSmallTeaserImageDisplay('none');
if (currentVisibleMegaDropdownMenuName == 'branches') {
if (e_branchesMenu != null) e_branchesMenu.style.display = 'block';
} else if (currentVisibleMegaDropdownMenuName == 'onderwerpen') {
if (e_onderwerpenMenu != null) e_onderwerpenMenu.style.display = 'block';
} else if (currentVisibleMegaDropdownMenuName == 'overHBD') {
if (e_overHBDMenu != null) e_overHBDMenu.style.display = 'block';
}
}
function hideMegaDropDownMenu() {
if (currentVisibleMegaDropdownMenuName == 'branches') {
if (e_branchesMenu != null) e_branchesMenu.style.display = 'none';
} else if (currentVisibleMegaDropdownMenuName == 'onderwerpen') {
if (e_onderwerpenMenu != null) e_onderwerpenMenu.style.display = 'none';
} else if (currentVisibleMegaDropdownMenuName == 'overHBD') {
if (e_overHBDMenu != null) e_overHBDMenu.style.display = 'none';
}
currentVisibleMegaDropdownMenuVisible = false;
changeTabDisplays(currentVisibleMegaDropdownMenuName, false );
//changeSmallTeaserImageDisplay('block');
currentVisibleMegaDropdownMenuName = '';
}
// IE 7 fix for showing the small teaser image on top of the menu
/*function changeSmallTeaserImageDisplay(display) {
if(navigator.userAgent && navigator.userAgent.indexOf('MSIE 7') != -1) {
var arr_teaserIds = lst_teaserIds.split(",");
for(var i=0; i