var scrollRepeat;
var elementId = 'scrolldiv';

var cssWidth = 414;
var scrollAmount = (cssWidth / 6) + 1;
var timerAmount = 60;

function getScrollDiv() {
  return document.getElementById(elementId);
}

function scroller(direction)
{
    if (direction == 'left')
    {
        scroll(-scrollAmount);
        scrollRepeat = setInterval("scroll(-scrollAmount)", timerAmount);
    }
    else
    {
        scroll(scrollAmount);
        scrollRepeat = setInterval("scroll(scrollAmount)", timerAmount);
    }
}

function scroll(amount)
{
    var theDiv = getScrollDiv();

    if (theDiv)
    {
        theDiv.scrollLeft += amount;
    }
    else
    {
        alert("'" + elementId + "' does not exist.")
    }

    updateControllers();
}

function updateControllers()
{
    var theDiv = getScrollDiv();
    var backcontroller = document.getElementById("backcontroller");
    var nextcontroller = document.getElementById("nextcontroller");
    if (theDiv.scrollLeft == 0)
    {
        backcontroller.className = "controller backdisabled";
    }
    else
    {
        backcontroller.className = "controller back";
    }

    // dunno why but scrollWidth returns an amount that appears to
    // be the actual width plus the width set for theDiv in css.
    if (theDiv.scrollLeft == theDiv.scrollWidth - cssWidth)
    {
        nextcontroller.className = "controller nextdisabled";
    }
    else
    {
        nextcontroller.className = "controller next";
    }
}

function stopScrolling()
{
    var theDiv = getScrollDiv();
    clearInterval(scrollRepeat);
}