var mNameOfControl;
var mBgColor	    = "#f2eef6";
var mBorderColor	= "#cfb4e9";
var mWidth 		    = "15%";
var mHeight;
var mScrollClass	= "scrollBar2";
var mDivClass	    = "boxContainer";
var mContentClass	= "boxContent";
var mHoverClass	    = "hover";
var mTitle          = "Title Text";
var mFooterText;

var mOuterDiv;
var mContentDiv;
var downImg;
var upImg;
var downDiv;
var upDiv;
var upURL           = "images/up.gif";
var downURL         = "images/dn.gif";

var mScrollup;
var mScrolldown;

var isHover = false; //a hack for firefox

/*****************/
/* Define object */
/*****************/
function ScrollingDiv(nameOfControl)
{
    //initialize the control when the constructor is called:
    mNameOfControl 		= nameOfControl;
    mFooterText         = null

    //member methods associated with this control:
    this.name			= m_getName;
    //this.setName		= m_setName;
    this.getWidth 		= m_getWidth;
    this.setWidth 		= m_setWidth;
    this.getHeight 		= m_getHeight;
    this.setHeight 		= m_setHeight;
    this.getDownClass 	= m_getDownClass;
    this.setDownClass 	= m_setDownClass;
    this.getDivClass 	= m_getDivClass;
    this.setDivClass 	= m_setDivClass;
    this.getHeaderTitle	= m_getHeaderTitle;
    this.setHeaderTitle	= m_setHeaderTitle;
    this.getFooterText  = m_getFooterText;
    this.setFooterText  = m_setFooterText;
    this.hideFooterText = m_hideFooterText;
    this.hideHeaderText = m_hideHeaderText;
    this.addElement		= m_addElement;
    this.addInnerHtml	= m_addInnerHtml;
    this.refreshArrows  = m_showArrows;
    this.addHeaderControl=m_addHeaderControl;
}




/**************************************/
/* Member functions relating to style */
/**************************************/

function m_getName()
{
    return mNameOfControl;
}

/*function m_setName(nameOfControl)
{
	mNameOfControl = nameOfControl; //should only be set by the constructor!
}*/

function m_getWidth()
{
    return mWidth;
}
function m_setWidth(width)
{
    mWidth = width;
}
function m_getHeight()
{
    return mHeight;
}
function m_setHeight(height)
{
    mHeight = height;
}
function m_getDownClass()
{
    return mDownClass;
}
function m_setDownClass(className)
{
    mDownClass = className;
}
function m_getDivClass()
{
    return mDivClass;
}
function m_setDivClass(className)
{
    mDivClass = className;
}

/****************************************/
/* Member functions relating to content */
/****************************************/
function m_getHeaderTitle()
{
    return mTitle;
}
function m_setHeaderTitle(title)
{
    mTitle = title;
}

function m_getFooterText()
{
    return mFooterText;
}
function m_setFooterText(footerText)
{
    mFooterText = footerText;
}

function m_hideFooterText(nameOfControl)
{
    var downDivTmp = document.getElementById("downDiv_" + nameOfControl);
    if(downDivTmp != null)
        app.browser().removeChildrenByTagName(downDivTmp, "SPAN");
}

function m_hideHeaderText(nameOfControl)
{
    var upDivTmp = document.getElementById("upDiv_" + nameOfControl);
    if(upDivTmp != null)
        app.browser().removeChildrenByTagName(upDivTmp, "SPAN");
}

function m_addHeaderControl(additionalCTL)
{
    if(additionalCTL != null)
    {
        upDiv.appendChild(document.createTextNode(" "));
        upDiv.appendChild(additionalCTL);
    }
}


/***************************************/
/* Member functions relating to action */
/***************************************/
function m_addElement(parentElement, childElement)
{
    //only create a new control if the current control doesn't already exist!
    //alert("adding element!");
    if(!controlExists())
    {
        mContentDiv = m_createDivContainer(parentElement);
    }
    else
    {
        //var b = new Browser();
        app.browser().removeChildren(mContentDiv);
    }
    mContentDiv.appendChild(childElement);
    showArrowsBySrcElem(mContentDiv);
}

function m_addInnerHtml(parentElement, html)
{
    //alert("adding inner html!")
    //only create a new control if the current control doesn't already exist!
    if(!controlExists())
        mContentDiv = m_createDivContainer(parentElement);
    mContentDiv.innerHTML = html;
    showArrowsBySrcElem(mContentDiv);
}

function controlExists()
{
    var id = "contentDiv_" + mNameOfControl;
    mContentDiv = document.getElementById(id);
    if(mContentDiv != null)
        return true;
    else
        return false;
}

function m_showArrows()
{
    var id      = mNameOfControl;
    upDiv 	    = document.getElementById("upDiv_" + id);
    downDiv 	= document.getElementById("downDiv_" + id);
    mOuterDiv 	= document.getElementById("outerDiv_" + id);
    mContentDiv	= document.getElementById("contentDiv_" + id);
    mDownImg	= document.getElementById("downImg_" + id);
    mUpImg	    = document.getElementById("upImg_" + id);
    /*if(upDiv != null &&
        downDiv != null &&
        mOuterDiv != null &&
        mContentDiv != null &&
        mDownImg != null &&
        mUpImg != null)
    {
        showArrows();
    }*/
}

function showArrowsBySrcElem(srcElem)
{
    /*Note:     since this function will always be called after new
                content is added we can always assume that there will
                be a source element.
     */
    upDiv 	    = getUpDiv(srcElem);
    downDiv 	= getDownDiv(srcElem);
    mOuterDiv 	= getContainerDiv(srcElem);
    mContentDiv	= getContentDiv(srcElem);
    mDownImg	= getDownArrow(srcElem);
    mUpImg	    = getUpArrow(srcElem);
    showArrows();
}

function showArrows()
{
    // the following 4 lines are an IE Hack:
    //var containerHeight = mOuterDiv.clientHeight;
    mOuterDiv.scrollTop = 0;
    var containerAltHeight = mOuterDiv.style.height.substring(0, mOuterDiv.style.height.indexOf("p"));

    //alert(mOuterDiv.clientHeight);
    //alert(containerAltHeight + " - " + mOuterDiv.style.height);
    //alert(mContentDiv.clientHeight);
    if(mContentDiv.clientHeight >  mOuterDiv.clientHeight ||
            mContentDiv.clientHeight > containerAltHeight)
    {
        mUpImg.style.visibility 	= "visible";
        mDownImg.style.visibility 	= "visible";
        upDiv.onmouseover 		    = hover;
        upDiv.onmouseout 			= hover;
        upDiv.title 			    = "scroll up";
        upDiv.style.cursor 		    = "hand";
        downDiv.onmouseover 		= hover;
        downDiv.onmouseout 		    = hover;
        downDiv.title 			    = "scroll down";
        downDiv.style.cursor 		= "hand";
    }
    else
    {
        //alert(mContentDiv.clientHeight);
        //alert(mOuterDiv.clientHeight);
        mUpImg.style.visibility 	= "hidden";
        mDownImg.style.visibility 	= "hidden";
        upDiv.onmouseover 		    = null;
        upDiv.onmouseout 			= null;
        upDiv.title 			    = "";
        upDiv.style.cursor 		    = "none";
        downDiv.onmouseover 		= null;
        downDiv.onmouseout 		    = null;
        downDiv.title 			    = "";
        downDiv.style.cursor 		= "none";
    }
    //alert("arrows done!");
}


function m_createDivContainer(parentElement)
{
    //1.  create header element:
    upDiv = document.createElement("div");
    upDiv.id = "upDiv_" + mNameOfControl;//randNum;
    upDiv.className = mScrollClass;
    if(mWidth != null)
        upDiv.style.width = mWidth;
    //upDiv.style.backgroundColor = mBgColor;
    upDiv.style.height = 20;
    upDiv.onmouseover = hover;
    upDiv.onmouseout = hover;
    upDiv.onmousedown = m_scrollTheDiv;
    upDiv.ondblclick = jump;
    upDiv.onmouseup = m_reset;
    upDiv.title = "scroll up";

    //2. append up image to upDiv:
    upImg = document.createElement("a");
    upImg.href="#";
    upImg.id = "upImg_" + mNameOfControl;//randNum;
    var up = document.createElement("img");
    up.src = upURL;
    up.id = "upImg1_" + mNameOfControl;//randNum;
    up.alt = "scroll up";
    up.border = "0";
    upImg.onmousedown = m_scrollTheDiv;
    upImg.ondblclick = jump;
    upImg.onmouseup = m_reset;
    upImg.appendChild(up);
    upImg.onkeydown = m_scrollTheDiv;
    upImg.onkeyup = m_reset;
    upDiv.appendChild(upImg);

    //3. create and append the text node to the upDiv element:
    upDiv.appendChild(document.createTextNode(mTitle));

    //4. append the upDiv element to the outer div:
    parentElement.appendChild(upDiv);

    //5.  initialize outer div:
    mOuterDiv = document.createElement("div");
    mOuterDiv.id = "outerDiv_" + mNameOfControl;//randNum;
    if(app.browser().isIE())
    {
        if(mWidth != null)
            mOuterDiv.style.width = mWidth;
    }
    if(app.browser().isFirefox())
    {
        parentElement.style.paddingTop = 1;
        mOuterDiv.style.height = parentElement.clientHeight - 55;
    }
    else
    {
        mOuterDiv.style.height = parentElement.clientHeight - 44;
    }
    mOuterDiv.className = mDivClass;

    //6. initialize content div:
    mContentDiv = document.createElement("div");
    mContentDiv.id = "contentDiv_" + mNameOfControl;//randNum;
    if(app.browser().isIE())
    {
        mContentDiv.style.height = "100%";// = mContentClass;
    }
    else if(app.browser().isFirefox())
    {
        if(mWidth != null)
            mContentDiv.style.width = mWidth;
    }
    mContentDiv.style.border = 3;
    mOuterDiv.appendChild(mContentDiv);

    //7. append the outer div to the parentElement:
    parentElement.appendChild(mOuterDiv);

    //8. create scroll up div:
    downDiv = document.createElement("div");
    downDiv.id = "downDiv_" + mNameOfControl;//randNum;
    downDiv.className = mScrollClass;
    if(mWidth != null)
        downDiv.style.width = mWidth;
    //downDiv.style.backgroundColor = mBgColor;
    downDiv.style.height = 20;
    downDiv.onmouseover = hover;
    downDiv.onmouseout = hover;
    downDiv.onmousedown = m_scrollTheDiv;
    downDiv.ondblclick = jump;
    downDiv.onmouseup = m_reset;
    downDiv.title = "scroll down";


    //9. append up image to downDiv:
    downImg = document.createElement("a");
    down = document.createElement("img");
    downImg.href = "#";
    downImg.id = "downImg_" + mNameOfControl;//randNum;
    down.id = "downImg1_" + mNameOfControl;//randNum;
    down.src = downURL;
    down.alt = "scroll down";
    down.border = "0";
    downImg.onmousedown = m_scrollTheDiv;
    downImg.ondblclick = jump;
    downImg.onmouseup = m_reset;
    downImg.onkeydown = m_scrollTheDiv;
    downImg.onkeyup = m_reset;
    downImg.appendChild(down);
    downDiv.appendChild(downImg);

    //10. append footer text if it exists.
    if(mFooterText != null && mFooterText != "")
    {
        var footerTextSpan = document.createElement("span");
        footerTextSpan.id = "footerText_" + mNameOfControl;
        footerTextSpan.className = "tinyText";
        footerTextSpan.appendChild(document.createTextNode(mFooterText))
        downDiv.appendChild(footerTextSpan);
    }

    //11. append the up div to the parentElement:
    parentElement.appendChild(downDiv);
    return mContentDiv;
}

function jump(e)
{
    //var b = new Browser();
    var srcElem = app.browser().getSourceElement(e);
    mContentDiv = getContentDiv(srcElem);
    mOuterDiv = getContainerDiv(srcElem);
    if(srcElem.id.indexOf("down") != -1)
    {
        mOuterDiv.scrollTop = mContentDiv.clientHeight - mOuterDiv.clientHeight + 10;
    }
    else
    {
        mOuterDiv.scrollTop = 0;
    }
}

function m_scrollTheDiv(e)
{
    var event = app.browser().getE(e);
    //alert(event.keyCode);
    switch(event.keyCode)
    {
        //only fire this function if a click event or if the user presses "ENTER"
        case undefined:
        case 0:
        case 13:
            //var b = new Browser();
            //alert("fire");
            var srcElem = app.browser().getSourceElement(e);
            mContentDiv = getContentDiv(srcElem);
            //alert(srcElem.id);
            mOuterDiv = getContainerDiv(srcElem);
            if(srcElem.id.indexOf("down") != -1)
            {
                if(mContentDiv.scrollTop + mOuterDiv.clientHeight < mContentDiv.clientHeight)
                {
                    window.clearInterval(mScrolldown);
                    mScrolldown = setInterval('m_scrollDown()', 100);
                }
            }
            else
            {
                window.clearInterval(mScrollup);
                mScrollup = setInterval('m_scrollUp()', 100);
            }
            break;
    }
}

function m_scrollUp()
{
    mOuterDiv = getContainerDiv();
    if(mOuterDiv != null)
    {
        if(mOuterDiv.scrollTop > 0){ mOuterDiv.scrollTop = mOuterDiv.scrollTop - 10; }
        else{ mOuterDiv.scrollTop = 0; }
    }
}

function m_scrollDown()
{
    mOuterDiv = getContainerDiv();
    if(mOuterDiv != null)
    {
        mOuterDiv.scrollTop = mOuterDiv.scrollTop + 10;
    }
}

function m_reset(e)
{
    window.clearInterval(mScrollup);
    window.clearInterval(mScrolldown);
}

function hover(e)
{
    //var b = new Browser();
    sourceElement = app.browser().getSourceElement(e);
    if(sourceElement.tagName == "IMG")
    {
        if(app.browser().isIE())
            sourceElement = sourceElement.parentElement.parentElement;
        else
            sourceElement = sourceElement.parentNode;
    }
    if(sourceElement.tagName != "input" && sourceElement.tagName != "INPUT")
    {
        if(!isHover)
        {
            //sourceElement.style.backgroundColor = mBorderColor; //"#eee";
            sourceElement.className = "scrollBarHighlight"
            sourceElement.style.cursor = "hand";
            isHover = true;
        }
        else
        {
            //sourceElement.style.backgroundColor = mBgColor;
            sourceElement.className = "scrollBar" + activeTab.id;
            sourceElement.style.cursor = "none";
            isHover = false;
        }
    }
}


function getControl(srcElem, elementName)
{
    var underScoreIndex = srcElem.id.indexOf("_");
    var uniqueId = srcElem.id.substring(underScoreIndex+1);
    return document.getElementById(elementName + uniqueId);
}

function getContainerDiv(srcElem)
{
    if(srcElem != null)
        mOuterDiv = getControl(srcElem, "outerDiv_");
    return mOuterDiv;
}

function getContentDiv(srcElem)
{
    if(srcElem != null)
        mContentDiv = getControl(srcElem, "contentDiv_");
    return mContentDiv;
}

function getDownDiv(srcElem)
{
    return getControl(srcElem, "downDiv_");
}

function getUpDiv(srcElem)
{
    return getControl(srcElem, "upDiv_");
}

function getDownArrow(srcElem)
{
    return getControl(srcElem, "downImg_");
}

function getUpArrow(srcElem)
{
    return getControl(srcElem, "upImg_");
}