/**
 *
 */
var RSMenu = new Class(
{
    	DEBUG: false,
		
		sImageRootUrl: "",
		
		sOverlayParentId: null,
		
		oDebugEl: null,
		
		oOverlayEl: null,
		
		oMenuEl: null,
		
		HIGHLIGHT_TYPE: {NORM:"", HL:"_r1", RO:"_r2"},
		
		oNavGrayBar: null,
		
		oCurrentMenuItemContent: null,
		
		oCurrentMenuItemImage: null,
		
		oPreloadedImages: new Array(),
		
		nFixedHeight: -1,
		
		/**
		 *
		 */
		initialize: function(sImageRootUrl, sOverlayParentId, nTopOverlayPadding, nBottomOverlayPadding)
		{
			var oThis = this;
			window.addEvent('domready', function(){oThis.domReady();} );
			
			this.sImageRootUrl = sImageRootUrl || "";
			this.sOverlayParentId = sOverlayParentId;
			this.nTopOverlayPadding = nTopOverlayPadding || 0;
			this.nBottomOverlayPadding = nBottomOverlayPadding || 0;
    	},
		
		setFixedHeight: function(nHeight)
		{
			this.nFixedHeight = nHeight;
		},
		
		/**
		 *
		 */
		domReady: function()
		{
			this.oMenuEl = $("menu");
			this.oMenuEl.addEvent('mouseenter', this.mouseEnterMenu.bindWithEvent(this) );
			this.oMenuEl.addEvent('mouseleave', this.mouseLeaveMenu.bindWithEvent(this) );
			this.oMenuEl.setStyles({"z-index": 101,
								   "position": "absolute"});
			window.addEvent('resize', this.windowResized.bindWithEvent(this) );
			
			this.oMenuEl.addEvent("mouseover", this.mouseOverMenuItem.bindWithEvent(this) );
			
			this.oNavGrayBar = $("navgraybar");

			this.oOverlayParentEl = $(this.sOverlayParentId);
			
			var nHeight = this.nFixedHeight;
			if (nHeight == -1)
			{
				nHeight = parseInt(this.oOverlayParentEl.getStyle("height")) - (this.nTopOverlayPadding + this.nBottomOverlayPadding);
			}

			this.oOverlayEl = new Element("div");
			this.oOverlayEl.setStyles({"position":"absolute",
									  "left":0,
									  "top":this.nTopOverlayPadding,
									  "background-color": "#000000",
									  "width": this.oOverlayParentEl.getStyle("width"),
									  "height": nHeight,
									  "z-index": 100,
									  "display":"none"});
			this.resizeOverlay();
			this.oOverlayEl.setOpacity(0.5);
			
			this.oOverlayParentEl.appendChild(this.oOverlayEl);
			
			if(this.DEBUG == true)
			{
				this.oDebugEl = new Element("textarea");
				document.body.appendChild( this.oDebugEl );
				this.oDebugEl.setStyle("position", "absolute");
				this.oDebugEl.setStyle("right", "0");
				this.oDebugEl.setStyle("width", "600px");
				this.oDebugEl.setStyle("height", "200px");
				this.oDebugEl.setStyle("background-color", "white");
				this.oDebugEl.setStyle("border", "1px solid red");
			}
			
						
			var l_oImages = this.oMenuEl.getElements( ".menu-item img");
			var l_nImageCount = l_oImages.length;
			for( var i = 0; i < l_nImageCount; ++i )
			{
				this.preloadImage( l_oImages[ i ] );
			}
			
			this.preloadImage( this.oNavGrayBar );

		},
		
		windowResized: function()
		{
			this.resizeOverlay();
		},
		
		/**
		 *
		 */
		preloadImage: function(oImg)
		{
			var l_oThis = this;
			var l_sNORMImgSrc = this.sImageRootUrl + oImg.id + this.HIGHLIGHT_TYPE.NORM + ".gif";
			var l_sHLImgSrc = this.sImageRootUrl + oImg.id + this.HIGHLIGHT_TYPE.HL + ".gif";
			var l_sROImgSrc = this.sImageRootUrl + oImg.id + this.HIGHLIGHT_TYPE.RO + ".gif";
			
			var l_oImageNorm = new Image();
			l_oImageNorm.onload = function(){l_oThis.debug("loaded: " + l_sNORMImgSrc)};
			l_oImageNorm.src = l_sNORMImgSrc;
			this.oPreloadedImages[ this.oPreloadedImages.length ] = l_oImageNorm;
			this.debug( "preloading: " + l_sNORMImgSrc);
			
			var l_oImageHighlight = new Image();
			l_oImageHighlight.onload = function(){l_oThis.debug("loaded: " + l_sHLImgSrc)};
			l_oImageHighlight.src = l_sHLImgSrc;
			this.oPreloadedImages[ this.oPreloadedImages.length ] = l_oImageHighlight;
			this.debug( "preloading: " + l_sHLImgSrc);
			
			var l_oImageRollover = new Image();
			l_oImageRollover.onload = function(){l_oThis.debug("loaded: " + l_sROImgSrc)};
			l_oImageRollover.src = l_sROImgSrc;
			this.oPreloadedImages[ this.oPreloadedImages.length ] = l_oImageRollover;
			this.debug( "preloading: " + l_sROImgSrc);
		},
		
		/**
		 *
		 */
		findMenuItem: function(oEl)
		{
			var l_oEl = null;
			if( this.isMenuItem( oEl ) == true )
			{
				l_oEl = $(oEl);
			}
			else if(oEl.parentNode)
			{
				l_oEl = this.findMenuItem( oEl.parentNode );
			}
			return l_oEl;
		},
		
		/**
		 *
		 */
		mouseEnterMenu: function(oE)
		{
			this.debug("mouseEnterMenu");			
			
			this.displayOverlay( true );
			this.setMenuItemImages( this.HIGHLIGHT_TYPE.HL );
			
			// the item that the mouse is over should be highlighted
			var l_oMenuItem = this.findMenuItem(oE.target);
			if( l_oMenuItem != null )
			{
				var l_oMenuItemImage = l_oMenuItem.getElement("img");
				this.highlightImage( l_oMenuItemImage, this.HIGHLIGHT_TYPE.RO );
			}
		},
		
		/**
		 *
		 */
		mouseLeaveMenu: function(oE)
		{
			this.debug("mouseLeaveMenu");
			
			this.displayOverlay( false );
			this.setMenuItemImages( this.HIGHLIGHT_TYPE.NORM );
			
			if( this.oCurrentMenuItemContent != null )
			{
				this.oCurrentMenuItemContent.setStyle("display", "none");
			}
		},
		
		resizeOverlay: function()
		{
			var oSize = this.oOverlayParentEl.getSize();
			var nHeight = this.nFixedHeight;
			if(nHeight == -1)
			{
				var nHeightAdjust = this.nTopOverlayPadding + this.nBottomOverlayPadding;
				nHeight = ( (oSize.y || oSize.size.y ) -nHeightAdjust);
			}
			var nWidth = parseInt(this.oOverlayParentEl.getStyle("width"));
			this.oOverlayEl.setStyles({"width": nWidth + "px",
									  "height": nHeight + "px"});
		},
		
		/**
		 *
		 */
		displayOverlay: function(bDisplay)
		{
			this.resizeOverlay();
			this.oOverlayEl.setStyle("display",(bDisplay?"block":"none"));
		},
		
		/**
		 *
		 */
		setMenuItemImages: function( sHighlightType )
		{
			this.highlightImage(this.oNavGrayBar, sHighlightType);
			var l_oMenuItems = this.oMenuEl.getElements( ".menu-item img" );
			//this.debug( l_oMenuItems );
			for(var i = 0; i < l_oMenuItems.length; i++)
			{
				this.highlightImage(l_oMenuItems[ i ], sHighlightType);
			}
		},
		
		/**
		 *
		 */
		highlightImage: function( l_oImage, sHighlightType )
		{
			//if( l_oImage.id == "navaboutus" && sHighlightType == this.HIGHLIGHT_TYPE.HL ) debugger;
			l_oImage.src = this.sImageRootUrl + l_oImage.id + sHighlightType + ".gif";
		},
		
		/**
		 *
		 */
		mouseOverMenuItem: function(oE)
		{
			this.debug("mouseOverMenuItem");
			
			var l_oMenuItem = this.findMenuItem(oE.target);
			if( l_oMenuItem != null )
			{
				var l_oMenuItemImage = l_oMenuItem.getElement("img");

				// hide current menu item
				if( this.oCurrentMenuItemContent != null )
				{
					this.oCurrentMenuItemContent.setStyle("display", "none");
				}
				
				if( this.oCurrentMenuItemImage != null )
				{
					this.debug( "removing highlight:" + this.oCurrentMenuItemImage.parentNode.innerHTML + "\nNew:\n" + l_oMenuItemImage.parentNode.innerHTML );

					this.highlightImage( this.oCurrentMenuItemImage, this.HIGHLIGHT_TYPE.HL );
				}
				
				// Do rollover
				this.oCurrentMenuItemImage = l_oMenuItemImage;
				this.debug("IMG: " + this.oCurrentMenuItemImage + " MenuID: " + l_oMenuItem.innerHTML);//.src.substring(0, 40));
				this.highlightImage(this.oCurrentMenuItemImage, this.HIGHLIGHT_TYPE.RO);
				
				// find content element				
				var l_oMenuItemContent = l_oMenuItem.getElement( ".menu-item-content" );
				
				// Only show if there is content to show
				if( l_oMenuItemContent == null )
				{
					l_oMenuItemContent = l_oMenuItem.getElement( ".menu-item-content-large" );
				}
				
				// Only show if there is content to show
				if( l_oMenuItemContent )
				{
					this.oCurrentMenuItemContent = l_oMenuItemContent;
					this.oCurrentMenuItemContent.setStyle("display", "block");
				}
			}
		},
		
		/**
		 *
		 */
		isMenuItem: function(oEl)
		{
			return (oEl.className == "menu-item");
		},
		
		/**
		 *
		 */
		debug: function(sDebugText)
		{
			if(this.DEBUG == true)
			{
				if(console)
				{
					console.log(sDebugText);
				}
				this.oDebugEl.value = sDebugText  + "\n----------------------------------------\n" + this.oDebugEl.value;
			}
		}
});

var oMenu = new RSMenu(SITE_URL + "english/images/menu/", "content");