/* Functions for displaying modal popup boxes. To create a new popup box you need the following: 1) A hidden

tag printed somewhere on the page that contains the popup box content. There may be a PHP class that helps you create this content.

[..help button..][..close button..] [..popup box content..]

2) If the popup is modal then you need to define a javascript function that resets the popup box content. This function should take the popup box

element object as its first argument and a click event as its second arguement. This script should be in the . 3) A button of some sort on the page that you'll use to show the popup box. This button will need to call the showPopupBox() javascript function and pass it a click event. The simplest way to achieve this is by redefining the button's onclick event. In fact, you might even want provide some fallback method for non-DOM-compliant browsers, or if the user has javascript turned off. will cause the popup to close. // We do this be putting a big transparent

that masks the entire page behind the popup

. // FIXME: this

should continue to cover the entire page even if the window scrolls if (document.getElementById || document.all){ document.write('

'); } //////////////////////////////////////////////////////////////////////////////// /// @name showPopupBox /// @desc show a given popup box /// /// @param popupElement element object - the popup box

/// @param e event object - a click event that we will use to position the popup box near the cursor /// @param popupResetCallback function - should reset the popup box to its initial state /// @param isModal boolean - if true, then clicking anywhere outside of the popupbox will cause it to close and reset //////////////////////////////////////////////////////////////////////////////// function showPopupBox(popupElement, e, popupResetCallback, isModal){ if ( typeof popupElement == 'string' ){ popupElement = document.getElementById(popupElement); } movePopupBox(popupElement, e); popupElement.style.visibility="visible"; if ( isModal && popupResetCallback ){ document.getElementById('popupBoxModalBackground').onclick = function (modalE){ popupResetCallback(popupElement, modalE); popupElement.style.visibility = 'hidden'; document.getElementById('popupBoxModalBackground').style.visibility = 'hidden'; }; document.getElementById('popupBoxModalBackground').style.visibility = 'visible'; } } //////////////////////////////////////////////////////////////////////////////// /// @name hidePopupBox /// @desc hide a given popup box /// /// @param popupElement - element object - the popup box

//////////////////////////////////////////////////////////////////////////////// function hidePopupBox(popupElement){ if ( typeof popupElement == 'string' ){ popupElement = document.getElementById(popupElement); } popupElement.style.visibility="hidden"; document.getElementById('popupBoxModalBackground').style.visibility = 'hidden'; } //////////////////////////////////////////////////////////////////////////////// /// @name movePopupBox /// @desc move a given popup box to the location defined by a click event /// /// @TODO keep the popup box from extending beyond the right or bottom of the window /// /// @param popupElement - element object - the popup box

/// @param e event object - a click event that we will use to position the popup box near the cursor //////////////////////////////////////////////////////////////////////////////// function movePopupBox(popupElement, e){ //debugOnClickEventHandler(e); var xcoord = popupBoxOffsetFromMouse[0]; var ycoord = popupBoxOffsetFromMouse[1]; var docwidth = getDocWidth(); var docheight = getDocHeight(); if (typeof e != "undefined"){ //alert(e.pageY + ':' + popupElement.offsetHeight + ':' + docheight + ':' + getTrueBody().scrollTop); //alert(ycoord); /* doc ---------------------------- page ------------------------ scroll ------- pop -------------- */ // ie doesn't like pageX var x = 0; var y = 0; if(e.pageX || e.pageY) { x = e.pageX; y = e.pageY; } else if (e.clientX || e.clientY) { x = e.clientX; y = e.clientY; //x = e.clientX + document.body.scrollLeft; //y = e.clientY + document.body.scrollTop; } if (docwidth - x < popupElement.offsetWidth + xcoord){ xcoord = x - xcoord - popupElement.offsetWidth; // Move to the left side of the cursor } else { xcoord += x; } if (docheight + getTrueBody().scrollTop - y < popupElement.offsetHeight + ycoord){ ycoord = y - ycoord - popupElement.offsetHeight; } else { ycoord += y; } } else if (typeof window.event != "undefined"){ //if (docwidth + getTrueBody().scrollLeft - e.pageX < popupElement.offsetWidth + xcoord){ if (docwidth - event.clientX < popupElement.offsetWidth + xcoord){ xcoord = event.clientX - xcoord - popupElement.offsetWidth + getTrueBody().scrollLeft; // Move to the left side of the cursor } else { xcoord += event.clientX + getTrueBody().scrollLeft; } if (docheight - event.clientY < popupElement.offsetHeight + ycoord){ ycoord = event.clientY - ycoord - popupElement.offsetHeight + getTrueBody().scrollTop; } else { ycoord += event.clientY + getTrueBody().scrollTop; } } else { return; } //var docwidth=document.all? getTrueBody().scrollLeft+getTrueBody().clientWidth : pageXOffset+window.innerWidth-15; //var docheight=document.all? Math.max(getTrueBody().scrollHeight, getTrueBody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight); popupElement.style.left = xcoord+"px" popupElement.style.top = ycoord+"px" } //////////////////////////////////////////////////////////////////////////////// /// @name whichQuadrant /// @expirmental /// @desc given a width and a height, figure our which quadrant a point falls in /// /// @param pageX int - the width of the theoretical space /// @param pageY int - the height of the theoretical space /// @param pointX int - the horizontal distance of the point from the upper left corner /// @param pointY int - the vertical distance of the point from the upper left corner /// @return int - one of the QUADRANT_* constants //////////////////////////////////////////////////////////////////////////////// var SIDE_TOP = 1; var SIDE_BOTTOM = 2; var SIDE_LEFT = 4; var SIDE_RIGHT = 8; var QUADRANT_TOP_LEFT = SIDE_TOP | SIDE_LEFT; var QUADRANT_TOP_RIGHT = SIDE_TOP | SIDE_RIGHT; var QUADRANT_BOTTOM_LEFT = SIDE_BOTTOM | SIDE_LEFT; var QUADRANT_BOTTOM_RIGHT = SIDE_BOTTOM | SIDE_RIGHT; function whichQuadrant(pageX, pageY, pointX, pointY){ var quadrant = 0; var halfX = pageX/2; var halfY = pageY/2; if ( pointX < halfX ){ quadrant |= SIDE_LEFT; } else { quadrant |= SIDE_RIGHT; } if ( pointY < halfY ){ quadrant |= SIDE_TOP; } else { quadrant |= SIDE_BOTTOM; } return quadrant; } function getDocWidth(){ return (document.all? getTrueBody().scrollLeft+getTrueBody().clientWidth : pageXOffset+window.innerWidth-15); } function getDocHeight(){ return (document.all? Math.min(getTrueBody().scrollHeight, getTrueBody().clientHeight) : Math.min(window.innerHeight)); } function getTrueBody(){ return ( (!window.opera && document.compatMode && document.compatMode!="BackCompat") || window.opera)? document.documentElement : document.body } function debugOnClickEventHandler(e){ /* type - this property indicates the type of event. target - this property indicates the object to which the event was originally sent. *layerX - the cursor location when the click event occurs. *layerY - the cursor location when the click event occurs. *pageX - the cursor location when the click event occurs. *pageY - the cursor location when the click event occurs. *screenX - the cursor location when the click event occurs. *screenY - the cursor location when the click event occurs. which - 1 represents a left mouse click and 3 a right click. modifiers - lists the modifier keys (shift, alt, ctrl, etc.) held down when the click event occurs. */ s = typeof e + ":\n"; s += 'type = ' + e.type + "\n"; s += 'target = ' + e.target + "\n"; s += 'layerX = ' + e.layerX + "\n"; s += 'layerY = ' + e.layerY + "\n"; s += 'pageX = ' + e.pageX + "\n"; s += 'pageY = ' + e.pageY + "\n"; s += 'screenX = ' + e.screenX + "\n"; s += 'screenY = ' + e.screenY + "\n"; s += 'which = ' + e.which + "\n"; s += 'modifiers = ' + e.modifiers + "\n"; alert(s); } //file serarchhover var offsetfrommouse=[5,5]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset var displayduration=0; //duration in seconds image should remain visible. 0 for always. var currentimageheight = 500; // maximum image size. if (document.getElementById || document.all){ document.write('

'); document.write('

'); } function gettrailobj(){ if (document.getElementById) return document.getElementById("trailimageid").style else if (document.all) return document.all.trailimagid.style } function gettrailobjnostyle(){ if (document.getElementById) return document.getElementById("trailimageid") else if (document.all) return document.all.trailimagid } function truebody(){ return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function showtrail(imagename,title,description,ratingaverage,ratingnumber,showthumb,height,filetype,para){ if (height > 0){ currentimageheight = height; } document.onmousemove=followmouse; cameraHTML = ''; if ( !ratingnumber ){ ratingnumber = 0; ratingaverage = 0; } for(x = 1; x <= 5; x++){ if (ratingaverage >= 1){ cameraHTML = cameraHTML + '

'; } else if (ratingaverage >= 0.5){ cameraHTML = cameraHTML + '

'; } else { cameraHTML = cameraHTML + '

'; } ratingaverage = ratingaverage - 1; } //cameraHTML = cameraHTML;// + ' (' + ratingnumber + ' Review'; //if ( ratingnumber > 1 ) cameraHTML += 's'; //cameraHTML = cameraHTML + ')'; newHTML = '

'; newHTML = newHTML + title + '
'; //newHTML = newHTML + 'Rating: ' + cameraHTML + '
'; //newHTML = newHTML + description + '
'; if (showthumb > 0){ newHTML = newHTML + '

'; if(filetype == 8) { // Video newHTML = newHTML + '

'; } else { newHTML = newHTML + '

'; } } newHTML = newHTML + '

'; gettrailobjnostyle().innerHTML = newHTML; gettrailobj().display="inline"; } function hidetrail(){ gettrailobj().innerHTML = " "; gettrailobj().display="none" document.onmousemove="100px" gettrailobj().left="-500px" } function followmouse(e){ var xcoord=offsetfrommouse[0] var ycoord=offsetfrommouse[1] var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15 var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight) //if (document.all){ // gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '
B = ' + truebody().clientHeight; //} else { // gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '
D = ' + window.innerHeight; //} if (typeof e != "undefined"){ if (docwidth - e.pageX < 380){ xcoord = e.pageX - xcoord - 400; // Move to the left side of the cursor } else { xcoord += e.pageX; } if (docheight - e.pageY < (currentimageheight + 110)){ ycoord += e.pageY - Math.max(0,(60 + currentimageheight + e.pageY - docheight - truebody().scrollTop)); } else { ycoord += e.pageY; } } else if (typeof window.event != "undefined"){ if (docwidth - event.clientX < 380){ xcoord = event.clientX + truebody().scrollLeft - xcoord - 400; // Move to the left side of the cursor } else { xcoord += truebody().scrollLeft+event.clientX } if (docheight - event.clientY < (currentimageheight + 110)){ ycoord += event.clientY + truebody().scrollTop - Math.max(0,(60 + currentimageheight + event.clientY - docheight)); } else { ycoord += truebody().scrollTop + event.clientY; } } var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15 var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight) if(ycoord < 0) { ycoord = ycoord*-1; } //ycoord=ycoord-100; gettrailobj().left=xcoord+"px" gettrailobj().top=ycoord+"px" }