[hg] galaxy 1479: Internet explorer fixes and support -- popup m...

classic Classic list List threaded Threaded
1 message Options
| Threaded
Open this post in threaded view
|

[hg] galaxy 1479: Internet explorer fixes and support -- popup m...

greg
details:   http://www.bx.psu.edu/hg/galaxy/rev/b671c301674a
changeset: 1479:b671c301674a
user:      James Taylor <[hidden email]>
date:      Fri Aug 22 17:47:43 2008 -0400
description:
Internet explorer fixes and support -- popup menus and dialogs work better on IE6+,
workflow editor works on IE7 (using excanvas). It actually *nearly* works on IE6 but
there are some layout problems that are probably not worth wasting time on. If any IE
users can test this that would be great!

13 file(s) affected in this change:

static/june_2007_style/base.css.tmpl
static/june_2007_style/blue/base.css
static/june_2007_style/blue/panel_layout.css
static/june_2007_style/panel_layout.css.tmpl
static/scripts/galaxy.base.js
static/scripts/galaxy.panels.js
static/scripts/galaxy.ui.scrollPanel.js
static/scripts/galaxy.workflow_editor.canvas.js
static/scripts/packed/galaxy.base.js
static/scripts/packed/galaxy.panels.js
static/scripts/packed/galaxy.workflow_editor.canvas.js
templates/workflow/editor.mako
templates/workflow/index.mako

diffs (648 lines):

diff -r 6eac08f7edcf -r b671c301674a static/june_2007_style/base.css.tmpl
--- a/static/june_2007_style/base.css.tmpl Fri Aug 22 17:44:32 2008 -0400
+++ b/static/june_2007_style/base.css.tmpl Fri Aug 22 17:47:43 2008 -0400
@@ -358,7 +358,7 @@
     font-weight: bold;
     display: inline-block;
     cursor: pointer;
-    margin: -1px; padding: 2px;
+    padding: 2px;
     border: solid #aaaaaa 1px;
     padding-right: 0.5em;
     padding-left: 0.5em;
diff -r 6eac08f7edcf -r b671c301674a static/june_2007_style/blue/base.css
--- a/static/june_2007_style/blue/base.css Fri Aug 22 17:44:32 2008 -0400
+++ b/static/june_2007_style/blue/base.css Fri Aug 22 17:47:43 2008 -0400
@@ -356,7 +356,7 @@
     font-weight: bold;
     display: inline-block;
     cursor: pointer;
-    margin: -1px; padding: 2px;
+    padding: 2px;
     border: solid #aaaaaa 1px;
     padding-right: 0.5em;
     padding-left: 0.5em;
diff -r 6eac08f7edcf -r b671c301674a static/june_2007_style/blue/panel_layout.css
--- a/static/june_2007_style/blue/panel_layout.css Fri Aug 22 17:44:32 2008 -0400
+++ b/static/june_2007_style/blue/panel_layout.css Fri Aug 22 17:47:43 2008 -0400
@@ -244,14 +244,6 @@
     top: 0; left: 0; width: 100%; height: 100%;
     z-index: 20000;
 }
-#overlay-inner {
-    width: 100%; height: 100%;
-    background-color:#FFF;
-    filter:alpha(opacity=75);
-    -moz-opacity: 0.75;
-    opacity: 0.75;
-    z-index: 20000;
-}
 
 .dialog-box-container {
     position: relative;
@@ -259,15 +251,11 @@
     margin-right: auto;
     margin-left: auto;
 }
-.dialog-box-underlay {
-    position: absolute;
-    left: -1em;
-    right: -1em;
-    top: -1em;
-    bottom: -1em;
-    opacity: 0.5;
-    background: black;
-    z-index: -1;
+
+.dialog-box-wrapper {
+    position: relative;
+    padding: 1em;
+    background-color: rgba(0,0,0,0.5);
     -moz-border-radius: 1em;
     -webkit-border-radius: 1em;
 }
diff -r 6eac08f7edcf -r b671c301674a static/june_2007_style/panel_layout.css.tmpl
--- a/static/june_2007_style/panel_layout.css.tmpl Fri Aug 22 17:44:32 2008 -0400
+++ b/static/june_2007_style/panel_layout.css.tmpl Fri Aug 22 17:47:43 2008 -0400
@@ -244,30 +244,17 @@
     z-index: 20000;
 }
 
-#overlay-inner {
-    width: 100%; height: 100%;
-    background-color:#FFF;
-    filter:alpha(opacity=75);
-    -moz-opacity: 0.75;
-    opacity: 0.75;
-    z-index: 20000;
-}
-
 .dialog-box-container {
     position: relative;
     margin-top: 80px;
     margin-right: auto;
     margin-left: auto;
 }
-.dialog-box-underlay {
-    position: absolute;
-    left: -1em;
-    right: -1em;
-    top: -1em;
-    bottom: -1em;
-    opacity: 0.5;
-    background: black;
-    z-index: -1;
+
+.dialog-box-wrapper {
+    position: relative;
+    padding: 1em;
+    background-color: rgba(0,0,0,0.5);
     -moz-border-radius: 1em;
     -webkit-border-radius: 1em;
 }
diff -r 6eac08f7edcf -r b671c301674a static/scripts/galaxy.base.js
--- a/static/scripts/galaxy.base.js Fri Aug 22 17:44:32 2008 -0400
+++ b/static/scripts/galaxy.base.js Fri Aug 22 17:47:43 2008 -0400
@@ -29,13 +29,10 @@
 function ensure_popup_helper() {
     // And the helper below the popup menus
     if ( $( "#popup-helper" ).length == 0 ) {
-        var e = $("<div id='popup-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 15000;'></div>");
-        if ( $.browser.ie ) {
-            // Element will not capture drags in ie without nonzero opacity,
-            // but causes flashing in firefox with nonzero opacity
-            e.css( "opacity", "0.01" );
-        }
-        e.appendTo("body").hide();
+        $( "<div id='popup-helper'/>" ).css( {
+            background: 'white', opacity: 0, zIndex: 15000,
+            position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'
+        } ).appendTo( "body" ).hide();
     }
 }
 
diff -r 6eac08f7edcf -r b671c301674a static/scripts/galaxy.panels.js
--- a/static/scripts/galaxy.panels.js Fri Aug 22 17:44:32 2008 -0400
+++ b/static/scripts/galaxy.panels.js Fri Aug 22 17:47:43 2008 -0400
@@ -6,13 +6,10 @@
 function ensure_dd_helper() {
     // Insert div that covers everything when dragging the borders
     if ( jq( "#DD-helper" ).length == 0 ) {
-        var e = jq("<div id='DD-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 9000;'></div>");
-        if ( jq.browser.ie ) {
-            // Element will not capture drags in ie without nonzero opacity,
-            // but causes flashing in firefox with nonzero opacity
-            e.css( "opacity", "0.01" );
-        }
-        e.appendTo("body").hide();
+        $( "<div id='DD-helper'/>" ).css( {
+            background: 'white', opacity: 0, zIndex: 9000,
+            position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'
+        } ).appendTo( "body" ).hide();
     }
 }
 
@@ -179,6 +176,46 @@
     return { handle_minwidth_hint: handle_minwidth_hint };
 };
 
+// Modal dialog boxes
+
+function hide_modal() {
+    $(".dialog-box-container" ).fadeOut( function() { $("#overlay").hide(); } );
+};
+
+function show_modal( title, body, buttons, extra_buttons ) {
+    $( ".dialog-box" ).find( ".title" ).html( title );
+    var b = $( ".dialog-box" ).find( ".buttons" ).html( "" );
+    if ( buttons ) {
+        $.each( buttons, function( name, value ) {
+            b.append( $( '<button/>' ).text( name ).click( value ) );
+            b.append( " " );
+        });
+        b.show();
+    } else {
+        b.hide();
+    }
+    var b = $( ".dialog-box" ).find( ".extra_buttons" ).html( "" );
+    if ( extra_buttons ) {
+        $.each( extra_buttons, function( name, value ) {
+            b.append( $( '<button/>' ).text( name ).click( value ) );
+            b.append( " " );
+        });
+        b.show();
+    } else {
+        b.hide();
+    }
+    if ( body == "progress" ) {
+        body = $( "<img src='../images/yui/rel_interstitial_loading.gif')' />" );
+    }
+    $( ".dialog-box" ).find( ".body" ).html( body );
+    if ( ! $(".dialog-box-container").is( ":visible" ) ) {
+        $("#overlay").show();
+        $(".dialog-box-container").fadeIn()
+    }
+};
+    
+// Popup -- is this up to date?
+
 function make_popupmenu( button_element, options ) {
     var menu_element = $( "<div class='popupmenu'><div class='popupmenu-top'><div class='popupmenu-top-inner'/></div></div>" ).appendTo( "body" );
     $.each( options, function( k, v ) {
diff -r 6eac08f7edcf -r b671c301674a static/scripts/galaxy.ui.scrollPanel.js
--- a/static/scripts/galaxy.ui.scrollPanel.js Fri Aug 22 17:44:32 2008 -0400
+++ b/static/scripts/galaxy.ui.scrollPanel.js Fri Aug 22 17:47:43 2008 -0400
@@ -18,7 +18,7 @@
             element_w = element.width(),
             element_h = element.height(),
             moved = false,
-            close = 5,
+            close_dist = 5,
             nudge = 23,
             // Legal panel range
             p_min_x = - ( panel_w - viewport_w ),
@@ -34,21 +34,21 @@
             mouse_x = ui.position.left + instance.offset.click.left;
             mouse_y = ui.position.top + instance.offset.click.top;
         // Move it
-        if ( ( panel_pos.left < p_max_x ) && ( mouse_x - close < min_vis_x ) ) {
+        if ( ( panel_pos.left < p_max_x ) && ( mouse_x - close_dist < min_vis_x ) ) {
             var t = Math.min( nudge, p_max_x - panel_pos.left );
             panel.css( "left", panel_pos.left + t );
             moved = true;
             instance.offset.parent.left += t;
             ui.position.left -= t
         }
-        if ( ( ! moved ) && ( panel_pos.left > p_min_x ) && ( mouse_x + close > max_vis_x ) ) {
+        if ( ( ! moved ) && ( panel_pos.left > p_min_x ) && ( mouse_x + close_dist > max_vis_x ) ) {
             var t = Math.min( nudge, panel_pos.left  - p_min_x );
             panel.css( "left", panel_pos.left - t );
             moved = true;
             instance.offset.parent.left -= t;
             ui.position.left += t;      
         }
-        if ( ( ! moved ) && ( panel_pos.top < p_max_y ) && ( mouse_y - close < min_vis_y ) ) {
+        if ( ( ! moved ) && ( panel_pos.top < p_max_y ) && ( mouse_y - close_dist < min_vis_y ) ) {
             var t = Math.min( nudge, p_max_y - panel_pos.top );
             panel.css( "top", panel_pos.top + t );
             // Firefox sometimes moves by less, so we need to check. Yuck.
@@ -57,7 +57,7 @@
             ui.position.top -= amount_moved;
             moved = true;
         }
-        if ( ( ! moved ) && ( panel_pos.top > p_min_y ) && ( mouse_y + close > max_vis_y ) ) {
+        if ( ( ! moved ) && ( panel_pos.top > p_min_y ) && ( mouse_y + close_dist > max_vis_y ) ) {
             var t = Math.min( nudge, panel_pos.top  - p_min_x );
             panel.css( "top", ( panel_pos.top - t ) + "px" );
             // Firefox sometimes moves by less, so we need to check. Yuck.
diff -r 6eac08f7edcf -r b671c301674a static/scripts/galaxy.workflow_editor.canvas.js
--- a/static/scripts/galaxy.workflow_editor.canvas.js Fri Aug 22 17:44:32 2008 -0400
+++ b/static/scripts/galaxy.workflow_editor.canvas.js Fri Aug 22 17:47:43 2008 -0400
@@ -32,15 +32,16 @@
     this.datatype = datatype;
 }
 
-OutputTerminal.prototype.__proto__ = Terminal.prototype;
+OutputTerminal.prototype = new Terminal;
 
 function InputTerminal( element, datatypes ) {
     Terminal.call( this, element );
     this.datatypes = datatypes;
 }
 
-InputTerminal.prototype = {
-    __proto__: Terminal.prototype,
+InputTerminal.prototype = new Terminal;
+
+$.extend( InputTerminal.prototype, {
     can_accept: function ( other ) {
         if ( this.connectors.length < 1 ) {
             for ( t in this.datatypes ) {
@@ -53,7 +54,7 @@
         }
         return false;
     }
-}
+});
 
 function Connector( handle1, handle2 ) {
     this.canvas = null;
@@ -81,6 +82,10 @@
         var canvas_container = $("#canvas-container");
         if ( ! this.canvas ) {
             this.canvas = document.createElement( "canvas" );
+            // excanvas specific hack
+            if ( window.G_vmlCanvasManager ) {
+                G_vmlCanvasManager.initElement( this.canvas );
+            }
             canvas_container.append( $(this.canvas) );
             if ( this.dragging ) { this.canvas.style.zIndex = "300" }
         }
@@ -182,14 +187,14 @@
                                         t.remove();
                                     })))
                             .bind( "mouseleave", function() {
-                                $(this).fadeOut( "fast", function() { $(this).remove() } )
+                                $(this).remove();
                             });
                         // Position it and show
                         t.css( {
                                 top: $(this).offset().top - 2,
                                 left: $(this).offset().left - t.width(),
                                 'padding-right': $(this).width() }
-                            ).fadeIn( "fast" );
+                            ).show();
                     }
                 },
                 function() {}
@@ -272,12 +277,12 @@
         var node = this;
         var b = f.find( ".toolFormBody" );
         b.find( "div" ).remove();
-        var ibox = $("<div class='inputs'/>").appendTo( b );
+        var ibox = $("<div class='inputs'></div>").appendTo( b );
         $.each( data.data_inputs, function( i, input ) {
-            t = $("<div class='terminal input-terminal'></div>")
+            var t = $("<div class='terminal input-terminal'></div>");
             node.enable_input_terminal( t, input.name, input.extensions );
-            ibox.append( $("<div class='form-row dataRow input-data-row' name='" + input.name + "'>" + input.label + "</div></div>" ).prepend( t ) );
-        });        
+            ibox.append( $("<div class='form-row dataRow input-data-row' name='" + input.name + "'>" + input.label + "</div>" ).prepend( t ) );
+        });
         if ( ( data.data_inputs.length > 0 ) && ( data.data_outputs.length > 0 ) ) {
             b.append( $( "<div class='rule'></div>" ) );
         }
@@ -305,8 +310,8 @@
         }
         // Update input rows
         var old_body = el.find( "div.inputs" );
-        var new_body = $("<div class='inputs'/>");
-        old = old_body.find( "div.input-data-row")
+        var new_body = $("<div class='inputs'></div>");
+        var old = old_body.find( "div.input-data-row")
         $.each( data.data_inputs, function( i, input ) {
             var t = $("<div class='terminal input-terminal'></div>");
             node.enable_input_terminal( t, input.name, input.extensions );
@@ -322,7 +327,7 @@
                 $(this).remove();
             });
             // Append to new body
-            new_body.append( $("<div class='form-row dataRow input-data-row' name='" + input.name + "'>" + input.label + "</div></div>" ).prepend( t ) );
+            new_body.append( $("<div class='form-row dataRow input-data-row' name='" + input.name + "'>" + input.label + "</div>" ).prepend( t ) );
         });
         old_body.replaceWith( new_body );
         // Cleanup any leftover terminals
@@ -468,13 +473,21 @@
     f.append( b )
     // Fix width to computed width
     // Now add floats
-    var buttons = $("<div class='buttons' style='float: right'></div>");
-    buttons.append( $("<img src='../images/delete_icon.png' />").click( function() {
+    var buttons = $("<div class='buttons' style='float: right;'></div>");
+    buttons.append( $("<img src='../images/delete_icon.png' />").click( function( e ) {
         node.destroy();
     } ).hover(
         function() { $(this).attr( 'src', "../images/delete_icon_dark.png" ) },
         function() { $(this).attr( 'src', "../images/delete_icon.png" ) }
     ) );
+    // zIndex tracking for bring to front
+    zmax = $("#canvas-container").data( "zmax" )
+    if ( ! zmax ) {
+        zmax = 0;
+    }
+    f.css( "zIndex", zmax + 1 );
+    $("#canvas-container").data( "zmax", zmax + 1 );
+    // Place inside container
     f.appendTo( "#canvas-container" );
     // Position in container
     var o = $("#canvas-container").position();
@@ -494,13 +507,16 @@
         // containment: $("#shim"),
         // grow: true,
         click: function( e, ui ) {
-            var element = $(this).data("draggable").element.get(0);
-            (function(p) { p.removeChild( element ); p.appendChild( element ) })(element.parentNode)
+            // Bring to front
+            zmax = $("#canvas-container").data( "zmax" )
+            $(this).css( "zIndex", zmax + 1 );
+            $("#canvas-container").data( "zmax", zmax + 1 );
+            // Make active
             workflow.activate_node( node );
         },
         start: function( e, ui ) {
             workflow.activate_node( node );
-            $(this).css( 'z-index', '1000' );
+            $(this).css( 'z-index', $("#canvas-container").data( "zmax" ) + 1000 );
         },
         drag: function( e, ui ) {
             $(this).find( ".terminal" ).each( function() {
@@ -508,9 +524,11 @@
             })
         },
         stop: function( e, ui  ) {
-            var element = $(this).data("draggable").element.get(0);
-            (function(p) { p.removeChild( element ); p.appendChild( element ) })(element.parentNode)
-            $(this).css( 'z-index', '100' );
+            // Bring to front
+            zmax = $("#canvas-container").data( "zmax" )
+            $(this).css( "zIndex", zmax + 1 );
+            $("#canvas-container").data( "zmax", zmax + 1 );
+            // Redraw
             $(this).find( ".terminal" ).each( function() {
                 this.terminal.redraw();
             });
diff -r 6eac08f7edcf -r b671c301674a static/scripts/packed/galaxy.base.js
--- a/static/scripts/packed/galaxy.base.js Fri Aug 22 17:44:32 2008 -0400
+++ b/static/scripts/packed/galaxy.base.js Fri Aug 22 17:47:43 2008 -0400
@@ -1,1 +1,1 @@
-jQuery(document).ready(function(){jQuery("a[@confirm]").click(function(){return confirm(jQuery(this).attr("confirm"))});jQuery("div[@popupmenu]").each(function(){var B={};$(this).find("a").each(function(){var C=$(this).attr("confirm"),D=$(this).attr("href"),E=$(this).attr("target");B[$(this).text()]=function(){if(!C||confirm(C)){var F=window;if(E=="_parent"){F=window.parent}F.location=D}}});var A=$("#"+$(this).attr("popupmenu"));make_popupmenu(A,B);$(this).remove();A.show()})});function ensure_popup_helper(){if($("#popup-helper").length==0){var A=$("<div id='popup-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 15000;'></div>");if($.browser.ie){A.css("opacity","0.01")}A.appendTo("body").hide()}}function make_popupmenu(D,B){ensure_popup_helper();var A=$("<div class='popupmenu'></div>").appendTo("body");$.each(B,function(G,F){$("<div class='popupmenu-item' />").html(G).click(F).appendTo(A)});var C=functi
 on(){$(A).unbind().hide();$("#popup-helper").unbind().hide()};var E=function(F){var G=$(D).offset();$("#popup-helper").mousedown(C).show();$(A).click(C).css({top:-1000}).show().css({top:F.pageY-2,left:F.pageX-2});return false};$(D).click(E)};
\ No newline at end of file
+jQuery(document).ready(function(){jQuery("a[@confirm]").click(function(){return confirm(jQuery(this).attr("confirm"))});jQuery("div[@popupmenu]").each(function(){var B={};$(this).find("a").each(function(){var C=$(this).attr("confirm"),D=$(this).attr("href"),E=$(this).attr("target");B[$(this).text()]=function(){if(!C||confirm(C)){var F=window;if(E=="_parent"){F=window.parent}F.location=D}}});var A=$("#"+$(this).attr("popupmenu"));make_popupmenu(A,B);$(this).remove();A.show()})});function ensure_popup_helper(){if($("#popup-helper").length==0){$("<div id='popup-helper'/>").css({background:"white",opacity:0,zIndex:15000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_popupmenu(D,B){ensure_popup_helper();var A=$("<div class='popupmenu'></div>").appendTo("body");$.each(B,function(G,F){$("<div class='popupmenu-item' />").html(G).click(F).appendTo(A)});var C=function(){$(A).unbind().hide();$("#popup-helper").unbind().hide()};var E
 =function(F){var G=$(D).offset();$("#popup-helper").mousedown(C).show();$(A).click(C).css({top:-1000}).show().css({top:F.pageY-2,left:F.pageX-2});return false};$(D).click(E)};
\ No newline at end of file
diff -r 6eac08f7edcf -r b671c301674a static/scripts/packed/galaxy.panels.js
--- a/static/scripts/packed/galaxy.panels.js Fri Aug 22 17:44:32 2008 -0400
+++ b/static/scripts/packed/galaxy.panels.js Fri Aug 22 17:47:43 2008 -0400
@@ -1,1 +1,1 @@
-var hidden_width=7;var border_tweak=9;var jq=jQuery;function ensure_dd_helper(){if(jq("#DD-helper").length==0){var A=jq("<div id='DD-helper' style='background: white; opacity: 0.00; top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 9000;'></div>");if(jq.browser.ie){A.css("opacity","0.01")}A.appendTo("body").hide()}}function make_left_panel(E,A,B){var D=false;var C=null;resize=function(F){var G=F;if(F<0){F=0}jq(E).css("width",F);jq(B).css("left",G);jq(A).css("left",F+7);if(document.recalc){document.recalc()}};toggle=function(){if(D){jq(B).removeClass("hover");jq(B).animate({left:C},"fast");jq(E).css("left",-C).show().animate({left:0},"fast",function(){resize(C);jq(B).removeClass("hidden")});D=false}else{C=jq(B).position().left;jq(A).css("left",hidden_width);if(document.recalc){document.recalc()}jq(B).removeClass("hover");jq(E).animate({left:-C},"fast");jq(B).animate({left:-1},"fast",function(){jq(this).addClass("hidden")});D=true}};jq(B).hover(function(
 ){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(F,G){jq("#DD-helper").show()},stop:function(F,G){jq("#DD-helper").hide();return false},drag:function(F,G){x=G.position.left;x=Math.min(400,Math.max(100,x));if(D){jq(E).css("left",0);jq(B).removeClass("hidden");D=false}resize(x);G.position.left=x;G.position.top=$(this).data("draggable").originalPosition.top},click:function(){toggle()}}).find("div").show()}function make_right_panel(A,E,G){var I=false;var F=false;var C=null;var D=function(J){jq(A).css("width",J);jq(E).css("right",J+9);jq(G).css("right",J).css("left","");if(document.recalc){document.recalc()}};var H=function(){if(I){jq(G).removeClass("hover");jq(G).animate({right:C},"fast");jq(A).css("right",-C).show().animate({right:0},"fast",function(){D(C);jq(G).removeClass("hidden")});I=false}else{C=jq(document).width()-jq(G).position().left-border_tweak;jq(E).css("right",hidden_width+1);if(document.recalc){document.recalc()}jq
 (G).removeClass("hover");jq(A).animate({right:-C},"fast");jq(G).animate({right:-1},"fast",function(){jq(this).addClass("hidden")});I=true}F=false};var B=function(J){var K=jq(E).width()-(I?C:0);if(K<J){if(!I){H();F=true}}else{if(F){H();F=false}}};jq(G).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(J,K){jq("#DD-helper").show()},stop:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);D(w-x-border_tweak);jq("#DD-helper").hide();return false},click:function(){H()},drag:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(I){jq(A).css("right",0);jq(G).removeClass("hidden");I=false}D(w-x-border_tweak);K.position.left=x;K.position.top=$(this).data("draggable").originalPosition.top}}).find("div").show();return{handle_minwidth_hint:B}}function make_popupmenu(D,B){var A=$("<div class='popupmenu'><div class='popupmenu-top'><div class='p
 opupmenu-top-inner'/></div></div>").appendTo("body");$.each(B,function(G,F){$("<div class='popupmenu-item' />").html(G).click(F).appendTo(A)});var C=function(){$(A).unbind().hide();$("#popup-helper").unbind().hide()};var E=function(){var F=$(D).offset();$("#popup-helper").mousedown(C).show();$(A).click(C).css({top:-1000}).show().css({top:F.top+$(D).height()+9,left:F.left+$(D).width()-$(A).width()})};$(D).click(E)};
\ No newline at end of file
+var hidden_width=7;var border_tweak=9;var jq=jQuery;function ensure_dd_helper(){if(jq("#DD-helper").length==0){$("<div id='DD-helper'/>").css({background:"white",opacity:0,zIndex:9000,position:"absolute",top:0,left:0,width:"100%",height:"100%"}).appendTo("body").hide()}}function make_left_panel(E,A,B){var D=false;var C=null;resize=function(F){var G=F;if(F<0){F=0}jq(E).css("width",F);jq(B).css("left",G);jq(A).css("left",F+7);if(document.recalc){document.recalc()}};toggle=function(){if(D){jq(B).removeClass("hover");jq(B).animate({left:C},"fast");jq(E).css("left",-C).show().animate({left:0},"fast",function(){resize(C);jq(B).removeClass("hidden")});D=false}else{C=jq(B).position().left;jq(A).css("left",hidden_width);if(document.recalc){document.recalc()}jq(B).removeClass("hover");jq(E).animate({left:-C},"fast");jq(B).animate({left:-1},"fast",function(){jq(this).addClass("hidden")});D=true}};jq(B).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover"
 )}).draggable({start:function(F,G){jq("#DD-helper").show()},stop:function(F,G){jq("#DD-helper").hide();return false},drag:function(F,G){x=G.position.left;x=Math.min(400,Math.max(100,x));if(D){jq(E).css("left",0);jq(B).removeClass("hidden");D=false}resize(x);G.position.left=x;G.position.top=$(this).data("draggable").originalPosition.top},click:function(){toggle()}}).find("div").show()}function make_right_panel(A,E,G){var I=false;var F=false;var C=null;var D=function(J){jq(A).css("width",J);jq(E).css("right",J+9);jq(G).css("right",J).css("left","");if(document.recalc){document.recalc()}};var H=function(){if(I){jq(G).removeClass("hover");jq(G).animate({right:C},"fast");jq(A).css("right",-C).show().animate({right:0},"fast",function(){D(C);jq(G).removeClass("hidden")});I=false}else{C=jq(document).width()-jq(G).position().left-border_tweak;jq(E).css("right",hidden_width+1);if(document.recalc){document.recalc()}jq(G).removeClass("hover");jq(A).animate({right:-C},"fast");jq(G).anima
 te({right:-1},"fast",function(){jq(this).addClass("hidden")});I=true}F=false};var B=function(J){var K=jq(E).width()-(I?C:0);if(K<J){if(!I){H();F=true}}else{if(F){H();F=false}}};jq(G).hover(function(){jq(this).addClass("hover")},function(){jq(this).removeClass("hover")}).draggable({start:function(J,K){jq("#DD-helper").show()},stop:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);D(w-x-border_tweak);jq("#DD-helper").hide();return false},click:function(){H()},drag:function(J,K){x=K.position.left;w=jq(window).width();x=Math.min(w-100,x);x=Math.max(w-400,x);if(I){jq(A).css("right",0);jq(G).removeClass("hidden");I=false}D(w-x-border_tweak);K.position.left=x;K.position.top=$(this).data("draggable").originalPosition.top}}).find("div").show();return{handle_minwidth_hint:B}}function hide_modal(){$(".dialog-box-container").fadeOut(function(){$("#overlay").hide()})}function show_modal(E,B,D,C){$(".dialog-box").find(".title").html(E);var A=$(".
 dialog-box").find(".buttons").html("");if(D){$.each(D,function(F,G){A.append($("<button/>").text(F).click(G));A.append(" ")});A.show()}else{A.hide()}var A=$(".dialog-box").find(".extra_buttons").html("");if(C){$.each(C,function(F,G){A.append($("<button/>").text(F).click(G));A.append(" ")});A.show()}else{A.hide()}if(B=="progress"){B=$("<img src='../images/yui/rel_interstitial_loading.gif')' />")}$(".dialog-box").find(".body").html(B);if(!$(".dialog-box-container").is(":visible")){$("#overlay").show();$(".dialog-box-container").fadeIn()}}function make_popupmenu(D,B){var A=$("<div class='popupmenu'><div class='popupmenu-top'><div class='popupmenu-top-inner'/></div></div>").appendTo("body");$.each(B,function(G,F){$("<div class='popupmenu-item' />").html(G).click(F).appendTo(A)});var C=function(){$(A).unbind().hide();$("#popup-helper").unbind().hide()};var E=function(){var F=$(D).offset();$("#popup-helper").mousedown(C).show();$(A).click(C).css({top:-1000}).show().css({top:F.top+
 $(D).height()+9,left:F.left+$(D).width()-$(A).width()})};$(D).click(E)};
\ No newline at end of file
diff -r 6eac08f7edcf -r b671c301674a static/scripts/packed/galaxy.workflow_editor.canvas.js
--- a/static/scripts/packed/galaxy.workflow_editor.canvas.js Fri Aug 22 17:44:32 2008 -0400
+++ b/static/scripts/packed/galaxy.workflow_editor.canvas.js Fri Aug 22 17:47:43 2008 -0400
@@ -1,1 +1,1 @@
-function Terminal(A){this.element=A;this.connectors=[]}Terminal.prototype={connect:function(A){this.connectors.push(A);if(this.node){this.node.changed()}},disconnect:function(A){this.connectors.splice($.inArray(A,this.connectors),1);if(this.node){this.node.changed()}},redraw:function(){$.each(this.connectors,function(A,B){B.redraw()})},destroy:function(){$.each(this.connectors.slice(),function(A,B){B.destroy()})}};function OutputTerminal(A,B){Terminal.call(this,A);this.datatype=B}OutputTerminal.prototype.__proto__=Terminal.prototype;function InputTerminal(A,B){Terminal.call(this,A);this.datatypes=B}InputTerminal.prototype={__proto__:Terminal.prototype,can_accept:function(A){if(this.connectors.length<1){for(t in this.datatypes){if(A.datatype=="input"){return true}if(issubtype(A.datatype,this.datatypes[t])){return true}}}return false}};function Connector(B,A){this.canvas=null;this.dragging=false;this.inner_color="#FFFFFF";this.outer_color="#D8B365"}$.extend(Connector.prototype
 ,{connect:function(B,A){this.handle1=B;this.handle1.connect(this);this.handle2=A;this.handle2.connect(this)},destroy:function(){if(this.handle1){this.handle1.disconnect(this)}if(this.handle2){this.handle2.disconnect(this)}$(this.canvas).remove()},redraw:function(){var C=$("#canvas-container");if(!this.canvas){this.canvas=document.createElement("canvas");C.append($(this.canvas));if(this.dragging){this.canvas.style.zIndex="300"}}var L=function(S){return $(S).offset().left-C.offset().left};var G=function(S){return $(S).offset().top-C.offset().top};var F=L(this.handle1.element)+5;var E=G(this.handle1.element)+5;var N=L(this.handle2.element)+5;var K=G(this.handle2.element)+5;var D=100;var I=Math.min(F,N);var A=Math.max(F,N);var H=Math.min(E,K);var R=Math.max(E,K);var B=Math.min(Math.max(Math.abs(R-H)/2,100),300);var M=I-D;var Q=H-D;var O=A-I+2*D;var J=R-H+2*D;this.canvas.style.left=M+"px";this.canvas.style.top=Q+"px";this.canvas.setAttribute("width",O);this.canvas.setAttribute("h
 eight",J);F-=M;E-=Q;N-=M;K-=Q;var P=this.canvas.getContext("2d");P.lineCap="round";P.strokeStyle=this.outer_color;P.lineWidth=7;P.beginPath();P.moveTo(F,E);P.bezierCurveTo(F+B,E,N-B,K,N,K);P.stroke();P.strokeStyle=this.inner_color;P.lineWidth=5;P.beginPath();P.moveTo(F,E);P.bezierCurveTo(F+B,E,N-B,K,N,K);P.stroke()}});function Node(A){this.element=A;this.input_terminals={};this.output_terminals={};this.tool_errors={}}$.extend(Node.prototype,{enable_input_terminal:function(C,A,B){node=this;$(C).each(function(){var D=this.terminal=new InputTerminal(this,B);D.node=node;D.name=A;$(this).droppable({tolerance:"intersect",accept:function(E){E=E.get(0);return(E.terminal)&&(D.can_accept(E.terminal))},activeClass:"input-terminal-active",over:function(F,E){E.helper.get(0).terminal.connectors[0].inner_color="#BBFFBB"},out:function(F,E){E.helper.get(0).terminal.connectors[0].inner_color="#FFFFFF"},drop:function(I,G){var E=$(this).data("droppable");var F=G.draggable.get(0).terminal;var H=
 E.element.get(0).terminal;var J=new Connector();J.connect(F,H);J.redraw()}});$(this).hoverIntent(function(){if(D.connectors.length>0){var E=$("<div class='callout'></div>").css({display:"none"}).appendTo("body").append($("<div class='buttons'></div>").append($("<img src='../images/delete_icon.png' />").click(function(){$.each(D.connectors,function(G,F){F.destroy()});E.remove()}))).bind("mouseleave",function(){$(this).fadeOut("fast",function(){$(this).remove()})});E.css({top:$(this).offset().top-2,left:$(this).offset().left-E.width(),"padding-right":$(this).width()}).fadeIn("fast")}},function(){});node.input_terminals[A]=D})},enable_output_terminal:function(C,A,B){node=this;$(C).each(function(){var D=this.terminal=new OutputTerminal(this,B);D.node=node;D.name=A;$(this).draggable({scrollPanel:true,panel:$("#canvas-container"),helper:function(){var E=$('<div class="drag-terminal" style="position: absolute;"></div>').appendTo("#canvas-container").get(0);E.terminal=new OutputTerm
 inal(E);var F=new Connector();this.drag_temp_connector=F;F.dragging=true;F.connect(this.terminal,E.terminal);return E},drag:function(F,E){h=E.helper.get(0);h.terminal.redraw()},stop:function(F,E){this.drag_temp_connector.destroy()}});node.output_terminals[A]=D})},redraw:function(){$.each(this.input_terminals,function(A,B){B.redraw()});$.each(this.output_terminals,function(A,B){B.redraw()})},destroy:function(){$.each(this.input_terminals,function(A,B){B.destroy();$(B.element).droppable("destroy")});$.each(this.output_terminals,function(A,B){B.destroy();$(B.element).draggable("destroy")});$(this.element).draggable("destroy").remove();workflow.remove_node(this)},make_active:function(){$(this.element).addClass("toolForm-active")},make_inactive:function(){$(this.element).removeClass("toolForm-active")},init_field_data:function(D){var C=this.element;if(D.type){this.type=D.type}this.form_html=D.form_html;this.tool_state=D.tool_state;this.tool_errors=D.tool_errors;if(this.tool_error
 s){C.addClass("tool-node-error")}else{C.removeClass("tool-node-error")}var B=this;var A=C.find(".toolFormBody");A.find("div").remove();var E=$("<div class='inputs'/>").appendTo(A);$.each(D.data_inputs,function(G,F){t=$("<div class='terminal input-terminal'></div>");B.enable_input_terminal(t,F.name,F.extensions);E.append($("<div class='form-row dataRow input-data-row' name='"+F.name+"'>"+F.label+"</div></div>").prepend(t))});if((D.data_inputs.length>0)&&(D.data_outputs.length>0)){A.append($("<div class='rule'></div>"))}$.each(D.data_outputs,function(I,F){var H=$("<div class='terminal output-terminal'></div>");B.enable_output_terminal(H,F.name,F.extension);var G=F.name;if(F.extension!="input"){G=G+" ("+F.extension+")"}A.append($("<div class='form-row dataRow'>"+G+"</div>").append(H))});workflow.node_changed(this)},update_field_data:function(D){var B=$(this.element),C=this;this.tool_state=D.tool_state;this.form_html=D.form_html;this.tool_errors=D.tool_errors;if(this.tool_errors
 ){B.addClass("tool-node-error")}else{B.removeClass("tool-node-error")}var E=B.find("div.inputs");var A=$("<div class='inputs'/>");old=E.find("div.input-data-row");$.each(D.data_inputs,function(H,F){var G=$("<div class='terminal input-terminal'></div>");C.enable_input_terminal(G,F.name,F.extensions);E.find("div[name="+F.name+"]").each(function(){$(this).find(".input-terminal").each(function(){var I=this.terminal.connectors[0];if(I){G[0].terminal.connectors[0]=I;I.handle2=G[0].terminal}});$(this).remove()});A.append($("<div class='form-row dataRow input-data-row' name='"+F.name+"'>"+F.label+"</div></div>").prepend(G))});E.replaceWith(A);E.find("div.input-data-row > .terminal").each(function(){this.terminal.destroy()});this.changed();this.redraw()},error:function(C){var A=$(this.element).find(".toolFormBody");A.find("div").remove();var B="<div style='color: red; text-style: italic;'>"+C+"</div>";this.form_html=B;A.html(B);workflow.node_changed(this)},changed:function(){workflow
 .node_changed(this)}});function Workflow(){this.id_counter=0;this.nodes={};this.name=null;this.has_changes=false}$.extend(Workflow.prototype,{add_node:function(A){A.id=this.id_counter;this.id_counter++;this.nodes[A.id]=A;this.has_changes=true;A.workflow=this},remove_node:function(A){if(this.active_node==A){this.clear_active_node()}delete this.nodes[A.id];this.has_changes=true},remove_all:function(){wf=this;$.each(this.nodes,function(B,A){A.destroy();wf.remove_node(A)})},to_simple:function(){var A={};$.each(this.nodes,function(B,D){var E={};$.each(D.input_terminals,function(F,G){E[G.name]=null;$.each(G.connectors,function(H,I){E[G.name]={id:I.handle1.node.id,output_name:I.handle1.name}})});var C={id:D.id,type:D.type,tool_id:D.tool_id,tool_state:D.tool_state,tool_errors:D.tool_errors,input_connections:E,position:$(D.element).position()};A[D.id]=C});return{steps:A}},from_simple:function(A){wf=this;var B=0;wf.name=A.name;$.each(A.steps,function(E,D){var C=prebuild_node("tool",D.
 name,D.tool_id);C.init_field_data(D);if(D.position){C.element.css({top:D.position.top,left:D.position.left})}C.id=D.id;wf.nodes[C.id]=C;B=Math.max(B,parseInt(E))});wf.id_counter=B+1;$.each(A.steps,function(E,D){var C=wf.nodes[E];$.each(D.input_connections,function(G,F){if(F){var H=wf.nodes[F.id];var I=new Connector();I.connect(H.output_terminals[F.output_name],C.input_terminals[G]);I.redraw()}})})},clear_active_node:function(){if(this.active_node){this.active_node.make_inactive()}parent.show_form_for_tool("<div>No node selected</div>")},activate_node:function(A){this.clear_active_node();parent.show_form_for_tool(A.form_html,A);A.make_active();this.active_node=A},node_changed:function(A){this.has_changes=true;if(this.active_node==A){this.activate_node(A)}}});function prebuild_node(H,F,K){var E=$("<div class='toolForm toolFormInCanvas'></div>");var C=new Node(E);C.type=H;if(H=="tool"){C.tool_id=K}var J=$("<div class='toolFormTitle unselectable'>"+F+"</div>");E.append(J);E.css(
 "left",$(window).scrollLeft()+20);E.css("top",$(window).scrollTop()+20);var I=$("<div class='toolFormBody'></div>");var D="<div><img height='16' align='middle' src='../images/loading_small_white_bg.gif'/> loading tool info...</div>";I.append(D);C.form_html=D;E.append(I);var G=$("<div class='buttons' style='float: right'></div>");G.append($("<img src='../images/delete_icon.png' />").click(function(){C.destroy()}).hover(function(){$(this).attr("src","../images/delete_icon_dark.png")},function(){$(this).attr("src","../images/delete_icon.png")}));E.appendTo("#canvas-container");var B=$("#canvas-container").position();E.css({left:(-B.left)+10,top:(-B.top)+10});var A=E.width();G.prependTo(J);A+=(G.width()+10);E.css("width",A);$(E).draggable({cursor:"move",scrollPanel:true,panel:$("#canvas-container"),scrollSensitivity:10,scrollSpeed:20,click:function(N,M){var L=$(this).data("draggable").element.get(0);(function(O){O.removeChild(L);O.appendChild(L)})(L.parentNode);workflow.activate
 _node(C)},start:function(M,L){workflow.activate_node(C);$(this).css("z-index","1000")},drag:function(M,L){$(this).find(".terminal").each(function(){this.terminal.redraw()})},stop:function(N,M){var L=$(this).data("draggable").element.get(0);(function(O){O.removeChild(L);O.appendChild(L)})(L.parentNode);$(this).css("z-index","100");$(this).find(".terminal").each(function(){this.terminal.redraw()});workflow.node_changed(this)}});return C}var ext_to_type=null;var type_to_type=null;function issubtype(B,A){B=ext_to_type[B];A=ext_to_type[A];return(A in type_to_type[B])}function populate_datatype_info(A){ext_to_type=A.ext_to_class_name;type_to_type=A.class_to_classes};
\ No newline at end of file
+function Terminal(A){this.element=A;this.connectors=[]}Terminal.prototype={connect:function(A){this.connectors.push(A);if(this.node){this.node.changed()}},disconnect:function(A){this.connectors.splice($.inArray(A,this.connectors),1);if(this.node){this.node.changed()}},redraw:function(){$.each(this.connectors,function(A,B){B.redraw()})},destroy:function(){$.each(this.connectors.slice(),function(A,B){B.destroy()})}};function OutputTerminal(A,B){Terminal.call(this,A);this.datatype=B}OutputTerminal.prototype=new Terminal;function InputTerminal(A,B){Terminal.call(this,A);this.datatypes=B}InputTerminal.prototype=new Terminal;$.extend(InputTerminal.prototype,{can_accept:function(A){if(this.connectors.length<1){for(t in this.datatypes){if(A.datatype=="input"){return true}if(issubtype(A.datatype,this.datatypes[t])){return true}}}return false}});function Connector(B,A){this.canvas=null;this.dragging=false;this.inner_color="#FFFFFF";this.outer_color="#D8B365"}$.extend(Connector.prototy
 pe,{connect:function(B,A){this.handle1=B;this.handle1.connect(this);this.handle2=A;this.handle2.connect(this)},destroy:function(){if(this.handle1){this.handle1.disconnect(this)}if(this.handle2){this.handle2.disconnect(this)}$(this.canvas).remove()},redraw:function(){var C=$("#canvas-container");if(!this.canvas){this.canvas=document.createElement("canvas");if(window.G_vmlCanvasManager){G_vmlCanvasManager.initElement(this.canvas)}C.append($(this.canvas));if(this.dragging){this.canvas.style.zIndex="300"}}var L=function(S){return $(S).offset().left-C.offset().left};var G=function(S){return $(S).offset().top-C.offset().top};var F=L(this.handle1.element)+5;var E=G(this.handle1.element)+5;var N=L(this.handle2.element)+5;var K=G(this.handle2.element)+5;var D=100;var I=Math.min(F,N);var A=Math.max(F,N);var H=Math.min(E,K);var R=Math.max(E,K);var B=Math.min(Math.max(Math.abs(R-H)/2,100),300);var M=I-D;var Q=H-D;var O=A-I+2*D;var J=R-H+2*D;this.canvas.style.left=M+"px";this.canvas.styl
 e.top=Q+"px";this.canvas.setAttribute("width",O);this.canvas.setAttribute("height",J);F-=M;E-=Q;N-=M;K-=Q;var P=this.canvas.getContext("2d");P.lineCap="round";P.strokeStyle=this.outer_color;P.lineWidth=7;P.beginPath();P.moveTo(F,E);P.bezierCurveTo(F+B,E,N-B,K,N,K);P.stroke();P.strokeStyle=this.inner_color;P.lineWidth=5;P.beginPath();P.moveTo(F,E);P.bezierCurveTo(F+B,E,N-B,K,N,K);P.stroke()}});function Node(A){this.element=A;this.input_terminals={};this.output_terminals={};this.tool_errors={}}$.extend(Node.prototype,{enable_input_terminal:function(C,A,B){node=this;$(C).each(function(){var D=this.terminal=new InputTerminal(this,B);D.node=node;D.name=A;$(this).droppable({tolerance:"intersect",accept:function(E){E=E.get(0);return(E.terminal)&&(D.can_accept(E.terminal))},activeClass:"input-terminal-active",over:function(F,E){E.helper.get(0).terminal.connectors[0].inner_color="#BBFFBB"},out:function(F,E){E.helper.get(0).terminal.connectors[0].inner_color="#FFFFFF"},drop:function(I
 ,G){var E=$(this).data("droppable");var F=G.draggable.get(0).terminal;var H=E.element.get(0).terminal;var J=new Connector();J.connect(F,H);J.redraw()}});$(this).hoverIntent(function(){if(D.connectors.length>0){var E=$("<div class='callout'></div>").css({display:"none"}).appendTo("body").append($("<div class='buttons'></div>").append($("<img src='../images/delete_icon.png' />").click(function(){$.each(D.connectors,function(G,F){F.destroy()});E.remove()}))).bind("mouseleave",function(){$(this).remove()});E.css({top:$(this).offset().top-2,left:$(this).offset().left-E.width(),"padding-right":$(this).width()}).show()}},function(){});node.input_terminals[A]=D})},enable_output_terminal:function(C,A,B){node=this;$(C).each(function(){var D=this.terminal=new OutputTerminal(this,B);D.node=node;D.name=A;$(this).draggable({scrollPanel:true,panel:$("#canvas-container"),helper:function(){var E=$('<div class="drag-terminal" style="position: absolute;"></div>').appendTo("#canvas-container").
 get(0);E.terminal=new OutputTerminal(E);var F=new Connector();this.drag_temp_connector=F;F.dragging=true;F.connect(this.terminal,E.terminal);return E},drag:function(F,E){h=E.helper.get(0);h.terminal.redraw()},stop:function(F,E){this.drag_temp_connector.destroy()}});node.output_terminals[A]=D})},redraw:function(){$.each(this.input_terminals,function(A,B){B.redraw()});$.each(this.output_terminals,function(A,B){B.redraw()})},destroy:function(){$.each(this.input_terminals,function(A,B){B.destroy();$(B.element).droppable("destroy")});$.each(this.output_terminals,function(A,B){B.destroy();$(B.element).draggable("destroy")});$(this.element).draggable("destroy").remove();workflow.remove_node(this)},make_active:function(){$(this.element).addClass("toolForm-active")},make_inactive:function(){$(this.element).removeClass("toolForm-active")},init_field_data:function(D){var C=this.element;if(D.type){this.type=D.type}this.form_html=D.form_html;this.tool_state=D.tool_state;this.tool_errors=
 D.tool_errors;if(this.tool_errors){C.addClass("tool-node-error")}else{C.removeClass("tool-node-error")}var B=this;var A=C.find(".toolFormBody");A.find("div").remove();var E=$("<div class='inputs'></div>").appendTo(A);$.each(D.data_inputs,function(H,F){var G=$("<div class='terminal input-terminal'></div>");B.enable_input_terminal(G,F.name,F.extensions);E.append($("<div class='form-row dataRow input-data-row' name='"+F.name+"'>"+F.label+"</div>").prepend(G))});if((D.data_inputs.length>0)&&(D.data_outputs.length>0)){A.append($("<div class='rule'></div>"))}$.each(D.data_outputs,function(I,F){var H=$("<div class='terminal output-terminal'></div>");B.enable_output_terminal(H,F.name,F.extension);var G=F.name;if(F.extension!="input"){G=G+" ("+F.extension+")"}A.append($("<div class='form-row dataRow'>"+G+"</div>").append(H))});workflow.node_changed(this)},update_field_data:function(E){var C=$(this.element),D=this;this.tool_state=E.tool_state;this.form_html=E.form_html;this.tool_error
 s=E.tool_errors;if(this.tool_errors){C.addClass("tool-node-error")}else{C.removeClass("tool-node-error")}var F=C.find("div.inputs");var B=$("<div class='inputs'></div>");var A=F.find("div.input-data-row");$.each(E.data_inputs,function(I,G){var H=$("<div class='terminal input-terminal'></div>");D.enable_input_terminal(H,G.name,G.extensions);F.find("div[name="+G.name+"]").each(function(){$(this).find(".input-terminal").each(function(){var J=this.terminal.connectors[0];if(J){H[0].terminal.connectors[0]=J;J.handle2=H[0].terminal}});$(this).remove()});B.append($("<div class='form-row dataRow input-data-row' name='"+G.name+"'>"+G.label+"</div>").prepend(H))});F.replaceWith(B);F.find("div.input-data-row > .terminal").each(function(){this.terminal.destroy()});this.changed();this.redraw()},error:function(C){var A=$(this.element).find(".toolFormBody");A.find("div").remove();var B="<div style='color: red; text-style: italic;'>"+C+"</div>";this.form_html=B;A.html(B);workflow.node_change
 d(this)},changed:function(){workflow.node_changed(this)}});function Workflow(){this.id_counter=0;this.nodes={};this.name=null;this.has_changes=false}$.extend(Workflow.prototype,{add_node:function(A){A.id=this.id_counter;this.id_counter++;this.nodes[A.id]=A;this.has_changes=true;A.workflow=this},remove_node:function(A){if(this.active_node==A){this.clear_active_node()}delete this.nodes[A.id];this.has_changes=true},remove_all:function(){wf=this;$.each(this.nodes,function(B,A){A.destroy();wf.remove_node(A)})},to_simple:function(){var A={};$.each(this.nodes,function(B,D){var E={};$.each(D.input_terminals,function(F,G){E[G.name]=null;$.each(G.connectors,function(H,I){E[G.name]={id:I.handle1.node.id,output_name:I.handle1.name}})});var C={id:D.id,type:D.type,tool_id:D.tool_id,tool_state:D.tool_state,tool_errors:D.tool_errors,input_connections:E,position:$(D.element).position()};A[D.id]=C});return{steps:A}},from_simple:function(A){wf=this;var B=0;wf.name=A.name;$.each(A.steps,functio
 n(E,D){var C=prebuild_node("tool",D.name,D.tool_id);C.init_field_data(D);if(D.position){C.element.css({top:D.position.top,left:D.position.left})}C.id=D.id;wf.nodes[C.id]=C;B=Math.max(B,parseInt(E))});wf.id_counter=B+1;$.each(A.steps,function(E,D){var C=wf.nodes[E];$.each(D.input_connections,function(G,F){if(F){var H=wf.nodes[F.id];var I=new Connector();I.connect(H.output_terminals[F.output_name],C.input_terminals[G]);I.redraw()}})})},clear_active_node:function(){if(this.active_node){this.active_node.make_inactive()}parent.show_form_for_tool("<div>No node selected</div>")},activate_node:function(A){this.clear_active_node();parent.show_form_for_tool(A.form_html,A);A.make_active();this.active_node=A},node_changed:function(A){this.has_changes=true;if(this.active_node==A){this.activate_node(A)}}});function prebuild_node(H,F,K){var E=$("<div class='toolForm toolFormInCanvas'></div>");var C=new Node(E);C.type=H;if(H=="tool"){C.tool_id=K}var J=$("<div class='toolFormTitle unselectab
 le'>"+F+"</div>");E.append(J);E.css("left",$(window).scrollLeft()+20);E.css("top",$(window).scrollTop()+20);var I=$("<div class='toolFormBody'></div>");var D="<div><img height='16' align='middle' src='../images/loading_small_white_bg.gif'/> loading tool info...</div>";I.append(D);C.form_html=D;E.append(I);var G=$("<div class='buttons' style='float: right;'></div>");G.append($("<img src='../images/delete_icon.png' />").click(function(L){C.destroy()}).hover(function(){$(this).attr("src","../images/delete_icon_dark.png")},function(){$(this).attr("src","../images/delete_icon.png")}));zmax=$("#canvas-container").data("zmax");if(!zmax){zmax=0}E.css("zIndex",zmax+1);$("#canvas-container").data("zmax",zmax+1);E.appendTo("#canvas-container");var B=$("#canvas-container").position();E.css({left:(-B.left)+10,top:(-B.top)+10});var A=E.width();G.prependTo(J);A+=(G.width()+10);E.css("width",A);$(E).draggable({cursor:"move",scrollPanel:true,panel:$("#canvas-container"),scrollSensitivity:10,
 scrollSpeed:20,click:function(M,L){zmax=$("#canvas-container").data("zmax");$(this).css("zIndex",zmax+1);$("#canvas-container").data("zmax",zmax+1);workflow.activate_node(C)},start:function(M,L){workflow.activate_node(C);$(this).css("z-index",$("#canvas-container").data("zmax")+1000)},drag:function(M,L){$(this).find(".terminal").each(function(){this.terminal.redraw()})},stop:function(M,L){zmax=$("#canvas-container").data("zmax");$(this).css("zIndex",zmax+1);$("#canvas-container").data("zmax",zmax+1);$(this).find(".terminal").each(function(){this.terminal.redraw()});workflow.node_changed(this)}});return C}var ext_to_type=null;var type_to_type=null;function issubtype(B,A){B=ext_to_type[B];A=ext_to_type[A];return(A in type_to_type[B])}function populate_datatype_info(A){ext_to_type=A.ext_to_class_name;type_to_type=A.class_to_classes};
\ No newline at end of file
diff -r 6eac08f7edcf -r b671c301674a templates/workflow/editor.mako
--- a/templates/workflow/editor.mako Fri Aug 22 17:44:32 2008 -0400
+++ b/templates/workflow/editor.mako Fri Aug 22 17:47:43 2008 -0400
@@ -14,8 +14,11 @@
 
 <%def name="javascripts()">
     
-    ## ${parent.javascripts()}
-
+    ${parent.javascripts()}
+    
+    <!--[if IE]>
+    <script type='text/javascript' src="/static/scripts/excanvas.js"> </script>
+    <![endif]-->
     <script type='text/javascript' src="/static/scripts/jquery.js"> </script>
     <script type='text/javascript' src="/static/scripts/jquery.ui.js"> </script>
     <script type='text/javascript' src="/static/scripts/galaxy.ui.scrollPanel.js"> </script>
@@ -23,46 +26,6 @@
     <script type='text/javascript' src="/static/scripts/jquery.form.js"> </script>
     <script type='text/javascript' src="/static/scripts/jquery.json.js"> </script>
 
-    <script type='text/javascript'>
-    /* Dialog and menu handling tools to be moved to galaxy.layout.js */
-    
-    function hide_modal() {
-        $(".dialog-box-container" ).fadeOut( function() { $("#overlay").hide(); } );
-    };
-    
-    function show_modal( title, body, buttons, extra_buttons ) {
-        $( ".dialog-box" ).find( ".title" ).html( title );
-        var b = $( ".dialog-box" ).find( ".buttons" ).html( "" );
-        if ( buttons ) {
-            $.each( buttons, function( name, value ) {
-                b.append( $( '<button/>' ).text( name ).click( value ) );
-                b.append( " " );
-            });
-            b.show();
-        } else {
-            b.hide();
-        }
-        var b = $( ".dialog-box" ).find( ".extra_buttons" ).html( "" );
-        if ( extra_buttons ) {
-            $.each( extra_buttons, function( name, value ) {
-                b.append( $( '<button/>' ).text( name ).click( value ) );
-                b.append( " " );
-            });
-            b.show();
-        } else {
-            b.hide();
-        }
-        if ( body == "progress" ) {
-            body = $( "<img src='${h.url_for('/static/images/yui/rel_interstitial_loading.gif')}'/>" );
-        }
-        $( ".dialog-box" ).find( ".body" ).html( body );
-        if ( ! $(".dialog-box-container").is( ":visible" ) ) {
-            $("#overlay").show();
-            $(".dialog-box-container").fadeIn()
-        }
-    };
-    </script>
-    
     <script type='text/javascript' src="/static/scripts/galaxy.workflow_editor.canvas.js"> </script>
     
     <script type='text/javascript'>
@@ -70,38 +33,34 @@
     $( function() {
         // Initialize workflow state
         reset();
-        // Shim (the background of the editor area) causes loss of focus
-        // $("#shim").click( workflow.clear_active_node ).hoverIntent( {
-        //     over: function () { $("div.toolForm").fadeTo( "fast", 0.7 ) },
-        //     out: function () { $("div.toolForm").fadeTo( "fast", 1.0 ) },
-        //     interval: 300
-        // });
         // Load the datatype info
-        $.getJSON( "${h.url_for( action='get_datatypes' )}", function( data ) {
-            populate_datatype_info( data );
-            // Load workflow definition
-            $.ajax( {
-                url: "${h.url_for( action='load_workflow' )}",
-                data: { id: "${trans.security.encode_id( workflow_id )}", "_": "true" },
-                dataType: 'json',
-                success: function( data ) {
-                     reset();
-                     workflow.from_simple( data );
-                     workflow.has_changes = false;
-                     scroll_to_nodes();
-                     hide_modal();
-                 },
-                 beforeSubmit: function( data ) {
-                     show_modal( "Loading workflow", "progress" );
-                 }
-            });
+        $.ajax( {
+            url: "${h.url_for( action='get_datatypes' )}",
+            dataType: "json",
+            cache: false,
+            success: function( data ) {
+                populate_datatype_info( data );
+                // Load workflow definition
+                $.ajax( {
+                    url: "${h.url_for( action='load_workflow' )}",
+                    data: { id: "${trans.security.encode_id( workflow_id )}", "_": "true" },
+                    dataType: 'json',
+                    cache: false,
+                    success: function( data ) {
+                         reset();
+                         workflow.from_simple( data );
+                         workflow.has_changes = false;
+                         scroll_to_nodes();
+                         hide_modal();
+                     },
+                     beforeSubmit: function( data ) {
+                         show_modal( "Loading workflow", "progress" );
+                     }
+                });
+            }
         });
         
         $(document).ajaxError( function ( e, x ) {
-            // $("#error-display").empty()
-            //     .append( $("<div/>").html( x.responseText ) )
-            //     .append( $("<div><a>close</a></div>" ).click( function() { $("#error-display").hide(); } ) )
-            //     .show();
             show_modal( "Server error", x.responseText, { "Ignore error" : hide_modal } );
             return false;
         });
@@ -272,7 +231,7 @@
                                 save_current_workflow( do_close );
                             }
                         }, {
-                            "Don't Save": do_close,
+                            "Don't Save": do_close
                         } );
         } else {
             window.document.location = "${next_url}"
@@ -410,20 +369,10 @@
         margin: 5px;
     }
     
-    #error-display {
-        display: none;
-        position: fixed;
-        top: 5%; left: 5%; width: 90%; height: 90%;
-        border: solid red 10px;
-        background: #FFDDDD;
-        z-index: 50000;
-        overflow: auto;
-    }
-    
     canvas { position: absolute; z-index: 10; }
     canvas.dragging { position: absolute; z-index: 1000; }
-    .input-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; bottom: 0; left: -16px; z-index: 1500; }
-    .output-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; bottom: 0; right: -16px; z-index: 1500; }
+    .input-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; top: 0; left: -16px; z-index: 1500; }
+    .output-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; top: 0; right: -16px; z-index: 1500; }
     .drag-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_drag.png')}); position: absolute; z-index: 1500; }
     .input-terminal-active { background: url(${h.url_for('/static/style/workflow_circle_green.png')}); }
     ## .input-terminal-hover { background: yellow; border: solid black 1px; }
@@ -504,13 +453,11 @@
     
     </style>
 </%def>
-        
-<div id="error-display"></div>
 
 <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 style="position: relative;">
+    <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>
@@ -522,7 +469,6 @@
                 <div style="clear: both;"></div>
             </div>
         </div>
-        <div class="dialog-box-underlay"></div>
     </div>
     </td></tr></table>
 </div>
@@ -558,9 +504,9 @@
                                     %if "[[" in tool.description and "]]" in tool.description:
                                         ${tool.description.replace( '[[', '<a id="link-${tool.id}" href="javascript:add_node_for_tool( ${tool.id} )">' % tool.id ).replace( "]]", "</a>" )}
                                     %elif tool.name:
-                                        <a id="link-${tool.id}" href="javascript:add_node_for_tool( '${tool.id}', '${tool.name}' )">${tool.name}</a> ${tool.description}
+                                        <a id="link-${tool.id}" href="#" onclick="add_node_for_tool( '${tool.id}', '${tool.name}' )">${tool.name}</a> ${tool.description}
                                     %else:
-                                        <a id="link-${tool.id}" href="javascript:add_node_for_tool( '${tool.id}', '${tool.name}' )">${tool.description}</a>
+                                        <a id="link-${tool.id}" href="#" onclick="add_node_for_tool( '${tool.id}', '${tool.name}' )">${tool.description}</a>
                                     %endif
                                 </div>
                             %else:
@@ -588,7 +534,7 @@
             <div id="__workflow__input__" class="toolSectionBody">
                 <div class="toolSectionBg">
                     <div class="toolTitle">
-                        <a href="javascript:add_node_for_module( 'data_input', 'Input Dataset' )">Input dataset</a>
+                        <a href="#" onclick="add_node_for_module( 'data_input', 'Input Dataset' )">Input dataset</a>
                     </div>
                 </div>
             </div>                    
diff -r 6eac08f7edcf -r b671c301674a templates/workflow/index.mako
--- a/templates/workflow/index.mako Fri Aug 22 17:44:32 2008 -0400
+++ b/templates/workflow/index.mako Fri Aug 22 17:47:43 2008 -0400
@@ -21,16 +21,15 @@
 </div>
 %endif
 
-<div>
-    <div style="float: right;">
-        <a class="action-button" href="${h.url_for( action='create' )}">
-            <img src="${h.url_for('/static/images/silk/add.png')}" />
-            <span>Add a new workflow</span>
-        </a>
-    </div>
-    <h2>Your workflows</h2>
+<h2>Your workflows</h2>
+
+<div style="float: right; margin-top: -2.5em;">
+    <a class="action-button" href="${h.url_for( action='create' )}">
+        <img src="${h.url_for('/static/images/silk/add.png')}" />
+        <span>Add a new workflow</span>
+    </a>
 </div>
-
+  
 %if workflows:
     <table class="colored" border="0" cellspacing="0" cellpadding="0" width="100%">
         <tr class="header">