﻿/* subNav.js written by Todd Skoglund, August 4th, 2006 for the website elementalyoga.com.  Adapted from a similar script found in the fantastic book DOM Scripting by Jeremy Keith */
/* this script attempts to make an unobtrusive and gracefully degrading method of using javascript to enhance the functionality of the site.  It is meant to alternately show and hide content on a page based on selections that the user makes (specifically, it displays and hides the "subcontent" found within the website sections, eliminating the need for nested or hierarchical navigation). The page remains accessible as the javascript is not necessary and the full content should display if the user has javascript turned off. */

/* added august 9th, 2006: code for changing the "here" state of the sub navigation to show which content is being displayed */



/* this function prepareNav tests for browser compatibility and then adds the onclick function to every link in subnav to call the next function (when clicked) */
function prepareNav() {
	if (!document.getElementsByTagName) return false;  //tests the browser's js support
	if (!document.getElementById) return false; //tests the browser's js support
	if (!document.getElementById("insideNav")) return false; //tests for the existence of a subNav element, essential to the proper working of the script
	if (document.getElementById("instruction")) {
		document.getElementById("instruction").style.display = "block";
	}
	var subnav = document.getElementById("insideNav"); // gets the element subNav
	var links = subnav.getElementsByTagName("a"); // makes an array of all the links in the parent element of subNav
	for ( var i=0; i < links.length; i++) {	// loops through all the links in subNav and assigns an event handler (onclick) to each link that calls the next function showContent with the element with the id of the link's title
		var name = links[i].getAttribute("title"); // finds the title attribute of each link
		var blurb = document.getElementById(name); // gets the element with the id equal to the title attribute of the clicked link
		if (name == "basic" | name == "topic" | name == "intro") {
			links[i].style.color = "#cf8d01";
		}
		blurb.style.display = "none"; // hides all the subNavs except the listed ones so that if no JS is present, the page displays with full content
		if (document.getElementById("basic")) { 
			document.getElementById("basic").style.display = "block"; 
		}
		if (document.getElementById("topic")) { 
			document.getElementById("topic").style.display = "block"; 
		}
		if (document.getElementById("intro")) { 
			document.getElementById("intro").style.display = "block"; 
		}
		links[i].onclick = function() { // creates an onclick event handler for each link and assigns it to call the showContent function with the clicked link as an argument
			return showContent(this); // runs the showContent with the current clicked link as the argument
		}
	}
}

/* this function makes the chosen element display and then makes sure all the other elements remain hidden */
function showContent(whichblurb) {
	var id = whichblurb.getAttribute("title");
	var content = document.getElementById(id);
	content.style.display = "block";
	var subnav = document.getElementById("insideNav");
	var links = subnav.getElementsByTagName("a");
	for ( var i=0; i < links.length; i++) {	//this loops through the elements named by the titles in subNav (just like the loop in prepareNav) but compares the elements to the current clicked one to make sure any previously displayed elements are hidden again.
		var name = links[i].getAttribute("title"); 
		var blurb = document.getElementById(name);
		if (blurb != content) {
			blurb.style.display = "none";
		}
		/* the next bit changes the navigation to the "here" state color, showing which content blurb is displayed. */
		links[i].style.color = "#414141"; // reset all subnav links to default color
		if (blurb == content) {
			whichblurb.style.color = "#cf8d01"; // sets the current link to the "here" color
		}
	}
	return false; // makes sure the link doesn't get "clicked" (the browser doesn't follow the href)
}

function externalLinks() { 
 if (!document.getElementsByTagName) return; 
 var anchors = document.getElementsByTagName("a"); 
 for (var i=0; i<anchors.length; i++) { 
   var anchor = anchors[i]; 
   if (anchor.getAttribute("href") && 
       anchor.getAttribute("rel") == "external") 
     anchor.target = "_blank"; 
 } 
} 

/* this is just a handy generic trick to allow you to add to the list at the bottom of this page to begin any number of functions when the page loads */ 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

/* the following command begins the following list of scripts after the page has loaded. You can add as many as you want thanks to the above addLoadEvent script */
addLoadEvent(prepareNav);
addLoadEvent(externalLinks);