var docEl = (typeof document.compatMode != "undefined" && document.compatMode != "BackCompat")? "documentElement" : "body";
                
  infobox_width = 500;
  infobox_height = 300;
  infobox_offsetLeft = 0;
  infobox_isactive = false;
  infobox_mode = '';
  
  function show_infobox(content) {
    // content = array('image(0)','name(1)','beschreibung(2)','techdata(3)','modus(4)','x-verschiebung(5)','preis(6)')
    if (!infobox_isactive) {
      switch (content[4]) {
        case 'bundleoptions':
          infobox_offsetLeft = content[5];
          document.getElementById('infobox').style.width = infobox_width+'px';
          document.getElementById('infobox').style.height = infobox_height+'px';
          code = '';
          code += "<div style='width:"+(infobox_width-20)+"px; height:"+(infobox_height-170)+"px; padding:10px; background-color:#ffffff;'>";
            code += "<div style='font-family:verdana; font-size:12px; font-weight:bold; color:#333333; text-align:left; border-bottom:1px solid #999999; background-color:#ffffff;'>";
              code += content[1];
            code += "</div>";
            code += "<div style='width:"+(infobox_width-20)+"px; height:152px; background-color:#ffffff;'>";
              code += "<div style='float:left; width:"+(infobox_width-270)+"px; background-color:#ffffff;'>";
                code += "<img src='"+content[0]+"' />";
              code += "</div>";
              code += "<div style='float:right; width:"+(infobox_width-250)+"px; background-color:#ffffff; padding-top:20px;>";
                code += "<div style=''>";
                  code += "<div style='font-family:verdana; font-size:12px; font-weight:bold; color:#333333;'>";
                    code += "Technische Daten";
                  code += "</div>";
                  code += "<div style='font-family:verdana; font-size:12px; font-weight:normal; color:#333333; line-height:12px;'>";
                  techdata = content[3];
                  infos = techdata.split(';');
                  for (k=0;k<infos.length-1;k++) {
                    info = infos[k].split('|');
                    if (info[2]=='NULL') {
                      info[2] = '';
                    }
                    code += "<div style='padding-bottom:3px;'><img src='"+info[3]+"box_img/pfeil_links.jpg' />"+" "+info[1]+" "+info[0]+" "+info[2]+"</div>";
                  }
                  code += "</div>";
                  code += "<div style='text-align:left; font-family:verdana; font-size:12px; font-weight:bold; color:#333333; margin-top:10px;'>";
                    code += "nur <span style='font-size:24px; font-weight:bold; color:#333333;'>"+(content[6])+" €</span>";
                  code += "</div>";
                code += "</div>";
              code += "</div>";
            code += "</div>";
            code += "<div style='width:"+(infobox_width-20)+"px; height:1px; margin:10px; margin-bottom:0px; margin-top:0px; border-bottom:1px solid #999999; background-color:#ffffff; clear:both;'>";
            code += "</div>";
            code += "<div style=''>";
              code += "<div style='width:"+(infobox_width-40)+"px; height:50px; background-color:#ffffff; padding:10px;'>";
                code += "<span style='font-family:verdana; font-size:12px; font-weight:bold; color:#333333;'>";
                  code += "Beschreibung";
                code += "</span>";
                code += "<div style='font-family:verdana; font-size:12px; font-weight:normal; color:#333333; line-height:12px;'>";
                  code += content[2];
                code += "</div>";
              code += "</div>";
            code += "</div>";
          code += "</div>";
          document.getElementById('infobox').style.display = 'block';
          document.getElementById('infobox_shadow').style.display = 'block';
          document.getElementById('infobox').innerHTML = code;
          activate_infobox(content[4]);
          infobox_isactive = true;
        break;
        case 'upsells':
          document.getElementById('infobox').style.width = infobox_width+'px';
          document.getElementById('infobox').style.height = infobox_height+'px';
          code = '';
          code += "<div style='width:"+(infobox_width-20)+"px; height:"+(infobox_height-170)+"px; padding:10px; background-color:#ffffff;'>";
            code += "<div style='font-family:verdana; font-size:12px; font-weight:bold; color:#333333; text-align:left; border-bottom:1px solid #999999; background-color:#ffffff;'>";
              code += content[1];
            code += "</div>";
            code += "<div style='width:"+(infobox_width-20)+"px; height:152px; background-color:#ffffff;'>";
              code += "<div style='float:left; width:"+(infobox_width-270)+"px; background-color:#ffffff;'>";
                code += "<img src='"+content[0]+"' />";
              code += "</div>";
              code += "<div style='float:right; width:"+(infobox_width-250)+"px; background-color:#ffffff; padding-top:20px;>";
                code += "<div style=''>";
                  code += "<div style='font-family:verdana; font-size:12px; font-weight:bold; color:#333333;'>";
                    code += "Technische Daten";
                  code += "</div>";
                  code += "<div style='font-family:verdana; font-size:12px; font-weight:normal; color:#333333; line-height:12px;'>";
                  techdata = content[3];
                  infos = techdata.split(';');
                  for (k=0;k<infos.length-1;k++) {
                    info = infos[k].split('|');
                    if (info[2]=='NULL') {
                      info[2] = '';
                    }
                    code += "<div style='padding-bottom:3px;'><img src='"+info[3]+"box_img/pfeil_links.jpg' />"+" "+info[1]+" "+info[0]+" "+info[2]+"</div>";
                  }
                  code += "</div>";
                  code += "<div style='text-align:left; font-family:verdana; font-size:12px; font-weight:bold; color:#333333; margin-top:10px;'>";
                    code += "nur <span style='font-size:24px; font-weight:bold; color:#333333;'>"+(content[6])+" €</span>";
                  code += "</div>";
                code += "</div>";
              code += "</div>";
            code += "</div>";
            code += "<div style='width:"+(infobox_width-20)+"px; height:1px; margin:10px; margin-bottom:0px; margin-top:0px; border-bottom:1px solid #999999; background-color:#ffffff; clear:both;'>";
            code += "</div>";
            code += "<div style=''>";
              code += "<div style='width:"+(infobox_width-40)+"px; height:50px; background-color:#ffffff; padding:10px;'>";
                code += "<span style='font-family:verdana; font-size:12px; font-weight:bold; color:#333333;'>";
                  code += "Beschreibung";
                code += "</span>";
                code += "<div style='font-family:verdana; font-size:12px; font-weight:normal; color:#333333; line-height:12px;'>";
                  code += content[2];
                code += "</div>";
              code += "</div>";
            code += "</div>";
          code += "</div>";
          document.getElementById('infobox').style.display = 'block';
          document.getElementById('infobox_shadow').style.display = 'block';
          document.getElementById('infobox').innerHTML = code;
          activate_infobox(content[4]);
          infobox_isactive = true;
        break;
      }
    }
  }
  
  function hide_infobox() {
    document.getElementById('infobox').style.display = 'none';
    document.getElementById('infobox_shadow').style.display = 'none';
    infobox_isactive = false;
    //deactivate_infobox();
  }
  
  function activate_infobox(mode) {
    infobox_mode = mode;
    if(document.layers) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove =	dpl_mouse_pos;
  }
  
  function deactivate_infobox() {
    document.onmousemove = null;
  }
  
  function dpl_mouse_pos(e) {
    var xPos    =  e? e.pageX : window.event.x;
    var yPos    =  e? e.pageY : window.event.y;
    if (document.all && !document.captureEvents) {
            //xPos    += document[docEl].scrollLeft;
            //yPos    += document[docEl].scrollTop;
            //infobox_offsetLeft = document[docEl].scrollLeft;
    }
    switch (infobox_mode) {
      case 'bundleoptions':
        document.getElementById('infobox').style.left = (xPos-(infobox_width/2))+'px'; //(xPos-(infobox_width/2))+'px';
        document.getElementById('infobox').style.top = (yPos-(infobox_height+20))+'px';
        document.getElementById('infobox_shadow').style.left = (xPos-(infobox_width/2)+4)+'px';
        document.getElementById('infobox_shadow').style.top = (yPos-(infobox_height+20)+4)+'px';
      break;
      case 'upsells':
        document.getElementById('infobox').style.left = (xPos-(infobox_width/2))+'px';
        document.getElementById('infobox').style.top = (yPos-(infobox_height+20))+'px';
        document.getElementById('infobox_shadow').style.left = (xPos-(infobox_width/2)+4)+'px';
        document.getElementById('infobox_shadow').style.top = (yPos-(infobox_height+20)+4)+'px';
      break;
    }
    // for the dino pass event
    if (document.layers) routeEvent(e);
  }