/**
 *
 * EXANIMO.containers.ScrollPane
 * 
 * a big mess.  
 *
 *     @author	 matthew at exanimo dot com
 *     @version	2007.01.17
 *
 */




// Create the package.
window.EXANIMO = window.EXANIMO || {};
EXANIMO.containers = EXANIMO.containers || {};




EXANIMO.containers.ScrollPane = function(element)
{
    if (/WebKit/i.test(navigator.userAgent)) return;

    var pane = element;
    var _int;

    new ECTYPE.display.HTMLElement(pane);
    var paneWidth = parseInt(pane.getStyle('width'));
    var paneHeight = parseInt(pane.getStyle('height'));

    // Create the component container.
    var container = new ECTYPE.display.HTMLDivElement();
    container.className = 'ScrollPane';

    container.thickness = 16;
    container.scrollPosition = 0;

    // Move the pane into the container.
    pane.parentNode.replaceChild(container, pane);
    container.appendChild(pane);
    pane.style.position = 'relative';

    // Create a div for storing the contents.
    var content = 
    container.content = document.createElement('div');
    content.style.marginRight = container.thickness + 'px';

    // Move the pane contents into the content div.
    while (pane.childNodes.length)
    {
        content.appendChild(pane.childNodes[0]);
    }

    pane.appendChild(content);

    // Get the height of the content and restore the pane to its original size.
    var contentHeight = content.offsetHeight;
    container.minScrollPosition = paneHeight - contentHeight;
    container.maxScrollPosition = 0;

    // Hide the browser scrollBar.
    pane.style.overflow = 'hidden';
    
    // Create the new scrollBar
    var scrollBar = 
    container.scrollBar = document.createElement('div');
    scrollBar.className = 'scrollBar';
    scrollBar.style.height = paneHeight + 'px';
    scrollBar.style.width = container.thickness + 'px';
    scrollBar.style.position = 'absolute';
    scrollBar.style.top = '0';
    scrollBar.style.right = '0';
    pane.appendChild(scrollBar);

    // Create the up button.
    var upButton =
    container.upButton = new ECTYPE.display.HTMLDivElement();
    upButton.className = 'upButton';
    upButton.style.width = container.thickness + 'px';
    upButton.style.height = container.thickness + 'px';
    scrollBar.appendChild(upButton);

    // Create the track.
    var track =
    container.track = new ECTYPE.display.HTMLDivElement();
    track.className = 'track';
    var trackHeight = pane.offsetHeight - 2 * container.thickness;
    track.style.width = container.thickness + 'px';
    track.style.height = trackHeight + 'px';
    track.style.position = 'relative';
    scrollBar.appendChild(track);

    // Create the thumb.
    var thumb =
    container.thumb = new ECTYPE.display.HTMLDivElement();
    thumb.className = 'thumb';
    thumb.style.width = container.thickness + 'px';
var thumbHeight = 68;
    thumb.style.height = thumbHeight + 'px';
    thumb.style.position = 'absolute';
    new ECTYPE.display.DraggableObject(thumb, 0, 0, trackHeight - thumbHeight, 0);
    track.appendChild(thumb);

    // Create the down button.
    var downButton = 
    container.downButton = new ECTYPE.display.HTMLDivElement();
    downButton.className = 'downButton';
    downButton.style.width = container.thickness + 'px';
    downButton.style.height = container.thickness + 'px';
    downButton.style.position = 'absolute';
    downButton.style.top = trackHeight + container.thickness + 'px';
    scrollBar.appendChild(downButton);

    var _updateThumb = function()
    {
        var dest = (container.scrollPosition / container.minScrollPosition) * (trackHeight - thumbHeight);
        thumb.style.top = dest + 'px';
    }

    /**
     *
     * Updates the text area according to the position of the thumb.
     *          
     */
    var _updateTextArea = function(e)
    {
        var thumbPos = parseInt(thumb.getStyle('top'));
        container.scrollPosition = thumbPos / (trackHeight - thumbHeight) * (-container.maxScrollPosition + container.minScrollPosition);
        content.style.marginTop = container.scrollPosition + 'px';
    }

    /**
     *
     * Refreshes the ScrollPane.
     *
     */                   
    container.refresh = function()
    {
        var oldScrollPosition = container.scrollPosition;
        thumb.style.top = '0';
        content.style.marginTop = '0';
        container.scrollPosition = '0';
    
        contentHeight = content.offsetHeight;
        container.minScrollPosition = paneHeight - contentHeight;
        container.scrollPosition = Math.max(oldScrollPosition, container.minScrollPosition);
        content.style.marginTop = container.scrollPosition + 'px';
        _updateThumb();
    }
    
    var _refreshTimeout;
    container.addEventListener(
        'added',
        function(e)
        {
            clearTimeout(_refreshTimeout);
            _refreshTimeout = setTimeout(container.refresh, 20);
        }
    );

    thumb.addEventListener('move', _updateTextArea);
   
    var _scrollDown = function()
    {
        if (container.scrollPosition > container.minScrollPosition)
        {
            container.scrollPosition = Math.max(container.scrollPosition - 19, container.minScrollPosition);
            content.style.marginTop = container.scrollPosition + 'px';
            _updateThumb();
        }
    }

    var _scrollUp = function()
    {
        if (container.scrollPosition < container.maxScrollPosition)
        {
            container.scrollPosition = Math.min(container.scrollPosition + 19, container.maxScrollPosition);
            content.style.marginTop = container.scrollPosition + 'px';
            _updateThumb();
        }
    }

    var _stopScroll = function()
    {
        clearInterval(_int);
    }

    upButton.addEventListener(
        'mouseDown',
        function(e)
        {
        	e.preventDefault()
            _stopScroll();
            _scrollUp();
            _int = setInterval(_scrollUp, 120);
        }
    );

    downButton.addEventListener(
        'mouseDown',
        function(e)
        {
        	e.preventDefault();
            _stopScroll();
            _scrollDown();
            _int = setInterval(_scrollDown, 120);
        }
    );
    
    document.addEventListener('mouseUp', _stopScroll);

    return container;
}