$(document).ready(function () {
	
	
	
	$("img.replaceable").click(function () {
		
			var attr=$(this).attr("id").replace("img-",""); 
			if ($(this).is(".on"))  
					attr="#off-"+attr;
			if ($(this).is(".off")) 
					attr="#on-"+attr; 
			if ($(attr).length > 0) {
				$(this).attr("src",$(attr).attr("src")); 
//				alert($(attr).width()); 
				$(this).width($(attr).width()); 
				$(this).height($(attr).height()); 
				
//				$(this).attr("height",$(attr).attr("height")); 
		//		alert($(this).attr("src") +" "+$(this).attr("width")); 	
			//	alert($(this).attr("src")); 	
			//	alert($(this).attr("src")); 	
							
				adjustWidth(); 
			}
			if ($(this).is(".on"))  
					$(this).removeClass("on").addClass("off"); 
			else if ($(this).is(".off"))  
					$(this).removeClass("off").addClass("on"); 
			}); 
			addSlider();
}); 	






	

function adjustWidth(){
	var offset = 0; 
	$("img.replaceable").each(function (){
		offset += $(this).outerWidth()+5; 
	}); 
	offset+=300;
	$("#gallery").css("width",offset+"px");

}

function addSlider() { 
	var options = new Object(); 
	options["slide"] = slide;
	$("#galleryslider").slider(options); 
	adjustWidth();					
}

function slide(e,ui) {
	
	var width = $("#gallery").css("width").replace("px","")-950; 
	var marg = width*(ui.value/100);
	$("#gallery").css("left","-"+marg+"px"); 
}