function Thumbnail(groupID, groupType) {
  var copy;
  var swatches;
  var xmlRequest;
  var currentRequestor;

  this.groupID = groupID;
  this.groupType = groupType;

  function createRequest() {
    if (xmlRequest) {
      return;
    }
    try {
      xmlRequest = new XMLHttpRequest();
    }
    catch (trymicrosoft) {
      try {
        xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (othermicrosoft) {
        try {
          xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (failed) {
          xmlRequest = false;
        }
      }
    }
  }

  function requestContent(callback) {
    var url;
    var r;

    if (this.copy && this.swatches) {
      callback(this.copy, this.swatches);
      return;
    }
    this.callback = callback;
    if (currentRequestor != null) {
      return;
    }
    currentRequestor = this;
    createRequest();
    r = xmlRequest;
    if (!r) {
      throw ("XMLHttpRequest is not available.");
    }
    url = "productinfo.aspx?itemid=" + escape(currentRequestor.groupID) + "&grptyp=" + escape(currentRequestor.groupType) + "&useTemplate=" + useTemplate + "&action=getContent";
    r.open ("GET", url, true);
    r.onreadystatechange = setContent;
    r.send (null);
  }

  function setContent() {
    var r = xmlRequest;
    var xml;
    var copyNode;
    var swatchNodes;
    var swatches = new Array();
    
    if (r.readyState != 4) {
      return;
    }
    if (r.status != 200) {
      throw ("Request failed to complete - status = " + r.status);
    }
    xml = r.responseXML;
    copyNode = xml.getElementsByTagName("copy")[0].firstChild.nodeValue;
    swatchNodes = xml.getElementsByTagName("swatch");
    for (var i=0;i<swatchNodes.length;i++) {
      swatches.push(swatchNodes[i].attributes.getNamedItem("path").value);
    }
    currentRequestor.copy = copyNode;
    currentRequestor.swatches = swatches;
    currentRequestor.callback(copyNode, swatches);
    currentRequestor = null;
  }

  this.copy = copy;
  this.swatches = swatches;
  this.requestContent = requestContent;
}

var scrollDelay;

function getOffsetTop(el) {
  var offSet = el.offsetTop;
  var parentElement = el.offsetParent;
  while (parentElement != null) {
    offSet += parentElement.offsetTop;
    parentElement = parentElement.offsetParent;
  }
  return offSet;
}

function getOffsetLeft(el) {
  var offSet = el.offsetLeft;
  var parent = el.offsetParent;
  while (parent != null) {
    offSet += parent.offsetLeft;
    parent = parent.offsetParent;
  }
  return offSet;
}

function displayBalloon(el) {
  if (!document.balloonReady) {
    return;
  }
  var index = el.groupIndex;
  var b = document.getElementById("balloonText");
  var t = document.getElementById("copyTable");
  b.style.top = el.parentNode.top;
  if (!el.isThirdCell) {
    b.style.left = getOffsetLeft(el) + 160;
    b.style.backgroundImage = previewLeft;
    t.style.left = 45;
  }
  else {
    b.style.left = getOffsetLeft(el) - 255;
    b.style.backgroundImage = previewRight;
    t.style.left = 15;
  }
  groups[index].requestContent(updateContent);
}

function updateContent(copy, swatches) {
  var b = document.getElementById("balloonText");
  var c = document.getElementById("copyText");
  var s;
  var len;
  if (copy.length == 0 && swatches.length == 0) {
    return;
  }
  b.style.display = "";
  c.innerHTML = copy;
  c.scrollTop = 0;
  for (var i=1;i<5;i++) {
    document.getElementById("swatch" + i).style.display="none";
  }
  len = swatches.length;
  if (len > 4) {
    len = 4;
    document.getElementById("moreColors").innerHTML = "more colors available";
  }
  else {
    document.getElementById("moreColors").innerHTML = "";
  }
  for (var i=0;i<len;i++) {
    s = document.getElementById("swatch" + (i+1));
    s.src = swatches[i];
    s.style.display = "";
  }
  clearTimeout(scrollDelay);
  scrollDelay = setTimeout('divScroll()',2000);
}

function hideBalloon() {
  document.getElementById("balloonText").style.display="NONE";
}

function initBalloon() {
  var t = document.getElementById("productsTable");
  var tr;
  var counter = 0;
  var top = 0;
  var i;
  var j;
  var index;
  var groupIndex = (base==2 ? -2 : -3);
  var groupInfo;
  for (i=base;i<t.rows.length;i++) {
    counter++;
    if (counter == 3) {
      counter = 0;
    }
    else {
      tr = t.rows[i];
      if (counter == 1) {
        top = getOffsetTop(tr.cells[0]);
        groupIndex+=3;
      }
      tr.top = top;
      index = groupIndex;
      for (j=0;j<tr.cells.length;j++) {
        if (j==1 || j==4 || j==7) {
          tr.cells[j].groupIndex = index;
          tr.cells[j].isThirdCell = (j==7 ? true : false);
          index++;
        }
      }
    }
  }
  document.balloonReady = true;
}

function divScroll() {
  var copyText = document.getElementById("copyText");
  copyText.scrollTop += 1;
  if (copyText.scrollTop < copyText.scrollHeight) {
    scrollDelay = setTimeout('divScroll()',100);
  }
}