/* 
	Title: toggle()
	Description: Function to toggle objects: plugs into the prototyp/scriptaculous framework
	Arguments: 
		$id: id of object to toggle
		$effect: effect to use
		$duration: length of the effect
*/
function toggle(id,effect,effectDuration){
	if(document.getElementById){
		if(!effectDuration) effectDuration = 0.5;
		Effect.toggle(document.getElementById(id),effect,{duration:effectDuration});	
	}
}

/* 
	Title: changeInnerHTML()
	Description: Function to change the inner html of an object
	Arguments: 
		$id: id of object to toggle
		$defaultHTML: the initial html for the object
		$newHTML: the new html for the object
*/
function changeInnerHTML(id,defaultHTML,newHTML){
	if(document.getElementById){
		target = document.getElementById(id).innerHTML;
		if(target == defaultHTML){
			document.getElementById(id).innerHTML = newHTML;
			document.getElementById(id).title = newHTML;
		}
		else if(target == newHTML){
			document.getElementById(id).innerHTML = defaultHTML;
			document.getElementById(id).title = defaultHTML;
		}
	}
}

/* 
	Title: setActive()
	Description: Function to open a new window
	Arguments: 
		$groupId: id of the group of elements
		$activeId: id of the active element
*/
function setActive(groupId,activeId){
	// Test to see if DOM-compliant
	if(document.getElementById && document.getElementsByTagName){
		
		// Set up the vars for the loop
		var list = document.getElementById(groupId);
		var links = list.getElementsByTagName("a");
		var active = document.getElementById(activeId).className;
		
		// Loop through the elements
		for(var i=0; i <links.length; i++){
			// Set the class to inactive
			if(links[i].className == 'inactive') links[i].className = '';
			else links[i].className = 'inactive';
		}
		
		// Set the active state
		if(active == 'active') document.getElementById(activeId).className = '';
		else document.getElementById(activeId).className = 'active';
		
	}
}

/* 
	Title: addLoadEvent()
	Description: Function to add custom functions to the window onload event handler
	Arguments: 
		$func: function as an argument
*/
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}	

/* 
	Title: attachHooks()
	Description: Function to add custom custom css ids and class attributes to a collection of html elements, such as links, or list items etc
	Arguments: 
		$parent: The parent id of the html element
		$tag: The html tag to target
		$label: The css id to attach to each element
		$css: The css classname to attach to each element
	NB: IT WOULD BE NICE TO EXTRACT THE onclick/onfocus functions to be parsed as an argument, but will try that another day
*/
function attachHooks(parent,tag,label,css,targetParent,target){
	// If we understand the DOM
	if(document.getElementById && document.getElementsByTagName){
		// If the parent is present
		if(document.getElementById(parent)){
			// Declare parent object
			var object = document.getElementById(parent);
			// Declare child objects
			var children = object.getElementsByTagName(tag);
			
			// Loop through the childrenn
			for(var i=0;i<children.length; i++){
				// Attach ids
				if(label != "") children[i].id = label+(i+1);
				// Attach any css
				if(css != "") children[i].className = css;
				// Attach any behaviours
				if(target != ""){
					// Add the onclick events 
					children[i].onclick = function (){
						// Show/hide layers
					 	switchStyle(targetParent,target+this.title,'div','',1);
						// Swtich css
						switchStyle(parent,this.id,'a','active');
					}
					// Add the onfocus events
					children[i].onfocus = function (){
						// Show/hide layers
					 	switchStyle(targetParent,target+this.title,'div','',1);
						// Swtich css
						switchStyle(parent,this.id,'a','active');
					}
				}
			}
		}
	}
}

/* 
	Title: switchStyle()
	Description: Function to swap CSS
	Arguments: 
		$parent: The parent id of the html element
		$target: The id to target
		$css: The css classname to attach to each element
*/
function switchStyle(parent,target,tag,css,style){
	if(document.getElementById && document.getElementsByTagName){
		// Declare parent object
		var object = document.getElementById(parent);
		// Declare child objects
		var children = object.getElementsByTagName(tag);

		// Loop through the children
		for(var i=0;i<children.length; i++){
			// Change css
			if(children[i].className == css) children[i].className = '';
			else children[i].className = '';
			// Change styles
			if(style){
				if(children[i].style.display == 'none') children[i].style.display = 'none';
				else children[i].style.display = 'none';
			}
		}
		// Set the active state for the a
		if(target) document.getElementById(target).className = css;
		// Set the active state for the div
		if(style) document.getElementById(target).style.display = 'block';
	}
}