window.onload = funOnLoad;

function funOnLoad() {
	//alert("part 1");
	funGetTagsOfADiv("const","div");//this won't find any "div" tags in div "const" the first time, 
					//so the alert inside the loop in funGetDivTags doesn't happen
					//(assuming it is uncommented)
	
	//alert("part 2");
	funAppendANewElementToATopLevelElement("div","toc","const");	//this creates a div tag, sets it's ID attribute to "toc",
									//and appends it to the "const" div
	
	//alert("part 3 ");
	funGetTagsOfADiv("const","div");//this time there is a "div" tag in div "const" with an ID attribute, 
					//so the alert inside the loop in funGetDivTags happens
					//(assuming it is uncommented)
					
	//alert("part 4");
	tocDiv = document.getElementById("toc");

	//build indexes here using basic string functions and various DOM functions in the lamest possible way
	
	//make h2
	var heading2 = document.createElement("h2")
	var txtNode = document.createTextNode("Table Of Contents");
	heading2.appendChild(txtNode);
	tocDiv.appendChild(heading2);

	///////////////////////////////////////////////////

	//make h3 1
	var heading3 = document.createElement("h3");
	var txtNode = document.createTextNode("Articles");
	heading3.appendChild(txtNode);
	tocDiv.appendChild(heading3); //1

	//make 1st ul
	var tagUL = document.createElement("ul");

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Article I");
	tagA.setAttribute("href","#a1");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Article II");
	tagA.setAttribute("href","#a2");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Article III");
	tagA.setAttribute("href","#a3");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Article IV");
	tagA.setAttribute("href","#a4");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Article V");
	tagA.setAttribute("href","#a5");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Article VI");
	tagA.setAttribute("href","#a6");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Article VII");
	tagA.setAttribute("href","#a7");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	//append 1st ul to toc
	tocDiv.appendChild(tagUL);
	
	///////////////////////////////////////////////////

	//make h3 2
	var heading3 = document.createElement("h3");
	var txtNode = document.createTextNode("Signatories");
	heading3.appendChild(txtNode);
	tocDiv.appendChild(heading3); 
	
	//make 2nd ul
	var tagUL = document.createElement("ul");

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("New Hampshire");
	tagA.setAttribute("href","#s1");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);	

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Massachusetts");
	tagA.setAttribute("href","#s3");				//i didn't really want to think about how to do this better
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Connecticut");
	tagA.setAttribute("href","#s5");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);	

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("New York");
	tagA.setAttribute("href","#s7");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);	

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("New Jersey");
	tagA.setAttribute("href","#s9");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);	

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Pennsylvania");
	tagA.setAttribute("href","#s11");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Delaware");
	tagA.setAttribute("href","#s13");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);	

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Maryland");
	tagA.setAttribute("href","#s15");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Virginia");
	tagA.setAttribute("href","#s17");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("North Carolina");
	tagA.setAttribute("href","#s19");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);	

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("South Carolina");
	tagA.setAttribute("href","#s21");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Georgia");
	tagA.setAttribute("href","#s23");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);	

	var tagLI = document.createElement("li");
	var tagA = document.createElement("a");
	var txtNode = document.createTextNode("Attest:");
	tagA.setAttribute("href","#s25");
	tagA.appendChild(txtNode);
	tagLI.appendChild(tagA);
	tagUL.appendChild(tagLI);

	//append 2nd ul to toc
	tocDiv.appendChild(tagUL);

	///////////////////////////////////////////////////

	insertAfter(tocDiv,document.getElementById("const").getElementsByTagName("h1")[0]);

	//alert("part 5");
	//this is where we need to find the article h2s and append the correct ids to them
	var fred = funGetTagsOfADiv4Articles("const","h2");
	
	//alert("part 7");
	//this is where we need to find the signatory Ps and append the [*ahem*] correct ids to them
	var fred = funGetTagsOfADiv4States("sig","p");
	
	//alert("part 9");
	//page 317-318 says we can use insertBefore to move an element; i want to do the same thing with insertAfter
	pre1 = document.getElementsByTagName("pre")[0]; 	//this is the first pre tag
	tocSig = document.getElementById("sig"); 		//this is the sig div
	//alert(pre1 + "/" + tocSig); 				//this proves everything is happy
	insertAfter(pre1,tocSig); 				//this moves the pre1 so it is below the tocSig 
	
	//alert("part 10");
	//make and insert the validation footer using the same strategy as above
	funAppendANewElementToATopLevelElement("div","footer","const");	//this creates a div tag, sets it's ID attribute to "footer",
									//and appends it to the "const" div
	footerDiv = document.getElementById("footer");								

	//<a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a>
	var anchorTag = document.createElement("a");
	anchorTag.setAttribute("href","http://validator.w3.org/check?uri=referer");
	var txtNode = document.createTextNode("XHTML 1.0");
	anchorTag.appendChild(txtNode);
	var para = document.createElement("p");	//this extra paragraph tag is just to get the linebreak
	para.appendChild(anchorTag);
	footerDiv.appendChild(para);
	
	//<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>"
	var anchorTag2 = document.createElement("a");
	anchorTag2.setAttribute("href","http://jigsaw.w3.org/css-validator/check/referer");
	var txtNode2 = document.createTextNode("CSS");
	anchorTag2.appendChild(txtNode2);
	footerDiv.appendChild(anchorTag2);
	
	//this basically moves the footer out of the "const" div and attaches it after the last pre tag
	//i didn't want to rethink my funAppendANewElementToATopLevelElement function and/or figure 
	//out how to append to the body rather than a div
	//once something is in the DOM you can kind of get away with murder with insertAfter/insertBefore
	insertAfter(footerDiv,document.getElementsByTagName("pre")[1]);
}


//this version of this function exists purely for debugging
//it shows that a div has a tag collection
function funGetTagsOfADiv(div,tag) {
	//alert("funGetTagsOfADiv executing");
	tagCollection  = document.getElementById(div).getElementsByTagName(tag);
	for (var i=0; i < tagCollection.length; i++) {
		//alert("Div: " + div + ", Tag: " + tag + ", ID: " + tagCollection[i].getAttribute("id"));
	}
}


//this version of the same function exists to set the id attribute of the articles 
function funGetTagsOfADiv4Articles(div,tag) {
	//alert("funGetTagsOfADiv executing");
	tagCollection  = document.getElementById(div).getElementsByTagName(tag);
	for (var i=0; i < tagCollection.length; i++) {
		tagCollection[i].setAttribute("id","a" + i)
	}
}

//this version of the same function exists to set the id attribute of the states 
function funGetTagsOfADiv4States(div,tag) {
	//alert("funGetTagsOfADiv executing");
	tagCollection  = document.getElementById(div).getElementsByTagName(tag);
	for (var i=0; i < tagCollection.length; i++) {
		
		if (tagCollection[i].getAttribute("class") == "state") {
			tagCollection[i].setAttribute("id","s" + i);
		}
		
	}
}

//this is my append a new element to a [i'm not sure if this matters] top level element "sledge hammer" function
function funAppendANewElementToATopLevelElement(newElementType,idName,targetElementID) {
	//alert("funAppendANewElementToATopLevelElement executing");
	var newElement = document.createElement(newElementType);
	newElement.setAttribute("id",idName);			//there is always an id in my happy little world
	
	var targetElement = document.getElementById(targetElementID);
	targetElement.appendChild(newElement);
}


//straight out of the book
function insertAfter(newElement,targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}