function ScrollPane (id,theme,content,title,width,height,overRideConstructor)
{
    this.inherit = BaseGUI;
    this.inherit(id,theme,content);
	
	this.init = initSP; 
    this.title = title;
	this.doLayout = SPdoLayout;
	this.setSize = setSize;
    this.clipW = width;
    this.clipH = height;
	this.maxHeight = height;
	this.dragXOff=20;
    this.contentHeight = 0;
    this.x = 0;
    this.y = 0;
    this.panelWidth = this.clipW-this.theme["buttonSize"];
    this.panelHeight =0;
    this.scrollOffset =0;
    this.scrollBoxHeight =0;
    this.scrollMax=0;
    this.scrollMin=0;
    this.scrollMultiplier=0;
    this.dragType = 0;
    this.scroll = SPscroll;
    this.scrollDrag = SPscrollDrag;
    this.scrollTo = SPscrollTo;
	this.scrollToEnd = SPscrollToEnd;
    this.scrollJump = SPscrollJump;
	this.scrollUp = SPscrollUp;
	this.scrollDown= SPscrollDown;
    this.drag = SPdrag;
    this.topH=0;
    this.scrollFlag = false;
    this.xOffset = new Array(-(this.theme["borderWidth"]),0,0,this.panelWidth,this.panelWidth,this.panelWidth,this.panelWidth);
    this.yOffset = new Array(-(this.theme["borderWidth"]),0,0,0,0,0,0);
    this.parseXY = SPparseXY;
    this.update = SPupdate;
    this.focus = SPfocus;
    this.blur = SPblur;
    this.makeButton = makeButton;
	this.makeTop = SPmakeTop;
	this.setSize = SPSetSize;
	//alert(this.id);
	if (overRideConstructor==null)
	{
    	if (this.guiManager.pageIsLoaded)
        {
        	this.init();
        }
    	else
        	this.guiManager.addMeToStartup(this);
	}
	
}

function SPSetSize(w,h)
{
	//alert("w"+w+" h"+h);
	this.clipW = Math.round(w);
	this.clipH = Math.round(h);
	this.doLayout();

}
function SPfocus(z)
{	
    for(this.i=0;this.i<this.layer.length;this.i++)
    {
        this.layer[this.i].zIndex=z+this.i;
		
        if ((this.i>2&&this.i<7)&&this.scrollFlag==false) 
            continue;
        this.layer[this.i].visibility="visible";
		//alert(this.i);
    }
	 if (this.theme["Opacity"])
	for (this.i=0;this.i<this.layer.length;this.i++){
	this.layer[this.i].MozOpacity=this.theme["Opacity"];
	this.layer[this.i].filter="alpha(Opacity="+(this.theme["Opacity"]*100)+")";
	} 
    this.setBgColor(this.layer[1],"topBgColor");
    this.setBgColor(this.layer[2],"bgColor");
	


}
function SPparseXY(x,y)
{   y-=this.y;

    if (y>0 && y < this.topH && (x-this.x)<(this.clipW-this.dragXOff)){

        this.guiManager.dragObject = this;
        this.dragType=0;
		this.dragStart();
        return;
    }
    if ((x-this.x)<this.panelWidth || this.scrollFlag==false)
        return;
 /*   if (y>this.yOffset[4] && y<this.yOffset[4]+this.theme["buttonSize"]||y>this.yOffset[5] && y<this.yOffset[5]+this.theme["buttonSize"])
    {
        direction = (y<this.yOffset[5]) ? -1:1
        this.scroll(direction);
        return;
    }
*/
    if ((y>this.yOffset[4]+this.theme["buttonSize"]&&y<this.yOffset[6])||
        (y>this.yOffset[6]+this.scrollBoxHeight&&y<this.yOffset[5]))
        {
            this.scrollJump(y);
        }
    if (y>this.yOffset[6] && y<(this.yOffset[6]+this.scrollBoxHeight))
    {
        this.guiManager.dragObject = this;
        this.dragType=1;

    }


}
function SPblur()
{	
    if(ns){
		if(this.layer[2].document.forms.length>0)
	    this.layer[2].visibility="hidden";
	}
    for(i=4;i<this.layer.length;i++)
        this.layer[i].visibility="hidden"
    this.setBgColor(this.layer[1],"blurTopBgColor");
    this.setBgColor(this.layer[2],"blurBgColor");
	if (this.theme["blurOpacity"])
	{
		for (this.i=0;this.i<this.layer.length;this.i++){
		this.layer[this.i].MozOpacity=this.theme["blurOpacity"];
		this.layer[this.i].filter="alpha(Opacity="+(this.theme["blurOpacity"]*100)+")";
		}
	}
	/* this.z = this.layer[0].zIndex;
	for(this.i=0;this.i<this.layer.length;this.i++)
    {
        this.layer[this.i].zIndex=this.z+this.i;
    } */
}
function SPdrag()
{
   if (this.dragType==1){
    this.scrollDrag();
    return;
   }
   if (this.guiManager.mouseX<this.guiManager.rightBound&& this.guiManager.mouseX>this.guiManager.leftBound)
   	this.x += this.guiManager.dx;
   if (this.guiManager.mouseY<this.guiManager.bottomBound && this.guiManager.mouseY>this.guiManager.topBound)
    this.y += this.guiManager.dy;
   if(this.x<this.guiManager.leftBound)this.x=this.guiManager.leftBound;
   if(this.x+this.clipW>this.guiManager.rightBound)this.x=this.guiManager.rightBound- this.clipW;
   if(this.y<this.guiManager.topBound)this.y=this.guiManager.topBound;
   if(this.y+this.clipH>this.guiManager.bottomBound)this.y=this.guiManager.bottomBound-this.clipH;
   this.dragGUI.setXY(this.x,this.y);
}

function SPscrollDrag()
{
    if (this.guiManager.mouseY<(this.y+this.scrollMin))
    {
        if(this.yOffset[6]>this.scrollMin)
        return;
    }
    if(this.guiManager.mouseY>(this.y+this.yOffset[5]))
    {
        if (this.yOffset[6]<this.scrollMax) //this.scrollToEnd();
        return;
    }
    oldyoff = this.yOffset[6]
    this.yOffset[6]+=this.guiManager.dy;
    if (this.yOffset[6]<this.scrollMin)this.yOffset[6]=this.scrollMin;
    if (this.yOffset[6]>this.scrollMax) this.yOffset[6]=this.scrollMax;
    this.layer[6].top=this.y+this.yOffset[6];
    dy = this.yOffset[6]-oldyoff;
    if(this.yOffset[6]==this.scrollMax)
		this.scrollToEnd();
	else
   		 this.scrollTo((this.yOffset[6]-this.topH-this.theme['buttonSize'])*this.scrollMultiplier);
}

function makeButton(layerRef,type)
{
    temp =makeLayer(this.id+type,this.theme["buttonSize"],"<img name =\""+this.id+type+"\"src=\""+this.theme[type]+"\" width=\""+this.theme["buttonSize"]+"\" height=\""+this.theme["buttonSize"]+"\"border=\"0\" onmousedown=\"return false\">");
    tempHeight = ns ? temp.document.height : temp.offsetHeight;
    this.layer[layerRef] = ns ? temp : temp.style;
	this.layer[layerRef].cursor="pointer";
	if(ie &&!mac && this.theme[type].indexOf(".png")>0)
		fixPNG(document.images[this.id+type]);
	if (this.theme[type+"On"])
		createMouseOver(document.images[this.id+type],this.theme[type+"On"]);
    return tempHeight
}
function SPscrollJump(y)
{
	
    this.yOffset[6] = (y<this.yOffset[6]) ? y : y-this.scrollBoxHeight
    this.scrollTo((this.yOffset[6]-this.topH-this.theme['buttonSize'])*this.scrollMultiplier);
    this.layer[6].top=(ns)? this.y+this.yOffset[6]:this.y+this.yOffset[6]+"px";
}
function SPscroll(direction)
{
    this.scrollOffset+=direction*25;
    if (this.scrollOffset<0){
        this.scrollOffset=0
    } else if (this.scrollOffset+this.panelHeight>this.contentHeight){
         this.scrollOffset = this.contentHeight-this.panelHeight
    }
	//alert(this.scrollOffset)
    this.yOffset[6]=Math.round(this.scrollOffset/this.scrollMultiplier)+this.scrollMin;
    this.layer[6].top=(ns)? this.y+this.yOffset[6]:this.y+this.yOffset[6]+"px";
    this.scrollTo(this.scrollOffset);
    this.guiManager.scrollRepeat = setTimeout(this.id+".scroll("+direction+")",100);
}
function SPscrollToEnd()
{
	this.yOffset[6]=this.scrollMax;
	this.layer[6].top=this.y+this.scrollMax;
	this.scrollTo(this.contentHeight-this.panelHeight);
}
function SPscrollTo(ny)
	   {	
	   	  
		  this.yOffset[2]=this.topH-ny
		  this.scrollOffset=ny;
		  clipLayer(this.layer[2],0,this.scrollOffset,this.panelWidth,this.panelHeight);
          this.layer[2].top = (ns)?this.y+this.yOffset[2]: this.y+(this.yOffset[2])+"px";
		  if (this.scrollOffset==0);
		  	this.setXY();
	   }
function SPmakeTop()
{
	topbar = "<div align=\"right\" style=\"cursor:move\"><font face=\"Arial,Helvetica\" color=\""+this.theme["topText"]+"\" size=\"-1\"><b><i>"+this.title+"</i></b></font>&nbsp;&nbsp;&nbsp;<a href=\"javascript:"+this.id+".close()\" style=\"color:black;text-decoration:none;cursor:hand;\"><img vspace=\"1\" name = \""+this.id+"close\"alt =\"close\" src=\""+this.theme["buttonClose"]+"\"   border=\"0\" align=\"absmiddle\"></a>&nbsp;</div>";
    temp = this.makeLayer(this.id+"top",this.clipW,topbar);
    return temp;
}
function initSP()
{
    this.layer[1] = (this.makeTop()).style;
    this.yOffset[2] = (getLayer(this.id+"top")).offsetHeight;
	//alert(yOffset[2]);
    this.topH= this.yOffset[2];
    this.layer[2] = ns ? getLayer(this.content) : (getLayer(this.content)).style;
    this.makeButton(4,"buttonUp");
    this.makeButton(5,"buttonDown");
	
	////////////////////////////
	/* new code: sept 06 2004 */
	///////////////////////////
	
	// get DOM objects
	u = getLayer(this.id+"buttonUp");
	d = getLayer(this.id+"buttonDown");
	
	// create Dynamic Property that points to our Scrollpane Instance
	u.jsContainer=this;
	d.jsContainer=this;
	
	//attach events according to Browser
	if(ie){
			u.onmousedown = __scrollUp;
			d.onmousedown = __scrollDown;
		}else{
			u.addEventListener('mousedown',__scrollUp,false);
			d.addEventListener('mousedown',__scrollDown,false);
			//alert('attached eventListeners');
		}
	
	///////////////////////////////
	/* end new code sept 06 2004 */
	///////////////////////////////
	
		

    //debug.dump(this.scroll);
    this.layer[3] =(makeLayer(this.id+"scroll",100,'<div style="width:100;height:1024;overflow:hidden">')).style;
	wd = (ns6) ? this.clipW : (this.clipW+this.theme["borderWidth"]*2);
    ht = (ns6) ? this.clipH : (this.clipH+this.theme["borderWidth"]*2);
    this.layer[0] = (makeLayer(this.id+"border",this.clipW,"")).style;
	this.layer[6]=(makeLayer(this.id+"scrollBox",this.theme["buttonSize"],"")).style;
	if (w3 || ie){
			this.layer[6].borderWidth=1;
			this.layer[6].borderStyle='solid';
			this.layer[6].borderColor=this.theme['scrollBoxBorder'];
			this.layer[6].width = this.theme['buttonSize'];
			this.layer[6].cursor="pointer";
			if(ns6)
				this.layer[6].width = this.theme['buttonSize']-2;
			this.layer[0].borderWidth=this.theme['borderWidth'];
			this.layer[0].borderStyle=this.theme['borderStyle'];
			this.layer[0].borderColor=this.theme['border'];

	    }
	this.doLayout();
	this.setXY(this.x,-this.contentHeight);
}
function SPdoLayout(END_FLAG)
{
	if (!END_FLAG)
		END_FLAG = 0;
    this.panelWidth = this.clipW-this.theme['buttonSize'];
    this.layer[2].width = this.clipW
	if(ns6){ // adjuast for stupid mozilla padding implementation
			wdiff=getWidth(this.content)-this.clipW;
			this.layer[2].width = this.clipW-wdiff;
			
			}
	this.layer[1].width = this.clipW;
	for (i=3;i<this.layer.length;i++)
		this.xOffset[i]= this.panelWidth;
    

    this.contentHeight = getHeight(this.content);

	this.panelHeight= this.clipH-this.yOffset[2];
	if ((this.contentHeight+this.yOffset[2])<=this.maxHeight)
    {
        this.clipH = this.contentHeight+this.yOffset[2];
        this.panelHeight = this.clipH-this.yOffset[2];
		if(ie)
		this.layer[2].height= this.panelHeight;
        this.scrollFlag=false;
        for(i=3;i<7;i++)
            this.layer[i].visibility="hidden";
        this.yOffset[7] = this.clipH - this.theme['buttonSize'];

    }
    if (this.contentHeight>this.maxHeight)
    {   
		this.clipH = this.maxHeight;
		//this.layer[2].height= this.panelHeight;
        this.layer[2].width = this.panelWidth;
        this.contentHeight = (getLayer(this.content)).offsetHeight;
        this.panelHeight = this.clipH - this.yOffset[2];
        clipLayer(this.layer[2],0,0+(this.contentHeight-this.panelHeight)*END_FLAG,this.panelWidth,this.panelHeight-1*END_FLAG);  
		this.scrollFlag = true;
		
		

    }
	if (this.scrollFlag)
    {

	    this.yOffset[3] = this.yOffset[2];
	    this.yOffset[4] = this.yOffset[2];
	    this.yOffset[5] = this.clipH - this.theme['buttonSize'];
	    clipLayer(this.layer[3],0,0,this.theme["buttonSize"]-1,this.clipH-this.yOffset[2]);
	    this.setBgColor(this.layer[3],"scrollBar");
	        ht=Math.round( this.panelHeight* (this.panelHeight-2*this.theme["buttonSize"]) /this.contentHeight);
			this.layer[6].height = ht;
	        this.scrollBoxHeight = ht;
			//clipLayer(this.layer[6],0,0,this.theme['buttonSize'],this.scrollBoxHeight);
			this.setBgColor(this.layer[6],"scrollBox");
	        this.scrollMultiplier = this.contentHeight/(this.panelHeight-2*this.theme["buttonSize"]);
	        this.scrollMax = this.clipH-this.theme["buttonSize"]-this.scrollBoxHeight;
	        this.scrollMin = this.yOffset[4]+this.theme["buttonSize"];
	        this.yOffset[6]=this.yOffset[2]+this.theme["buttonSize"];
		if (END_FLAG)
			this.scrollToEnd();
		if (this.visible)
		{
		for(i=3;i<7;i++)
	            this.layer[i].visibility="visible";
		}
    }
	
	this.layer[0].width = (ns6) ? this.clipW : (this.clipW+this.theme["borderWidth"]*2);
    this.layer[0].height = (ns6) ? this.clipH : (this.clipH+this.theme["borderWidth"]*2);
	//alert(this.clipH);

		
	this.setXY();
    
    

}
    function SPupdate(html,END_FLAG)
    {   
       if(this.scrollFlag)
	   		this.scrollTo(0);
        l = getLayer(this.content);

			l.innerHTML = html
		
		
        this.setBgColor(this.layer[2],"bgColor");
		if (END_FLAG)
        	this.doLayout(1);
		else
        	this.doLayout(0);
		

    }
	////////////////////////////////
	/* sept 06 2004 new functions */
	////////////////////////////////
	function SPscrollUp()
	{
		this.scroll(-1)
		
	}
	function SPscrollDown()
	{
		this.scroll(1)
		
	}
	////////////////////////////////////
	/* end sept 06 2004 new functions */
	////////////////////////////////////
	
    //////////////////////////////////
    /* new GLOBAL public interfaces */
    //////////////////////////////////
 
	function __scrollUp()
	{
		this.jsContainer.scrollUp(this);
	}
	function __scrollDown()
	{
		this.jsContainer.scrollDown(this);
	}
 	//////////////////////////////////////
    /* end new GLOBAL public interfaces */
    //////////////////////////////////////