jQuery(document).ready(function(jQuery){
	// This one is important, many browsers don't reset scroll on refreshes
	// Reset all scrollable panes to (0,0)
	jQuery('.browse_wrapper').scrollTo(0);
	// Reset the screen to (0,0)
	jQuery.scrollTo(0); 

	jQuery('li.imgCat').hover(
				function() {
					jQuery(this).css('background-color','#990000');
					//jQuery('.vid-title', this).css('color','#990000');
				},
				function() {
					jQuery(this).css('background-color','white');
					//jQuery('.vid-title', this).css('color','white');
				}
		);
		
		jQuery('.browse_wrapper').serialScroll({
			items:'li.space',
			prev:'a.prev',
			next:'a.next',
			target:'div.slider',
			offset:2, //when scrolling to photo, stop 230 before reaching it (from the left)
			start:0, //as we are centering it, start at the 2nd
			duration:1200,
			force:true,
			stop:true,
			lock:false,
			cycle:true, //don't pull back once you reach the end
			jump: true, //click on the images to scroll to them
			onBefore:function( e, elem, jQuerypane, jQueryitems, pos ){
				/**
				* 'this' is the triggered element
				* e is the event object
				* elem is the element we'll be scrolling to
				* jQuerypane is the element being scrolled
				* jQueryitems is the items collection at this moment
				* pos is the position of elem in the collection
				* if it returns false, the event will be ignored
				*/
				//those arguments with a jQuery are jqueryfied, elem isn't.
				e.preventDefault();
				if( this.blur )
				this.blur();
				},
				onAfter:function( elem ){
				//'this' is the element being scrolled (jQuerypane) not jqueryfied
				} 
		}); 
		
});