//fix background image flickering in IE

/*@cc_on 
	@if (@_win32)
	try {
	  document.execCommand('BackgroundImageCache', false, true);
	} catch(e) {}
	@end
@*/
var fcScroller = {
	init : function(o){
		var $scrollWrapper = $(".items");
		// the viewport
		$(".items ul").css("position","absolute");
		//make sure we can move it inside the wrapper
		var $scrollItemWidth = $(".items .item").width() +18;
		//get the width and add 16 pixels for the padding
		var $scrollTotalItems = $(".items .item").length;
		//get the total amount ofitems in the list
		var $totalWidth = ($scrollTotalItems*$scrollItemWidth);
		//recalculate what the total width should be
		var $viewableArea = $(".items").width();
		//the area that should be viewable
		($scrollTotalItems > 5) ? enableSlider() : $scrollWrapper.css("width","auto");	
		//if there are more then 5 items make the scrollbar, otherwise default to normal	
		function enableSlider(){
			$(".items ul").width($totalWidth);
			//resize the width of the list
			$('#scroller').css("display","block");
			//show the scroller
			//$scrollWrapper.height($(".items ul").outerHeight());
			//recalculate the height of the wrapper
			var slider = new $.ui.slider($('#scroller')[0],{
						minValue:0,
						//stepping: $scrollTotalItems,
						maxValue: ($totalWidth-$viewableArea), 
						//make the maximum value the totalwidth of items minus the viewable area so that it scrolls the right amount
						startValue: 0,
						//where the slider should be when is starts up 
						slide: function(e,ui) {
							$(".items ul").css({"left": - Math.round((ui.value))});			
						}
			});
			$(".items").mousewheel(function(event, delta) {
					if (delta > 0)
						slider.moveTo(slider.interaction.curValue+$scrollItemWidth,null,true);
					else if (delta < 0)
						slider.moveTo(slider.interaction.curValue-$scrollItemWidth,null,true);
					return false;
			});
		}
		
		$(".item").bind("mouseenter", function(){
			$(this).addClass("focus");
			//make the items have a niceborder round the images and anchor
		}).bind("mouseleave", function(){
			$(this).removeClass("focus");
			//remove them
		});
			$(".item").bind("click", function(e){
			//add ajax options here
		});		
	}
}
$(document).ready(function(){
	fcScroller.init();
});