viewport = { getIECanvas: function() { var canv = null; if (!window.opera && document.all && typeof document.body.clientWidth != "undefined") { var cm = document.compatMode && document.compatMode == "CSS1Compat"; canv = cm ? document.documentElement : document.body } return canv }, getWinWidth: function() { var canv; if (canv = this.getIECanvas()) this.width = canv.clientWidth; else this.width = window.innerWidth - 18 }, getWinHeight: function() { var canv; if (canv = this.getIECanvas()) this.height = canv.clientHeight; else this.height = window.innerHeight - 18 }, getScrollX: function() { var canv; if (canv = this.getIECanvas()) this.scrollX = canv.scrollLeft; else if (window.pageXOffset) this.scrollX = window.pageXOffset; else if (window.scrollX) this.scrollX = window.scrollX; else this.scrollX = 0 }, getScrollY: function() { var canv; if (canv = this.getIECanvas()) this.scrollY = canv.scrollTop; else if (window.pageYOffset) this.scrollY = window.pageYOffset; else if (window.scrollY) this.scrollY = window.scrollY; else this.scrollY = 0 }, getAll: function() { this.getWinWidth(); this.getWinHeight(); this.getScrollX(); this.getScrollY() }, getOffsetBrowserX: function(elem) { if (!elem) { return 0 } if (!elem.offsetParent) return elem.offsetLeft; else return elem.offsetLeft + this.getOffsetBrowserX(elem.offsetParent) }, getOffsetBrowserY: function(elem) { if (!elem) { return 0 } if (!elem.offsetParent) return elem.offsetTop; else return elem.offsetTop + this.getOffsetBrowserY(elem.offsetParent) } }; function EasyMenuOverview(id) { var height = 0; var elem = document.getElementById(id); if (!elem || !elem.childNodes) return; for (var i = 0; i < elem.childNodes.length; i++) { if (elem.childNodes[i].nodeType == 1 && elem.childNodes[i].tagName.toLowerCase() == "div" && height < elem.childNodes[i].scrollHeight) height = elem.childNodes[i].scrollHeight } for (var i = 0; i < elem.childNodes.length; i++) { if (elem.childNodes[i].nodeType == 1 && elem.childNodes[i].tagName.toLowerCase() == "div") { elem.childNodes[i].style.height = height + "px"; elem.childNodes[i].style.width = (elem.childNodes[i].scrollWidth + 20) + "px" } } }; function EasyMenu(menuId, orientation, browserType) { this.menuId = menuId; this.orientation = orientation; this.browserType = browserType; var self = this; this.addEvent = function(_elem, _evtName, _fn, _useCapture) { if (typeof _elem.addEventListener != 'undefined') { if (_evtName == 'mouseenter') { _elem.addEventListener('mouseover', self.mouseEnterHack(_fn), _useCapture) } else if (_evtName == 'mouseleave') { _elem.addEventListener('mouseout', self.mouseEnterHack(_fn), _useCapture) } else { _elem.addEventListener(_evtName, _fn, _useCapture) } } else if (typeof _elem.attachEvent != 'undefined') { _elem.attachEvent('on' + _evtName, _fn) } else { _elem['on' + _evtName] = _fn } }; this.mouseEnterHack = function(_pFn) { return function(_evt) { var relTarget = _evt.relatedTarget; if (this == relTarget) { window.status = 'assdfsdf'; return } var child = relTarget; var parent = this; if (parent == child) { return false } while (child && child != parent) { child = child.parentNode } if (child == parent) return; _pFn.call(this, _evt) } }; this.addClass = function(elem, theClassName) { if (!elem) return; if (!elem.className) { elem.className = theClassName; return } classes = elem.className.split(' '); for (var i = 0; i < classes.length; i++) { if (classes[i] == theClassName) return } elem.className += ' ' + theClassName }; this.addClassToLvl = function(elem, theClassName) { if (!elem) return; classes = elem.className.split(' '); for (var i = 0; i < classes.length; i++) { if (classes[i].substring(0, 3) == 'lvl') { elem.className += ' ' + classes[i] + '-' + theClassName; return } } return }; this.removeClassFromLvl = function(elem, theClassName) { if (!elem) return; classes = elem.className.split(' '); for (var i = 0; i < classes.length; i++) { if (classes[i].substring(0, 3) == 'lvl' && classes[i].indexOf(theClassName) > 0) { this.removeClass(elem, classes[i]); return } } return }; this.containsClass = function(elem, theClassName) { if (!elem) return false; if (!elem.className) { return false } classes = elem.className.split(' '); for (var i = 0; i < classes.length; i++) { if (classes[i] == theClassName) return true } return false }; this.removeClass = function(elem, theClassName) { if (!elem) return; if (!elem.className) { return } classes = elem.className.split(' '); for (var i = 0; i < classes.length; i++) { if (classes[i] == theClassName) { classes.splice(i, 1); elem.className = classes.join(' '); return } } }; this.getSubMenuHeight = function(elem) { if (!elem) return 0; var height = 0; for (var i = 0; i < elem.childNodes.length; i++) { if (elem.childNodes[i].tagName.toLowerCase() == 'ul') { for (var j = 0; j < elem.childNodes[i].childNodes.length; j++) { if (elem.childNodes[i].childNodes[j].tagName.toLowerCase() == 'li') { height += elem.childNodes[i].childNodes[j].scrollHeight } } } } return height }; this.isWithinTd = function(elem) { if (!elem) { return false } else if (self.tagNameEquals(elem, "td")) { return true } if (!elem.parentNode) return false; else return self.isWithinTd(elem.parentNode) }; this.isLevel3WithinTd = function(elem, level) { if (!elem) { return false } if (elem.id == self.menuId) { if (level <= 3) return false; else return self.isWithinTd(elem.parentNode) } if (!elem.parentNode) return false; else return self.isLevel3WithinTd(elem.parentNode, level + 1) }; this.getLevel = function(elem) { if (!elem || elem.id == self.menuId) { return 0 } if (!elem.parentNode) return 1; else return 1 + self.getLevel(elem.parentNode) }; this.tagNameEquals = function(elem, name) { if (elem && elem.nodeType == 1 && elem.tagName.toLowerCase() == name) { return true } return false }; this.parentTagNameEquals = function(elem, name) { if (elem && elem.parentNode && elem.parentNode.nodeType == 1 && elem.parentNode.tagName.toLowerCase() == name) { return true } return false }; this.childTag = function(elem, name) { if (!elem) return null; for (var i = 0; i < elem.childNodes.length; i++) { if (elem.childNodes[i].nodeType == 1 && elem.childNodes[i].tagName.toLowerCase() == name.toLowerCase()) return elem.childNodes[i] } return null }; this.parentTag = function(elem, name) { if (elem && elem.parentNode && elem.nodeType == 1 && elem.parentNode.tagName.toLowerCase() == name.toLowerCase()) return elem.parentNode; return null }; this.mouseEnter = function(e) { var targ; if (!e) var e = window.event; if (e.srcElement && self.tagNameEquals(e.srcElement, 'li')) targ = e.srcElement; else targ = this; var childUl; var elems = targ.getElementsByTagName('ul'); if (elems.length > 0) { childUl = elems[0]; var child = targ.getElementsByTagName('a')[0]; self.addClass(child, "menu_path"); self.addClass(targ, "menu_path"); self.addClassToLvl(child, "menu_path"); self.addClassToLvl(targ, "menu_path"); if (self.containsClass(targ, "has_kids")) { self.addClass(child, "has_kids-menu_path"); self.addClass(targ, "has_kids-menu_path") } self.removeClass(elems[0], "hide_menu"); uls = elems[0].getElementsByTagName('ul'); for (var j = 0; j < uls.length; j++) { self.addClass(uls[j], "hide_menu") } } var theTag = self.parentTag(self.parentTag(targ, "ul"), "li"); self.removeClass(self.childTag(theTag, "a"), "active_menu"); self.removeClass(theTag, "active_menu"); var aTag = targ.getElementsByTagName('a')[0]; self.addClass(aTag, "active_menu"); self.addClass(targ, "active_menu"); var imgTag = self.childTag(aTag, "img"); if (imgTag) { aTag.inactiveBackgroundImage = aTag.style.backgroundImage; aTag.style.backgroundImage = "url('" + imgTag.src + "')" } self.addClass(targ, "hover_menu"); var isSafariFallLeft = false; if (childUl) { viewport.getWinWidth(); viewport.getScrollX(); var viewportRight = viewport.width + viewport.scrollX - 5; var viewportLeft = viewport.scrollY + 5; var loc = viewport.getOffsetBrowserX(targ); if (self.orientation == 'horizontal' && self.containsClass(targ, "lvl0")) { if (loc + childUl.scrollWidth > viewportRight) { childUl.style.left = "-" + (childUl.scrollWidth - targ.scrollWidth) + "px" } else { childUl.style.left = "" } targ.style.zIndex = (1000 + self.getLevel(targ)) } else { if (loc - childUl.scrollWidth < viewportLeft) { self.addClass(targ, "fall_right") } else if (loc + targ.scrollWidth + childUl.scrollWidth > viewportRight) { self.addClass(targ, "fall_left"); if (self.browserType == 2) isSafariFallLeft = true } else { self.removeClass(targ, "fall_left"); self.removeClass(targ, "fall_right"); targ.style.zIndex = (1000 + self.getLevel(targ)) } } if (!isSafariFallLeft) targ.style.zIndex = (1000 + self.getLevel(targ)); if ((self.orientation == 'vertical' || !self.containsClass(targ, "lvl0")) && !isSafariFallLeft) { viewport.getWinHeight(); viewport.getScrollY(); var viewportButtom = viewport.height + viewport.scrollY - 5; var viewportTop = viewport.scrollY + 5; loc = viewport.getOffsetBrowserY(targ); var menuHeight = childUl.scrollHeight; if (loc + menuHeight > viewportButtom) { var hh = viewportButtom - menuHeight - loc; if (loc + hh < viewportTop) hh = viewportTop - loc; childUl.style.top = hh + "px" } else { childUl.style.top = "" } } if (self.browserType == 1) { var iFrame = document.createElement("IFRAME"); iFrame.setAttribute("src", ""); iFrame.style.position = "absolute"; iFrame.style.left = viewport.getOffsetBrowserX(childUl) + 'px'; iFrame.style.top = viewport.getOffsetBrowserY(childUl) + 'px'; iFrame.style.width = childUl.scrollWidth + 'px'; iFrame.style.height = childUl.scrollHeight + 'px'; document.body.appendChild(iFrame); targ.iFrame = iFrame } if ((self.browserType == 1 || self.browserType == 3) && childUl && self.isLevel3WithinTd(childUl, 0)) { if (self.containsClass(targ, "fall_left")) childUl.style.marginLeft = -childUl.scrollWidth; else childUl.style.marginLeft = childUl.scrollWidth } } }; this.mouseLeave = function(e) { var targ; if (!e) var e = window.event; if (e.srcElement && self.tagNameEquals(e.srcElement, 'li')) targ = e.srcElement; else targ = this; var elems = targ.getElementsByTagName('ul'); if (elems.length > 0) { var child = targ.getElementsByTagName('a')[0]; self.removeClass(child, "menu_path"); self.removeClass(targ, "menu_path"); self.removeClassFromLvl(child, "menu_path"); self.removeClassFromLvl(targ, "menu_path"); if (self.containsClass(targ, "has_kids")) { self.removeClass(child, "has_kids-menu_path"); self.removeClass(targ, "has_kids-menu_path") } self.addClass(elems[0], "hide_menu") } var theTag = self.parentTag(self.parentTag(targ, "ul"), "li"); self.addClass(self.childTag(theTag, "a"), "active_menu"); self.addClass(theTag, "active_menu"); var aTag = targ.getElementsByTagName('a')[0]; self.removeClass(aTag, "active_menu"); self.removeClass(targ, "active_menu"); if (aTag.inactiveBackgroundImage) { aTag.style.backgroundImage = aTag.inactiveBackgroundImage } self.removeClass(targ, "hover_menu"); if (targ.style.zIndex && targ.style.zIndex > 0) targ.style.zIndex = 1; if (self.orientation == 'horizontal' && self.childTag(targ, 'ul')) self.childTag(targ, 'ul').style.left = ""; if (self.browserType && targ.iFrame) { document.body.removeChild(targ.iFrame); targ.iFrame = null } }; this.addMenuEvents = function(e) { var menu = self.childTag(document.getElementById(self.menuId), 'ul'); if (self.orientation == 'vertical') { menu.style.width = self.childTag(menu, 'li').getElementsByTagName('a')[0].scrollWidth + "px" } else { var totalWidth = 0; sfEls = menu.childNodes; for (var i = 0; i < sfEls.length; i++) { if (self.tagNameEquals(sfEls[i], 'li')) { totalWidth += sfEls[i].scrollWidth + 1 } } menu.style.width = totalWidth + "px" } var sfEls = menu.getElementsByTagName('li'); for (var i = 0; i < sfEls.length; i++) { self.addEvent(sfEls[i], "mouseenter", self.mouseEnter, false); self.addEvent(sfEls[i], "mouseleave", self.mouseLeave, false) } if (self.browserType == "1") document.execCommand("BackgroundImageCache", false, true); document.getElementById(self.menuId).style.position = ''; document.getElementById(self.menuId).style.left = '' }; this.removeIEMenuEvents = function(e) { var sfEls = document.getElementById(self.menuId).getElementsByTagName('li'); for (var i = 0; i < sfEls.length; i++) { sfEls[i].detachEvent("mouseenter", self.mouseEnter); sfEls[i].detachEvent("mouseleave", self.mouseLeave) } }; if (window.attachEvent) { window.attachEvent("onload", self.addMenuEvents); window.attachEvent("onunload", self.removeIEMenuEvents) } if (window.addEventListener) window.addEventListener("load", self.addMenuEvents, false) };