--- a/public/viewer/revisionviewer.html	Thu Apr 18 06:21:44 2013 +0900
+++ b/public/viewer/revisionviewer.html	Fri Apr 19 14:49:09 2013 +0900
@@ -65,7 +65,9 @@
 function loadRevisionInfo(consensus_id) {
     $.ajax({
 	url:BASE_URL+"/claims/get/revision/"+consensus_id,
-	success:function(o){createOptionTag(consensus_id, o); console.log("revision = "+ o)},
+	success:function(o){createOptionTag(consensus_id, o); console.log("revision = "+ o)
+			    createSlider(o);
+			   },
 	type:"GET",cache:false,
 	error:function(o){console.log("ERROR",o)}
     });
@@ -76,9 +78,37 @@
     loadConsensus(id);
 }
 
+var REVISION_INFO = {};
+var STEP = 5;
+var SLIDE_DISTANCE = 20;
+function createSlider(revisionInfo) {
+    $('#slider').css('width',revisionInfo.length * SLIDE_DISTANCE);
+    var slideMax = 0;
+    for (var i=0; i<revisionInfo.length; i++) {
+	var r = revisionInfo[i];
+	REVISION_INFO[i*STEP] = r;
+	slideMax = i*STEP;
+    }
+    var MAX_REV = revisionInfo.length-1;
+    $('#revisionDisplayId').val("0/"+MAX_REV);
+    $('#slider').slider({ step:STEP,
+			  max:slideMax,
+			  slide: function(event, ui){ console.log('ui.value = '+ui.value); 
+						      var id = REVISION_INFO[ui.value];
+						      console.log("id = "+id);
+						      $('#revisionDisplayId').val(ui.value/STEP+"/"+MAX_REV);
+						      changeRevision(id);
+						    },
+			  //			  stop: function(event, ui){ console.log(ui.value); }
+			});
+    $('#slider').slider('option','value',0);
+    $('#slider').slider();
+}
+
 function createOptionTag(consensus_id, revisionInfo) {
     var selectArray = new Array();
     selectArray.push('<select onchange="changeRevision(this.value)" >');
+    var index = 0;
     for (var i=0; i<revisionInfo.length; i++) {
 	var revision = revisionInfo.length - i;
 	selectArray.push("<option value='"+revisionInfo[i]+"'>"+revision+"</option>");
@@ -315,12 +345,20 @@
 </script>
 <style>
 body{background-color:black;}
+p.revisionDisplay{
+    position:absolute;
+    left:5px;
+    top:60px;
+    z-index:5;
+    color:white;
+}
 div.revisionSlider{
     position:absolute;
-    left:0;top:70px;
+    left:0;top:100px;
     z-index:5;
     width:50%;
 }
+
 </style>
 <script>
 function resetMentionForm(){
@@ -453,20 +491,16 @@
 	}
 }
 
-$(function() {
-    $('#slider').slider({ step:5,
-			  slide: function(event, ui){ console.log(ui.value); },
-			  stop: function(event, ui){ console.log(ui.value); }
-			});
-
-    $('#slider').slider();
-});
 </script>
 <div class='header'>
 <nobr id='header_title'><a href='index.html'>Home</a><span id='headertitle_main' style='margin-left:40px;'>loading</span></nobr>
 </div>
 <div class="revision" id="revisionId"></div>
-<div class="revisionSlider" id="slider" style='left:10px;' ></div>
+<p class='revisionDisplay'>
+    <label for="revInfo">Revision Number:</label>
+    <input type="text" id="revisionDisplayId" style='background-color:black; border:0; color:white;'/>
+</p>
+<div class="revisionSlider" id="slider" style='left:20px;' ></div>
 
 <div style="position:relative;left:0;top:0;" id='treeMain'>
 <div style="position:absolute;width:0;height:0;left:100;" id='treeRoot'>