var MenuHovers = function()
{    
    function getElementsByClassName(className, tag, elm)
    {
        var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");	        	        	        	        	        
        var tag = tag || "*";
        var elm = elm || document;
        var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
        var returnElements = [];
        var current;
        var length = elements.length;
    	
        for(var i=0; i<length; i++)
        {
            current = elements[i];
            if(testClass.test(current.className))
            {
	            returnElements.push(current);
            }
        }
    	
        return returnElements;
    }

    // find absolute position of object menu in relation to container_id argument (or window if container not passed in)
    function FindPos(obj, container_id) 
    {
	    var curleft = curtop = 0;	

	    if (obj.offsetParent) 
	    {
		    do 
		    {
			    curleft += obj.offsetLeft;
			    curtop += obj.offsetTop;
			    obj = obj.offsetParent;

			    // modified so we only return position in relation to this container
			    if ((typeof container_id == "string") && (obj.id == container_id))
			    {
				    break;
			    }
		    } while (obj);	
	    }

	    return [curleft,curtop];
    }


    function PreloadMenuHoverImages()
    {
        var image1 = new Image();
        image1.src = "Images/Menu/Hover/menuHoverPepperoni.png";
        
        var image2 = new Image();
        image2.src = "Images/Menu/Hover/menuHoverSausage.png";
        
        //var image3 = new Image();
        //image3.src = "Images/Menu/Hover/menuHoverSauce.png";
        
        var image4 = new Image();
        image4.src = "Images/Menu/Hover/menuHoverBeef.png";
    
    }

    /* This wraps the keywords around with span tags so hovers can be attached to them.
       Note the regular expression requires that the keyword must:
       1) have a space before the word
       2) if there is a keyword that we do not want to show the hover state, then add a '&nbsp;' in place of the
          space
       3) and must have either a standard punctuation or space after the word
       
       If html is showing up weird, it is probably because an alt tag looks like this.
       <img src="beef.jpg" alt=" Beef Topping " />
       
       Remove the spaces around the alt tag to look like this:
       <img src="beef.jpg" alt="Beef Topping" />
    */
    function AttachSpanTags(containerClass)
    {
        var textContainers = getElementsByClassName(containerClass);
        
        for(var i=0; i < textContainers.length; ++i)
        {
            var html = textContainers[i].innerHTML;    
            html = html.replace(/\s(pepperoni)([\s.!,])/gi, ' <span class="menuHover pepperoni">$1</span>$2');
            //html = html.replace(/\s(sausage)([\s.!,])/gi, ' <span class="menuHover sausage">$1</span>$2');
            html = html.replace(/\s(sauce)([\s.!,])/gi, ' <span class="menuHover sauce">$1</span>$2');
            html = html.replace(/\s(beef)([\s.!,])/gi, ' <span class="menuHover beef">$1</span>$2');
            textContainers[i].innerHTML = html;       
        }
    }

    function AttachMenuHovers()
    {
        var elems = getElementsByClassName("menuHover", "span");
        document.getElementById('PepperoniHover').style.display = "none";
        //document.getElementById('SausageHover').style.display = "none";
        document.getElementById('BeefHover').style.display = "none";
        document.getElementById('SauceHover').style.display = "none";
            
        for(var i=0; i < elems.length; ++i)
        {   
            elems[i].onmouseover = elems[i].onmouseout =  function(e)
            {            
                ToggleHover(this);
            }        
        }
    }

    function ToggleHover(triggerElem)
    {
        var triggerClass = triggerElem.className;   
        var hoverElemId;

        if(triggerClass.indexOf('pepperoni') >= 0)
        {
            hoverElemId = 'PepperoniHover';        
        }
       // else if(triggerClass.indexOf('sausage') >= 0)
       // {
       //     hoverElemId = 'SausageHover';
       // }
        else if(triggerClass.indexOf('beef') >= 0)
        {
            hoverElemId = 'BeefHover';
        }
        else if(triggerClass.indexOf('sauce') >= 0)
        {
            hoverElemId = 'SauceHover';
        }

        if(document.getElementById(hoverElemId).style.display == "none")
        {
            ShowHover(triggerElem, hoverElemId);
        }
        else
        {
            HideHover(hoverElemId)
        }
    }

    function ShowHover(triggerElem, hoverElemId)
    {	
	    var menuHover = document.getElementById(hoverElemId);	
	    var triggerElemPos = FindPos(triggerElem);
    	
	    posX = triggerElemPos[0] + triggerElem.offsetWidth;
	    posY = triggerElemPos[1] - 180;
    		
	    menuHover.style.left = posX + "px";
	    menuHover.style.top  = posY + "px";	
	    menuHover.style.display = "block";	
	    //jQuery(menuHover).fadeIn("fast");	
    }

    function HideHover(hoverElemId)
    {
        var menuHover = document.getElementById(hoverElemId);
        menuHover.style.display = "none";    
    }


    /*************************/

    PreloadMenuHoverImages();
    AttachSpanTags('modulePadding');
    AttachMenuHovers();
    
}();