var SCROLL_AMOUNT = 5;
var HORIZONTAL = 0;
var VERTICAL = 1;
var UP = 0;
var DOWN = 1;
var LEFT = 2;
var RIGHT = 3;
var timer;
var idToScroll;
var dirToScroll;

function scrollContent()
{
    var id = idToScroll;
    var dir = dirToScroll;

	var element = document.getElementById(id);
	var scroller = element.getElementsByTagName('div')[0];
	scroller.style.top = scroller.style.top || '0px';
	var top = scroller.style.top.replace('px','');
	scroller.style.left = scroller.style.left || '0px';
	var left = scroller.style.left.replace('px', '');
	
	if (dir == DOWN)
	{
		var limit = - (scroller.offsetHeight - SCROLL_AMOUNT);


		if ((top - SCROLL_AMOUNT) > limit)
		{
		    scroller.style.top = parseInt(top) - SCROLL_AMOUNT + 'px';
		}
		else
		{
		    window.clearInterval(timer);
		}
	}
	else if (dir == UP)
	{
	        if (top < 0)
	        {
		        scroller.style.top = parseInt(top) + SCROLL_AMOUNT + 'px';
		    }
		    else
		    {
		        window.clearInterval(timer);
		    }
    }
	if (dir == RIGHT)
	{
	    var limit = -(scroller.offsetWidth - SCROLL_AMOUNT);
	    if ((left - SCROLL_AMOUNT) > limit)
	    {
	        scroller.style.left = parseInt(left) - SCROLL_AMOUNT + 'px';
	    }
	    else
	    {
	        window.clearInterval(timer);
	    }
	}
	else if (dir == LEFT)
	{
	    if (left < 0)
	    {
	        scroller.style.left = parseInt(left) + SCROLL_AMOUNT + 'px';
	    }
	    else
	    {
	        window.clearInterval(timer);
	    }
	}


}

function startScrolling(id, dir)
{
    if (timer == null)
    {
        idToScroll = id;
        dirToScroll = dir;
        timer = window.setInterval("scrollContent()", 25);
    }
}

function stopScrolling()
{
    window.clearInterval(timer);
    timer = null;
}

function createScrollingAreaStartWithWidth(id, height, type, width)
{

    document.write('<div id=\"' + id + '\" class=\"scrollingContent\">');
    if (type == VERTICAL)
    {
        document.write('<img id=\"upArrow\" src=\"images/upArrow.gif\" alt=\"Scroll up\" onmousedown=\"startScrolling(\'' + id + '\', ' + UP + ');\" onmouseup=\"stopScrolling();\" onmouseout=\"stopScrolling();\" onclick=\"stopScrolling();\"/><img id=\"downArrow\" src=\"images/downArrow.gif\" alt=\"Scroll down\" onmousedown=\"startScrolling(\'' + id + '\', ' + DOWN + ');\" onmouseup=\"stopScrolling();\" onmouseout=\"stopScrolling();\" onclick=\"stopScrolling();\"/><div>');
    }
    else
    {
        document.write('<img id=\"leftArrow\" src=\"images/leftArrow.gif\" alt=\"Scroll left\" onmousedown=\"startScrolling(\'' + id + '\', ' + LEFT + ');\" onmouseup=\"stopScrolling();\" onmouseout=\"stopScrolling();\" onclick=\"stopScrolling();\"/><img id=\"rightArrow\" src=\"images/rightArrow.gif\" alt=\"Scroll right\" onmousedown=\"startScrolling(\'' + id + '\', ' + RIGHT + ');\" onmouseup=\"stopScrolling();\" onmouseout=\"stopScrolling();\" onclick=\"stopScrolling();\"/><div>');
    }

    var scrollDiv = document.getElementById(id);

    scrollDiv.style.height = scrollDiv.style.height || '0px';
    scrollDiv.style.height = parseInt(height) + 'px';
    
    if (width != null)
    {
        var imgDiv = scrollDiv.getElementsByTagName('div')[0];
        imgDiv.style.width = scrollDiv.style.width || '0px';
        imgDiv.style.width = parseInt(width) + 'px';
    }
}

function createScrollingAreaStart(id, height, type)
{
    createScrollingAreaStartWithWidth(id, height, type, null);
}


function createScrollingAreaEnd()
{
    document.write('</div></div>');
}