﻿if (window.citydw) { } else {window.citydw = function() { }; }
citydw.menu = function(id, imageUrl, tUrl, width, height) {
	var container = document.getElementById(id);
	if (container == null) throw new Error("Unable to find element \"" + id + "\".");

	var t = new Image();
	t.src = tUrl;

	container.style.width = width + "px";
	container.style.height = height + "px";
	container.style.backgroundImage = "url('" + imageUrl + "')";
	container.style.position = "relative";
	var total = 0;
	this.add = function(width, link, alt) {
		var starts = total;
		var item = document.createElement("DIV");
		item.title = alt;
		container.appendChild(item);
		item.style.position = "absolute";
		item.style.top = "0px";
		item.style.left = total + "px";
		item.style.width = width + "px";
		item.style.height = height + "px";
		item.style.backgroundImage = container.style.backgroundImage;
		item.style.backgroundPosition = "-" + starts + "px 0px";
		item.onmouseover = function() {
			item.style.backgroundPosition = "-" + starts + "px " + height + "px";
		}
		item.onmouseout = function() {
			item.style.backgroundPosition = "-" + starts + "px 0px";
		}
		var a = document.createElement("A");
		a.href = link;
		item.appendChild(a);

		var image = document.createElement("IMG");
		image.src = t.src;
		image.style.height = height + "px";
		image.style.width = width + "px";
		image.style.borderWidth = "0px";
		image.alt = alt;
		a.appendChild(image);
		total += width;
	}
}
