Util = function Util()
	{
	    this.addEvent = function (par_oHtmlElement, par_sEventName, par_rFunction, par_bUseCapture)
	    {   
	        if (par_oHtmlElement.addEventListener)
	        {
	            if(!par_bUseCapture && typeof(par_bUseCapture)=="undefined") par_bUseCapture = true;
	            par_oHtmlElement.addEventListener(par_sEventName, par_rFunction, par_bUseCapture);
	            return true;
	        }
	        else if (par_oHtmlElement.attachEvent)
	        {
	            var bReturnCode = par_oHtmlElement.attachEvent("on"+par_sEventName, par_rFunction);
	            return bReturnCode;
	        }
	        else return false;
	    }
	
	    this.getElementsByAttribute = function (oElm, strTagName, strAttributeName, strAttributeValue)
	    {
			var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
			var arrReturnElements = new Array();
			var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|\\s)" + strAttributeValue + "(\\s|$)") : null;
			var oCurrent;
			var oAttribute;
			for(var i=0; i<arrElements.length; i++){
				oCurrent = arrElements[i];
				oAttribute = oCurrent.getAttribute && oCurrent.getAttribute(strAttributeName);
				if(typeof oAttribute == "string" && oAttribute.length > 0){
					if(typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){
						arrReturnElements.push(oCurrent);
					}
				}
			}
			return arrReturnElements;
		}
	}
	
	Menu = function Menu(par_oMenuBox)
			{
			
				var oThis = this;
				var cls_oMenuBox = par_oMenuBox,
					cls_oTarget=null;
				var mouseOver=null;
				
				var aVoiceBoxes = util.getElementsByAttribute(cls_oMenuBox, "*", "SD_selector", "button");
				var aVoices = new Array(aVoiceBoxes.length);
				var cls_iSelectedVoice;
				
				var loadTarget = function (par_Owner, par_oVoice)
								{
									var iSelectedVoiceIndex = par_oVoice.getIndex();
									var oTarget = oThis.getTarget();
									var imgFormat= "low";
									for(i=0;i < oThis.getVoices().length; i++)
									{	
										oThis.getVoices()[i].setState(false);
									}
									if(oTarget.getId()!='Display')
									{
										for (i=0; i < oTarget.getVoices().length; i++ )
										{
											var sPath = "images/"+iSelectedVoiceIndex+"/"+imgFormat+i+".jpg";
											oTarget.getVoices()[i].getBox().src = sPath;
											oTarget.getVoices()[i].getBox().alt = sPath;
										}
									}else{
										var sPath1 = par_oVoice.getBox().src.replace("over","high");
										oTarget.getVoices()[0].getBox().src = sPath1;
										oTarget.getVoices()[0].getBox().alt = sPath1;
									}
									oTarget.setDisplay("block");
								}
				
				for (i=0;i < aVoiceBoxes.length; i++)
				{
					aVoices[i] = new Voice(oThis, aVoiceBoxes[i], i, loadTarget);
				}
				this.setTarget = function (par_oTarget){cls_oTarget=par_oTarget;}
				this.getTarget = function (){return cls_oTarget;}
				this.getVoices = function (){return aVoices;}
				this.getId = function (){return cls_oMenuBox.id;}
				this.setDisplay = function(par_sValue){cls_oMenuBox.style.display = par_sValue;}
				this.addMouseOver = function()
									{	
										
										for (i=0;i < aVoiceBoxes.length; i++)
										{
											aVoices[i].addMouseOver();
										}									
									}
			}
			
	Voice = function Voice(par_Owner, par_oVoiceBox, par_iIndex, par_callback)
			{
				var oThis = this;
				var cls_oVoiceBox = par_oVoiceBox,
					cls_iIndex = par_iIndex;
				var cls_bState = false;
				var defaultClassName = cls_oVoiceBox.className;
				cls_oVoiceBox.className = defaultClassName + "Off " + defaultClassName;
								
				var loadTarget = function ()
								{	
									document.getElementById('thumbnails').style.display='none';
									document.getElementById('Display').style.height='370px';			
									par_callback(par_Owner, oThis);
									oThis.setState(cls_bState);
								}
				this.getBox = function (){return cls_oVoiceBox;}
				this.getIndex = function (){return cls_iIndex;}

				this.getState = function (){return cls_bState;}
				this.setState = function (bState)
								{
									if(bState==false)
									{
										cls_oVoiceBox.className = defaultClassName + "Off " + defaultClassName ;
										cls_bState=true;
									}else{
										cls_oVoiceBox.className = defaultClassName + "On " + defaultClassName;
										cls_bState=false;
									}
								}
				this.addMouseOver = function()
									{
										var changeState = function ()
										{
										
											var sPath1 = cls_oVoiceBox.src.replace("low","over");
											cls_oVoiceBox.src = sPath1;
											cls_oVoiceBox.alt = sPath1;
										}
										
										var resetState = function ()
										{
										
											var sPath1 = cls_oVoiceBox.src.replace("over","low");
											cls_oVoiceBox.src = sPath1;
											cls_oVoiceBox.alt = sPath1;
										}
										
										var bAddEvent;
										bAddEvent = util.addEvent(cls_oVoiceBox, "mouseover", changeState, true);
										bAddEvent = util.addEvent(cls_oVoiceBox, "mouseout", resetState, true);
										
										
									}
	
				var bAddEvent;
				bAddEvent = util.addEvent(cls_oVoiceBox, "click", loadTarget, true);
				
				
			}		

	function setup ()
	{
		var oMenu1 = new Menu(document.getElementById("Menu1"));
		oMenu1.setDisplay("block");
		var oMenu2 = new Menu(document.getElementById("Menu2"));
		oMenu1.setTarget(oMenu2);
		oMenu2.addMouseOver();

		
		var oDisplay = new Menu(document.getElementById("Display"));
		oMenu2.setTarget(oDisplay);
	}	

	var util = new Util();