/* Copyright (c) 2003 Macromedia Inc. $Revision: 1.6 $ */ /* EmxGlobalnavButton constructor domElement: LI element in the main globalnav element, used to calc button dimensions parentBoxCoords: box coordinates of the parent UL element "globalnav-menu" of the domElement Bug 23287: Windows Internet Explorer calls the server each time the button image is swapped to see if the image has changed this produces the "progress" or hour-glass cursor on mouseover workaround: onionskin technique, instead of an image swap toggle the visibilty of the image for a given frame */ EmxGlobalnavButton = function (domElement,parentBoxCoords) { this.domElement = domElement; this.coords = getElementBoxCoordsById(domElement.id); this.buttonframes = new Array(10); for (var i=0; i < this.buttonframes.length; i++) { var btnImage = document.createElement('img'); btnImage.setAttribute('id',domElement.id+'-buttonImg'+i); btnImage.setAttribute('name',domElement.id+'-buttonImg'); btnImage.setAttribute('buttonID',domElement.id); btnImage.src = '/images/globalnav/emxbutton_animation/frame'+i+'.gif'; // temporary fix, MacIE incorrect calculating dimensions var xCorrection = (!window.opera && browser.ua.indexOf('mac') != -1 && browser.appN.indexOf('microsoft') != -1) ? 8 : 0; var wCorrection = (!window.opera && browser.ua.indexOf('mac') != -1 && browser.appN.indexOf('microsoft') != -1 && domElement.id != 'searchDIV') ? 8 : 3; btnImage.style.position = 'absolute'; btnImage.style.top = 0; btnImage.style.left = (this.coords.x1 -1) - parentBoxCoords.x1 + xCorrection +'px'; btnImage.style.width = (this.coords.x2 - this.coords.x1) + wCorrection +'px'; btnImage.style.height = '35px';//(this.coords.y2 - this.coords.y1) +'px'; btnImage.style.zIndex = 0; btnImage.style.visibility = 'hidden'; // add image to the DOM this.buttonframes[i] = document.getElementById('globalnavbar').appendChild(btnImage); /* button frame images in Windows Internet Explorer will block the EmxGlobalnav.domElement object from receiving events, despite being removed from visual display */ if (domElement.id != 'searchDIV') { defineEventHandler(this.buttonframes[i],'mouseout',EmxGlobalnav.navEvent,false); defineEventHandler(this.buttonframes[i],'mouseover',EmxGlobalnav.navEvent,false); } } this.image = this.buttonframes[0]; // associated submenu this.submenu = document.getElementById(domElement.id+'-submenu'); // init button in off state this.state = 'off'; this.currentframe = 0; this.submenuState = 'off'; return this; } /* Set the visual state of the button set zIndex so that adjacent buttonss do not appear to overlap so abruptly */ EmxGlobalnavButton.prototype.setState = function (state,tween) { this.state = (state) ? state : 'off'; switch (state) { case 'over': this.tweenButton(this.currentframe,2,200); break; case 'on': this.image.style.zIndex = 1; this.tweenButton(this.currentframe,this.buttonframes.length-1,700); this.setSubmenuState(this.state); break; case 'off': this.image.style.zIndex = 0; this.setSubmenuState(this.state); this.tweenButton(this.currentframe,0,100); break; } } EmxGlobalnavButton.prototype.tweenButton = function (start,end,duration,callback) { // check for out of bounds parameters var lastFrame = this.buttonframes.length - 1; var start = (start <= lastFrame) ? start : lastFrame; var end = (end <= lastFrame) ? end : lastFrame; var elapsed; var frame = start; // calculate the interval between frames // make sure we have a positive whole number var interval = Math.abs(Math.floor(duration/(end-start+1))); var tweenID; if (((browser.ua.indexOf('mac') != -1) && (browser.appN.indexOf('microsoft') != -1)) || (browser.ua.indexOf('msie 5.0') != -1) || (browser.ua.indexOf('safari') != -1) || (browser.ua.indexOf('applewebkit') != -1)) { // MacIE, WinIE 5.0, Safari use alternate tween method EmxGlobalnavButton.tweenButtonALT(this.image.id,start,end,frame,interval); this.currentframe = end; } else { // set a repeating call to advance the animation tweenID = setInterval(stepFrame,interval); } /* JavaScript language: "this" in private methods incorrectly references the function not to the parent object. Workaround: set a var to "this" outside the private method */ var button = this; // called repeatedly to advance the animation function stepFrame () { // decide if the animation is done, on the last frame if (frame != end) { // hide the current frame button.buttonframes[frame].style.visibility = 'hidden'; // depending on the direction of the animation // advance to the next|previous frame if (start < end) { frame++; } else if (start > end) { frame--; } // show the next frame button.buttonframes[frame].style.visibility = 'visible'; elapsed += interval; button.currentframe = frame; } else { // if the animation is done clear the interval // execute any callback function and return clearInterval(tweenID); if (callback) callback(button); return; } } } /* this method derived from the private stepFrame method of EmxGlobalnavButton.tweenButton the notable difference is how it keeps a reference of the image to animate as well as being called from the globalscope by window setTimeout */ EmxGlobalnavButton.tweenButtonALT = function (imageID,start,end,currentframe,interval,callback) { var frame = currentframe; // decide if the animation is done, on the last frame if (frame != end) { // depending on the direction of the animation // advance to the next|previous frame if (start < end) { frame++; } else if (start > end) { frame--; } // swap the image source document.getElementById(imageID).style.visibility = 'visible'; document.getElementById(imageID).src = '/images/globalnav/emxbutton_animation/frame'+frame+'.gif'; // set up a delayed call to this function setTimeout('EmxGlobalnavButton.tweenButtonALT("'+imageID+'",'+start+','+end+','+frame+','+interval+');',interval); } else { // if the animation is done execute any callback function and return if (callback) callback(); return; } } EmxGlobalnavButton.prototype.setSubmenuState = function (state) { if (this.submenu != null) { var state = (state) ? state : 'off'; switch (state) { case 'on': this.submenu.style.visibility = 'visible'; break; case 'off': this.submenu.style.visibility = 'hidden'; break; } this.submenuState = state; } } EmxGlobalnav = function (listElement) { /* properties */ this.domElement; // globalnav DIV this.buttonsListElement;// main nav UL element this.buttonElements; // collection - all main nav child LI elements this.hyperlinks; // collection - all globalnav child hyperlinks this.searchForm; // search form element this.membershipElements = new Array(); // DOM elements for membership this.buttons = new Array(); this.menuBoxCoords; // this.buttonsListElement box coordinates this.submenuBoxCoords; // submenu area box coordinates this.current_button = null; this.over_button = null; this.focusedElement;// track focused element for tab focus this.tabFocusBox; // div placed "around" elements on tab focus this.isOverMainNav = false; this.isOverSubmenu = false; this.isOverUtilNav = false; this.mouseIdleID = null; this.mouseMoveID = null; this.mousePosition = null; /* private methods */ this.makeButtons = function () { var emxButtons = new Array(); for (var i=0; i < this.buttonElements.length; i++) { var buttonElement = this.buttonElements[i]; emxButtons[buttonElement.id] = new EmxGlobalnavButton(buttonElement,this.menuBoxCoords); } // make search button emxButtons['search'] = new EmxGlobalnavButton(document.getElementById('searchDIV'),this.menuBoxCoords); return emxButtons; } this.initEventHandlers = function () { /* W3C OR Internet Explorer event models */ if (document.addEventListener || document.attachEvent) { // define event handlers for determining mouse position defineEventHandler(document,'mousemove',EmxGlobalnav.navEvent,false); // define keypress event to track tabbing defineEventHandler(document,'keyup',EmxGlobalnav.navEvent,false); // define button event handlers for (var i=0; i < this.buttonElements.length; i++) { defineEventHandler(this.buttonElements[i],'mouseout',EmxGlobalnav.navEvent,false); defineEventHandler(this.buttonElements[i],'mouseover',EmxGlobalnav.navEvent,false); } // define event handlers for hyperlinks for (var i=0; i < this.hyperlinks.length; i++) { defineEventHandler(this.hyperlinks[i],'blur',EmxGlobalnav.navEvent,false); defineEventHandler(this.hyperlinks[i],'focus',EmxGlobalnav.navEvent,false); } // define event handlers for search button var searchButton = document.getElementById('search'); defineEventHandler(searchButton,'mouseout',EmxGlobalnav.navEvent,false); defineEventHandler(searchButton,'mouseover',EmxGlobalnav.navEvent,false); defineEventHandler(searchButton,'blur',EmxGlobalnav.navEvent,false); defineEventHandler(searchButton,'focus',EmxGlobalnav.navEvent,false); // special case the search input field var searchInput = document.getElementById('search-input'); defineEventHandler(searchInput,'focus',EmxGlobalnav.navEvent,false); } else { /* Event Model for MacIE, Opera 6 */ document.onmousemove = EmxGlobalnav.navEvent; document.onkeyup = EmxGlobalnav.navEvent; // define event handlers for each button for (var i=0; i this.buttons[i].coords.x1)) { this.overButton(this.buttons[i]); } } } } /* Init globalnav membership fields based on authorization level cookies authLevel 0: greeting, default_name signin authLevel 1: greeting, {screen_name} account signin authLevel 2: greeting, {screen_name} account signout */ this.initMembership = function () { // globalnav membership elements this.membershipElements['greeting'] = document.getElementById('greeting'); this.membershipElements['screen_name'] = document.getElementById('screenName'); this.membershipElements['account_link'] = document.getElementById('account'); this.membershipElements['signin'] = document.getElementById('signin'); this.membershipElements['signout'] = document.getElementById('signout'); // check for null elements before conituing for (var e in this.membershipElements) if (this.membershipElements[e] == null) return; var authLevel = 0; authLevel = (getCookie('RMID') != null) ? 1: authLevel; authLevel = (getCookie('AUID') != null) ? 2: authLevel; this.showScreenName = function () { var name = getCookie('SCREENNAME'); if (name != null && (name != '' || name != 'undefined')) { this.membershipElements['screen_name'].innerHTML = name; } } /*// globalnav cart elements this.membershipElements['cart'] = document.getElementById('cart'); this.membershipElements['cart_items'] = document.getElementById('cartItems'); this.displayCart = function () { var numItems = getCookie('MM_CARTITEMCOUNT'); if (this.membershipElements['cart'] && this.membershipElements['cart_items']) { numItems = (numItems) ? numItems : 0; this.membershipElements['cart_items'].innerHTML = numItems; this.membershipElements['cart'].style.display = 'block'; } }*/ switch (authLevel) { case 0: this.membershipElements['greeting'].style.display = 'inline'; this.membershipElements['account_link'].style.display = 'none'; this.membershipElements['signin'].style.display = 'inline'; this.membershipElements['signout'].style.display = 'none'; break; case 1: this.showScreenName(); this.membershipElements['greeting'].style.display = 'inline'; this.membershipElements['account_link'].style.display = 'inline'; this.membershipElements['signin'].style.display = 'inline'; this.membershipElements['signout'].style.display = 'none'; break; case 2: this.showScreenName(); this.membershipElements['greeting'].style.display = 'inline'; this.membershipElements['account_link'].style.display = 'inline'; this.membershipElements['signin'].style.display = 'none'; this.membershipElements['signout'].style.display = 'inline'; //this.displayCart(); break; default: break; } } return this; } EmxGlobalnav.prototype.init = function () { if (document.getElementById('labs-globalnav') != null) { // init main globalnav and submenus if (document.getElementById('labs-globalnav-menu') != null) { EmxGlobalnav.prototype.domElement = document.getElementById('globalnav'); EmxGlobalnav.prototype.buttonsListElement = document.getElementById('globalnav-menu'); // store the onscreen coordinates of main menu and submenu areas EmxGlobalnav.prototype.menuBoxCoords = getElementBoxCoordsById('globalnav-menu'); EmxGlobalnav.prototype.submenuBoxCoords = { x1:globalnav.menuBoxCoords.x1, y1:globalnav.menuBoxCoords.y2, x2:globalnav.menuBoxCoords.x2, y2:globalnav.menuBoxCoords.y2+22 }; // get a collection of li elements in the globalnav-menu list EmxGlobalnav.prototype.buttonElements = EmxGlobalnav.prototype.buttonsListElement.getElementsByTagName('li'); // get a collection of all hyperlinks that are children of the globalnav EmxGlobalnav.prototype.hyperlinks = EmxGlobalnav.prototype.domElement.getElementsByTagName('a'); // global messaging gradoo EmxGlobalnav.prototype.globalmessaging = document.getElementById('globalmessaging'); EmxGlobalnav.prototype.default_submenu = null; // set up an empty div to place over globalnav elements when they recieve tab focus EmxGlobalnav.prototype.tabFocusBox = new EmxTabFocusBox('tabfocus'); EmxGlobalnav.prototype.buttons = globalnav.makeButtons(); // look for the mouse over a globalnav button // if the page loads with the mouse over a button turn it on globalnav.isMouseOverButton(); // init event handlers globalnav.initEventHandlers(); } // init memebership menu if ((document.getElementById('labs-login-nav') != null && location.hostname.indexOf('macromedia.com') != -1) || /* If it's live */ (document.getElementById('labs-login-nav') != null && location.hostname.indexOf('adobe.com') != -1)) { globalnav.initMembership(); } return true; } } /* event switchboard determines event target and passes it to appropriate method for each event type */ EmxGlobalnav.navEvent = function (e) { var eventObj = (e) ? e : ((window.event) ? event : null); if (eventObj) { var eventElement = (eventObj.target) ? eventObj.target : ((eventObj.srcElement) ? eventObj.srcElement : null); } /* W3C Event Model "this" is a reference to target or srcElement of the Event object NOT the EmxGlobalnav object IE Event Model "this" is a reference to the Event object NOT the EmxGlobalnav object */ if (eventElement) { // if the event target is a text node process the event using parent node if (eventElement.nodeType == 3) eventElement = eventElement.parentNode; switch (eventObj.type) { case 'mousemove': // get mouse position EmxGlobalnav.prototype.onmousemove(eventObj); break; case 'mouseover': var button = (eventElement.buttonID) ? document.getElementById(eventElement.buttonID) : (eventElement.id) ? eventElement : eventElement.parentNode; EmxGlobalnav.prototype.overButton(button); break; case 'mouseout': var button = (eventElement.buttonID) ? document.getElementById(eventElement.buttonID) : (eventElement.id) ? eventElement : eventElement.parentNode; /* if the relatedTarget (w3c model) or toElement (IE model) is the same as the current button don't turn it off we probably just rolled from the text to somewhere else in the list element */ if (eventObj.toElement != null) { if (eventObj.toElement.buttonID != null && eventObj.toElement.buttonID != button.id) { EmxGlobalnav.prototype.offButton(button);// WinIE } else if (!eventObj.toElement.buttonID && eventObj.toElement.nodeType != 3) { EmxGlobalnav.prototype.offButton(button);// WinIE, Safari } } else if (eventObj.relatedTarget != null && eventObj.relatedTarget.nodeType != 3) { EmxGlobalnav.prototype.offButton(button); // W3C compliant } break; /* fix bug 23295 case 'keyup': var navElement = (eventElement.id) ? eventElement : eventElement.parentNode; if (EmxGlobalnav.prototype.focusedElement == navElement) EmxGlobalnav.prototype.tabFocus(navElement); break; // temporarily disable tab focus box bugs[ 23719, 25524, 25524 ] case 'focus': // hyperlink received focus so the user must be tabbing // get the parent element for the hyperlink and turn it on // set up the big yellow tabbing box around the element var navElement = (eventElement.id) ? eventElement : eventElement.parentNode; EmxGlobalnav.prototype.focusedElement = navElement; break; case 'blur': // hyperlink lost focus // get the parent element for the hyperlink var navElement = (eventElement.id) ? eventElement : eventElement.parentNode; EmxGlobalnav.prototype.tabBlur(navElement); break; */ default: break; } } } EmxGlobalnav.prototype.calcBox = function () { this.menuBoxCoords = getElementBoxCoordsById('globalnav-menu'); this.submenuBoxCoords = { x1:this.menuBoxCoords.x1, y1:this.menuBoxCoords.y2, x2:this.menuBoxCoords.x2, y2:this.menuBoxCoords.y2+22 }; return true; } EmxGlobalnav.prototype.buttonsAllOff = function () { for (btn in this.buttons) this.buttons[btn].setState('off'); this.current_button = null; } EmxGlobalnav.prototype.setCurrentButton = function (button) { this.buttons[button.id].setState('on'); this.current_button = button; // make sure all *other* buttons are off as they tend to get stuck for (btn in this.buttons) { if (btn != button.id) this.buttons[btn].setState('off'); } return; } EmxGlobalnav.prototype.mouseovertest = function () { if (this.mousePosition.y < this.menuBoxCoords.y1) { this.isOverUtilNav = true; this.isOverMainNav = false; this.isOverSubmenu = false; } else { this.isOverUtilNav = false; this.isOverMainNav = ((this.mousePosition.y > this.menuBoxCoords.y1) && (this.mousePosition.y < this.menuBoxCoords.y2) && (this.mousePosition.x > this.menuBoxCoords.x1) && (this.mousePosition.x < this.menuBoxCoords.x2)); this.isOverSubmenu = ((this.mousePosition.y > this.submenuBoxCoords.y1) && (this.mousePosition.y < this.submenuBoxCoords.y2) && (this.mousePosition.x > this.submenuBoxCoords.x1) && (this.mousePosition.x < this.submenuBoxCoords.x2)); } } EmxGlobalnav.prototype.onmousemove = function (e) { clearInterval(this.mouseMoveID); this.mousePosition = getEventCoords(e); this.mouseMoveID = setInterval('EmxGlobalnav.prototype.onmousestop();',100); } EmxGlobalnav.prototype.onmousestop = function () { clearInterval(this.mouseMoveID); this.tabFocusBox.hide(); this.mouseovertest(); if (this.isOverUtilNav == true) { // mouse is above the main nav, over the util menu // turn off buttons this.buttonsAllOff(); this.setGlobalmessageState('on'); } else if (this.isOverMainNav == true) { if (this.over_button != null && (this.over_button != this.current_button)) { // mouse is over nav but over a new button // set an idle to expire the current button clearInterval(this.mouseIdleID); this.mouseIdleID = setInterval('EmxGlobalnav.prototype.onmouseidle();',600); } } else if (this.current_button != null) { // we stopped somewhere below the main nav and submenu clearInterval(this.mouseIdleID); this.mouseIdleID = setInterval('EmxGlobalnav.prototype.onmouseidle();',200); } } EmxGlobalnav.prototype.onmouseidle = function () { clearInterval(this.mouseIdleID); if (this.isOverMainNav == false && this.isOverSubmenu == false) { // the mouse is not over the globalnav so turn off buttons this.over_button = null; this.buttonsAllOff(); this.setGlobalmessageState('on'); } else if (this.isOverMainNav == true) { if (this.over_button != null && (this.over_button != this.current_button)) { // mouse is over a new nav button // set the new over_button as current button this.setCurrentButton(this.over_button); } } } EmxGlobalnav.prototype.setGlobalmessageState = function (state) { if (this.globalmessaging != null) { var state = (state) ? state : 'off'; switch (state) { case 'on': this.globalmessaging.style.visibility = 'visible'; break; case 'off': this.globalmessaging.style.visibility = 'hidden'; break; } this.gmaState = state; } } EmxGlobalnav.prototype.offButton = function (button) { if (button != this.current_button) { // button rolled off is not the current active button // so it is safe to turn it off this.over_button = null; this.buttons[button.id].setState('off'); } } EmxGlobalnav.prototype.overButton = function (button) { this.isOverMainNav = true; if (this.current_button == null) { // button was rolled over and there is not a current_button, // so set the new button as the current button. this.setGlobalmessageState('off'); this.setCurrentButton(button); } else if (button != this.current_button) { // mouse is over a new button and there is already a button active. // save new button so that if the mouse is still over it when we set the // current_button expires set the new button to be current without requiring another mouseover this.over_button = button; this.buttons[button.id].setState('over'); } } /* tab event methods :: handle tabbing to globalnav buttons and globalnav hyperlinks moves an instance of EmxTabFocusBox over focused element */ EmxGlobalnav.prototype.tabFocus = function (element) { if (element) { var elementBoxCoords = getElementBoxCoords(element); if (element.id == 'search-input') { // tabbing to the search input field needs to turn of other buttons // override default focus box color with eMX "halo" green // not sure of a more generic means to detect this scenario this.buttonsAllOff(); this.tabFocusBox.display(elementBoxCoords,'#63df52'); } else if (element.id && this.buttons[element.id] != null) { // user has tabbed to a globalnav button // make sure all *other* buttons are off // this element becomes the new active button this.setGlobalmessageState('off'); this.setCurrentButton(element); // adjust box coords for globalnav buttons to 32 pixel height elementBoxCoords.y2 -= 3; this.tabFocusBox.display(elementBoxCoords); } else { this.tabFocusBox.display(elementBoxCoords); } } return; } EmxGlobalnav.prototype.tabBlur = function (element) { this.tabFocusBox.hide(); // catch buttons without submenus // like search button as it will get stuck in the ON position if (this.buttons[element.id] != null && this.buttons[element.id].submenu == null) { this.buttonsAllOff(); } } EmxTabFocusBox = function (idstring) { this.domElement = document.createElement('div'); this.domElement.setAttribute('id',idstring); this.domElement.setAttribute('name',idstring); this.domElement.style.position = 'absolute'; this.domElement.style.top = 0; this.domElement.style.left = 0; this.domElement.style.padding = 0; this.domElement.style.border = '3px solid'; this.domElement.style.margin = 0; this.domElement.style.width = 100+'px'; this.domElement.style.height = 35+'px'; this.domElement.zIndex = 9900; this.domElement.style.visibility = 'hidden'; // add div element to the DOM this.domElement = document.getElementsByTagName('body')[0].appendChild(this.domElement); return this; } EmxTabFocusBox.prototype.hide = function () { this.domElement.style.visibility = 'hidden'; } EmxTabFocusBox.prototype.display = function (coordsObj,hexStr) { if (coordsObj && coordsObj.constructor == BoxCoords) { var parentBoxCoords = getElementBoxCoordsById('globalnav'); // correction fo Windows Internet Explorer box model var bxc = ((browser.ua.indexOf('msie') != -1) && browser.plt.indexOf('mac') == -1) ? 6 : 0; this.domElement.style.width = (coordsObj.x2 - coordsObj.x1) + bxc +'px'; this.domElement.style.height = (coordsObj.y2 - coordsObj.y1) - 2 + bxc +'px'; this.domElement.style.top = coordsObj.y1 - 2 +'px'; this.domElement.style.left = coordsObj.x1 - 4 +'px'; var color = (hexStr) ? hexStr : 'yellow'; this.domElement.style.borderColor = color; this.domElement.style.visibility = 'visible'; } } /* ////////// global variables //////////////////// */ var browser = new BrowserDescription(); var globalnav = new EmxGlobalnav(); if ((!window.opera && browser.ua.indexOf('netscape6') == -1) || (window.opera && browser.appV >= 7)) { registerOnLoadFunc(globalnav.init); }