/* ********************************************************************
*** GreyWyvern's HTML Block Scroller & Marquee ************************
***********************************************************************
* HTML Block Scroller & Marquee JavaScript - v1.9
*  - Copyright 2007 - Licenced for free distribution under the BSDL
*  -     http://www.opensource.org/licenses/bsd-license.php
*
* Have one or more scrolling blocks of HTML anywhere on your webpages.
* The scroller will even pause on mouseover and resume on mouseout.
*
* Version 1.9
*   - Fixed content flash in Firefox
*   - Code optimization
*
* Version 1.8
*   - Fixed movement in "down" and "right" directions
*   - Added the speed argument back in for customisability
*   - scrollObject ARGUMENT LIST HAS CHANGED
*
* Version 1.7
*   - Significant recode for speed and efficiency
*   - Pause-on-mouseover now works reliably
*   - Now MUCH less complicated to create a scroller
*   - scrollObject ARGUMENT LIST HAS CHANGED
*     - Only five arguments instead of ten :)
*
* Version 1.6
*   - Specifying variable name in argument list no longer required
*   - scrollObject ARGUMENT LIST HAS CHANGED
*
* Version 1.5
*   - Added pause-on-mouseover
*   - Added patch from Vincent Driessen:
*      - Disables scrolling when scrollObject has only one block
*
*
***********************************************************************
*** 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.
*
* To style the scroller container, assign CSS properties to the scr1
* id:
*
* #scr1 {
*   background-color:#f6f6f6;
*   margin:0px auto;
* }
*
* 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 to style the blocks of your scroller, you
* can style these table cells as if they were actually part of your
* document source:
*
* #scr1 table tr td {
*   padding:10px;
*   color:#ff0000;
*   text-align:center;
*   vertical-align:middle;
* }
*
***********************************************************************
* 2. Create a new scrollObject:
*
* var scroll1 = new scrollObject("scr1", 120, 120, "up", 5000, 1.4);
*
* 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)
*  f. - Slide-in speed of your scroller (1.001 up to width or height)
*
***********************************************************************
* 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";
* scroll1.block[4] = "Easy to configure, easy to run";
* scroll1.block[5] = "Have any number of block scrollers running";
* scroll1.block[6] = "On a single page all with a single JavaScript";
* scroll1.block[7] = "View the source for more info!";
*
* 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>
*
* <div id="scr3">
*   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, 1.2);
* var scroll3 = new scrollObject("scr3", 140, 140, "right", 4000, 2);
*
***********************************************************************
* 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="">';
* scroll2.block[2] = '<a href="/home">And links!</a>';
* scroll2.block[2] = 'As long as it fits within the dimensions above';
*
* scroll3.block[0] = "Block 1";
* scroll3.block[1] = "Block 2";
* scroll3.block[2] = "Block 3";
* scroll3.block[3] = "Block 4";
*
***********************************************************************
* 4. Add an "onload" command for all scroll objects to the <body> tag:
*
* <body onload="scroll1.scroll();scroll2.scroll();scroll3.scroll();">
*
* or
*
* window.onload = function() {
*   scroll1.scroll();
*   scroll2.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, speed) {
  var self = this;
  this.main = main;
  this.width = width;
  this.height = height;
  this.direct = direct;
  this.pause = pause;
  this.speed = Math.max(1.001, Math.min((direct == "up" || direct == "down") ? height : width, speed));
  this.block = new Array();
  this.blockprev = this.offset = 0;
  this.blockcurr = 1;
  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);
    this.main.style.overflow = "hidden";
    this.main.style.position = "relative";
    this.main.style.width = this.width + "px";
    this.main.style.height = this.height + "px";
    for (var x = 0; x < this.block.length; x++) {
      var table = document.createElement('table');
          table.cellPadding = table.cellSpacing = table.border = "0";
          table.style.position = "absolute";
          table.style.left = table.style.top = "0px";
          table.style.width = this.width + "px";
          table.style.height = this.height + "px";
          table.style.overflow = table.style.visibility = "hidden";
        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);
    }
    if (this.block.length > 1) {
      this.main.onmouseover = function() { self.mouse = true; }
      this.main.onmouseout = function() { self.mouse = false; }
      setInterval(function() {
        if (!self.offset && self.scrollLoop()) self.block[self.blockcurr].style.visibility = "visible";
      }, this.pause);
    } this.block[this.blockprev].style.visibility = "visible";
  }
  this.scrollLoop = function() {
    if (!this.offset) {
      if (this.mouse) return false;
      this.offset = (this.direct == "up" || this.direct == "down") ? this.height : this.width;
    } else this.offset = Math.floor(this.offset / this.speed);
    if (this.direct == "up" || this.direct == "down") {
      this.block[this.blockcurr].style.top = ((this.direct == "up") ? this.offset : -this.offset) + "px";
      this.block[this.blockprev].style.top = ((this.direct == "up") ? this.offset - this.height : this.height - this.offset) + "px";
    } else {
      this.block[this.blockcurr].style.left = ((this.direct == "left") ? this.offset : -this.offset) + "px";
      this.block[this.blockprev].style.left = ((this.direct == "left") ? this.offset - this.width : this.width - this.offset) + "px";
    }
    if (!this.offset) {
      this.block[this.blockprev].style.visibility = "hidden";
      this.blockprev = this.blockcurr;
      if (++this.blockcurr >= this.block.length) this.blockcurr = 0;
    } else setTimeout(function() { self.scrollLoop(); }, 30);
    return true;
  }
}