//
// Helper function.  Writes arbitrary HTML into a layer.
//
function magicHTML( theHTML, theLayer )
{
  if (document.all)
  {
    document.all[theLayer].innerHTML = theHTML;
    document.all[theLayer].style.visibility = "visible";
  } else if (document.layers)
  {
    document[theLayer].document.write( theHTML );
    document[theLayer].document.close();
    document[theLayer].document.visibility="visible";
  } else if (document.getElementById)
  {
    M = document.getElementById(theLayer);
    R = document.createRange();
    R.setStartBefore(M);
    F = R.createContextualFragment( theHTML );

    while (M.hasChildNodes())
    {
      M.removeChild(M.lastChild);
    }
    M.appendChild(F);
    M.style.visibility="visible";
  }
}

//
// Constructor.
//   item     = Array of picture/caption pairs.
//   n        = Internal pointer for currently displayed picture/caption.
//   piclayer = The name of the layer for the picture.
//   caplayer = The name of the layer for the caption.
//
//   add,next,last,show = Member functions
//
function StudyGroup(piclayer,caplayer)
{
  this.item = new Array();
  this.n = 0;
  this.piclayer = piclayer;
  this.caplayer = caplayer;

  this.add = StudyGroup__Add;
  this.next = StudyGroup__Next;
  this.last = StudyGroup__Last;
  this.show = StudyGroup__Show;
}

//
// Member function.
//   Adds a picture/caption pair to the StudyGroup object.
//
function StudyGroup__Add(picture,HTML,popup)
{
  var j = this.item.length;

  this.item[j] = new Object();
  this.item[j].picture = new Image();
  this.item[j].picture.src = picture;
  this.item[j].HTML = HTML;
  this.item[j].popup = popup;
}

//
// Member function
//   Moves the internal pointer to the next image, with wraparound,
//   and calls the "show" function.
//
function StudyGroup__Next()
{
  this.n++;

  if (this.n >= this.item.length)
  {
    this.n = 0;
  }

  this.show();
  return false;
}

//
// Member function
//   Same as "next" but in reverse.
//
function StudyGroup__Last()
{
  this.n--;

  if (this.n < 0)
  {
    this.n = this.item.length - 1;
  }

  this.show();
  return false;
}

//
// Member function.
//   Creates structured HTML which contains the various picture and
//   caption items, and calls the "magicHTML" helper function.
//
function StudyGroup__Show()
{
  var s = '<table border="0" cellspacing="0" cellpadding="0" width="215" bgcolor="#000066">\n';
  s += '<tr>\n';
  s += '<td align="center">';
  s += '<a href="#" onClick="return doPopUp(\''+ this.item[this.n].popup + '\');">';
  s += '<img src="' + this.item[this.n].picture.src + '" alt="Click to Enlarge" border="0">';
  s += '</a>';
  s += '</td>\n';
  s += '</tr>\n';
  s += '</table>\n';

  magicHTML(s,this.piclayer);

  s = '<table border="0" cellspacing="0" cellpadding="0" width="157">\n';
  s += '<tr>\n';
  s += '<td align="center">';
  s += this.item[this.n].HTML;
  s += '</td>\n';
  s += '</tr>\n';

  s += '<tr><td height="5"></td></tr>\n';

  s += '<tr>\n';
  s += '<td align="center"><p style="font-size: 10px;">(';
  s += (this.n + 1) + " of " + this.item.length;
  s += ')</td>\n';
  s += '</tr>\n';
  s += '</table>\n';

  magicHTML(s,this.caplayer);
}

//
// Should be a member function, but there's no syntax for embedding a
// reference.
//
function doPopUp(which)
{
  var s = '<table border="0" cellspacing="0" cellpadding="0">\n'
  s += '<tr>\n';
  s += '<td width="248"></td>\n';
  s += '<td width="461" align="left" valign="top">\n';
  s += '<table border="1" cellspacing="0" cellpadding="5" bgcolor="#000066">\n';
  s += '<tr>\n';
  s += '<td align="center">';
  s += '<table border="0" cellspacing="0" cellpadding="5" bgcolor="#000066">\n';
  s += '<tr>\n';
  s += '<td align="center">';
  s += '<p class="caption"><a href="#" onClick="return closeMe();">CLOSE</a></p>';
  s += '</td>\n';
  s += '</tr>\n';
  s += '<tr>\n';
  s += '<td align="center">';
  if (which.indexOf(".mov",which.length - 4) > -1)
  {
    s += '<embed src="' + which + '" width="320" height="260" autoplay="true" controller="true" loop="false" pluginspage="http://www.apple.com/quicktime/" bgcolor="#000066"></embed>';
  } else
  {
    s += '<img src="' + which + '">';
  }
  s += '</td>\n';
  s += '</tr>\n';
  s += '</table>';
  s += '</td>\n';
  s += '</tr>\n';
  s += '</table>';
  s += '</td>\n';
  s += '</tr>\n';
  s += '</table>\n';

  magicHTML(s,'popup');

  return false;
}

//
// Closes the popup window.
//
function closeMe()
{
  magicHTML('&nbsp;','popup');
  return false;
}