MenuItem.prototype.OnMouseOver = function()
{
	setCursor( this.elt, "pointer" );
	setBackgroundImage( this.elt, "images/buttons/btn_on_" + this.name + ".jpg" );
}

MenuItem.prototype.OnMouseOut = function()
{
	setCursor( this.elt, "default" );
	setBackgroundImage( this.elt, "images/buttons/btn_off_" + this.name + ".jpg" );
}

function MenuItem( elt, name, url )
{
	var self = this;

	this.elt = elt;
	this.name = name;

	setBackgroundImage( this.elt, "images/buttons/btn_off_" + name + ".jpg" )

	elt.onmouseover = function() { self.OnMouseOver(); }
	elt.onmouseout = function() { self.OnMouseOut(); }
	elt.onclick = function() { document.location.assign( url ); }
}

var initID;

function main_onload()
{
	new MenuItem( document.getElementById( "sidebar_btn_about_us" ), "about_us", "about_us.asp" );
	new MenuItem( document.getElementById( "sidebar_btn_services" ), "services", "services.asp" );
	new MenuItem( document.getElementById( "sidebar_btn_testimonials" ), "testimonials", "testimonials.asp" );
	new MenuItem( document.getElementById( "sidebar_btn_gallery" ), "gallery", "gallery.asp" );
	new MenuItem( document.getElementById( "sidebar_btn_water" ), "water", "faq.asp" );
	new MenuItem( document.getElementById( "sidebar_btn_monthly_tips" ), "monthly_tips", "monthly_tips.asp" );
	new MenuItem( document.getElementById( "sidebar_btn_promotions" ), "promotions", "promotions.asp" );
	new MenuItem( document.getElementById( "sidebar_btn_payment_options" ), "payment_options", "payment_options.asp" );
	new MenuItem( document.getElementById( "sidebar_btn_helpful_links" ), "helpful_links", "helpful_links.asp" );
	
	new MenuItem( document.getElementById( "menu_btn_contact_us" ), "contact_us", "contact_us.asp" );
	
	//setOpacity( document.getElementById( "container" ), 0 );

	//initID = window.setInterval( bringIn, 100 );
}

function setBackgroundImage( elt, url )
{
	elt.style.backgroundImage = "url('" + url + "')";
}

function setCursor( elt, cursor )
{
	elt.style.cursor = cursor;
}

var scale = 0;
var scaleMax = 1;

function bringIn()
{
	if ( scale == scaleMax )
	{
		window.clearInterval( initID );
	}

	setOpacity( document.getElementById( "container" ), scale++ );
}

function setOpacity( elt, value )
{
	elt.style.opacity = value/scaleMax;
	elt.style.filter = 'alpha(opacity=' + (value/scaleMax) * 100 + ')';
}