if (Prototype.Browser.IE) { Prototype.Browser.IEVersion = parseFloat(navigator.appVersion.split(';')[1].strip().split(' ')[1]); Prototype.Browser.IE6 = Prototype.Browser.IEVersion == 6; Prototype.Browser.IE7 = Prototype.Browser.IEVersion == 7; } var NavigationBar = Class.create({ initialize: function(options) { this.layerToShow = null; this.layerCurrentlyShown = null; this.options = { navigationBarId: null }; this.options = Object.extend(this.options, options || {}); this.observeItems(); }, observeItems: function(){ $(this.options.navigationBarId).select("li.navigation-bar-item").each(function(element,index){ var layerelement = element.select(".sub-navigation-layer")[0]; if(layerelement != undefined) this.setLayerOrientation(layerelement,element,element.up()); this.addLayerEffects(layerelement,element,index); }.bind(this)); }, setLayerOrientation: function(layerelement,listelement,navigationBar){ var offsetLeft = Element.positionedOffset(listelement).left; var layerWidth = layerelement.getWidth(); var rightPadding = navigationBar.getWidth() - layerWidth - offsetLeft; var leftPadding = offsetLeft + listelement.getWidth(); var isRightOrientation = offsetLeft+listelement.getWidth()/2 > navigationBar.getWidth()/2; var navigationBarHeight = navigationBar.getHeight(); layerelement.setStyle({top: navigationBarHeight+'px'}); listelement.select("a.navigation-bar-link").each(function(linkelement){ linkelement.setStyle({height: (navigationBarHeight-20)+'px'}); }); var navigationBarHeight = navigationBar.getHeight(); layerelement.setStyle({top: navigationBarHeight+'px'}); if(isRightOrientation){ //element.addClassName("sub-navigation-layer-right"); layerelement.setStyle({left: rightPadding+'px'}); }else{ //element.removeClassName("sub-navigation-layer-right"); layerelement.setStyle({left: -offsetLeft+'px'}); } if(Prototype.Browser.IE6){ this.iframe = new Element('iframe',{'class': 'navLayerIframe', src: "javascript:''",scrolling:'no',frameborder:'0'}); this.iframe.setStyle({ height: layerelement.getHeight()+"px", width: layerelement.getWidth()+"px", opacity: 0, position: 'absolute', top: navigationBarHeight+'px', backgroundColor: 'transparent', display: 'none' }); if(isRightOrientation){ this.iframe.setStyle({left: rightPadding+'px'}); }else{ this.iframe.setStyle({left: -offsetLeft+'px'}); } listelement.insert({bottom: this.iframe}); } }, addLayerEffects: function(layerelement,listelement,index){ if(layerelement != undefined) layerelement.hide(); listelement.observe('mouseover',function(event){ this.layerToShow = listelement; this.observeLayerVisibilityStatus(); }.bind(this)); listelement.observe('mouseout',function(event){ this.layerToShow = null; this.observeLayerVisibilityStatus(); }.bind(this)); }, observeLayerVisibilityStatus: function(){ if(this.updater == null){ this.updater = new PeriodicalExecuter(function(){ if(this.layerToShow != null) this.showLayer(); else this.hideLayer(); this.updater.stop(); this.updater = null; }.bind(this), 0.5); } }, showLayer: function(){ if(this.layerToShow != this.layerCurrentlyShown){ if(this.layerCurrentlyShown != null) var layerCurrentlyShownWasNull = this.layerCurrentlyShown.select(".sub-navigation-layer")[0] == null; else var layerCurrentlyShownWasNull = true; this.hideLayer(); if(this.layerToShow != null){ this.layerToShow.addClassName("hover"); var layer = this.layerToShow.select(".sub-navigation-layer")[0]; this.layerToShow.select('iframe').each(function(iframe){ iframe.setStyle({ display: 'block' }); }); if(layer != undefined) if(layerCurrentlyShownWasNull){ layer.appear({ duration: 0.2 }); }else{ layer.show(); } this.layerCurrentlyShown = this.layerToShow; this.layerToShow = null; } } }, hideLayer: function(afterFinish){ if(afterFinish == undefined) afterFinish = function(){}; if(this.layerCurrentlyShown != null){ this.layerCurrentlyShown.removeClassName("hover"); this.layerCurrentlyShown.select('iframe').each(function(iframe){ iframe.setStyle({ display: 'none' }); }); var layer = this.layerCurrentlyShown.select(".sub-navigation-layer")[0]; if(layer != undefined) layer.hide(); this.layerCurrentlyShown = null; }else{ afterFinish(); } } });