/*
Ext.ux.abz.MenubarBuilder
***************************************************************************************************/

Ext.namespace("Ext.ux", "Ext.ux.abz");



Ext.ux.abz.MenubarBuilder = function(config) {
	
	// Set defaults
	Ext.apply(this, {
			url: "menu.html",
			temp: "menu-content-container",
			separator: false,		// Separators between the menu buttons?
			splitButtons: false,	// Use splitbuttons instead of normal toolbar buttons
			barConfigs: [],			// Add extra configuration options to specific menus
			minSubmenuWidth: 150
		});
	
	Ext.apply(this, config);

	Ext.ux.abz.MenubarBuilder.superclass.constructor.call(this, config);
};


Ext.extend(Ext.ux.abz.MenubarBuilder, Ext.util.Observable, {
		
		menubars: [],
		
		loadContent: function(url) {
				url = (url) ? url : this.url;
				var updater = Ext.get(this.temp).getUpdater();
				updater.update({
						url: url, 
						callback: this.contentLoaded,
						scope: this,
						nocache: false,
						text: "Ophalen menu's"
					});
			},

		contentLoaded: function(el, success, response, options) {	
				if (success) {
					var menus = Ext.query(".menu-content");
					for (var i = 0; i < menus.length; i++) {
						var menu = menus[i];
						var menuId = menu.id.split("-content")[0];
						if (Ext.get(menuId)) {
							this.menubars[menuId] = this.buildFromSource(menuId, menu);
						} else {
						}
					}
				} else {
					
				}
			},
			
			
		buildFromSource: function(id, content) {

			// console.log("\nMenubar: \"" + id + "\"");
			var menubar = new Ext.ux.abz.Menubar({container: id});
			menubar.init();
			var clickHandler = menubar.showUrl;
			
			if (content) {
				
				content = Ext.get(content);
				
				if (this.separators) {
					menubar.addSeparator();
				}

				content.select(">li").each( function(item, index, allItems) {
			
					// Set current item properties
					var link = item.child("a:first", true);
					var buttonProperties = {
					  text: link.innerHTML,
					  id: link.id,
					  href: link.href,
					  cls: link.className
					};
					if (this.barConfigs[id]) {													
						Ext.apply(buttonProperties, this.barConfigs[id]);	
					}

					// Check for submenu
					var s = item.select(">ul");
					if (s.elements.length) {
						buttonProperties.menu = {minWidth: 170, items: this.buildSubmenu(item.select(">ul").first(), clickHandler)};
						if (this.splitButtons) {
							buttonProperties = new Ext.Toolbar.MenuButton(buttonProperties);
						}
					} else {
						buttonProperties.handler = clickHandler;
					}
					menubar.add(buttonProperties);
					if (this.separators) {
						menubar.addSeparator();
					}
					
				}, this);
			
				content.remove();
			}

			return menubar;
		},
	
		buildSubmenu: function (e, clickHandler) {
			// console.log("Start building submenus");
			var items = [ ];
			Ext.get(e).select(">li").each( function(item, index, allItems) {
					var link = item.child("a:first", true);
					var currentItem = null;
		
					if (!link) {
						currentItem = {
								text: item.innerHTML,
								canActivate: false,
								cls: "menu-separator"
							};
						items.push(currentItem);	
					} else {
						currentItem = {
								text: link.innerHTML,
								id: link.id,
								href: link.href,
								handler: clickHandler,
								cls: link.className
							};
						
						// Check for sub menu.
						var s = item.select(">ul");
						if (s.elements.length) {
							currentItem.menu = { minWidth: 170, items: this.buildSubmenu(s.item(0), clickHandler)};
						}
						
						// Add the item to the list, if it is not yet there (check for Safari)
						if (!link.inMenu) {
							items.push(currentItem);
							link.inMenu = true;
						}
					}
				}, this);

				return items;
		}
		   
	});



/*
Ext.ux.abz.Menubar
***************************************************************************************************/

Ext.ux.abz.Menubar = function(config) {
		Ext.apply(this, config);
		this.activeButton = null;
		Ext.ux.abz.Menubar.superclass.constructor.call(this, config);
	};


Ext.extend(Ext.ux.abz.Menubar, Ext.Toolbar, {
		init: function() {
			this.render(this.container);
			},
		showUrl: function() {
			location.href = this.href;
			return true;
		}
	});

/**************************************************************************************************/