//***********************************************************************************
// JavaScript HTML DIV scroll bar controler
//
// by mostone@hotmail.com 2005.06.15
//
// useage:
// create DIV scrollbar
// scroll directions: scroll up/ down/ left/ right
// setp 1:
// in HTML document, add a div tag and give "id" attribute
// setp 2:
// include this file into your HTML and etc document
// use "<script>" tag include src attribute
// setp 3:
// write your script
// exmple:
// var scrollBarControl = new scrollBar();
// scrollBarControl.addBar("myBarID", 100, 100, 50, "down");
// scrollBarcontrol.createScrollBars();
// finally:
// save your HTML document and test it.
//
//----------------------------------------------------------------------------------
// method:
// scrollBar()
// scrollBarControl class constrction
// without parameters
// addBar(barID, width, height, interval, direction)
// add user bar define
// parameters:
// barID (Required) String <DIV ID="xxx"> the id tag
// width (Optional) Integer that specifies the bar's width
// height (Optional) Integer that specifies the bar's height
// interval (Optional) Integer that specifies the number of milliseconds.
// direction (Optional) String that specifies the scroll direction
//
//***********************************************************************************

var __scrollBarControl = null;

function innerBarProp(barID, width, height, interval, direction)
{
  this.barID = barID;
  this.width = width;
  this.height = height;
  this.interval = interval;
  this.direction = direction;
  this.stopScroll = false;
  this.maxValue = 0;
  this.preValue = 0;
}

function scrollBar()
{
  this.barsArray = new Array();
  //save current object
  __scrollBarControl = this;
}

//////////////////////////////////////////////////////////////////
// add scrollbar to bar list and set properties
// parameters:
// barID: HTML's tag <DIV>'s id property 
// (for js access the DIV object)
// width: define the scrollbar's width
// height: define the scrollbar's height
// interval: define the scroll speed 
// ( scroll up/down per XX millinSecond )
// direction: scroll direction's defined
// "up"
// "down"
// "left"
// "right"
//////////////////////////////////////////////////////////////////
scrollBar.prototype.addBar = function(barID, width, height, interval, direction)
{
  //check parameters
  var paraCount = arguments.length;
  if ( paraCount < 1 )
  {
    alert("parameters count incorect!");
    return;
    //throw "parameters count inccorect!";
  }
  
  //width's default value
  if ( typeof( width ) == "undefined" )
  {
    var width = 100;
  }
  
  //height's default value
  if ( typeof( height ) == "undefined" )
  {
    var height = 100;
  }
  
  //interval's default value
  if ( typeof( interval ) == "undefined" )
  {
    var interval = 1000;
  }
  
  //direction's default value
  if ( typeof( direction ) == "undefined" )
  {
    var direction = "up";
  }
  
  //create scrollbar's inner properties
  var barProp = new innerBarProp(barID, width, height, interval, direction);
  var barCount = this.barsArray.length;
  this.barsArray[barCount] = barProp;
}

scrollBar.prototype.createScrollBars = function()
{
  //get bar's count
  var barCount = this.barsArray.length;
  //if no bar add to scrollControl do nothing
  if ( barCount == 0 )
  {
    return;
  }
  
  //init scroll bars
  for ( var i=0; i<barCount; i++ )
  {
    var objBarID = this.barsArray[i].barID;
    //if typeof objBarID is object
    // that's meaning it inited
    //if typeof objBarID is string
    // init that scroll bar
    if ( typeof( objBarID ) == "string" )
    {
      //get scroll <DIV> object
      var objBar = document.getElementById( objBarID );
      if (objBar == null)
      {
        //objBarID is not exist
        if ( document.readyState == "complete" || document.readyState == "loaded" )
        {
          //the objBarID not exists in current document
          //throw "the objBarID is not exists.";
          alert("ScrollBar[" + objBarID + "]: not exist!");
          return;
        }
        else
        {
          //wait for document to load objBarID
          window.setTimeout("__scrollBarControl.createScrollBars()",50);
          //exit processing..........
          //and wait next time callbak
          return;
        }
      }
      
      //update barID
      this.barsArray[i].barID = objBar;
    }
  }
  
  for ( var i=0; i<barCount; i++ )
  {
    this.innerInitBar(i);
  }
}

scrollBar.prototype.innerInitBar = function (index)
{  
  //get properties
  var barID = this.barsArray[index].barID;
  var width = this.barsArray[index].width;
  var height = this.barsArray[index].height;
  var interval = this.barsArray[index].interval;
  var direction = this.barsArray[index].direction;
  var maxValue = 0;
  
  //set scrollBar's properties
  with(barID)
  {
    style.width = width;
    style.height = height;
    noWrap=true;

    switch( direction )
    {
      case "up":
        maxValue = Math.max(scrollHeight, height);
        style.overflowX = "visible";
        style.overflowY = "hidden";
        var barHtml = innerHTML;
        var newHtml = "<table border='0' cellspacing='0' cellpadding='0'>\n";
        newHtml += " <tr>\n";
        newHtml += " <td height='" + maxValue + "' valign='top'>\n";
        newHtml += barHtml + "\n";
        newHtml += " </td>\n";
        newHtml += " </tr>\n";
        newHtml += " <tr>\n";
        newHtml += " <td height='" + maxValue + "' valign='top'>\n";
        newHtml += barHtml + "\n";
        newHtml += " </td>\n";
        newHtml += " </tr>\n";
        newHtml += "</table>\n";
        innerHTML = newHtml;
        break;
      case "down":
        maxValue = Math.max(scrollHeight, height);
        style.overflowX = "visible";
        style.overflowY = "hidden";
        var barHtml = innerHTML;
        var newHtml = "<table border='0' cellspacing='0' cellpadding='0'>\n";
        newHtml += " <tr>\n";
        newHtml += " <td height='" + maxValue + "' valign='top'>\n";
        newHtml += barHtml + "\n";
        newHtml += " </td>\n";
        newHtml += " </tr>\n";
        newHtml += " <tr>\n";
        newHtml += " <td height='" + maxValue + "' valign='top'>\n";
        newHtml += barHtml + "\n";
        newHtml += " </td>\n";
        newHtml += " </tr>\n";
        newHtml += "</table>\n";
        innerHTML = newHtml;
        scrollTop = maxValue;
        break;
      case "left":
        maxValue = Math.max(scrollWidth, width);
        style.overflowX = "hidden";
        style.overflowY = "visible";
        var barHtml = barID.innerHTML;
        var newHtml = "<table border='0' cellspacing='0' cellpadding='0' width='" + (maxValue * 2 ) + "'>\n";
        newHtml += " <tr>\n";
        newHtml += " <td width='" + maxValue + "' valign='top'>\n";
        newHtml += barHtml + "\n";
        newHtml += " </td>\n";
        newHtml += " <td width='" + maxValue + "' valign='top'>\n";
        newHtml += barHtml + "\n";
        newHtml += " </td>\n";
        newHtml += " </tr>\n";
        newHtml += "</table>\n";
        innerHTML = newHtml;
        break;
      case "right":
        maxValue = Math.max(scrollWidth, width);
        style.overflowX = "hidden";
        style.overflowY = "visible";
        var barHtml = innerHTML;
        var newHtml = "<table border='0' cellspacing='0' cellpadding='0' width='" + (maxValue * 2 ) + "'>\n";
        newHtml += " <tr>\n";
        newHtml += " <td width='" + maxValue + "' valign='top'>\n";
        newHtml += barHtml + "\n";
        newHtml += " </td>\n";
        newHtml += " <td width='" + maxValue + "' valign='top'>\n";
        newHtml += barHtml + "\n";
        newHtml += " </td>\n";
        newHtml += " </tr>\n";
        newHtml += "</table>\n";
        innerHTML = newHtml;
        scrollLeft = maxValue;
        break;
      default:
        //throw "direction is inccorect!";
        alert("ScrollBar[" + id + "]: direction is incorect!");
        return;
    }
    
    //set mouse events
    onmouseover = new Function("__scrollBarControl.mouseEvt(" + index + ",true);");
    onmouseout = new Function("__scrollBarControl.mouseEvt(" + index + ",false);");
    window.setInterval("__scrollBarControl.scroll(" + index + ");",interval);
    
    //save maxValue
    this.barsArray[index].maxValue = maxValue;
  }
}

scrollBar.prototype.mouseEvt = function(index, stop)
{
  this.barsArray[index].stopScroll = stop;
}

scrollBar.prototype.scroll = function(index)
{
  //get properties
  var barID = this.barsArray[index].barID;
  var width = this.barsArray[index].width;
  var height = this.barsArray[index].height;
  var interval = this.barsArray[index].interval;
  var direction = this.barsArray[index].direction;
  var stopScroll = this.barsArray[index].stopScroll;
  var preValue = this.barsArray[index].preValue;
  var maxValue = this.barsArray[index].maxValue;
  
  if ( stopScroll == true ) return;
  
  switch(direction)
  {
    case "up":
        preValue++;
        if ( preValue >= maxValue )
        {
          preValue = 0;
        }
        barID.scrollTop = preValue;
        break;
    case "down":
        preValue--;
        if ( preValue <= 0 )
        {
          preValue = maxValue;
        }
        barID.scrollTop = preValue;
        break;
    case "left":
        preValue++;
        if ( preValue >= maxValue )
        {
          preValue = 0;
        }
        barID.scrollLeft = preValue;
        break;
    case "right":
        preValue--;
        if ( preValue <=0 )
        {
          preValue = maxValue;
        }
        barID.scrollLeft = preValue;
        break;
  }
  this.barsArray[index].preValue = preValue;
}

//=================end of file===========================





















String.prototype.format = function(){
var tmpStr = this;
var iLen = arguments.length;
for(var i=0;i<iLen;i++){
tmpStr = tmpStr.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
}
return tmpStr;
}
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);

if (arguments.length == 1) 
return element;

elements.push(element);
}
return elements;
}
function IMarquee(){
function throwError(){alert("接口未实现：" + arguments[0]);}
this.Scroll = function(){throwError("Scroll");}
this.Clone = function(){throwError("Clone");}
}
function AbstractMarquee(){
IMarquee.apply(this);
var ref = this;
var timer = null;
var container = null;
var indexs = ["ContainerID", "Delay", "Amount", "Width", "Height"];
this.Amount = 1;
this.Delay = 50;
this.Width = 0;
this.Height = 0;
this.ContainerID = "";
this.Start = function(){
clearTimer();
timer = setInterval(ref.Scroll, ref.Delay);
}
this.Stop = function(){
clearTimer();
}
this.Pause = function(){
clearTimer();
}
this.Init = function(){
container = $(this.ContainerID);
if(container == null) {alert("无法找到id为{0}的对象,初始化失败。".format(this.ContainerID));return;};
container.style.overflow = "hidden";
if(this.Width > 0) container.style.width = this.Width + "px";
if(this.Height > 0) container.style.height = this.Height + "px";
this.Clone();
this.AttachEvent();
this.Start();
}
this.AttachEvent = function(){
container.onmouseover = ref.Pause;
container.onmouseout = ref.Start;
}
function clearTimer(){
if(timer != null)clearInterval(timer);
}
function _Marquee(){
var max = Math.min(indexs.length, arguments.length);
for(var i=0;i<max;i++)
this[indexs[i]] = arguments[i];
}
_Marquee.apply(this, arguments);
}
function MarqueeUp(){
AbstractMarquee.apply(this, arguments);
var ref = this;
var container = $(this.ContainerID);
this.Clone = function(){
container.innerHTML = '<div>{0}</div><div>{0}</div>'.format(container.innerHTML);
}
this.Scroll = function(){
with(container){
if(scrollTop >= lastChild.offsetTop) scrollTop -= firstChild.offsetHeight;
else scrollTop += ref.Amount;
}
}
}
function MarqueeDown(){
AbstractMarquee.apply(this, arguments);
var ref = this;
var container = $(this.ContainerID);
this.Clone = function(){
container.innerHTML = '<div>{0}</div><div>{0}</div>'.format(container.innerHTML);
container.scrollTop = container.scrollHeight;
}
this.Scroll = function(){
with(container){
if(scrollTop <= firstChild.offsetTop) scrollTop += lastChild.offsetHeight;
else scrollTop -= ref.Amount;
}
}
}
function MarqueeLeft(){
AbstractMarquee.apply(this, arguments);
var ref = this;
var container = $(this.ContainerID);
this.Clone = function(){
container.innerHTML = '<table cellspacing="0" cellpadding="0" border="0"><tr><td>{0}</td><td>{0}</td></tr></table>'.format(container.innerHTML);
}
this.Scroll = function(){
with(container){
if(scrollLeft >= firstChild.rows[0].cells[1].offsetLeft) scrollLeft -= firstChild.rows[0].cells[0].offsetWidth;
else scrollLeft += ref.Amount;
}
}
}
function MarqueeRight(){
AbstractMarquee.apply(this, arguments);
var ref = this;
var container = $(this.ContainerID);
this.Clone = function(){
container.innerHTML = '<table cellspacing="0" cellpadding="0" border="0"><tr><td>{0}</td><td>{0}</td></tr></table>'.format(container.innerHTML);
container.scrollLeft = container.scrollWidth;
}
this.Scroll = function(){
with(container){
if(scrollLeft <= firstChild.rows[0].cells[0].offsetLeft) scrollLeft += firstChild.rows[0].cells[1].offsetWidth;
else scrollLeft -= ref.Amount;
}
}
}
var Marquee = {
Type : {
UP : function(){return new MarqueeUp(arguments[0]);},
DOWN : function(){return new MarqueeDown(arguments[0]);},
LEFT : function(){return new MarqueeLeft(arguments[0]);},
RIGHT : function(){return new MarqueeRight(arguments[0]);}
},
newInstance : function(type, container){
return this.Type[type.toUpperCase()].call(this, container);
}
}