var limitYtop=280;
var limitYbottom=660;
var contentSize=1;
var divname='scrollable_content'
var slider='slider';

var range=limitYbottom-limitYtop;	
var ratio=range/contentSize;

var divStart=10;
var divEnd=range+divStart;

function setContentSize(size){
	contentSize=size;
	range=limitYbottom-limitYtop;	
	ratio=range/contentSize;
	divEnd=range+divStart;
}


function Is() {
  var agent = navigator.userAgent.toLowerCase();
  this.major = parseInt(navigator.appVersion);
  this.minor = parseFloat(navigator.appVersion);
  this.ns  = ((agent.indexOf("mozilla")!=-1) && ((agent.indexOf("spoofer")==-1) && (agent.indexOf("compatible") == -1)));
  this.ns2 = (this.ns && (this.major == 3));
  this.ns3 = (this.ns && (this.major == 3));
  this.ns4 = (this.ns && (this.major = 4));
  this.ns6 = (this.ns && (this.major >= 6));
  this.ie   = (agent.indexOf("msie") != -1);
  this.ie3  = (this.ie && (this.major == 2));
  this.ie4  = (this.ie && (this.major >= 4));
  this.op3 = (agent.indexOf("opera") != -1);
}
var is = new Is();

function hookEvent(element, eventName, callback)
{
  //alert(element);
  if(typeof(element) == "string"){
    element = document.getElementById(element);
  }
  if(element == null)
    return;
  if(element.addEventListener)
  {
    if(eventName == 'mousewheel'){
     	 element.addEventListener('DOMMouseScroll', callback, false);
      }  
      element.addEventListener(eventName, callback, false);
  }
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function unhookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
  {
    if(eventName == 'mousewheel')
      element.removeEventListener('DOMMouseScroll', callback, false);  
    element.removeEventListener(eventName, callback, false);
  }
  else if(element.detachEvent)
    element.detachEvent("on" + eventName, callback);
}

function MouseWheel(e)
{
  e = e ? e : window.event;
  var wheelData = e.detail ? e.detail : e.wheelDelta;
  //do something
}

function MouseWheel(e)
{
  e = e ? e : window.event;
  var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;
  //do something
}

function cancelEvent(e)
{
  e = e ? e : window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}

function MouseWheel(e)
{
  e = e ? e : window.event;
  var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;

  //do something

  return cancelEvent(e);
}

function wheel_scroll_content(e){

	var raw = e.detail ? e.detail : e.wheelDelta;
	var normal = e.detail ? e.detail * -1 : e.wheelDelta / 40;
	document.getElementById(divname).scrollTop+=normal*-2;

	before=document.getElementById(divname).scrollTop;
	currentPosition=parseInt(document.getElementById('slider').style.top);
	after =document.getElementById(divname).scrollTop;
	
	newPosition=currentPosition+((normal*-2)*(1/ratio));

	if( (normal*-2)>0 && newPosition<range){
		document.getElementById(slider).style.top=newPosition+"px";
	}
	
	if( (normal*-2)<0 && newPosition>divStart){
		document.getElementById(slider).style.top=newPosition+"px";
	}
	cancelEvent(e);
}

var timerUp;
var timerDown;

var step=2;

function scroll_content_stop(){
	clearTimeout(timerUp);
	clearTimeout(timerDown);
}

function scroll_content_up(){
	currentPosition=parseInt(document.getElementById(slider).style.top);
	newPosition=currentPosition-(step*(1/ratio));

	if(newPosition>divStart)
		document.getElementById(slider).style.top=newPosition+"px";
	
	before=document.getElementById(divname).scrollTop;
	document.getElementById(divname).scrollTop-=step;
	after=document.getElementById(divname).scrollTop;
	
	if(before==after) document.getElementById(slider).style.top=divStart+"px";
	
	timerUp=setTimeout("scroll_content_up(divname)",10);
}

function scroll_content_down(){
	currentPosition=parseInt(document.getElementById(slider).style.top);
	newPosition=currentPosition+(step*(1/ratio));
		
	if(newPosition<range)
		document.getElementById(slider).style.top=newPosition+"px";
		
	before=document.getElementById(divname).scrollTop;
	document.getElementById(divname).scrollTop+=step;
	after=document.getElementById(divname).scrollTop;
	
	if(before==after) document.getElementById(slider).style.top=range+"px";

	timerDown=setTimeout("scroll_content_down(divname)",10);
}

//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See http://www.brainjar.com for terms of use.
//*****************************************************************************

// Determine browser and version.

function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser1 = new Browser();	// Giving variable name browser breaks the dragging functionality in mapquest.com 

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 9999;
var contentScrollTop;


function dragStart(event, id) {

  var el;
  var x, y;

  // If an element id was given, find it. Otherwise use the element being
  // clicked on.

  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser1.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser1.isNS)
      dragObj.elNode = event.target;

    // If this is a text node, use its parent element.

    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }

  // Get cursor position with respect to the page.

  if (browser1.isIE) {
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
    //alert(y);

  }
  if (browser1.isNS) {
    y = event.clientY + window.scrollY;
  }

	
	
  // Save starting positions of cursor and element.

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  0);
  contentScrollTop=document.getElementById(divname).scrollTop;

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = divStart;

  // Update element's z-index.

//  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  // Capture mousemove and mouseup events on the page.

  if (browser1.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser1.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser1.isIE) {
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser1.isNS) {
    y = event.clientY + window.scrollY;
  }

  // Move drag element by the same amount the cursor has moved.

	
	document.getElementById(divname).scrollTop=contentScrollTop+( (y - dragObj.cursorStartY) * ratio) ;
	
	if(y<limitYtop) {
		y=limitYtop;
	}
	
	if(y>limitYbottom){
		y=limitYbottom;
	}

  //dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser1.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser1.isNS)
    event.preventDefault();
}

function dragStop(event) {

  // Stop capturing mousemove and mouseup events.

  if (browser1.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser1.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}