Index: trunk/web2/addons/job_monarch/js/monarch.js
===================================================================
--- trunk/web2/addons/job_monarch/js/monarch.js	(revision 594)
+++ trunk/web2/addons/job_monarch/js/monarch.js	(revision 595)
@@ -23,4 +23,7 @@
 var filterfields = [ "jid", "queue", "name", "owner" ];
 
+var graphWindowBehaviour = 'tabbed-new-window';
+var previousGraphWindow;
+
 var filterMenu = new Ext.menu.Menu(
 {
@@ -33,4 +36,5 @@
 	id:		'filtermenuknop',
 	text:		'Filters',
+	toolip:		'Click to change filter options',
 	disabled:	true,
 	menu:		filterMenu,
@@ -41,5 +45,5 @@
 			scope:	this,
 			fn:	function( myButton, event )
-				{
+				{	// immediatly show menu when button is clicked
 					myButton.menu.show( myButton.getEl() );
 				}
@@ -50,5 +54,5 @@
 function checkGraphWindowOption( item, checked )
 {
-	alert('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
+	graphWindowBehaviour	= item.id;
 }
 
@@ -58,4 +62,5 @@
 	items:
 	[{
+		id:		'new-window',
 		text:		'Each job in new window',
 		checked:	false,
@@ -63,4 +68,5 @@
 		handler:	checkGraphWindowOption
 	},{
+		id:		'tabbed-new-window',
 		text:		'Each job in a seperate tab, in new window',
 		checked:	true,
@@ -68,4 +74,5 @@
 		handler:	checkGraphWindowOption
 	},{
+		id:		'tabbed-prev-window',
 		text:		'Each job in a seperate tab, in last opened window',
 		checked:	false,
@@ -812,66 +819,53 @@
 		});
 
-NodesDataStore = new Ext.data.Store(
-{
-	id: 'NodesDataStore',
-	proxy: JobProxy,
-	autoLoad: false,
-	baseParams: { task: "GETNODES" },
-	reader: new Ext.data.JsonReader(
-	{
-		root: 'results',
-		totalProperty: 'total',
-		id: 'id'
-	},[
-		{name: 'c', type: 'string', mapping: 'c'},
-		{name: 'h', type: 'string', mapping: 'h'},
-		{name: 'x', type: 'string', mapping: 'x'},
-		{name: 'v', type: 'string', mapping: 'v'},
-		{name: 'l', type: 'string', mapping: 'l'},
-		{name: 'jr', type: 'string', mapping: 'jr'},
-		{name: 'js', type: 'string', mapping: 'js'}
-	]),
-	listeners: 
-	{
-		'beforeload': 
-		{
-			scope: this,
-			fn: 
-			
-			function() 
-			{
-				var jids;
-
-				var row_records = CheckJobs.getSelections();
-
-				for(var i=0; i<row_records.length; i++ )
-				{
-					rsel = row_records[i];
-					if( !jids )
-					{
-						jids = rsel.get('jid');
-					}
-					else
-					{
-						jids = jids + ',' + rsel.get('jid');
-					}
-				}
-				NodesDataStore.baseParams.jids	= jids;
-				NodesDataStore.baseParams.c	= myparams.c;
-			}
-		}
-	}
-});
-
-function ShowGraphs( Button, Event ) 
-{
-	var GraphView =
+function createNodesDataStore( cluster, jid )
+{
+	nodesDataStore =
+
+		new Ext.data.Store(
+		{
+			//id:		'NodesDataStore',
+			proxy:		JobProxy,
+			autoLoad:	false,
+			baseParams:
+			{
+				'task':		"GETNODES",
+				'c':		cluster,
+				'jid':		jid
+			},
+			reader: new Ext.data.JsonReader(
+			{
+				root:		'results',
+				totalProperty:	'total',
+				id:		'id'
+			},[
+				{name: 'c', type: 'string', mapping: 'c'},
+				{name: 'h', type: 'string', mapping: 'h'},
+				{name: 'x', type: 'string', mapping: 'x'},
+				{name: 'v', type: 'string', mapping: 'v'},
+				{name: 'l', type: 'string', mapping: 'l'},
+				{name: 'jr', type: 'string', mapping: 'jr'},
+				{name: 'js', type: 'string', mapping: 'js'}
+			])
+		});
+
+	return nodesDataStore;
+}
+
+function createGraphView( store, jid )
+{
+	var graphView =
 	
 		new Ext.DataView(
 		{
+			id:		jid,	
 			itemSelector:	'thumb',
+			title:		jid,
 			style:		'overflow:auto',
 			multiSelect:	true,
-			store:		NodesDataStore,
+			//autoHeight:	true,
+			autoShow:	true,
+			store:		store,
+			layout:		'fit',
 			tpl:
 			
@@ -883,20 +877,35 @@
 		});
 
-	var images = 
-
-		new Ext.Panel(
+	return graphView;
+}
+
+function createGraphPanel( view )
+{
+	var graphPanel = 
+
+		new Ext.TabPanel(
 		{
 			id:		'images',
-			//title:	'My Images',
 			region:		'center',
 			bodyStyle:	'background: transparent',
+			autoShow:	true,
+			autoHeight:	true,
 			//margins:	'2 2 2 0',
-			layout:		'fit',
-			items:		GraphView
+			//layout:	'fit',
+			resizeTabs:	true,
+			minTabWidth:	115,
+			tabWidth:	135,
+			enableTabScroll:true,
+			defaults:	{autoScroll:true}
 		});
 
-	if(!win)
-	{
-		win = new Ext.Window(
+	return graphPanel;
+}
+
+function createGraphWindow( panel, Button )
+{
+	graphWindow =
+
+		new Ext.Window(
 		{
 			animateTarget:	Button,
@@ -908,11 +917,12 @@
 			maximizable:	true,
 			title:		'Node graph details',
-			layout:		'fit',
+			//layout:		'fit',
 			tbar:	
-			
+		
+			// RB TODO: range combobox; hour, day, week, etc
+	
 			new Ext.form.ComboBox(
 			{
 				fieldLabel:	'Metric',
-				//hiddenName:	'ID',
 				store:		MetricsDataStore,
 				valueField:	'name',
@@ -921,5 +931,5 @@
 				mode:		'remote',
 				triggerAction:	'all',
-				emptyText:	'Select metric',
+				emptyText:	'load_one',
 				selectOnFocus:	true,
 				xtype:		'combo',
@@ -933,4 +943,7 @@
 						var metric = record.data.name;
 						// doe iets
+
+						// RB: misschien zo metric opgeven aan datastore?
+						//items[0].items[0].getStore().baseParams.metric = metric;
 					}
 				}
@@ -938,9 +951,75 @@
 			}),
 
-			items:	[ images ]
+			items:	[ panel ]
 		});
-	}
-	NodesDataStore.load();
-	win.show( Button );
+
+	return graphWindow;
+}
+
+function ShowGraphs( Button, Event ) 
+{
+	var row_records		= CheckJobs.getSelections();
+	var graphJids		= Array();
+	var windowCount		= 0;
+	var tabCount		= 0;
+
+	for( var i=0; i<row_records.length; i++ )
+	{
+		rsel		= row_records[i];
+		jid		= rsel.get('jid');
+
+		if( graphJids[windowCount] == undefined )
+		{
+			graphJids[windowCount]	= Array();
+		}
+
+		graphJids[windowCount][tabCount]	= jid;
+
+		if( (i+1) < row_records.length )
+		{
+			if( graphWindowBehaviour == 'new-window' )
+			{
+				windowCount++;
+			}
+			else
+			{
+				tabCount++;
+			}
+		}
+	}
+
+	for( var w=0; w<=windowCount; w++ )
+	{
+		if( graphWindowBehaviour == 'tabbed-prev-window' )
+		{
+			myWindow	= previousGraphWindow;
+			myPanel		= previousGraphPanel;
+		}
+		else
+		{
+			myPanel		= createGraphPanel();
+			myWindow	= createGraphWindow( myPanel, Button );
+
+			myWindow.add( myPanel );
+		}
+
+		for( var t=0; t<=tabCount; t++ )
+		{
+			nodeDatastore	= createNodesDataStore( myparams.c, graphJids[w][t] );
+			graphView	= createGraphView( nodeDatastore, graphJids[w][t] );
+			lastView	= myPanel.add( graphView );
+
+			nodeDatastore.load();
+			myPanel.setActiveTab( lastView );
+		}
+
+		myWindow.show( Button );
+
+		myPanel.doLayout();
+		myWindow.doLayout();
+
+		previousGraphWindow	= myWindow;
+		previousGraphPanel	= myPanel;
+	}
 }
 
