/**
 * right-navigationの使い方
 * <h1>タグで書かれるタイトルの一覧を画面右に表示してクリックすることでジャンプできる機能である
 * <h1 id="h1">のように上から順に「id="h[順番]"」と書く。順番は1から始める
 * あとはmountするときにタイトルの配列を渡してやれば動作する
 * riot.mount('right-navigation', {'titleList':['はじめに', 'laravelの多言語化']});
 */
<right-navigation>
	<ul name="rightNav">
		<li each={ title, i in titleList } id="n{i+1}" class="pointer" onclick={ move }>{title}</li>
	</ul>
	<style>
		.pointer{
			cursor: pointer;
		}
	</style>
	<script>
		var self = this;
		move(e){
			var target = self.cTable[$(e.target).attr("id")];
			var offsetY = $(target).offset().top;
			$("html,body").animate({
				scrollTop : offsetY
			}, {
				queue: false
			});
		}
		replace(title){
			return title.replace(/&#123;/g, '{').replace(/&#125;/g, '}');
		}
		init(){
			var scrollY = $(window).scrollTop();
			$.each(self.pos, function(index, pos){
				if(scrollY > pos - 100){
					self.elem = $('#n' + (index+1));
				}
			});
			$(self.rightNav).children().not(self.elem).css({'borderLeft': '3px solid #e0f2f1', 'color':'#ccc', 'font-size': '1em', 'paddingLeft':'10px'});
			self.elem.css({'borderLeft': '3px solid red', 'color':'black', 'font-size':'1.4em', 'paddingLeft':'10px'});
			$(self.rightNav).children().not(self.elem).hover(function(){
				$(this).css({'borderLeft': '1px solid red', 'color':'#888'});
			}, function(){
				$(this).css({'borderLeft': '3px solid #e0f2f1', 'color':'#ccc', 'font-size': '1em', 'paddingLeft':'10px'});
			});
			self.elem.unbind('mouseenter').unbind('mouseleave');
		}
		self.on('mount', function(){
			self.titleList = opts.titleList;
			self.cTable = {};
			self.pos = [];
			$.each(self.titleList, function(index, title){
				self.titleList[index] = self.replace(title);
				self.cTable['n' + (index+1)] = '#h' + (index+1);
				self.pos.push($('#h' + (index+1))[0].offsetTop);
			});
			self.update();
			$(self.rightNav).children().css({'borderLeft': '3px solid #e0f2f1', 'color':'#ccc', 'font-size': '1em', 'paddingLeft':'10px'});
			$('#n1').css({'borderLeft': '3px solid red', 'color':'black', 'font-size':'1.4em', 'paddingLeft':'10px'});
			$(self.rightNav).children().not($('#n1')).hover(function(){
				$(this).css({'borderLeft': '1px solid red', 'color':'#888'});
			}, function(){
				$(this).css({'borderLeft': '3px solid #e0f2f1', 'color':'#ccc', 'font-size': '1em', 'paddingLeft':'10px'});
			});
			self.elem = $('#n1');
			self.init();
			$(window).scroll(function(){
				var scrollY = $(this).scrollTop();
				$.each(self.pos, function(index, pos){
					if(scrollY > pos - 100){
						self.elem = $('#n' + (index+1));
					}
				});
				$(self.rightNav).children().not(self.elem).css({'borderLeft': '3px solid #e0f2f1', 'color':'#ccc', 'font-size': '1em', 'paddingLeft':'10px'});
				self.elem.css({'borderLeft': '3px solid red', 'color':'black', 'font-size':'1.4em', 'paddingLeft':'10px'});
				$(self.rightNav).children().not(self.elem).hover(function(){
					$(this).css({'borderLeft': '1px solid red', 'color':'#888'});
				}, function(){
					$(this).css({'borderLeft': '3px solid #e0f2f1', 'color':'#ccc', 'font-size': '1em', 'paddingLeft':'10px'});
				});
				self.elem.unbind('mouseenter').unbind('mouseleave');
			});
		});
	</script>
</right-navigation>