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

var frameWidth;
var contentWidth;
var sliderWidth;
var sliderOffset;
var sliderCurrentOffset;

var scrollingFrame = false;
var scrollFrameStopAt;

var scrollingPercent = false;
var scrollStopAtPercent;

var percentSlid = 0;



/*
 *	scrollFrameTimerFunction
 *
 *	this function is called by scrollButtonDownHandler and it's self
 *	it loops with timer and executes the scrolling action
 */
function scrollFrameTimerFunction()
{
	if(scrollingFrame)
	{
		buttonSliderId = "slider";
		/* get relevant elements */
		var elementToDrag = buttonSliderId;
		var frameId = (elementToDrag + "-frame");
		var contentId = (elementToDrag + "-content");
		var offsetId = (elementToDrag + "-buttonL");
		
		var frameCurrentOffset;
		
		/* 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 frameWidthString = new String(frameStyle.width);
			var contentWidthString = new String(contentStyle.width);
			var sliderWidthString = new String(sliderStyle.width);
			var sliderOffsetString = new String(offsetStyle.width);
			var sliderCurrentOffsetString = new String(sliderStyle.left);			
			
			frameWidth = parseInt(frameWidthString.substr(0, (frameWidthString.length - 2)));
			contentWidth = parseInt(contentWidthString.substr(0, (contentWidthString.length - 2)));
			sliderWidth = parseInt(sliderWidthString.substr(0, (sliderWidthString.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
		{
			frameWidth = document.all[frameId].offsetWidth;
			contentWidth = document.all[contentId].offsetWidth;
			sliderWidth = document.all[elementToDrag].offsetWidth;
			sliderOffset = document.all[offsetId].offsetWidth;
			sliderCurrentOffset = document.all[elementToDrag].offsetLeft;
			frameCurrentOffset = document.all[frameId].offsetLeft;

		}
		else  // IE 4 Event Model
		{
			frameWidth = document.all[frameId].offsetWidth;
			contentWidth = document.all[contentId].offsetWidth;
			sliderWidth = document.all[elementToDrag].offsetWidth;
			sliderOffset = document.all[offsetId].offsetWidth;
			sliderCurrentOffset = document.all[elementToDrag].offsetLeft;	
			frameCurrentOffset = document.all[frameId].offsetLeft;
		}				
		
		/* do bumpering math */
		sliderOffset = (sliderOffset + 1);
		
		var sliderMax = (frameWidth - sliderWidth - sliderOffset);
		var elementToScroll = document.getElementById(contentId);

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

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

			document.getElementById(elementToDrag).style.left = scrollPosition + "px";
			elementToScroll.style.left = 
				(
					(
						-1 *  
						percentSlid * 
						(contentWidth - sliderMax - sliderWidth - sliderOffset) 
					)
					+ "px" 
				);					
		}
		else
		{
			scrollingFrame = false;
		}
		
		pageWidth = getWidth();
		pageGap = (pageWidth - frameWidth);
				
		// solution here somewhere for stop when scrool click
		if(buttonDirection == "right")
		{
			if((sliderCurrentOffset) > (scrollFrameStopAt - (pageGap / 2.0) - (sliderWidth / 2.0)))
			{
				scrollingFrame = false;
			}
		}
		else
		{
			if((sliderCurrentOffset) < (scrollFrameStopAt - (pageGap / 2.0) - (sliderWidth / 2.0)))
			{
				scrollingFrame = false;
			}
		}
		
		
				/* kick off the next scroll with timer */
		setTimeout('scrollFrameTimerFunction()', timerValue);

	}
}


/*
 *	scrollFrameClickedHandler elementClicked event
 *
 *	handler for when scroll button pressed
 *	set the initial timer and assign stopping handlers
 */
function scrollFrameClickedHandler(elementClicked, event)
{
	scrollingFrame = true;
	var classString = new String(elementClicked.className);
	//buttonSliderId = classString.substr(0, (classString.length - 7));
	
	/* who clicked, right or left? */
	/* this is actually used even tho there are no buttons */
	classNameString = new String(elementClicked.id);
	
	buttonDirection = 
		(classNameString.substr(classNameString.length - 1, classNameString.length) == "L") ?
		"left" : 
		"right";
	
	
	/* check browsers and assign handlers for stopping */
	if(document.addEventListener)  // DOM Level 2 event model
	{			
		document.addEventListener("mouseout", scrollFrameStopButtonHandler, true);
		document.addEventListener("mouseup", scrollFrameStopButtonHandler, true);
	}
	else if(document.attachEvent)  // IE 5+ Event Model
	{
		elementClicked.setCapture();
		elementClicked.attachEvent("onmouseout", scrollFrameStopButtonHandler);
		elementClicked.attachEvent("onmouseup", scrollFrameStopButtonHandler);
		elementClicked.attachEvent("onlosecapture", scrollFrameStopButtonHandler);
	}
	else  // IE 4 Event Model
	{
		var oldouthandler = document.onmouseout;
		var olduphandler = document.onmouseup;
		document.onmouseout = scrollFrameStopButtonHandler;
		document.onmouseup = scrollFrameStopButtonHandler;
	}
	
	/* stop event from moving on */
	if (event.stopPropagation) event.stopPropagation();
	else event.cancelBubble = true;

	if (event.preventDefault) event.preventDefault();
	else event.returnValue = false;
	
	setTimeout('scrollFrameTimerFunction()', timerValue);
	
	/* handler to stop scrolling when button moves off or unclicked */
	function scrollFrameStopButtonHandler(event)
	{
				
		
		if(!event) event = window.event;
		
		/* browser nuance check */
		
		if(document.removeEventListener)  // DOM Level 2 event model
		{
			document.removeEventListener("mouseout", scrollFrameStopButtonHandler, true);
			document.removeEventListener("mouseup", scrollFrameStopButtonHandler, true);
			document.removeEventListener("mousedown", scrollFrameClickedHandler, true);
		}
		else if(document.detachEvent)		// IE 5+ Event Model
		{
			elementClicked.detachEvent("onlosecapture", scrollFrameStopButtonHandler);
			elementClicked.detachEvent("onmouseup", scrollFrameStopButtonHandler);
			elementClicked.detachEvent("onmousedown", scrollFrameClickedHandler);
			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;
	}
}


function scrollFrameClicked(event)
{
	
	elementToDrag = document.getElementById('slider');
	
	/* 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 + "-buttonL");
	
	var frameWidth, contentWidth, sliderWidth, 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 frameWidthString = new String(frameStyle.width);
		var contentWidthString = new String(contentStyle.width);
		var sliderWidthString = new String(sliderStyle.width);
		var sliderOffsetString = new String(offsetStyle.width);
		
		frameWidth = parseInt(frameWidthString.substr(0, (frameWidthString.length - 2)));
		contentWidth = parseInt(contentWidthString.substr(0, (contentWidthString.length - 2)));
		sliderWidth = parseInt(sliderWidthString.substr(0, (sliderWidthString.length - 2)));
		sliderOffset = parseInt(sliderOffsetString.substr(0, (sliderOffsetString.length - 2)));
	}
	else if(document.attachEvent)  // IE 5+ Event Model
	{
		frameWidth = document.all[frameId].offsetWidth;
		contentWidth = document.all[contentId].offsetWidth;
		sliderWidth = document.all[elementToDrag.id].offsetWidth;
		sliderOffset = document.all[offsetId].offsetWidth;	
	}
	else  // IE 4 Event Model
	{
		frameWidth = document.all[frameId].offsetWidth;
		contentWidth = document.all[contentId].offsetWidth;
		sliderWidth = document.all[elementToDrag.id].offsetWidth;
		sliderOffset = document.all[offsetId].offsetWidth;
		
	}
	
	pageWidth = getWidth();
	pageGap = (pageWidth - frameWidth);
				
	if(origX > (event.clientX - (pageGap / 2.0)))
	{
		scrollFrameClickedHandler(document.getElementById('slider-buttonL'), event);
		scrollFrameStopAt = event.clientX;
	}
	else
	{
		scrollFrameClickedHandler(document.getElementById('slider-buttonR'), event);	
		scrollFrameStopAt = event.clientX;
	}
	
}


function getWidth() {
  var myWidth = 0, myHeight = 0;
  if(typeof(window.innerWidth) == 'number') {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return myWidth;
}



//-------------------------------------------------------------------------------------
//	Buttons
//-------------------------------------------------------------------------------------

/*
 *	buttonTimerFunction
 *
 *	this function is called by scrollButtonDownHandler and it's self
 *	it loops with timer and executes the scrolling action
 */
function buttonTimerFunction()
{
	if(buttonDown)
	{
		/* get relevant elements */
		var elementToDrag = buttonSliderId;
		var frameId = (elementToDrag + "-frame");
		var contentId = (elementToDrag + "-content");
		var offsetId = (elementToDrag + "-buttonL");
		
		/* 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 frameWidthString = new String(frameStyle.width);
			var contentWidthString = new String(contentStyle.width);
			var sliderWidthString = new String(sliderStyle.width);
			var sliderOffsetString = new String(offsetStyle.width);
			var sliderCurrentOffsetString = new String(sliderStyle.left);
			
			frameWidth = parseInt(frameWidthString.substr(0, (frameWidthString.length - 2)));
			contentWidth = parseInt(contentWidthString.substr(0, (contentWidthString.length - 2)));
			sliderWidth = parseInt(sliderWidthString.substr(0, (sliderWidthString.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
		{
			frameWidth = document.all[frameId].offsetWidth;
			contentWidth = document.all[contentId].offsetWidth;
			sliderWidth = document.all[elementToDrag].offsetWidth;
			sliderOffset = document.all[offsetId].offsetWidth;
			sliderCurrentOffset = document.all[elementToDrag].offsetLeft;
		}
		else  // IE 4 Event Model
		{
			frameWidth = document.all[frameId].offsetWidth;
			contentWidth = document.all[contentId].offsetWidth;
			sliderWidth = document.all[elementToDrag].offsetWidth;
			sliderOffset = document.all[offsetId].offsetWidth;
			sliderCurrentOffset = document.all[elementToDrag].offsetLeft;	
		}				
		
		/* do bumpering math */
		sliderOffset = (sliderOffset + 1);
		
		var sliderMax = (frameWidth - sliderWidth - sliderOffset);
		var elementToScroll = document.getElementById(contentId);

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

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

			document.getElementById(elementToDrag).style.left = scrollPosition + "px";
			elementToScroll.style.left = 
				(
					(
						-1 *  
						percentSlid * 
						(contentWidth - sliderMax - sliderWidth - sliderOffset) 
					)
					+ "px" 
				);					
		}

		/* kick off the next scroll with timer */
		setTimeout('buttonTimerFunction()', 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) == "L") ?
		"left" : 
		"right";
	
	/* 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('buttonTimerFunction()', 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("mouseout", stopButtonHandler, true);
			document.removeEventListener("mouseup", stopButtonHandler, true);
			document.removeEventListener("mousedown", scrollButtonDownHandler, true);
		}
		else if(document.detachEvent)		// IE 5+ Event Model
		{
			elementClicked.detachEvent("onlosecapture", stopButtonHandler);
			elementClicked.detachEvent("onmouseout", 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;
	}
}


//-------------------------------------------------------------------------------------
//	Percents
//-------------------------------------------------------------------------------------


/*
 *	scrollPercentTimerFunction
 *
 *	this function is called by scrollButtonDownHandler and it's self
 *	it loops with timer and executes the scrolling action
 */
function scrollPercentTimerFunction()
{
	if(scrollingPercent)
	{
		buttonSliderId = "slider";
		/* get relevant elements */
		var elementToDrag = buttonSliderId;
		var frameId = (elementToDrag + "-frame");
		var contentId = (elementToDrag + "-content");
		var offsetId = (elementToDrag + "-buttonL");
		
		var frameCurrentOffset;
		
		/* 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 frameWidthString = new String(frameStyle.width);
			var contentWidthString = new String(contentStyle.width);
			var sliderWidthString = new String(sliderStyle.width);
			var sliderOffsetString = new String(offsetStyle.width);
			var sliderCurrentOffsetString = new String(sliderStyle.left);			
			
			frameWidth = parseInt(frameWidthString.substr(0, (frameWidthString.length - 2)));
			contentWidth = parseInt(contentWidthString.substr(0, (contentWidthString.length - 2)));
			sliderWidth = parseInt(sliderWidthString.substr(0, (sliderWidthString.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
		{
			frameWidth = document.all[frameId].offsetWidth;
			contentWidth = document.all[contentId].offsetWidth;
			sliderWidth = document.all[elementToDrag].offsetWidth;
			sliderOffset = document.all[offsetId].offsetWidth;
			sliderCurrentOffset = document.all[elementToDrag].offsetLeft;
			frameCurrentOffset = document.all[frameId].offsetLeft;

		}
		else  // IE 4 Event Model
		{
			frameWidth = document.all[frameId].offsetWidth;
			contentWidth = document.all[contentId].offsetWidth;
			sliderWidth = document.all[elementToDrag].offsetWidth;
			sliderOffset = document.all[offsetId].offsetWidth;
			sliderCurrentOffset = document.all[elementToDrag].offsetLeft;	
			frameCurrentOffset = document.all[frameId].offsetLeft;
		}				
		
		/* do bumpering math */
		sliderOffset = (sliderOffset + 1);
		
		var sliderMax = (frameWidth - sliderWidth - sliderOffset);
		var elementToScroll = document.getElementById(contentId);

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

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

			document.getElementById(elementToDrag).style.left = scrollPosition + "px";
			elementToScroll.style.left = 
				(
					(
						-1 *  
						percentSlid * 
						(contentWidth - sliderMax - sliderWidth - sliderOffset) 
					)
					+ "px" 
				);					
		}
		else
		{
			scrollingPercent = false;
		}
		
		pageWidth = getWidth();
		pageGap = (pageWidth - frameWidth);
				
		// solution here somewhere for stop when scrool click
		if(buttonDirection == "right")
		{
			if(percentSlid >= scrollStopAtPercent)
			{
				scrollingPercent = false;
			}
		}
		else
		{
			if(percentSlid <= scrollStopAtPercent)
			{
				scrollingPercent = false;
			}
		}
		
		
				/* kick off the next scroll with timer */
		setTimeout('scrollPercentTimerFunction()', timerValue);

	}
}

function scrollPercentClickedHandler(elementClicked)
{
	scrollingPercent = true;
	var classString = new String(elementClicked.className);
	//buttonSliderId = classString.substr(0, (classString.length - 7));
	
	/* who clicked, right or left? */
	/* this is actually used even tho there are no buttons */
	classNameString = new String(elementClicked.id);
	
	buttonDirection = 
		(classNameString.substr(classNameString.length - 1, classNameString.length) == "L") ?
		"left" : 
		"right";
	
	
	/* check browsers and assign handlers for stopping */
	if(document.addEventListener)  // DOM Level 2 event model
	{			
		document.addEventListener("mouseout", scrollPercentStopButtonHandler, true);
		document.addEventListener("mouseup", scrollPercentStopButtonHandler, true);
	}
	else if(document.attachEvent)  // IE 5+ Event Model
	{
		elementClicked.setCapture();
		elementClicked.attachEvent("onmouseout", scrollPercentStopButtonHandler);
		elementClicked.attachEvent("onmouseup", scrollPercentStopButtonHandler);
		elementClicked.attachEvent("onlosecapture", scrollPercentStopButtonHandler);
	}
	else  // IE 4 Event Model
	{
		var oldouthandler = document.onmouseout;
		var olduphandler = document.onmouseup;
		document.onmouseout = scrollPercentStopButtonHandler;
		document.onmouseup = scrollPercentStopButtonHandler;
	}
		
	setTimeout('scrollPercentTimerFunction()', timerValue);
	
	/* handler to stop scrolling when button moves off or unclicked */
	function scrollPercentStopButtonHandler(event)
	{
				
		
		if(!event) event = window.event;
		
		/* browser nuance check */
		
		if(document.removeEventListener)  // DOM Level 2 event model
		{
			document.removeEventListener("mouseout", scrollPercentStopButtonHandler, true);
			document.removeEventListener("mouseup", scrollPercentStopButtonHandler, true);
			document.removeEventListener("mousedown", scrollPercentClickedHandler, true);
		}
		else if(document.detachEvent)		// IE 5+ Event Model
		{
			elementClicked.detachEvent("onlosecapture", scrollPercentStopButtonHandler);
			elementClicked.detachEvent("onmouseup", scrollPercentStopButtonHandler);
			elementClicked.detachEvent("onmousedown", scrollPercentClickedHandler);
			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;
	}
}

function scrollToPercent(percent)
{
	
	elementToDrag = document.getElementById('slider');
	
	/* 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 + "-buttonL");
	
	var frameWidth, contentWidth, sliderWidth, 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 frameWidthString = new String(frameStyle.width);
		var contentWidthString = new String(contentStyle.width);
		var sliderWidthString = new String(sliderStyle.width);
		var sliderOffsetString = new String(offsetStyle.width);
		
		frameWidth = parseInt(frameWidthString.substr(0, (frameWidthString.length - 2)));
		contentWidth = parseInt(contentWidthString.substr(0, (contentWidthString.length - 2)));
		sliderWidth = parseInt(sliderWidthString.substr(0, (sliderWidthString.length - 2)));
		sliderOffset = parseInt(sliderOffsetString.substr(0, (sliderOffsetString.length - 2)));
	}
	else if(document.attachEvent)  // IE 5+ Event Model
	{
		frameWidth = document.all[frameId].offsetWidth;
		contentWidth = document.all[contentId].offsetWidth;
		sliderWidth = document.all[elementToDrag.id].offsetWidth;
		sliderOffset = document.all[offsetId].offsetWidth;	
	}
	else  // IE 4 Event Model
	{
		frameWidth = document.all[frameId].offsetWidth;
		contentWidth = document.all[contentId].offsetWidth;
		sliderWidth = document.all[elementToDrag.id].offsetWidth;
		sliderOffset = document.all[offsetId].offsetWidth;
		
	}
	
				
	if(percentSlid > percent)
	{
		scrollPercentClickedHandler(document.getElementById('slider-buttonL'));
		scrollStopAtPercent = percent;
	}
	else
	{
		scrollPercentClickedHandler(document.getElementById('slider-buttonR'));	
		scrollStopAtPercent = percent;
	}
	
}






/*
 *	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 + "-buttonL");
	
	var frameWidth, contentWidth, sliderWidth, 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 frameWidthString = new String(frameStyle.width);
		var contentWidthString = new String(contentStyle.width);
		var sliderWidthString = new String(sliderStyle.width);
		var sliderOffsetString = new String(offsetStyle.width);
		
		frameWidth = parseInt(frameWidthString.substr(0, (frameWidthString.length - 2)));
		contentWidth = parseInt(contentWidthString.substr(0, (contentWidthString.length - 2)));
		sliderWidth = parseInt(sliderWidthString.substr(0, (sliderWidthString.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
	{
		frameWidth = document.all[frameId].offsetWidth;
		contentWidth = document.all[contentId].offsetWidth;
		sliderWidth = document.all[elementToDrag.id].offsetWidth;
		sliderOffset = document.all[offsetId].offsetWidth;
	
		elementToDrag.setCapture();
		elementToDrag.attachEvent("onmousemove", moveHandler);
		elementToDrag.attachEvent("onmouseup", upHandler);
		elementToDrag.attachEvent("onlosecapture", upHandler);
	}
	else  // IE 4 Event Model
	{
		frameWidth = document.all[frameId].offsetWidth;
		contentWidth = document.all[contentId].offsetWidth;
		sliderWidth = document.all[elementToDrag.id].offsetWidth;
		sliderOffset = document.all[offsetId].offsetWidth;
		
		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 = (frameWidth - sliderWidth - sliderOffset);
	elementToScroll = document.getElementById(contentId);
		
	/* handler for mouse move, scrolling */
	function moveHandler(e) 
	{
		if(!e) e = window.event;
		
		/* bumper check */
		if(
			((e.clientX - deltaX) >= sliderOffset) &&
			((e.clientX - deltaX) <= sliderMax)
		)
		{
			/* do scroll math and reassign css properties to animate */
			percentSlid = ((e.clientX - deltaX) - sliderOffset) / (sliderMax - sliderOffset);
			
			elementToDrag.style.left = (e.clientX - deltaX) + "px";
			elementToScroll.style.left = 
				(
					(
						-1 *  
						percentSlid * 
						(contentWidth - sliderMax - sliderWidth - 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;
	}
}