// 2009/07/29 Comwrap Ltd. - Steffen Kroggel
// Vers. 1.000

var chairos_hover_effect = {
    
    duration_effect : 500,
    duration_reaction_timeout : 400,
    no_effect : 0,
    
    opacity_start : 0,
    opacity_end : 0.5,
    
    overlay_id : 'chairos_overlay',
    
    data :    new Object (), 
    effect : new Fx.Morph( 'chairos_overlay', {duration: 500, transition: Fx.Transitions.linear}),
    
	effect_timeout_object : new Array (),
   
    //==================================

    opacity : function (from, to) {
    	
    	// Laufenden Effekt stoppen
    	this.effect.cancel();
    	this.effect = new Fx.Morph( 'chairos_overlay', {duration: 500, transition: Fx.Transitions.linear});
    	
		if (from != to) {
			this.effect.start({
				 'opacity': [from, to]
			});
		}
            
    },

    //==================================
	// Blendet den Overlayer ein
    display_overlay : function (){
    
    	 
         if (document.getElementById(this.overlay_id)) {

			 // Timeout löschen !
			 for (var i = 0; i < this.effect_timeout_object.length; i++) {
			 	window.clearTimeout(this.effect_timeout_object[i]);         
			 }
			 
			 
			 if (this.no_effect != 1) {
				 this.opacity(this.opacity_start, this.opacity_end); 
			 }
         }
            
    },
    
    //==================================
	// Blendet den Overlayer aus
    hide_overlay : function (){

         if (document.getElementById(this.overlay_id)) {
         	
         	// Leichte Reaktionsverzögerung gegen Disko-Effekt
    		this.effect_timeout_object.push (window.setTimeout("chairos_hover_effect.opacity(chairos_hover_effect.opacity_end, chairos_hover_effect.opacity_start); ", this.duration_reaction_timeout));
         	this.effect_timeout_object.push (window.setTimeout("chairos_hover_effect.no_effect = 0; ", this.duration_reaction_timeout));
         	this.no_effect = 1;

         }
            
    },    
    

    //==================================

    init : function (ids) {
    
    	this.data = ids;
        
		try {
			$(this.overlay_id).setStyles ({
				'height': document.body.offsetHeight+ 'px',
				'width' : document.body.offsetWidth + 'px'
			});		
		} catch (e) {
			$(this.overlay_id).setStyles ({
				'height': '100%'
			});		
		}
		
        
        // Alle Ids durchnudeln und Events übergeben
        for (var i= 0; i < this.data.length; i++) {
        
        	var target = this.data[i];
  			// Infoboxen unten mit Mouseover
			if (($(this.data[i]+'_column_touch') != null) &&
				($(this.data[i]+'_column_content') != null) &&
				($(this.data[i]) != null)) {	

				//===========================================
				// Boxen unten einblenden
            	$(this.data[i]+'_column_touch').addEvent('mouseenter', function(event, target) {
            	
                    $(this.data[target]+'_column_content').setStyles({			   
                        zIndex: '3000'				   
                  	}); 
                
                	// Hauptmenü aufklappen
                	document.getElementById(this.data[target]).className += ' current';
                	
                   this.display_overlay();
				   return false;
				   //===
               
           		}.bindWithEvent(this, i));  
           		
           		//===========================================
				// Boxen unten ausblenden
            	$(this.data[i]+'_column_content').addEvent('mouseleave', function(event, target) {
            	
                    $(this.data[target]+'_column_content').setStyles({			   
                        zIndex: '1'				   
                  	}); 
                  	
                  	// Hauptmenü wieder zuklappen
					document.getElementById(this.data[target]).className = document.getElementById(this.data[target]).className.replace(/[ ]?current/g, '');
                
                   this.hide_overlay();
				   return false;
				   //===
               
           		}.bindWithEvent(this, i));             		
           	
           	
           		//===========================================
           		// Jetzt noch die Menüpunkte mit den Boxen unten verknüpfen
           		// onEnter
				$(this.data[i]).addEvent('mouseenter', function(event, target) {
				   if($(this.data[target]+'_column_content')){	
						$(this.data[target]+'_column_content').setStyles({			   
							zIndex: '3000'				   
						}); 
						
				   };    
				   
                   this.display_overlay();
				   return false;
				   //===				   
							
				}.bindWithEvent(this, i));   
				
           		//===========================================
           		// Jetzt noch die Menüpunkte mit den Boxen unten verknüpfen
           		// onEnter
				$(this.data[i]).addEvent('mouseleave', function(event, target) {
				   if($(this.data[target]+'_column_content')){	
						$(this.data[target]+'_column_content').setStyles({			   
							zIndex: '1'				   
						}); 
						
				   };     
				   
                   this.hide_overlay();
				   return false;
				   //===				   
							
				}.bindWithEvent(this, i));   
				
	
				
			}
        }
        
		

		//===========================================
		// Jetzt noch das Hauptmenü entsprechend verknüpfen
		// Und Effekte verpassen
		// on Enter
		$('mainmenu').addEvent('mouseenter', function (){
			   
			  this.display_overlay();	
			  return false;
			  //===
			  
		}.bindWithEvent(this)); 

		//===========================================
		// on Leave
		$('mainmenu').addEvent('mouseleave', function (){
			
			this.hide_overlay();   
			return false;
			//===        
			
		}.bindWithEvent(this));	        
		
		
		//===========================================
		// Wird das Fenster verlasssen --> zurücksetzen
		document.addEvent('mouseleave', function () {
		  
			// Alle Ids durchnudeln und wieder alle z-Index zurücksetzen
			for (var i= 0; i < this.data.length; i++) {
				
				if($(this.data[i]+'_column_content')){	
					$(this.data[i]+'_column_content').setStyles({			   
						zIndex: '1'				   
					}); 
				};     
					   
		    }
			 
			 // Timeouts löschen !
			 for (var i = 0; i < this.effect_timeout_object.length; i++) {
			 	window.clearTimeout(this.effect_timeout_object[i]);         
			 }	

			this.no_effect = 0;
			
			return false;
			//===
		  
		}.bind(this)); 
            		
    }
}

// Initialisierung der Menuhover
window.addEvent('domready', function() {
	chairos_hover_effect.init (['mainmenu_1','mainmenu_2','mainmenu_3', 'mainmenu_4']);
});