mtop=0

        //one layer for every button
        for (j=0;j<this.panels[i].img.length;j++) {
          document.write('<Layer top='+mtop+' width='+this.width);
          document.write('><Center><SPAN class=imgnob>');
          document.write("<A href='#' onmouseOut='"+this.panels[i].v);
          document.write(".rst("+j+")' onmouseOver='"+this.panels[i].v);
          document.write(".mOver("+j+")'><img src='"+this.panels[i].img[j]);
          document.write("' border=0></A></SPAN>");
          document.write("<Font size=2 face=arial color=white>");
          document.write(this.panels[i].lbl[j]+"</FONT><BR><BR>");
         document.write('</Layer>');
         mtop=mtop+this.buttonspace;
        }

       document.write('</Layer>');

       //one layer for the panels caption
       document.write('<Layer top=0 width='+this.width+' clip="0,0,');
       document.write(this.width+',28" bgcolor=silver class=button ');
       document.write('onmouseOver="'+this.panels[i].v+'.clear();">');
       document.write('<A class=noLine href="javascript:'+this.v+'.showPanel(');
       document.write(i+');" onmouseOver="'+this.panels[i].v+'.clear();">');
       document.write('<Font Color=black class=noLine>'+this.panels[i].caption);
       document.write('</Font></A></Layer>');

       //two layers for scroll-up -down buttons
       document.write('<Layer visibility=hide top=40 left='+(this.width-20));
       document.write('><A href="#" onClick="'+this.panels[i].v+'.down(16);" ');
       document.write('onmouseOver="'+this.panels[i].v+'.clear();"><img ');
       document.write('width=16 height=16 src=images/arrowup.gif border=0>');
       document.write('</A></LAYER><Layer top=');
       document.write((this.height-(this.panels.length)*28)+'<Layer top=');
       document.write((this.height-(this.panels.length)*28)+' left=');
       document.write((this.width-20)+'><A href="#" onClick="');
       document.write(this.panels[i].v+'.up(16);" onmouseOver="');
       document.write(this.panels[i].v+'.clear();"><img width=16 height=16 ');
       document.write('src=images/arrowdown.gif border=0></A></LAYER>');

      document.write('</LAYER>');
    }
    document.write('</LAYER>');
  }
  else {                             //draw Outlook bar for all browsers but ns4

    //OutlookBar layer..
    document.write('<DIV id='+this.name+' Style="position:absolute; left:');
    document.write(this.xpos+'; top:'+this.ypos+'; width:'+this.width);
    document.write('; height:'+this.height+'; background-color:'+this.bgcolor)
    document.write('; clip:rect(0,'+this.width+','+this.height+',0)">');
    h=this.height-((this.panels.length-1)*28)

    //one layer for every panel...
    for (i=0;i<this.panels.length;i++) {
      document.write('<DIV id='+this.name+'_panel'+i);
      document.write(' Style="position:absolute; left:0; top:'+t);
      document.write('; width:'+this.width+'; height:'+h+'; clip:rect(0px, ');
      document.write(this.width+'px, '+h+'px, 0px); background-color:');
      document.write(this.bgcolor+';">')
      t=t+28;

       //one layer to host the panel buttons
      document.write('<div id='+this.name+'_panel'+i);
      document.write('_f Style="position:absolute; left:0; top:38; width:');
      document.write(this.width+'; height:');
      document.write((this.panels[i].img.length*this.buttonspace));
      document.write('; background-color:'+this.bgcolor+';">')
      mtop=0

      //one (ie4, ie5, ns5) or three layers (op5) for every button
      for (j=0;j<this.panels[i].img.length;j++) {
        if (bt.op5) {
          document.write('<DIV id='+this.name+'_panel'+i+'_b'+j);
          document.write('0 class=imgB Style="position:absolute; ');
          document.write('visibility:hidden; left:0; width:'+this.width);
          document.write('; top:'+mtop+'; text-align:center;">');
          document.write('<img src='+this.panels[i].img[j]);
          document.write(' class=imgbin onmouseUp=\''+this.panels[i].v);
          document.write('.mOver('+j+');'+this.panels[i].act[j]);
          document.write(';\' onmouseOut="'+this.panels[i].v+'.mOut('+j);
          document.write(');"><BR>'+this.panels[i].lbl[j]+'</DIV>');

          document.write('<DIV id='+this.name+'_panel'+i+'_b'+j+'1 class=imgB');
          document.write(' Style="position:absolute; visibility:hidden; ');
          document.write('left:0; width:'+this.width+'; top:'+mtop);
          document.write('; text-align:center;">');
          document.write('<img src='+this.panels[i].img[j]);
          document.write(' class=imgbout onmouseDown="'+this.panels[i].v);
          document.write('.mDown('+j+');" onmouseUp=\''+this.panels[i].v);
          document.write('.mOver('+j+');'+this.panels[i].act[j]);
          document.write(';\' onmouseOut="'+this.panels[i].v+'.mOut('+j);
          document.write(');"><BR>'+this.panels[i].lbl[j]+'</DIV>');

          document.write('<DIV id='+this.name+'_panel'+i+'_b'+j);
          document.write('2 class=imgB Style="position:absolute; ');
          document.write('visibility:visible; left:0; width:'+this.width);
          document.write('; top:'+mtop+'; text-align:center;">');
          document.write('<img src='+this.panels[i].img[j]+' class=imgnob ');
          document.write('onmouseOver="'+this.panels[i].v+'.mOver('+j);
          document.write(');"><BR>'+this.panels[i].lbl[j]+'</DIV>');
        }
        else {
          document.write('<DIV id='+this.name+'_panel'+i+'_b'+j+' class=imgB ');
          document.write('Style="position:absolute; left:0; width:'+this.width);
          document.write('; top:'+mtop+'; text-align:center;">');
          document.write('<img src='+this.panels[i].img[j]+' class=imgnob ');
          document.write('onmouseOver="this.className=\'imgbout\';" ');
          document.write('onmouseDown="this.className=\'imgbin\';" ');
          document.write('onmouseUp=\'this.className="imgbout";');
          document.write(this.panels[i].act[j]+';\' ');
          document.write('onmouseOut="this.className=\'imgnob\';"><BR>');
          document.write(this.panels[i].lbl[j]+'</DIV>');
        }
        mtop=mtop+this.buttonspace;
      }

      document.write('</DIV>');

      //one layer for the panels caption if not op5!
      if (!bt.op5) {
        document.write('<DIV id='+this.name+'_panel'+i+'_c class=button ');
        document.write('onClick="javascript:'+this.v+'.showPanel('+i);
        document.write(');" style="position:absolute; left:0; top:0; width:');
        document.write((this.width-c)+'; height:'+(28-c)+';"><A href="#" ');
        document.write('onClick="'+this.v+'.showPanel('+i+');this.blur();');
        document.write('return false;" class=noLine><FONT color=black ');
        document.write('class=noLine">'+this.panels[i].caption);
        document.write('</FONT></A></DIV>')
      }
      //two layers for scroll-up -down buttons
      document.write('<DIV id='+this.name+'_panel'+i);
      document.write('_m1 style="position:absolute; top:40; left:');
      document.write((this.width-20)+';"><A href="#" onClick="');
      document.write(this.panels[i].v+'.down(16);this.blur();return false;" ');
      document.write('onmouseOver="'+this.panels[i].v+'.clear();">');
      document.write('<img width=16 height=16 src=images/arrowup.gif border=0>');
      document.write('</A></DIV>');
      document.write('<DIV id='+this.name+'_panel'+i);
      document.write('_m2 style="position:absolute;  top:');
      document.write((this.height-(this.panels.length)*28)+'; left:');
      document.write((this.width-20)+';"><A href="#" onClick="');
      document.write(this.panels[i].v+'.up(16);this.blur();return false" ');
      document.write('onmouseOver="'+this.panels[i].v+'.clear();">');
      document.write('<img width=16 height=16 src=images/arrowdown.gif border=0>');
      document.write('</A></DIV>');


      document.write('</DIV>')

    }
    //Opera bug (Clip!)
    //op5 doesn't support layer clipping! so use top layers for panel caption
    //and two top layers with background-color like page color to hide
    //panel content outside of the outlookbar.
    //op5 unterst黷zt kein Clip bei Layers! darum erzeugen wir drei top level
    //layers f黵 die Panel 躡erschrift und zwei top Layers mit der gleichen
    //Hintergrundfarbe wie die HTML Seite um den Panel Inhalt au遝rhalb des
    //Outlook Bars zu verdecken!
    if (bt.op5) {
      //one layers for panel captions if op5
      for (i=0;i<this.panels.length;i++) {
        document.write('<DIV id='+this.name+'_panel'+i);
        document.write('_c class=button onmouseOver="'+this.panels[i].v);
        document.write('.clear();" onClick="'+this.v+'.showPanel('+i);
        document.write(');" style="position:absolute; left:0; top:0; width:');
        document.write((this.width-c)+'; height:'+(28-c)+';">');
        document.write('<A href="#" ');
        document.write('onClick="'+this.v+'.showPanel('+i+');this.blur();');
        document.write('return false;" class=noLine><FONT color=black ');
        document.write('class=noLine">'+this.panels[i].caption);
        document.write('</FONT></A></DIV>')
      }
      //two layers to hide 'nonvisible' part of panel
      //(op5 doesn't support clipping!)
      //document.write('<DIV style="position:absolute; left:0; top:');
      //document.write(this.height+'; height:300; width:'+this.width);
      //document.write('; background-color:'+this.pagecolor+';"></DIV>');
      //document.write('<DIV style="position:absolute; left:0; top:-300; ');
      //document.write('height:300; width:'+this.width+'; background-color:');
      //document.write(this.pagecolor+';"></DIV>');
    }
    document.write('</DIV>');

  }
  for (i=0;i<this.panels.length;i++) {
    this.panels[i].obj=getObj(this.name+'_panel'+i);
    if (!bt.ns4) {
      this.panels[i].objc=getObj(this.name+'_panel'+i+'_c');
      this.panels[i].objf=getObj(this.name+'_panel'+i+'_f');
      this.panels[i].objm1=getObj(this.name+'_panel'+i+'_m1');
      this.panels[i].objm2=getObj(this.name+'_panel'+i+'_m2');
    }
    this.panels[i].testScroll();
  }

  //activate last panel
  //op5 dosen't support cookies!
  //so get actual panel from url paramter
  if (bt.op5) {
    if (document.location.search=='')  {
      this.showPanel(0);
    }
    else
      this.showPanel(document.location.search.substr(1,1));
  }
  else {
    //actual panel is saved in a cookie
    if (document.cookie)
      this.showPanel(document.cookie);
    else
      this.showPanel(0);
  }
}


// ---------------------------------------------------------------------------
// outlookbar function for ns4
// ---------------------------------------------------------------------------

function b_showPanel_ns4(nr) {
var i
var l
  document.cookie=nr;
  l = this.panels.length;
  for (i=0;i<l;i++) {
    if (i>nr) {
      this.panels[i].obj.top=this.height-((l-i)*28)-1;
    }
    else {
      this.panels[i].obj.top=i*28;
    }
  }
}

// ---------------------------------------------------------------------------
// outlookbar function for ie4, ie5, ns5, op5
// ---------------------------------------------------------------------------

function b_showPanel(nr) {
var i
var l
var o
  document.cookie=nr;
  this.aktPanel=nr;
  l = this.panels.length;
  for (i=0;i<l;i++) {
    if (i>nr) {
      this.panels[i].obj.style.top=this.height-((l-i)*28);
      //Opera doesn't support clip:rect()!
      //so hide non visible panels
      //and move panel caption
      if (bt.op5) {
        this.panels[i].objf.style.visibility='hidden';
        this.panels[i].objc.style.top=this.height-((l-i)*28);
      }
    }
    else {
      this.panels[i].obj.style.top=i*28;
      //Opera doesn't support clip:rect()!
      //so show visible panel
      //and move panel caption
      if (bt.op5) {
        this.panels[i].objf.style.visibility='visible';
        this.panels[i].objc.style.top=i*28;
      }
    }
  }
}

//resize the Outlook Like Bar
//IE4/5 & NS6 -> resize all layers (width & height)
//op5         -> resize only height - reload on width change
//ns4         -> reload on any change!
//
//if you change the width of a layer (style="text-align:center;") then
//the content will not be moved!
function b_resize(x,y,width,height) {
var o
var i
var j
var h
var c=(bt.ns5)?6:0;

   if (bt.ns4)
     location.reload();
   else {
     if (bt.op5 && (width!=this.width))
       if (location.href.indexOf('?')!=-1)
         location.href=location.href.replace(/\?./,"?"+this.aktPanel)
       else
         location.href= location.href+'?'+this.aktPanel;
     else {
       this.xpos=x;
       this.yPos=y;
       this.width=width
       this.height=height

       o=getObj(this.name);
       o.style.left=x;
       o.style.top=y;
       o.style.width=width;
       o.style.height=height;
       o.style.clip='rect(0px '+this.width+'px '+this.height+'px 0px)';

       h=this.height-((this.panels.length-1)*28)

       for (i=0; i<this.panels.length; i++) {

         o=getObj(this.name+'_panel'+i+'_c');
         o.style.width=(this.width-c);

         if (!bt.op5)
           for (j=0;j<this.panels[i].img.length;j++) {
             o=getObj(this.name+'_panel'+i+'_b'+j);
             o.style.width=this.width;
           }

         this.panels[i].objm1.style.left=(this.width-20);
         this.panels[i].objm2.style.top=(this.height-(this.panels.length)*28);
         this.panels[i].objm2.style.left=(this.width-20);
         this.panels[i].objf.style.width=this.width;
         this.panels[i].obj.style.width=this.width
         this.panels[i].obj.style.height=h
         this.panels[i].obj.style.pixelHeight=h
         this.panels[i].obj.style.clip='rect(0px '+this.width+'px '+h+'px 0px)';

         this.panels[i].testScroll();
       }
     }
     this.showPanel(this.aktPanel);
   }
}



// ---------------------------------------------------------------------------
// OutlookBar object for ie4, ie5, ns5, op5
// ---------------------------------------------------------------------------

function createOutlookBar(name,x,y,width,height,bgcolor,pagecolor) {
  this.aktPanel=0;                        // last open panel
  this.name=name                          // OutlookBar name
  this.xpos=x;                            // bar x-pos
  this.ypos=y;                            // bar y-pos
  this.width=width;                       // bar width
  this.height=height;                     // bar height
  this.bgcolor=bgcolor;                   // bar background color
  this.pagecolor=pagecolor;               // page bgcolor (op5!)
  this.buttonspace=80                     // distance of panel buttons
  this.panels=new Array()                 // OutlookBar panels
  this.addPanel=b_addPanel;               // add new panel to bar
  this.writeStyle=b_writeStyle;
  this.draw=b_draw;                       // write HTML code of bar
  if (bt.ns4)
    this.showPanel=b_showPanel_ns4;       // make a panel visible (ns4)
  else
    this.showPanel=b_showPanel;           // make a panel visible (!=ns4)
    
  this.resize=b_resize;                   // resize Outlook Like Bar

  this.v = name + "var";                  // global var of 'this'
  eval(this.v + "=this");

  return this
}