$(document).ready(function(){
			
	var active_pic = 0;
	var num_pics = 12;
	var viewable_pics = 6;

	$("#right_arrow").click(function(event) {
		event.preventDefault();	
		
		if(active_pic == 0) {
			$("#left_arrow img").attr("src", "http://www.shorelineschools.org/design_elements/left_arrow_white.png");
		}
		
		if(active_pic == num_pics - viewable_pics -1) {
			$("#right_arrow img").attr("src", "http://www.shorelineschools.org/design_elements/right_arrow_grey.png");
		}
		
		if(active_pic < num_pics - viewable_pics) {
			$("#mini_pic_wrapper ul").animate({ marginLeft : "-=158px" }, 300);
		
			active_pic++;
		}

	});
	
	$("#left_arrow").click(function(event) {
		event.preventDefault();	
		
		if(active_pic == num_pics - viewable_pics) { //we are at the end and heading back left; set the right arrow back to white
			$("#right_arrow img").attr("src", "http://www.shorelineschools.org/design_elements/right_arrow_white.png");
		}
		
		if(active_pic == 1) {
			$("#left_arrow img").attr("src", "http://www.shorelineschools.org/design_elements/left_arrow_grey.png");
		}
			
		if(active_pic > 0) {
			$("#mini_pic_wrapper ul").animate({ marginLeft : "+=158px" }, 300);
		
			active_pic--;
		}
	});
	
	$("#right_pic_nav").hover(function(){
		$(this).css('filter', 'alpha(opacity=20)'); //fix for IE7, IE8
		$(this).fadeTo("slow", .7); // This sets the opacity to 70% on hover
	},function(){
		$(this).fadeTo("slow", 0.0); // This sets the opacity back to 0% on mouseout
	});
	
	$("#left_pic_nav").hover(function(){
		$(this).css('filter', 'alpha(opacity=20)'); //fix for IE7, IE8
		$(this).fadeTo("slow", .7); // This sets the opacity to 70% on hover
	},function(){
		$(this).fadeTo("slow", 0.0); // This sets the opacity back to 0% on mouseout
	});	
	
});