// updated 08/09/09 var forumWindow = null; var popupWindow = null; function photoPopup(photo_location, title, width, height, width_border, height_border) { if(width_border) { width += width_border; } if(height_border) { height += height_border; } if(popupWindow != null) { popupWindow.close(); } popupWindow = window.open(photo_location, title, 'width=' + width + ',height=' + height + ',scrollbars=yes,location=no,toolbar=no,menubar=no,url=no,statusbar=no,resizable=yes'); } function forumPopup() { if(forumWindow != null) { forumWindow.close(); } forumWindow = window.open('http://salvatorfabris.com/forum/index.php', 'OSHForum', 'width=800,height=600,scrollbars=yes,location=yes,toolbar=yes,menubar=yes,url=yes,status=yes,resizable=yes'); } //////////////////////////////////////////////////////////////////////////////////////////////////////// // Popup Menu Code // //////////////////////////////////////////////////////////////////////////////////////////////////////// // global menu state var menuReady = false; // initialize global that helps manage menu hiding var timer; // pre-cache menubar image pairs if (document.images) { var imagesNormal = new Array(); imagesNormal["1"] = new Image(36, 144); imagesNormal["1"].src = "/img/BtnHomeBlue.gif"; imagesNormal["2"] = new Image(36, 144); imagesNormal["2"].src = "/img/BtnSalvatorFabrisBlue.gif"; imagesNormal["3"] = new Image(36, 144); imagesNormal["3"].src = "/img/BtnWeaponsBlue.gif"; imagesNormal["4"] = new Image(36, 144); imagesNormal["4"].src = "/img/BtnArticlesBlue.gif"; imagesNormal["5"] = new Image(36, 144); imagesNormal["5"].src = "/img/BtnBooksBlue.gif"; imagesNormal["6"] = new Image(36, 144); imagesNormal["6"].src = "/img/BtnInstructorsBlue.gif"; imagesNormal["7"] = new Image(36, 144); imagesNormal["7"].src = "/img/BtnLinksBlue.gif"; imagesNormal["8"] = new Image(36, 144); imagesNormal["8"].src = "/img/BtnForumsBlue.gif"; var imagesHilite = new Array(); imagesHilite["1"] = new Image(36, 144); imagesHilite["1"].src = "/img/BtnHomeRed.gif"; imagesHilite["2"] = new Image(36, 144); imagesHilite["2"].src = "/img/BtnSalvatorFabrisRed.gif"; imagesHilite["3"] = new Image(36, 144); imagesHilite["3"].src = "/img/BtnWeaponsRed.gif"; imagesHilite["4"] = new Image(36, 144); imagesHilite["4"].src = "/img/BtnArticlesRed.gif"; imagesHilite["5"] = new Image(36, 144); imagesHilite["5"].src = "/img/BtnBooksRed.gif"; imagesHilite["6"] = new Image(36, 144); imagesHilite["6"].src = "/img/BtnInstructorsRed.gif"; imagesHilite["7"] = new Image(36, 144); imagesHilite["7"].src = "/img/BtnLinksRed.gif"; imagesHilite["8"] = new Image(36, 144); imagesHilite["8"].src = "/img/BtnForumsRed.gif"; var imageSmallNormal = new Array(); imageSmallNormal["Rapier"] = new Image(22, 144); imageSmallNormal["Rapier"].src = "/img/SmBtnRapierBlue.gif"; imageSmallNormal["Baroque"] = new Image(22, 144); imageSmallNormal["Baroque"].src = "img/SmBtnBaroqueSwordBlue.gif"; imageSmallNormal["Polearms"] = new Image(22, 144); imageSmallNormal["Polearms"].src = "/img/SmBtnPolearmsBlue.gif"; imageSmallNormal["Bolognese"] = new Image(22, 144); imageSmallNormal["Bolognese"].src = "/img/SmBtnBologneseBlue.gif"; imageSmallNormal["Classical"] = new Image(22, 144); imageSmallNormal["Classical"].src = "/img/SmBtnClassicalBlue.gif"; imageSmallNormal["Smallsword"] = new Image(22, 144); imageSmallNormal["Smallsword"].src = "/img/SmBtnSmallswordBlue.gif"; imageSmallNormal["Longsword"] = new Image(22, 144); imageSmallNormal["Longsword"].src = "/img/SmBtnLongswordBlue.gif"; imageSmallNormal["I.33"] = new Image(22, 144); imageSmallNormal["I.33"].src = "/img/SmBtnI33Blue.gif"; imageSmallNormal["InstructorsTom"] = new Image(22, 144); imageSmallNormal["InstructorsTom"].src = "/img/SmBtnTomBlue.gif"; imageSmallNormal["InstructorsSteve"] = new Image(22, 144); imageSmallNormal["InstructorsSteve"].src = "/img/SmBtnSteveBlue.gif"; imageSmallNormal["InstructorsKara"] = new Image(22, 144); imageSmallNormal["InstructorsKara"].src = "/img/SmBtnKaraBlue.gif"; var imageSmallHilite = new Array(); imageSmallHilite["Rapier"] = new Image(22, 144); imageSmallHilite["Rapier"].src = "/img/SmBtnRapierRed.gif"; imageSmallHilite["Baroque"] = new Image(22, 144); imageSmallHilite["Baroque"].src = "img/SmBtnBaroqueSwordRed.gif"; imageSmallHilite["Polearms"] = new Image(22, 144); imageSmallHilite["Polearms"].src = "/img/SmBtnPolearmsRed.gif"; imageSmallHilite["Bolognese"] = new Image(22, 144); imageSmallHilite["Bolognese"].src = "/img/SmBtnBologneseRed.gif"; imageSmallHilite["Classical"] = new Image(22, 144); imageSmallHilite["Classical"].src = "/img/SmBtnClassicalRed.gif"; imageSmallHilite["Smallsword"] = new Image(22, 144); imageSmallHilite["Smallsword"].src = "/img/SmBtnSmallswordRed.gif"; imageSmallHilite["Longsword"] = new Image(22, 144); imageSmallHilite["Longsword"].src = "/img/SmBtnLongswordRed.gif"; imageSmallHilite["I.33"] = new Image(22, 144); imageSmallHilite["I.33"].src = "/img/SmBtnI33Red.gif"; imageSmallHilite["InstructorsTom"] = new Image(22, 144); imageSmallHilite["InstructorsTom"].src = "/img/SmBtnTomRed.gif"; imageSmallHilite["InstructorsSteve"] = new Image(22, 144); imageSmallHilite["InstructorsSteve"].src = "/img/SmBtnSteveRed.gif"; imageSmallHilite["InstructorsKara"] = new Image(22, 144); imageSmallHilite["InstructorsKara"].src = "/img/SmBtnKaraRed.gif"; } function getElementStyle(elem, IEStyleProp, CSSStyleProp) { if (elem.currentStyle) { return elem.currentStyle[IEStyleProp]; } else if (window.getComputedStyle) { var compStyle = window.getComputedStyle(elem, ""); return compStyle.getPropertyValue(CSSStyleProp); } return ""; } // carry over some critical menu style sheet attribute values var CSSRuleValues = {menuItemHeight:"18px", menuItemLineHeight:"1.4em", menuWrapperBorderWidth:"2px", menuWrapperPadding:"3px", defaultBodyFontSize:"12px" }; // specifications for menu contents and menubar image associations var menus = new Array(); menus[0] = {mBarImgId:"menuImg_1", mBarImgNormal:imagesNormal["1"], mBarImgHilite:imagesHilite["1"], menuItems:[], elemId:"" }; menus[1] = {mBarImgId:"menuImg_2", mBarImgNormal:imagesNormal["2"], mBarImgHilite:imagesHilite["2"], menuItems:[], elemId:"" }; menus[2] = {mBarImgId:"menuImg_3", mBarImgNormal:imagesNormal["3"], mBarImgHilite:imagesHilite["3"], menuItems:[ {name:"Rapier", text:"Rapier", href:"/SectionRapier.shtml", imageOn:imageSmallHilite["Rapier"], imageOff:imageSmallNormal["Rapier"]}, {name:"Baroque", text:"Baroque", href:"/SectionBaroqueSword.shtml", imageOn:imageSmallHilite["Baroque"], imageOff:imageSmallNormal["Baroque"]}, {name:"Polearms", text:"Polearms", href:"/SectionPolearms.shtml", imageOn:imageSmallHilite["Polearms"], imageOff:imageSmallNormal["Polearms"]}, {name:"Bolognese", text:"Bolognese Swordsmanship", href:"/SectionBolognese.shtml", imageOn:imageSmallHilite["Bolognese"], imageOff:imageSmallNormal["Bolognese"]}, {name:"Classical", text:"Classical Neapolitan Epee", href:"/SectionClassical.shtml", imageOn:imageSmallHilite["Classical"], imageOff:imageSmallNormal["Classical"]}, {name:"Smallsword", text:"Smallsword", href:"/SectionSmallsword.shtml", imageOn:imageSmallHilite["Smallsword"], imageOff:imageSmallNormal["Smallsword"]}, {name:"Longsword", text:"Longsword", href:"/SectionLongsword.shtml", imageOn:imageSmallHilite["Longsword"], imageOff:imageSmallNormal["Longsword"]}, {name:"I.33", text:"I.33", href:"/SectionI33.shtml", imageOn:imageSmallHilite["I.33"], imageOff:imageSmallNormal["I.33"]} ], elemId:"" }; menus[3] = {mBarImgId:"menuImg_4", mBarImgNormal:imagesNormal["4"], mBarImgHilite:imagesHilite["4"], menuItems:[], elemId:"" }; menus[4] = {mBarImgId:"menuImg_5", mBarImgNormal:imagesNormal["5"], mBarImgHilite:imagesHilite["5"], menuItems:[], elemId:"" }; menus[5] = {mBarImgId:"menuImg_6", mBarImgNormal:imagesNormal["6"], mBarImgHilite:imagesHilite["6"], menuItems:[ {name:"InstructorsTom", text:"Instructors - Tom", href:"/InstructorsTom.shtml", imageOn:imageSmallHilite["InstructorsTom"], imageOff:imageSmallNormal["InstructorsTom"]}, {name:"InstructorsSteve", text:"Instructors - Steve", href:"/InstructorsSteve.shtml", imageOn:imageSmallHilite["InstructorsSteve"], imageOff:imageSmallNormal["InstructorsSteve"]}, {name:"InstructorsKara", text:"Instructors - Kara", href:"/InstructorsKara.shtml", imageOn:imageSmallHilite["InstructorsKara"], imageOff:imageSmallNormal["InstructorsKara"]} ], elemId:"" }; menus[6] = {mBarImgId:"menuImg_7", mBarImgNormal:imagesNormal["7"], mBarImgHilite:imagesHilite["7"], menuItems:[], elemId:"" }; menus[7] = {mBarImgId:"menuImg_8", mBarImgNormal:imagesNormal["8"], mBarImgHilite:imagesHilite["8"], menuItems:[], elemId:"" }; // create hash table-like lookup for menu objects with id string indexes function makeHashes() { for (var i = 0; i < menus.length; i++) { var menu = menus[i]; menus[menu["elemId"]] = menu; menus[menu["mBarImgId"]] = menu; } } // assign menu label image event handlers function assignLabelEvents() { var elem; for (var i = 0; i < menus.length; i++) { var menu = menus[i]; elem = document.getElementById(menu["mBarImgId"]); elem.onmouseover = swap; elem.onmouseout = swap; } } // invoked from init(), generates the menu div elements and their contents. // all this action is invisible to user during construction function makeMenus() { var menuDiv, menuItem, itemLink, mbarImg, textNode, offsetLeft, offsetTop, imageNode; // determine key adjustment factors for the total height of menu divs var menuItemH = 0; var bodyFontSize = parseInt(getElementStyle(document.body, "fontSize", "font-size")); // test to see if browser's font size has been adjusted by the user // and that the new size registers as an applied style property if (bodyFontSize == parseInt(CSSRuleValues.defaultBodyFontSize)) { menuItemH = (parseFloat(CSSRuleValues.menuItemHeight)); } else { // works nicely in Netscape 7 menuItemH = parseInt(parseFloat(CSSRuleValues.menuItemLineHeight) * bodyFontSize); } var heightAdjust = parseInt(CSSRuleValues.menuWrapperPadding) + parseInt(CSSRuleValues.menuWrapperBorderWidth); if (navigator.appName == "Microsoft Internet Explorer" && navigator.userAgent.indexOf("Win") != -1 && (typeof document.compatMode == "undefined" || document.compatMode == "BackCompat")) { heightAdjust = -heightAdjust; } // use menus array to drive div creation loop for (var i = 0; i < menus.length; i++) { menuDiv = document.createElement("div"); menuDiv.id = "popupmenu" + i; // preserve menu's ID as property of the menus array item menus[i].elemId = "popupmenu" + i; menuDiv.className = "menuWrapper"; if (menus[i].menuItems.length > 0) { menuDiv.style.height = (menuItemH * menus[i].menuItems.length + 6) - heightAdjust + "px"; } else { // don't display any menu div lacking menu items menuDiv.style.display = "none"; } // define event handlers menuDiv.onmouseover = keepMenu; menuDiv.onmouseout = requestHide; // set stacking order in case other layers are around the page menuDiv.style.zIndex = 1000; // assemble menu item elements for inside menu div for (var j = 0; j < menus[i].menuItems.length; j++) { menuItem = document.createElement("div"); menuItem.id = "popupmenuItem_" + i + "_" + j; menuItem.className = "menuItem"; menuItem.onclick = hideMenus; menuItem.style.top = menuItemH * j + "px"; itemLink = document.createElement("a"); itemLink.href = menus[i].menuItems[j].href; itemLink.className = "menuItem"; imageNode = document.createElement("img"); imageNode.src = imageSmallNormal[menus[i].menuItems[j].name].src; imageNode.border = 0; imageNode.name = menus[i].menuItems[j].name; itemLink.onmouseover = toggleHighlight; itemLink.onmouseout = toggleHighlight; itemLink.appendChild(imageNode); menuItem.appendChild(itemLink); menuDiv.appendChild(menuItem); } // append each menu div to the body document.body.appendChild(menuDiv); } makeHashes(); assignLabelEvents(); // pre-position menu for (i = 0; i < menus.length; i++) { positionMenu(menus[i].elemId); } menuReady = true; } // menu bar image swapping, invoked from mouse events in menu bar // swap style sheets for menu items during rollovers function toggleHighlight(evt) { evt = (evt) ? evt : ((event) ? event : null); if (typeof menuReady != "undefined") { if (menuReady && evt) { var elem = (evt.target) ? evt.target : evt.srcElement; if (elem.nodeType == 3) { elem = elem.parentNode; } if (evt.type == "mouseover") { elem.src = imageSmallHilite[elem.name].src; elem.border = 0; keepMenu(); elem.className ="menuItemOn"; } else { elem.src = imageSmallNormal[elem.name].src; elem.border = 0; elem.className ="menuItem"; requestHide(); } evt.cancelBubble = true; } } } // invoked from mouseovers inside menus to cancel hide // request from mouseout of menu bar image et al. function keepMenu() { clearTimeout(timer); } function cancelAll() { keepMenu(); menuReady = false; } // invoked from mouseouts to request hiding all menus // in 1/4 second, unless cancelled function requestHide() { timer = setTimeout("hideMenus()", 250); } // "brute force" hiding of all menus and restoration // of normal menu bar images function hideMenus() { for (var i = 0; i < menus.length; i++) { document.getElementById(menus[i].mBarImgId).src = menus[i].mBarImgNormal.src; var menu = document.getElementById(menus[i].elemId) menu.style.visibility = "hidden"; } } // set menu position just before displaying it function positionMenu(menuId) { // use the menu bar image for position reference of related div var mBarImg = document.getElementById(menus[menuId].mBarImgId); var offsetTrail = mBarImg; var offsetLeft = 0; var offsetTop = 0; while (offsetTrail) { offsetLeft += offsetTrail.offsetLeft; offsetTop += offsetTrail.offsetTop; offsetTrail = offsetTrail.offsetParent; } if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined") { offsetLeft += document.body.leftMargin; offsetTop += document.body.topMargin; } var menuDiv = document.getElementById(menuId); menuDiv.style.left = offsetLeft + (mBarImg.width - 10) + "px"; menuDiv.style.top = offsetTop + 4 + "px"; } // display a particular menu div function showMenu(menuId) { if (menuReady) { keepMenu(); hideMenus(); positionMenu(menuId); var menu = document.getElementById(menuId); menu.style.visibility = "visible"; } } function swap(evt) { evt = (evt) ? evt : ((event) ? event : null); if (typeof menuReady != "undefined") { if (evt && (document.getElementById && document.styleSheets) && menuReady) { var elem = (evt.target) ? evt.target : evt.srcElement; if (elem.className == "menuImg") { if (evt.type == "mouseover") { showMenu(menus[elem.id].elemId); elem.src = menus[elem.id].mBarImgHilite.src; } else if (evt.type == "mouseout") { requestHide(); } evt.cancelBubble = true; } } } } // create menus only if key items are supported function initMenus() { if (document.getElementById && document.styleSheets) { setTimeout("makeMenus()", 5); window.onunload=cancelAll; } }