=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js	2013-02-05 10:15:15 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/app.js	2013-02-05 14:08:23 +0000
@@ -646,7 +646,8 @@
 				}
 			});
 
-			indicator = Ext.create('Ext.panel.Panel', {
+			indicator = {
+				xtype: 'panel',
 				title: '<div class="pt-panel-title-data">Indicators</div>', //i18n
 				hideCollapseTool: true,
 				getData: function() {
@@ -748,7 +749,7 @@
 						);
 					}
 				}
-			});
+			};
 
 			dataElementAvailable = Ext.create('Ext.ux.form.MultiSelect', {
 				cls: 'pt-toolbar-multiselect-left',
@@ -829,7 +830,8 @@
 				}
 			});
 
-			dataElement = Ext.create('Ext.panel.Panel', {
+			dataElement = {
+				xtype: 'panel',
 				title: '<div class="pt-panel-title-data">Data elements</div>', //i18n
 				hideCollapseTool: true,
 				getData: function() {
@@ -931,7 +933,7 @@
 						);
 					}
 				}
-			});
+			};
 
 			dataSetAvailable = Ext.create('Ext.ux.form.MultiSelect', {
 				cls: 'pt-toolbar-multiselect-left',
@@ -1012,7 +1014,8 @@
 				}
 			});
 
-			dataSet = Ext.create('Ext.panel.Panel', {
+			dataSet = {
+				xtype: 'panel',
 				title: '<div class="pt-panel-title-data">Reporting rates</div>', //i18n
 				hideCollapseTool: true,
 				getData: function() {
@@ -1051,17 +1054,19 @@
 						);
 					}
 				}
-			});
+			};
 
-			rewind = Ext.create('Ext.form.field.Checkbox', {
+			rewind = {
+				xtype: 'checkbox',
 				paramName: 'rewind',
 				boxLabel: 'Rewind one period',
 				xable: function() {
 					this.setDisabled(pt.util.checkbox.isAllFalse());
 				}
-			});
+			};
 
-			relativePeriod = Ext.create('Ext.panel.Panel', {
+			relativePeriod = {
+				xtype: 'panel',
 				hideCollapseTool: true,
 				autoScroll: true,
 				bodyStyle: 'border:0 none',
@@ -1248,7 +1253,7 @@
 						]
 					}
 				]
-			});
+			};
 
 			fixedPeriodAvailable = Ext.create('Ext.ux.form.MultiSelect', {
 				cls: 'pt-toolbar-multiselect-left',
@@ -1333,7 +1338,8 @@
 				}
 			});
 
-			period = Ext.create('Ext.panel.Panel', {
+			period = {
+				xtype: 'panel',
 				title: '<div class="pt-panel-title-period">Periods</div>',
 				hideCollapseTool: true,
 				getData: function() {
@@ -1443,9 +1449,10 @@
 						);
 					}
 				}
-			});
+			};
 
-			organisationUnit = Ext.create('Ext.panel.Panel', {
+			organisationUnit = {
+				xtype: 'panel',
 				title: '<div class="pt-panel-title-organisationunit">Organisation units</div>', //i18n pt.i18n.organisation_units
 				hideCollapseTool: true,
 				collapsed: false,
@@ -1741,14 +1748,15 @@
 						//pt.cmp.dimension.organisationUnit.treepanel.selectRootIf();
 					}
 				}
-			});
+			};
 
-			options = Ext.create('Ext.panel.Panel', {
+			options = {
+				xtype: 'panel',
 				title: '<div class="pt-panel-title-options">Options</div>', //i18n pt.i18n.chart_options
 				hideCollapseTool: true,
 				cls: 'pt-accordion-options',
 				items: []
-			});
+			};
 
 			getOrganisationUnitGroupSetPanels = function() {
 				var	getAvailableStore,
@@ -1972,7 +1980,8 @@
 				}
 			};				
 
-			accordion = Ext.create('Ext.panel.Panel', {
+			accordion = {
+				xtype: 'panel',
 				bodyStyle: 'border-style:none; padding:3px;',
 				layout: 'fit',
 				items: [
@@ -2004,7 +2013,7 @@
 						pt.cmp.dimension.panel = this;
 					}
 				}
-			});
+			};
 
 			westRegion = Ext.create('Ext.panel.Panel', {
 				region: 'west',
@@ -2012,17 +2021,7 @@
 				collapsible: true,
 				collapseMode: 'mini',
 				width: pt.conf.layout.west_width,
-				items: accordion,
-                listeners: {
-                    collapse: function() {
-                        this.collapsed = true;
-                        pt.cmp.toolbar.resizewest.setText('>>>');
-                    },
-                    expand: function() {
-                        this.collapsed = false;
-                        pt.cmp.toolbar.resizewest.setText('<<<');
-                    }
-                }
+				items: accordion
 			});
 
 			centerRegion = Ext.create('Ext.panel.Panel', {
@@ -2035,6 +2034,16 @@
                     },
 					items: [
 						{
+							text: '<<<',
+							handler: function(b) {
+								var text = b.getText();
+								text = text === '<<<' ? '>>>' : '<<<';
+								b.setText(text);
+								
+								westRegion.toggleCollapse();
+							}
+						},								
+						{
 							text: 'Settings',
 							handler: function() {
 								if (!pt.viewport.settingsWindow) {

=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js	2013-02-05 10:13:20 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/scripts/core.js	2013-02-05 14:08:23 +0000
@@ -339,11 +339,20 @@
 	};
 
 	util.mask = {
-		showMask: function(cmp, str) {
+		showMask: function(cmp, msg) {
+			cmp = cmp || pt.viewport;
+			msg = msg || 'Loading..';
+			
 			if (pt.viewport.mask) {
 				pt.viewport.mask.destroy();
 			}
-			pt.viewport.mask = new Ext.LoadMask(cmp, {msg: str});
+			pt.viewport.mask = new Ext.create('Ext.LoadMask', cmp, {
+				id: 'pt-loadmask',
+				shadow: false,
+				msg: msg,
+				style: 'box-shadow:0',
+				bodyStyle: 'box-shadow:0'
+			});
 			pt.viewport.mask.show();
 		},
 		hideMask: function() {
@@ -908,6 +917,11 @@
 					bodyStyle: 'border:0 none',
 					defaults: {
 						baseCls: 'td'
+					},
+					listeners: {
+						resize: function(p) {
+							addTdClasses(p);
+						}
 					}
 				};
 
@@ -918,12 +932,12 @@
 				return Ext.create('Ext.panel.Panel', config);
 			};
 
-			addClasses = function() {
-				var a = document.getElementsByTagName('td');
+			addTdClasses = function(panel) {
+				var items = panel.items.items;
 
-				for (var i = 0, td, div; i < a.length; i++) {
-					td = Ext.get(a[i]);
-					div = td.child('*');
+				for (var i = 0, td, div; i < items.length; i++) {
+					div = items[i].el;
+					td = div.parent('td');
 					
 					if (div.hasCls('pivot-empty')) {
 						td.addCls('pivot-empty-body');
@@ -942,7 +956,7 @@
 					}
 					else if (div.hasCls('pivot-valuegrandtotal')) {
 						td.addCls('pivot-valuegrandtotal-body');
-					}					
+					}
 				}
 			};				
 			
@@ -950,6 +964,8 @@
 				var dimensionItems,
 					paramString;
 
+				pt.util.mask.showMask();
+
 				dimensionItems = getDimensionItemsFromSettings(settings);
 
 				paramString = getParamStringFromDimensionItems(dimensionItems);
@@ -963,36 +979,46 @@
 						'Accept': 'application/json'
 					},
 					disableCaching: false,
+					failure: function() {
+						pt.util.mask.hideMask();
+						console.log(arguments);
+						alert('Data request failed');
+					},						
 					success: function(r) {
+						var panel,
+							items = [];
+
 						if (!validateResponse(r)) {
+							pt.util.mask.hideMask();
+							console.log(r);
+							alert('Data response invalid');
 							return;
 						}
 						
 						pt.response = r;
-
+//todo
 pt.response.metaData['PT59n8BQbqM'] = '(Outreach)';
 pt.response.metaData['pq2XI5kz2BY'] = '(Fixed)';
 
 						extendResponse(dimensionItems);
-
 						pt.config = getDims();
-
 						extendRowDims(pt.config.rows);
 
-						var panel = createTablePanel(pt);
-
-						panel.add(getEmptyItem(pt));
-
-						panel.add(getColItems(pt));
-
-						panel.add(getRowItems(pt));
+						items.push(getEmptyItem(pt));						
+						items = items.concat(getColItems(pt));
+						items = items.concat(getRowItems(pt));
+						
+						panel = createTablePanel(pt);
+						panel.add(items);
 
 						if (!pt.el) {
-							container.removeAll();
+							container.removeAll(true);
 							container.add(panel);
 						}
+						
+						addTdClasses(panel);
 
-						addClasses();
+						pt.util.mask.hideMask();
 					}
 				});
 

=== modified file 'dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css'
--- dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css	2013-02-05 09:32:11 +0000
+++ dhis-2/dhis-web/dhis-web-pivot/src/main/webapp/dhis-web-pivot/app/styles/style.css	2013-02-05 14:08:23 +0000
@@ -23,6 +23,7 @@
  * Grid
  * Button
  * Tooltip
+ * LoadMask
  *
  * PT Window
  * PT Label
@@ -91,30 +92,24 @@
 	font-size: 12px;
 }
 
-.pivot-empty-body,
-td .pivot-empty-body {
+.pivot-empty-body {
 	background-color: #e6efff;
 }
 
-.pivot-dim-body,
-td .pivot-dim-body {
+.pivot-dim-body {
 	background-color: #dae6f8;
 }
-.pivot-dimtotal-body,
-td .pivot-dimtotal-body {
+.pivot-dimtotal-body {
 	background-color: #b0c4de;
 }
 
-.pivot-value-body,
-td .pivot-value-body {
+.pivot-value-body {
 	background-color: #fff;
 }
-.pivot-valuetotal-body,
-td .pivot-valuetotal-body {
+.pivot-valuetotal-body {
 	background-color: #eee;
 }
-.pivot-valuegrandtotal-body,
-td .pivot-valuegrandtotal-body {
+.pivot-valuegrandtotal-body {
 	background-color: #ccc;
 }
 
@@ -498,6 +493,26 @@
 
 
 /*----------------------------------------------------------------------------
+ * LoadMask
+ *--------------------------------------------------------------------------*/
+
+.x-mask-msg {
+	padding: 0;
+	border: 0 none;
+	background-image: none;
+	background-color: transparent;
+}
+.x-mask-msg .x-mask-loading {
+	border: 0 none;
+	background-color: #000;
+	color: #fff;
+	border-radius: 2px;
+	padding: 10px 9px 10px 25px;
+	opacity: 0.65;
+}
+
+
+/*----------------------------------------------------------------------------
  * PT Window
  *--------------------------------------------------------------------------*/