ThumbNailBox.prototype.parent = null;
ThumbNailBox.prototype.thumbNails = null;
ThumbNailBox.prototype.currentIndex = null;
ThumbNailBox.prototype.currentThumbNail = null;
ThumbNailBox.prototype.rightOverflow = 0;
ThumbNailBox.prototype.leftOverflow = 0;
ThumbNailBox.prototype.thumbNailHtml = null;
ThumbNailBox.prototype.isInit = false;

ThumbNailBox.prototype.slideThumbNailArrow = function(endListener) {
  var w = ((this.currentIndex)*69) + ((this.currentIndex)*9) + 27;
  thumbNailArrowBox.cbe.slideTo(w, 0, 400);
  setTimeout(endListener, 420);
}

/**
 * Associates a thumb nail with this node.
 */
ThumbNailBox.prototype.appendThumbNail = function(thumbNail){
  this.thumbNails[this.thumbNails.length] = thumbNail;
}

/**
 * Hides the thumbnail box.
 */
ThumbNailBox.prototype.hideThumbNails = function(){
  rpb.cbe.hide();
  lpb.cbe.hide();
  thumbNailDirections.cbe.hide();
  thumbNailBox.cbe.hide();
}

/**
 * Displays the thumbnail box for this menu node.
 */
ThumbNailBox.prototype.showThumbNails = function(endListener, noeffect){
  this.createThumbNailBox(null, noeffect, endListener);
}

ThumbNailBox.prototype.checkThumbNailOverflow = function(){
  if (currentNode) {
    if (this.leftOverflow > 0) {
      lpb.cbe.show();
    } else {
      if(lpb.cbe.visibility() || is.safari) {
        lpb.cbe.hide();
      }
    }
    if (this.rightOverflow > 0) {
      rpb.cbe.show();
    } else {
      if(rpb.cbe.visibility() || is.safari) {
        rpb.cbe.hide();
      }
    }
  } else {
    rpb.cbe.hide();
    lpb.cbe.hide();
  }
}

ThumbNailBox.prototype.shiftThumbNailsLeft = function(){
  if (currentNode && !thumbNailSliderBox.cbe.moving) {
    if(this.leftOverflow >= 7){
      thumbNailSliderBox.cbe.slideBy(546, 0, 500);
      this.leftOverflow = this.leftOverflow-7;
      this.rightOverflow = this.rightOverflow+7;
    }
    else {
      thumbNailSliderBox.cbe.slideBy((this.leftOverflow*78), 0, 400);
      this.rightOverflow = this.rightOverflow + this.leftOverflow;
      this.leftOverflow = 0;
    }
    this.checkThumbNailOverflow();
  }
}

ThumbNailBox.prototype.shiftThumbNailsRight = function(){
  if (currentNode && !thumbNailSliderBox.cbe.moving) {
    if(this.rightOverflow >= 7){
      thumbNailSliderBox.cbe.slideBy(-546, 0, 500);
      this.leftOverflow = this.leftOverflow+7;
      this.rightOverflow = this.rightOverflow-7;
    }
    else {
      thumbNailSliderBox.cbe.slideBy(-(this.rightOverflow*78), 0, 400);
      this.leftOverflow = this.rightOverflow + this.leftOverflow;
      this.rightOverflow = 0;
    }
    this.checkThumbNailOverflow();
  }
}

ThumbNailBox.prototype.loadImgs = function(noeffect, endListener) {
  var i, c=0;
  for (i=0; i<this.thumbNails.length; i++) {
    if (this.thumbNails[i].img.complete) ++c;
  }
  if (c >= this.thumbNails.length) {
    this.createThumbNailBox(true, noeffect, endListener);
  } else {
    if(!noeffect) noeffect="null";
    if(!endListener) endListener ="null";
    else endListener = "'" + endListener + "'";
    setTimeout("currentNode.thumbNailBox.loadImgs(" + noeffect + ", " + endListener + ")", 300);
  }
}

/**
 * Creates a thumbNail Box for this node.
 */
ThumbNailBox.prototype.createThumbNailBox = function(noCheck, noeffect, endListener) {
  if (!this.isInit) {
    if (!noCheck) {
      var k;
      for (k=0; k<this.thumbNails.length; k++) {
        var url = this.thumbNails[k].img;
        if(typeof(url)=='string') {
          this.thumbNails[k].img = cbeNewImage(this.thumbNails[k].id + ".thumbnail." + k, url);
        }
      }
      this.loadImgs(noeffect, endListener);
      return;
    }
  }

  //These Are the actual thumb nails
  thumbNailImgBox.cbe.resizeTo(((this.thumbNails.length+1)*69)+((this.thumbNails.length)*9), 52);
  thumbNailImgBox.cbe.moveTo(0, 6);
  thumbNailImgBox.cbe.zIndex(1);
  //If we already created the html don't do it again.
  if (!this.thumbNailHtml) {
    var i = 0;
    this.thumbNailHtml = '<table cellpadding="0" cellspacing="0" border="0">';
    this.rightOverflow = 0;
    for (i=0; i<this.thumbNails.length; i++) {
      var thumbNail = this.thumbNails[i];
      this.thumbNailHtml += '<td width="78" align="left" valign="middle" nowrap="true"><a href="javascript: showCaseStudy('+i+')" onmousedown="if(!is.nav4)return false;"><img title="'+thumbNail.casestudy.companyName+'" border="0" name="thumbNail.'+i+'.img" src="" height="52" width="69"></a><img height="1" width="9" src="../images/clear.gif"></td>';
      if ((i+1)>8) {
        this.rightOverflow++;
      }
    }
    this.thumbNailHtml += '</tr></table>';
    this.rightOverflow = this.rightOverflow - this.leftOverflow;
  }
  thumbNailImgBox.cbe.innerHtml(this.thumbNailHtml);
  for (i=0; i<this.thumbNails.length; i++) {
    var thumbNail = this.thumbNails[i];
    cbeGetImageByName("thumbNail."+i+".img").src = thumbNail.img.src;
  }
  thumbNailImgBox.cbe.show();

  //This box contains the thumbnails and the arrow
  thumbNailSliderBox.cbe.moveTo(-1*(this.leftOverflow*78), 13);
  thumbNailSliderBox.cbe.resizeTo(((this.thumbNails.length+1)*69)+((this.thumbNails.length)*9), 58);
  thumbNailSliderBox.cbe.zIndex(1);
  thumbNailSliderBox.cbe.show();

  //This is the header for th thum nails. (The menu Item selected)
  thumbNailHeaderBox.cbe.zIndex(3);
  var align = null;
  var w = null;
  if (this.thumbNails.length > 3) {
    if (this.thumbNails.length>=8) {
      w = 612;
    } else {
      w = (((this.thumbNails.length)*69)+((this.thumbNails.length-1)*9)-2);
    }
    if (is.nav4) {
      thumbNailHeaderBox.cbe.moveTo(1, 0);
    } else {
      thumbNailHeaderBox.cbe.moveTo(1, 1);
    }
    align = "center";
  } else {
    w = 306;
    thumbNailHeaderBox.cbe.moveTo(((this.thumbNails.length)*69)+((this.thumbNails.length-1)*9)+5, 35);
    align = "left";
  }
  thumbNailHeaderBox.cbe.resizeTo(w, 13);
  var ps = 8;
  if (is.nav4 && is.mac) ps = 9;
  if (is.nav4) {
    thumbNailHeaderBox.cbe.innerHtml('<table cellpadding="0" cellspacing="0" width="'+w+'" height="12"><tr><td align="'+align+'" valign="middle"><table bgcolor="#CCCC66" border="0" cellpadding="0" cellspacing="0" height="12" align="'+align+'"><tr><td nowrap="true" align="'+align+'" valign="middle"><font point-size="'+ps+'" color="#838520" face="arial,verdana,sans-serif">'+this.parent.text+'</font></td></tr></table></td></tr></table>');
  } else {
    thumbNailHeaderBox.cbe.innerHtml('<table border="0" cellpadding="0" cellspacing="0" height="12" width="'+w+'" align="'+align+'"><tr><td nowrap="true" align="'+align+'" valign="bottom"><table bgcolor="#CCCC66" border="0" cellpadding="0" cellspacing="0" height="12" align="'+align+'"><tr><td style="font-size:9px; font-family:arial,verdana,sans-serif; color:#838520;" nowrap="true" align="'+align+'" valign="middle">'+this.parent.text+'</td></tr></table></td></tr></table>');
  }
  thumbNailHeaderBox.cbe.show();

  //This is the bracket above the thumb nails.
  if (this.thumbNails.length>=8) {
    thumbNailBracketBox.cbe.resizeTo(614, 7);
  } else {
    thumbNailBracketBox.cbe.resizeTo((((this.thumbNails.length)*69)+((this.thumbNails.length-1)*9)), 7);
  }
  thumbNailBracketBox.cbe.moveTo(0, 6);
  thumbNailBracketBox.cbe.zIndex(0);
  if (this.thumbNails.length>=8) {
    thumbNailBracketBox.cbe.innerHtml('<table cellpadding="0" cellspacing="0" border="0" bgcolor="#CCCC66"><tr>' +
                                      '<td><img name="leftBracketImg" width="7" height="7" src=""></td>' +
                                      '<td valign="bottom"><table bgcolor="#838520" cellpadding="0" cellspacing="0" border="0" width="600" height="1"><tr><td width="600"><img name="bottomBracketImg" width="1" height="1" src="../images/clear.gif"></td></tr></table></td>' +
                                      '<td><img name="rightBracketImg" width="7" height="7" src=""></td>' +
                                      '</tr></table>');
  } else {
    thumbNailBracketBox.cbe.innerHtml('<table cellpadding="0" cellspacing="0" border="0" bgcolor="#CCCC66"><tr>' +
                                      '<td><img name="leftBracketImg" width="7" height="7" src=""></td>' +
                                      '<td valign="bottom"><table bgcolor="#838520" cellpadding="0" cellspacing="0" border="0" width="'+((((this.thumbNails.length)*69)+((this.thumbNails.length-1)*9))-14)+'" height="1"><tr><td width="600"><img name="bottomBracketImg" width="1" height="1" src="../images/clear.gif"></td></tr></table></td>' +
                                      '<td><img name="rightBracketImg" width="7" height="7" src=""></td>' +
                                      '</tr></table>');
  }
  cbeSetImage("leftBracketImg", "leftBracket");
  cbeSetImage("rightBracketImg", "rightBracket");
  thumbNailBracketBox.cbe.show();

  //This is the arrow that points to the current thumb nail
  thumbNailArrowBox.cbe.innerHtml('<img name="thumbNailArrowImg" height="6" width="14" src="">');
  cbeSetImage("thumbNailArrowImg", "thumbNailArrow");
  thumbNailArrowBox.cbe.show();

  if (!this.currentIndex) this.currentIndex = 0;
  this.currentThumbNail = this.thumbNails[this.currentIndex];
  thumbNailArrowBox.cbe.moveTo((((this.currentIndex)*69) + ((this.currentIndex)*9) + 27), 0, 400);

  if (!noeffect) {
    thumbNailArrowBox.cbe.hide();
    thumbNailHeaderBox.cbe.hide();
    thumbNailBracketBox.cbe.hide();
    thumbNailBracketBox.cbe.moveTo(0, 20);
    thumbNailBox.cbe.moveTo(700, 18);
  }
  if (!noeffect) {
    thumbNailBox.cbe.show();
    thumbNailBox.cbe.slideTo(28, 18, 500);
    setTimeout("thumbNailBracketBox.cbe.show();currentNode.thumbNailBox.checkThumbNailOverflow();thumbNailBracketBox.cbe.slideTo(0, 6, 400, 'thumbNailHeaderBox.cbe.show(); thumbNailDirections.cbe.show(); thumbNailArrowBox.cbe.show(); "+endListener+"')", 520);
  } else {
    this.checkThumbNailOverflow();
    thumbNailDirections.cbe.show();
    thumbNailBox.cbe.show();
  }
  this.isInit = true;
}

/**
 * Constructor
 */
function ThumbNailBox(parent) {
  this.parent = parent;
  this.thumbNails = new Array();
  this.currentIndex = 0;
}