$(document).ready(
	function() {
		var counter;
		var viewall = false;
		var contentWidth = null;

		function fixClip(){
			var browserWidth = document.body.clientWidth ? document.body.clientWidth : window.innerWidth;

			// ?? not sure what this is for:
			//if(browserWidth < 879){
			//	browserWidth = 879;
			//}
			
			contentWidth = 'auto';
			if (document.getElementById){
				document.getElementById('product-category').style.clip = 'rect(0px,'+browserWidth+'px, 400px, 0px)';
				document.getElementById('product-category').style.width = browserWidth+'px';
				document.getElementById('product_list').style.width = contentWidth+'px';
			}
		}

		function scrollMe(){
			// speed, dragwidth, trackWidth, trackObj, upObj, downObj, dragObj, contentMaskObj, contentObj
			return new ScrollObj(6,1,302,"track","up","down","drag","product-category","product_list");
		}

		fixClip();
		window.myScroll = scrollMe();

		// resize the scrollbar once to begin with, and every time the browser is resized
		resizeScrollbar(myScroll);
		$(window).bind('resize', function() { resizeScrollbar(myScroll); });

		function resizeScrollbar(scroller) {
			// get the width of the browser
			var browserWidth = document.body.clientWidth ? document.body.clientWidth : window.innerWidth;
			var contentWidth = $('#product_list').width();
			var trackWidth = $('#track img').width();
			var adjust = 2;

			if(browserWidth < contentWidth){
				// ratio dragger:track should equal ratio browser:content
				var draggerWidth = Math.floor((browserWidth / contentWidth) * trackWidth);
				$('#drag img').css({width: draggerWidth+'px', height: '20px'});

				// make sure dragger can't be dragged the track (note: 2 pixel adjustment)
				scroller.trackRight = (trackWidth) - draggerWidth + adjust;

				// adjust the dragger left so it's inside the track
				var draggerLeft = scroller.dragObj.getLeft();
				if (draggerWidth + draggerLeft > trackWidth) {
					draggerLeft = trackWidth - draggerWidth;
					scroller.dragObj.setLeft(draggerLeft);
					scroller.contentObj.setLeft(-(draggerLeft-scroller.trackLeft)*(1/scroller.scrollLength));
				}

				// allow scrolling
				jQuery(scroller.dragObj).css('visibility', 'visible');
				noScroll = false;
				fixClip();
			}
			else {
				// no scrolling
				scroller.dragObj.setLeft(0);
				scroller.contentObj.setLeft(0);

				$('#drag img').css({width: trackWidth+2+'px', height: '20px'});
				scroller.trackRight = 0;
			}
		}
	});