var scrollUpId;
var scrollDownId;
var scrollHeight = 0;
var mouseWithIn = false;

$(document).ready(function(){
    $("#slide").slider({change: scrollchange, slide:scrollslide});
	$("#up").mouseover(function(){
		scrollUpId = setInterval(scrollUp, 10);
	})
	$("#up").mouseout(function(){
		clearInterval(scrollUpId);
	})
	$("#down").mouseover(function(){
		scrollDownId = setInterval(scrollDown, 10);
	})
	$("#down").mouseout(function(){
		clearInterval(scrollDownId);
	})
	checkScroll();
});
  function scrollchange(event, ui){
  	var max= $("#scrollcontainer").attr("scrollHeight")-$("#scrollcontainer").height();
	$("#scrollcontainer").attr({scrollTop: ui.value * max / 100 });
	scrollHeight = ui.value * max / 100;
  }
  function scrollslide(event, ui){
  	var max= $("#scrollcontainer").attr("scrollHeight")-$("#scrollcontainer").height();
	$("#scrollcontainer").attr({scrollTop: ui.value * max / 100 });
	scrollHeight = ui.value * max / 100;
  }
  function scrollUp(){
	var max= $("#scrollcontainer").attr("scrollHeight")-$("#scrollcontainer").height();
	scrollHeight -= 3;
	scrollHeight = scrollHeight>max?max:scrollHeight;
	scrollHeight = scrollHeight<0?0:scrollHeight;
	var value = Math.floor(scrollHeight / max * 100);
  	$("#slide").slider("moveTo", ""+value);
  }
  function scrollDown(){
	var max= $("#scrollcontainer").attr("scrollHeight")-$("#scrollcontainer").height();
	scrollHeight += 3;
	scrollHeight = scrollHeight>max?max:scrollHeight;
	scrollHeight = scrollHeight<0?0:scrollHeight;
	var value = Math.ceil(scrollHeight / max * 100);
	//alert(scrollHeight);
  	$("#slide").slider("moveTo", ""+value);
  }
  function checkScroll(){
  	if ($("#scrollcontainer").attr("scrollHeight") <= $("#scrollcontainer").height()) {
		$("#slide").slider("disable");
		$("#slide").hide();
		$("#up").css("display", "none");
		$("#down").css("display", "none");
	}
	else{
		$("#slide").slider("enable");
		$("#slide").show();
		$("#up").css("display", "block");
		$("#down").css("display", "block");		
	}
  }

  
function handleWheel(delta) {
        if (delta > 0)
			scrollUp();
        else
			scrollDown();
}

function wheel(event){
	var p = $("#scrollcontainer").position();
	var delta = 0;
	if (!event) /* For IE. */ 
		event = window.event;
	if (event.clientX > p.left && event.clientX < p.left + 600 && event.clientY > p.top && event.clientY < p.top + 450) {
		if (event.wheelDelta) { /* IE/Opera. */
			delta = event.wheelDelta / 120;
			/** In Opera 9, delta differs in sign as compared to IE.
		 */
			if (window.opera) 
				delta = -delta;
		}
		else 
			if (event.detail) { /** Mozilla case. */
				/** In Mozilla, sign of delta is different than in IE.
		 * Also, delta is multiple of 3.
		 */
				delta = -event.detail / 3;
			}
		/** If delta is nonzero, handle it.
	 * Basically, delta is now positive if wheel was scrolled up,
	 * and negative, if wheel was scrolled down.
	 */
		if (delta) 
			handleWheel(delta);
		if (event.preventDefault) 
			event.preventDefault();
		event.returnValue = false;
	}
}

/** Initialization code. 
 * If you use your own event management code, change it as required.
 */
if (window.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;