
  // JBMENU 01 -----------------------------------------------------------------------------------------------
  //
  // Last modified:   07 - 12 - 2007
  //
  //
  // Eenvoudig menu, horizontaal of vertikaal zonder submenu
  // knopachtergrond dmv kleuren of afbeeldingen: normaal, over, down
  // 
  // Functies:
  //
  // jbmenu(naam, horizontaal, x, y)  -- maakt menu; horizontaal: false = vertikaal;  x,y: startpositie
  //
  // jbmenu.addItem(tekst, functie)   -- voegt een nieuw menu-item toe.
  //
  // jbmenu.setbgColor(normaal, over, down) 
  // jbmenu.setbgImg(pad, bgImgNormaal, bgImgOver, bgImgDown) 
  // jbmenu.setFont(font-family, font-size, colorNormaal, colorSelected, text-decoration, text-align) 
  // jbmenu.setfont(font-size, colorNormaal, text-decoration, text-align) 
  // jbmenu.setSize(width, height, space)  space = ruimte tussen twee menu-items
  //
  // jbmenu.writeMenu()  -- Als laatste aanroepen, schrijft het menu
  //
  // ---------------------------------------------------------------------------------------------------------


    function jbmenu(naam, horizon, x, y) {
      // richting van het menu (horizon: false = vertikaal)
      // x: startpostitie vanaf links
      // y: startpositie vanaf boven
      // hieronder Alle stijl variabelen van het object, kunnen met functies en ook afzonderlijk gezet worden:
      this.naam = naam;
      this.horizon = horizon;
      this.bgimg = new Array;
      this.bgcolor = new Array;
      this.bgcolor["norm"] = "white";
      this.bgcolor["over"] = "grey";
      this.bgcolor["down"] = "brown";
      this.border = new Array;
      this.border["size"] = 3;
      this.border["color"] = "black";
      this.tekst = new Array;
      this.tekst["font-family"] = "Verdana, Geneva, Arial, Helvetica, sans-serif";
      this.tekst["font-size"] = 14;
      this.tekst["font-color-norm"] = "#FFFFFF";
      this.tekst["font-color-sel"] = "#FFFF66";
      this.tekst["font-decor"] = "bold";
      this.tekst["align"] = "center";
      this.size = new Array;
      this.size["width"] = 150;
      this.size["height"] = 35;
      this.size["space"] = 5;
      this.pos = new Array;
      this.pos["x"] = x;
      this.pos["y"] = y;
      this.items = new Array;
      this.divTxt = "";
    }

    function jbmenuitem(tekst, functie) {
      this.tekst = tekst;
      this.functie = functie;
    }

    jbmenu.prototype.addItem = function(tekst, functie) {
      this.items[this.items.length] = new jbmenuitem(tekst, functie);
    }

    jbmenu.prototype.setbgColor =function(norm, over, down) {
      this.bgcolor["norm"] = norm;
      this.bgcolor["over"] = over;
      this.bgcolor["down"] = down;
    }

    jbmenu.prototype.setFont =function(family, size, colornorm, colorsel, decor, align) {
      this.tekst["font-family"] = family;
      this.tekst["font-size"] = size;
      this.tekst["font-color-norm"] = colornorm;
      this.tekst["font-color-sel"] = colorsel;
      this.tekst["font-decor"] = decor;
      this.tekst["align"] = align;
    }

    jbmenu.prototype.setfont =function(size, color, decor, align) {
      this.tekst["font-size"] = size;
      this.tekst["font-color-norm"] = color;
      this.tekst["font-decor"] = decor;
      this.tekst["align"] = align;
    }

    jbmenu.prototype.setSize =function(width, height, space) {
      this.size["width"] = width;
      this.size["height"] = height;
      this.size["space"] = space;
    }

    jbmenu.prototype.setbgImg =function(pad, bgImgNorm, bgImgOver, bgImgDown) {
      this.bgimg["norm"] = 'url(' + pad+bgImgNorm + ')';
      this.bgimg["over"] = 'url(' + pad+bgImgOver + ')';
      this.bgimg["down"] = 'url(' + pad+bgImgDown + ')';
      var preloadimgs = new Array;
      preloadimgs[0] = pad+bgImgNorm;
      preloadimgs[1] = pad+bgImgOver;
      preloadimgs[2] = pad+bgImgDown;
      preload(preloadimgs);
    }

    preload = function(images) {
      // images = array containing filenames of images.
      var i = 0;
      imageObj = new Image();
      for(i=0; i<images.length; i++) {imageObj.src=images[i];}
    } 

    jbmenu.prototype.writeMenu = function() {
      var i;
      var starttabel = '<table>';
      var startcel = '<tr><td ';
      var eindcel = '</td></tr>';
      var eindtabel = '</table>';
      var spatie = '<tr><td style="height: '+ this.size["space"] + 'px; "></td></tr>';
      var arg, jb = "";
      var divnaam;
      if (this.horizon) {
        starttabel = '<table><tr>';
        startcel = '<td ';
        eindcel = '</td>';
        eindtabel = '</tr></table>'; 
        spatie = '<td style="width: '+ this.size["space"] + 'px; "></td>';
      }
      // opmaak
      startcel = startcel + 'style="cursor: pointer; text-align: ' + this.tekst["align"] + '; vertical-align: middle;';
      startcel = startcel + 'font-family: ' + this.tekst["font-family"] + '; ';
      startcel = startcel + 'color: ' + this.tekst["font-color-norm"] + '; ' + 'font-weight: ' + this.tekst["font-decor"];
      startcel = startcel + '; ' + 'font-size: ' + this.tekst["font-size"] + 'px; ';
      var tdh = (this.border["size"] * 2) + this.size["height"];
      var tdb = (this.border["size"] * 2) + this.size["width"];
      startcel = startcel + 'height :' + tdh + 'px; '
        + 'width :' + tdb + 'px; '
        + 'border-color :' + this.border["color"] + '; '
        + 'border: '+ this.border["size"]+'px solid; ';
      if (this.bgimg["norm"]) {startcel = startcel + 'background-image: '+this.bgimg["norm"]+'; ';}
      startcel = startcel + 'background-color: '+this.bgcolor["norm"]+';" ';
      // events
      var bgcs = "this.style.backgroundColor='";
      var bgcie = "'; ";
      var bgis = "this.style.backgroundImage='";
      startcel = startcel + 'onMouseOver= "'+bgcs+this.bgcolor["over"]+bgcie;
      if (this.bgimg["norm"]) {startcel = startcel + bgis + this.bgimg["over"] + bgcie;}
      startcel = startcel + '" onMouseOut= "'+bgcs+this.bgcolor["norm"]+bgcie;
      if (this.bgimg["norm"]) {startcel = startcel + bgis + this.bgimg["norm"] + bgcie;}
      startcel = startcel + '" onMouseDown= "'+bgcs+this.bgcolor["down"]+bgcie;
      if (this.bgimg["norm"]) {startcel = startcel + bgis + this.bgimg["down"] + bgcie;}
      startcel = startcel + '" onMouseUp= "'+bgcs+this.bgcolor["over"]+bgcie;
      if (this.bgimg["norm"]) {startcel = startcel + bgis + this.bgimg["over"] + bgcie;}
      startcel = startcel + '" ';
      //arg = 'id="'+this.naam+'" style="position: absolute; left:'+this.pos["x"]+'px; top:'+this.pos["y"]+'px;" '
      //jb = '<div '+arg+'>'+starttabel;
      jb = starttabel;
      for (i=0; i<this.items.length; i++) {
        jb = jb + startcel + 'onClick="' + this.items[i].functie+'">' + this.items[i].tekst + eindcel;
        if (this.items.length > 1){
          var l=this.items.length-1;
          if (i<l){jb = jb + spatie;}
        }
      }
      jb = jb + eindtabel; // + '</div>';
      //document.write(jb);
      this.divTxt = jb;
    }

