// ******************* Feature Show for Serv-U *******************
	//easing equation, borrowed from jQuery easing plugin
	//http://gsgd.co.uk/sandbox/jquery/easing/
	$.easing.easeOutQuart = function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	};
	var LoadingImg1 = new Image();
	LoadingImg1.src = "./images/Slide-left-on-3.jpg";
	var LoadingImg2 = new Image();
	LoadingImg2.src = "./images/Slide-left-off-3.jpg";
	var LoadingImg3 = new Image();
	LoadingImg3.src = "./images/Slide-right-on-3.jpg";
	var LoadingImg4 = new Image();
	LoadingImg4.src = "./images/Slide-right-off-3.jpg";
	
	jQuery(function( $ ){
		//document.getElementById("FeatureNext-HL").onmouseover = function(){
			//this.style.backgroundColor='#b8e364';
		//};
		
		//document.getElementById("FeatureNext-HL").onmouseout = function(){
		//	this.style.backgroundColor='transparent';
		//};
		/**
		 * No need to have only one element in view, you can use it for slideshows or similar.
		 * In this case, clicking the images, scrolls to them.
		 * No target in this case, so the selectors are absolute.
		 */
		
		$('#screen').serialScroll({
			target:'#sections',
			items:'li.Feature',
			prev:'div.prev',
			next:'div.next',
			axis:'x',
			offset:-0, //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:false, //don't pull back once you reach the end
			easing:'easeOutQuart', //use this easing equation for a funny effect
			jump: true, //click on the images to scroll to them
			onBefore:function( e, elem, $pane, $items, pos ){
				nMaxScrollTo = ($items.length - 1);

			
		//	if((asDescriptions[pos] != "") && (asDescriptions[pos] != undefined) && (asDescriptions[pos] != null))
			//		document.getElementById("SS-Description").innerHTML  = asDescriptions[pos];
					
				if(pos >= 1){
					document.getElementById("FeaturePrev-img").style.cursor = "pointer";
					document.getElementById("FeaturePrev-img").src = LoadingImg1.src;
					//document.getElementById("FeaturePrev-HL").onmouseover = function(){
					//	this.style.backgroundColor='#b8e364';
					//};
					
					//document.getElementById("FeaturePrev-HL").onmouseout = function(){
					//	this.style.backgroundColor='transparent';
					//};
				} // if
				else if(pos == 0){
					document.getElementById("FeaturePrev-img").style.cursor = "auto";
					document.getElementById("FeaturePrev-img").src = LoadingImg2.src;
					//document.getElementById("FeaturePrev-HL").style.backgroundColor='transparent';
					//document.getElementById("FeaturePrev-HL").onmouseover = function(){
					//	this.style.backgroundColor='transparent';
					//};
					
					//document.getElementById("FeaturePrev-HL").onmouseout = function(){
					//	this.style.backgroundColor='transparent';
					//};
				} //else if
				if(pos == nMaxScrollTo){
					document.getElementById("FeatureNext-img").style.cursor = "auto";
					document.getElementById("FeatureNext-img").src = LoadingImg4.src;
					//document.getElementById("FeatureNext-HL").style.backgroundColor='transparent';

					//document.getElementById("FeatureNext-HL").onmouseover = function(){
					//	this.style.backgroundColor='transparent';
					//};
					
					//document.getElementById("FeatureNext-HL").onmouseout = function(){
					//	this.style.backgroundColor='transparent';
					//};
				} // if
				else{
					document.getElementById("FeatureNext-img").style.cursor = "pointer";
					document.getElementById("FeatureNext-img").src = LoadingImg3.src;

					//document.getElementById("FeatureNext-HL").onmouseover = function(){
					//	this.style.backgroundColor='#b8e364';
					//};
					
					//document.getElementById("FeatureNext-HL").onmouseout = function(){
					//	this.style.backgroundColor='transparent';
					//};
				} // else	
				
				/**
				 * 'this' is the triggered element 
				 * e is the event object
				 * elem is the element we'll be scrolling to
				 * $pane is the element being scrolled
				 * $items 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 $ are jqueryfied, elem isn't.
				e.preventDefault();
				if( this.blur )
					this.blur();
			},
			onAfter:function( elem ){
				//'this' is the element being scrolled ($pane) not jqueryfied
			}
		});	
		
	});