// v1.5b

// 04nov01 - tb - v1.5
//     jsMenu_css
//     ==========
//   altered jsMenu_css : instead of setting classnames to 'n', 'r' etc, ' nn', ' rr' is added
//   to the classname and before setting one of the classes the classnames is filtered so that
//   previously applied ' nn' classes are removed first. This allows affected elements to have a
//   classname applied in the xhtml document without the classname being removed by the jsMenu.
// ! now use 'double' (nn, rr, ss, dd) classnames in css. This effectively removes the possibility
//   to accidentally alter a existing classname, for instance ' red' -> 'ed' 

// 04oct05 - tb - v1.2
//     jsMenu_css, jsMenu_img
//     ======================
//   added checks for this.syncActive in jsMenu_img and jsMenu_css

// 04oct04 - tb
//   added ability to use configuration array for the jsMenu_sync object

// 04sep30 - tb
//   changed passedArray:, now it's an assoc. array with possible keys (n,r,s,d,id), d=optional
//   introduced 'disabled' state, if used (by supplying the disabledArray in init() make 
//   sure to have set the 'd' image. Identical images kan be passed to different states, for example:
//   r,s,d images can all be imgNo1_rsd.gif 
// ! disabled buttons are given the btnDisabled class, make use of that by setting cursors, 
//   or hiding them all together by setting the visibility to 'hidden' 
// ! disabled buttons onclick and onmousedown events are set to 'return false' 
	

function jsMenu_img() {
  this.selectedIndex = -1;
	this.rollOverSelectedItems = false;
	this.ldImg = new Array();
  this.btnArray = new Array();
	this.btnDisabled = new Array();

  this.syncActive = false; // synchronise with other rollovers	
	this.syncObject = ''; // instance of jsMenu_sync object
	
  jsMenu_img.prototype.init = function(passedArray,disabledArray) {
	  // ** user called ***
	  // passedArray =  assoc. array(n=btnNorm, r=btnRollOver, s=btnSelected, d=btnDisabled, id=btnId)
		// disabledArray = array(index_of_disabledBtn0,index_of_disabledBtn1,...)
		
	  if (passedArray) this.btnArray = passedArray;
		if (disabledArray) this.btnDisabled = disabledArray;
		this.preload();
		this.setHovers();
	}
  jsMenu_img.prototype.setIndex = function(myIndex) {
	  // ** user called ***
    this.selectedIndex = myIndex;
		this.setHovers();
	}
  jsMenu_img.prototype.setDisabled = function(disabledArray) {
	  // ** user called ***
		// aDisabled = array(index_of_disabledBtn0,index_of_disabledBtn1,...)
		// disables rollover effects and replaces image with _d image
		this.btnDisabled = disabledArray;
		this.setHovers();
	}
	jsMenu_img.prototype.preload = function() {
    var i=0,j=0;
  	if (document.images) {
   	  for(i=0;i<this.btnArray.length;i++) {
        this.ldImg[i] = new Array();
				var imgTypes = Array('n','r','s','d'); // array defining possible image types
  	    for (j=0;j<imgTypes.length;j++) {
      		key = imgTypes[j];
					if (this.btnArray[i][key]) {
  					this.ldImg[i][key] = new Image;
        		this.ldImg[i][key].src = this.btnArray[i][key]; //ldImg[index][state]
					}
	    	}
  	  }
    }
  }
	jsMenu_img.prototype.setState_r = function(btnIndex) {
	  if (this.btnArray[btnIndex]) { // check to see if btnIndex is within range
		  myImg = document.images[this.btnArray[btnIndex]['id']];
  		myImg.src = myImg.img_r;
		}  
	}
	jsMenu_img.prototype.reset = function() {
    this.setHovers();
	}
  jsMenu_img.prototype.setHovers = function() {
	  var i=0,j=0;
		var btnIsDisabled = false;
		for (i=0;i<this.btnArray.length;i++) {
		  myImg = document.images[this.btnArray[i]['id']];
		  if (myImg) {
			  myImg.btnIndex = i;
				myImg.pointer = this;
        myImg.img_n = this.btnArray[i]['n'];
        myImg.img_r = this.btnArray[i]['r'];
        myImg.img_s = this.btnArray[i]['s'];
        if (this.btnArray[i]['d']) myImg.img_d = this.btnArray[i]['d'];

        btnIsDisabled = false;				
				for (j=0;j<this.btnDisabled.length;j++) {
				  if (i==this.btnDisabled[j]) btnIsDisabled=true;
				}

				if (btnIsDisabled==false) {
		  	  // btn active, set event handlers etc.
  				if (this.selectedIndex!=i) {
  					if (this.syncActive) { // also fire the syncObject.syncMouseOver
  						myImg.onmouseover = function() { this.src = this.img_r; this.pointer.syncObject.syncMouseOver(this.btnIndex); }
    	    		myImg.onmouseout = function() { this.src = this.img_n; this.pointer.syncObject.syncMouseOut(this.btnIndex); }
    				} else { // leave out the extra's
							myImg.onmouseover = function() { this.src = this.img_r; }
    	    		myImg.onmouseout = function() { this.src = this.img_n; }
            }
		    		myImg.src = myImg.img_n // set to normal image
  	      } else {
  	  	  	if (this.rollOverSelectedItems==true) {
      	  		if (this.syncActive) { // also fire the syncObject.syncMouseOver
						  	myImg.onmouseover = function() { this.src = this.img_r; this.pointer.syncObject.syncMouseOver(this.btnIndex);	}
      	  	  	myImg.onmouseout = function() { this.src = this.img_s; this.pointer.syncObject.syncMouseOut(this.btnIndex); }
							} else {
						  	myImg.onmouseover = function() { this.src = this.img_r;	}
      	  	  	myImg.onmouseout = function() { this.src = this.img_s; }
							}
		  	  	} else {
      	  		myImg.onmouseover = function() { 	}
      	  		myImg.onmouseout = function() {  }
		  	  	}
		  	  	myImg.src = myImg.img_s // set to selected image
		  	  }
					// reset onclick/onmousedown/className to 'reactivate' btn after being disabled
					myImg.className = '';
					myImg.onclick = function() {  }
					myImg.onmousedown = function() {  }
				} else {
				  // btn disabled, no event handlers
  	  		myImg.onmouseover = function() { 	}
   	  		myImg.onmouseout = function() {  }
	  	  	myImg.onclick = function() { return false; }
					myImg.onmousedown = function() { return false; }
					myImg.className = 'btnDisabled';
	  	  	myImg.src = myImg.img_d // set to disabled image
        }
			} // if(myImg)
		} // btnArray loop
	} //prototype
}

function jsMenu_css() {
  this.selectedIndex = -1;
	this.rollOverSelectedItems = false;

  this.syncActive = false; // synchronise with other rollovers	
	this.syncObject = ''; // instance of jsMenu_sync object
  this.btnArray = new Array();
  this.btnDisabled = new Array();
	
  jsMenu_css.prototype.init = function(passedArray) {
	  // ** user called ***
	  // passedArray =  array(btnId)
	  this.btnArray = passedArray;
		this.setHovers();
	}
  jsMenu_css.prototype.setIndex = function(myIndex) {
	  // ** user called ***
    this.selectedIndex = myIndex;
		this.setHovers();
	}
  jsMenu_css.prototype.setDisabled = function(disabledArray) {
	  // ** user called ***
		// aDisabled = array(index_of_disabledBtn0,index_of_disabledBtn1,...)
		// disables rollover effects and sets class to 'dd'
		this.btnDisabled = disabledArray;
		this.setHovers();
	}
	jsMenu_css.prototype.setState_r = function(btnIndex) {
  	myBtn = document.getElementById(this.btnArray[btnIndex]);
    this.stripClasses(myBtn);
    myBtn.className += ' rr';	
	}
  jsMenu_css.prototype.reset = function() {
	  this.setHovers();
	}
  jsMenu_css.prototype.stripClasses = function(node) {
    // to be called by object.pointer.stripClasses(this)
    // strips all _n, _r, _s, _d classes from object.className
    node.className = node.className.replace(' nn','');
    node.className = node.className.replace(' rr','');
    node.className = node.className.replace(' ss','');
    node.className = node.className.replace(' dd','');
	}
  jsMenu_css.prototype.setHovers = function() {
	  var i=0,j=0;
		var btnIsDisabled = false;
		for (i=0;i<this.btnArray.length;i++) {
		  myBtn = document.getElementById(this.btnArray[i]);
		  if (myBtn) {
			  myBtn.btnIndex = i;
				myBtn.pointer = this;

        btnIsDisabled = false;		
				for (j=0;j<this.btnDisabled.length;j++) {
				  if (i==this.btnDisabled[j]) btnIsDisabled=true;
				}
				if (btnIsDisabled==false) {
		  	  // btn active, set event handlers etc.
    			if (this.selectedIndex!=i) {
				    if (this.syncActive) { // also fire the syncObject.syncMouseOver
        			myBtn.onmouseover = function() { this.pointer.stripClasses(this);this.className += ' rr';this.pointer.syncObject.syncMouseOver(this.btnIndex); }
      			  myBtn.onmouseout = function() { this.pointer.stripClasses(this);this.className += ' nn';this.pointer.syncObject.syncMouseOut(this.btnIndex); }
    				} else { // leave out the extra's
        			myBtn.onmouseover = function() { this.pointer.stripClasses(this);this.className += ' rr'; }
      			  myBtn.onmouseout = function() { this.pointer.stripClasses(this);this.className += ' nn'; }
    				}
            this.stripClasses(myBtn);
    				myBtn.className += ' nn' // set to normal button
      	  } else {
      			if (this.rollOverSelectedItems==true) {
      				if (this.syncActive) { // also fire the syncObject.syncMouseOver
        			  myBtn.onmouseover = function() { this.pointer.stripClasses(this);this.className += ' rr'; this.pointer.syncObject.syncMouseOver(this.btnIndex);}
        		  	myBtn.onmouseout = function() { this.pointer.stripClasses(this);this.className += ' ss'; this.pointer.syncObject.syncMouseOut(this.btnIndex); }
		          } else {
    					  myBtn.onmouseover = function() { this.pointer.stripClasses(this);this.className = ' rr'; }
        		  	myBtn.onmouseout = function() { this.pointer.stripClasses(this);this.className = ' ss'; }
    		      }
    				} else {
        			myBtn.onmouseover = function() { 	}
        			myBtn.onmouseout = function() {  }
    				}
            this.stripClasses(myBtn);
    				myBtn.className += ' ss' // set to selected btn
    			}
        } else {
				  // btn disabled, no event handlers
  	  		myBtn.onmouseover = function() { 	}
   	  		myBtn.onmouseout = function() {  }
	  	  	myBtn.onclick = function() { return false; }
					myBtn.onmousedown = function() { return false; }
          this.stripClasses(myBtn);
					myBtn.className += ' dd';
        }
			} // if(myBtn)
		} // btnArray loop
	} //prototype
}

function jsMenu_sync() {
	// 04sep30 - tb
	
	//   if syncActive is true on a jsMenu_img or _css object the sync() function of this object
	//   instance is called. synchronises rollovers for different button sets...
	// basic usage:
	//   syncMouseOver is triggered and it calls the setState_r method on all objects in this.syncObjects
	//   a hover on element n fires the setState(n) on all objects.
	// advanced usage:
	//   feed with syncArray and set this.useSyncArray to true. Now the syncArray can be used to control
	//   the behaviour: for example, hovering 1 element in buttonSet 0 can highlight multiple buttons in buttonSet 1.
	
	// configuration:
	//   1. create instant of jsMenu_sync()
	//   2. create instances of jsMenu_img or jsMenu_css and point to the jsMenu_sync object by:
	//      * setting .syncActive to true if the object should highlight other buttonSets
	//      * point .syncObject to the jsMenu_sync instance
	//   3. supply the jsMenu_sync instance with the array syncObjects containing the objects created at step 2.
	
	// TODO: check the syncActive on the buttonSet objects
	
	this.useSyncArray = false; // if set to true, syncArray has to be set. It can be used to highlight multiple elements of the same button_set. 
  this.syncArray = new Array();
	this.syncObjects = new Array(); // set after menuobjects are made and feed with object instances

	jsMenu_sync.prototype.init = function(aSyncArray) {
	  if (aSyncArray) this.syncArray = aSyncArray;
	}
	jsMenu_sync.prototype.syncSelected = function(passedIndex) {
	  if (this.syncObjects.length<=0) return; // indien nog geen array ingesteld...
		for (i=0;i<this.syncObjects.length;i++) {
      myObj = this.syncObjects[i];
			myObj.setIndex(passedIndex);
		}
	}
	jsMenu_sync.prototype.syncMouseOver = function(passedIndex) {
	  if (this.syncObjects.length<=0) return; // indien nog geen array ingesteld...
		for (i=0;i<this.syncObjects.length;i++) {
      myObj = this.syncObjects[i];
			if (this.useSyncArray) {
			  myItem = this.syncArray[i][passedIndex];
				if ((typeof myItem)=='number') { // number in array
				  myObj.setState_r(myItem);
				} else { // array with more than 1 item that should be highlighted 
				  for (j=0;j<myItem.length;j++) {
					  myObj.setState_r(myItem[j]);
					}
				}
			} else {
  			myObj.setState_r(passedIndex);
			}
		}
	}
	jsMenu_sync.prototype.syncMouseOut = function(passedIndex) {
	  if (this.syncObjects.length<=0) return; // indien nog geen array ingesteld...
		for (i=0;i<this.syncObjects.length;i++) {
      myObj = this.syncObjects[i];
			myObj.reset();
		}
	}
}