/* ********************************************************************
*** GreyWyvern's HTML Block Scroller & Marquee ************************
***********************************************************************

***********************************************************************
*** Instructions ******************************************************
***********************************************************************
* 1. Create the target for the scroller in the body of your HTML:
*
* <div id="scr1">
*   The contents of this block will be displayed if the browser does
*   not support the scroller.
*   It will be overwritten if the scroller is supported.
* </div>
*
* Where "scr1" is any name you choose.  You don't have to use a <div>
* either.  You may use any block level element that can be pixel
* resized; such as a <span> element to which the display:block; CSS
* property has been applied.

* For each of the blocks you add to a scroller, the script will add a
* single-celled <table> inside the target element and insert the
* contents of the block. So you may also style these tables as if they
* were part of your document source:
*
* #scr1 table tr td {
*   padding:10px;
*   background-color:#ffffff;
* }
*
***********************************************************************
* 2. Create a new scrollObject:
*
* var scroll1 = new scrollObject("scr1", 120, 120, "up", 5000);
*
* The arguments for this object are as follows:
*  a. - ID of the target tag (from step 1)
*  b. - Width (in pixels) of your scroller
*  c. - Height (in pixels) of your scroller
*  d. - Scroll direction: one of "up", "down", "left" or "right"
*  e. - Amount of time to pause before next scroll begins (ms)
*
***********************************************************************
* 3. Fill the Scroll Object blocks with HTML:
*
* scroll1.block[0] = "This is block 1";
* scroll1.block[1] = "This is block 2";
* scroll1.block[2] = "Blocks can contain any HTML including:";
* scroll1.block[3] = "Images, tables, links and more";
*
* There is no limit to how many blocks or scrollObjects this program
* can hold, as long as you don't skip any integers when numbering the
* blocks. For example, the following setup will cause the scroller to
* throw an error:
*
* scroll1.block[0] = "This is block 1";
* scroll1.block[1] = "This is block 2";
* scroll1.block[3] = "Images, tables, links and more";
*
***********************************************************************
* 4. Add an "onload" command to the <body> tag:
*
* <body onload="scroll1.scroll();">
*
*
***********************************************************************
*** To add more scrollers to the same page: ***************************
***********************************************************************
* 1. Create additional ID'ed targets (with different ID's) in the body
* of your HTML
*
* <div id="scr2">
*   Default content which will not scroll
* </div>
*
***********************************************************************
* 2. Create new scrollObjects for each scroller in the <script> tag:
*
* var scroll2 = new scrollObject("scr2", 468, 60, "down", 10000);
* var scroll3 = new scrollObject("scr3", 140, 140, "right", 4000);
*
***********************************************************************
* 3. Fill the Scroll Object blocks with HTML:
*
* scroll2.block[0] = '<strong>HTML is allowed too!</strong>';
* scroll2.block[1] = '<img src="/images/mybanner.jpg" alt="">';
*
* scroll3.block[0] = "Block 1";
* scroll3.block[1] = "Block 2";
*
***********************************************************************
* 4. Add an "onload" command for all scroll objects to the <body> tag:
*
* <body onload="scroll1.scroll();scroll2.scroll();scroll3.scroll();">
*
*
***********************************************************************
*** End Instructions **************************************************
*************************************************** BEGIN CODE ***** */


/* ********************************************************************
 * The Mighty ScrollObject
 *   - Don't edit this if you know what's good for ya!
 *
 */
function scrollObject(main, width, height, direct, pause) {
  var self = this;
  this.main = main;
  this.block = new Array();
  this.height = height;
  this.width = width;
  this.direct = direct;
  this.pause = pause;
  this.offset = (direct == "up" || direct == "down") ? height : width;
  this.blockprev = 0;
  this.blockcurr = 1;
  this.motion = false;
  this.mouse = false;
  this.scroll = function() {
    if (!document.getElementById) return false;
    this.main = document.getElementById(this.main);
    while (this.main.firstChild) this.main.removeChild(this.main.firstChild);
    for (var x = 0; x < this.block.length; x++) {
      var table = document.createElement('table');
          table.style.position = "absolute";
          table.style.width = this.width + "px";
          table.style.height = this.height + "px";
          table.style.overflow = "hidden";
          table.cellPadding = table.cellSpacing = table.border = "0";
          table.style.left = table.style.top = "0px";
        if (x) {
          switch (direct) {
            case "up": table.style.top = this.height + "px"; break;
            case "down": table.style.top = -(this.height + 2) + "px"; break;
            case "left": table.style.left = this.width + "px"; break;
            case "right": table.style.left = -(this.width + 2) + "px"; break;
          }
        }
        var tbody = document.createElement('tbody');
          var tr = document.createElement('tr');
            var td = document.createElement('td');
                td.innerHTML = this.block[x];
              tr.appendChild(td);
            tbody.appendChild(tr);
          table.appendChild(tbody);
      this.main.appendChild(this.block[x] = table);
    }
    this.main.style.position = "relative";
    this.main.style.width = this.width + "px";
    this.main.style.height = this.height + "px";
    this.main.style.overflow = "hidden";
    if (this.block.length > 1) {
      this.main.onmouseover = function() { self.mouse = true; }
      this.main.onmouseout = function() { self.mouse = false; }
      setInterval(function() { self.scrollLoop(); }, this.pause);
    }
  }
  this.scrollLoop = function() {
    if (!this.motion && this.mouse) return false;
    if (this.offset == 1) {
      this.blockprev = this.blockcurr;
      this.blockcurr = (this.blockcurr + 1 >= this.block.length) ? 0 : this.blockcurr + 1;
      if (this.direct == "up" || this.direct == "down") {
        this.block[this.blockcurr].style.top = ((this.direct == "down") ? "-" : "") + this.height + "px";
        this.block[this.blockprev].style.top = "0px";
        this.offset = this.height;
      } else {
        this.block[this.blockcurr].style.left = ((this.direct == "right") ? "-" : "") + this.width + "px";
        this.block[this.blockprev].style.left = "0px";
        this.offset = this.width;
      } this.motion = false;
    } else {
      if (!this.motion) {
        this.motion = true; var x = -1;
        while (1) { if (Math.abs(this.offset) - Math.pow(2, ++x) <= Math.abs(this.offset) / 2) break; }
        this.offset = (this.direct == "up" || this.direct == "left") ? Math.pow(2, x) : -Math.pow(2, x);
      } else this.offset /= 2;
      if (this.direct == "up" || this.direct == "down") {
        this.block[this.blockcurr].style.top = this.offset + "px";
        this.block[this.blockprev].style.top = (((this.direct == "down") ? this.height : -(this.height + 2)) + this.offset) + "px";
      } else {
        this.block[this.blockcurr].style.left = this.offset + "px";
        this.block[this.blockprev].style.left = (((this.direct == "right") ? this.width : -(this.width + 2)) + this.offset) + "px";
      } setTimeout(function() { self.scrollLoop(); }, 50);
    }
  }
}
