// +-------------------------------------------------------------------+
// | Rolling Message Board           Version 1                         |
// | Copyright 1999  Xin Yang        yangxin@iname.com                 |
// | Created 09/20/1999              Last Modified 11/24/1999          |
// | Web Site:                       http://yx.webprovider.com         |
// +-------------------------------------------------------------------+
// | Copyright 1999  Xin Yang        All Rights Reserved.              |
// |                                                                   |
// | yx_messageRoll.js may be used and hosted free of charge by anyone |
// | for personal purpose so long as this copyright notice remain      |
// | intact.                                                           |
// |                                                                   |
// | Obtain permission before selling the code for this program or     |
// | hosting this program on a commercial web or redistributing this   |
// | program over the Internet or in any other medium. In all cases    |
// | copyright must remain intact.                                     |
// +-------------------------------------------------------------------+

// File       yx_messageRoll.js
// Function   A rolling message board
// Browser    IE4, IE5 & NN4x
// Usage      1. place following line in the <head></head> section:
//               <script language="javascript" src="yx_messageRoll.js"></script>

//            2. place the following style sheet statement where the message board to be shown, and adjust the html alignment accordingly
//               <div id="myMessageBoard" style="position:relative; left:0; top:0; visibility:visible; z-index:1;"></div>

//            3. place the function call in the <body> tag:
//               onload="messageBoard(msgID, msgPool, msgDirection, msgWidth, msgHeight, msgTile, msgInterval)"
//               where:
//               # msgID - should be "myMessageBoard", or you can change the style sheet statement accordingly
//               # msgPool - the user-defined message array, each message should be a html statement string
//               # msgDirection
//                 - 0 : from top to bottom
//                 - 1 : from right to left
//                 - 2 : from bottom to top
//                 - 3 : from left to right
//                 - 4 : from top to bottom and bottom to top
//                 - 5 : from left to right and right to left
//               # msgWidth - the width of the message board
//               # msgHeight - the height of the message board
//               # msgTile - how many tiles a message is to be cut into
//               # msgInterval - how long in seconds a message stays

// Script begins

var is_NN4 = false;
var is_IE4 = false;

var messageHolderID = "";
var messageID = "roll";
var messageFlag = 0;
var messagePool = null;
var messagePoolLength = 0;
var messagePoolIndex = 0;
var messageWidth = 0;
var messageHeight = 0;
var messageTile = 0;
var messageTileIndex = 0;
var messageTileUnit = 0;
var messageTileOffset = 0;
var messageInterval = 0;
var messageDirection = 0;
var messageCurrentDirection = 3;
var messageTop = 0;
var messageRight = 1;
var messageBottom = 2;
var messageLeft = 3;
var messageTopBottom = 4;
var messageLeftRight = 5;

function messageInit() {
  var layerID = "";
  var layerString = "";
  var layerClip = "";
  var this_layer = null;
  var this_string = "";

  if (is_IE4) {
    document.all[messageHolderID].style.width = messageWidth;
    document.all[messageHolderID].style.height = messageHeight;

    for (var l = 0; l <=1; l++)
      for (var i = 0; i < messageTile; i++) {
        layerID = messageID + l + "" + i +"";
        if (messageCurrentDirection == messageLeft)
          layerClip = "clip:rect(0px " + ((i + 1) * messageTileUnit) + "px " + messageHeight + "px " + (i * messageTileUnit) + "px); "
        else
          layerClip = "clip:rect(" + (i * messageTileUnit) + "px " + messageWidth + "px " + ((i + 1) * messageTileUnit) + "px 0px); ";
        layerString = '<div id="' + layerID + '" style="position:absolute; left:0; top:0; width:' + messageWidth + '; height:' + messageHeight + '; ' + layerClip + 'visibility:hidden; z-index:2;"><\/div>';
        document.all[messageHolderID].insertAdjacentHTML("BeforeEnd", layerString);
        document.all[layerID].offset = 0;
      }
    }
  else {
    this_string = "<table width=" + messageWidth + " height=" + messageHeight + " border=0 cellpadding=0 cellspacing=0><tr><td><font size=1>&nbsp;</font></td></tr></table>";
    document.layers[messageHolderID].document.open();
    document.layers[messageHolderID].document.writeln(this_string);
    document.layers[messageHolderID].document.close();

    for (var l = 0; l <=1; l++)
      for (var i = 0; i < messageTile; i++) {
        layerID = messageID + l + "" + i +"";
        document.layers[layerID] = new Layer(messageWidth, document.layers[messageHolderID]);
        this_layer = document.layers[layerID];
        this_layer.height = messageHeight;
        if (messageCurrentDirection == messageLeft) {
          this_layer.clip.top = 0;
          this_layer.clip.right = (i + 1) * messageTileUnit;
          this_layer.clip.bottom = messageHeight;
          this_layer.clip.left = i * messageTileUnit;
        }
        else {
          this_layer.clip.top = i * messageTileUnit;
          this_layer.clip.right = messageWidth;
          this_layer.clip.bottom = (i + 1) * messageTileUnit;
          this_layer.clip.left = 0;
        }
        this_layer.visibility = "hidden";
        this_layer.zIndex = 2;
        this_layer.offset = 0;
      }
    }
}

function messageShow() {
  var layerID = "";
  var this_layer = null

  if (is_IE4)
    for (var i = 0; i < messageTile; i++) {
      layerID = messageID + messageFlag + "" + i + "";
      document.all[layerID].innerHTML = messagePool[messagePoolIndex];
      document.all[layerID].style.visibility = "visible";
    }
  else
    for (var i = 0; i < messageTile; i++) {
      layerID = messageID + messageFlag + "" + i + "";
      this_layer = document.layers[layerID];
      this_layer.document.open();
      this_layer.document.writeln(messagePool[messagePoolIndex]);
      this_layer.document.close();
      this_layer.visibility = "show";
    }
}

function messageRollLeft() {
  var messageIn = 1 - messageFlag;
  var messageOut = messageFlag;
  var layerIDIn = "";
  var layerIDOut = "";
  var layerClipIn = "";
  var layerClipOut = "";
  var layerOffset = 0;
  var messageTileCount = 0;
  var loopBreak = false;
  var TileDone = false;
  var ii = 0;

  messageTileOffset++;

  for (var i = messageTileIndex; i < messageTile; i++) {
    ii = i + 1;
    layerIDIn =  messageID + messageIn + "" + i + "";
    layerIDOut =  messageID + messageOut + "" + i + "";
    if (is_IE4) {
      layerOffset = messageTileUnit - --document.all[layerIDIn].offset;
      layerClipIn = "rect(0px " + (ii * messageTileUnit) + "px " + messageHeight + "px " + (ii * messageTileUnit - layerOffset) + "px)";
      layerClipOut = "rect(0px " + (ii * messageTileUnit - layerOffset) + "px " + messageHeight + "px " + (i * messageTileUnit) + "px)";
      document.all[layerIDIn].style.clip = layerClipIn;
      document.all[layerIDOut].style.clip = layerClipOut;
      document.all[layerIDIn].style.pixelLeft = layerOffset - messageTileUnit;
      document.all[layerIDOut].style.pixelLeft = layerOffset;
    }
    else {
      layerOffset = messageTileUnit - --document.layers[layerIDIn].offset;
      document.layers[layerIDIn].clip.left--;
      document.layers[layerIDIn].left++;
      document.layers[layerIDOut].clip.right--;
      document.layers[layerIDOut].left++;
    }
    if (layerOffset == messageTileUnit)
      TileDone = true;

    messageTileCount++;

    if (messageTileCount >= messageTileUnit) {
      loopBreak = true;
      messageTileIndex++;
      break;
    }

    if (messageTileCount >= messageTileOffset) {
      loopBreak = true;
      break;
    }
  }

  if (!loopBreak && TileDone)
    messageTileIndex++;

  if (messageTileIndex < messageTile)
    setTimeout("messageRollLeft()", 1)
  else {
    messageFlag = 1 - messageFlag;
    messageBuildLeftRight();
  }
}

function messageRollRight() {
  var messageIn = 1 - messageFlag;
  var messageOut = messageFlag;
  var layerIDIn = "";
  var layerIDOut = "";
  var layerClipIn = "";
  var layerClipOut = "";
  var layerOffset = 0;
  var messageTileCount = 0;
  var loopBreak = false;
  var TileDone = false;
  var ii = 0;

  messageTileOffset++;

  for (var i = messageTileIndex; i > 0; i--) {
    ii = i - 1;
    layerIDIn =  messageID + messageIn + "" + ii + "";
    layerIDOut =  messageID + messageOut + "" + ii + "";
    if (is_IE4) {
      layerOffset = messageTileUnit - --document.all[layerIDIn].offset;
      layerClipIn = "rect(0px " + (ii * messageTileUnit + layerOffset) + "px " + messageHeight + "px " + (ii * messageTileUnit) + "px)";
      layerClipOut = "rect(0px " + (i * messageTileUnit) + "px " + messageHeight + "px " + (ii * messageTileUnit + layerOffset) + "px)";
      document.all[layerIDIn].style.clip = layerClipIn;
      document.all[layerIDOut].style.clip = layerClipOut;
      document.all[layerIDIn].style.pixelLeft = messageTileUnit - layerOffset;
      document.all[layerIDOut].style.pixelLeft = -layerOffset;
    }
    else {
      layerOffset = messageTileUnit - --document.layers[layerIDIn].offset;
      document.layers[layerIDIn].clip.right++;
      document.layers[layerIDIn].left--;
      document.layers[layerIDOut].clip.left++;
      document.layers[layerIDOut].left--;
    }

    if (layerOffset == messageTileUnit)
      TileDone = true;

    messageTileCount++;

    if (messageTileCount >= messageTileUnit) {
      loopBreak = true;
      messageTileIndex--;
      break;
    }

    if (messageTileCount >= messageTileOffset) {
      loopBreak = true;
      break;
    }
  }

  if (!loopBreak && TileDone)
    messageTileIndex--;

  if (messageTileIndex > 0)
    setTimeout("messageRollRight()", 1)
  else {
    messageFlag = 1 - messageFlag;
    messageBuildLeftRight();
  }
}

function messageBuildLeftRight() {
  var messageIn = 1 - messageFlag;
  var layerID = "";
  var layerClip = "";
  var this_layer = null;

  messagePoolIndex = (++messagePoolIndex < messagePoolLength)?messagePoolIndex:0;

  if (is_IE4)
    for (var i = 0; i < messageTile; i++) {
      layerID =  messageID + messageIn + "" + i + "";
      document.all[layerID].style.visibility = "hidden";
      if (messageCurrentDirection == messageLeft) {
        layerClip = "rect(0px " + ((i + 1) * messageTileUnit) + "px " + messageHeight + "px " + ((i + 1) * messageTileUnit) + "px)";
        document.all[layerID].style.pixelLeft = -messageTileUnit;
      }
      else {
        layerClip = "rect(0px " + (i * messageTileUnit) + "px " + messageHeight + "px " + (i * messageTileUnit) + "px)";
        document.all[layerID].style.pixelLeft = messageTileUnit;
      }
      document.all[layerID].style.clip = layerClip;
      document.all[layerID].innerHTML = messagePool[messagePoolIndex];
      document.all[layerID].style.visibility = "visible";
      document.all[layerID].offset = messageTileUnit;
    }
  else
    for (var i = 0; i < messageTile; i++) {
      layerID =  messageID + messageIn + "" + i + "";
      this_layer = document.layers[layerID];
      this_layer.visibility = "hidden";
      if (messageCurrentDirection == messageLeft) {
        this_layer.clip.top = 0;
        this_layer.clip.right = (i + 1) * messageTileUnit;
        this_layer.clip.bottom = messageHeight;
        this_layer.clip.left = (i + 1) * messageTileUnit;
        this_layer.left = -messageTileUnit;
      }
      else {
        this_layer.clip.top = 0;
        this_layer.clip.right = i * messageTileUnit;
        this_layer.clip.bottom = messageHeight;
        this_layer.clip.left = i * messageTileUnit;
        this_layer.left = messageTileUnit;
      }
      this_layer.document.open();
      this_layer.document.writeln(messagePool[messagePoolIndex]);
      this_layer.document.close();
      this_layer.visibility = "show";
      this_layer.offset = messageTileUnit;
    }

  messageTileOffset = 0;
  if (messageCurrentDirection == messageLeft) {
    messageTileIndex = 0;
    setTimeout("messageRollLeft()", messageInterval);
    if (messageDirection == messageLeftRight)
      messageCurrentDirection = messageRight;
  }
  else {
    messageTileIndex = messageTile;
    setTimeout("messageRollRight()", messageInterval);
    if (messageDirection == messageLeftRight)
      messageCurrentDirection = messageLeft;
  }
}

function messageRollTop() {
  var messageIn = 1 - messageFlag;
  var messageOut = messageFlag;
  var layerIDIn = "";
  var layerIDOut = "";
  var layerClipIn = "";
  var layerClipOut = "";
  var layerOffset = 0;
  var messageTileCount = 0;
  var loopBreak = false;
  var TileDone = false;
  var ii = 0;

  messageTileOffset++;

  for (var i = messageTileIndex; i < messageTile; i++) {
    ii = i + 1;
    layerIDIn =  messageID + messageIn + "" + i + "";
    layerIDOut =  messageID + messageOut + "" + i + "";
    if (is_IE4) {
      layerOffset = messageTileUnit - --document.all[layerIDIn].offset;
      layerClipIn = "rect(" + (ii * messageTileUnit - layerOffset) + "px " + messageWidth + "px " + (ii * messageTileUnit) + "px 0px)";
      layerClipOut = "rect(" + (i * messageTileUnit) + "px " + messageWidth + "px " + (ii * messageTileUnit - layerOffset) + "px 0px)";
      document.all[layerIDIn].style.clip = layerClipIn;
      document.all[layerIDOut].style.clip = layerClipOut;
      document.all[layerIDIn].style.pixelTop = layerOffset - messageTileUnit;
      document.all[layerIDOut].style.pixelTop = layerOffset;
    }
    else {
      layerOffset = messageTileUnit - --document.layers[layerIDIn].offset;
      document.layers[layerIDIn].clip.top--;
      document.layers[layerIDIn].top++;
      document.layers[layerIDOut].clip.bottom--;
      document.layers[layerIDOut].top++;
    }

    if (layerOffset == messageTileUnit)
      TileDone = true;

    messageTileCount++;

    if (messageTileCount >= messageTileUnit) {
      loopBreak = true;
      messageTileIndex++;
      break;
    }

    if (messageTileCount >= messageTileOffset) {
      loopBreak = true;
      break;
    }
  }

  if (!loopBreak && TileDone)
    messageTileIndex++;

  if (messageTileIndex < messageTile)
    setTimeout("messageRollTop()", 1)
  else {
    messageFlag = 1 - messageFlag;
    messageBuildTopBottom();
  }
}

function messageRollBottom() {
  var messageIn = 1 - messageFlag;
  var messageOut = messageFlag;
  var layerIDIn = "";
  var layerIDOut = "";
  var layerClipIn = "";
  var layerClipOut = "";
  var layerOffset = 0;
  var messageTileCount = 0;
  var loopBreak = false;
  var TileDone = false;
  var ii = 0;

  messageTileOffset++;

  for (var i = messageTileIndex; i > 0; i--) {
    ii = i - 1;
    layerIDIn =  messageID + messageIn + "" + ii + "";
    layerIDOut =  messageID + messageOut + "" + ii + "";
    if (is_IE4) {
      layerOffset = messageTileUnit - --document.all[layerIDIn].offset;
      layerClipIn = "rect(" + (ii * messageTileUnit) + "px " + messageWidth + "px " + (ii * messageTileUnit + layerOffset) + "px 0px)";
      layerClipOut = "rect(" + (ii * messageTileUnit + layerOffset) + "px " + messageWidth + "px " + (i * messageTileUnit) + "px 0px)";
      document.all[layerIDIn].style.clip = layerClipIn;
      document.all[layerIDOut].style.clip = layerClipOut;
      document.all[layerIDIn].style.pixelTop = messageTileUnit - layerOffset;
      document.all[layerIDOut].style.pixelTop = -layerOffset;
    }
    else {
      layerOffset = messageTileUnit - --document.layers[layerIDIn].offset;
      document.layers[layerIDIn].clip.bottom++;
      document.layers[layerIDIn].top--;
      document.layers[layerIDOut].clip.top++;
      document.layers[layerIDOut].top--;
    }

    if (layerOffset == messageTileUnit)
      TileDone = true;

    messageTileCount++;

    if (messageTileCount >= messageTileUnit) {
      loopBreak = true;
      messageTileIndex--;
      break;
    }

    if (messageTileCount >= messageTileOffset) {
      loopBreak = true;
      break;
    }
  }

  if (!loopBreak && TileDone)
    messageTileIndex--;

  if (messageTileIndex > 0)
    setTimeout("messageRollBottom()", 1)
  else {
    messageFlag = 1 - messageFlag;
    messageBuildTopBottom();
  }
}

function messageBuildTopBottom() {
  var messageIn = 1 - messageFlag;
  var layerID = "";
  var layerClip = "";
  var this_layer = null;

  messagePoolIndex = (++messagePoolIndex < messagePoolLength)?messagePoolIndex:0;

  if (is_IE4)
    for (var i = 0; i < messageTile; i++) {
      layerID =  messageID + messageIn + "" + i + "";
      document.all[layerID].style.visibility = "hidden";
      if (messageCurrentDirection == messageTop) {
        layerClip = "rect(" + ((i + 1) * messageTileUnit) + "px " + messageWidth + "px " + ((i + 1) * messageTileUnit) + "px 0px)";
        document.all[layerID].style.pixelTop = -messageTileUnit;
      }
      else {
        layerClip = "rect(" + (i * messageTileUnit) + "px " + messageWidth + "px " + (i * messageTileUnit) + "px 0px)";
        document.all[layerID].style.pixelTop = messageTileUnit;
      }
      document.all[layerID].style.clip = layerClip;
      document.all[layerID].innerHTML = messagePool[messagePoolIndex];
      document.all[layerID].style.visibility = "visible";
      document.all[layerID].offset = messageTileUnit;
    }
  else
    for (var i = 0; i < messageTile; i++) {
      layerID =  messageID + messageIn + "" + i + "";
      this_layer = document.layers[layerID];
      this_layer.visibility = "hidden";
      if (messageCurrentDirection == messageTop) {
        this_layer.clip.top = (i + 1) * messageTileUnit;
        this_layer.clip.right = messageWidth;
        this_layer.clip.bottom = (i + 1) * messageTileUnit;
        this_layer.clip.left = 0;
        this_layer.top = -messageTileUnit;
      }
      else {
        this_layer.clip.top = i * messageTileUnit;
        this_layer.clip.right = messageWidth;
        this_layer.clip.bottom = i * messageTileUnit;
        this_layer.clip.left = 0;
        this_layer.top = messageTileUnit;
      }
      this_layer.document.open();
      this_layer.document.writeln(messagePool[messagePoolIndex]);
      this_layer.document.close();
      this_layer.visibility = "show";
      this_layer.offset = messageTileUnit;
    }

  messageTileOffset = 0;
  if (messageCurrentDirection == messageTop) {
    messageTileIndex = 0;
    setTimeout("messageRollTop()", messageInterval);
    if (messageDirection == messageTopBottom)
      messageCurrentDirection = messageBottom;
  }
  else {
    messageTileIndex = messageTile;
    setTimeout("messageRollBottom()", messageInterval);
    if (messageDirection == messageTopBottom)
      messageCurrentDirection = messageTop;
  }
}

function messageBoard(msgID, msgPool, msgDirection, msgWidth, msgHeight, msgTile, msgInterval) {
  is_NN4 = document.layers;
  is_IE4 = document.all;

  if (is_IE4 || is_NN4) {
    messageHolderID = msgID;
    messagePool = msgPool;
    messagePoolLength = messagePool.length;
    messageDirection = msgDirection;
    messageCurrentDirection = messageDirection
    if (messageDirection == messageTopBottom)
      messageCurrentDirection = messageTop;
    if (messageDirection == messageLeftRight)
      messageCurrentDirection = messageLeft;
    messageWidth = msgWidth;
    messageHeight = msgHeight;
    messageTile = msgTile;
    if (messageCurrentDirection == messageLeft || messageCurrentDirection == messageRight)
      messageTileUnit = Math.floor(msgWidth/msgTile)
    else
      messageTileUnit = Math.floor(msgHeight/msgTile);
    messageInterval = msgInterval * 1000;
  
    messageInit();
    messageShow();
  
    if (messageCurrentDirection == messageLeft || messageCurrentDirection == messageRight)
      messageBuildLeftRight()
    else
      messageBuildTopBottom();
  }
}

// Script Ends