diff --git a/static/welcome.html b/static/welcome.html
index 8f8ebf1cc87..bef038af45d 100644
--- a/static/welcome.html
+++ b/static/welcome.html
@@ -13,6 +13,7 @@
          <meta name="generator" content="Docutils 0.6: http://docutils.sourceforge.net/"/>
          <script src="http://www.apple.com/library/quicktime/scripts/ac_quicktime.js" language="JavaScript" type="text/javascript"></script>
          <script src="http://www.apple.com/library/quicktime/scripts/qtp_library.js" language="JavaScript" type="text/javascript"></script>
+	 <script src="scripts/jquery.js" language="JavaScript" type="text/javascript"></script>
          <link href="http://www.apple.com/library/quicktime/stylesheets/qtp_library.css" rel="StyleSheet" type="text/css" />
          <link rel="stylesheet" href="style/base.css" type="text/css" />
     </head>
@@ -39,21 +40,41 @@
                     <td valign="middle" align="center">
                     
                     <br>
-                    <script type="text/javascript"><!--
-    	                   QT_WritePoster_XHTML('click to play', 'http://screencast.g2.bx.psu.edu/galaxy/quickie2_Grouping/quickie2_Grouping-poster.jpg',
-    	                                       	'http://screencast.g2.bx.psu.edu/galaxy/quickie2_Grouping/quickie2_Grouping.mov',
-                                        		'640', '480', '',
-                                         		'controller', 'true',
-                                        		'autoplay', 'true',
-                                        		'bgcolor', '#CCCCFF',
-                                        		'scale', 'aspect');
-                                                //-->
-    
-                    </script>
+		  
+		    <div style="background: black; width: 100%; height: 300px; text-align: center;">
+			<div style="margin: auto;">
+			<div style="padding: 50px 0; color: white; font-size: 300%;">Galaxy quickie</div>
+			<div><span class="playButton" onclick="showmovie()">click to play</span></div>
+			<div style="padding: 50px 0; font-size: 200%; color: orange;">Grouping</div>
+			</div>
+		    </div>
+
+		    <script type="text/javascript">
+			function showmovie() {
+			      if ( parent.show_modal ) {
+				    console.log( $( "#movie" ).html() );
+				    parent.show_modal( "Galaxy quickie", $( "#movie" ).html(), { "close" : parent.hide_modal }, {} );
+			      }
+			}
+		    </script>
+
+		    <div style="display: none;">
+			<div id="movie">
+			<div style="width: 640px; height: 480px;">
+                        <object width="640" height="480" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
+                          	<param name="src" value="http://screencast.g2.bx.psu.edu/galaxy/quickie2_Grouping/quickie2_Grouping.mov" />
+                          	<param name="target" value="myself" />
+                          	<param name="controller" value="true" />
+                          	<param name="autoplay" value="true" />
+                          	<param name="scale" value="aspect" />
+                        </object>
+			</div>
+			</div>
+		    </div>
+
                     <noscript>
                         <object width="640" height="480" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
-                          	<param name="src" value="http://screencast.g2.bx.psu.edu/galaxy/quickie2_Grouping/quickie2_Grouping.jpg" />
-                          	<param name="href" value="http://screencast.g2.bx.psu.edu/galaxy/quickie2_Grouping/quickie2_Grouping.mov" />
+                          	<param name="src" value="http://screencast.g2.bx.psu.edu/galaxy/quickie2_Grouping/quickie2_Grouping.mov" />
                           	<param name="target" value="myself" />
                           	<param name="controller" value="false" />
                           	<param name="autoplay" value="false" />
diff --git a/templates/base_panels.mako b/templates/base_panels.mako
index a5e2c719608..47aebbd9359 100644
--- a/templates/base_panels.mako
+++ b/templates/base_panels.mako
@@ -5,6 +5,7 @@
     self.has_left_panel=True
     self.has_right_panel=True
     self.message_box_visible=False
+    self.overlay_visible=False
     self.message_box_class=""
     self.active_view=None
 %>
@@ -190,6 +191,38 @@
     
 </%def>
 
+<%def name="overlay( title='', content='' )">
+    <%def name="title()"></%def>
+    <%def name="content()"></%def>
+
+    <div id="overlay"
+    %if not self.overlay_visible:
+	style="display: none;"
+    %endif
+    >
+	## Need a table here for centering in IE6
+	<table class="dialog-box-container" border="0" cellpadding="0" cellspacing="0"
+	%if not self.overlay_visible:
+	    style="display: none;"
+	%endif
+	><tr><td>
+	<div class="dialog-box-wrapper">
+	    <div class="dialog-box">
+		<div class="unified-panel-header">
+		    <div class="unified-panel-header-inner"><span class='title'>${title}</span></div>
+		</div>
+		<div class="body" style="max-height: 600px; overflow: auto;">${content}</div>
+		<div>
+		    <div class="buttons" style="display: none; float: right;"></div>
+		    <div class="extra_buttons" style="display: none; padding: 5px;"></div>
+		    <div style="clear: both;"></div>
+		</div>
+	    </div>
+	</div>
+	</td></tr></table>
+    </div>
+</%def>
+
 ## Messagebox
 <%def name="message_box_content()">
 </%def>
@@ -217,6 +250,7 @@
                 ${self.message_box_content()}
             %endif
         </div>
+	${self.overlay()}
         %if self.has_left_panel:
             <div id="left">
                 ${self.left_panel()}
diff --git a/templates/workflow/editor.mako b/templates/workflow/editor.mako
index 30e8259383d..06f484aa1b8 100644
--- a/templates/workflow/editor.mako
+++ b/templates/workflow/editor.mako
@@ -5,6 +5,7 @@
     self.active_view="workflow"
     self.message_box_visible=True
     self.message_box_class="warning"
+    self.overlay_visible=True
 %>
 </%def>
 
@@ -536,24 +537,10 @@
     <div class="toolSectionPad"></div>
 </%def>
 
-<div id="overlay">
-    ## Need a table here for centering in IE6
-    <table class="dialog-box-container" border="0" cellpadding="0" cellspacing="0"><tr><td>
-    <div class="dialog-box-wrapper">
-        <div class="dialog-box">
-            <div class="unified-panel-header">
-                <div class="unified-panel-header-inner"><span class='title'>Loading workflow editor...</span></div>
-            </div>
-            <div class="body" style="max-height: 500px; overflow: auto;"><img src="${h.url_for('/static/images/yui/rel_interstitial_loading.gif')}" /></div>
-            <div>
-                <div class="buttons" style="display: none; float: right;"></div>
-                <div class="extra_buttons" style="display: none; padding: 5px;"></div>
-                <div style="clear: both;"></div>
-            </div>
-        </div>
-    </div>
-    </td></tr></table>
-</div>
+<%def name="overlay()">
+    ${parent.overlay( "Loading workflow editor...",
+                      "<img src='" + h.url_for('/static/images/yui/rel_interstitial_loading.gif') + "'/>" )}
+</%def>
 
 <%def name="left_panel()">
     <div class="unified-panel-header" unselectable="on">