var defSpeed = 0.05;
var speed;
var delay;
var dir;
var id;
var pos;
var el;
var elPxInEm;
var left;
var top;
var startX;
var startY;
var parWidth;
var parHeight;

function getStyleById(id, property) {
	if (document.all) {
    	/* IE */
    	el = document.all(id);
  	}
  	else if (document.getElementById) {
   	/* W3C DOM */
    	el = document.getElementById(id);
  	}

	if (el.currentStyle) {
	/* IE */
		return el.currentStyle[property];
	}
	else if (window.getComputedStyle) {
	/* W3C DOM */
		var elStyle = window.getComputedStyle(el, "");
		return elStyle.getPropertyValue(property);
	}
}

function getPxInEm(el) { 
  /* Create a temporary block element */ 
  tdiv = el.appendChild(document.createElement('div'));
  with(tdiv.style) { 
    margin = '0px';
    padding = '0px';
    border = 'none';
    height = '1em';
    width = '1em';
  }
  /* Now the element's offsetHeight in pixels should represent 1EM */
    pxInEM = tdiv.offsetHeight;

  /* Delete the temporary block element */
    el.removeChild(tdiv);

  /* Return the value */
    return pxInEM;
}

function scrollInit(Id, Pos) {
  id = Id;
  pos = Pos;

  /* Set value of left and top to CSS attributes of id */
  /* Set value of defWidth and defHeight to id's parent element CSS attributes */

  if (document.all) {
    /* Internet Explorer */
    el = document.all(id);
  }
  else if (document.getElementById) {
    /* W3C DOM */
    el = document.getElementById(id);
  }
  elPxInEm = getPxInEm(el);

  if (pos == "left") {
    parWidth = el.offsetWidth/elPxInEm;
    startX = parseFloat(getStyleById(id, "left", 1));
    left = startX;
  }
  else if (pos == "top") {
    parHeight = el.offsetHeight/elPxInEm;
    startY = parseFloat(getStyleById(id, "top", 1));
    top = startY;
  }
  speed = defSpeed;
}

function scroll(Id, Dir) {
  id = Id;
  dir = Dir;

  /* Check if left and top have value */
  if (isNaN((left))) { 
    scrollInit(id, "left"); 
  }
  if (isNaN((top))) { 
    scrollInit(id, "top"); 
  }

  /* Assign left and top new values onmouseover */
  if ((dir == "left") && (left > (parWidth*(-1)))) { 
    left += speed; 
  }
  else if ((dir == "right") && (left > startX)) { 
    left -= speed; 
  }
  else if ((dir == "up") && (top < startY)) { 
    top += speed; 
  }
  else if ((dir == "down") && (top > (parHeight*(-1)))) { 
    top -= speed; 
  }

  if (document.all) {
    /* Internet Explorer */
    el = document.all(id);
  }
  else if (document.getElementById) {
    /* W3C DOM */
    el = document.getElementById(id);
  }
  el.style.left = left + 'em';
  el.style.top = top + 'em';

  /* Set scroll animation rate */
  delay = setTimeout("scroll(id, dir)", 20);
}

function reset(Id) {
  id = Id;

  /* Check if left and top have value */
  if (isNaN((left))) { 
    scrollInit(id, "left"); 
  }
  if (isNaN((top))) { 
    scrollInit(id, "top"); 
  }

  /* Reset Speed & reposition content in contentArea with original left(startX) & top(startY) */
  if (document.all) {
    /* Internet Explorer */
    el = document.all(id);
  }
  else if (document.getElementById) {
    /* W3C DOM */
    el = document.getElementById(id);
  }
  left = startX;
  top = startY;
  speed = defSpeed;

  el.style.left = left + 'em';
  el.style.top = top + 'em';
}

function speedUp() {
  /* Allow speed to increase up to 5 times and check for rounding error */
  if (speed < (defSpeed*6)) {
	speed += defSpeed;
  }
}

function speedDown() {
  /* Allow speed to decrease up to 5 times and check for rounding error */
  if (speed > (defSpeed + 0.01)) {
	speed -= defSpeed;
  }
}