//Global Variables
var TotalButtons = 20;
var ButtonTextFont = 'Arial';
var ButtonTextSize = 12;
var MenuDistanceFromTop = 223;
var ImagePaddingLeft = 6;
var ImagePaddingTop = 5;
var TextPaddingLeft = 35;
var TextPaddingTop = 4;

//Make Menu function
function _MakeMenu(MinWidth){
		var StartMenuBarRight = Math.ceil(TotalButtons/2);
	_MakeMenuBarStyleSet(0, (StartMenuBarRight-1), _PositionMenuBarLeft());
	_MakeMenuBarStyleSet(StartMenuBarRight, (TotalButtons-1), _PositionMenuBarRight(MinWidth));
	_MakeMenuBar(0, (TotalButtons-1));
}

//Make Style Sheets functions
function _MakeMenuBarStyleSet(StartButton, EndButton, Left){
		var Top = MenuDistanceFromTop;
	document.write('<style type="text/css">');
	for (var i=StartButton; i<=(EndButton); ++i){
		_MakeButtonStyleSet(i, Left, Top);
		Top = Top+45;
	}
	document.write('</style>');
}
function _MakeButtonStyleSet(Number, Left, Top){
	_MakeStyleSheet(	('Base'+Number), 		Left, 						Top, 						1	);
	_MakeStyleSheet(	('ButtonUp'+Number), 	Left, 						Top,						-1	);
	_MakeStyleSheet(	('ButtonDown'+Number), 	Left, 						Top,						-1	);
	_MakeStyleSheet(	('ImageSmall'+Number), 	(Left+ImagePaddingLeft), 	(Top+ImagePaddingTop),		3	);
	_MakeStyleSheet(	('ImageBig'+Number), 	(Left+ImagePaddingLeft-1),	(Top+ImagePaddingTop-1),	-1	);
	_MakeStyleSheet(	('TextSmall'+Number), 	(Left+TextPaddingLeft), 	(Top+TextPaddingTop),		3	);
	_MakeStyleSheet(	('TextBig'+Number), 	(Left+TextPaddingLeft), 	(Top+TextPaddingTop-1),		-1	);
}
function _MakeStyleSheet(Name, Left, Top, Zind){
	document.write('#'+Name+' {position: absolute; left: '+Left+'; top: '+Top+'; z-index: '+Zind+';}');
}

// function to resize menu
function _ResizeMenu(MinWidth){
		var StartMenuBarRight = Math.ceil(TotalButtons/2);
	_MoveMenuBar(0, (StartMenuBarRight-1), _PositionMenuBarLeft());
	_MoveMenuBar(StartMenuBarRight, (TotalButtons-1), _PositionMenuBarRight(MinWidth));
}
function _MoveMenuBar(StartButton, EndButton, Left){

	for (var i=StartButton; i<=(EndButton); ++i){
		document.getElementById('Base'+i).style.left = Left;
		document.getElementById('ButtonUp'+i).style.left = Left;
		document.getElementById('ButtonDown'+i).style.left = Left;
		document.getElementById('ImageSmall'+i).style.left = (Left+ImagePaddingLeft);
		document.getElementById('ImageBig'+i).style.left = (Left+ImagePaddingLeft-1);
		document.getElementById('TextSmall'+i).style.left = (Left+TextPaddingLeft);
		document.getElementById('TextBig'+i).style.left = (Left+TextPaddingLeft);
	}
}
	
//Position Menus functions
function _PositionMenuBarLeft(){
	return 0.16*page.winW()-110;
	//return ((((page.winW()/2)-236)/2)-60);
}
function _PositionMenuBarRight(MinWidth){
	return (page.winW()-(0.16*page.winW()));	

}


//Button functions
function _Over(Number){
	document.getElementById('ButtonUp'+Number).style.zIndex = 2;
	_BigImage(Number);
	_BigText(Number);
}
function _Out(Number){
	document.getElementById('ButtonUp'+Number).style.zIndex = -1;
	document.getElementById('ButtonDown'+Number).style.zIndex = -1;
	_SmallImage(Number);
	_SmallText(Number);
}
function _Down(Number){
	document.getElementById('ButtonUp'+Number).style.zIndex = -1;
	document.getElementById('ButtonDown'+Number).style.zIndex = 2;	
	_SmallImage(Number);
	_SmallText(Number);
	window.location = URL[Number];
}
function _Up(Number){
	document.getElementById('ButtonDown'+Number).style.zIndex = -1;
	document.getElementById('ButtonUp'+Number).style.zIndex = 2;
	_BigImage(Number);
	_BigText(Number);
}

//Image functions
function _BigImage(Number){
	document.getElementById('ImageSmall'+Number).style.zIndex = -1;
	document.getElementById('ImageBig'+Number).style.zIndex = 3;
}
function _SmallImage(Number){
	document.getElementById('ImageBig'+Number).style.zIndex = -1;
	document.getElementById('ImageSmall'+Number).style.zIndex = 3;
}

//Text functions
function _BigText(Number){
	document.getElementById('TextSmall'+Number).style.zIndex = -1;
	document.getElementById('TextBig'+Number).style.zIndex = 3;
}
function _SmallText(Number){
	document.getElementById('TextBig'+Number).style.zIndex = -1;
	document.getElementById('TextSmall'+Number).style.zIndex = 3;
}

//Build Button
function _MakeButton(Number){
	_WriteCover(Number);
	_WriteBlank(Number);
	_WriteImage(Number);
	_WriteText(Number);
	document.write('</span>');
}
function _WriteBlank (Number){
		document.write('<span ID="Base'+Number+'" style="cursor: pointer"><img src="images/ButtonOff.gif"></span>');
		document.write('<span ID="ButtonUp'+Number+'" style="cursor: pointer"><img src="images/ButtonOut.gif"></span>');
		document.write('<span ID="ButtonDown'+Number+'" style="cursor: pointer"><img src="images/ButtonIn.gif"></span>');
}
function _WriteImage (Number, ImageWidth){
		document.write('<span ID="ImageSmall'+Number+'" style="cursor: pointer"><img src="'+Image[Number]+'" width='+Width[Number]+' height=32></span>');
		document.write('<span ID="ImageBig'+Number+'" style="cursor: pointer"><img src="'+Image[Number]+'" width='+(Width[Number]+2)+' height=34></span>');
}
function _WriteText(Number){

		document.write('<span ID="TextSmall'+Number+'" style="font-family: '+ButtonTextFont+'; font-size: '+(ButtonTextSize-1)+'px; color:'+Color[Number]+'; cursor: pointer;">'+Text[Number]+'</span>');
		document.write('<span ID="TextBig'+Number+'" style="font-family: '+ButtonTextFont+'; font-size: '+(ButtonTextSize)+'px; color: '+Color[Number]+'; cursor: pointer;">'+Text[Number]+'</span>');
}
function _WriteCover (Number){
		document.write('<span onMouseOver="_Over('+Number+')" onMouseOut="_Out('+Number+')" onMouseDown="_Down('+Number+')" onMouseUp="_Up('+Number+')">');
}

//Build Menu Bar
function _MakeMenuBar(StartButton, EndButton){
	for (var i=StartButton; i<=(EndButton); ++i){
		_MakeButton(i);
	}
}

//create arrays	for stuff inside buttons
	var Image = new Array();	var Width = new Array();	var Text = new Array();											var Color = new Array();	var URL = new Array();

	Image[0]  = 'images/waldo.jpg', 	Width[0]  = 24,		Text[0] = 'Home<br>Page',										Color[0]  = '000048',	URL[0]  = 'index.html';
	Image[1]  = 'images/price.jpg', 	Width[1]  = 19,		Text[1] = 'Free Home<br>Price Estimate', 						Color[1]  = '000068',	URL[1]  = 'price.html'; 
	Image[2]  = 'images/search.jpg', 	Width[2]  = 26,		Text[2] = 'Free Custom<br>Home Search', 						Color[2]  = '110078',	URL[2]  = 'search.html';
	Image[3]  = 'images/hand.jpg', 		Width[3]  = 26,		Text[3] = 'Home Loan<br>Information', 							Color[3]  = '220099',	URL[3]  = 'loan.html';
	Image[4]  = "images/scale.jpg",		Width[4]  = 26;		Text[4] = "The Escrow<br>Process", 								Color[4]  = '350090',	URL[4]  = 'escrow.html';
	Image[5]  = "images/needle.jpg", 	Width[5]  = 19;		Text[5] = "Queen Anne <br>Neighborhood", 						Color[5]  = '570071',	URL[5]  = 'area.html';	
	Image[6]  = "images/register.jpg", 	Width[6]  = 29;		Text[6] = "Best Local<br>Businesses", 							Color[6]  = '780051',	URL[6]  = 'businesses.html';
	Image[7]  = "images/link.jpg", 		Width[7]  = 25;		Text[7] = "Choice<br>Links", 									Color[7]  = 'ac0048',	URL[7]  = 'links.html';
	Image[8]  = "images/house.jpg",		Width[8]  = 24;		Text[8] = "Featured<br>Listings", 					 			Color[8]  = 'c00036',	URL[8]  = 'featured.html';	
	Image[9]  = "images/matches.jpg", 	Width[9]  = 24;		Text[9] = "Buyer-Home<br>Matches", 					 			Color[9]  = 'cc0020',	URL[9]  = 'matches.html';
	Image[10] = "images/market.jpg",	Width[10] = 25;		Text[10] = "Monthly<br>Market&nbsp;Report",			 			Color[10] = 'd50000',	URL[10] = 'market.html';	
	Image[11] = "images/featured.jpg",	Width[11] = 26;		Text[11] = "Seller's<br>Agent&nbsp;",					 		Color[11] = 'cc0020',	URL[11] = 'seller.html';		
	Image[12] = "images/free.jpg", 		Width[12] = 26;		Text[12] = "&nbsp;Selling<br>&nbsp;Strategy",			 		Color[12] = 'c00036',	URL[12] = 'strategy.html';
	Image[13] = "images/sold.jpg", 		Width[13] = 26;		Text[13] = "Buyer's<br>Agent&nbsp;",		 					Color[13] = 'ac0048',	URL[13] = 'buyer.html';
	Image[14] = "images/check.jpg", 	Width[14] = 26;		Text[14] = "Buying<br>Checklist", 							 	Color[14] = '780051',	URL[14] = 'checklist.html';
	Image[15] = "images/WS.jpg", 		Width[15] = 26;		Text[15] = "Qualifications<br>&&nbsp;Experience",				Color[15] = '350090',	URL[15] = 'qualifications.html';
	Image[16] = "images/ABR.jpg", 		Width[16] = 28;		Text[16] = "&nbsp;What&nbsp;are<br>&nbsp;CRS&nbsp;&&nbsp;ABR?",	Color[16] = '220099',	URL[16] = 'ABR.html';
	Image[17] = "images/client.jpg", 	Width[17] = 28;		Text[17] = "Client<br>Testimonials", 					 		Color[17] = '110078',	URL[17] = 'testimonials.html';
//	Image[18] = "images/scroll.jpg", 	Width[18] = 26;		Text[18] = "Quarterly<br>Newsletter", 							Color[18] = '110078',	URL[18] = 'newsletter.html';
	Image[18] = "images/commitment.jpg",Width[18] = 16;		Text[18] = "Helpful<br>Advice", 								Color[18] = '000068',	URL[18] = 'advice.html';
	Image[19] = "images/envelope.jpg", 	Width[19] = 25;		Text[19] = "Contact<br>Waldo", 						 			Color[19] = '000048',	URL[19] = 'contact.html';