Fix placement of [Show Images] button for clients

Previously, the display of the button was incorrect and more than one button
might have been displayed.

include/client/view.inc.php

@@ -100,7 +100,12 @@ if($ticket->getThreadCount() && ($thread=$ticket->getClientThread())) {
             $poster = ' ';
         ?>
         <table class="thread-entry <?php echo $threadType[$entry['thread_type']]; ?>" cellspacing="0" cellpadding="1" width="800" border="0">
-            <tr><th><?php echo Format::db_datetime($entry['created']); ?> &nbsp;&nbsp;<span class="textra"></span><span><?php echo $poster; ?></span></th></tr>
+            <tr><th><div>
+<?php echo Format::db_datetime($entry['created']); ?>
+                &nbsp;&nbsp;<span class="textra"></span>
+                <span><?php echo $poster; ?></span>
+            </div>
+            </th></tr>
             <tr><td class="thread-body"><div><?php echo Format::viewableImages(Format::display($entry['body'])); ?></div></td></tr>
             <?php
             if($entry['attachments']

js/osticket.js

@@ -124,38 +124,6 @@ $(document).ready(function(){
         });
         return str;
     };
-});
-
-showImagesInline = function(urls, thread_id) {
-    var selector = (thread_id == undefined)
-        ? '.thread-body img[data-cid]'
-        : '.thread-body#thread-id-'+thread_id+' img[data-cid]';
-    $(selector).each(function(i, el) {
-        var cid = $(el).data('cid').toLowerCase(),
-            info = urls[cid],
-            e = $(el);
-        if (info) {
-            // Add a hover effect with the filename
-            var timeout, caption = $('<div class="image-hover">')
-                .css({'float':e.css('float')});
-            e.wrap(caption).parent()
-                .hover(
-                    function() {
-                        var self = this;
-                        timeout = setTimeout(
-                            function() { $(self).find('.caption').slideDown(250); },
-                            500);
-                    },
-                    function() {
-                        clearTimeout(timeout);
-                        $(this).find('.caption').slideUp(250);
-                    }
-                ).append($('<div class="caption">')
-                    .append('<span class="filename">'+info.filename+'</span>')
-                    .append('<a href="'+info.download_url+'" class="action-button"><i class="icon-download-alt"></i> Download</a>')
-                );
-        }
-    });
 
     var showNonLocalImage = function(div) {
         var $div = $(div),
@@ -212,4 +180,37 @@ showImagesInline = function(urls, thread_id) {
             // TODO: Add a hover-button to show just one image
         });
     });
+});
+
+showImagesInline = function(urls, thread_id) {
+    var selector = (thread_id == undefined)
+        ? '.thread-body img[data-cid]'
+        : '.thread-body#thread-id-'+thread_id+' img[data-cid]';
+    $(selector).each(function(i, el) {
+        var cid = $(el).data('cid').toLowerCase(),
+            info = urls[cid],
+            e = $(el);
+        if (info && !e.data('wrapped')) {
+            // Add a hover effect with the filename
+            var timeout, caption = $('<div class="image-hover">')
+                .css({'float':e.css('float')});
+            e.wrap(caption).parent()
+                .hover(
+                    function() {
+                        var self = this;
+                        timeout = setTimeout(
+                            function() { $(self).find('.caption').slideDown(250); },
+                            500);
+                    },
+                    function() {
+                        clearTimeout(timeout);
+                        $(this).find('.caption').slideUp(250);
+                    }
+                ).append($('<div class="caption">')
+                    .append('<span class="filename">'+info.filename+'</span>')
+                    .append('<a href="'+info.download_url+'" class="action-button"><i class="icon-download-alt"></i> Download</a>')
+                );
+            e.data('wrapped', true);
+        }
+    });
 }