/**********************************************************************/
/** Navigations-Handling auf Startseite                              **/
/**                                                                  **/
/** @package        HTWG Konstanz                                    **/
/** @subpackage     Typo3 Frontend Templates                         **/
/** @author         Thomas Prangenberg, ONM <tpb@onm.de>             **/
/** @since          Pre-Release ( 03.2009 )                          **/
/**                                                                  **/
/**********************************************************************/

Event.observe( window, 'load', function() {
    new start_submenu('header');
});

var start_submenu = Class.create({
	
   /**
	* Konstruktor
	*/
   initialize: function(ID_OF_PARENT)
   {
       this.parent = $(ID_OF_PARENT);
       this.setTransparency(10);
	   this.setFocusListener();
       this.setEvents();
       this.focused = new Element("div");
   },
   
   
   /**
	* Setzt eine leichte Transparenz auf die Navigationselemente
	*/
   setTransparency: function(percent)
   {
       var opacity = (100 - percent) * 0.01;
       var UL = this.parent.getElementsByTagName('ul');
       for (var x = 0; x < UL.length; x++) {
           Effect.Fade(UL[x], { from: 1, to: opacity, duration: 0.5 })
       }
   }, 
   
   
   /**
	* Setzt auf alle Link Elemente
	*/
   setFocusListener: function()
   {
	   var ATags = this.parent.getElementsByTagName('a');
	   for (var x = 0; x < ATags.length; x++) {
		    ATags[x].hasFocus = false;
	   		Event.observe(ATags[x], 'focus', function() {
				this.hasFocus = true
			});
			Event.observe(ATags[x], 'blur', function() {
				this.hasFocus = false
			});
			
	   }
   },
   
   
   /**
	* Event-Handler auf Links setzen, eigentliche Verweise aus Links entfernen
	*/
   setEvents: function()
   {
       var spans = this.parent.getElementsByClassName('choose');

       for (key in spans) {
           if (spans[key].className == 'choose') {
			    spans[key].firstChild.href = 'javascript: void(0)';
		   		Event.observe( spans[key].firstChild, 'focus', this.show.bind(this, spans[key]) );  		
				Event.observe( spans[key].firstChild, 'blur', this.hide.bind(this, spans[key]) );
				var ul = spans[key].next(0);
				var sublevel_links = ul.getElementsByTagName('a');
				for ( var x = 0; x < sublevel_links.length; x++ ) {
					Event.observe( sublevel_links[x], 'blur', this.hide.bind(this, spans[key]) );
				}
				
				//Fix fuer Safari (Click wird zu Focus)
                Event.observe(spans[key].firstChild, 'click', this.focusLink.bindAsEventListener(this));
		   }
       }
	   
   },
   
   
   /**
	* Layer einblenden
	*/
   show: function(element)
   {
	   var elementToBeShown = element.parentNode.getElementsByTagName('ul');
	   elementToBeShown = elementToBeShown[0];
	   
	   this.position(elementToBeShown);

	   //elementToBeShown[0].hide();		   
	   elementToBeShown.appear({ duration: 0.4 });
	   
	   if(this.focused.identify() != element.identify()) {
            this.focused = element;
        }
   },
   
   
   focusLink: function(e)
   {
       var el = e.element();
        if(el.identify){
            if(this.focused.identify() != el.identify()) {
                e.element().focus();
            }
        }
   },
   
   
   /**
	* Layer ausblenden
	*/
   hide: function(element)
   {
	   var elementToBeShown = element.parentNode.getElementsByTagName('ul');
	   elementToBeShown = elementToBeShown[0];
	   
	   var home = this;
	   
	   window.setTimeout( function() {
		   if (!home.focusOn(elementToBeShown)) {
				//elementToBeShown[0].show();
				elementToBeShown.fade({ duration: 0.4 });
		   } 
   		}, 100 );
   },
   
   
   /**
	* Layer relativ zum Elter-Element positionieren.
	* Wenn Liste laenger wird, als Platz nach unten ist, wird das Layer nach oben verschoben
	*/
   position: function(element)
   {
		//Position (von oben) des eingeblendeten Elements
		position_nav = Element.positionedOffset(element.parentNode.parentNode.parentNode); 
		position = Element.positionedOffset(element.parentNode);
		position = position.top + position_nav.top;
		//Hoehe des Elements
		height = element.getHeight();
		//Maximale Hoehe des Elements bis verschoben wird
		maximumHeight = this.parent.offsetHeight - position -1;
		
		if ( height > maximumHeight ) {
			element.style.top = ((height - maximumHeight) *-1 ) + "px";
		} 
   },
   
   
   /**
    * Prueft, ob auf dem aktuellen Element oder einem Kindelement der Fokus liegt
	*/
	focusOn: function(element)
	{
		if (element.hasFocus) {
			return true;
		}
		
		var ATags = element.getElementsByTagName('a');
		for (var x = 0; x < ATags.length; x++) {
			if (ATags[x].hasFocus) {
				return true;
			}
		}

		return false;
	}
     
});