     /** initial author: glueckm @ BR-Online */
     
     /*
     Besonderheit im ParagraphTag wird die class Angabe f�r die FussNavigation genommen !!!nicht f�r styles hernehmen ist variable!!!
     */
     var reiter, toolWelle;
     
     // ermittelt und speichert alle Klicktool-Instanzen in einer Seite    
     function prepareKlicktool() {      
      var allDivs = document.getElementsByTagName('div') ;
      getKlickTools(allDivs); /* alle brKlickTools in Array brKlickTools stecken */      
     }
     
     /* Baut ein Objektarray f�r alle brKlickTools */
     function getKlickTools(allDivs) {
       if (allDivs == null) return;
       var count = 0;
       
       this.brKlickTools = new Array();
       
       for (var d=0;d<allDivs.length;d++) {
         if(allDivs[d].id.match(/brKlickTool-/)) {
         
           var slideCount = getSlideCount(allDivs[d]);
           var spanKlickNav = getSpanKlickNav(allDivs[d]);
           buildNavTools(allDivs[d], slideCount);
           klickReiterNav(allDivs[d], slideCount);
           
           var klicktoolId = allDivs[d].id;
           var klicktoolIdArray = klicktoolId.split('-');
           toolKeyword = klicktoolIdArray[1];
           var klickBrId = klicktoolIdArray[klicktoolIdArray.length-1].split('_')[0];
           
           var ivwContent = document.getElementById('ivwPixel');
           var ivwContentUrl = ivwContent.src;
           var ivwContentUrlLength = ivwContentUrl.length;
           var ivwSepBegin = ivwContentUrl.indexOf('/CP/');
           var ivwSepEnd = ivwContentUrl.indexOf('index.xml');
           var ivwSite = ivwContentUrl.substring(ivwSepBegin +4, ivwSepEnd);
           
           
           if (slideCount > -1) {// haben wir �berhaupt slides, sonst mache nichts?           
             this.brKlickTools[count] = new Object();
             this.brKlickTools[count]["id"] = allDivs[d].id;
             this.brKlickTools[count]["slideIndex"] = 1;
             this.brKlickTools[count]["numOfSlides"] = slideCount;
             this.brKlickTools[count]["keyword"] = toolKeyword;
             this.brKlickTools[count]["ivwSite"] = ivwSite;
             this.brKlickTools[count]["klickBrId"] = klickBrId;
             this.brKlickTools[count]["currentPage"] = 1;
             count++;
           }
         }
       }
     }
     
     
     /* Ermittle die Anzahl der klickNav f�r ein brIframe-Div.
        Vergib eine eindeutige Id f�r jedes Slide-Div (<aktuelleBrklicktoolBrId_Nav_slideNummer>)
        @param: currentDiv ein brIframe-Div
      */
     function getSpanKlickNav(currentDiv) {
       var ret = -1;
       
       var spanKlickNav = currentDiv.getElementsByTagName('span');
       for (var i=0;i<spanKlickNav.length;i++) {
         if(spanKlickNav[i].className.match(/klickReiter/)) {
           ret++;
           spanKlickNav[i].setAttribute('id', currentDiv.id+'_Nav_'+ret);
         }
         if(spanKlickNav[i].className.match(/klickNav/)) {
           ret++;
           spanKlickNav[i].setAttribute('id', currentDiv.id+'_Navi');
         }
       }
       return ret;      
     }
     
     
     /* Ermittle die Anzahl an Slides f�r ein brIframe-Div.
        Setze alle Slides gr��er 0 auf hide.
        Vergib eine eindeutige Id f�r jedes Slide-Div (<aktuelleBrklicktoolBrId_slideNummer>)
        @param: currentDiv ein brIframe-Div
     */
     function getSlideCount(currentDiv) {
       
       var subDivs = currentDiv.getElementsByTagName('div');    
       var ret = -1;
       
       for (var i=0;i<subDivs.length;i++) {
         if(subDivs[i].className.match(/slide/)) {
           ret++;
           subDivs[i].setAttribute('id', currentDiv.id+'_'+ret);      
           if(ret>0) {
             subDivs[i].className='hide';
           }
          }
        }
  
       return ret;      
     }

     //baut die reiterNavigation zusammen 
     function klickReiterNav (currentDiv,slideCount){
       var klickNav = document.getElementById(currentDiv.id+'_Navi');
       var klickNavUl = document.createElement('ul');
       if(klickNav != null){
         klickNav.appendChild(klickNavUl);
         klickNavUl.setAttribute('class',"klickNav");
         klickNavUl.className='klickNav';
         var emKlickNav = currentDiv.getElementsByTagName('em');
         reiter = emKlickNav.length-1;
         for (var i=0;i<emKlickNav.length;i++){
           if(emKlickNav[i].className.match(/klickReiter/))
           {
              var emText = emKlickNav[i].firstChild.nodeValue;
              var li = document.createElement('li');
              klickNavUl.appendChild(li);
              var liHref = document.createElement('a');
	            liHref.setAttribute('id',currentDiv.id+'_nav_'+i);
              var slide = 'javascript:navigate(\''+currentDiv.id+'\', \'slide\', \''+currentDiv.id+'_'+ (i-1) +'\');';
              liHref.setAttribute('href', slide);
              li.appendChild(liHref);
              var text = document.createTextNode(emText);
              liHref.appendChild(text);
           }
         }
         var liHigh = document.getElementById(currentDiv.id+'_nav_1');
         liHigh.setAttribute('class','high');
         liHigh.className = 'high';
       }
     }
     
     
//     //baut die reiterNavigation zusammen (z.B. 1 2 3 4 5 6 7...)
//     function klickReiterNav (currentDiv,slideCount) {
//       var klickNav = document.getElementById(currentDiv.id+'_Navi');
//       var klickNavUl = document.createElement('ul');
//       
//       if(klickNav != null) { // nur wenn es das klickNav-ul noch nicht gibt.
//         klickNav.appendChild(klickNavUl);
//         klickNavUl.setAttribute('class',"klickNav");
//         klickNavUl.className='klickNav';
//         var emKlickNav = currentDiv.getElementsByTagName('em');
//         
//         for (var i=0;i<emKlickNav.length;i++) {
//           if(emKlickNav[i].className.match(/klickReiter/)) {
//              var emText = emKlickNav[i].firstChild.nodeValue;
//              if (emKlickNav.length > 9 && i==1) {            	              	  
//            	  buildReiterNavPaging('prev',currentDiv,klickNavUl,i);            	  
//              }
//              
//              var li = document.createElement('li');
//              klickNavUl.appendChild(li);
//              // wenn mehr als 9, erstmal ausblenden
//              if (i > 9) {
//         		  li.setAttribute('class','hide');            	  
//              }
//              
//              var liHref = document.createElement('a');
//	            liHref.setAttribute('id',currentDiv.id+'_nav_'+i);
//              var slide = 'javascript:navigate(\''+currentDiv.id+'\', \'slide\', \''+currentDiv.id+'_'+ (i-1) +'\');';
//              liHref.setAttribute('href', slide);
//              li.appendChild(liHref);
//              var text = document.createTextNode(emText);
//              liHref.appendChild(text);
//              
//              // letztes Element
//              if (emKlickNav.length > 9 && i==emKlickNav.length-1) {
//            	  buildReiterNavPaging('next',currentDiv,klickNavUl,i);
//              }
//           }
//         }
//         var liHigh = document.getElementById(currentDiv.id+'_nav_1');
//         liHigh.setAttribute('class','high');
//         liHigh.className = 'high';
//       }
//     }         
     
     /* Pageing f�r die Reiternavigation */
     function buildReiterNavPaging(direction,currentDiv,klickNavUl,navIdx){    	 
	    	 var nextNavSet = document.createElement('li');
	   	  	 klickNavUl.appendChild(nextNavSet);
	   	  	 var liHref = document.createElement('a');
	   	  	 liHref.setAttribute('id',currentDiv.id+'_page_'+navIdx);
	   	  	   	  	 	   	  	
	   	  	 if (direction=='next'){
	   	  		 var page = 'javascript:showReiterNavPage(\''+currentDiv.id+'\',\'next\');';	   	  		 
	   	  		 var text = document.createTextNode('>');
	   	  	 }
	   	  	 else {
	   	  		 var page = 'javascript:showReiterNavPage(\''+currentDiv.id+'\',\'prev\');';
	   	  		 var text = document.createTextNode('<');
	   	  	 }
	   	  	 
   	  		 liHref.setAttribute('href', page);
   	  		 liHref.appendChild(text);
	   	  	 nextNavSet.appendChild(liHref);    	 
     }     
     
      /* Rendere die Naviagtions-Elemente in die Slide-Divs
         currentDiv == aktuelle Slide-Gruppe
         (<back next> links)
       */
      function buildNavTools(currentDiv,slideCount)
      {
        for (var i=0;i<=slideCount;i++)
        {  /* hole den div mit der id nach konvetion */
          var slide = document.getElementById(currentDiv.id+'_'+i);
          var slideP = slide.getElementsByTagName('p')[0];         
          // #%# ist der Delimiter ("Trennzeichen") um Leerzeichen in den Links m�glich zu machen
          var slideNavBottom = slideP.className.split('#%#');
          var ul = document.createElement('ul');       
          slide.appendChild(ul);
          ul.setAttribute('class',"counter");
          ul.className='counter';
          if (i>0) /* Zur�ck-Link anzeigen? */
          {
            var li_prev = document.createElement('li');
            ul.appendChild(li_prev);
            li_prev.setAttribute('class','prevSlideText');
            li_prev.className='prevSlideText';
            
            var href_prev = document.createElement('a');
	          href_prev.setAttribute('id',currentDiv.id+'_prev_slide_'+i);
            li_prev.appendChild(href_prev);
	    
            var prev = 'javascript:navigate(\''+currentDiv.id+'\',\'prev\', \''+currentDiv.id+'_'+ (i-1) +'\');';
            href_prev.setAttribute('href', prev);
            href_prev.appendChild(document.createTextNode('zur�ck'));
            if (slideNavBottom != ""){
              href_prev.childNodes[0].nodeValue = slideNavBottom[0];
            }
          }
          
          /* Seitenz�hler */
          var li_count = document.createElement('li');
          if (slideCount>0){
            var j = i + 1;
            var k = slideCount + 1;
            if (j < 10) { j = "0" + j.toString(); }
            if (k < 10) { k = "0" + k.toString(); }
            ul.appendChild(li_count);  
            li_count.appendChild(document.createTextNode(j +'/'+ k));
            li_count.setAttribute('class','page');
            li_count.className='page';
          }
          
          if (i!=slideCount) { /* Vorw�rtslink immer bis auf letzten Slide */          
            var li_next = document.createElement('li');
            ul.appendChild(li_next);
            li_next.setAttribute('class','nextSlideText');
            li_next.className='nextSlideText';
        
            var href_next = document.createElement('a');  
	          href_next.setAttribute('id',currentDiv.id+'_next_slide_'+i);
            li_next.appendChild(href_next);
	    
            var next = 'javascript:navigate(\''+currentDiv.id+'\',\'next\', \''+currentDiv.id+'_'+ (i+1) +'\');';
            href_next.setAttribute('href', next);
            href_next.appendChild(document.createTextNode('weiter'));
            if (slideNavBottom != ""){
              href_next.childNodes[0].nodeValue = slideNavBottom[1];
            }
          }    
        }
      }

     function showReiterNavPage(klicktoolBrId,direction){
    	 
    	 var klickTool;
    	 for (var i=0;i<this.brKlickTools.length;i++){
             if (this.brKlickTools[i]["id"] == klicktoolBrId){ 
               klickTool = i; 
               
               //TODO: Direction unterscheiden
               // Ein-/ausblenden der gepageten SeitenNavis
                  // (aktuelle Seite ist in klickTool["currentPage"] abgelegt)
               // Ein-/ausblenden der Pfeile
               // aktuelle Seite hoch/runter z�hlen
               // Pageing auch �ber das normale Navigate machen, aktuelle Seite sollte
                  // vermutlich immer sichbar sein.
               // Angabe aus CMS wieviele NaviElement pro Seite angezeigt werden sollen (wenn was anderes als Zahlen erscheinen)
             }
    	 }
     }
      
     /* Navigiere nach vorne oder zur�ck */
     function navigate(klicktoolBrId, direction, slide)
     {
        var klickTool, nextSlide;
        var liNrZahl = slide.indexOf('_')+1;
        var slideLength = slide.length;
        var liNr = slide.substring(liNrZahl,slideLength);
        var liZahl = 1 + parseInt(liNr);
        for (var i=0;i<this.brKlickTools.length;i++){
          if (this.brKlickTools[i]["id"] == klicktoolBrId){ 
            klickTool = i;
            if (direction=='next'
             && this.brKlickTools[i]["slideIndex"]<=this.brKlickTools[i]["numOfSlides"]){
              this.brKlickTools[i]["slideIndex"]++;            
		    }
      	    if (direction=='prev' && this.brKlickTools[i]["slideIndex"] > 1){
      		    this.brKlickTools[i]["slideIndex"]--;
            }
            if (direction=='slide'){
              //Zahl ermitteln f�r reiterNr
              this.brKlickTools[i]["slideIndex"] = liZahl;
            }
            var klickToolTest = document.getElementById(klicktoolBrId);
            var spanNav = klickToolTest.getElementsByTagName('span');
            for (var l=0;l<spanNav.length;l++){
              if (spanNav[l].className.match(/klickNav/)){
                var spanNavA = spanNav[l].getElementsByTagName('a');
                for (var w=0;w<spanNavA.length;w++){
                  spanNavA[w].setAttribute('class','low');
                  spanNavA[w].className ='low';
                }
              }
            }
            var liHigh = document.getElementById(klicktoolBrId+'_nav_'+liZahl);
            if(liHigh != null){
              liHigh.setAttribute('class','high');
              liHigh.className = 'high';
            }
            /** IVW Verpixelung */  
            //pixelate(klicktoolBrId,this.brKlickTools[i]["slideIndex"],this.brKlickTools[i]["keyword"],this.brKlickTools[i]["ivwSite"]); //mit slides und BrId
            pixelate(this.brKlickTools[i]["keyword"],this.brKlickTools[i]["ivwSite"],this.brKlickTools[i]["klickBrId"]); // ohne slides und BrId
            break;
          }    
        }
        
        var div = document.getElementById(klicktoolBrId);
        var slideDivs = div.getElementsByTagName("div");
	
        var currentSlide;
      
        for (i=0;i<slideDivs.length;i++){
             if(slideDivs[i].className.match(/slide/)
              ||slideDivs[i].className.match(/hide/)){     
		            if (i==this.brKlickTools[klickTool]["slideIndex"]){
        			  slideDivs[i].className='slide';
        			  currentSlide = i;
        		     }      
        		    else {     
        			  slideDivs[i].className='hide';
        		    }
             }
        }
				// -1 weil die Slides bei 0 anfangen zu z�hlen
	       focusNextLink(direction, klicktoolBrId, currentSlide-1, this.brKlickTools[klickTool]["numOfSlides"]);
      } 
      
      /** setze den Focus auf den n�chsten Link gleicher Richtung */
      function focusNextLink(direction, klicktoolBrId, currentDivNum, numOfSlides){
    	if ((direction=='next')||(direction=='slide')){
    		// ID nach Konvention aus buildNavTools (currentDiv.id+'_next_slide_'+i)		
    		var currentLink = document.getElementById(klicktoolBrId+'_next_slide_'+currentDivNum);
    		if (currentLink != null){
    			currentLink.focus();
            }
    		else {
    			    /** -1 weil es ja f�r den aktuellen Slide keinen Next-Link mehr gibt */                   
              if (currentDivNum < numOfSlides) {
            			findNextLinkToFocus(klicktoolBrId+'_next_slide_'+(currentDivNum-1));
                  }
              else {
                  var hrefs = document.getElementsByTagName("a");
                    	for (var i=0;i<hrefs.length;i++){
                      		if (hrefs[i].id == klicktoolBrId+'_prev_slide_'+(currentDivNum)) {
                            hrefs[i].focus();
                            return;
                          }
                      }
                   }
             }
      	}
      	else
      	{
      		// ID nach Konvention aus buildNavTools (currentDiv.id+'_next_slide_'+i)
      		var currentLink = document.getElementById(klicktoolBrId+'_prev_slide_'+currentDivNum);
      		if (currentLink != null)
      			currentLink.focus();
      		else {
      			
      			if (currentDivNum > 0) {
      				/** +1 weil es ja f�r den aktuellen Slide keinen prev-Link mehr gibt */
      				findPrevLinkToFocus(klicktoolBrId+'_prev_slide_'+(currentDivNum+1));
      				}
      			else {
                    var hrefs = document.getElementsByTagName("a");
                      	for (var i=0;i<hrefs.length;i++){
                        		if (hrefs[i].id == klicktoolBrId+'_next_slide_'+(currentDivNum)) {
                              hrefs[i].focus();
                              return;
                            }
                        }
                     }
      			}            
      	}	
      }
      
      /** Suche den n�chsten Link nach dem letzten "Weiter" und �berspringe den Prev-Link des letzten Slides.
                    Annahme: 
		    es gibt mindestens einen Link unter dem letzten IFrame-Slide. (Abbinder oder Weiter-Link)
               */ 
      function findNextLinkToFocus(linkId){	      		
      	var hrefs = document.getElementsByTagName("a");
      	for (var i=0;i<hrefs.length;i++){		
      		if (hrefs[i].id == linkId){
      			/** +2, weil der "zur�ck"-Link des letzten Slides �bersprungen werden soll */
      			var j = i+2;
      			if (hrefs[j].style.display!="none"){
      			    hrefs[i+2].focus();
      			    return;                            
      			}
      		}					
      	}	
      }
      
      /** Suche den  Link vor dem ersten "Zur�ck".
                    Annahme: 
		    es gibt mindestens einen Link �ber dem ersten IFrame-Slide. (z.B. Text-Gr��e)
               */ 
      function findPrevLinkToFocus(linkId,currentDiv){
        var step = "2";
      	var hrefs = document.getElementsByTagName("a");
        var klickNav = document.getElementsByTagName("ul");
        
        for (var i=0;i<klickNav.length;i++){
          if (klickNav[i].className.match(/klickNav/)){
            var klickNavLi = klickNav[i].getElementsByTagName("li");
            var step = klickNavLi.length+2;
            break;
          }
        }
        
      	for (var i=0;i<hrefs.length;i++){
      		if (hrefs[i].id == linkId){		
      			/** -2, weil der "zur�ck"-Link und der "weiter"-Link des letzten Slides �bersprungen werden soll */			
      			var j = i-step;
      			/* wenn wir einen Link in einem ausgeblendeten Slide erwischen, dann skippen */
      			while (hrefs[j].parentNode.parentNode.parentNode.className=="hide" || hrefs[j]=="")
      				j--;
      						
      			hrefs[j].focus();
      			return;
      		}					
      	}	
      }
      
      /** IVW-verpixelung */
     // function pixelate(klicktoolBrId, slideIdx, klicktoolKeyword, ivwSite){ //mit slides und brId
      function pixelate(klicktoolKeyword,ivwSite,klickBrId){ // ohne slides
          var urlIVW = "http://www.br-online.de";
          var IVW="http://bronline.ivwbox.de/cgi-bin/ivw/CP/";
          var contentGeber = ivwSite+'klicktool/s_'+klicktoolKeyword+'_brKlickTool-'+klickBrId+'/index.xml';
          IVW+= contentGeber+';p='+encodeURIComponent(urlIVW+'/'+contentGeber);
          
          var ivwId = document.getElementsByTagName("body")[0];
          var ivwNeu = IVW+"?timestamp="+ zeit();
          
          var ivwId_klicktool = document.getElementById('ivwPixel_klicktool');
          
          if (ivwId_klicktool==null) {
        	  /* wenn es den KlickTool-Pixel noch nicht gibt: neu anlegen*/
        	  var newDiv = document.createElement('div');
        	  newDiv.setAttribute('style','position: absolute; margin-top: -100px;');
        	  
        	  if (ivwId!=null)
        		  ivwId.appendChild(newDiv);
        	  
             var newImg = document.createElement('img');              
             newDiv.appendChild(newImg);
             newImg.setAttribute('id','ivwPixel_klicktool');
             ivwId_klicktool = newImg;
          }

          ivwId_klicktool.src = ivwNeu;       
      }
