$(function() {
	({
		//Menu items in hierarchical structure.
		//If 'items' are provided for an item, it becomes a submenu.
		//Non-submenus should have a page defined.
		nav_bar_items: [
			{
				label: "Home",
				page: "index.html"
			}, {
				label: "Artists",
				page: "artists.cgi"
			}, {
				label: "Exhibitions",
				page: "exhibitions.cgi"
			}, {
				label: "Video Library",
				page: "videos.html"
			},
			{
				label: "Information",
				items:[
					{
						label: "Hours & Directions",
						page: "directions.html"
					}, {
						label: "Artist Submissions",
						page: "submissions.html"
					}, {
						label: "Press",
						page: "media_1.html"
					}
				]
			}, {
				label: "About Us",
				items: [
					{
						label: "The Gallery",
						page: "about.html"
					}, {
						label: "Public Installations",
						page: "public_installations.html"
					}
				]
			}, {
				label: "Contact",
				page: "contact.html"
			}
		],
		//URL configuration (no ending slashes)
		urlRoot: "http://www.pryorfineart.com",
		cgiBase: "cgi-bin",

		navColors: {
			text: "#A49787",
			hover: "#66a2cc",
			click: "#000000",
			separator: "#66a2cc"
		},

		getPageURL: function(page) {
			var url_parts = [page];
			//Check for CGI
			if(page.substr(page.length - 'cgi'.length).toLowerCase() === 'cgi') {
				url_parts.unshift(this.cgiBase);
			}
			url_parts.unshift(this.urlRoot);
			return url_parts.join('/');
		},
		
		setupContainer: function() {
			var parent = $('#NavParent').first();
			if(parent) {
				return $('<div />').css({position:'relative',marginTop:10, width:500}).appendTo(parent);
			} else {
				return $('body');
			}
		},

		makeNavSeparator: function() {
			var sep = $('<div></div>').
				css({
					cssFloat: 'left',
					backgroundColor: this.navColors.separator,
					paddingLeft: 2,
					paddingTop:16,
					paddingBottom:8,
					fontSize: 0,
					marginLeft: 8,
					marginRight: 8
				}).
				addClass('navsep');
			return sep;
		},

		maxLevel: 0,

		//Recursively build the menu items
		makeMenuTopLevel: function(container, items, level) {			
			var NavMenu = this;
			//Update max level
			NavMenu.maxLevel = Math.max(level, NavMenu.maxLevel);
			var count = items.length;
			$.each(items, function(i, item) {
				var link;
				if(item.page) { //has page link
					link = $('<a style="text-transform:none" href = "' + NavMenu.getPageURL(item.page)+ '"></a>');
				} else { //no page link
					link = $('<a style="text-transform:none" href = "" onclick="return false;"></a>');
				}
				link.text(item.label);
				link.css({
					cssFloat: 'left',
					fontFamily: 'Arial',
					color: NavMenu.navColors.text,
					fontSize: 13,
					marginTop: 4
				});

				link.hover(function() {
						link.css('color', NavMenu.navColors.hover);
					},
					function() {
						link.css('color', NavMenu.navColors.text);
					}
				);

				container.append(link);

				if(item.items) { //make submenu
					var submenubox = $('<div />');
					submenubox.css({position:'absolute',top:30, width:500});
					container.append(submenubox);
					NavMenu.makeMenuTopLevel(submenubox, item.items, level+1);
					var linkCenterX = link.position().left + link.outerWidth(true)/2;
					var w = submenubox.outerWidth(true);
					submenubox.css({
						display: 'none',
						left: linkCenterX - w/2
					});
					submenubox.addClass('submenu_level_'+level);
					link.mouseenter(function() { //Hide all submenus above or at this level
						for(var i = level; i <= NavMenu.maxLevel; i++) {
							$('.submenu_level_'+i).css('display', 'none');
						}
						submenubox.css('display', 'block');
					});
				} else {
					link.mouseenter(function() {//Hide all submenus above or at this level
						for(var i = level; i <= NavMenu.maxLevel; i++) {
							$('.submenu_level_'+i).css('display', 'none');
						}
					});
				}

				//Add separator
				var sep = NavMenu.makeNavSeparator();
				container.append(sep);
			});
			//remove last separator
			container.children('.navsep:last').remove();
			//Add up container widths
			if(level > 0) {
				var totalWidth = 0;
				container.children().each(function(){
					totalWidth += $(this).outerWidth(true);
				});
				container.width(totalWidth);
			}
		},

		makeNavBar: function() {
			//Get the container to put the nav bar into
			var container = this.setupContainer();
			$("#nav_nojs").remove(); //remove non-js nav bar

			this.makeMenuTopLevel(container, this.nav_bar_items, 0);
		}
	}).makeNavBar();
});