(function () {

	function listDropdownSplit(list) {

		// we need a controller list item, which contains a 'More' link and an empty (nested) list to hold the contents of the dropdown
		var controller = document.createElement("li"), a = document.createElement("a"), ul = document.createElement("ul");
		controller.className = "controller last";
		a.href = "javascript:void(0);";
		a.innerText = a.textContent = "More";
		controller.appendChild(a);
		controller.appendChild(ul);
		// append the new controller to the end of the original list
		list.appendChild(controller);
		// then append to the nested list within the controller all the items with the class "more"
		var items = list.getElementsByTagName("LI"), toMove = [];
		for (var i = 0, ii = items.length; i < ii; i++) {
			if (items[i].className.match(/(^| )more( |$)/)) {
				// we need to put the items we want to move into a helper array first, because if we moved them directly we'd change the number of items, stuffing up the loop
				toMove.push(items[i]);
			}
		}
		// run the append on all the items that we've previously identified as needing to be moved
		for (var i = 0, ii = toMove.length; i < ii; i++) {
			ul.appendChild(toMove[i]);
		}

		// define function to hide dropdown (once shown by keyboard operation)
		function closeDropdown() {
			controller.className = controller.className.replace(" focus", "");
			// once executed, unbind this handler from the window, as it is no longer required
			if (document.removeEventListener) document.removeEventListener("click", closeDropdown, false);
			else if (document.detachEvent) document.detachEvent("onclick", closeDropdown);
		}

		// enable keyboard operability by adding class "focus" to show dropdown when keyboard tabs to the 'More' link
		// we are looking for the link, which should be the controller first and only child element
		controller.firstChild.onfocus = function() {
			// check if the class "focus" already exists before running this function, because the user may have tabbed into the dropdown and then back to the controller link (in which case the dropdown will still be active)
			if (controller.className.match(/(^| )focus( |$)/)) return;
			controller.className += " focus";
			// then bind handler to watch for click event to close dropdown
			if (document.addEventListener) document.addEventListener("click", closeDropdown, false);
			else if (document.attachEvent) document.attachEvent("onclick", closeDropdown);
			// also listen for keyboard tabbing beyond the last list item
			// we want the last li in the dropdown, and then the link inside that li (it should be the first and only child element)
			var last = controller.getElementsByTagName("LI");
			last = last[last.length - 1].firstChild;
			if (last.addEventListener) {
				last.addEventListener("blur", closeDropdown, false);
			}
			else if (last.attachEvent) {
				last.attachEvent("onblur", closeDropdown);
			}
			// as well as keyboard tabbing back beyond the controller to the previous item
			// the previous item should be second last li in the original list (the last is the controller)
			// the first and only child element inside that previous item should be the link
			var prev = list.children;
			prev = prev[prev.length - 2];
			prev = prev.firstChild;
			if (prev.addEventListener) {
				prev.addEventListener("focus", closeDropdown, true);
			}
			else if (prev.attachEvent) {
				prev.attachEvent("onfocus", closeDropdown);
			}
		}

		// enable hover states in IE 6 (as it doesn't support li:hover CSS)
		// the check for whether the browser is IE 6 is not very accurate, but that's OK because even in other browsers, having these extra classes added won't hurt
		if (navigator.userAgent.match(/MSIE 6/)) {
			controller.onmouseover = function () { this.className += " hover" };
			controller.onmouseout = function () { this.className = this.className.replace(" hover", "") };
		}

		// attach class to indicate script has executed
		list.className += " scripted";

	}

	// run the above function listDropdownSplit on elements that require it
	if (window.addEventListener) {
		window.addEventListener("load", function () {
			listDropdownSplit(document.getElementById("whitestripDropdown"));
		}, false);
	}
	else if (window.attachEvent) {
		window.attachEvent("onload", function () {
			listDropdownSplit(document.getElementById("whitestripDropdown"));
		});
	}

})();