addLoadEvent(prepareFilmStrip);


function prepareFilmStrip(){
	var content = document.getElementById('mid_content_text');
	    content.style.top="0px";
	    content.style.left="0px";

	//in px
	var viewer = 315;
	var arrow_up = document.getElementById('arrow_up');
	var arrow_down = document.getElementById('arrow_down');

	var top_final_y = -(content.clientHeight - viewer);
	var bot_final_y = 0;
	var final_x = 0;
	var interval = 10;
	arrow_up.onmousedown = function(){
		moveElement(content.getAttribute('id'), final_x, top_final_y, interval);
	}
	arrow_up.onmouseup = function(){
		clearTimeout(movement);
	}
	arrow_down.onmousedown = function(){
		moveElement(content.getAttribute('id'), final_x, bot_final_y, interval);
	}
	arrow_down.onmouseup = function(){
		clearTimeout(movement);
	}

	// make links return false so page doesn't bounce around
	arrow_up.onclick = function(){
		return false;
	}
	arrow_down.onclick = function(){
		return false;
	}
	

}
var movement;
function moveElement(elementID, final_x, final_y, interval) {
  var elem = document.getElementById(elementID);

//  if (elem.movement){
//	clearTimeout(elem.movement);
 // }

  var xpos = parseInt( elem.style.left );
  var ypos = parseInt( elem.style.top );
  if ( xpos == final_x && ypos == final_y ) {
    return true; 
  }
  if (xpos < final_x) { xpos += 2; }
  if (xpos > final_x) { xpos -=2; }
  if (ypos < final_y) { ypos += 2; }
  if (ypos > final_y) { ypos -=2; }

  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";

  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  movement = setTimeout(repeat, interval);
}