// Initialize WebDDM
function initWebDDM ()
{
	// Preload all the images we will be using...
	WebDDM_preloadImages('menus/mainmenu/arrowdown.gif',
		'menus/mainmenu/arrowleft.gif');
	
	// Set arrow HTML
	var arrowDown = '<span style="position:relative;top:0;left:5;">'+
		'<img src="menus/mainmenu/arrowdown.gif" style="border-style: none;" />' +
		'</span>';
	var arrowLeft = '<span style="position:relative;top:0;left:5;">'+
		'<img src="menus/mainmenu/arrowleft.gif" style="border-style: none;" />' +
		'</span>';
			
	// Begin base menu
	var menu = {
		'position':'relative',
		'top':0,
		'left':0,
		'width':500,
		'height':30,
		'expand_menu':'auto',

		// Begin array of items, level 0
		'items':{
			'top':0,
			'left':0,
			
			'background-item':{
				'width': 472, 'height': 26,
				'top':0, 'left':0,
				'class': 'container'
			},
			
			1:{
				'content':'Home',
				'content_rollover':'<a href="index.html"><u>H</u>ome</a>',
				'cursor':'hand',
				'width':100, 'height':20, 'offsetLeft': 3, 'offsetTop': 3,
				'class':'mainmenu_off',
				'class_rollover':'mainmenu_rollover'
			},
			2:{
				'content':'More Info' + arrowLeft,
				'content_menuopen':'<a href="index.html"><u>M</u>ore <u>I</u>nfo' + arrowDown + '</a>',
				'cursor':'hand',
				'width':100, 'height':20, 'offsetLeft': 102,
				'class':'mainmenu_off',
				'class_menuopen':'mainmenu_rollover',
				
				// Begin array of items
				'items':{
					'top':20,
					'left':0,
					
					'background-item':{
						'width': 206, 'height': 156,
						'top':2, 'left':0,
						'class': 'container'
					},
					
					1:{
						'content':'Any <b>H</b><u>T</u><i>M</i><s>L</s> can be used in items, such as lists and graphics:<ul><li>one</li><li><img src="WebDDM.gif" /></li></ul>',
						'content_rollover':'Dynamically change content at any time!',
						'width':200, 'height':150, 'left':3, 'top': 3,
						'class':'mainmenu_off',
						'class_rollover':'mainmenu_rollover',
						'css_rollover': 'font-weight: normal;'
					}
				}
				// End array of items
			},
			3:{
				'content':'JavaScript Calls'+arrowLeft,
				'content_menuopen':'<a href="index.html"><u>J</u>ava<u>S</u>cript <u>C</u>alls'+arrowDown+'</a>',
				'cursor':'hand',
				'width':130, 'height':20, 'offsetLeft':102,
				'class':'mainmenu_off',
				'class_menuopen':'mainmenu_rollover',

				// Begin array of items
				'items':{
					'top':20,
					'left':0,

					'background-item':{
						'width': 136, 'height': 70,
						'top':2, 'left':0,
						'class': 'container'
					},					
					
					1:{
						'content':'Alert Box',
						'content_rollover':'<a href="javascript:alert(\'Hello world!\');"><u>A</u>lert <u>B</u>ox</a>',
						'cursor':'hand',
						'width':130, 'height':20, 'offsetLeft':3, 'offsetTop':3,
						'class':'mainmenu_off',
						'class_rollover':'mainmenu_rollover'
					},
					2:{
						'content':'Confirm Box',
						'content_rollover':'<a href="javascript:void confirm(\'You wanna confirm or what?\');"><u>C</u>onfirm <u>B</u>ox</a>',
						'cursor':'hand',
						'width':130, 'height':20, 'offsetTop':22,
						'class':'mainmenu_off',
						'class_rollover':'mainmenu_rollover'
					},
					3:{
						'content':'Open Window',
						'content_rollover':'<a href="javascript:void window.open(\'index.html\')"><u>O</u>pen <u>W</u>indow</a>',	
						'cursor':'hand',
						'width':130, 'height':20, 'offsetTop':22,
						'class':'mainmenu_off',
						'class_rollover':'mainmenu_rollover'
					}
				}
				// End array of items
			},
			4:{
				'content':'Resources' + arrowDown,
				'content_menuopen':'<a href="index.html"><u>R</u>esources' + arrowLeft + '</a>',
				'cursor':'hand',
				'width':130, 'height':20, 'offsetLeft':132,
				'class':'mainmenu_off',
				'class_menuopen':'mainmenu_rollover',
				'tooltip':{
					'content':'Tutorials and examples',
					'classPrefix':'domTTClassic',
					'trail':true
				},

				// Begin array of items
				'items':{
					'top':20,
					'left':0,

					'background-item':{
						'width':136, 'height':136, 'left':0, 'top':2,
						'class':'container'
					},
					
					1:{
						'content':'Styles &nbsp; ' + arrowDown,
						'content_menuopen':'<u>S</u>tyles' + arrowLeft,
						'width':130, 'height':20, 'offsetLeft':3, 'offsetTop':3,
						'class':'mainmenu_off',
						'class_menuopen':'mainmenu_rollover',

						// Begin array of items
						'items':{
							'top':0,
							'left':130,

							'background-item':{
								'width':136, 'height':180, 'left':2, 'top':0,
								'class':'container'
							},

							1:{
								'content':'Windows XP',
								'content_rollover':'<a href="examples/style-winxp.html"><u>W</u>indows <u>XP</u></a>',
								'cursor':'hand',
								'width':130, 'height':20, 'offsetLeft':3, 'offsetTop':3,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							2:{
								'content':'Office XP',
								'content_rollover':'<a href="examples/style-officexp.html"><u>O</u>ffice <u>XP</u></a>',
								'cursor':'hand',
								'width':130, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							3:{
								'content':'Windows 9x',
								'content_rollover':'<a href="examples/style-win9x.html"><u>W</u>indows <u>9</u>x</a>',
								'cursor':'hand',
								'width':130, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							4:{
								'content':'MSDN',
								'content_rollover':'<a href="examples/style-msdn.html"><u>MSDN</u></a>',
								'cursor':'hand',
								'width':130, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							5:{
								'content':'MacOS X',
								'content_rollover':'<a href="examples/style-macosx.html"><u>M</u>ac<u>OS</u> <u>X</u></a>',
								'cursor':'hand',
								'width':130, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							6:{
								'content':'Other',
								'content_rollover':'<a href="examples/style-other.html"><u>O</u>ther</a>',
								'cursor':'hand',
								'width':130, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							7:{
								'content':'WebDDM Classic',
								'content_rollover':'<a href="examples/style-webddm-classic.html"><u>W</u>eb<u>DDM</u> <u>C</u>lassic</a>',
								'cursor':'hand',
								'width':130, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							8:{
								'content':'WebDDM Classic 3D',
								'content_rollover':'<a href="examples/style-webddm-classic-3d.html"><u>W</u>eb<u>DDM</u> <u>C</u>lassic <u>3D</u></a>',
								'cursor':'hand',
								'width':130, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							}
						}
						// End array of items
					},
					2:{
						'content':'Features' + arrowDown,
						'content_menuopen':'<u>F</u>eatures' + arrowLeft,
						'width':130, 'height':20, 'offsetTop':22,
						'class':'mainmenu_off',
						'class_menuopen':'mainmenu_rollover',

						// Begin array of items
						'items':{
							'top':0,
							'left':130,
							
							// Background item
							'background-item':{
								'width':138, 'height':202, 'left':2, 'top':0,
								'class':'container'
							},

							1:{
								'content':'Context Menus',
								'content_rollover':'<a href="examples/context.html"><u>C</u>ontext <u>M</u>enus</a>',
								'cursor':'hand',
								'width':132, 'height':20, 'offsetLeft':3, 'offsetTop':3,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							2:{
								'content':'Menu Behavior',
								'content_rollover':'<a href="examples/menubehavior.html"><u>M</u>enu <u>B</u>ehavior</a>',
								'cursor':'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							3:{
								'content':'Complex Styles',
								'content_rollover':'<a href="examples/complexstyles.html"><u>C</u>omplex <u>S</u>tyles</a>',
								'cursor':'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							4:{
								'content':'Relative Menu',
								'content_rollover':'<a href="examples/relative.html"><u>R</u>elative <u>M</u>enu</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							5:{
								'content':'Forms',
								'content_rollover':'<a href="examples/forms.html"><u>F</u>orms</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							6:{
								'content':'Dynamic Attributes',
								'content_rollover':'<a href="examples/dynamicattributes.html"><u>D</u>ynamic <u>A</u>ttributes</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							7:{
								'content':'Scrollable Menus',
								'content_rollover':'<a href="examples/scrollable.html"><u>S</u>crollable <u>M</u>enus</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							8:{
								'content':'Measurement Units',
								'content_rollover':'<a href="examples/measurement_units.html"><u>M</u>easurement <u>U</u>nits</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							9:{
								'content':'Other Features',
								'content_rollover':'<a href="examples/other.html"><u>O</u>ther <u>F</u>eatures</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							}
						}
						// End array of items
					},
					3:{
						'content':'Plugins' + arrowDown,
						'content_menuopen':'<u>P</u>lugins' + arrowLeft,
						'width':130, 'height':20, 'offsetTop':22,
						'class':'mainmenu_off',
						'class_menuopen':'mainmenu_rollover',

						// Begin array of items
						'items':{
							'top':0,
							'left':130,
							
							// Background item
							'background-item':{
								'width':138, 'height':158, 'left':2, 'top':0,
								'class':'container'
							},

							1:{
								'content':'Tooltips',
								'content_rollover':'<a href="examples/tooltips.html"><u>T</u>ool<u>T</u>ips</a>',
								'cursor':'hand',
								'width':132, 'height':20, 'offsetLeft':3, 'offsetTop':3,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							2:{
								'content':'Floating Menus',
								'content_rollover':'<a href="examples/float.html"><u>F</u>loating <u>M</u>enus</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							3:{
								'content':'Fading Menus',
								'content_rollover':'<a href="examples/plugin-alphatrans.html"><u>F</u>ading <u>M</u>enus</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							4:{
								'content':'Sliding Menus',
								'content_rollover':'<a href="examples/plugin-cliptrans.html"><u>S</u>liding <u>M</u>enus</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							5:{
								'content':'Auto-URL',
								'content_rollover':'<a href="examples/plugin-autourl.html"><u>A</u>uto-<u>URL</u></a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							6:{
								'content':'Import',
								'content_rollover':'<a href="examples/plugin-import.html"><u>I</u>mport</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							7:{
								'content':'Drop Shadows',
								'content_rollover':'<a href="examples/plugin-dropshadows.html"><u>D</u>rop <u>S</u>hadows</a>',
								'cursor': 'hand',
								'width':132, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							}
						}
					},
					4:{
						'content':'Tutorials' + arrowDown,
						'content_menuopen':'<u>T</u>utorials' + arrowLeft,
						'width':130, 'height':20, 'offsetTop':22,
						'class':'mainmenu_off',
						'class_menuopen':'mainmenu_rollover',
						// Begin array of items
						'items':{
							'top':0,
							'left':130,

							// Background item
							'background-item':{
								'width':152, 'height':158, 'left':2, 'top':0,
								'class':'container'
							},					
							
							1:{
								'content':'1: Basics',
								'content_rollover':'<a href="examples/tutorial-1.html"><u>1</u>: <u>B</u>asics</a>',
								'cursor':'hand',
								'width':146, 'height':20, 'offsetLeft':3, 'offsetTop':3,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							2:{
								'content':'2: Basic Menu',
								'content_rollover':'<a href="examples/tutorial-2.html"><u>2</u>: <u>B</u>asic <u>M</u>enu</a>',
								'cursor':'hand',
								'width':146, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							3:{
								'content':'3: Pretty Menu',
								'content_rollover':'<a href="examples/tutorial-3.html"><u>3</u>: <u>P</u>retty <u>M</u>enu</a>',
								'cursor':'hand',
								'width':146, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							4:{
								'content':'4: Multiple Menus',
								'content_rollover':'<a href="examples/tutorial-4.html"><u>4</u>: <u>M</u>ultiple <u>M</u>enus</a>',
								'cursor':'hand',
								'width':146, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							5:{
								'content':'5: Positioning Images',
								'content_rollover':'<a href="examples/tutorial-5.html"><u>5</u>: <u>P</u>ositioning <u>I</u>mages</a>',
								'cursor':'hand',
								'width':146, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							6:{
								'content':'6: Positioning Items',
								'content_rollover':'<a href="examples/tutorial-6.html"><u>6</u>: <u>P</u>ositioning <u>I</u>tems</a>',
								'cursor':'hand',
								'width':146, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							},
							7:{
								'content':'7: Links',
								'content_rollover':'<a href="examples/tutorial-7.html"><u>7</u>: <u>L</u>inks</a>',
								'cursor':'hand',
								'width':146, 'height':20, 'offsetTop':22,
								'class':'mainmenu_off',
								'class_rollover':'mainmenu_rollover'
							}
						} // End array of items
					},
					5:{
						'content':'Supported Browsers',
						'content_rollover':'<a href="browsers.html"><u>S</u>upported <u>B</u>rowsers</a>',
						'cursor':'hand',
						'width':130, 'height':20, 'offsetTop':22,
						'class':'mainmenu_off',
						'class_rollover':'mainmenu_rollover'
					},
					6:{
						'content':'Changelog',
						'content_rollover':'<a href="changelog.html"><u>C</u>hangelog</a>',
						'cursor':'hand',
						'width':130, 'height':20, 'offsetTop':22,
						'class':'mainmenu_off',
						'class_rollover':'mainmenu_rollover'
					}
				}
				// End array of items, item 4
			}
		}
		// End array of items
	};
	// End base menu

	// Activate and build menu
	var WebDDM_mainmenu = new WebDDM('mainmenu', menu);
}