var theHandle = [];
var theRoot = [];
var theThumb = [];
var theScroll = [];
var thumbTravel = [];
var ratio = [];

var listCount= new Array(2);

function instantiateScroller(count, id, left, top, width, height, speed, fileCount) {

  listCount[count] = fileCount;

  if (document.getElementById) {

    theScroll[count] = new ypSimpleScroll(id, left, top, width, height, speed);

  }

}

function createDragger(count, handler, root, thumb, minX, maxX, minY, maxY) {

  var buttons = '<div class="up" id="up'+count+'"><a onclick="theScroll['+count+'].scrollNorth(\''+count+'\')" onmouseout="theScroll['+count+'].endScroll()" onclick="return false;"><img src="/styles/moliview/i/up.gif" width="21" height="23"></a></div><div class="dn"  id="dn'+count+'""><a onclick="theScroll['+count+'].scrollSouth(\''+count+'\')" onmouseout="theScroll['+count+'].endScroll()" onclick="return false;"><img src="/styles/moliview/i/dn.gif" width="21" height="23"></a></div><div class="thumb" id="'+thumb+'" style="left:276px; top: 21px; position:relative;"><img src="/styles/moliview/i/thumb.gif" width="21" height="23"></div>';
  
  document.getElementById(root).innerHTML = buttons + document.getElementById(root).innerHTML;
  theRoot[count] = document.getElementById(root);
  theThumb[count] = document.getElementById(thumb);
  var thisup = document.getElementById("up"+count);
  var thisdn = document.getElementById("dn"+count);
  theThumb[count].style.left = parseInt(minX-25) + "px";
  thisup.style.left = parseInt(minX-25) + "px";
  thisdn.style.left = parseInt(minX-25) + "px";
  theThumb[count].style.border =0;
  theThumb[count].style.top = parseInt(minY) + "px";
  thisup.style.top = 0 + "px";
  thisdn.style.top = parseInt(minY+maxY) + "px";
  //thisdn.style.top = 15 + "px";
  theScroll[count].load();
  if (listCount[count] < 6) {

    document.getElementById(thumb).style.display = "none";
	document.getElementById("up"+count).style.opacity = "0.2";
	document.getElementById("dn"+count).style.opacity = "0.2";	

  }
  //Drag.init(theHandle[count], theRoot[count]); //not draggable on screen
  Drag.init(theThumb[count], null, minX-25, maxX-25, minY, maxY);

  // the number of pixels the thumb can travel vertically (max - min)
  thumbTravel[count] = theThumb[count].maxY - theThumb[count].minY;

  // the ratio between scroller movement and thumbMovement
  ratio[count] = theScroll[count].scrollH / thumbTravel[count];

  theThumb[count].onDrag = function(x, y) {
    
    theScroll[count].jumpTo(null, Math.round((y - theThumb[count].minY) * ratio[count]));
  
  }

}	

/**
 *  INITIALIZER
 */
function addLoadEvent(fn) {

  var old = window.onload;
  if (typeof window.onload != 'function') {

    window.onload = fn;

  }
  else {

    window.onload = function() {

      old();
      fn();

    }

  }

}
addLoadEvent(function() {

  if (theScroll.length > 0) {

    for (var i=0 ; i < theScroll.length ; i++) {

      createDragger(i, "handle"+i, "root"+i, "thumb"+i, theScroll[i].clipW, theScroll[i].clipW, 21, theScroll[i].clipH-43);

    }

  }
}

)