$(function(){
	var haba = $("#slider-container").width() / 2;
	var slideoverlay = (haba / $("#slider-container").width());
	var thumbX = haba ;
	$("#thumb").css("left", thumbX);
	$("#slider-left").css("width", thumbX + $("#thumb").width() / 2);
	$("#thumb").mousedown(function() {
		var targetOffset = $("#slider-container").offset();
		$("#my-container").mousemove(function(event){
			// マウスが示す位置を調べる
			// event.pageXではページの左上からの座標になるので
			// slider-containerの左上を基準にしたx,yに変換
			//var localMouseX = event.pageX - targetOffset.left;
			var localMouseX = event.pageX - targetOffset.left;
			
			// slider-container上におさまるように範囲を調整
			// また、thumbの中心をマウスが指すようにしている
			var thumbX = localMouseX - $("#thumb").width() / 2 ;
			
			if(thumbX < 0) {
				thumbX = 0;
				refreshSwatch(thumbX);
			}
			if(thumbX > ( $("#slider-container").width() - $("#thumb").width() ) ) {
				thumbX = $("#slider-container").width() - $("#thumb").width();
			}
			
			// slider 表示
			$("#thumb").css("left", thumbX);
			$("#slider-left").css("width", thumbX + $("#thumb").width() / 2);
			var haba = thumbX + $("#thumb").width() / 2;
			var slideoverlay = (haba / $("#slider-container").width());
			refreshSwatch(slideoverlay);
		});
		
		$("#my-container").mouseleave(function(){
			$(this).unbind("mouseup mousemove mouseleave");
        });
        
		$("#my-container").mouseup(function(){
			$(this).unbind("mouseup mousemove mouseleave");
        });

		function refreshSwatch(slideoverlay) {
		  overlay.setOpacity(eval(slideoverlay));
		}

	});

});