Index: Resources/Public/JavaScript/preview.js
===================================================================
--- Resources/Public/JavaScript/preview.js	(revision 3534)
+++ Resources/Public/JavaScript/preview.js	(working copy)
@@ -32,6 +32,36 @@
 			region: 'center', // a center region is ALWAYS required for border layout
 			id: 'preview',
 			activeTab: 0,
+		tbar: [
+			{
+				text: 'Preview mode',
+				menu: [{
+					text: 'Slider',
+					handler: function(){
+						Ext.getCmp('visualPanel-hbox').hide();
+						Ext.getCmp('visualPanel-vbox').hide();
+						Ext.getCmp('visualPanel').show();
+						Ext.getCmp('controls').show();
+					}
+				},{
+					text: 'Horizontal',
+					handler: function(){
+						Ext.getCmp('visualPanel-hbox').show();
+						Ext.getCmp('visualPanel-vbox').hide();
+						Ext.getCmp('visualPanel').hide();
+						Ext.getCmp('controls').hide();
+					}
+				},{
+					text: 'Vertical',
+					handler: function() {
+						Ext.getCmp('visualPanel-hbox').hide();
+						Ext.getCmp('visualPanel-vbox').show();
+						Ext.getCmp('visualPanel').hide();
+						Ext.getCmp('controls').hide();
+					}
+				}]
+			}
+		],
 			plugins : [{
 				ptype : 'Ext.ux.plugins.TabStripContainer',
 				id: 'controls',
@@ -88,13 +118,13 @@
 				id: 'wsVisual',
 				layout: 'fit',
 				items: [{
-					layout: 'fit',
-					x: 0, y:0,
-					anchor: '100% 100%',
+					layout: 'absolute',
 					autoScroll: true,
 					items: [{
 						layout: 'absolute',
+						anchor: '100% 100%',
 						id: 'visualPanel',
+						hidden: false,
 						items: [{
 							x: 0, y:0,
 							anchor: '100% 100%',
@@ -125,6 +155,62 @@
 								autoScroll: false
 							}]
 						}]
+					},{
+							layout: 'hbox',
+							hidden: true,
+							x: 0, y:0,
+							anchor: '100% 100%',
+							bodyStyle: 'border: 1px solid red;',
+							layoutConfig: {
+								align : 'stretch',
+								pack  : 'start'
+							},
+							id: 'visualPanel-hbox',
+							items: [{
+								xtype: 'iframePanel',
+								x: 0, y:0,
+								id: 'wsPanel-hbox',
+								doMask: false,
+								src: wsUrl,
+								autoScroll: false,
+								flex: 1
+							},{
+								xtype: 'iframePanel',
+								x: 0, y:0,
+								id: 'livePanel-hbox',
+								doMask: false,
+								src: liveUrl,
+								autoScroll: false,
+								flex: 1
+							}]
+					},{
+							layout: 'vbox',
+							hidden: true,
+							x: 0, y:0,
+							anchor: '100% 100%',
+							bodyStyle: 'border: 1px solid red;',
+							layoutConfig: {
+								align : 'stretch',
+								pack  : 'start'
+							},
+							id: 'visualPanel-vbox',
+							items: [{
+								xtype: 'iframePanel',
+								x: 0, y:0,
+								id: 'wsPanel-vbox',
+								doMask: false,
+								src: wsUrl,
+								autoScroll: false,
+								flex: 1
+							},{
+								xtype: 'iframePanel',
+								x: 0, y:0,
+								id: 'livePanel-vbox',
+								doMask: false,
+								src: liveUrl,
+								autoScroll: false,
+								flex: 1
+							}]
 					}]
 				}]
 			},{