$(document).ready(function() {	

	//adding the event listerner for Mozilla
	if(window.addEventListener) document.addEventListener('DOMMouseScroll', moveObject, false);
	//for IE/OPERA etc
	document.onmousewheel = moveObject;


	$('#scrollable').css({'overflow':'hidden'});
	
	var sHeight = $('#scrollable-in').height();
	var maxTop = 280 - sHeight;
	var speedMultiplier = 4;
	var defaultSpeed = speedMultiplier*sHeight;
	var currentTop = '';

	if (sHeight > 280){
		$("#content").append('<div id="scrollbars"><a href="#" title="UP" id="scrollup">Scroll UP</a><br /><a href="#" title="DOWN" id="scrolldown">Scroll DOWN</a></div>');

		$("#scrolldown").hover(

			function() {
				currentTop = $('#scrollable-in').css('top').replace("px", "");
				defaultSpeed = -(maxTop-currentTop)*speedMultiplier;
				//$("h1").text(defaultSpeed);	
				//alert (speedTop);
				$('#scrollable-in').animate({'top':maxTop}, defaultSpeed, "linear")},
			function() {
				speedTop = speedMultiplier*sHeight;
				$('#scrollable-in').stop();
		})

		$("#scrollup").hover(
			function() {
				currentTop = $('#scrollable-in').css('top').replace("px", "");
				defaultSpeed = (-parseInt(currentTop)*speedMultiplier);
				//$("h1").text(defaultSpeed);				
				$('#scrollable-in').animate({'top':'0px'}, defaultSpeed, "linear")},
			function() {
				defaultSpeed = speedMultiplier*sHeight;
				$('#scrollable-in').stop();
		})
	} else { $("#scrollbars").remove();
	}


	function moveObject(event){
		if ($('#scrollable-in').css('top').replace("px", "") <= 0 && $('#scrollable-in').css('top').replace("px", "") >= maxTop){
			var delta = 0; 
			if (!event) event = window.event;  

			if (event.wheelDelta)
			{
				// IE & Opera
				delta = event.wheelDelta / 100;
			}
			else if (event.detail) // W3C
			{
				delta = -event.detail / 2;
			}
			currentTop=$('#scrollable-in').css('top').replace("px", "");
			currentTop = parseInt(currentTop)+(delta*10);
			if (currentTop > 0) {currentTop = 0};
			if (currentTop < maxTop) {currentTop = maxTop};
			
			currentTop = currentTop+"px";
			$('#scrollable-in').css({'top':currentTop});
			//$("h1").text(currentTop);
		}
	}

});
