//////////////////////////////////////////////////////////////
// cqp.slideshow module
//
// Contains class definitions in cqp.slideshow namespace
// to create SlideShow widget and helper classes.
//
// Widget displays product information in a slideshow-like
// format. x number of products are displayed in a strip
// at a single time. Clicking "left" or "right" scroll controls
// displays the next or preceding x items.
//
// Author: Demian Hess, OPD CQ Press
// 
// Initial Date: January 2008 (versions 1.1)
// 
// Modified, Added Tabbed UI, by Nampora, version 1.2
//
// Current Version: 1.2
//////////////////////////////////////////////////////////////

//************************************************************************
// Namespaces
//************************************************************************
var cqp = cqp ? cqp : {};
cqp.slideshow = {};

//************************************************************************
// Start SlideShow class definition
//************************************************************************

/**
 * SlideShow displays items in a slide show. NumberOfCells 
 * specifies how many items are displayed at a time.
 */
cqp.slideshow.SlideShow = function(
   targetId, 
   numberOfCells, 
   viewerWidth, 
   borderSize, 
   borderColor, 
   leftScrollImage, 
   rightScrollImage, 
   cellClassName, 
   lastCellClassName, 
   titleText,
   titleClassName,
   pageCounterClassName ){
               
   // Instance properties
   this.targetId = targetId;
   this.currentPage = 0;
   this.numberOfPages = 0;
   this.numberOfCells = 0;
   if (numberOfCells != undefined && ! isNaN(numberOfCells)){
      this.numberOfCells = parseInt(numberOfCells);
   }
   this.items = [];
   this.viewer = new cqp.slideshow.UI(this.numberOfCells, viewerWidth, borderSize, borderColor, leftScrollImage, rightScrollImage, cellClassName, lastCellClassName, titleText, titleClassName, pageCounterClassName); 
   
   this.cells = this.viewer.divs;
   
   // Set up event handlers
   var oThis = this;
   this.viewer.leftLink.onclick = function(){
      oThis.getNextPageToLeft();
      return false;
   }
   this.viewer.rightLink.onclick = function(){
      oThis.getNextPageToRight();
      return false;
   }     

} // cqp.slideshow.SlideShow constructor

/**
 * cqp.slideshow.SlideShow.showPage()
 *
 * Displayed the specified page of items. If page number is out
 * of range, nothing is done. Also reset the page counter.
 */
cqp.slideshow.SlideShow.prototype.showPage = function(pageNumber){
   if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > this.numberOfPages || this.numberOfCells < 1){
      return;
   }

   var maxItemIndex = (this.numberOfCells * pageNumber);
   var minItemIndex = (this.numberOfCells * pageNumber) - this.numberOfCells;
   
   // Retrieve the slice of the array for this page
   var cellCounter = 0;      
   for (i = minItemIndex; i < maxItemIndex; i++){
      // Clear cell
      if (this.cells[cellCounter].innerHTML){
        this.cells[cellCounter].innerHTML = '';
      }     
      
      // Retrieve next item (if available)
      if (this.items[i] != undefined){
         this.cells[cellCounter].innerHTML = this.items[i];
      }
      
      // increment cell counter to move through the table row
      cellCounter++;
   }//for
   
   this.currentPage = pageNumber;
   this.viewer.pageCounterSpan.innerHTML = 'Page ' + this.currentPage + ' of ' + this.numberOfPages;
   
}//cqp.slideshow.SlideShow.showPage()

/**
 * cqp.slideshow.SlideShow.loadItems()
 *
 * Loads items into the view. Replaces all 
 * previous items. Caller can pass in any
 * number of items. After load is called, we
 * calculate the number of pages and display
 * the first page in the UI.
 */
cqp.slideshow.SlideShow.prototype.loadItems = function(){

   // Reinitialize
   this.items = []; // clear previous items
   this.currentPage = 0;
   this.numberOfPages = 0;
            
   // Store all the items
   for (i = 0; i < arguments.length; i++){      
      this.items[i] = arguments[i];
   }
   
   if (this.items.length == 0){
      return;
   }
   
   // Calculate page info.
   
   var temp = (this.numberOfCells == 0) ? 0 : (this.items.length / this.numberOfCells);
   if (temp == 0){
      this.numberOfPages = 0;
      this.currentPage = 0;
   }
   else if (temp < 1){
      this.numberOfPages = 1;
      this.currentPage = 1;
   }
   else{
      this.numberOfPages = Math.ceil(temp);
      this.currentPage = 1;
   }
   
   // Display items in first page
   this.showPage(1);

}//cqp.slideshow.SlideShow.loadItems()

/**
 * cqp.slideshow.SlideShow.getNextPageToLeft()
 *
 * Page left.
 */
cqp.slideshow.SlideShow.prototype.getNextPageToLeft = function(){
   
   if (this.currentPage <= 1){
      this.currentPage = this.numberOfPages;
   }
   else{
      --this.currentPage;
   }
   this.showPage(this.currentPage);

}//SlideShow.getNextPagetoLeft

/**
 * SlideShow.getNextPageToRight()
 *
 * Page right.
 */
cqp.slideshow.SlideShow.prototype.getNextPageToRight = function(){
   if (this.currentPage >= this.numberOfPages){
      this.currentPage = 1;
   }
   else{
      ++this.currentPage;
   }
   this.showPage(this.currentPage);

}//cqp.slideshow.SlideShow.getNextPageToRight

/**
 * Make the slideshow visible
 */
cqp.slideshow.SlideShow.prototype.show = function(){
   if (document.getElementById(this.targetId)){ 
      var target = document.getElementById(this.targetId);
      var c = this.viewer.getContainer();
      if (c){
         target.innerHTML = ''; // clear any previous content
         target.appendChild(c);      
      }
   }
}//cqp.slideshow.SlideShow.show()

/**
 * Shuffle the items in the slide show (thus rearrange them) and, once
 * that is done, reset to display the first page only.
 */
cqp.slideshow.SlideShow.prototype.shuffle = function(){
   cqp.shuffle(this.items);
   this.showPage(1);
}//SlideShow.shuffle()
   
/////////////////////////////////////////////////////////////////////////
// End SlideShow class definition
/////////////////////////////////////////////////////////////////////////

//************************************************************************
// HELPER FUNCTIONS
//************************************************************************

/**
 * Generate a random number n such that 0 <= n < X
 */
cqp.random = function(X) {
   return Math.floor(X * (Math.random() % 1));
} //random

/**
 * Shuffle items in array Q
 */
cqp.shuffle = function(Q) {
   var J, K, T;
   for (J = Q.length - 1; J > 0; J--) {
      K = cqp.random(J + 1);
      T = Q[J];
      Q[J] = Q[K];
      Q[K] = T;
   }
   return Q;
} //shuffle


/**
 * Returns spelled out number - used for tab names
 */
cqp.slideshow.getNumberSpelling = function(numberIn) { // 10x digit terms
   var returnVal  = "";

   switch(numberIn) 
   {
      case 0: returnVal = "Zero"; break;
      case 1: returnVal = "One"; break;
      case 2: returnVal = "Two"; break;
      case 3: returnVal = "Three"; break;
      case 4: returnVal = "Four"; break;
      case 5: returnVal = "Five"; break;
      case 6: returnVal = "Six"; break;
      case 7: returnVal = "Seven"; break;
      case 8: returnVal = "Eight"; break;
      case 9: returnVal = "Nine"; break;
      case 10: returnVal = "Ten"; break;
      case 11: returnVal = "Eleven"; break;
      case 12: returnVal = "Twelve"; break;
      case 13: returnVal = "Thirteen"; break;
      case 14: returnVal = "Fourteen"; break;
      case 15: returnVal = "Fifteen"; break;
      case 16: returnVal = "Sixteen"; break;
      case 17: returnVal = "Seventeen"; break;
      case 18: returnVal = "Eighteen"; break;
      case 19: returnVal = "Nineteen"; break;
      case 20: returnVal = "Twenty"; break;
      
      default: returnVal  = "";
   }
   
   return returnVal;
}

/**
 * Helper function to count preceding siblings and self; used to handle tab navigation
 */
cqp.slideshow.countSelfAndPrecedingSibs = function(obj){
   var i = 1;
   while (obj = obj.previousSibling){ i++; }
   return i;
}

/////////////////////////////////////////////////////////////////////////
// End helpers
/////////////////////////////////////////////////////////////////////////

//************************************************************************
// Start cqp.slideshow.UI class definition
//************************************************************************

/** 
 * Helper class builds viewer HTML. Provides methods to 
 * access the div that contains the entire UI as well as methods
 * for accessing the cells that display the items. 
 */
cqp.slideshow.UI = function(
   numberOfCells, 
   viewerWidth, 
   borderSize, 
   borderColor, 
   leftScrollImage, 
   rightScrollImage, 
   cellClassName, 
   lastCellClassName,
   titleText,
   titleClassName,
   pageCounterClassName){
   
   // Make sure we know the full width and number of cells
   if (numberOfCells == undefined || viewerWidth == undefined){
      throw new Error("Must supply number of cells and viewer width");
   }
   
   if (isNaN(numberOfCells) || parseInt(numberOfCells) <= 0){
      throw new Error("Number of cells must be a positive number");
   }
     
   // Instance properties
   this.container = document.createElement('div'); 
   this.divs = new Array(parseInt(numberOfCells));
   this.pageCounterDiv = document.createElement('div');
   this.pageCounterSpan = document.createElement('span');
   this.leftLink = document.createElement('a');
   this.rightLink = document.createElement('a');
   
   // Private variables
   var titleDiv = document.createElement('div');
   var table = document.createElement('table');
   var tbody = document.createElement('tbody');
   var leftScroller = document.createElement('td'); 
   var rightScroller = document.createElement('td');
   var row = document.createElement('tr');
   var leftScrollerImg = document.createElement('img');
   var rightScrollerImg = document.createElement('img');
   var normalizedBorderSize;
   var normalizedBorderColor;
         
   // Set up default values
   if (borderSize == undefined){
      normalizedBorderSize = '1px';
   }
   else{
     normalizedBorderSize = borderSize;
   }
   
   if (borderColor == undefined){
      normalizedBorderColor = 'black';
   }
   else{
      normalizedBorderColor = borderColor;
   }

   // Set up the basic structure of elements
   this.container.appendChild(titleDiv);
   this.container.appendChild(table);
   this.container.appendChild(this.pageCounterDiv);
   this.pageCounterDiv.appendChild(this.pageCounterSpan);
   table.appendChild(tbody);
   tbody.appendChild(row);
   row.appendChild(leftScroller);
   leftScroller.appendChild(this.leftLink);
   this.leftLink.appendChild(leftScrollerImg);
   rightScroller.appendChild(this.rightLink);
   this.rightLink.appendChild(rightScrollerImg);
   
   // Style the title area
   if (titleClassName != undefined && titleClassName.length > 0){
      titleDiv.className = titleClassName;
   }
   
   if (titleText != undefined && titleText.length > 0){
      titleDiv.innerHTML = titleText;
   }

   // Style page counter area
   this.pageCounterDiv.style.textAlign = 'right';
   if (pageCounterClassName != undefined){
      this.pageCounterSpan.className = pageCounterClassName;
   }
                    
   // Style the table
   if (viewerWidth != undefined){
      table.style.width = viewerWidth;
      this.pageCounterDiv.style.width = viewerWidth;
      
   }
   
   table.style.border = normalizedBorderSize;
   table.style.borderStyle = 'solid';
   table.style.borderColor = normalizedBorderColor;
   table.style.borderCollapse = 'collapse';
   table.style.padding = '0px';
            
   // Style scroller links
   this.leftLink.href = '#';
   this.rightLink.href = '#';
   
   // Style left scroller
   leftScroller.align = 'left';
   leftScroller.style.zIndex = '100';
      
   if (leftScrollImage != undefined){
      leftScrollerImg.src = leftScrollImage;
   }
   leftScrollerImg.alt = 'Scroll Left';
   leftScrollerImg.title = 'Scroll Left';
   leftScrollerImg.border = '0';
   
   // Style right scroller      
   rightScroller.align = 'right';
   rightScroller.style.zIndex = '100';
   
   if (rightScrollImage != undefined){
      rightScrollerImg.src = rightScrollImage;
   }
   rightScrollerImg.alt = 'Scroll Right';
   rightScrollerImg.title = 'Scroll Right';
   rightScrollerImg.border = '0';      
         
   // Fill the table with dynamically determined number of cells
   for (var i = 0; i < numberOfCells; i++){
      var tempCell = document.createElement('td');
      tempCell.align = 'center';
      tempCell.valign = 'top';
      this.divs[i] = document.createElement('div');
      
      if (i == numberOfCells - 1){
         if (lastCellClassName != undefined){
           this.divs[i].className = lastCellClassName;
         }
         else if (cellClassName != undefined){
            this.divs[i].className = cellClassName;
         }
      }
      else {
         if (cellClassName != undefined){
            this.divs[i].className = cellClassName;
         }
      }
      tempCell.appendChild(this.divs[i]);
      row.appendChild(tempCell);
   } //for
   
   // Add right scroller to end of the row
   row.appendChild(rightScroller);            
} // cqp.slideshow.UI constructor

/**
 * Instance method for UI. Returns the container
 * which holds the entire viewer HTML.
 */
cqp.slideshow.UI.prototype.getContainer = function(){
   return this.container;
} // cqp.slideshow.UI.getContainter()

/**
 * Instance method for UI. Returns array
 * containing the cells that hold items.
 */
cqp.slideshow.UI.prototype.getCells = function(){
   return this.divs;
} // UI.getCells()


/////////////////////////////////////////////////////////////////////////
// End UI class definition
/////////////////////////////////////////////////////////////////////////

//************************************************************************
// Start SimpleItem class definition
//************************************************************************

/**
 * SimpleItem is a container for the most basic item displayed in the 
 * SlideShow. It consists of an image over some text, all of which is
 * linked to a URL. altText provides the title and alt attribute on the image.
 * If height and width is specified, then we constrain the image size.
 */
cqp.slideshow.SimpleItem = function(imageFileName, linkText, url, altText, width, height){
   this.imageFileName = imageFileName;
   this.linkText = linkText;
   this.url = url;      
   this.altText = altText;
   this.width = width;
   this.height = height;
} // cqp.slideshow.SimpleItem constructor

/**
 * Create a string of HTML so that this can be displayed on the web.
 */
 cqp.slideshow.SimpleItem.prototype.toString = function(){
   var s = "";
   
   if (this.url != undefined){
      s += '<a href=\'' + this.url + '\'>';
   }
   
   if (this.imageFileName != undefined){
      s += '<img border=\'0\' ';
      
      if (this.width != undefined){
         s += 'width=\'' + this.width + '\' '
      }

      if (this.height != undefined){
         s += 'height=\'' + this.height + '\' '
      }
      
      s += ' src=\'' + this.imageFileName + '\' ';
      
      if (this.altText != undefined){
         s += 'alt=\'Image: ' + this.altText + '\' title=\'' + this.altText + '\' '
      }
      
      s += '/>'
   }
   
   if (this.linkText != undefined){
      if (this.imageFileName != undefined){
         s += '<br />'
      }
      
      s += this.linkText;
   }
   
   if (this.url != undefined){
      s += '</a>'
   }
   
   return s;
 }// cqp.slideshow.SimpleItem.toString()

/////////////////////////////////////////////////////////////////////////
// End SimpleItem class definition
/////////////////////////////////////////////////////////////////////////

//************************************************************************
// Start TabbedSlideShow class definition
//************************************************************************

/**
 * TabbedSlideShow displays items in a slide show. NumberOfCells 
 * specifies how many items are displayed at a time.
 */
cqp.slideshow.TabbedSlideShow = function(
   targetId, 
   numberOfCells, 
   viewerWidth, 
   borderSize, 
   borderColor, 
   cellClassName, 
   lastCellClassName,    
   titleText,
   titleClassName,
   tabBorderSize,
   tabBorderColor,
   tabFontFamily,
   tabFontSize,
   tabFontColor
   ){
               
   // Instance properties
   this.targetId = targetId;
   this.currentPage = 0;
   this.numberOfPages = 0;
   this.numberOfCells = 0;
   if (numberOfCells != undefined && ! isNaN(numberOfCells)){
      this.numberOfCells = parseInt(numberOfCells);
   }
   this.items = [];
   // this.tabsUL = document.createElement('div');

   if (tabBorderSize != undefined   )
   {
      this.tabBorderSize = tabBorderSize;
   }
   else
   {
          this.tabBorderSize = '1px';
   }     

   if (tabBorderColor != undefined   )
   {
      this.tabBorderColor = tabBorderColor;
   }
   else
   {
          this.tabBorderColor = 'Gray';
   }
     
   if (tabFontFamily != undefined   )
   {
      this.tabFontFamily = tabFontFamily;
   }
   else
   {
          this.tabFontFamily = 'Arial';
   }   
   
   if (tabFontSize != undefined   )
   {
      this.tabFontSize = tabFontSize;
   }
   else
   {
          this.tabFontSize = '12px';
   } 
   
   if (tabFontColor != undefined   )
   {
      this.tabFontColor = tabFontColor;
   }
   else
   {
          this.tabFontColor = 'Blue';
   }  

   if (titleText != undefined   )
   {
      this.titleText = titleText;
   }
   else
   {
          this.titleText = '';
   }  

   if (titleClassName != undefined   )
   {
      this.titleClassName = titleClassName;
   }
   else
   {
          this.titleClassName = '';
   }  
      
   this.viewer = new cqp.slideshow.TabbedUI(this.numberOfCells, viewerWidth, borderSize, borderColor, cellClassName, lastCellClassName, titleText, titleClassName, tabBorderSize, tabBorderColor,   tabFontFamily,  tabFontSize,   tabFontColor); 
   this.cells = this.viewer.divs;
   
} // cqp.slideshow.TabbedSlideShow constructor

/**
 * cqp.slideshow.TabbedSlideShow.showPage()
 *
 * Displayed the specified page of items. If page number is out
 * of range, nothing is done. Also reset the page counter.
 */
cqp.slideshow.TabbedSlideShow.prototype.showPage = function(pageNumber){
   if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > this.numberOfPages || this.numberOfCells < 1){
      return;
   }

   var maxItemIndex = (this.numberOfCells * pageNumber);
   var minItemIndex = (this.numberOfCells * pageNumber) - this.numberOfCells;
   
   // Retrieve the slice of the array for this page
   var cellCounter = 0;      
   for (i = minItemIndex; i < maxItemIndex; i++){
      // Clear cell
      if (this.cells[cellCounter].innerHTML){
        this.cells[cellCounter].innerHTML = '';
      }     
      
      // Retrieve next item (if available)
      if (this.items[i] != undefined){
         this.cells[cellCounter].innerHTML = this.items[i];
      }
      
      // increment cell counter to move through the table row
      cellCounter++;
   }//for
   
   this.currentPage = pageNumber;
   
   // try to remove previous tabs, if any -- we need to redraw the tabs
   try
   {
      while (this.tabsUL.hasChildNodes())
      {
        this.tabsUL.removeChild(this.tabsUL.firstChild);
      }                
   }
   catch(ex){}
  
   if (! this.tabsUL ){
      this.tabsUL = document.createElement('ul');
      this.tabsUL.style.listStyle = 'none';
      this.tabsUL.style.padding = '0px';
      this.tabsUL.style.margin = '0px';
      this.viewer.headerDiv.appendChild(this.tabsUL);   
   }
            
   var pageCounter = 0;
   for (pageCounter = 0; pageCounter < this.numberOfPages ; pageCounter++)
   {   
         var currLI = document.createElement('li');
         var currLink =  document.createElement('a');
         
         currLI.style.display = 'inline';
         currLI.style.border = this.tabBorderSize + ' solid ' + this.tabBorderColor;
         currLI.style.borderBottomWidth = '0';
         currLI.style.margin = '0 0.5em 0 0';

         currLI.style.fontFamily = this.tabFontFamily;
         currLI.style.fontSize = this.tabFontSize;
         currLI.style.color = this.tabFontColor;
         
         currLink.innerHTML = "Page "  + cqp.slideshow.getNumberSpelling(pageCounter + 1);
         currLink.style.color = this.tabFontColor;
         currLink.href="#";
                  
         currLink.style.padding = '0 1em';
         currLink.style.textDecoration = 'none';
         
         var oThis = this;
         currLink.onclick = function(){            
            oThis.showPage(cqp.slideshow.countSelfAndPrecedingSibs(this.parentNode));   
            return false;
         }

         if ((pageCounter + 1) == this.currentPage )
         {           
            currLI.style.borderStyle = 'solid';
            currLI.style.borderWidth = '1px';
            currLI.style.paddingBottom = '1px';
            currLI.style.borderBottomWidth = '0px';
            currLI.style.background = 'white';
            currLI.style.paddingTop = '3px';                       
         }
         else
         {
            currLI.style.paddingTop = '3px';            
         }

         currLI.appendChild(currLink);   
         currLink = null;                            
         this.tabsUL.appendChild(currLI);            
   }         
}//cqp.slideshow.TabbedSlideShow.showPage()
   

/**
 * cqp.slideshow.TabbedSlideShow.loadItems()
 *
 * Loads items into the view. Replaces all 
 * previous items. Caller can pass in any
 * number of items. After load is called, we
 * calculate the number of pages and display
 * the first page in the UI.
 */
cqp.slideshow.TabbedSlideShow.prototype.loadItems = function(){

   // Reinitialize
   this.items = []; // clear previous items
   this.currentPage = 0;
   this.numberOfPages = 0;
            
   // Store all the items
   for (i = 0; i < arguments.length; i++){      
      this.items[i] = arguments[i];
   }
   
   if (this.items.length == 0){
      return;
   }
   
   // Calculate page info.
   
   var temp = (this.numberOfCells == 0) ? 0 : (this.items.length / this.numberOfCells);
   if (temp == 0){
      this.numberOfPages = 0;
      this.currentPage = 0;
   }
   else if (temp < 1){
      this.numberOfPages = 1;
      this.currentPage = 1;
   }
   else{
      this.numberOfPages = Math.ceil(temp);
      this.currentPage = 1;
   }
   
   // Display items in first page
   this.showPage(1);

}//cqp.slideshow.TabbedSlideShow.loadItems()

/**
 * Make the slideshow visible
 */
cqp.slideshow.TabbedSlideShow.prototype.show = function(){
   if (document.getElementById(this.targetId)){ 
      var target = document.getElementById(this.targetId);
      var c = this.viewer.getContainer();
      if (c){
         target.innerHTML = ''; // clear any previous content
         target.appendChild(c);      
      }
   }
}//cqp.slideshow.TabbedSlideShow.show()

/**
 * Shuffle the items in the slide show (thus rearrange them) and, once
 * that is done, reset to display the first page only.
 */
cqp.slideshow.TabbedSlideShow.prototype.shuffle = function(){
   cqp.shuffle(this.items);
   this.showPage(1);
}//TabbedSlideShow.shuffle()


//************************************************************************
// Start cqp.slideshow.TabbedUI class definition
//************************************************************************

/** 
 * Helper class builds viewer HTML. Provides methods to 
 * access the div that contains the entire UI as well as methods
 * for accessing the cells that display the items. 
 */
cqp.slideshow.TabbedUI = function(
   numberOfCells, 
   viewerWidth, 
   borderSize, 
   borderColor, 
   cellClassName, 
   lastCellClassName,
   titleText,
   titleClassName,
   tabBorderSize,  
   tabBorderColor,
   tabFontFamily,  
   tabFontSize,   
   tabFontColor   
   ){   
      
   // Make sure we know the full width and number of cells
   if (numberOfCells == undefined || viewerWidth == undefined){
      throw new Error("Must supply number of cells and viewer width");
   }
   
   if (isNaN(numberOfCells) || parseInt(numberOfCells) <= 0){
      throw new Error("Number of cells must be a positive number");
   }
     
   // Instance properties
   this.container = document.createElement('div'); 
         
   this.divs = new Array(parseInt(numberOfCells));
   this.headerDiv = document.createElement('div');
   this.contentDiv = document.createElement('div');
   
   // Private variables
   var spacer = document.createElement('div');
   spacer.style.clear = "both";
   spacer.style.marginTop = "15px";
   var table = document.createElement('table');
   var tbody = document.createElement('tbody');
   var row = document.createElement('tr');
      
   var headerTitle = document.createElement('div');  
   if (titleClassName != undefined){
      headerTitle.className = titleClassName;
   }
   if (titleText != undefined){
      headerTitle.innerHTML = titleText;
   }

   var normalizedBorderSize;
   var normalizedBorderColor;
         
   // Set up default values
   if (borderSize == undefined){
      normalizedBorderSize = '1px';
   }
   else{
     normalizedBorderSize = borderSize;
   }
   
   if (borderColor == undefined){
      normalizedBorderColor = 'black';
   }
   else{
      normalizedBorderColor = borderColor;
   }
   
   this.container.appendChild(spacer);
   
   if (titleText != undefined){
      this.container.appendChild(headerTitle);
   };
    
   this.container.appendChild(this.headerDiv);
         
   if (viewerWidth != undefined)
   {         
      this.container.style.width = viewerWidth;
   }
      
   this.contentDiv.style.borderWidth = borderSize;
   this.contentDiv.style.borderColor = borderColor;
   this.contentDiv.style.borderStyle = 'solid';      
   this.contentDiv.appendChild(table); 
   this.container.appendChild(this.contentDiv);
   
   table.appendChild(tbody);
   tbody.appendChild(row);

   // Style the table
   table.style.width = "100%";   
   table.style.border = normalizedBorderSize;
   table.style.padding = '0';
   table.style.border = "0px";
   table.style.borderStyle = 'solid';
   table.style.borderColor = normalizedBorderColor;
   table.style.borderCollapse = 'collapse';

   // Fill the table with dynamically determined number of cells
   for (var i = 0; i < numberOfCells; i++){
      var tempCell = document.createElement('td');
      tempCell.align = 'center';
      tempCell.valign = 'top';
      this.divs[i] = document.createElement('div');
      
      if (i == numberOfCells - 1){
         if (lastCellClassName != undefined){
           this.divs[i].className = lastCellClassName;
         }
         else if (cellClassName != undefined){
            this.divs[i].className = cellClassName;
         }
      }
      else {
         if (cellClassName != undefined){
            this.divs[i].className = cellClassName;
         }
      }
      tempCell.appendChild(this.divs[i]);
      row.appendChild(tempCell);
   } //for
        
} // cqp.slideshow.TabbedUI constructor

/**
 * Instance method for TabbedUI. Returns the container
 * which holds the entire viewer HTML.
 */
cqp.slideshow.TabbedUI.prototype.getContainer = function(){
   return this.container;
} // cqp.slideshow.TabbedUI.getContainter()

/**
 * Instance method for TabbedUI. Returns array
 * containing the cells that hold items.
 */
cqp.slideshow.TabbedUI.prototype.getCells = function(){
   return this.divs;
} // TabbedUI.getCells()


/////////////////////////////////////////////////////////////////////////
// End TabbedUI class definition
/////////////////////////////////////////////////////////////////////////