// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// 
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but please leave this message intact.
//
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// --- version date: 06/13/04 ---------------------------------------------------------

// --------------------------------------------------
// MakeTween Class

MakeTween = function (el, getter, setter) {
	this.el = el;
	this.getter = getter;
	this.setter = setter;
	this.callback = null;
	this.interval = null;
	this.obj = "MakeTweenInstance_" + (++ MakeTween.instance);
	eval (this.obj + "=this");
}
MakeTween.instance = 0;

MakeTween.prototype.tween = function (endpos, callback) {
	this.callback = callback;
	this.clearTween ();
	this.doTween (endpos);
	this.interval = setInterval (this.obj + ".doTween(" + endpos + ")", 100);
}
MakeTween.prototype.doTween = function (endpos) {
	var pos = this.getter ();
	if (Math.abs (pos - endpos) <= 1) {
		this.setter (endpos);
		this.clearTween ();
		if (this.callback) this.callback ();
	} else {
		this.setter (pos + (endpos - pos) / 2);
	}
}
MakeTween.prototype.clearTween = function () {
	clearInterval (this.interval);
	this.interval = null;
}

// --------------------------------------------------
// MakeElement Class

// Required:
// - MakeTween Class

MakeElement = function (idname) {
	this.el = document.getElementById (idname);
	this.css = this.el.style;
	this.obj = "MakeElementInstance_" + idname;
	eval (this.obj + "=this");
}
// event
MakeElement.prototype.addEvent = function (type, callback) {
	this.el["on" + type] = callback;
}
MakeElement.prototype.removeEvent = function (type) {
	this.addEvent (type, null);
}
// visibility
MakeElement.prototype.show = function () {
	this.css.visibility = "visible";
}
MakeElement.prototype.hide = function () {
	this.css.visibility = "hidden";
}
// background color
MakeElement.prototype.getBgColor = function () {
	return this.getCSSProp ("backgroundColor");
}
MakeElement.prototype.setBgColor = function (color) {
	this.css.backgroundColor = color || "";
}
// top
MakeElement.prototype.getTop = function () {
	return parseInt (this.getCSSProp ("top")) || this.el.offsetTop;
}
MakeElement.prototype.setTop = function (top) {
	this.css.top = top + "px";
}
// left
MakeElement.prototype.getLeft = function () {
	return parseInt (this.getCSSProp ("left")) || this.el.offsetLeft;
}
MakeElement.prototype.setLeft = function (left) {
	this.css.left = left + "px";
}
// width
MakeElement.prototype.getWidth = function () {
	return parseInt (this.getCSSProp ("width")) || this.el.offsetWidth;
}
MakeElement.prototype.setWidth = function (width) {
	this.css.width = width + "px";
}
// height
MakeElement.prototype.getHeight = function () {
	return parseInt (this.getCSSProp ("height")) || this.el.offsetHeight;
}
MakeElement.prototype.setHeight = function (height) {
	this.css.height = height + "px";
}
// z-index
MakeElement.prototype.getZindex = function () {
	return this.getCSSProp ("zIndex");
}
MakeElement.prototype.setZindex = function (z) {
	this.css.zIndex = z;
}
// tween
MakeElement.prototype.tweenTop = function (top, callback) {
	var self = this;
	if (!this.topTween) this.topTween = new MakeTween (this, function () {return self.getTop ()}, function (y) {self.setTop (y)});
	this.topTween.tween (top, callback);
}
MakeElement.prototype.tweenLeft = function (left, callback) {
	var self = this;
	if (!this.leftTween) this.leftTween = new MakeTween (this, function () {return self.getLeft ()}, function (x) {self.setLeft (x)});
	this.leftTween.tween (left, callback);
}
// css property
MakeElement.prototype.getCSSProp = function (prop) {
	if (this.css[prop]) {
		return this.css[prop];
	} else if (this.el.currentStyle) {
		return this.el.currentStyle[prop];
	} else if (document.defaultView && document.defaultView.getComputedStyle) {
		prop = prop.replace (/([A-Z])/g, function (match) {return "-" + match.toLowerCase ()});
		return document.defaultView.getComputedStyle (this.el, "").getPropertyValue (prop);
	} else {
		return null;
	}
}

// --------------------------------------------------
// MakeSlideoutMenu Class

// Required:
// - MakeElement Class

MakeSlideoutMenu = function () {
	this.menus = new Array ();
	this.timeout = null;
	this.active = null;
	this.activeBgColor = null;
	this.depth = 100;
	this.obj = "MakeSlideoutMenuInstance_" + (++ MakeSlideoutMenu.instance);
	eval (this.obj + "=this");
}
MakeSlideoutMenu.instance = 100;

// --- Public Methods ---

MakeSlideoutMenu.prototype.setActiveBgColor = function (color) {
	this.activeBgColor = color;
}
MakeSlideoutMenu.prototype.build = function (parent, mask, child) {
	var self = this;
	var index = this.menus.length;
	var menu = this.menus[index] = new Object ();
	// Build Objects
	menu.parent = new MakeElement (parent);
	menu.mask = mask ? new MakeElement (mask) : null;
	menu.child = child ? new MakeElement (child) : null;
	// Attach Events
	menu.parent.addEvent ("mouseover", function () {self.hide (); self.show (index)});
	menu.parent.addEvent ("mouseout", function () {self.out ()});
	if (menu.child) {
		//menu.parent.addEvent("click", function () {return false});
		menu.child.addEvent ("mouseover", function () {self.show (index)});
		menu.child.addEvent ("mouseout", function () {self.out ()});
	}
}

// --- Runtime Methods ---

MakeSlideoutMenu.prototype.show = function (index) {
	if (this.timeout) clearTimeout (this.timeout);
	var menu = this.menus[index];
	if (this.activeBgColor) menu.parent.setBgColor (this.activeBgColor);
	if (menu.child) {
		menu.mask.show ();
		menu.mask.setZindex (++ this.depth);
		menu.child.tweenLeft (0);
	}
	this.active = index;
}
MakeSlideoutMenu.prototype.hide = function () {
	if (this.active != null) {
		var menu = this.menus[this.active];
		if (this.activeBgColor) menu.parent.setBgColor (null);
		if (menu.child) menu.child.tweenLeft (-menu.child.getWidth (), function () {menu.mask.hide ()});
		this.active = null;
	}
}
MakeSlideoutMenu.prototype.out = function () {
	this.timeout = setTimeout (this.obj + ".hide()", 300);
}

// --------------------------------------------------
// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Build SlideoutMenu

function buildSlideoutMenu () {
	if (!document.getElementById) return;
	var menu = new MakeSlideoutMenu ();
	menu.setActiveBgColor ();
	menu.build ("menu1", "menu1Mask", "menu1Sub");
	menu.build ("menu2", "menu2Mask", "menu2Sub");
}

window.onload = function () {
	buildSlideoutMenu ();
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// --------------------------------------------------