//<script>

// Script by Roelof Bos. Copy and modify it free, but please send an email
// to roelof@nieuwsbank.nl to tell me how and where you used it ;-)

/*
Create a marquee:

var marquee = new Marquee (
  ["...",""], // ARRAY strings (html allowed!)
  100,        // INT delay: milliseconds
  200,        // INT steps: number of times the layer is drawn between begin and end 
  2000,       // INT pauze: milliseconds between strings
  "rblt",     // from (use a combination of positions: r, l, t, b)
  "rblt"      // to (use a combination of positions: r, l, t, b)
  // optional:
  200,        // width - % allowed
  20,         // height - % allowed
  )
document.write(marquee.paint());
marquee.start();
// change the direction while running: setDirection(from, to)
marquee.setDirection("l","t");
marquee.stop();

*/

function Marquee (strings,delay,steps,pauze,from,to,w,h) {
  // create:
  if (!window.marquees) window.marquees = new Array;
  this.id = window.marquees.length;
  window.marquees[this.id] = this;
  
  // methods
  this.setDirection = MarqueeSetDirection;
  this.getObject = MarqueeGetObject;
  this.getPixel = MarqueeGetPixel;
  this.setPixel = MarqueeSetPixel;
  this.paint = MarqueePaint;
  this.start = MarqueeStart;
  this.stop = MarqueeStop;
  this.update = MarqueeUpdate;
  
  // properties
  this.strings = strings;
  this.delay   = parseInt(delay);
  this.steps   = parseInt(steps);
  this.pauze   = parseInt(pauze);
  this.w       = w ? w : "100%";
  this.h       = h ? h : "100%";
  this.current = this.strings.length - 1;
  this.pos = this.steps; // the current step number
  this.setDirection(from,to);

  // IE 4+ (will work for Opare too) and Netscape 6+ support
  this.IE = (document.all);
  this.NS = (document.getElementById && !document.all); 

  return this;
  }

function MarqueeSetDirection (from,to) {
  this.from   = new Object();
  this.from.l = /l/.test(from);
  this.from.t = /t/.test(from);
  this.from.r = /r/.test(from);
  this.from.b = /b/.test(from);
  this.to = new Object();
  this.to.l   = /l/.test(to);
  this.to.t   = /t/.test(to);
  this.to.r   = /r/.test(to);
  this.to.b   = /b/.test(to);
  }

function MarqueePaint () {
  var html =  
  "<div id=Marquee_outer" + this.id + 
  " style='width:" + this.w + ";height:" + this.h + ";overflow:hidden;' " +
  "onMouseOut=window.marquees[" + this.id + "].start() " +
  ">" +
  "<div id=Marquee_inner" + this.id + 
  " style='position:relative;" + 
  "width:" + this.w + ";height:" + this.h + ";' " +
  "onMouseOver=window.marquees[" + this.id + "].stop() " +
  //"onMouseOut=window.marquees[" + this.id + "].start() " +
  "></div></div>";
  return html;
  }
 
function MarqueeStart () {
  //window.setTimeout("window.marquees[" + this.id + "].update()",this.speed);
  this.on = true;
  this.update(true);
  }
 
function MarqueeStop () {
  this.on = false;
  }
 
function MarqueeGetObject (id) {
  if (!id) id = "Marquee_inner" + this.id;
  if  (this.NS) return document.getElementById(id);
  else if (this.IE) return document.all(id);
  }
  
function MarqueeGetPixel (which,pos) {
  var id = "Marquee_" + which + this.id;
  if (pos == "Right")  
    return this.getPixel(which,"Left") + this.getPixel(which,"Width");
  else if (pos == "Bottom") 
    return this.getPixel(which,"Top") + this.getPixel(which,"Height");
  else 
    return this.getObject(id)["offset" + pos];
  }

function MarqueeSetPixel (pos,coord) {
  if (this.IE)  this.getObject().style["pixel" + pos] = coord;
  else if (this.NS) {
    if (pos == "Left") this.getObject().style.left = coord;
    if (pos == "Top")  this.getObject().style.top = coord;
    } 
  }
 
function MarqueeUpdate (noPauze) {
  if (this.timer) window.clearTimeout(this.timer);
  if (this.on) {
    if (this.pos == this.steps) {
      this.pos = 0;
      this.current++;
      if (this.current == this.strings.length) this.current = 0;
      var changeHtml = 
        "window.marquees[" + this.id + "].getObject().innerHTML = " +
        "window.marquees[" + this.id + "].strings[window.marquees[" + this.id + "].current];";
      if (this.pauze > 0 && !noPauze) {
        this.timer = window.setTimeout(
          changeHtml + ";window.marquees[" + this.id + "].update();",this.pauze
          );
        return;
        }
      else {
        eval (changeHtml);
        }
      }
    this.pos++; // step number
    var w = this.getPixel("outer","Width");
    var h = this.getPixel("outer","Height");
    var mod = 0; // none
    if (this.from.l) { // left to
      mod++;           // middle
      if (this.to.r) mod++; // right
      }
    else if (this.from.r) { // right to 
      mod++;                // middle
      if (this.to.l) mod++; // left
      }
    var oneStepX = w * mod / this.steps; // to left
    var oneStepY = h * 2 / this.steps;
    var newX = oneStepX * this.pos; // from left
    if (!this.from.l && !this.to.l && !this.from.r && !this.to.r) newX = w; // h middle
    if (this.from.r) newX = (w * 2) - newX // from right
    var newY = oneStepY * this.pos; // from top
    if (!this.from.t && !this.to.t && !this.from.b && !this.to.b) newY = h; // v middle
    if (this.from.b) newY = (h * 2) - newY // from bottom
    this.setPixel("Left",newX - w);
    this.setPixel("Top",newY - h);
    this.timer = window.setTimeout("window.marquees[" + this.id + "].update()",this.delay);
    }
  }