Styling adjustments and add clipboard button for Opera

index.php

@@ -90,7 +90,30 @@ if (isset($_POST['code'])) {
 
             <div class="input">
                 <div class="editor" id="editor"><?php echo (isset($_POST['code']) ? htmlentities($_POST['code'], ENT_QUOTES, 'UTF-8') : null) ?></div>
-                <div class="statusbar">Line: 1, Column: 1</div>
+                <div class="statusbar">
+                    <span class="position">Line: 1, Column: 1</span>
+                    <span class="copy">
+                        Copy selection: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="110" height="14" id="clippy">
+                            <param name="movie" value="clippy.swf"/>
+                            <param name="allowScriptAccess" value="always" />
+                            <param name="quality" value="high" />
+                            <param name="scale" value="noscale" />
+                            <param NAME="FlashVars" value="text=">
+                            <param name="bgcolor" value="#E8E8E8">
+                            <embed src="clippy.swf"
+                                   width="110"
+                                   height="14"
+                                   name="clippy"
+                                   quality="high"
+                                   allowScriptAccess="always"
+                                   type="application/x-shockwave-flash"
+                                   pluginspage="http://www.macromedia.com/go/getflashplayer"
+                                   FlashVars="text="
+                                   bgcolor="#E8E8E8"
+                            />
+                        </object>
+                    </span>
+                </div>
             </div>
             <input type="submit" name="subm" value="Try this!" />
         </form>

php-console.js

@@ -25,7 +25,17 @@
      */
     updateStatusBar = function(e) {
         var cursor_position = editor.getCursorPosition();
-        $('.statusbar').text('Line: ' + (1+cursor_position.row) + ', Column: ' + cursor_position.column);
+        $('.statusbar .position').text('Line: ' + (1+cursor_position.row) + ', Column: ' + cursor_position.column);
+    };
+
+    /**
+     * prepares a clippy button for clipboard access
+     */
+    prepareClippyButton = function(e) {
+        var selection = editor.getSession().doc.getTextRange(editor.getSelectionRange());
+        $('#clippy embed').attr('FlashVars', 'text=' + selection);
+        $('#clippy param[name="FlashVars"]').attr('value', 'text=' + selection);
+        $('.statusbar .copy').html($('.statusbar .copy').html());
     };
 
     /**
@@ -70,9 +80,11 @@
 
         // tab size
         editor.getSession().setTabSize(options.tabsize);
+        editor.getSession().setUseSoftTabs(true);
 
         // events
         editor.getSession().selection.on('changeCursor', updateStatusBar);
+        editor.getSession().selection.on('changeSelection', prepareClippyButton);
 
         // commands
         editor.commands.addCommand({
@@ -88,7 +100,6 @@
         });
     };
 
-
     $.console = function(settings) {
         $.extend(options, settings);
 
@@ -96,15 +107,6 @@
             $(document).ready(initializeAce);
 
             $('form').submit(handleSubmit);
-/*
-            // set the focus back to the textarea if pressing tab moved
-            // the focus to the submit button (opera bug)
-            $('input[name="subm"]').keyup(function(e) {
-                if (e.keyCode === 9) {
-                    $('textarea[name="code"]').focus();
-                }
-            });
-            */
         });
     };
 }());

styles.css

@@ -28,16 +28,31 @@ a {
 
 .output {
     padding: 5px 10px;
-    margin: 10px .4%;
+    margin: 10px;
 }
 
 .input {
     margin: .5% 10px;
-    padding: 2px 5px;
 }
 
 .statusbar {
-    margin-top: 3px;
+    padding: 3px 5px;
+    background: #E8E8E8;
+    -webkit-border-bottom-left-radius: 5px;
+    -moz-border-radius-bottomleft: 5px;
+    border-bottom-left-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    -moz-border-radius-bottomright: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.statusbar .copy {
+    margin-left: 50px;
+}
+#clippy {
+    position: relative;
+    top: 2px;
+    left: 0;
 }
 
 /* ace-editor requires to define styles by id (specificity) */
@@ -45,6 +60,14 @@ a {
     width: 100%;
     height: 400px;
     position: relative;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    border-top-right-radius: 5px;
+}
+#editor .ace_gutter {
+    -webkit-border-top-left-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    border-top-left-radius: 5px;
 }
 
 .output img.loader {