function CLASS_NAVI(p_can,p_url)
{
  //Öffentliche Variablen
  this.className = "navi";
  this.canvas = document.getElementById(p_can);
  this.alpha;
  this.element_alpha = 0.5;
  this.element_alpha_active = 1.0;
  this.left = 0;
  this.top = 0;
  this.url = p_url;
  this.color = "#ffffff";
  this.slot = 0;
  this.fenster_div;
  this.bg_div;
  this.content_div;
  this.active = true;
  this.deeplinks = new Array();
  this.children = new Array();
  this.level = 0;
  this.index = 0;
  this.active_element_l1;
  this.active_element_l2;
  //Private Variablen

  

  //Öffentliche Methoden
  this.init_from_xml = function(xml){
  var xml = xml.childNodes;
  var i=0;
  for(var counter=0;counter<xml.length;counter++) {
  if (xml[counter].firstChild){
    switch(xml[counter].nodeName.toLowerCase()){
      case "alpha":
        this.alpha = xml[counter].firstChild.nodeValue;
        break;
      case "color":
        this.color = xml[counter].firstChild.nodeValue;
        break;
      case "element_alpha":
        this.element_alpha = xml[counter].firstChild.nodeValue;
        break;
       case "element_alpha_active":
        this.element_alpha_active = xml[counter].firstChild.nodeValue;
        break;     
      case "left":
        this.left = xml[counter].firstChild.nodeValue;
        break;
      case "top":
        this.top = xml[counter].firstChild.nodeValue;
        break;
      case "slot":
        this.slot = xml[counter].firstChild.nodeValue;
        break;
      case "element":
        switch(xml[counter].getAttribute("class")){
          case "navi_element":
            var temp = new CLASS_NAVI_ELEMENT(this,i,this);
            i++;
            temp.init_from_xml(xml[counter]);
            this.children.push(temp);
            break;
          case "deeplink":
            var temp = new CLASS_DEEPLINK(this,this);
            temp.init_from_xml(xml[counter]);
            break;
        }

        break;
    }
	}
  }
    this.draw();
  }
  this.draw = function(){

    this.fenster_div = document.createElement("div");
    this.fenster_div.className = "navi";
    //this.fenster_div.style.height = "50px";
    //this.fenster_div.style.width = "50px";
    this.fenster_div.style.top = this.top;
    this.fenster_div.style.left = this.left;
    this.fenster_div.obj = this;

    this.bg_div = document.createElement("div");
    this.bg_div.className = "bg";
    this.bg_div.style.filter="alpha(opacity:" + (this.alpha*100) + ")";
    this.bg_div.style.KHTMLOpacity = this.alpha;
    this.bg_div.style.MozOpacity = this.alpha;
    this.bg_div.style.opacity = this.alpha;
    
    this.content_div = document.createElement("div");
    this.content_div.className = "content";
    this.content_div.id = this.url;
    initLinks(this.content_div);

    this.fenster_div.appendChild(this.bg_div);
    this.fenster_div.appendChild(this.content_div);
  	this.canvas.appendChild(this.fenster_div);
  	for (var counter=0;counter<this.children.length;counter++) {
      this.children[counter].draw();
    }
  	files[this.url] = this;
  	navigation = this;
    
    var l1 = getURLParam("l1");
    var l2 = getURLParam("l2");
    var lb = getURLParam("lb");
    var ha = window.location.hash;
    ha = ha.replace(/#/g, "");
    if (ha != ""){
      lb= ha;
    }else{
      //ignorehash = "true";
      //hashListener.setHash("home");
      //window.location.hash = "home";
    }
   
    
    
    if ((l1 != "")&&(l2 != "")){
      navigate_to(l1,l2);
    }
    else if ((lb != null) && (lb != "")){
      if (this.deeplinks[lb] != null){
        this.deeplinks[lb].do_actions();      
      }
    }else{
      navigate_to('home');
    }

    //diese Zeile ruft einen internen Link namens '_' auf, da dieser nicht vorhanden ist, wird nur die url bzw history geändert. Wird dannach Browserback verwendet, bleibt man auf der Seite
	// begin back button workaround
    //var hash = "_";
    //if (window.location.hash == "#_"){
    //  hash = ".";
    //}
    //window.location.hash = hash;
	// end back button workaround
  }
  
  this.toggle_display = function(){
    if (this.active == true){
     this.hide();
    }else{
     this.show();
    }
  }
  this.show= function(){
     this.fenster_div.style.display = "block";
     this.active = true;
  }
  this.hide = function(){
     this.fenster_div.style.display = "none";
     this.active = false;
  }
  this.close_navi = function(){
      if(this.active_element_l2 != null){
        this.active_element_l2.change_alpha(this.element_alpha);
        this.active_element_l2.active= false;
        this.active_element_l2 = null;
      }
      if(this.active_element_l1 != null){
        for( var i = 0; i < this.active_element_l1.children.length; i++ ) {
          this.active_element_l1.children[i].hide();
        }
        this.active_element_l1.change_alpha(this.element_alpha);
        this.active_element_l1.active= false;
        this.active_element_l1 = null;
      }
  }
  //Private Methoden
}
