var activeStory = "story1";		
			
function entity(name)
{
//object to create a crossbrowser object out of a CSS ID
  this.style = name;


  if (!document.layers) {
	this.style = document.getElementById(this.style).style;
  } else {
	this.style = document.layers[this.style];
  }
}

function toggle(name) {
 if (name != activeStory) {
	 toggleSafe(name);	
	 }
}

function toggleSafe(name) {
	
	

	
	// get story heading
	var storyHeading = document.getElementById(name+"-heading").innerHTML;
	// get story date
	var storyDate = document.getElementById(name+"-date").innerHTML;
	// get story content
	var storyContent = document.getElementById(name+"-content").innerHTML;
	
	// make the story color grayed out
	var storyHeadingLink = new entity(name+"-heading-link");
	storyHeadingLink.style.color = "#ccc";
	var storyDateText = new entity(name+"-date");
	storyDateText.style.color = "#ccc";
	
	// move the pieces into the active area
	var active = document.getElementById("story-active");

	active.innerHTML = storyHeading + "\n" +  storyContent + "\n";
					   

	// - check if there is already something in the active layer
	// - if there is, put its colors back
	
	if (activeStory != "") {
		// make the story color normal
		var storyHeadingLink = new entity(activeStory+"-heading-link");
		storyHeadingLink.style.color = "#39f";
		var storyDateText = new entity(activeStory+"-date");
		storyDateText.style.color = "#000";
		//alert("reset "+activeStory);
	}
	
	activeStory = name;
}