var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = getMouseXY;

var mosX = 0
var mosY = 0
viewportTop = 0
viewportLeft = 0
containerTop = 0
containerLeft = 0 

//Gets the mouse position on the page
function getMouseXY(e) {
  if (IE) {
    mosX = event.clientX + document.body.scrollLeft
    mosY = event.clientY + document.body.scrollTop
  } else {
    mosX = e.pageX
    mosY = e.pageY
  }  
  if (mosX < 0){mosX = 0}
  if (mosY < 0){mosY = 0}  
  return true
}

//The main function that is called in the mouseover event of your viewport element(s)
function hsscroll(theLink){
  viewport = theLink.id;
  container = document.getElementById(viewport).getElementsByTagName("DIV")[0].id;
  
  var vel=document.getElementById(viewport);
  var viewportLeft=0,viewportTop=0;
  if (vel.offsetParent)
  {
	do
	{
		viewportLeft+=vel.offsetLeft;
		viewportTop+=vel.offsetTop;
	}
	while(vel=vel.offsetParent);
  }
  
  var cel=document.getElementById(container);
  var containerLeft=0,containerTop=0;
  if (cel.offsetParent)
  {
	do
	{
		containerLeft+=cel.offsetLeft;
		containerTop+=cel.offsetTop;
	}
	while(cel=cel.offsetParent);
  }
  
  if (document.getElementById(theLink.id).className=="hs-vertical"){
  	if (document.getElementById(container).offsetHeight>document.getElementById(viewport).offsetHeight){
	  varA = ((mosY-viewportTop)/document.getElementById(viewport).offsetHeight);
	  varB = document.getElementById(container).offsetHeight - document.getElementById(viewport).offsetHeight;
	  contop = (varA*varB)^-1;
	  document.getElementById(container).style.top = contop+"px";
	}
  }
  if (document.getElementById(theLink.id).className=="hs-horizontal"){
  	if (document.getElementById(container).offsetWidth>document.getElementById(viewport).offsetWidth){
	  varA = ((mosX-viewportLeft)/document.getElementById(viewport).offsetWidth);
	  varB = document.getElementById(container).offsetWidth - document.getElementById(viewport).offsetWidth;
	  conleft = (varA*varB)^-1;
	  document.getElementById(container).style.left = conleft+"px";
	}
  }
  if (document.getElementById(theLink.id).className=="hs-pan"){
  	if (document.getElementById(container).offsetWidth>document.getElementById(viewport).offsetWidth || document.getElementById(container).offsetHeight>document.getElementById(viewport).offsetHeight){
	  varA = ((mosX-viewportLeft)/document.getElementById(viewport).offsetWidth);
	  varB = document.getElementById(container).offsetWidth - document.getElementById(viewport).offsetWidth;
	  conleft = (varA*varB)^-1;
	  varC = ((mosY-viewportTop)/document.getElementById(viewport).offsetHeight);
	  varD = document.getElementById(container).offsetHeight - document.getElementById(viewport).offsetHeight;
	  contop = (varC*varD)^-1;
	  document.getElementById(container).style.left = conleft+"px";
	  document.getElementById(container).style.top = contop+"px";
	}
  }
}