// -----------------------------------------------------------------------------
// Function    : createPlaceholderListTableHTML
// Description :
// Usage       : document.write( createPlaceholderListTableHTML(placeholderList) );
// -----------------------------------------------------------------------------

function createPlaceholderListTableHTML(placeholderList) {

  var randomInstanceId = Math.round( Math.random() * 1000000 );

  var html = '';
  html += '<table id="templatePlaceholderListTable:' +randomInstanceId+ '" border=1 cellspacing=0 cellpadding=0 width=800 style="border: 1px solid black; font-family: arial; font-size: 12px">\n';
  html += '  <tr style="background-color: #CCCCCC;">\n';
  html += '   <td style="padding: 5px" width=20%><b>Placeholder Name</b></td>\n';
  html += '   <td style="padding: 5px" width=80%><b>Placeholder Value</b></td>\n';
  html += '  </tr>\n';
  html += createPlaceholderListRowHTML(placeholderList, randomInstanceId);
  html += '</table>\n';

  return html;
}

// -----------------------------------------------------------------------------
// Function    :
// Description :
// Usage       : var rowHTML = createPlaceholderListRowHTML();
// -----------------------------------------------------------------------------

function createPlaceholderListRowHTML(placeholderList, instanceId) {

  var html = '';
  var html2 = '';
  var lastPrefix = '';
  for (var placeholderName in placeholderList) {
    var placeholderValue = placeholderList[placeholderName];

    // show expandable cell for prefix
    var prefix = _getPlaceholderPrefix(placeholderName);
    if (prefix && prefix != lastPrefix) {

      html2 += '<tr id="showPrefix.' + prefix + ':' +instanceId+ '" style="background-color: #EEEEEE; font-weight: bold;">\n';
      html2 += ' <td align=center>&#36;' + prefix + '.<i>placeholders</i>&#36;</td>\n';
      html2 += ' <td height=24>&nbsp;<a href="javascript:showPrefixedPlaceholders(\'' + prefix + '\', \'' + instanceId + '\')">show ' + prefix + ' placeholders &gt;&gt;</a></td>\n';
      html2 += '</tr>\n';
      html2 += '<tr id="hidePrefix.' + prefix + ':' +instanceId+ '" style="background-color: #EEEEEE; font-weight: bold; display: none">\n';
      html2 += ' <td align=center>&#36;' + prefix + '.<i>placeholders</i>&#36;</td>\n';
      html2 += ' <td height=24>&nbsp;<a href="javascript:showPrefixedPlaceholders(\'\', \'' + instanceId + '\')">&lt;&lt; hide ' + prefix + ' placeholders</a></td>\n';
      html2 += '</tr>\n';
      lastPrefix = prefix;
    }

    // show placeholder row
    var row = '';
    row +=  '<tr id="placeholder.' +placeholderName+ ':' +instanceId+ '"';
    if (prefix) { row += ' style="display: none"'; }
    row +=  '>\n';
    row +=  ' <td align=center>&#36;' + placeholderName + '&#36;</td>\n';
    row +=  ' <td><textarea name="placeholderValue.' +placeholderName+ '" rows=1 onfocus="this.rows=12" onblur="this.rows=1" style="width: 99%">' +placeholderValue+ '</textarea></td>\n';
    row +=  '</tr>\n';

    // sort prefixed placeholders to bottom
    if (prefix) { html2 += row; }
    else        { html  += row; }
  }

  html += html2;
  return html;

}

// -----------------------------------------------------------------------------
// Function    : _getPlaceholderPrefix
// Description :
// Usage       : var prefix = _getPlaceholderPrefix(placeholderName);
// -----------------------------------------------------------------------------

function _getPlaceholderPrefix(placeholderName) {
  var prefix = '';
  var prefixRegexp = /^(\w+)\./;
  var matchArray   = prefixRegexp.exec(placeholderName);
  if (matchArray) { prefix = matchArray[1];  }
  return prefix;
}

// -----------------------------------------------------------------------------
// Function    : showPrefixedPlaceholders
// Description :
// Usage       : showPrefixedPlaceholders(displayPrefix)
// -----------------------------------------------------------------------------

function showPrefixedPlaceholders(displayPrefix, instanceId) {

  // loop over child nodes (tr rows)
  var tableEl     = document.getElementById('templatePlaceholderListTable:' + instanceId);
  var parentNodes = [tableEl];

  for (var parentIndex=0; parentIndex < parentNodes.length; parentIndex++) {
    var thisParent = parentNodes[parentIndex];

    for (var childIndex=0; childIndex<thisParent.childNodes.length; childIndex++) {
      var childNode = thisParent.childNodes[childIndex];
      var nodeName = childNode.nodeName.toLowerCase();
      var nodeId   = childNode.id;

      if (nodeName == 'tbody') { parentNodes.push(childNode); }
      if (nodeName != 'tr')  { continue; } // skip all but tr nodes

      // set prefixless and selectedPrefix rows visible, hide all others
      var placeholderName = childNode.id.replace(/^placeholder\./, ''); // placeholder. prefix avoids collisions with other elements on page
      if (placeholderName) {
        var placeholderPrefix = _getPlaceholderPrefix(placeholderName);
        if      (placeholderPrefix == '')            { childNode.style.display = ''; } // if no prefix
        else if (placeholderPrefix == displayPrefix) { childNode.style.display = ''; } // or displayed prefix
        else if (placeholderPrefix == 'showPrefix')  { childNode.style.display = ''; } // or expand set link
        else                                         { childNode.style.display = 'none'; }
      }
    }
  }

  // hide "show prefix" row and show "hide prefix" row
  if (displayPrefix != '') {
    document.getElementById('showPrefix.' + displayPrefix + ':' + instanceId).style.display = 'none'
    document.getElementById('hidePrefix.' + displayPrefix + ':' + instanceId).style.display = '';
  }

}