function ScrollPane (id,theme,content,title,width,height,overRideConstructor)
{
    this.inherit = AbstractGUI;
    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.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;
	//alert(this.id);
	if (overRideConstructor==null)
	{
    	if (this.guiManager.pageIsLoaded)
        {
        	this.init();
        }
    	else
        	this.guiManager.addMeToStartup(this);
	}
}
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 (parseInt(this.layer[0].MozOpacity)<1)
	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;
    ny = (this.yOffset[6]-this.topH-this.theme["buttonSize"])*this.scrollMultiplier;
    this.scrollTo(ny);
}

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;
    return tempHeight
}
function SPscrollJump(y)
{
    this.yOffset[6] = (y<this.yOffset[6]) ? y : y-this.scrollBoxHeight
    this.scrollTo(this.yOffset[6]-this.topH);
    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
    }
    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]+1: this.y+this.yOffset[2]+"px";
	   }
function SPmakeTop()
{
	topbar = "<div align=\"right\" style=\"cursor:move\"><b style=\"color:"+this.theme["topText"]+";font-family:fixed-width;font-size:10pt\">"+this.title+"</b>&nbsp;&nbsp;&nbsp;<a href=\"javascript:"+this.id+".close()\" style=\"color:black;text-decoration:none;cursor:hand;\"><img style=\"margin-right:1px;margin-top:3px;\" name = \""+this.id+"close\"alt =\"close\" src=\""+this.theme["buttonClose"]+"\" width=\""+this.theme["buttonSize"]+"\" height=\""+this.theme["buttonSize"]+"\"  border=\"0\"></a></div>";
    temp = this.makeLayer(this.id+"top",this.clipW,topbar);
    return temp;
}
function initSP()
{
    this.layer[1] = ns ? this.makeTop() : (this.makeTop()).style;
    this.yOffset[2] = ns ? this.layer[1].document.height : (getLayer(this.id+"top")).offsetHeight;
    this.topH= this.yOffset[2];
    this.layer[2] = ns ? getLayer(this.content) : (getLayer(this.content)).style;
	if(ns6) this.layer[2].fillOpacity=0.7
    this.makeButton(4,"buttonUp");
    this.makeButton(5,"buttonDown");
	

    //debug.dump(this.scroll);
    this.layer[3] = (ns) ?
        makeLayer(this.id+"scroll",100,'<spacer type="block" width="100" height="1024">')
            :
        (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);
    border = (ns)?"<spacer type=\"block\" width=\""+1024+"\" height=\""+768+"\">":'';
    temp = makeLayer(this.id+"border",this.clipW,border);
    this.layer[0] = (ns) ? temp : temp.style;
	if(ns){ this.setBgColor(this.layer[0],"border");
	clipLayer(this.layer[0],0,0,this.clipW+1,this.clipH+1);

	}
	box = (ns) ? "<div style=\"width:"+wd+"px;height:"+ht+"px\" ></div>" : ""
    temp = makeLayer(this.id+"scrollBox",this.theme["buttonSize"],box);
	this.layer[6]=ns?temp:temp.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'];
			if(ns6)
				this.layer[6].width = this.theme['buttonSize']-2;
			this.layer[0].borderWidth=this.theme['borderWidth'];
			this.layer[0].borderStyle='solid';
			this.layer[0].borderColor=this.theme['border'];

	    }
	this.doLayout();
	this.setXY(this.x,-this.contentHeight);
}
function SPdoLayout()
{
    this.panelWidth = this.clipW-this.theme['buttonSize'];
    this.layer[2].width = this.clipW;
	this.layer[1].width = this.clipW;
	for (i=3;i<this.layer.length;i++)
		this.xOffset[i]= this.panelWidth;
    this.contentHeight = ns ? this.layer[2].document.height : (getLayer(this.content)).offsetHeight;
	
 	if (this.contentHeight>this.clipH && this.clipH<this.maxHeight)
		{
			this.clipH = this.maxHeight
			//alert(this.id+"  ch:"+this.contentHeight+" clpH:"+this.clipH+" maxH:"+this.maxHeight)
		}
	if (this.contentHeight<this.clipH)
    {
	   // alert(this.id+"  ch:"+this.contentHeight+" clpH:"+this.clipH+" maxH:"+this.maxHeight)
        this.clipH = this.contentHeight+this.yOffset[2];
        this.panelHeight = this.contentHeight;
        this.scrollFlag=false;
        clipLayer(this.layer[2],0,0,this.clipW,this.panelHeight);
        for(i=3;i<7;i++)
            this.layer[i].visibility="hidden";
        this.yOffset[7] = this.clipH - this.theme['buttonSize'];
    }
	
    if (this.contentHeight>this.clipH || this.clipH>this.maxHeight)
    {   
		this.clipH = this.maxHeight;
	    //alert(this.id+"  ch:"+this.contentHeight+" clpH:"+this.clipH+" maxH:"+this.maxHeight)
        this.layer[2].width = this.panelWidth;
        this.contentHeight = ns ? this.layer[2].document.height : (getLayer(this.content)).offsetHeight;
        this.panelHeight = this.clipH - this.yOffset[2];
        clipLayer(this.layer[2],0,0,this.panelWidth,this.panelHeight);  this.scrollFlag = true;

		//this.layer[2].width = this.clipW-this.theme["buttonSize"];
		
    }
	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"],this.clipH-this.yOffset[2]);
    this.setBgColor(this.layer[3],"scrollBar");
        ht=Math.floor( 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);
		if (this.scrollBoxHeight<30)
			this.layer[6].borderWidth=0;;
		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(w3||ie)
	{
	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);
	}
	if (ns) 
	{
		clipLayer(this.layer[0],0,0,this.clipW+this.theme["borderWidth"]*2,this.clipH+this.theme["borderWidth"]*2);
	}
		
	this.setXY();
    
    
   
}
    function SPupdate(html)
    {   
        this.scrollTo(0);
        l = getLayer(this.content);
		if(ns){	
		    	
			l.document.open();//
			l.document.write(html);
			l.document.close();
			
		}
		else{
			l.innerHTML = html
		}
		
        this.setBgColor(this.layer[2],"bgColor");
        this.doLayout();

    }