var example_type = "bathroom";
var example_before = null;
var example_after = null;
var link_before = null;
var link_after = null;

var selected = null;
function swapimg(id,src){
	img = $(id);
	img.src = src;
}
var velo;
var prevX;
var dragging = false;
var dragObject;
var dragObjectX = 0;
var dragObjectWidth = 0;
var fixedVar = 500;

function gb_drag(event){
	if(dragObject == null){
		dragObject = $("messages_inner");
		dragObjectWidth = -dragObject.scrollWidth;
		dragObject.style.overflow = "visible";
	}
	
	if(dragObjectWidth<-fixedVar){
		dragging = true;
		prevX = event.clientX;
	}
}

function gb_drop(){
	dragging = false;
	gb_smooth_stop();
}

function gb_move(event){

	if(dragging){
		velo = prevX - event.clientX;

		prevX = event.clientX;
		if(dragObjectX - velo < dragObjectWidth+fixedVar){
			dragObjectX = dragObjectWidth+fixedVar;
			velo = 0;
		} else if(dragObjectX - velo > 0) {
			dragObjectX = 0;
			velo = 0;
		} else {
			dragObjectX -= velo 
		}
		dragObject.style.left = dragObjectX + "px";
	}
}

function gb_smooth_stop(){
	if(!dragging && Math.abs(velo)>5){
		if(dragObjectX - velo < dragObjectWidth+fixedVar){
			dragObjectX = dragObjectWidth+fixedVar;
			velo = 0;
		} else if(dragObjectX - velo > 0) {
			dragObjectX = 0;
			velo = 0;
		} else {
			velo = velo*0.95
			dragObjectX -= velo;
			setTimeout("gb_smooth_stop()",50);
		}
		dragObject.style.left = dragObjectX + "px";
	}
}

function display_images(id){
	if(example_before == null){
		example_before = $("img_before");
		example_after = $("img_after");
		link_before = $("a_before");
		link_after = $("a_after");
	}
	if(selected != null){
		selected.className = "thumb"
	}
	selected = $("fs_"+id);
	selected.className = "selected";
	link_before.href = "images/examples/"+example_type+"/"+id+"bl.jpg";
	link_after.href = "images/examples/"+example_type+"/"+id+"al.jpg";
	example_before.src = "images/examples/"+example_type+"/"+id+"bm.jpg";
	example_after.src =  "images/examples/"+example_type+"/"+id+"am.jpg";

}