// Processes to scroll articles across a given display area for the
//   effect seen on many website where the main stories scroll in and 
//   out of a given frame
// Author; John Ironmonger.
// Created; November 8th, 2010.

  
  // givenDivId    The id attribute of the div to scroll articles across
  // articleDivIds An array of div id attributes. Each div should be a div  
  //               in the html file that contains an article ready to  
  //               scroll in and out of the display box 
  function articleBoard(givenDivId, articleDivIds, interval, boardType) {
    this.height = 0;
//    // Check and validate div array. 
//    // After this each element will contain a valid div id
    // Get max height of content divs to set board height
    for (var i = 0; i < articleDivIds.length; i++) {
//      if (document.getElementById(articleDivIds[i]) == null) {
//        // Remove this id from the array
//        articleDivIds.splice(i, 1);
//      } else {
        // document.getElementById(articleDivIds[i]).style.visibility = 'visible';
        this.height = Math.max(
            document.getElementById(articleDivIds[i]).offsetHeight, this.height);
        //document.getElementById(articleDivIds[i]).style.visibility = 'hidden';
//      }
    }
    
    // Setup some constants for this page
    this.divId = givenDivId;
    this.articeIds = articleDivIds;
    this.interval = 5000;
    if (interval != null) {
      this.interval = interval;
    }
//    // Offset height and width return numeric values
//    this.width = document.getElementById(this.divId).offsetWidth;
//    this.height = document.getElementById(this.divId).offsetHeight;
    
    // Start by displaying the first article if there is one
    if (this.divId.length > 0) {
      document.getElementById(this.articeIds[0]).style.visibility = '';
    }
    
    // Set height of containing div to height of largest content
    document.getElementById(givenDivId).style.height = this.height + 'px';
    
    // If there is more than one article then start board process
    if (this.divId.length > 1) {
      this.outId = this.articeIds.length - 1;
      this.outDiv = document.getElementById(this.articeIds[this.outId]);
      this.inId = 0;
      this.inDiv = document.getElementById(this.articeIds[this.inId]);
      if (boardType == "scroll") {
        this.scrollCleanup();
      } else if (boardType == "fade") {
        this.fadeCleanup();
      } else {
        this.fadeCleanup();
      }
    }
  }
  
  
  
  // Scroll in the article with the inId. The outID should be the id
  // of the article currently displayed
  articleBoard.prototype.scrollStart = function() {
    var instanceOfBoard = this;
    // To scroll in from right
    
    // Offset height and width return numeric values. Need to update each
    // time in case the size of the containing div changed
    this.width = document.getElementById(this.divId).offsetWidth;
    this.height = document.getElementById(this.divId).offsetHeight;

    // Set position of in div to right side and top
    // document.getElementById(this.articeIds[this.inId]).style.top = '0px';
    this.inDiv.style.left = (this.width + 3) + 'px';
    // Set size of in div while scrolling. 
    // Reset back to nothing so resizing will work once scrolling is done
    this.inDiv.style.width = this.width + 'px';
    this.inDiv.style.height = this.height + 'px';
    // Enable display on the new div
    this.inDiv.style.visibility = '';

    // Setup existing out div to scroll out
    // Set position of out div 
    // document.getElementById(this.articeIds[this.outId]).style.top = '0px';
    this.outDiv.style.left = '0px';
    // Set size of out div while scrolling. 
    // Reset back to nothing so resizing will work once scrolling is done
    this.outDiv.style.width = this.width + 'px';
    this.outDiv.style.height = this.height + 'px';
    
    this.scrollStep();    
  }
  
  
  // Scroll the article 1 step
  articleBoard.prototype.scrollStep = function() {
    var instanceOfBoard = this;
    // Set position of out div 
    this.outDiv.style.left = -this.step + 'px';
    // Set position of in div to right side and top
    this.inDiv.style.left = (this.width - this.step + 3) + 'px';
    
    this.step += 7;
    if (this.step < this.width) {
      setTimeout(function(){instanceOfBoard.scrollStep()}, 10);    
    } else {
      instanceOfBoard.scrollCleanup();
    }
  }
  
  
  // Clean up after scroll in
  articleBoard.prototype.scrollCleanup = function() {
    var instanceOfBoard = this;
  
    // Disable display on the out div
    this.outDiv.style.visibility = 'hidden';
//    // Reset size values on out div
//    this.outDiv.style.width = '';
//    this.outDiv.style.height = '';
    
    // Reset size values on in div
    this.inDiv.style.width = '';
    this.inDiv.style.height = '';
    // Reset position values on in div
    this.inDiv.style.left = '';
    // document.getElementById(this.articeIds[this.inId]).style.right = '';

    // Setup for next scroll
    this.outId++;
    if (this.outId == this.articeIds.length) this.outId = 0;
    this.outDiv = document.getElementById(this.articeIds[this.outId]);
    this.inId++;
    if (this.inId == this.articeIds.length) this.inId = 0;
    this.inDiv = document.getElementById(this.articeIds[this.inId]);

    this.step = 4;
    setTimeout(function(){instanceOfBoard.scrollStart()}, 
        instanceOfBoard.interval);
  }
  
  
  
  // Fade in the article with the inId. The outID should be the id
  // of the article currently displayed
  articleBoard.prototype.fadeStart = function() {
    var instanceOfBoard = this;
    // Setup in div
    // Make it top div
    this.inDiv.style.zIndex = '3';
    // Make in div transparent
    // Little number measn more transparent
    this.setOpacity(this.inDiv, 10)
    // Enable display on the new div
    this.inDiv.style.visibility = '';

    // Make out div opaque
    // Big number means more opaue
    this.setOpacity(this.outDiv, 90)
    
    this.fadeStep();    
  }

  articleBoard.prototype.setOpacity = function(object, opacity) {  
    // This works on FireFox and Chrome
    object.style.opacity = opacity / 100;
    // Ofr IE  Tested in IE 7
    // alert(typeof(object.style.filter));
    if (typeof(object.style.filter) == 'string') {
      object.style.filter = 'alpha(opacity=' + opacity + ')';
    }
  }  
  
  
  // Next step for fading board
  articleBoard.prototype.fadeStep = function() {
    var instanceOfBoard = this;
    // Set opacity on out div 
    this.setOpacity(this.outDiv, 100 - this.step)
    // Set opacity on in div
    this.setOpacity(this.inDiv, this.step)
    
    this.step += 2;
    if (this.step < 95) {
      setTimeout(function(){instanceOfBoard.fadeStep()}, 20);    
    } else {
      instanceOfBoard.fadeCleanup();
    }
  }
  
  
  // Clean up after scroll in
  articleBoard.prototype.fadeCleanup = function() {
    var instanceOfBoard = this;
  
    // Disable display on the out div
    this.outDiv.style.visibility = 'hidden';
    
    // Reset z-index on in div
    this.inDiv.style.zIndex = '';

    // Setup for next scroll
    this.outId++;
    if (this.outId == this.articeIds.length) this.outId = 0;
    this.outDiv = document.getElementById(this.articeIds[this.outId]);
    this.inId++;
    if (this.inId == this.articeIds.length) this.inId = 0;
    this.inDiv = document.getElementById(this.articeIds[this.inId]);

    this.step = 13;
    setTimeout(function(){instanceOfBoard.fadeStart()}, 
        instanceOfBoard.interval);
  }