var buttonDown = false;
var buttonDirection = "up";
var buttonSliderId = "";
var timerValue = 1;

var frameHeight;
var contentHeight;
var sliderHeight;
var sliderOffset;
var sliderCurrentOffset;


/*
 *	timerFunction
 *
 *	this function is called by scrollButtonDownHandler and it's self
 *	it loops with timer and executes the scrolling action
 */
function timerFunction()
{
	if( buttonDown )
	{
		/* get relevant elements */
		var elementToDrag = buttonSliderId;
		var frameId = ( elementToDrag + "-frame" );
		var contentId = ( elementToDrag + "-content" );
		var offsetId = ( elementToDrag + "-buttonU" );
		
		/* check browser compatibility and set things up for scroll math */
		if( document.addEventListener )  // DOM Level 2 event model
		{
			var frameStyle = 
				document.defaultView.getComputedStyle( document.getElementById( frameId ), ""	);
			var contentStyle = 
				document.defaultView.getComputedStyle( document.getElementById( contentId ), "" );
			var sliderStyle = 
				document.defaultView.getComputedStyle( document.getElementById( elementToDrag ),	"" );
			var offsetStyle = 
				document.defaultView.getComputedStyle( document.getElementById( offsetId ), "" );
				
			var frameHeightString = new String( frameStyle.height );
			var contentHeightString = new String( contentStyle.height );
			var sliderHeightString = new String( sliderStyle.height );
			var sliderOffsetString = new String( offsetStyle.height );
			var sliderCurrentOffsetString = new String( sliderStyle.top );
			
			frameHeight = parseInt( frameHeightString.substr( 0, ( frameHeightString.length - 2 ) ) );
			contentHeight = parseInt( contentHeightString.substr( 0, ( contentHeightString.length - 2 ) ) );
			sliderHeight = parseInt( sliderHeightString.substr( 0, ( sliderHeightString.length - 2 ) ) );
			sliderOffset = parseInt( sliderOffsetString.substr( 0, ( sliderOffsetString.length - 2 ) ) );
			sliderCurrentOffset = parseInt( sliderCurrentOffsetString.substr( 0, ( sliderCurrentOffsetString.length - 2 ) ) );				
		}
		else if( document.attachEvent )  // IE 5+ Event Model
		{
			frameHeight = document.all[frameId].offsetHeight;
			contentHeight = document.all[contentId].offsetHeight;
			sliderHeight = document.all[elementToDrag].offsetHeight;
			sliderOffset = document.all[offsetId].offsetHeight;
			sliderCurrentOffset = document.all[elementToDrag].offsetTop;
		}
		else  // IE 4 Event Model
		{
			frameHeight = document.all[frameId].offsetHeight;
			contentHeight = document.all[contentId].offsetHeight;
			sliderHeight = document.all[elementToDrag].offsetHeight;
			sliderOffset = document.all[offsetId].offsetHeight;
			sliderCurrentOffset = document.all[elementToDrag].offsetTop;	
		}				
		

		
		/* do bumpering math */
		sliderOffset = ( sliderOffset + 1 );
		
		var sliderMax = ( frameHeight - sliderHeight - sliderOffset );
		var elementToScroll = document.getElementById( contentId );

		var scrollPosition = sliderCurrentOffset;
		var percentSlid = ( scrollPosition - sliderOffset ) / ( sliderMax - sliderOffset );

		/* bumpering check */
		
		/* this has to be what's wrong: */
		//alert( percentSlid );

		//alert( sliderMax );

		//alert( sliderHeight );


		
		if( 
			( ( percentSlid > 0 ) && ( percentSlid <= 1 ) && ( buttonDirection == "up" ) ) ||
			( ( percentSlid >= 0 ) && ( percentSlid < 1 ) && ( buttonDirection == "down" ) )
		)
		{
			/* do scoll math & assign new CSS properties */
			if( buttonDirection == "down" ) scrollPosition++;
			else scrollPosition--;		
								
			percentSlid = ( scrollPosition - sliderOffset ) / ( sliderMax - sliderOffset );

			document.getElementById( elementToDrag ).style.top = scrollPosition + "px";
			elementToScroll.style.top = 
				( 
					( 
						-1 *  
						percentSlid * 
						( contentHeight - sliderMax - sliderHeight - sliderOffset ) 
					)
					+ "px" 
				);					
		}

		/* kick off the next scroll with timer */
		setTimeout( 'timerFunction()', timerValue );
	}
}


/*
 *	scrollButtonDownHandler elementClicked event
 *
 *	handler for when scroll button pressed
 *	set the initial timer and assign stopping handlers
 */
function scrollButtonDownHandler( elementClicked, event )
{
	buttonDown = true;
	var classString = new String( elementClicked.className );
	buttonSliderId = classString.substr( 0, ( classString.length - 7 ) );

	/* who clicked, right or left? */
	classNameString = new String( elementClicked.id );
	
	buttonDirection = 
		( classNameString.substr( classNameString.length - 1, classNameString.length ) == "U" ) ?
		"up" : 
		"down";
	
	/* check browsers and assign handlers for stopping */
	if( document.addEventListener )  // DOM Level 2 event model
	{			
		document.addEventListener( "mouseout", stopButtonHandler, true );
		document.addEventListener( "mouseup", stopButtonHandler, true );
	}
	else if( document.attachEvent )  // IE 5+ Event Model
	{
		elementClicked.setCapture( );
		elementClicked.attachEvent( "onmouseout", stopButtonHandler );
		elementClicked.attachEvent( "onmouseup", stopButtonHandler );
		elementClicked.attachEvent( "onlosecapture", stopButtonHandler );
	}
	else  // IE 4 Event Model
	{
		var oldouthandler = document.onmouseout;
		var olduphandler = document.onmouseup;
		document.onmouseout = stopButtonHandler;
		document.onmouseup = stopButtonHandler;
	}
	
	/* stop event from moving on */
	if ( event.stopPropagation ) event.stopPropagation();
	else event.cancelBubble = true;

	if ( event.preventDefault ) event.preventDefault();
	else event.returnValue = false;
	
	setTimeout( 'timerFunction()', timerValue );
	
	/* handler to stop scrolling when button moves off or unclicked */
	function stopButtonHandler( event )
	{
		buttonDown = false;
		
		if( !event ) event = window.event;
		
		/* browser nuance check */
		if( document.removeEventListener )  // DOM Level 2 event model
		{
			document.removeEventListener( "mouseup", stopButtonHandler, true );
			document.removeEventListener( "mousedown", scrollButtonDownHandler, true );
		}
		else if( document.detachEvent )		// IE 5+ Event Model
		{
			elementClicked.detachEvent( "onlosecapture", stopButtonHandler );
			elementClicked.detachEvent( "onmouseup", stopButtonHandler );
			elementClicked.detachEvent( "onmousedown", scrollButtonDownHandler );
			elementClicked.releaseCapture( );
		}
		else  // IE 4 Event Model
		{
			document.onmouseup = olduphandler;
			document.onmousemove = oldmovehandler;
		}

		/* stop event propagation */
		if ( event.stopPropagation ) event.stopPropagation();
		else event.cancelBubble = true;
	}
}



/*
 *	drag elementToDrag event
 *
 *	handler for slider
 */
function drag( elementToDrag, event ) 
{
	/* get event coords and do some math */
	var startX = event.clientX, startY = event.clientY;
	var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
	var deltaX = startX - origX, deltaY = startY - origY;
	
	/* get names of relevant elements */
	var frameId = ( elementToDrag.id + "-frame" );
	var contentId = ( elementToDrag.id + "-content" );
	var offsetId = ( elementToDrag.id + "-buttonU" );
	
	var frameHeight, contentHeight, sliderHeight, sliderOffset, sliderMax, elementToScroll;
	
	/* browser nuance, get info from css elements to set up calcs */
	if( document.addEventListener )  // DOM Level 2 event model
	{

		/* start IE problems: "document.defaultView.getComputedStyle" not supported */
		var frameStyle = 
			document.defaultView.getComputedStyle( document.getElementById( frameId ), ""	);
		var contentStyle = 
			document.defaultView.getComputedStyle( document.getElementById( contentId ), "" );
		var sliderStyle = 
			document.defaultView.getComputedStyle( elementToDrag,	"" );
		var offsetStyle = 
			document.defaultView.getComputedStyle( document.getElementById( offsetId ), "" );
		/* end IE problems */
			
		var frameHeightString = new String( frameStyle.height );
		var contentHeightString = new String( contentStyle.height );
		var sliderHeightString = new String( sliderStyle.height );
		var sliderOffsetString = new String( offsetStyle.height );
		
		frameHeight = parseInt( frameHeightString.substr( 0, ( frameHeightString.length - 2 ) ) );
		contentHeight = parseInt( contentHeightString.substr( 0, ( contentHeightString.length - 2 ) ) );
		sliderHeight = parseInt( sliderHeightString.substr( 0, ( sliderHeightString.length - 2 ) ) );
		sliderOffset = parseInt( sliderOffsetString.substr( 0, ( sliderOffsetString.length - 2 ) ) );


		document.addEventListener( "mousemove", moveHandler, true );
		document.addEventListener( "mouseup", upHandler, true );
	}
	else if( document.attachEvent )  // IE 5+ Event Model
	{
		frameHeight = document.all[frameId].offsetHeight;
		contentHeight = document.all[contentId].offsetHeight;
		sliderHeight = document.all[elementToDrag.id].offsetHeight;
		sliderOffset = document.all[offsetId].offsetHeight;
	
		elementToDrag.setCapture( );
		elementToDrag.attachEvent( "onmousemove", moveHandler );
		elementToDrag.attachEvent( "onmouseup", upHandler );
		elementToDrag.attachEvent( "onlosecapture", upHandler );
	}
	else  // IE 4 Event Model
	{
		frameHeight = document.all[frameId].offsetHeight;
		contentHeight = document.all[contentId].offsetHeight;
		sliderHeight = document.all[elementToDrag.id].offsetHeight;
		sliderOffset = document.all[offsetId].offsetHeight;
		
		var oldmovehandler = document.onmousemove;
		var olduphandler = document.onmouseup;
		document.onmousemove = moveHandler;
		document.onmouseup = upHandler;
	}

	/* stop others from seeing this event */
	if ( event.stopPropagation ) event.stopPropagation();
	else event.cancelBubble = true;

	if ( event.preventDefault ) event.preventDefault();
	else event.returnValue = false;

	/* bumper math */
	sliderOffset = ( sliderOffset + 1 );
	sliderMax = ( frameHeight - sliderHeight - sliderOffset );
	elementToScroll = document.getElementById( contentId );
		
	/* handler for mouse move, scrolling */
	function moveHandler( e ) 
	{
		if( !e ) e = window.event;
		
		/* bumper check */
		if( 
			( ( e.clientY - deltaY ) >= sliderOffset ) &&
			( ( e.clientY - deltaY ) <= sliderMax )
		)
		{
			/* do scroll math and reassign css properties to animate */
			var percentSlid = ( ( e.clientY - deltaY ) - sliderOffset ) / ( sliderMax - sliderOffset );
			
			elementToDrag.style.top = ( e.clientY - deltaY ) + "px";
			elementToScroll.style.top = 
				( 
					( 
						-1 *  
						percentSlid * 
						( contentHeight - sliderMax - sliderHeight - sliderOffset ) 
					)
					+ "px" 
				);
		}
						
		/* stop others from seeing this event */
		if( e.stopPropagation ) e.stopPropagation();
		else e.cancelBubble = true;
	}
	
	/* handler to stop scrolling */
	function upHandler( e )
	{
		if( !e ) e = window.event;
		
		/* browser nuance, remove handlers from elements that dont need them anymore */
		if( document.removeEventListener )  // DOM Level 2 event model
		{
			document.removeEventListener( "mouseup", upHandler, true );
			document.removeEventListener( "mousemove", moveHandler, true );
		}
		else if( document.detachEvent )   // IE 5+ Event Model
		{
			elementToDrag.detachEvent( "onlosecapture", upHandler );
			elementToDrag.detachEvent( "onmouseup", upHandler );
			elementToDrag.detachEvent( "onmousemove", moveHandler );
			elementToDrag.releaseCapture( );
		}
		else  // IE 4 Event Model
		{
			document.onmouseup = olduphandler;
			document.onmousemove = oldmovehandler;
		}

		/* stop others from seeing this event */
		if( e.stopPropagation ) e.stopPropagation();
		else e.cancelBubble = true;
	}
}