Index: /trunk/web/addons/job_monarch/js/monarch.js
===================================================================
--- /trunk/web/addons/job_monarch/js/monarch.js	(revision 630)
+++ /trunk/web/addons/job_monarch/js/monarch.js	(revision 631)
@@ -950,4 +950,11 @@
 function createGraphPanel( view )
 {
+	var scrollerMenu = new Ext.ux.TabScrollerMenu(
+	{
+		maxText  : 15,
+		pageSize : 5
+	});
+
+
 	var graphPanel = 
 
@@ -955,18 +962,16 @@
 		{
 			id:		'tabPanel',
-			region:		'center',
+			//region:		'center',
 			//bodyStyle:	'background: transparent',
 			autoShow:	true,
 			//autoHeight:	true,
-			autoWidth:	true,
-			//autoScroll:	true,
-			//resizeTabs:	true,
+			//autoWidth:	true,
+			enableTabScroll:true,
+			resizeTabs:	true,
+			border:		false,
 			bodyStyle:	'overflow:auto; background: transparent; heigth: auto',
-			//bodyStyle:	'overflow:auto; background: transparent',
-			//bodyBorder:	false,
 			minTabWidth:	60,
-			//tabWidth:	135,
-			enableTabScroll:true,
-			//resizeTabs:	false,
+			plugins:	[ scrollerMenu ],
+
 			// RB TODO: range combobox; hour, day, week, etc
 
@@ -1023,8 +1028,10 @@
 			animCollapse:	true,
 			maximizable:	true,
+			layout:		'fit',
 			//autoScroll:	true,
 			//defaults:	{autoScroll:true},
 			title:		'Node graph details',
-			tbar:		panel,
+			//tbar:		panel,
+			items:		panel,
 		
 			listeners:
Index: /trunk/web/addons/job_monarch/lib/extjs-30/ProgressBarPager.js
===================================================================
--- /trunk/web/addons/job_monarch/lib/extjs-30/ProgressBarPager.js	(revision 631)
+++ /trunk/web/addons/job_monarch/lib/extjs-30/ProgressBarPager.js	(revision 631)
@@ -0,0 +1,121 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+* @class Ext.ux.ProgressBarPager
+* @extends Object 
+* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
+* 
+* @ptype progressbarpager 
+* @constructor
+* Create a new ItemSelector
+* @param {Object} config Configuration options
+* @xtype itemselector 
+*/
+Ext.ux.ProgressBarPager  = Ext.extend(Object, {
+	/**
+ 	* @cfg {Integer} progBarWidth
+ 	* <p>The default progress bar width.  Default is 225.</p>
+	*/
+	progBarWidth   : 225,
+	/**
+ 	* @cfg {String} defaultText
+	* <p>The text to display while the store is loading.  Default is 'Loading...'</p>
+ 	*/
+	defaultText    : 'Loading...',
+    	/**
+ 	* @cfg {Object} defaultAnimCfg 
+ 	* <p>A {@link Ext.Fx Ext.Fx} configuration object.  Default is  { duration : 1, easing : 'bounceOut' }.</p>
+ 	*/
+	defaultAnimCfg : {
+		duration   : 1,
+		easing     : 'bounceOut'	
+	},												  
+	constructor : function(config) {
+		if (config) {
+			Ext.apply(this, config);
+		}
+	},
+	//public
+	init : function (parent) {
+		
+		if(parent.displayInfo){
+			this.parent = parent;
+			var ind  = parent.items.indexOf(parent.displayItem);
+			parent.remove(parent.displayItem, true);
+			this.progressBar = new Ext.ProgressBar({
+				text    : this.defaultText,
+				width   : this.progBarWidth,
+				animate :  this.defaultAnimCfg
+			});					
+		   
+			parent.displayItem = this.progressBar;
+			
+			parent.add(parent.displayItem);	
+			parent.doLayout();
+			Ext.apply(parent, this.parentOverrides);		
+			
+			this.progressBar.on('render', function(pb) {
+				pb.el.applyStyles('cursor:pointer');
+
+				pb.el.on('click', this.handleProgressBarClick, this);
+			}, this);
+			
+		
+			// Remove the click handler from the 
+			this.progressBar.on({
+				scope         : this,
+				beforeDestroy : function() {
+					this.progressBar.el.un('click', this.handleProgressBarClick, this);	
+				}
+			});	
+						
+		}
+		  
+	},
+	// private
+	// This method handles the click for the progress bar
+	handleProgressBarClick : function(e){
+		var parent = this.parent;
+		var displayItem = parent.displayItem;
+		
+		var box = this.progressBar.getBox();
+		var xy = e.getXY();
+		var position = xy[0]-box.x;
+		var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);
+		
+		var newpage = Math.ceil(position/(displayItem.width/pages));
+		parent.changePage(newpage);
+	},
+	
+	// private, overriddes
+	parentOverrides  : {
+		// private
+		// This method updates the information via the progress bar.
+		updateInfo : function(){
+			if(this.displayItem){
+				var count   = this.store.getCount();
+				var pgData  = this.getPageData();
+				var pageNum = this.readPage(pgData);
+				
+				var msg    = count == 0 ?
+					this.emptyMsg :
+					String.format(
+						this.displayMsg,
+						this.cursor+1, this.cursor+count, this.store.getTotalCount()
+					);
+					
+				pageNum = pgData.activePage; ;	
+				
+				var pct	= pageNum / pgData.pages;	
+				
+				this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
+			}
+		}
+	}
+});
+Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
+
Index: /trunk/web/addons/job_monarch/lib/extjs-30/TabScrollerMenu.js
===================================================================
--- /trunk/web/addons/job_monarch/lib/extjs-30/TabScrollerMenu.js	(revision 631)
+++ /trunk/web/addons/job_monarch/lib/extjs-30/TabScrollerMenu.js	(revision 631)
@@ -0,0 +1,185 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+
+
+Ext.ux.TabScrollerMenu =  Ext.extend(Object, {
+	pageSize       : 10,
+	maxText        : 15,
+	menuPrefixText : 'Items',
+	constructor    : function(config) {
+		config = config || {};
+		Ext.apply(this, config);
+	},
+	init : function(tabPanel) {
+		Ext.apply(tabPanel, this.tabPanelMethods);
+		
+		tabPanel.tabScrollerMenu = this;
+		var thisRef = this;
+		
+		tabPanel.on({
+			render : {
+				scope  : tabPanel,
+				single : true,
+				fn     : function() { 
+					var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
+					tabPanel.createScrollers = newFn;
+				}
+			}
+		});
+	},
+	// private && sequeneced
+	createPanelsMenu : function() {
+		var h = this.stripWrap.dom.offsetHeight;
+		
+		//move the right menu item to the left 18px
+		var rtScrBtn = this.header.dom.firstChild;
+		Ext.fly(rtScrBtn).applyStyles({
+			right : '18px'
+		});
+		
+		var stripWrap = Ext.get(this.strip.dom.parentNode);
+		stripWrap.applyStyles({
+			 'margin-right' : '36px'
+		});
+		
+		// Add the new righthand menu
+		var scrollMenu = this.header.insertFirst({
+			cls:'x-tab-tabmenu-right'
+		});
+		scrollMenu.setHeight(h);
+		scrollMenu.addClassOnOver('x-tab-tabmenu-over');
+		scrollMenu.on('click', this.showTabsMenu, this);	
+		
+		this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
+			scrollMenu.show();												 						 
+		});
+		
+		this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
+			scrollMenu.hide();								
+		});
+		
+	},
+	// public
+	getPageSize : function() {
+		return this.pageSize;
+	},
+	// public
+	setPageSize : function(pageSize) {
+		this.pageSize = pageSize;
+	},
+	// public
+	getMaxText : function() {
+		return this.maxText;
+	},
+	// public
+	setMaxText : function(t) {
+		this.maxText = t;
+	},
+	getMenuPrefixText : function() {
+		return this.menuPrefixText;
+	},
+	setMenuPrefixText : function(t) {
+		this.menuPrefixText = t;
+	},
+	// private && applied to the tab panel itself.
+	tabPanelMethods : {
+		// all execute within the scope of the tab panel
+		// private	
+		showTabsMenu : function(e) {		
+			if (! this.tabsMenu) {
+				this.tabsMenu =  new Ext.menu.Menu();
+				this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu);
+			}
+			
+			this.tabsMenu.removeAll();
+			
+			this.generateTabMenuItems();
+			
+			var target = Ext.get(e.getTarget());
+			var xy     = target.getXY();
+			
+			//Y param + 24 pixels
+			xy[1] += 24;
+			
+			this.tabsMenu.showAt(xy);
+		},
+		// private	
+		generateTabMenuItems : function() {
+			var curActive  = this.getActiveTab();
+			var totalItems = this.items.getCount();
+			var pageSize   = this.tabScrollerMenu.getPageSize();
+			
+			
+			if (totalItems > pageSize)  {
+				var numSubMenus = Math.floor(totalItems / pageSize);
+				var remainder   = totalItems % pageSize;
+				
+				// Loop through all of the items and create submenus in chunks of 10
+				for (var i = 0 ; i < numSubMenus; i++) {
+					var curPage = (i + 1) * pageSize;
+					var menuItems = [];
+					
+					
+					for (var x = 0; x < pageSize; x++) {				
+						index = x + curPage - pageSize;
+						var item = this.items.get(index);
+						menuItems.push(this.autoGenMenuItem(item));
+					}
+					
+					this.tabsMenu.add({
+						text : this.tabScrollerMenu.getMenuPrefixText() + ' '  + (curPage - pageSize + 1) + ' - ' + curPage,
+						menu : menuItems
+					});
+					
+				}
+				// remaining items
+				if (remainder > 0) {
+					var start = numSubMenus * pageSize;
+					menuItems = [];
+					for (var i = start ; i < totalItems; i ++ ) {					
+						var item = this.items.get(i);
+						menuItems.push(this.autoGenMenuItem(item));
+					}
+					
+					
+					this.tabsMenu.add({
+						text : this.tabScrollerMenu.menuPrefixText  + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
+						menu : menuItems
+					});
+					
+
+				}
+			}
+			else {
+				this.items.each(function(item) {
+					if (item.id != curActive.id && ! item.hidden) {
+						menuItems.push(this.autoGenMenuItem(item));
+					}
+				}, this);
+			}	
+		},
+		// private
+		autoGenMenuItem : function(item) {
+			var maxText = this.tabScrollerMenu.getMaxText();
+			var text    = Ext.util.Format.ellipsis(item.title, maxText);
+			
+			return {
+				text      : text,
+				handler   : this.showTabFromMenu,
+				scope     : this,
+				disabled  : item.disabled,
+				tabToShow : item,
+				iconCls   : item.iconCls
+			}
+		
+		},
+		// private
+		showTabFromMenu : function(menuItem) {
+			this.setActiveTab(menuItem.tabToShow);
+		}	
+	}	
+});
Index: /trunk/web/addons/job_monarch/lib/extjs-30/tab-scroller-menu.css
===================================================================
--- /trunk/web/addons/job_monarch/lib/extjs-30/tab-scroller-menu.css	(revision 631)
+++ /trunk/web/addons/job_monarch/lib/extjs-30/tab-scroller-menu.css	(revision 631)
@@ -0,0 +1,30 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+.x-tab-scroller-right-over {
+    background-position: -18px 0;
+}
+
+.x-tab-tabmenu-right {
+    background: transparent url(tab-scroller-menu.gif) no-repeat 0 0;
+    border-bottom: 1px solid #8db2e3;
+    width:18px;
+    position:absolute;
+    right:0;
+    top:0;
+    z-index:10;
+    cursor:pointer;
+}
+.x-tab-tabmenu-over {
+    background-position: -18px 0;
+}
+.x-tab-tabmenu-disabled {
+    background-position: 0 0;
+    opacity:.5;
+    -moz-opacity:.5;
+    filter:alpha(opacity=50);
+    cursor:default;
+}
Index: /trunk/web/addons/job_monarch/templates/header.tpl
===================================================================
--- /trunk/web/addons/job_monarch/templates/header.tpl	(revision 630)
+++ /trunk/web/addons/job_monarch/templates/header.tpl	(revision 631)
@@ -13,4 +13,5 @@
 <link rel="stylesheet" type="text/css" href="./lib/extjs/resources/css/ext-all.css" />
 <link rel="stylesheet" type="text/css" href="./css/styles.css" />
+<link rel="stylesheet" type="text/css" href="./lib/extjs/tab-scroller-menu.css" />
 
 <script type="text/javascript" src="./lib/extjs/adapter/ext/ext-base.js"></script>
@@ -23,4 +24,5 @@
 <script type="text/javascript" src="./lib/extjs/StatusBar.js"></script>
 <script type="text/javascript" src="./lib/extjs/ProgressBarPager.js"></script>
+<script type="text/javascript" src="./lib/extjs/TabScrollerMenu.js"></script>
 <script type="text/javascript" src="./js/monarch.js"></script>
 <script type="text/javascript">
