// Adds skin span and save/restores selection

function switchStyle(savedStyle) {
  document.body.className = savedStyle;
  // remember style in cookie
  document.cookie = "savedStyle=" + savedStyle +"; expires=Tue, 06 Jul 2045 00:00:00 GMT; path=/";
}

var storage = document.cookie;
function getCookie(name) {
  var index = storage.indexOf(name + "=");
  if (index == -1) return null;
  index = storage.indexOf("=", index) + 1;
  var endstr = storage.indexOf(";", index);
  if (endstr == -1) endstr = storage.length;
  return unescape(storage.substring(index, endstr));
}

function addStyles(inside) {
  if (!document.getElementById) return false; // Check for non-DOM browsers
  if (!document.getElementById(inside)) return false;
  // retreive style in cookie
  if (getCookie('savedStyle'))
	switchStyle(getCookie('savedStyle'));
  // add links to page inside desired section
  var parentEle = document.getElementById(inside);
  var styleDiv = document.createElement('ul');
  styleDiv.id = 'skins';
  var skinOptions = new Array('white', 'yellow', 'red', 'purple', 'green', 'blue');
  for (var i = 0; i < skinOptions.length; i++) {
	var skinName = skinOptions[i];
	var skinItem = styleDiv.appendChild(document.createElement('li'));
	skinItem.id = 'skin_' + skinName;
	skinItem.setAttribute('title', 'Change background colour to ' + skinName);
	skinItem.pass = skinName;
	skinItem.onmouseover = function() {
		switchStyle(this.pass);
	}
	skinItem.onkeypress = skinItem.onmouseover;
	var skinSpan = skinItem.appendChild(document.createElement('span'));
	skinSpan.appendChild(document.createTextNode(skinName));
  }
  parentEle.appendChild(styleDiv);
  return true;
}

// Page needs to load before elements can be found
window.onload = function() {
	addStyles("bottom");
}