$(function(){
	
	no_of_items = $('.item').length
	width_to_slide = parseInt($('.item :first').width()) + 5//5px margin between items
	count = 0
	slides_to_display = 3
	easing_method = "easeInOutCirc"
	scroll_time = 500
	
	
	
	/*
	if ($.browser.msie && $.browser.version.substr(0,1)<7) {
		  // search for selectors you want to add hover behavior to
		 	$('#slider_mask').css({
				width: "680px",
				border: "1px solid red"
			})
		}*/
	
	
	
		
	//Set the width of the slider
	$('#slider').css({
		width: no_of_items * width_to_slide
	})
	
	//Add the arrows
	$("#slider_wrapper").prepend("<a href='#' id='arrow_left'>Left</a>")
	$("#slider_wrapper").append("<a href='#' id='arrow_right'>Right</a>")
	
	//Add the triggers
	$('#arrow_right').bind("click", function(){
		if((count + slides_to_display) < no_of_items){
			count++
			slide()	
		}
		return false
		
	})
	$('#arrow_left').bind("click", function(){
		if(count > 0){
			count = count -1
			slide()	
		}
		return false
	})
	
	
	check_arrows()
	
})

function slide(){
	check_arrows()
	$('#slider').animate({
		marginLeft: (count * width_to_slide) * -1
	}, scroll_time, easing_method)
}

function check_arrows(){
	if(count == 0){
		$('#arrow_left').addClass("off")
		$('#arrow_right').removeClass("off")
	}
	else{
		$('#arrow_left').removeClass("off")
	}
	if((count + slides_to_display) == no_of_items){
		$('#arrow_left').removeClass("off")
		$('#arrow_right').addClass("off")
	}
	else{
		$('#arrow_right').removeClass("off")
	}
	
}