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

Event.observe( window, 'load', function() {
    var db = new dashboard('topnav');
});


var dashboard = Class.create({
	
   /**
	* Konstruktor
	*/
   initialize: function(ID_OF_LIST)
   {
       this.nav = $(ID_OF_LIST);
       this.getClient();
       this.overlay = false;
       this.createOverlay();
       this.setFocusListener();
       this.create();
       this.focused = new Element("div");
   }, 
   
   /**
    * Browserpruefung
    * einige Features im IE6 deaktivieren
    */
   getClient: function()
   {
		this.client = "default";
		if (navigator.appName == "Microsoft Internet Explorer") {
		    this.client = "IE6";
		    if (navigator.appVersion.indexOf('MSIE 7') != -1) {
		      this.client = "IE7";
		    }
        }
   },
   
   /**
    * set Eventlistener
    */
   create: function() 
   {
       var LI = this.nav.getElementsByTagName('li');
       for (var x = 0; x < LI.length; x++) {          
            this.setSubNav(LI[x]);
       }
   },
   
   /**
    * Pruefen, ob aktuelles Element einen Unterpunkt hat
    */
   getSub: function(element)
   {
       var subnav = element.getElementsByTagName('ul');
       
       for ( var x = 0; x < subnav.length; x++ ) {
           return subnav[x];
       }
       return false;
   },
   
   /**
    * Untermenue fuer einen Listeneintrag erstellen
    */
   setSubNav: function(parent)
   {
       var subnav = this.getSub(parent);
       if (subnav) {
           Element.hide(subnav);
           parent.className = 'dashboard_level1' + ' ' + parent.className;
           parent.firstChild.className = 'arrowdown';
           
           Event.observe(parent.firstChild, 'focus', this.show.bind(this, subnav, parent.firstChild, parent.firstChild.href));
           Event.observe(parent.firstChild, 'blur', this.hide.bind(this, subnav, parent.firstChild));
           
           //Fix fuer Safari (Click wird zu Focus)
           Event.observe(parent.firstChild, 'click', this.focusLink.bindAsEventListener(this));
           
           /* 
           Event.observe(parent, 'mouseover', this.show.bind(this, subnav));
           Event.observe(parent, 'mouseout', this.hide.bind(this, subnav)); 
           */
           
           parent.firstChild.href = 'javascript: void(0)';
           
		   var sublevel_links = subnav.getElementsByTagName('a');
		   for ( var x = 0; x < sublevel_links.length; x++ ) {
				Event.observe( sublevel_links[x], 'blur', this.hide.bind(this, subnav) );
		   }
           var all = this.nav.getElementsByTagName('a');
		   for ( var x = 0; x < all.length; x++ ) {
				Event.observe( all[x], 'blur', this.lighten.bind(this) );
		   }
       } 
   },
   
   /**
	* Element einblenden
	*/
   show: function(element, link, href)
   {
       window.setTimeout( function() {
           link.href = href;
       }, 400 );
       element.appear({ duration: 0.3 });
       /* this.darken(); */ /* kmauz 2011 10 11 */
       
       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();
            }
        }
   },
   
   /**
	* Element ausblenden
	*
	* kleine Verzoegerung, da der Aufruf bei Blur erfolgt 
	* und ansonsten der neue Focus noch nicht gesetzt ist
	*/   
   hide: function(element, link)
   {
       link.href = 'javascript: void(0)';
       var dash = this;
       window.setTimeout( function() {
		   if (!dash.focusOn(element)) {
				element.fade({ duration: 0.3 });
		   } 
   		}, 100 );
   },
   
   /**
	* Hintergrund-Overlay Ebene erzeugen
	*
	* Properties sind in main.css auf die ID #overlay_darken gesetzt
	*/ 
   createOverlay: function()
   {
       if (!this.overlay && this.client != 'IE6') {
            this.overlay = new Element('div', { "id" : "overlay_darken"  } );
            this.overlay.hide();
            this.overlay.style.top = this.nav.parentNode.parentNode.offsetHeight + "px";
            Element.insert(this.nav.parentNode.parentNode.parentNode, this.overlay);
            new Effect.Opacity(this.overlay.id, { from: 1, to: 0, duration: 0.1 });   
            this.darkened = false;
       }
   },
   
   /**
	* Hintergrund abdunkeln
	*/
   darken: function()
   {
       if (this.overlay && !this.darkened) {
           this.overlay.style.display = "block";
           this.overlay.appear({ from: 0, to: 0.5, duration: 0.1, transition: Effect.Transitions.full });
           //new Effect.Opacity(this.overlay.id, { from: 0, to: 0.5, duration: 0.1 }); 
           this.darkened = true;
       }
   },
   
   /**
    * Hintergrund wieder erscheinen lassen
    *
    * kleine Verzoegerung, da der Aufruf bei Blur erfolgt 
	* und ansonsten der neue Focus noch nicht gesetzt ist
    */
   lighten: function()
   {
       if (this.overlay && this.darkened) {
           var dash = this;
           window.setTimeout(function() {
               if (!dash.focusOn(dash.nav)) {
                   dash.overlay.fade({  from: 0.5, to: 0, duration: 0.1 , transition: Effect.Transitions.full});
                   //new Effect.Opacity(dash.overlay.id, { from: 0.5, to: 0, duration: 0.1 }); 
                   dash.darkened = false;
               }
           }, 100); 
       }
   },
   
   /**
	* Setzt auf alle Link Elemente
	*/
   setFocusListener: function()
   {
	   var ATags = this.nav.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
			});
			
	   }
   },
   
   /**
    * 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;
	}
     
});