【ife】任务二十五：JavaScript和树（四）

window.onload = function() {
	var ul1 = [], ul2 = [];
	var span1 = [], span2 = [];
	var selectNode; 
	bind_span1();
	bind_span2();
	var buttons = document.getElementsByTagName('button');
	var type = document.getElementsByClassName("types")[0];
	var nodes;
	var node;
	buttons[0].onclick = function() { 
		var flag = 0;
		var first = 0; 
		var span = document.getElementsByTagName('span');
		for (var i = 0; i < span.length; i++)
			span[i].style.background = "white";
		var a = document.getElementsByTagName('a');
		for (var i = 0; i < a.length; i++)
			a[i].style.background = "white";
		var value = document.getElementsByTagName('input')[0].value; 
		nodes = []; 
		deepTraversal(type);
		for (var i = 0; i < nodes.length; i++) { 
			if (nodes[i].firstChild != null && nodes[i].firstChild.nodeValue == value) { 
				if (first == 0) { 
					var ul = document.getElementsByClassName("types")[0].getElementsByTagName("ul");
					for (var j = 0; j < ul.length; j++)
						ul[j].style.display = "none";
					var span = document.getElementsByTagName("span");
					for (var j = 0; j < span.length; j++)
						span[j].style.color = "#999999";
					var a = document.getElementsByTagName('a');
					for (var j = 0; j < a.length; j++)
						a[j].style.color = "#999999";
					first = 1;
				}
				if (nodes[i].parentNode.getAttribute("class") == "file") {
					nodes[i].parentNode.parentNode.style.display = "block";
					nodes[i].parentNode.parentNode.previousSibling.style.color = "red"; 
				}
				else if (nodes[i].parentNode.getAttribute("class") == "document") {
					nodes[i].parentNode.parentNode.style.display = "block"; 
					nodes[i].parentNode.parentNode.parentNode.parentNode.style.display = "block";
					nodes[i].parentNode.parentNode.previousSibling.style.color = "red";
					nodes[i].parentNode.parentNode.parentNode.parentNode.previousSibling.style.color = "red"; 
				}
				nodes[i].style.background = "blue"; 
				flag = 1; 
			}
		}
		if (flag == 0) 
			alert("Not found！");
	}
	buttons[1].onclick = function() {
		if (selectNode == null) { 
			alert("Please select a node！");
			return;
		}
		var value = document.getElementsByTagName('input')[0].value;
		var next = selectNode.nextSibling;
		for (var i = 0; i < next.children.length; i++) {
			if (next.children[i].firstChild.firstChild.nodeValue == value) {
				alert("Already exists");
				return;
			}
		}
		nodes = []; 
		deepTraversal(type);
		if (selectNode.parentNode.getAttribute("class") == "type") { 
			var parent = selectNode.nextSibling;
			var textNode = document.createTextNode(value);
			var spanNode = document.createElement("span");
			spanNode.appendChild(textNode);
			var ulNode = document.createElement("ul");
			var liNode = document.createElement("li");
			liNode.setAttribute("class", "file")
			liNode.appendChild(spanNode);
			liNode.appendChild(ulNode);
			parent.appendChild(liNode);
			bind_span1(); 
			bind_span2(); 
		}
		else if (selectNode.parentNode.getAttribute("class") == "file") { 
			var parent = selectNode.nextSibling;
			var textNode = document.createTextNode(value);
			var aNode = document.createElement("a");
			var liNode = document.createElement("li");
			aNode.setAttribute("href", "#");
			aNode.appendChild(textNode);
			liNode.setAttribute("class", "document");
			liNode.appendChild(aNode);
			parent.appendChild(liNode);
			bind_span2();
		}
		alert("Add Successfully！");
	}
	buttons[2].onclick = function() {
		var flag = 0; 
		var value = document.getElementsByTagName('input')[0].value;
		nodes = []; 
		deepTraversal(type);
		for (var i = 0; i < nodes.length; i++) {
			if (nodes[i].firstChild != null && nodes[i].firstChild.nodeValue == value) {
				var parent = nodes[i].parentNode;
				for (var j = 0; j < parent.children.length; j++)
					parent.removeChild(parent.children[j]);
				parent.parentNode.removeChild(parent);
				flag = 1;
			}
		}
		bind_span1();
		bind_span2();
		if (flag == 1)
			alert("Delete Successfully！");
		else
			alert("Not found！");
	}
	function bind_span1() { 
		ul1 = []; 
		span1 = []; 
		var types = document.getElementsByClassName("types");
		for (var i = 0; i < types.length; i++) {
			var span = types[i].getElementsByTagName("span");
			var ul = types[i].getElementsByTagName("ul");
			for (var j = 0; j < span.length; j++)
				span1.push(span[j]);
			for (var j = 0; j < ul.length; j++)
				ul1.push(ul[j]);
		}
		for (var i = 0; i < span1.length; i++) { 
			span1[i].onclick = function() { 
				selectNode = this; 
				for (var j = 0; j < span1.length; j++) 
					span1[j].style.color = "#999999";
				this.style.color = "red";
				for (var j = 0; j < ul1.length; j++)
					ul1[j].style.display = "none";
				this.nextSibling.style.display = "block"; 
			};
		}
	}
	function bind_span2() { 
		ul2 = [];
		span2 = []; 
		var files = document.getElementsByClassName("files");
		for (var i = 0; i < files.length; i++) {
			var span = files[i].getElementsByTagName("span");
			var ul = files[i].getElementsByTagName("ul");
			for (var j = 0; j < span.length; j++)
				span2.push(span[j]);
			for (var j = 0; j < ul.length; j++)
				ul2.push(ul[j]);
		}
		for (var i = 0; i < span2.length; i++) {
			span2[i].onclick = function() {
				selectNode = this; 
				for (var j = 0; j < span2.length; j++) 
					span2[j].style.color = "#999999";
				this.style.color = "red"; 
				for (var j = 0; j < ul2.length; j++) 
					ul2[j].style.display = "none";
				this.nextSibling.style.display = "block"; 
			};
		}
	}
	function deepTraversal(rootNode) {
		if (rootNode != null) {  
	        nodes.push(rootNode);  
	        var children = rootNode.children;  
	        for (var i = 0; i < children.length; i++)  
	            deepTraversal(children[i]);  
	    }  
	}
}