$(function() {
	var ls = window.localStorage,
		html = '';
	for (var i = 0; i < ls.length; i++) {
		for (var j = 0; j < ls.length; j++) {
			var s = j.toString();
			if (ls.key(i) == 'title' + s) {
				html += '<li rel="' + j + '">' + ls['title' + j] + '</li>';
			};
		}
	}
	$(".menu-list").html(html)
	function activeClass() {
		$(".menu").hover(function() {
			$(this).addClass('active');
			$(".node-box").addClass('active');
		}, function() {
			$(this).removeClass('active');
			$(".node-box").removeClass('active');
		})
		$(".menu-list li,.menu-add").hover(function() {
			$(this).addClass('hover');
		}, function() {
			$(this).removeClass('hover');
		})
		
	};
	activeClass();
	$("#add").bind("click", function() {
		var i = 1;
		if (0 == $('.menu-list li').length) {
			i = 1;
		}else{
			i = $('.menu-list li:last').attr('rel');
			i = parseInt(i) + 1;
		}
			ls.setItem('title' + i, 'new');
			var html = '<li rel="' + i + '">' + ls['title' + i] + '</li>'
			$(".menu-list").append(html);
			ls.setItem('node' + i, '');
			window.location.href="popup.html";
		})
	$("#del").bind("click", function() {
		var li = $(".menu-list li[class='active']");
		var i = li.attr('rel');
		ls.removeItem('node' + i);
		ls.removeItem('title' + i);
		li.slideUp();
		li.removeClass('active')
	});
	$(".menu-list li").bind("click", function() {
		$(".menu-list li").removeClass('active');
		$(this).addClass('active');
		var i = $(this).attr('rel');
		$(".content textarea").val(ls['node' + i])
		$("#title").val($(this).text())

	});
	$(".content textarea").keyup(function() {
			var i = $(".menu-list li[class='active']").attr('rel');
			if (i) {
				ls.setItem('node' + i, $(".content textarea").val());
			}else{
				$("#title").val("Please choose")
			}
			
		})
	$("#title").keyup(function() {
		var i = $(".menu-list li[class='active']").attr('rel');
		if (i) {
			ls.setItem('title' + i, $("#title").val());
			$(".menu-list li[class='active']").text(ls['title' + i]);
		}else{
			$(".content textarea").val("Please choose")
		}
		
	});
	$("#title").focus(function() {
		$(this).addClass("active");
	})
	$("#title").blur(function() {
		$(this).removeClass('active');
	})












})