// Braincrusher JavaScript Document

/* 
 * 
 *  Copyright © 2007 by CUBICOM - ALEXANDRE ZGLAV. 
 *  All rights reserved.  All duplication, diffusion, 
 *  publication or modification is forbidden withour 
 *  prior written consent of CUBICOM - ALEXANDRE ZGLAV. 
 * 
 *  For more information send an email to : info@cubicom.ch
 *
 *  Copyright © 2007 by CUBICOM - ALEXANDRE ZGLAV . 
 *  Tous droits réservés. Toute reproduction, diffusion,    
 *  publication ou modification est interdite sans l’autorisation 
 *  écrite préalable de CUBICOM - ALEXANDRE ZGLAV.  
 *  
 *  Pour plus d'informations envoyer un email à: info@cubicom.ch
 *
*/


// ******************************************************************* //
// ****************************           **************************** //
// *********************     CUBICOM PROTOMENU    ******************** //
// ****************                                    *************** //
// ****************  CUBICOM DROPDOWN NAVIGATION MENU  *************** //
// ****************                                    *************** //
// ****************************  v 0.5  ****************************** //
// ******************************************************************* //


/*  


	CUBICOM PROTOMENU is a simple, unobstrusive, dropdown menu navigation 
	system based on the prototype ( http://www.prototypejs.org/ ) and 
	scriptaculous ( http://script.aculo.us/ ) javascript libraries. The 
	document you are viewing contains all the scripting for the menu to work 
	properly and should not be edited directly.
	The configuration and declaration of the menu occurs in the menudef.js file.  
	An example and some documentation are available in this file.
 
 
 
*/







// ************** MENU CLASS DEFINITION START ************ //

/*
*
* Menu is the base class for dynamic menu creation, 
* it contains all the 1st level menu items : MenuTitles 
* It is also mainly used to turn the menu off : get it 
* back to its original state when a mouseout event occurs
*
*/

/* ------------- Arguments -------------
*
* containerId : the id of the DOM element that will contain the actual completed menu
*
* menuTitles : an array containing the MenuTitle objects of the menu.
*
*/ 

function Menu(containerId, menuTitles){
	
	this.body = $(containerId);
	this.menuTitles = menuTitles;
	
	var activeTitleId = "";
	var html;	
	
	this.timeouts = [];
	
	this.initialize();
}
	

Menu.prototype={
	
	
	/* ******************************** INITIALIZE ******************************** */
		initialize:function(){
			
		    this.html = "<div id='mainTitles'>";			
				if (this.menuTitles.length > 0){
					//alert(this.menuTitles.length);
					for(var i = 0; i < this.menuTitles.length; i++){
						this.html += this.menuTitles[i].html;			
					}		
				}	
			this.html += "</div><!-- mainTitles -->";
				
			// add the html to the DOM 
			this.body.innerHTML=this.html;

			//initialize menutitles
			for(var i = 0; i < this.menuTitles.length; i++){
				this.menuTitles[i].initialize(this);
			}
			
			// mouseout observer for the menu
			Event.observe(			  
				this.body,
				"mouseout",
				this.mouseoutHandler.bindAsEventListener(this)
			); 
			
			// mouseover observer for the menu
			Event.observe(			  
				this.body,
				"mouseover",
				this.mouseoverHandler.bindAsEventListener(this)
			); 
		},//inititalize
		
		
	/* ******************************** MOUSEOUTHANDLER ******************************** */		
		mouseoutHandler:function(event){
			e = event;
			var relTarg = e.relatedTarget || e.toElement;	
			if(relTarg!=null){
				if(!(relTarg == this.body || $(relTarg).descendantOf(this.body))){
					var thisObj = this;
					var timeoutFunc = function () { thisObj.desactivateTitles() };
					this.timeouts[this.timeouts.length] = setTimeout(timeoutFunc, 1000);
				}
			}		
		},	//mouseouthandler


	/* ******************************** MOUSEOVERHANDLER ******************************** */		
		mouseoverHandler:function(event){
			var target=$(Event.element(event));
			for (var i =0; i < this.timeouts.length; i++){
				clearTimeout(this.timeouts[i]);		
			}
		}, //mouseoverhandler
		
		
		
	/* ******************************** SETACTIVETITLE ******************************** */	
	//function used to set the active title for the entire menu widget
		setActiveTitle:function(itemId){
			for(var i = 0; i < this.menuTitles.length; i++){
				if( itemId == this.menuTitles[i].divId || $(itemId).descendantOf(this.menuTitles[i].body) ){
					this.activeTitleId = this.menuTitles[i].divId;
				}
			}
		}, //setActiveTitle
		
	/* ******************************** DESACTIVATETITLE ******************************** */
		desactivateTitles:function(){
			for(var i = 0; i < this.menuTitles.length; i++){
				if(this.menuTitles[i].active){
					this.menuTitles[i].desactivate();
					this.activeTitleId = null;
				}
			}
		}
		
}//prototype
		

// ************** MENU CLASS DEFINITION END ************ //








// ************** MENUTITLE CLASS DEFINITION START ************ //

/*
*
* MenuTitle is the class used to define new first level
* menu items. It is used to build the html for each Title
* and to listen to mouseover and mouseout events. 
*
*/

/* ------------- Arguments -------------
*
* divId : the id of the DOM element that will contain the actual menu item
*
* mode : a string representing the mode to use for this MenuTitle :
*		 two values are possible : 'image' or 'text'.
*		 
* content : if mode is set to image, it will contain the URI of the 
*			image to display for this title, if the mode is set to text 
*			it should contain the text to display for this menutitle
*
* contentOvr : same as content but for the over state (set to null) if no change.
*
* url : on optional string representing the url the title should point to
*
* subMenu : the optional SubMenu object for this MenuTitle;
*
*/ 


function MenuTitle(divId, mode, content, contentOvr, url, subMenu){
	
	this.divId = divId;
	this.mode = mode;
	this.content = content;
	this.contentOvr = contentOvr;
	this.url = url;
	this.subMenu = subMenu;
	
	var active = false; 
	var menu;
	var html = "";
	
	this.build(); 
}


MenuTitle.prototype={
	

	/* ******************************** BUILD ***************************************** */
	
	build:function(){
		//create the HTML
		this.html = "<div id='" + this.divId + "'>";
			
			if(this.mode == "image"){
				this.html += "<img src='"+this.content+"' id='"+this.divId+"Img'/>";
			}else if (this.mode == "text"){
				//TODO Wrap the text in a span or whatever so that it has an ID
				this.html +="<span id='"+this.divId+"Span'>"+ this.content+"</span>";
			}
			//check if it has a children SubMenu
			if(this.subMenu != null ){
				//wrap the sub menu into a relatively positionned div to control positionning
				this.html += "<div style='position:relative; z-index:21;'>";
					this.html += "<div>";
						//insert the subMenu's HTML 
						this.html += this.subMenu.html;
					this.html +="</div>";
				this.html += "</div>";
			}
		this.html += "</div>";	
	},//build
		
	
	/* ******************************** INITIALIZE ***************************************** */
		
	initialize:function(menu){
		
		//Circular reference : tell this menutitle who is the parent menu
		this.menu = menu;
		//get a grip on the html element that has been created
		this.body = $(this.divId);
		if(this.subMenu != null ){
			//initialize the subMenu
			this.subMenu.initialize();
		}
		
		// observe mouseover events
		Event.observe(		  
     		this.body,
    		"mouseover",
			this.mouseoverHandler.bindAsEventListener(this)
    	); 
		
		// observe mouseover events
		Event.observe(		  
     		this.body,
    		"click",
			this.mouseclickHandler.bindAsEventListener(this)
    	); 
	},//initialize
	
	
	/* ******************************** MOUSEOVER ***************************************** */		

	mouseoverHandler:function(event){
		
		var target=$(Event.element(event));
		if(! this.isTitleActive(target)){
			//this.body.style.cursor = "pointer";
			
			try{
 				this.body.style.cursor = "pointer";
			}
			catch(eOldIEVersion){
  				this.body.style.cursor = "hand"; 
			}
			
			this.menu.desactivateTitles();
			this.menu.setActiveTitle(target.id);
			this.activate();
			//$("check").innerHTML = this.menu.activeTitleId;
		}
		
	},//mouseover
	
	mouseclickHandler:function(event){
	
		var target=$(Event.element(event));
		//var target=$(Event.element(event));
		if(this.url!=null){
			if (target == this.body || target == this.body.firstChild){
				window.location = this.url;
			}
		}
	},
							   
		
	
	/* ******************************** IS TITLEACTIVE ***************************************** */	
	//function used to see if the argument is already the active title or one of its children
	isTitleActive:function(target){
		if(target.id == this.menu.activeTitleId || target.descendantOf(this.menu.activeTitleId)){
			return true;
		}else{
			return false
		}	
	},//isTitleActive
	
	/* ******************************** ACTIVATE ***************************************** */	
	//used to activate a MenuTitle
	activate:function(){
		if(this.contentOvr != null){
			if(this.mode == "image"){
				this.body.firstChild.src = this.contentOvr;
			}else if (this.mode == "text"){
				this.body.innerHTML += this.contentOvr;
			}	
		}	
		
		if (this.subMenu!=null){
			this.subMenu.slideDown();
		}	
		
		this.active = true;
	},//activate


	/* ******************************** DESACTIVATE ***************************************** */	
	//used to desactivate a MenuTitle
	desactivate:function(){
		
		if(this.contentOvr != null){
			if(this.mode == "image"){
				this.body.firstChild.src = this.content;
			}else if (this.mode == "text"){
				this.body.innerHTML += this.content;
			}	
		}
		
		if (this.subMenu!=null){
			this.subMenu.slideUp();
		}	
		
		this.active = false;
	}//desactivate
}


// ************** MENUTITLE CLASS DEFINITION END ************ //











// ************** SUBMENU CLASS DEFINITION START ************ //

/*
*
* SubMenu is the class used to define second level items that 
* come directly under TitleMenu, but also the subMenu items that can come under 
* some MenuItem objects.
*
*/

/* ------------- Arguments -------------
*
* divId : the identifier of the div element that will contain the subMenu
*
* menuItems : an array containing all MenuItems to display directly in this subMenu
*/


function SubMenu(divId, menuItems){

	this.divId = divId;
	this.menuItems = menuItems;
	var html = "";
	
	this.build();
}


SubMenu.prototype={

	/* ******************************** BUILD ***************************************** */
	build:function(){
		this.html = "<div id='" + this.divId + "' style='display:none; z-index:10;'>";
			this.html += "<div>";
				if(this.menuItems != null ){
					
					for(var i=0; i < this.menuItems.length; i++ ){
						this.html += this.menuItems[i].html;
					}									
				}
			this.html += "</div>";	
		this.html += "</div>";						
	},//initialize
	
	/* ******************************** INITIALIZE ***************************************** */
	initialize:function(){
		this.body = $(this.divId);
		
		//initialize menutitles
		if(this.menuItems != null ){
			for(var i = 0; i < this.menuItems.length; i++){
				this.menuItems[i].initialize();
			}
		}
			
	},
	
	/* ******************************** SLIDEDOWN ***************************************** */
	slideDown:function() {
		if(!(Element.visible(this.body))){
			new Effect.toggle(this.body, 'blind',{duration:.3, queue: {position:'end', scope: 'menuscope'+this.divId}});
		}//
	},
	
	/* ******************************** SLIDEUP ***************************************** */
	slideUp:function() {
		if(Element.visible(this.body)){
			new Effect.toggle(this.body, 'blind',{duration:.1, queue: {position:'end', scope: 'menuscope'+this.divId}});
		}
	}

}//SubMenu Class














// ************** MENUITEM CLASS DEFINITION START ************ //

/*
*
* The MenuItem class holds the actual menu elements and an optional 
* SubMenu that will deploy onmousover
*
*/

/* ------------- Arguments -------------
*
* divId : the identifier of the div element that will contain the MenuItem
*
* content : the actual text for this link
* 
* url : the url to point to when the menu item is clicked
*
* subMenu : an optional SubMenu object
*
* cssclass : an optional css class (or multiple classes) that you want
		  to apply to this menuItem
*/


function MenuItem(divId, content, url, subMenu, cssClass, cssClassHover){
	
	this.divId = divId;
	this.content = content;	
	this.url = url;
	this.subMenu = subMenu;
	this.cssClass= cssClass;
	this.cssClassHover = cssClassHover;

	var html = "";
	
	this.build();
}


MenuItem.prototype={
	
	build:function(){
		//create the HTML for the menuItems
		this.html = "<div id='" + this.divId + "'";
		//alert(this.class);
		if(this.cssClass != null){
			this.html += "class='"+this.cssClass+"'";	
		}
		
		this.html += " >";
			this.html += this.content;	
		this.html += "</div>";						
	},//build
	
	
	initialize:function(){
		this.body = $(this.divId);
		
		
		// click observer for the menuItem
		Event.observe(			  
			this.body,
			"mouseover",
			this.mouseoverHandler.bindAsEventListener(this)
		); 	
		
		// mouseout observer for the menuItem
		Event.observe(			  
			this.body,
			"mouseout",
			this.mouseoutHandler.bindAsEventListener(this)
		); 	


		
		// click observer for the menuItem
		Event.observe(			  
			this.body,
			"click",
			this.mouseclickHandler.bindAsEventListener(this)
		); 	

	},//ntialize
	
	
	
		
	mouseclickHandler:function(){
		window.location = this.url;
	},
	
	
	mouseoutHandler:function(){
	
		//this.body.style.cursor = "pointer";
		
			try{
 				this.body.style.cursor = "pointer";
			}
			catch(eOldIEVersion){
  				this.body.style.cursor = "hand"; 
			}
			
		
		if (this.cssClassHover != null){
			
			this.body.className = this.cssClass;
		}
	},
	
	mouseoverHandler:function(){
	
		//this.body.style.cursor = "pointer";
		
		try{
 				this.body.style.cursor = "pointer";
			}
			catch(eOldIEVersion){
  				this.body.style.cursor = "hand"; 
			}
			
		
		if (this.cssClassHover != null){
			
			this.body.className = this.cssClassHover;
		}
	}
	
}