// This function requires prototype.js

function toggleLink(){
	
	var anchors = document.getElementsByTagName('a');
	
	for (var i=0; i<anchors.length; i++){

		var anchor = anchors[i];

		var relAttribute = String(anchor.getAttribute('rel'));
		
		if (relAttribute && Element.hasClassName(anchor,'aoclr-show')){

			//get the related id to be hide
			var desc = $(relAttribute);
			toggleArrow(anchor, 'aoclr-expand');
			
			//if it is meant to be hidden, hide it when this function is called
			if(desc.hasClassName('aoclr-hidden')){
				desc.removeClassName("aoclr-hidden");
				desc.addClassName("aoclr-hide");
				toggleArrow(anchor, 'aoclr-contract');

			}

			//onclick function to determine it is hidden or to be shown
			anchor.onclick = function () {
				var desc = $(this.getAttribute('rel'))

				if(desc.hasClassName('aoclr-hide')){
					desc.removeClassName("aoclr-hide");
					toggleArrow(this, 'aoclr-expand');
				}

				else{	
					desc.addClassName("aoclr-hide");
					toggleArrow(this, 'aoclr-contract');
				}

				//returrn false is needed for anchor, if not it will go to the link (href) specified
				return false;

			}
		}
	}
}

function toggleArrow(anchor, className) {
	anchor.parentNode.className = className;
	
	if (anchor.innerHTML.indexOf("Show") == 0) {
		anchor.innerHTML = anchor.innerHTML.replace("Show", "Hide");
	} else {
		anchor.innerHTML = anchor.innerHTML.replace("Hide", "Show");
	}
}

//call the function on window load
Event.observe(window, 'load', toggleLink, false);