/* **************************************************************************
*** GreyWyvern's HTML Block Scroller & Marquee ******************************
*****************************************************************************
* HTML Block Scroller & Marquee JavaScript - v1.3 - Coded by GreyWyvern
*  - Copyright 2003 - Licenced for free distribution under the GPL
*  - W3C DOM compliant!
*
* Have one or more scrolling blocks of HTML anywhere on your screen, and
* all infinitely adjustable!
*
* Version 1.3 now allows you to scroll in four directions: down, right and
* left as well as up!  Be careful when upgrading from 1.2 to 1.3 as the
* arguments for the object constructor have changed.
* Hope you like it!  Send comments/suggestions to: wyvern@greywyvern.com
*
* Tested for compliance in/with:
* MSIE 6.0sp1, Netscape 7.x, Mozilla 1.4.0, Opera 7.x
* 500MHz processor, 196MB RAM
*      !!! Does not rule out compliance with earlier versions !!!
*
* Issues:
* 1. Warning - Netscape and Mozilla will not obey the overflow:hidden; CSS
* styles even though they appear to do so.  Scrollbars will appear on your
* page if you have a large scroller and place it near the edge of the browser
* window, or in a table cell with not enough space.  This happens even
* though the scroller looks and functions exactly like in Opera and IE.
*   While the scroller will not push content around it away, it will resize
* containing elements if they enclose it too tightly.  To keep your scroller
* looking the same in all browsers, make sure you give plenty of room on the
* side which you are scrolling from.  ie. space above if scrolling down, or
* space to the left if scrolling right.
*
*****************************************************************************
*** Instructions ************************************************************
*****************************************************************************
* 1. Create the target for the scroller in the body of your HTML:
*
* <div id="MainName">
*   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 "MainName" 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.
*
*****************************************************************************
* 2. Create a Cascading Style Sheets (CSS) class for blocks in this scroller:
*
* <style type="text/CSS">
*   .scrollClass {
*     text-align:center;
*     font:normal 80% Arial,sans-serif;
*   }
* </style>
*
*****************************************************************************
* 3. Create a new scrollObject:
*
* var scroller1 = new scrollObject("scroller1", "MainName", 120, 120, "white", "up", 1.35, 2.7, 30, 5000, "scrollClass");
*
* The arguments for this object are as follows:
*  a. - The variable name you are giving this scrollObject
*  b. - ID of the target tag (from step 1)
*  c. - Width (in pixels) of your scroller
*  d. - Height (in pixels) of your scroller
*  e. - Default background colour of the outer tag, can also be hexcode in the form: #rrggbb
*  f. - Scroll direction: one of "up", "down", "left" or "right"
*  g. - Decceleration index as block is moved (nominal range: 1 => 2)
*  h. - Initial speed of a block at beginning of slide:
*         Maximum speed as this value approaches one
*         Minimum speed as this value approaches scroller height
*  i. - Delay between each incremental movement upwards (milliseconds)
*  j. - Amount of time to pause before next scroll begins (milliseconds)
*  k. - CSS class name for blocks (from step 2)
*
* By adjusting the values for g and h you can dramatically change the
* animation style of your scroller.
*
* For example, if you make h = 1, you won't even see the "slide" effect; new
* blocks will simply *appear* over the old ones.  By contrast, if you set h
* to the height (if scrolling up or down) or width (if scrolling left or
* right) of your block, there will be no "slowdown" effect, and new blocks
* will slide in one pixel at a time.
*
* A low g value (less than 1.2) will weaken the slowdown effect, while a high
* g value (greater than 1.2) will increase it.
*
*****************************************************************************
* 4. Fill your Scroll Object with HTML:
*
* scroller1.block[0] = "This is block 1";
* scroller1.block[1] = "This is block 2";
* scroller1.block[2] = "Blocks can contain any HTML including:";
* scroller1.block[3] = "Images, tables, links and more";
* scroller1.block[4] = "Easy to configure, easy to run, with content automatically centred horizontally and vertically";
* scroller1.block[5] = "Have any number of block scrollers running on a single page all with a single JavaScript";
* scroller1.block[6] = "View the source for more info!";
*
* There is no limit to how many blocks or scrollObjects this program can
* hold, as long as there are no spaces in the numbering of an array (ie.
* name.block[0], name.block[1], name.block[2], ...), and all double-quotes
* (") are escaped (preceded) with a backslash (\), except the very first and
* last set (the ones which bound the HTML itself).
*
*   Eg.
*     "He said "Hi!"";
*   becomes
*     "He said \"Hi!\"";
*
*****************************************************************************
* 5. Add an "onload" command to the <body> tag:
*
* <body onload="scroller1.scroll();">
*
* And you're done!
*
*****************************************************************************
*** Adding more block scrollers to the same page: ***************************
*****************************************************************************
* 1. Create additional ID'ed targets (with different ID's) in the body of
* your HTML
*
* <div id="MainName2">
*   Scroller not supported.
* </div>
*
* <div id="MainName3">
*   Sorry, too bad for you.
* </div>
*
*****************************************************************************
* 2. Create additional classes for new blocks if you wish, or use the same
* class.
*
* <style type="text/CSS">
*   .scrollClass {
*     text-align:center;
*     font:normal 70% Arial,sans-serif;
*   }
*   .scrollClass2 {
*     text-align:center;
*     font:normal 80% Courier,monospace;
*     background-color:blue;
*   }
*   .scrollClass3 {
*     text-align:right;
*     font:bold 100% Arial,sans-serif;
*     background-color:#ffda00;
*     color:#00adff;
*   }
* </style>
*
*****************************************************************************
* 3. Create new scrollObjects for each scroller in the <script> tag:
*
* var scroller2 = new scrollObject("scroller2", "MainName2", 468, 60, "yellow", "down", 1.35, 2, 40, 10000, "scrollClass2");
* var scroller3 = new scrollObject("scroller3", "MainName3", 140, 140, "#ff8822", "right", 1.95, 3.1, 20, 4000, "scrollClass3");
*
*****************************************************************************
* 4. Fill your Scroll Objects with HTML:
*
* scroller2.block[0] = "<a href=\"http://www.greywyvern.com\"><span style=\"font:bold 200% fantasy;\">Visit GreyWyvern.com!</span></a>";
* scroller2.block[1] = "<a href=\"http://www.greywyvern.com/forum.php\"><strong>Home of the Orca Scripts!</strong></a>";
* scroller2.block[2] = "<a href=\"http://www.greywyvern.com\"><img src=\"http://www.greywyvern.com/img/jpg/bannerorca468x60.jpg\" border=\"0\"/></a>";
*
* scroller3.block[0] = "Block 1";
* scroller3.block[1] = "Block 2";
* scroller3.block[2] = "Block 3";
* scroller3.block[3] = "Block 4";
*
*****************************************************************************
* 5. Add an "onload" command for each scroll object to the <body> tag:
*
* <body onload="scroller1.scroll(); scroller2.scroll(); scroller3.scroll();">
*
*****************************************************************************
*** End Instructions ********************************************************
***************************************** Create your scroll objects below **
***** BEGIN CODE ***** Two sample objects are provided for experimentation */
/*
var scObj1 = new scrollObject("scObj1", "Main", 120, 120, "white", "up", 1.45, 3, 30, 5000, "scrollClass");

scObj1.block[0] = "This is block 1";
scObj1.block[1] = "This is block 2, which appears five seconds later";
scObj1.block[2] = "Blocks can contain any HTML including:";
scObj1.block[3] = "Images, tables, links and more";
scObj1.block[4] = "Easy to configure, easy to run, with content automatically centred horizontally and vertically";
scObj1.block[5] = "Have any number of block scrollers running on a single page all with a single JavaScript";
scObj1.block[6] = "View the source for more info!";


var scObj2 = new scrollObject("scObj2", "Main2", 468, 60, "#f4f4ff", "left", 1.37, 2.7, 30, 3000, "scrollClass");

scObj2.block[0] = "<a href=\"http://www.greywyvern.com\"><span style=\"font:bold 200% fantasy;\">Visit GreyWyvern.com!</span></a>";
scObj2.block[1] = "<a href=\"http://www.greywyvern.com/forum.php\"><strong>Home of the Orca Scripts!</strong></a>";
scObj2.block[2] = "<a href=\"http://www.greywyvern.com\"><img src=\"http://www.greywyvern.com/img/jpg/bannerorca468x60.jpg\" border=\"0\"/></a>";
*/
/* **************************************************************************
*** Don't pass this line ****************************************************
************************************************************************** */
function scrollObject(objName, main, width, height, bkgcol, direct, deccel, begin, speed, pause, classname) {
  this.objName = objName;
  this.main = main;
  this.one = main + "Block1";
  this.two = main + "Block2";
  this.block = new Array();
  this.blockup = 1;
  this.divup = 1;
  this.height = height;
  this.width = width;
  this.bkgcol = bkgcol;
  this.direct = direct;
  this.deccel = Math.max(deccel, 1);
  this.begin = Math.max(Math.min(begin, (direct == "up" || direct == "down") ? height : width), 1);
  this.speed = speed;
  this.pause = pause;
  this.slide = ((direct == "up" || direct == "down") ? height : width) / this.begin;
  this.table = "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td class=\"" + classname + "\" style=\"width:" + width + "px;height:" + height + "px;\">";
  this.scroll = scroll;
  this.scrollLoop = scrollLoop;
}

function scroll() {if (!document.getElementById) return false;
  document.getElementById(this.main).innerHTML = "<div id=\"" + this.one + "\"></div><div id=\"" + this.two + "\"></div>";
  var divList = [document.getElementById(this.main), document.getElementById(this.one), document.getElementById(this.two)];
  for (var i = 0; i <= 2; i++) {
    if (i > 0) {
      divList[i].style.position = "absolute";
      if (this.direct == "up" || this.direct == "down") {
        divList[i].style.left = "0px";
        divList[i].style.top = (i == 1) ? "0px" : ((this.direct == "up") ? "" : "-") + this.height + "px";
      } else {
        divList[i].style.left = (i == 1) ? "0px" : ((this.direct == "left") ? "" : "-") + this.width + "px";
        divList[i].style.top = "0px";
      } divList[i].innerHTML = this.table + this.block[i - 1] + "</td></tr></table>";
    } else {
      divList[i].style.position = "relative";
      divList[i].style.background = this.bkgcol;
    }
    divList[i].style.width = this.width + "px";
    divList[i].style.height = this.height + "px";
    divList[i].style.overflow = "hidden";
  } setTimeout(this.objName + ".scrollLoop();", this.pause);
}

function scrollLoop() {
  var divList = [document.getElementById(this.main), document.getElementById(this.one), document.getElementById(this.two)];
  this.slide = Math.max(this.slide / this.deccel, 1);
  var slideInc = (this.direct == "up" || this.direct == "left") ? -parseInt(this.slide) : parseInt(this.slide);
  if ((this.direct == "up" && Math.max(parseInt(divList[1].style.top) + slideInc, parseInt(divList[2].style.top) + slideInc) <= 0) ||
      (this.direct == "down" && Math.min(parseInt(divList[1].style.top) + slideInc, parseInt(divList[2].style.top) + slideInc) >= 0) ||
      (this.direct == "left" && Math.max(parseInt(divList[1].style.left) + slideInc, parseInt(divList[2].style.left) + slideInc) <= 0) ||
      (this.direct == "right" && Math.min(parseInt(divList[1].style.left) + slideInc, parseInt(divList[2].style.left) + slideInc) >= 0)) {
    this.slide = ((this.direct == "up" || this.direct == "down") ? this.height : this.width) / this.begin;
    if (++this.blockup >= this.block.length) this.blockup = 0;
    this.divup = (this.divup == 1) ? 2 : 1;
    if (this.direct == "up" || this.direct == "down") {
      divList[3 - this.divup].style.top = ((this.direct == "down") ? "-" : "") + this.height + "px";
      divList[this.divup].style.top = "0px";
    } else {
      divList[3 - this.divup].style.left = ((this.direct == "right") ? "-" : "") + this.width + "px";
      divList[this.divup].style.left = "0px";
    } divList[3 - this.divup].innerHTML = this.table + this.block[this.blockup] + "</td></tr></table>";
    setTimeout(this.objName + ".scrollLoop();", this.pause);
  } else {
    for (var j = 1; j <= 2; j++) {
      if (this.direct == "up" || this.direct == "down") {
        divList[j].style.top = (parseInt(divList[j].style.top) + slideInc) + "px";
      } else divList[j].style.left = (parseInt(divList[j].style.left) + slideInc) + "px";
    } setTimeout(this.objName + ".scrollLoop();", this.speed);
  }
}