/* class for individual slides */
function InsideCOLItem( url , imgUrl , headline , display_name , display_url, isPaid ){
  this.url = url;
  this.imgUrl = imgUrl;
  this.headline = headline;
  this.display_name = display_name;
  this.display_url = display_url;	
  this.isPaid = isPaid;
  this.parentBrowser = null;
}						
							
/* class for the slide player */
function InsideCOLBrowser( 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 = "http://www.catholic.org/images/video/control_rewind.gif";
  this.leftImgOn = "http://www.catholic.org/images/video/control_rewind_blue.gif";
  this.rightImgOff = "http://www.catholic.org/images/video/control_fastforward.gif";
  this.rightImgOn = "http://www.catholic.org/images/video/control_fastforward_blue.gif";
	
  // self-register
  //this = window.insideCOLBrowserInstance;
}

InsideCOLBrowser.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", "moth_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", "moth_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
  }
}

InsideCOLItem.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" );
      headerObj.setAttribute( "align", "left");
      headerObj.setAttribute( "width", "150");
      headerTitleObj = document.createElement( "DIV" );

      if (this.display_url == "#") { 
        anchorObj = document.createTextNode(this.display_name);
      } else {
        anchorObj = document.createElement("A");
        anchorObj.className = "blksmallbold";
        anchorObj.setAttribute("href", this.display_url);				
        if( this.isPaid ) { 
          linkedObj = document.createElement("IMG");
          linkedObj.setAttribute("src", "stuff/titleimage.gif");	
          anchorObj.appendChild(linkedObj);
        } else {
          anchorObj.appendChild(document.createTextNode( this.display_name + " »"));
        }
      }				
      headerTitleObj.appendChild( anchorObj );
      headerObj.appendChild( headerTitleObj );
      //this.parentBrowser.getHeaderRow().appendChild( headerObj );
			
      // create body
      tdObj = document.createElement( "TD" );
      tdObj.setAttribute( "align", "left");
      tdObj.setAttribute( "valign", "top");
      tdObj.setAttribute( "width", "150");
      storyObj = document.createElement( "DIV" );
      storyObj.className = "story";
      calloutObj = document.createElement( "DIV" );
      calloutObj.className = "callout";
      calloutLinkObj = document.createElement( "A" );
      calloutLinkObj.setAttribute( "href" , this.url );
      calloutImgObj = document.createElement( "IMG" );
      calloutImgObj.setAttribute( "src" , this.imgUrl );
      calloutImgObj.setAttribute( "alt" , this.headline );
      calloutImgObj.setAttribute( "width", "88");
      calloutImgObj.setAttribute( "height", "66");
      calloutImgObj.setAttribute( "style", "border:1px #cccccc solid;");
      calloutLinkObj.appendChild( calloutImgObj );
      calloutObj.appendChild( calloutLinkObj );
      storyObj.appendChild( calloutObj );
      headlineObj = document.createElement( "DIV" );
      headlineObj.className = "sliderLink";
      headlineLinkObj = document.createElement( "A" );
      headlineLinkObj.setAttribute( "href" , this.url );

      if( this.isPaid ) headlineLinkObj.className = "select";
        headlineLinkObj.appendChild( document.createTextNode( this.headline ) );

      headlineObj.appendChild( headlineLinkObj );
      storyObj.appendChild( headlineObj );
      tdObj.appendChild( storyObj );
      this.parentBrowser.getBodyRow().appendChild( tdObj );	
    }
  }
}							
							
InsideCOLBrowser.prototype.addItem = function( item ){
  if( item instanceof InsideCOLItem ){
    item.parentBrowser = this;
    this.itemArray.push( item );
  }
}			
							
InsideCOLBrowser.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();
    }
  }
}

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

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

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