var Retouch = {
	//fieldset of button elements for changing link colour
	//functions to read and set a cookie and update class name on main page container element, #page
	colourMenu: function() {
		if (!document.getElementById || !document.createElement || !document.createTextNode) {return;}
		//set and check for elements in which to load the colour menu button fieldset
		var container=document.getElementById("page");
		var postElement=document.getElementById("header");
		if (!container || !postElement) {return;}
		var scheme=Common.cookies.read("retouchColour");//look for colour scheme cookie already set
		var patt=/yellow|orange|blue|green|pink/;
		if (!scheme || patt.test(scheme)===false) {
			Common.cookies.create("retouchColour", "yellow", 7, "/retouch/");//if no colour scheme set, set to yellow
			scheme=Common.cookies.read("retouchColour");//try again to read the colour scheme cookie...
		}
		if (scheme===null || patt.test(scheme)===false) {return;}//if colour scheme still not set, return...cookies not enabled
		//if colour cookie is set, create the colour picker panel...
		createColourMenu();
		createSkipLink();
		setPageClass(scheme);
		setButtonClasses(scheme);

		function setPageClass(scheme) {//sets class name on page to colour name
			var pageEl=document.getElementById("page");
			pageEl.className=scheme;
		}
		function setButtonClasses(scheme) {//sets appropriate class names to buttons
			var panelDiv=document.getElementById("colourMenu");
			var butts=panelDiv.getElementsByTagName("button");
			for (var i in butts) {//for each colour button
				if (butts[i].id) {//if item has an id, so is an actual button...
					var currentClassStr=butts[i].className;
					//if button id is same as selected colour and not already the current colour
					if (butts[i].id==scheme && /currentColour/.test(currentClassStr)===false) {
						butts[i].className+=" currentColour";//add "currentColour" to button's class attr
					} else if (butts[i].id!=scheme && /currentColour/.test(currentClassStr)) {//else if previous currentColour
						butts[i].className = currentClassStr.replace(/currentColour/, "");//remove currentColour from className
					}
					if (/^\s*$/.test(butts[i].className)) {butts[i].removeAttribute("class");}//if className now empty, remove it
				}
			}
		}
		function setColourCookie(scheme) {//sets a cookie with the selected colour scheme name
			Common.cookies.create("retouchColour", scheme, 7, "/retouch/");
		}
		function setClickAction(ev) {
			var el = Common.getEventTarget(ev);
			var scheme=el.getAttribute("id");
			setColourCookie(scheme);
			setPageClass(scheme);
			setButtonClasses(scheme);
		}
		function setHoverOnAction(ev) {
			var el = Common.getEventTarget(ev);
			var currentClassStr=el.className;
			if (/over/.test(currentClassStr)===false) {
				el.className = currentClassStr+" over";
			}
		}
		function setHoverOffAction(ev) {
			var el = Common.getEventTarget(ev);
			var currentClassStr=el.className;
			if (/over/.test(currentClassStr)) {
				el.className = currentClassStr.replace(/over/, "");
			}
			if (el.className==="") {el.removeAttribute("class");}
		}
		function createColourMenu() {//build the colour menu buttons and set their event handlers
			var fieldset=document.createElement("fieldset");
			fieldset.setAttribute("id", "colourMenu");
			var legend=document.createElement("legend");
			legend.appendChild(document.createTextNode("Select a link colour"));
			fieldset.appendChild(legend);
			var colours=["yellow", "orange", "blue", "green", "pink"];
			for(var c in colours) {
				if (typeof colours[c]=="string") {
					var butt=document.createElement("button");
					butt.setAttribute("id", colours[c]);
					butt.setAttribute("type", "button");
					Common.addEvent(butt, "click", function(event) {setClickAction(event);}, false);
					Common.addEvent(butt, "mouseover", function(event) {setHoverOnAction(event);}, false);
					Common.addEvent(butt, "mouseout", function(event) {setHoverOffAction(event);}, false);
					Common.addEvent(butt, "focus", function(event) {setHoverOnAction(event);}, false);
					Common.addEvent(butt, "blur", function(event) {setHoverOffAction(event);}, false);
					var buttSpan=document.createElement("span");
					buttSpan.appendChild(document.createTextNode(colours[c]));
					butt.appendChild(buttSpan);
					fieldset.appendChild(butt);
				}
			}
			container.insertBefore(fieldset, postElement);
		}
		function createSkipLink() {
			var pageDiv=document.getElementById("page");
			var colourMenu=document.getElementById("colourMenu");
			var skipDiv=document.createElement("div");
			skipDiv.setAttribute("id", "skip");
			var skipLink=document.createElement("a");
			skipLink.setAttribute("href", "#content");
			skipLink.appendChild(document.createTextNode("skip to main content"));
			skipDiv.appendChild(skipLink);
			pageDiv.insertBefore(skipDiv, colourMenu);
		}
	},

	//gives a block hover effect to elements with ids listed in array
	blockHover: function () {
		var ids=["quote"];//array of block elements by id to get hover
		if (!document.getElementById) {return;}
		for (var i in ids) {
			if (document.getElementById(ids[i])) {
				var el=document.getElementById(ids[i]);
				el.className="hoverOff";
				Common.addEvent(el, "mouseover", setHoverOn(el), false);
				Common.addEvent(el, "mouseout", setHoverOff(el), false);
			}
		}
		function setHoverOn(el) {
			var newClassStr = el.className.replace(/hoverOff/, "hoverOn");
			return function () {el.className=newClassStr;};
		}
		function setHoverOff(el) {
			var newClassStr = el.className.replace(/hoverOn/, "hoverOff");
			return function () {el.className=newClassStr;};
		}
	},

	browseQuotesFocus: function() {
		if (/#browseQuotes/.test(window.location)) {
			var browseQuotes=document.getElementById("browseQuotes");
			var bQLink=browseQuotes.getElementsByTagName("a")[0];
			bQLink.focus();
		}
	},

	//should only be called for ie: sets tabindex to -1 on select ids to add elements to tab order
	setTabIndexMinusOne: function() {
		if (!document.getElementById) {return;}
		var ids=["content", "browseQuotes"];
		var setTabIndex = function (el) {
			el.setAttribute("tabIndex", "-1");
		};
		for (var i in ids) {
			if (document.getElementById(ids[i])) {
				var el=document.getElementById(ids[i]);
				setTabIndex(el);
			}
		}
	}
};
Common.addDOMLoadEvent(Retouch.colourMenu);
Common.addDOMLoadEvent(Retouch.blockHover);
Common.addDOMLoadEvent(Retouch.browseQuotesFocus);
//yep, i know, browser targeting, but only with the best of intentions, but then again, good intentions...
//add Retouch.ieTabOrder() to the cue if ie using conditional compilation
/*@cc_on@*//*@if(@_win32)
	Common.addDOMLoadEvent(Retouch.setTabIndexMinusOne);
/*@end@*/