ÿþ/* **************************************************************************

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

*****************************************************************************

* HTML Block Scroller & Marquee JavaScript - v1.5 - Coded by GreyWyvern

*  - Copyright 2005 - 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 screen, and

* all infinitely adjustable!  Scroller will even pause on mouseover and

* resume on mouseout.

*

* 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="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/orca\"><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 **



/* **************************************************************************

*** 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.active = false;

  this.moving = false;

  this.process = 0;

  this.mouse = false;

  this.scroll = function() {

    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;

        if (this.block.length > 1) {

          divList[i].onmouseover = new Function("if (" + this.objName + ".active) setTimeout(\"" + this.objName + ".scrollWait();\", " + this.objName + ".pause); " + this.objName + ".active = false; " + this.objName + ".mouse = true;");

          divList[i].onmouseout = new Function(this.objName + ".mouse = false;");

        }

      } divList[i].style.overflow = "hidden";

      divList[i].style.width = this.width + "px";

      divList[i].style.height = this.height + "px";

    } this.active = true;

    if (this.block.length > 1) this.process = setTimeout(this.objName + ".scrollLoop();", this.pause);

  }

  this.scrollLoop = function() {

    clearTimeout(this.process);

    if (this.moving == false && this.active == false) return false;

    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>";

      this.moving = false;

      this.process = setTimeout(this.objName + ".scrollLoop();", this.pause);

    } else {

      this.moving = true;

      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";

      } this.process = setTimeout(this.objName + ".scrollLoop();", this.speed);

    }

  }

  this.scrollWait = function() {

    clearTimeout(this.process);

    if (this.active) return false;

    if (!this.mouse) {

      this.active = true;

      this.process = setTimeout(this.objName + ".scrollLoop();", this.pause / 2);

    } else this.process = setTimeout(this.objName + ".scrollWait();", this.pause);

  }

}