//***********************************************************************************
// 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;
var __scrollBarControl_Other = 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 javascript 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;
    }
    if (typeof(width) == "undefined")
    {
    var width = 100;
    }

    if (typeof(height) == "undefined")
    {
    var height = 100;
    }

    if (typeof(interval) == "undefined")
    {
    var interval = 1000;
    }

    if (typeof(direction) == "undefined")
    {
    var direction = "up";
    }

    var barProp = new innerBarProp(barID, width, height, interval, direction);
    var barCount = this.barsArray.length;
    this.barsArray[barCount] = barProp;
}

scrollBar.prototype.createScrollBars = function()
{
    var barCount = this.barsArray.length;
    if (barCount == 0)
    {
    return;
    }

    for (var i=0; i<barCount; i++)
    {
    var objBarID = this.barsArray[i].barID;
    if (typeof(objBarID) == "string")
    {
    var objBar = document.getElementById(objBarID);
    if (objBar == null)
    {
    if (document.readyState == "complete" && document.readyState == "loaded")
    {
    alert("ScrollBar[" + objBarID + "]: not exist!");
    return;
    }
    else
    {
    window.setTimeout("__scrollBarControl.createScrollBars()",50);
    return;
    }
    }
    this.barsArray[i].barID = objBar;
    }
    }
    for (var i=0; i<barCount; i++)
    {
    this.innerInitBar(i);
    }
}


scrollBar.prototype.innerInitBar = function (index)
{ 
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;
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:
alert("ScrollBar[" + id + "]: direction is incorect!");
return;
}
onmouseover = new Function("__scrollBarControl.mouseEvt(" + index + ",true);");
onmouseout = new Function("__scrollBarControl.mouseEvt(" + index + ",false);");
window.setInterval("__scrollBarControl.scroll(" + index + ");",interval);
this.barsArray[index].maxValue = maxValue;
}
}

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

scrollBar.prototype.scroll = function(index)
{
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;
}

















//另一个滚动

function scrollBar_Other()
{
this.barsArray_Other = new Array();
//save current object
__scrollBarControl_Other = this;
}

scrollBar_Other.prototype.addBar_Other = function(barID, width, height, interval, direction)
{
//check parameters
    var paraCount = arguments.length;
    if (paraCount < 1)
    {
    alert("parameters count incorect!");
    return;
    }
    if (typeof(width) == "undefined")
    {
    var width = 100;
    }

    if (typeof(height) == "undefined")
    {
    var height = 100;
    }

    if (typeof(interval) == "undefined")
    {
    var interval = 1000;
    }

    if (typeof(direction) == "undefined")
    {
    var direction = "up";
    }

    var barProp = new innerBarProp(barID, width, height, interval, direction);
    var barCount = this.barsArray_Other.length;
    this.barsArray_Other[barCount] = barProp;
}

scrollBar_Other.prototype.createScrollBars_Other = function()
{
    var barCount = this.barsArray_Other.length;
    if (barCount == 0)
    {
    return;
    }

    for (var i=0; i<barCount; i++)
    {
    var objBarID = this.barsArray_Other[i].barID;
    if (typeof(objBarID) == "string")
    {
    var objBar = document.getElementById(objBarID);
    if (objBar == null)
    {
    if (document.readyState == "complete" && document.readyState == "loaded")
    {
    alert("scrollBar_Other[" + objBarID + "]: not exist!");
    return;
    }
    else
    {
    window.setTimeout("__scrollBarControl_Other.createScrollBars_Other()",50);
    return;
    }
    }
    this.barsArray_Other[i].barID = objBar;
    }
    }
    for (var i=0; i<barCount; i++)
    {
    this.innerInitBar(i);
    }
}

scrollBar_Other.prototype.innerInitBar = function (index)
{ 
var barID = this.barsArray_Other[index].barID;
var width = this.barsArray_Other[index].width;
var height = this.barsArray_Other[index].height;
var interval = this.barsArray_Other[index].interval;
var direction = this.barsArray_Other[index].direction;
var maxValue = 0;
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:
alert("scrollBar_Other[" + id + "]: direction is incorect!");
return;
}
onmouseover = new Function("__scrollBarControl_Other.mouseEvt(" + index + ",true);");
onmouseout = new Function("__scrollBarControl_Other.mouseEvt(" + index + ",false);");
window.setInterval("__scrollBarControl_Other.scroll(" + index + ");",interval);
this.barsArray_Other[index].maxValue = maxValue;
}
}

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

scrollBar_Other.prototype.scroll = function(index)
{
var barID = this.barsArray_Other[index].barID;
var width = this.barsArray_Other[index].width;
var height = this.barsArray_Other[index].height;
var interval = this.barsArray_Other[index].interval;
var direction = this.barsArray_Other[index].direction;
var stopScroll = this.barsArray_Other[index].stopScroll;
var preValue = this.barsArray_Other[index].preValue;
var maxValue = this.barsArray_Other[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_Other[index].preValue = preValue;
}