// JavaScript Document


<!--
// Custom Scroll Bars (12-08-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Applies Custom Scroll Bars to a Message Scroll Panel.
// Horizontal, Vertical or both may be applied.
// The Scroll Bars may be in or external to the Message Scroll Panel.

// There may be as many applications as required on a page.

// The Message Scroll Panel and content may be defined in the pages HTML code
// or if the  Message Scroll Panel is an <IFRAME> the content may be a HTML file.
// The Custom Scroll Bars are defined in the pages HTML code
// and the appearance may be customised by applying CSS style.

// Application Notes

// When the Message Scroll Panel and Content defined in the page HTML code

// The Message Scroll Panel is defined in the HTML code
// e.g.
// <div id="databox2" style="position:absolute;overflow:hidden;left:100px;top:360px;width:200px;height:100px;border:solid black 1px;"  >
// <div style="position:absolute;left:0px;top:0px;width:200px;text-Align:center;"  >
// <br>
// The quick bown Fox<br>
// .........
// The quick bown Fox<br>
// The quick bown Fox<br>
// <br>
// <br>
// </div>
// </div>

// The Message Panel is a <DIV> with a unique ID
// The position style of this <DIV> can be 'absolute' or 'relative',
// the overflow must be 'hidden'

// A <DIV> containing the message HTML is nested in the Message Panel <DIV>
// The position style of this <DIV> must be 'absolute',
// top and left positions will be retained when scrolling,
// the width is optional, the height must NOT be set.


// Where the  Message Scroll Panel is an <IFRAME> and the Content an HTML file.

// The  Message Scroll Panel <IFRAME>
// e.g.
// <iframe name="fred" id="fred" src="F1F1.htm"
// onload="csbCustomXScroll(this.name,'scrollboxFX');csbCustomYScroll(this.name,'scrollboxFY');"
// width="200" height="200" marginwidth="0" marginheight="0"  scrolling="no"
// style="position:absolute;left:410px;top:310px;" ></iframe>

// The <IFRAME> must have a unique NAME and ID name

// The <IFRAME> src contains the Content
// e.g.
// <html>
// <head>
// </head>
// <body >
// <div style="position:absolute;left:0pt;top:10px;width:200px;text-Align:center;"  >
// MouseOver=stop<br>
// MouseOut=start<br>
// .........
// More data<br>
// More data<br>
// <br>
// <br>
// </div>
// </body>
// </html>


// Each Custom Scroll Bar is defined in the HTML code
// e.g.
// <div id="scrollbox2" style="position:absolute;overflow:hidden;left:50px;height:100px;top:350px;width:20px;"  >
// <div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:10px;background-Color:green;border:solid black 1px;"  >
// </div>
// </div>

// The Custom Scroll Bar is a <DIV> with a unique ID
// The position style of this <DIV> can be 'absolute' or 'relative',
// the overflow must be 'hidden',
// the width and hight are set according to its application as a Vertical or Horizontal bar.

// The first nested <DIV> is the 'Slider'
// The position style of this <DIV> must be 'absolute'.

// If 'Up' and 'Down' controlls are required two more <DIV>s must be added
// e.g.
// <div id="scrollbox2" style="position:absolute;overflow:hidden;left:50px;height:100px;top:350px;width:20px;"  >
// <div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:10px;background-Color:green;border:solid black 1px;"  >
// <div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:20px;background-Color:yellow;border:solid black 1px;"  >
// <div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:20px;background-Color:yellow;border:solid black 1px;"  >
// </div>
// </div>

// The examples above use inline style definitions,
// the use of  'Style Classes' is recommended in the actual application.

// Initialising the Script

// When the Message Scroll Panel and Content defined in the page HTML code

// The Message Scroll Panels and Custom Scroll Bars
// are initialised from a <BODY> onload event
// e.g.
// <body onload="csbCustomYScroll('*MessPanelID*','*ScrollBarID*');csbCustomXScroll('*MessPanelID*','*ScrollBarID*');">
// where:
// csbCustomYScroll(.. = intitalises the Vertical(Y)   Scroll Bars.
// csbCustomXScroll(.. = intitalises the Horizontal(X) Scroll Bars.
// *MessPanelID* = the unique ID name of the Message Panel     (string)
// *ScrollBarID* = the unique ID name of the Custom Scroll Bar (string)

// If there is more than one application on the page
// simply repeat the Scroll Panels and Custom Scroll Bars pairs
// e.g. csbCustomYScroll('*MessPanelID-1*','*ScrollBarID-1*','*MessPanelID-2*','*ScrollBarID-2*');

// Where the  Message Scroll Panel is an <IFRAME> and the Content an HTML file.

// The script is initialised by an <IFRAME> onload event
// e.g.
// <iframe name="fred" id="fred" src="F1F1.htm"
// onload="csbCustomXScroll(this.name,'scrollboxFX');csbCustomYScroll(this.name,'scrollboxFY');"
// width="200" height="200" marginwidth="0" marginheight="0"  scrolling="no"
// style="position:absolute;left:410px;top:310px;" ></iframe>

// General

// All variable, function etc. names are prefixed with 'csb' to minimise coflicts with other JavaScripts

// The Script(5.5k less notes) is best as an external JavaScript.

// Tested with IE6 and Mozilla FireFox

// Functional Code - NO Need to change

var csbObj,csbDragX,csbMseX,csbDragY,csbMseY,csbTO,csbSpd,csbD;

function csbCustomXScroll(){
 csbarg=csbCustomXScroll.arguments;
 for (csb0=0;csb0<csbarg.length;csb0+=1){
  csbdobj=document.getElementById(csbarg[csb0]);
  if (csbdobj.tagName=='IFRAME'){ csbiobj=window.frames[csbarg[csb0]].document.getElementsByTagName('DIV')[0]; }
  else { csbiobj=csbdobj.getElementsByTagName('DIV')[0];  }
  csbpobj=document.getElementById(csbarg[csb0+1]);
  csbsobj=csbpobj.getElementsByTagName('DIV')[0];
  csblobj=csbpobj.getElementsByTagName('DIV')[1];
  csbrobj=csbpobj.getElementsByTagName('DIV')[2];
  csbsobj.os=0;
  if (csblobj&&csbrobj){
   csbsobj.os=csblobj.offsetWidth;
   csblobj.obj=csbsobj;
   csblobj.onmousedown=function(){ csbSpd=1; csbLeftRight(this.obj,0); }
   csblobj.onmouseup=function(){ clearTimeout(csbTO); }
   csblobj.style.left='0px';
   csblobj.style.zIndex=1;
   csbrobj.obj=csbsobj;
   csbrobj.onmousedown=function(){ csbSpd=1; csbLeftRight(this.obj,1); }
   csbrobj.onmouseup=function(){ clearTimeout(csbTO); }
   csbrobj.style.left=(csbpobj.offsetWidth-csbrobj.offsetWidth)+'px';
   csbrobj.style.zIndex=1;
  }
  csbsobj.style.left=(csbsobj.os)+'px';
  csbsobj.onmousedown=function(event){ csbXMseDown(event,this);}
  csbsobj.inw=csbiobj.offsetWidth-csbdobj.offsetWidth+csbsobj.offsetWidth*2;
  csbsobj.pw=csbsobj.parentNode.offsetWidth-csbsobj.offsetWidth;
  csbsobj.obj=csbiobj;
  csbsobj.objos=csbiobj.offsetLeft;
 }
}

function csbCustomYScroll(){
 csbarg=csbCustomYScroll.arguments;
 for (csb0=0;csb0<csbarg.length;csb0+=2){
  csbdobj=document.getElementById(csbarg[csb0]);
  if (csbdobj.tagName=='IFRAME'){ csbiobj=window.frames[csbarg[csb0]].document.getElementsByTagName('DIV')[0]; }
  else { csbiobj=csbdobj.getElementsByTagName('DIV')[0];  }
  csbpobj=document.getElementById(csbarg[csb0+1]);
  csbsobj=csbpobj.getElementsByTagName('DIV')[0];
  csbtobj=csbpobj.getElementsByTagName('DIV')[1];
  csbbobj=csbpobj.getElementsByTagName('DIV')[2];
  csbsobj.os=0;
  if (csbtobj&&csbtobj){
   csbsobj.os=csbtobj.offsetHeight;
   csbtobj.obj=csbsobj;
   csbtobj.onmousedown=function(){ csbSpd=1; csbUpDown(this.obj,0); }
   csbtobj.onmouseup=function(){ clearTimeout(csbTO); }
   csbtobj.style.top='0px';
   csbtobj.style.zIndex=1;
   csbbobj.obj=csbsobj;
   csbbobj.onmousedown=function(){ csbSpd=1; csbUpDown(this.obj,1); }
   csbbobj.onmouseup=function(){ clearTimeout(csbTO); }
   csbbobj.style.top=(csbpobj.offsetHeight-csbbobj.offsetHeight)+'px';
  }
  csbsobj.style.top=(csbsobj.os)+'px';
  csbsobj.onmousedown=function(event){ csbYMseDown(event,this);}
  csbsobj.inh=csbiobj.offsetHeight-csbdobj.offsetHeight;
  csbsobj.ph=csbpobj.offsetHeight-csbsobj.offsetHeight-csbsobj.os*0;
  csbsobj.obj=csbiobj;
  csbsobj.objos=csbiobj.offsetTop;
 }
}

function csbLeftRight(csbobj,csbd){
 csbObj=csbobj; csbD=csbd;
 if (csbD){ csbObj.style.left=(csbObj.offsetLeft-csbSpd)+'px'; }
 else { csbObj.style.left=(csbObj.offsetLeft+csbSpd)+'px'; }
 csbPosInnerX();
 csbSpd=csbSpd*1.1;
 if (csbSpd>95){ csbSpd=95; }
 if (csbObj.offsetLeft>0+csbObj.os&&csbObj.offsetLeft<csbObj.pw-csbObj.os){
  csbTO=setTimeout('csbLeftRight(csbObj,csbD)',100-csbSpd);
 }
 else {
  if (csbObj.offsetLeft<csbObj.os){ csbObj.style.left=csbObj.os+'px'; }
  if (csbObj.offsetLeft>csbObj.pw-csbObj.os){ csbObj.style.left=(csbObj.pw-csbObj.os)+'px'; }
  csbPosInnerX();
 }
}

function csbUpDown(csbobj,csbd){
 csbObj=csbobj; csbD=csbd;
 if (csbD){ csbObj.style.top=(csbObj.offsetTop-csbSpd)+'px'; }
 else { csbObj.style.top=(csbObj.offsetTop+csbSpd)+'px'; }
 csbPosInnerY();
 csbSpd=csbSpd*1.1;
 if (csbSpd>95){ csbSpd=95; }
 if (csbObj.offsetTop>0+csbObj.os&&csbObj.offsetTop<csbObj.ph-csbObj.os){
  csbTO=setTimeout('csbUpDown(csbObj,csbD)',100-csbSpd);
 }
 else {
  if (csbObj.offsetTop<csbObj.os){ csbObj.style.top=csbObj.os+'px'; }
  if (csbObj.offsetTop>csbObj.ph-csbObj.os){ csbObj.style.top=(csbObj.ph-csbObj.os)+'px'; }
  csbPosInnerY();
 }
}

function csbXMseDown(event,csbobj) {
 document.onmousemove=function(event){csbXDrag(event);}
 document.onmouseup=function(event){csbMseUp(event);}
 csbObj=csbobj;
 csbMse(event);
 csbDragX=csbMseX-csbObj.offsetLeft;
}

function csbXDrag(event) {
 csbMse(event);
 if ((csbMseX-csbDragX)>0+csbObj.os&&(csbMseX-csbDragX)<csbObj.pw-csbObj.os){
  csbObj.style.left=(csbMseX-csbDragX)+'px';
 }
 csbPosInnerX();
}

function csbYMseDown(event,csbobj) {
 document.onmousemove=function(event){csbYDrag(event);}
 document.onmouseup=function(event){csbMseUp(event);}
 csbObj=csbobj;
 csbMse(event);
 csbDragY=csbMseY-csbObj.offsetTop;
}

function csbYDrag(event) {
 csbMse(event);
 if ((csbMseY-csbDragY)>=csbObj.os&&(csbMseY-csbDragY)<csbObj.ph-csbObj.os){
  csbObj.style.top=(csbMseY-csbDragY)+'px';
 }
 csbPosInnerY();
}

function csbMse(event){
 if(!event) var event=window.event;
 if (document.all){ csbMseX=event.clientX; csbMseY=event.clientY; }
 else {csbMseX=event.pageX; csbMseY=event.pageY; }
}

function csbMseUp(event) {
 document.onmousemove=null; csbDragX=-1; csbDragY=-1;
}

function csbPosInnerX() {
 csbObj.obj.style.left=(-((csbObj.offsetLeft-csbObj.os)*csbObj.inw/(csbObj.pw-csbObj.os*2))+csbObj.objos)+'px'
}

function csbPosInnerY(){
 csbObj.obj.style.top=(-((csbObj.offsetTop-csbObj.os)*csbObj.inh/(csbObj.ph-csbObj.os*2))+csbObj.objos)+'px'
}

//-->
