diff --git a/app/assets/javascripts/orbitTimeline.js b/app/assets/javascripts/orbitTimeline.js
index 85811cc8..a8b5c663 100644
--- a/app/assets/javascripts/orbitTimeline.js
+++ b/app/assets/javascripts/orbitTimeline.js
@@ -13,6 +13,7 @@ var orbitTimeline = function(dom){
 	this.dt = new Date();
 	this.fromdate = [t.dt.getFullYear(),t.dt.getMonth()+1];
 	this.ajaxload = true;
+	this.halfline = $(window).width()/2 + 200;
 	this.initialize = function(){
 		t.dom.html(t.timelineHtml);
 		$("div.scrollbar").hide();
@@ -27,9 +28,15 @@ var orbitTimeline = function(dom){
 				$(".t_scale").width((totalul*350) + totalyearwidth);
 			}
 			t.bubble_fx();
+			var scrollvalue = 0;
 			$('.tinycanvas').tinyscrollbar({ 
 				axis: 'x',
 				onMove: function(x){
+					if(x > scrollvalue)
+						t.timeScaleForward();
+					// else
+					// 	t.timeScaleBackward();
+					scrollvalue = x;
 					var limit = $("#timeline_scale").outerWidth() - $(".tinycanvas .scrollbar").outerWidth();
 					if(t.ajaxload){
 						if((limit - x) < 10){
@@ -74,7 +81,7 @@ var orbitTimeline = function(dom){
 						t.events.push(bubbleData);
 						if(cur_year != year){
 							year = cur_year;
-							scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+year+"'></div>"));
+							scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1' for='"+year+"'>"+year+"</div><div class='region_year group' data-content='"+year+"'></div>"));
 						} 
 						if(cur_mon != mon){
 							mon = cur_mon;
@@ -156,7 +163,7 @@ var orbitTimeline = function(dom){
 						if(cur_year != year){
 							year = cur_year;
 							if(scale.find("div[data-content="+year+"]").length == 0){
-								scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+year+"'></div>"));
+								scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1' for='"+year+"'>"+year+"</div><div class='region_year group' data-content='"+year+"'></div>"));
 							}
 						} 
 						if(cur_mon != mon){
@@ -192,4 +199,37 @@ var orbitTimeline = function(dom){
 			},
 		});
 	}
+	this.timeScaleForward = function(){
+		
+		// var lastregion = regions.eq(regions.length-1);
+		// if(lastregion.offset().left < halfline){
+		// 	var year = lastregion.attr("data-content");
+		// 	$("div#orbit div#year_navigation ul a").removeClass("active");
+		// 	$("div#orbit div#year_navigation ul a[href="+year+"]").addClass("active");
+		// }
+		var regions = $("div.region_year");
+		regions.each(function(){
+			var offset = $(this).offset().left;
+			if(offset < t.halfline){
+				if(offset > 156){
+					var year = $(this).attr("data-content");
+					$("div#orbit div#year_navigation ul a").removeClass("active");
+					$("div#orbit div#year_navigation ul a[href="+year+"]").addClass("active");
+				}
+			}
+		})
+	}
+	this.timeScaleBackward = function(){
+		var regions = $("div.region_year");
+		regions.each(function(){
+			var offset = $(this).offset().left * -1
+			if(offset > t.halfline){
+				if(offset > 156){
+					var year = $(this).attr("data-content");
+					$("div#orbit div#year_navigation ul a").removeClass("active");
+					$("div#orbit div#year_navigation ul a[href="+year+"]").addClass("active");
+				}
+			}
+		})
+	}
 }
\ No newline at end of file