learningMethod.prototype.writeIntro = function() {
    var frameWidth  = parent.g_currScrWidth;
    var frameHeight = parent.g_currScrHeight;

    var str = '';

    // BACKGROUND
    var bgX      = 0;
    var bgY      = 0;
    var bgWidth  = frameWidth;
    var bgHeight = frameHeight;
    var bgZIndex = 1;
    var CSSClass = 'introBGImage';
    var content  = '<IMG src="' + g_rootLMSPix + 'intro_bgImage.jpg" width="' + frameWidth + '"  height="' + frameHeight + '" border="0">';
    str += createDiv('Title', bgX, bgY, bgWidth, bgHeight, bgZIndex, CSSClass, content);

    // BRAND LOGO
    str += writeBrandLogo(frameWidth, frameHeight);

    // TITLEBAR
    var titleX      = g_startX;
    var titleY      = 3;
    var titleWidth  = frameWidth;
    var titleHeight = 38;
    var titleZIndex = 2;
    var CSSClass    = 'groupTitle';
    var content     = '<SPAN class="introTitle"><NOBR>' + C_INTRO_CHAPTER + '</NOBR></SPAN>';
    str += createDiv('Title', titleX, titleY, titleWidth, titleHeight, titleZIndex, CSSClass, content);

    // INTRO WINDOW
    var wndWidth  = 309;
    var wndHeight = 222;
    var wndZIndex = 2;
    var CSSClass  = 'introWindow';
    var content   = '&nbsp;';
    str += this.writeIntroWindow(frameWidth, frameHeight, wndWidth, wndHeight, wndZIndex, CSSClass, content);

    // WELCOME TITLE
    var welcomeX      = g_wndX + 10;
    var welcomeY      = g_wndY + 10;
    var welcomeWidth  = 0;
    var welcomeHeight = 0;
    var welcomeZIndex = 3;
    var CSSClass      = 'introWelcome';
    var content       = '<NOBR>Welkom bij ' + this.label + ' van <BR>' +
                        this.name + ' ' + this.streamYear + '</NOBR>';
    str += createDiv('welcomeTitle', welcomeX, welcomeY, welcomeWidth, welcomeHeight, welcomeZIndex, CSSClass, content);

    // INTRO MESSAGE
    var introMsgX   = g_wndX + 10;
    var introMsgY   = g_wndY + 55;
    var introWidth  = 0;
    var introHeight = 0;
    var introZIndex = 3;
    var CSSClass    = 'introMessage';
    
    // REFERENTIES
    var refs = '';

    if(this.teacherRef)
      refs += '<BR><BR>' +
              '<A href="javascript:void(0);" onclick="parent.openDigiRef(' + 7 + ');return false;">' +
              'Voor de docent</A>\r\n';

    if(this.studentRef)
      refs += '<BR>' +
              '<A href="javascript:void(0);" onclick="parent.openDigiRef(' + 8 + ');return false;">' +
              'Voor de leerling</A>\r\n';

    // CONTENT
    var content = '<TABLE border="0" cellpadding="0" cellspacing="0" width="' + (wndWidth - 20) + '">' +
                    '<TR><TD class="introMessage">' + this.introText + '</TD></TR>' +
                  '</TABLE>';

    str += createDiv('welcomeTitle', introMsgX, introMsgY, introWidth, introHeight, introZIndex, CSSClass, content);

    return str;
  }


  function makeGroupEntry(gr, grCounter) {
    var grGUID   = (gr) ? gr.groupGUID : '';
    var strTitle = (gr) ? gr.title     : C_INTRO_CHAPTER;
/*
    var grGUID       = (gr) ? gr.groupGUID : '';

    var strMenuTitle = (gr && gr.menuTitle) ? gr.menuTitle : '';
    var strTitle     = (gr) ? (strMenuTitle + ' ' + gr.title) : C_INTRO_CHAPTER;
*/

    var strOnclick = 'parent.go2Group(' + jsEsc(grGUID) + ');' +
                     'parent.changeMenuState(' + [jsEsc(grCounter), 1] + ');';

    var strOnMouseOver = 'parent.changeMenuState(' + [jsEsc(grCounter), 1] + ');';

    var strOnMouseOut  = 'parent.changeMenuState(' + [jsEsc('', 0)] + ');';

    var str = '';
    str += '<TR>' +
             '<TD id="menuContentLeft' + grCounter + '"' +
                ' onmouseover="' + strOnMouseOver  + '"' +
                '  onmouseout="' + strOnMouseOut   + '"' +
                '     onclick="' + strOnclick      + '"' +
                ' valign="top" class="menuContentLeft">' +
               strTitle +
             '</TD>' +
             '<TD id="menuContentRight' + grCounter + '" width="10"' +
                ' class="menuContentRight" valign="middle" nowrap>' +
               spacer(1, 1) +
             '</TD>' +
           '</TR>';
    return str;
  }


  learningMethod.prototype.writeGroupsOverview = function() {
    var totalGroups  = this.groups.length;

    var str = '';
    str += '<TABLE border="0" cellpadding="0" cellspacing="0"' +
                 ' width="' + g_strGroupsMenuWidth + '" height="100%" class="menu">' +
             '<TR>' +
               g_spaceRow +
               '<TD class="menuTitle" colspan="2" nowrap height="15">' +
                 spacer(g_arrowSpacer1, 1) +
                 '<IMG src="' + g_rootLMSPix + 'arrow_down.gif" border="0">' +
                 spacer(g_arrowSpacer2, 1) + 
                 'hoofdstuk' +
               '</TD>' +
             '</TR>' +
             
             makeGroupEntry('', 'Intro');

    var totalCounter = 0;
    for(var i = 0; i < totalGroups; i++) {
      var gr = this.groups[i];
      if(gr.groupType == '0') {
        str += makeGroupEntry(gr, totalCounter);
        totalCounter++;
      }
    }

    var extraItems = '';
    for(var i = 0; i < totalGroups; i++) {
      var gr = this.groups[i];
      if(gr.groupType == '1') {
        extraItems += makeGroupEntry(gr, totalCounter);
        totalCounter++;
      }
    }
    if(extraItems) {
      str += '<TR>' +
               '<TD class="menuTitle" colspan="2" nowrap height="15">' +
                 spacer(g_arrowSpacer1, 1) +
                 '<IMG src="' + g_rootLMSPix + 'arrow_down.gif" border="0">' +
                 spacer(g_arrowSpacer2, 1) + 
                 'onderwerp' +
               '</TD>' +
             '</TR>' +
             extraItems;
    }

    str +=   '<TR>' +
               '<TD class="menuContentBottomBorder" colspan="3" height="100%">' +
                 spacer(1, 1) +
               '</TD>' +
             '</TR>' +
           '</TABLE>';
    return str;
  }


  learningMethod.prototype.storeReferenceLinks = function(refWidth) {
    var str = '';

    if(this.references.length == 0) return str;

    str += '<TABLE border="0" cellpadding="0" cellspacing="0"' +
                 ' class="referenties" width="' + refWidth + '">';
    for(var i = 1; i <= this.references.length; i++) {
      var ref = this.references[i - 1];
      
      var altText        = ref.altText
      var escapedAltText = jsEsc(altText, false);
      
      var strMouseOver = 'this.className=\'referentieItemOver\';' +
                         'this.innerHTML=\'<SPAN width=20><IMG src=../_include/_pix/leeg.gif width=6 height=1>><IMG src=../_include/_pix/leeg.gif width=7 height=1></SPAN>' + escapedAltText + '\'';
      
      var strMouseOut  = 'this.className=\'referentieItem\';' +
                         'this.innerHTML=\'<SPAN width=20><IMG src=../_include/_pix/leeg.gif width=20 height=1></SPAN>' + escapedAltText + '\'';

      var strOnClick   = 'parent.parent.dumpReferences();' +
                         'document.getElementById(\'extraInfo\').style.visibility=\'hidden\';' +
                         'parent.openDigiRef(' + i + ');';

      str += '<TR>' +
               '<TD class="referentieItem"' +
                  ' onmouseover="' + strMouseOver + '"' +
                  '  onmouseout="' + strMouseOut  + '"' +
                  '     onclick="' + strOnClick   + '" nowrap>' +
                 '<SPAN width="20">' + spacer(20, 1) + '</SPAN>' +
                 altText +
               '</TD>' +
             '</TR>';
    }
    str += '</TABLE>';
    return str;
  }


  var g_luHeight = 19;


  group.prototype.writeGroupIndexTable = function() {
    var frameWidth  = g_currScrWidth;
    var frameHeight = g_currScrHeight;

    var str = '';

    // INFOBOX
    if(this.infoBox != '') {
      var infoBoxWidth  = 22;
      var infoBoxHeight = 22;
      var infoBoxX      = frameWidth - infoBoxWidth;
      var infoBoxY      = 0;
      var infoBoxZIndex = 5;
      var CSSClass      = '';
      var content       = '';

      var strMouseOver = 'this.style.cursor=\'hand\';' +
                         'this.style.cursor=\'pointer\';' +
                         'this.src=\'' + g_rootLMSPix + 'btn_info_over.gif\'';

      content += '<IMG src="' + g_rootLMSPix + 'btn_info_up.gif" width="' + infoBoxWidth + '" height="' + infoBoxHeight + '"' +
                     ' border="0" name="infobutton"' +
                     '     onclick="parent.writeInfoBox();" ' +
                     '  onMouseOut="this.src=\'' + g_rootLMSPix + 'btn_info_up.gif\';"' +
                     ' onMouseOver="' + strMouseOver + '">';
      str += createDiv('Infobox', infoBoxX, infoBoxY, infoBoxWidth, infoBoxHeight, infoBoxZIndex, CSSClass, content);
    }

    // BIGNUMBER
    if(g_showBigNumbers) {
      var groupNo         = this.sequence;
      var bignumberWidth  = 140;
      var bignumberHeight = 97;
      var bignumberX      = frameWidth  - bignumberWidth  - 10;
      var bignumberY      = frameHeight - bignumberHeight - 10;
      var bignumberZIndex = 1;
      var CSSClass        = '';
      var content         = '<IMG src="' + g_rootLMSPix + 'bignumber_' + groupNo + '.gif" width="140" height="97">';
      str += createDiv('Bignumber', bignumberX, bignumberY, bignumberWidth, bignumberHeight, bignumberZIndex, CSSClass, content);
    }

    // TITLEBAR
    var titleX      = g_startX;
    var titleY      = 3;
    var titleWidth  = frameWidth;
    var titleHeight = 38;
    var titleZIndex = 1;
    var CSSClass    = 'groupTitle';
    var content     = '<NOBR>' + this.title + '</NOBR>';
    str += createDiv('Title', titleX, titleY, titleWidth, titleHeight, titleZIndex, CSSClass, content);

    // DESCRIPTION - LEGENDA
    var legendaX      = g_startX + 1;
    var legendaY      = frameHeight - 35;
    var legendaW      = 310;
    var legendaH      = 16;
    var legendaZIndex = 5;
    var CSSClass      = '';
    var content = '<TABLE class="description" border="0" cellpadding="0" cellspacing="0" width="100%">' +
                    '<TR>' +
                      '<TD>' + 
                    '<TABLE border="0" cellpadding="0" cellspacing="0">' +
                      '<TR>' +
                        '<TD class="descriptionContent" nowrap>' + spacer(5, 1) + '<IMG src="' + g_rootLMSPix + 'lu_notdone.gif"></TD>' +
                        '<TD class="descriptionContent" nowrap>nog doen' + spacer(30, 1) + '</TD>' +
                        '<TD class="descriptionContent" nowrap><IMG src="' + g_rootLMSPix + 'lu_inprogress.gif"></TD>' +
                        '<TD class="descriptionContent" nowrap>mee bezig' + spacer(30, 1) + '</TD>' +
                        '<TD class="descriptionContent" nowrap><IMG src="' + g_rootLMSPix + 'lu_done.gif"></TD>' +
                        '<TD class="descriptionContent" nowrap>gedaan' + spacer(5, 1) + '</TD>' +
                      '</TR>' +
                    '</TABLE>' +
                      '</TD>' +
                    '</TR>' +
                  '</TABLE>';
    str += createDiv('description', legendaX, legendaY, legendaW, legendaH, legendaZIndex, CSSClass, content);

//////////////////////////////////////////////
// OPBOUWEN VAN HET LEARNING UNIT OVERZICHT //
//////////////////////////////////////////////
    var currSubGroup = '';
    var sg           = '';

    var descriptionSpace = 44;

    var xCoor = g_startX + 1;
    var yCoor = titleHeight;

    var colWidth  = 225;
    var colHeight = frameHeight - (titleHeight + descriptionSpace);

    var currColHeight = 0;
    var colCounter    = 1;

    for(var luTeller = 0; luTeller < this.learningUnits.length; luTeller++) {
      var currLu = this.learningUnits[luTeller];

      // DISPLAYEN NEW SUBGROUP
      currColHeight = yCoor;
      if(currColHeight > colHeight && colCounter == 1) {
        xCoor = (2 * g_startX) + colWidth - 30;
        yCoor = titleHeight;
        colCounter = 2;
      }
      sg += currLu.writeSubGroupHeader(xCoor, yCoor, colWidth);

      var nrOfLUInSubGroup = this.countNrOfLUInSubGroup(luTeller, currLu);

      // DISPLAY LEARNING UNITS
      for(var i = luTeller; i < luTeller + nrOfLUInSubGroup; i++) {
        var currLu = this.learningUnits[i];
        yCoor += g_luHeight;
        if(currColHeight > colHeight && colCounter == 1) {
          xCoor = (2 * g_startX) + colWidth - 30;
          yCoor = titleHeight;
          colCounter = 2;
        }
        currColHeight = yCoor;
        sg += currLu.writeLearningUnitHeader(xCoor, yCoor, colWidth);
      }
      yCoor += (g_subgroupVerticalSpacer + g_luHeight);

      currSubGroup = currLu.subGroupTitle;
      str += sg;
      sg   = '';
      luTeller += nrOfLUInSubGroup - 1;
    }
    str += sg;

    return str;
  }


  group.prototype.countNrOfLUInSubGroup = function(luTeller, currLu) {
    for(var i = luTeller; i < this.learningUnits.length; i++) {
      if(currLu.subGroupTitle != this.learningUnits[i].subGroupTitle) break;
    }
    var nrOfLUInSubGroup = i - luTeller;
    return nrOfLUInSubGroup;
  }


  learningUnit.prototype.writeSubGroupHeader = function(xCoor, yCoor, colWidth) {
    var strPara = (this.subGroupParagraphTitle) ? this.subGroupParagraphTitle + ' ' : '';
    var str = '';
    str += '<DIV style="position:absolute; left:' + xCoor + 'px; top:' + yCoor + 'px; z-index:1">' +
             '<TABLE border="0" cellspacing="0" cellpadding="0"' +
                   ' width="' + (colWidth + 2) + '" height="' + g_luHeight + '">' +
               '<TR>' +
                 '<TD class="subgroup" nowrap>' +
                   spacer(g_subgroupSpacer, 1) +
                   strPara + this.subGroupTitle +
                 '</TD>' +
               '</TR>' +
             '</TABLE>' +
           '</DIV>';
    return str;
  }


  learningUnit.prototype.writeLearningUnitHeader = function(xCoor, yCoor, colWidth) {
    var statuspic    = '';
    switch(this.status) {
      case C_LU_NOT_RUNNING:         { statuspic = 'lu_notdone.gif';    break; }
      case C_LU_FINISHED_INCOMPLETE: { statuspic = 'lu_inprogress.gif'; break; }
      case C_LU_FINISHED_COMPLETE:   { statuspic = 'lu_done.gif';       break; }
      default:                       { statuspic = 'lu_notdone.gif';    break; }
    }

    var strMouseOver = 'document.getElementById(\'tagLeft'  + this.luGUID + '\').innerHTML=\'>\';' +
                       'document.getElementById(\'tagLeft'  + this.luGUID + '\').id=\'tagLeftOver\';' +
                       'document.getElementById(\'tagRight' + this.luGUID + '\').id=\'tagRightOver\';' +
                       'this.id=\'learnunitMouseOver\'';

    var strMouseOut  = 'document.getElementById(\'tagRightOver\').id=\'tagRight' + this.luGUID + '\';' +
                       'document.getElementById(\'tagLeftOver\').id=\'tagLeft'   + this.luGUID + '\';' +
                       'document.getElementById(\'tagLeft' + this.luGUID + '\').innerHTML=\'\';' +
                       'this.id=\'\'';

    var strOnClick   = 'parent.go2LearningUnit(' + jsEsc(this.luGUID) + ');';

    var str = '';
    str += '<DIV style="position:absolute; left:' + xCoor + 'px; top:' + yCoor + 'px; z-index:1">' +

             '<TABLE border="0" cellspacing="0" cellpadding="0"' +
                   ' width="' + (colWidth + 2) + '" height="' + g_luHeight + '">' +
               '<TR>' +
                 '<TD class="learnunitLeft" width="' + g_learnunitLeftWidth + '" height="20" align="right">' +
                   '<SPAN id="tagLeft' + this.luGUID + '" style="width:' + g_learnunitLeftWidth + 'px;height:20px;"></SPAN>' +
                 '</TD>' +
                 '<TD class="learnunitCenter" width="' + (colWidth - 27) + '"' +
                    ' onmouseover="' + strMouseOver + '"' +
                    '  onmouseout="' + strMouseOut  + '"' +
                    '     onclick="' + strOnClick   + '">' +
                   '<NOBR>' +
                     spacer(g_learnunitCenterSpacer, 1) +
                     this.title +
                   '</NOBR>' +
                 '</TD>' +
                 '<TD class="learnunitRight" id="tagRight' + this.luGUID + '" width="18" nowrap>' +
                   '<IMG src="' + g_rootLMSPix + statuspic + '" border="0">' +
                 '</TD>' +
               '</TR>' +
             '</TABLE>' +

           '</DIV>';
    return str;
  }