/* Text that appears in the getting started box */
var overviewText = "The Boxely UI Toolkit uses XML and Javascript which empowers you to rapidly prototype and create applications without having to know complicated programming languages. If you already know how to create a web application using HTML and Javascript, then you're more than halfway there to creating a Boxely application!";
var overviewImageOn = "/boxely_resources/gsbox/gsoverview.gif";
var overviewImageOff = "/boxely_resources/gsbox/gsoverview_off.gif";

var readmeText = "Use the following links to read about the license agreement and download the Boxely package. <p class=\"spaceAbove\">Browse: <a href=\"/boxely_license_agreement\">License Agreement</a> | <a href=\"/boxely_download\">Download</a></p>";
var readmeImageOn = "/boxely_resources/gsbox/gsreadme.gif";
var readmeImageOff = "/boxely_resources/gsbox/gsreadme_off.gif";

var downloadText = "To get started, read the Boxely User Guide which provides step-by-step instructions on building a Boxely application. <p class=\"spaceAbove\">Browse: <a href=\"/boxely_resources/references/userguide/index.html\">User Guide</a> | <a href=\"/boxely_download\">Download</a></p>";
var downloadImageOn = "/boxely_resources/gsbox/gsdownload.gif";
var downloadImageOff = "/boxely_resources/gsbox/gsdownload_off.gif";

var supportText = "To support the Boxely UI Toolkit we have provided detailed documentation containing a user guide and API Reference and a list of frequently asked questions. The Boxely Developer Forums have been created to encourage developers to post comments and discuss technical issues.<p class=\"spaceAbove\">Browse: <a href=\"/boxely_resources/references/index.html\">Docs</a> | <a href=\"/boxely_resources/references/userguide/index.html\">User Guide</a> | <a href=\"/boxely_resources/references/service/index.html\">API</a> | <a href=\"/boxely_faq\">FAQ</a> | <a href=\"/boxely_forums\">Forums</a></p>";
var supportImageOn = "/boxely_resources/gsbox/gssupport.gif";
var supportImageOff = "/boxely_resources/gsbox/gssupport_off.gif";

var activeGSTab = "overview";

function activateGSTab(type)
{
  // create some content for the new element.
  var overviewImage = document.getElementById("bGSoverviewImage");
  var readmeImage = document.getElementById("bGSreadmeImage");
  var downloadImage = document.getElementById("bGSdownloadImage");
  var supportImage = document.getElementById("bGSsupportImage");
  
  if (activeGSTab != type)
  {
    switch (type)
    {
      case 'overview':
        overviewImage.setAttribute('src', overviewImageOn);
        break;
      case 'readme':
        readmeImage.setAttribute('src', readmeImageOn);
        break;
      case 'download':
        downloadImage.setAttribute('src', downloadImageOn);
        break;
      case 'support':
        supportImage.setAttribute('src', supportImageOn);
        break;
    }
  }
}

function deactivateGSTab(type)
{
  // create some content for the new element.
  var overviewImage = document.getElementById("bGSoverviewImage");
  var readmeImage = document.getElementById("bGSreadmeImage");
  var downloadImage = document.getElementById("bGSdownloadImage");
  var supportImage = document.getElementById("bGSsupportImage");
  
  if (activeGSTab != type)
  {
    switch (type)
    {
      case 'overview':
        overviewImage.setAttribute('src', overviewImageOff);
        break;
      case 'readme':
        readmeImage.setAttribute('src', readmeImageOff);
        break;
      case 'download':
        downloadImage.setAttribute('src', downloadImageOff);
        break;
      case 'support':
        supportImage.setAttribute('src', supportImageOff);
        break;
    }
  }
}

function changeGSContent(type)
{
  // create an empty element node
  // without an ID, any attributes, or any content
  var newContent = document.createElement("span");
        
  // give it an id attribute called 'newSpan'
  newContent.setAttribute("id", "bGSContent");

  // create some content for the new element.
  var overviewImage = document.getElementById("bGSoverviewImage");
  var readmeImage = document.getElementById("bGSreadmeImage");
  var downloadImage = document.getElementById("bGSdownloadImage");
  var supportImage = document.getElementById("bGSsupportImage");
  switch (type)
  {
    case 'overview':
      newContent.innerHTML = overviewText;
      overviewImage.setAttribute('src', overviewImageOn);
      readmeImage.setAttribute('src', readmeImageOff);
      downloadImage.setAttribute('src', downloadImageOff);
      supportImage.setAttribute('src', supportImageOff);
      break;
    case 'readme':
      newContent.innerHTML = readmeText;
      overviewImage.setAttribute('src', overviewImageOff);
      readmeImage.setAttribute('src', readmeImageOn);
      downloadImage.setAttribute('src', downloadImageOff);
      supportImage.setAttribute('src', supportImageOff);
      break;
    case 'download':
      newContent.innerHTML = downloadText;
      overviewImage.setAttribute('src', overviewImageOff);
      readmeImage.setAttribute('src', readmeImageOff);
      downloadImage.setAttribute('src', downloadImageOn);
      supportImage.setAttribute('src', supportImageOff);
      break;
    case 'support':
      newContent.innerHTML = supportText;
      overviewImage.setAttribute('src', overviewImageOff);
      readmeImage.setAttribute('src', readmeImageOff);
      downloadImage.setAttribute('src', downloadImageOff);
      supportImage.setAttribute('src', supportImageOn);
      break;
  }
  // build a reference to the existing node to be replaced
  var oldContent = document.getElementById("bGSContent");
  var parentNode = oldContent.parentNode;
  
  // replace existing node sp2 with the new span element sp1
  parentNode.replaceChild(newContent, oldContent);

  // record the active tab
  activeGSTab = type;
}