Menu.prototype.constructor = Menu;

function Menu(parentPanel, title, link, image, id) {
	this.parent = null;
	this.panel = document.createElement("div");
	this.root = parentPanel;
	this.rootID = this.id;
	this.panel.id  = id;

	this.title = title;
	this.link = link;
	this.image = image;
	this.id = id;

	this.currentHeight = 0;
	this.panel.style.height = this.currentHeight + 'px';
	this.maxHeight = 0;
	this.threshold = 5;
	this.move = 'up';

	this.openOnParent = true;
	this.opener = null;
	this.opened = true;

	this.items = new Array();
	this.subMenus = new Array();
}

Menu.prototype.addItem = function(title, link, image, id) {
	var item = new Object();
	item.title = title;
	item.link = link;
	item.image = image;
	item.id = id;

	this.items.push(item);
}

Menu.prototype.addMenu = function(subItem) {
	subItem.root = this.root;
	subItem.rootID = this.id;
	subItem.parent = this;
	this.items.push(subItem.id);
	this.subMenus[subItem.id] = subItem;
}

Menu.prototype.draw = function(level) {
	var ul = this.panel.appendChild(document.createElement('ul'));
	this.panel.className = 'Menu MenuLevel' + level;

	var __this = this;
	for (var i = 0; i != this.items.length; i++) {
		if (this.items[i].title == null) {
			var menu = this.subMenus[this.items[i]];
			li = ul.appendChild(document.createElement('li'));
			li.className = 'MenuSubMenu';
			li.id = 'button' + menu.id;

			var div  = li.appendChild(document.createElement('div'));
			var imgParent = div;

			if (menu.link != null) {
				imgParent = div.appendChild(document.createElement('a'));
				imgParent.href = menu.link;
			}
			if (menu.image != null) {
				img = imgParent.appendChild(document.createElement('img'));
				img.src = menu.image;
				img.alt = menu.title;
				img.title = menu.title;
				img.rel = menu.id;
			}
			else {
				imgParent.appendChild(document.createTextNode(menu.title));
			}
			div.className = 'MenuButton';
			div.rel = menu.id;
			menu.opener = div;

			var divSubMenu  = li.appendChild(document.createElement('div'));
			divSubMenu.className = 'MenuButtonSubMenu';

			if (div.attachEvent) {
				div.attachEvent("onclick", function(event) { if (!event) { event = window.event; } Menu.__startDrop(event, __this);});
			}
			else {
				div.addEventListener("click", function(event) { Menu.__startDrop(event, __this);}, false);
			}

			this.root.appendChild(menu.draw(level + 1));
		}
		else {
			var item = this.items[i];
			var li = ul.appendChild(document.createElement('li'));
			var a  = li.appendChild(document.createElement('a'));
			a.className = 'MenuButton';
			li.className = 'MenuItem';
			li.id = 'button' + item.id;
			if (item.image != null) {
				var img = a.appendChild(document.createElement('img'));
				img.src = item.image;
				img.alt = item.title;
				img.title = item.title;
			}
			else {
				a.appendChild(document.createTextNode(item.title));
			}
			a.href = item.link;
		}
	}

	return this.panel;
}

Menu.prototype.write = function() {
	this.draw(1);
	this.root.appendChild(this.panel);
}

Menu.prototype.getOffsetLeft = function() {
	var element = this.opener;
	var offset = 0;

	if (navigator.userAgent.indexOf('MSIE') != -1) {
		while (element != null) {
			offset += element.offsetLeft;
			if (element.offsetParent && element.id != this.rootID) {
				element = element.offsetParent;
			}
			else {
				break;
			}
		}
	}
	else{
		offset = (this.opener != null && this.openOnParent ? this.opener.offsetLeft : 0) + (this.parent != null ? this.parent.getOffsetLeft() : 0);
	}
	return offset;// + (this.parent != null ? this.parent.getOffsetLeft() : 0);
}

Menu.prototype.getOffsetTop = function() {
	return this.maxHeight + (this.parent != null ? this.parent.getOffsetTop() : 0);
}

Menu.prototype.rollUp = function(siblingExclude) {
	for (var menuID in this.subMenus) {
		if (siblingExclude == null || menuID != siblingExclude) {
			var menu = this.subMenus[menuID];
			menu.pushUp();
		}
	}
}

Menu.prototype.dropDown = function() {
	this.panel.style.display = 'block';
	this.panel.style.height = this.currentHeight + 'px';
	this.move = 'down';

	if (this.openOnParent) {
		this.panel.style.left = this.getOffsetLeft() + 'px';
	}
	this.panel.style.top = this.parent.getOffsetTop() + 'px';

	this.parent.rollUp(this.id);
	var __this = this;
	this.timer = setInterval(function () { Menu.__dropTimedCount((__this.move == 'down' ? __this.threshold  : -__this.threshold), __this);}, 50);
}

Menu.prototype.pushUp = function() {
	this.panel.style.display = 'block';
	this.panel.style.height = this.currentHeight + 'px';
	this.move = 'up';

	this.rollUp();
	var __this = this;
	this.timer = setInterval(function () { Menu.__dropTimedCount((__this.move == 'down' ? __this.threshold  : -__this.threshold), __this);}, 50);
}


Menu.prototype.goIn = function() {
	if (this.animation  == 'dropPush') {
		this.dropDown();
	}
	else if (this.animation  == 'fadeInOut') {

	}
}

Menu.__startDrop = function(event, parent) {
	var target = null;
	if (event.target) {
		target = event.target;
	}
	else if (event.srcElement) {
		target = event.srcElement;
		while (target.rel == null) {
			target = target.parentNode;

		}
	}

	var menu = parent.subMenus[target.rel];

	if (menu.move == 'up') {
		menu.dropDown(event.clientX, event.clientY);
	}
	else {
		menu.pushUp(event.clientX, event.clientY);
	}
}

Menu.__startFade = function(event, menu) {
	if (menu.move == 'up') {
		menu.fadeIn(event.clientX, event.clientY);
	}
	else {
		menu.fadeOut(event.clientX, event.clientY);
	}
}

Menu.__dropTimedCount = function(threshold, __object){
	var height = __object.currentHeight + threshold;

	if (__object.move == 'down' && height > __object.maxHeight) {
		clearInterval(__object.timer);
		__object.timer = null;
		__object.panel.style.height = __object.maxHeight;
//		__object.state = 'stopped';
//		__object.checkActionStack();
	}
	else if (__object.move == 'up' && height < 0) {
		clearInterval(__object.timer);
		__object.timer = null;
		__object.panel.style.height = 0;
//		__object.state = 'stopped';
//		__object.checkActionStack();
	}
	else {
		__object.currentHeight = height;
		__object.panel.style.height = __object.currentHeight + 'px';
	}
}