/* class for individual slides */
function relatedItem( url , imgUrl , imgW , imgH , headline , display_name , display_url, isPaid, price ){
   this.url = url;
   this.imgUrl = imgUrl;
   this.headline = headline;
   this.display_name = display_name;
   this.display_url = display_url;
   this.isPaid = isPaid;
   this.price = price;
   this.parentBrowser = null;
   this.imgW = imgW;
   this.imgH = imgH;
}

/* class for the slide player */
function relatedBrowser( elementId, leftArrowId, rightArrowId, displayItemsCount , scrollItemsCount, imgSrc ){
   this.elementId = elementId;
   this.leftArrowId = leftArrowId;
   this.rightArrowId = rightArrowId;
   this.displayItemsCount = displayItemsCount;     // total number of items to be displayed at one time
   this.scrollItemsCount = scrollItemsCount;    // how many items to scroll by when clicking next or previous
   this.itemArray = new Array();
   this.itemIndex = 0;
   this.imgSrc = imgSrc;
   this.leftImgOff = this.imgSrc + "rel_reverse_off.gif";
   this.leftImgOn = this.imgSrc + "rel_reverse.gif";
   this.rightImgOff = this.imgSrc + "rel_forward_off.gif";
   this.rightImgOn = this.imgSrc + "rel_forward.gif";

   // self-register
   //this = window.insideNYTimesBrowserInstance;
}


relatedBrowser.prototype.showButtons = function(){
   if (document.createElement){

      //begin left arrow
      MOTHleftArrow = document.getElementById(this.leftArrowId);
      //create image
      isOff = (this.itemIndex == 0);
      MOTHleftArrowImg = document.createElement("IMG");
      state = (isOff) ? this.leftImgOff : this.leftImgOn;
      MOTHleftArrowImg.setAttribute("src", state );
      MOTHleftArrowImg.setAttribute("name", "rel_reverse");

      //create anchor
      if (!isOff){
         MOTHleftArrowAnchor = document.createElement( "A" );
         MOTHleftArrowAnchor.setAttribute("href", "javascript:browser.update(0)");
         MOTHleftArrowAnchor.appendChild(MOTHleftArrowImg);
         MOTHleftArrow.appendChild(MOTHleftArrowAnchor);
      } else {
         MOTHleftArrow.appendChild(MOTHleftArrowImg);
      }
      //end left arrow

      //begin right arrow
      MOTHrightArrow = document.getElementById(this.rightArrowId);
      //create image
      isOff = ((this.itemIndex + this.displayItemsCount) >= this.itemArray.length);
      MOTHrightArrowImg = document.createElement("IMG");
      state = (isOff) ? this.rightImgOff : this.rightImgOn;
      MOTHrightArrowImg.setAttribute("src", state );
      MOTHrightArrowImg.setAttribute("name", "rel_forward");
      //create anchor
      if (!isOff){
         MOTHrightArrowAnchor = document.createElement("A");
         MOTHrightArrowAnchor.setAttribute("href" , "javascript:browser.update(1)");
         MOTHrightArrowAnchor.appendChild(MOTHrightArrowImg);
         MOTHrightArrow.appendChild(MOTHrightArrowAnchor);
      } else {
         MOTHrightArrow.appendChild(MOTHrightArrowImg);
      }
      //end right arrow
   }
}


relatedItem.prototype.write = function(  ){
   if( document.createElement ){
      parentElement = document.getElementById( this.parentBrowser.elementId );
      if( parentElement.tagName == "TABLE" && this.parentBrowser.getHeaderRow && this.parentBrowser.getBodyRow ){

         // create header
         headerObj = document.createElement( "TH" );
         //headerTitleObj = document.createElement( "H4" );
         if (this.display_url == "#") {
            anchorObj = document.createTextNode("");
         } else {
            anchorObj = document.createElement("A");
            anchorObj.setAttribute("href", this.display_url);

            if( this.isPaid ) {
               linkedObj = document.createElement("IMG");
               linkedObj.setAttribute("src", "");
               anchorObj.appendChild(linkedObj);
            } else {
                    anchorObj.appendChild( document.createTextNode( "") );
            }
         }

         //headerTitleObj.appendChild( anchorObj );
         headerObj.appendChild( anchorObj );
         this.parentBrowser.getHeaderRow().appendChild( headerObj );

         // create body
         tdObj = document.createElement( "TD" );
         storyObj = document.createElement( "DIV" );
         storyObj.className = "rProduct";
         calloutObj = document.createElement( "DIV" );
         calloutObj.className = "rImage";
         calloutLinkObj = document.createElement( "A" );
         calloutLinkObj.setAttribute( "href" , this.url );
         calloutImgObj = document.createElement( "IMG" );
         calloutImgObj.setAttribute( "width" , this.imgW );
         calloutImgObj.setAttribute( "height" , this.imgH );
         calloutImgObj.setAttribute( "src" , this.imgUrl );
         calloutImgObj.setAttribute( "alt" , this.display_name );
         calloutLinkObj.appendChild( calloutImgObj );
         calloutObj.appendChild( calloutLinkObj );
         storyObj.appendChild( calloutObj );
         //headlineObj = document.createElement( "DIV" );
         //headlineObj.className = "rText";
         //headlineObj = document.createElement( "H4" );
         //headlineLinkObj = document.createElement( "A" );
         //headlineLinkObj.setAttribute( "href" , this.url );
         descriptionObj = document.createElement( "DIV" );
         descriptionObj.innerHTML = this.headline;
         //headlineLinkObj.appendChild( descriptionObj );
         //headlineObj.appendChild( headlineLinkObj );
         storyObj.appendChild( descriptionObj );

         priceObj = document.createElement( "DIV" );
         priceObj.className = "rPrice";
         priceObj.innerHTML = this.price;
         storyObj.appendChild( priceObj );

         moreObj = document.createElement( "DIV" );
         moreObj.className = "rMore";
         moreLinkObj = document.createElement( "A" );
         moreLinkObj.setAttribute( "href" , this.url );
         moreImgObj = document.createElement( "IMG" );
         moreImgObj.setAttribute( "src" , "/images/related/MoreInfo.gif" );
         moreImgObj.setAttribute( "alt" , "more info" );
         moreLinkObj.appendChild( moreImgObj );
         moreObj.appendChild( moreLinkObj );
         storyObj.appendChild( moreObj );

         tdObj.appendChild( storyObj );
         this.parentBrowser.getBodyRow().appendChild( tdObj );
      }
   }
}

relatedBrowser.prototype.addItem = function( item ){
   if( item instanceof relatedItem ){
      item.parentBrowser = this;
      this.itemArray.push( item );
   }
}

relatedBrowser.prototype.update = function( doMoveRight ){
   tableObj = document.getElementById( this.elementId );

   //increment index count
   var origIndex = this.itemIndex;
   this.itemIndex = (doMoveRight) ? this.itemIndex + this.scrollItemsCount : this.itemIndex - this.scrollItemsCount;

   //set upper and lower bounds
   this.upperBound = this.itemArray.length - this.displayItemsCount;
   this.itemIndex = ((this.itemIndex + this.displayItemsCount) > this.itemArray.length) ? this.itemArray.length-this.displayItemsCount : this.itemIndex;
   this.itemIndex = (this.itemIndex < 0) ? 0 : this.itemIndex;

   //update button images
   this.deleteAllChildrenOf(document.getElementById(this.leftArrowId));
   this.deleteAllChildrenOf(document.getElementById(this.rightArrowId));
   this.showButtons();

   if (origIndex != this.itemIndex){
      //clear
      this.deleteAllChildrenOf( this.getHeaderRow() );
      this.deleteAllChildrenOf( this.getBodyRow() );

      // re-populate
      for( iUpdate=this.itemIndex ; iUpdate < (this.itemIndex + this.displayItemsCount) ; iUpdate++ ){
         this.itemArray[iUpdate].write();
      }
   }
}

relatedBrowser.prototype.getHeaderRow = function(){
   return document.getElementById( this.elementId ).getElementsByTagName( "THEAD" )[0].getElementsByTagName( "TR" )[0];
}

relatedBrowser.prototype.getBodyRow = function(){
   return document.getElementById( this.elementId ).getElementsByTagName( "TBODY" )[0].getElementsByTagName( "TR" )[0];
}

relatedBrowser.prototype.deleteAllChildrenOf = function( elementObj ){
   while (elementObj.hasChildNodes()) elementObj.removeChild(elementObj.firstChild);
}