Improved img.bi support

following.html

@@ -26,14 +26,12 @@
     <script src="js/twister_directmsg.js"></script>
     <script src="js/twister_actions.js"></script>
     <script src="js/interface_common.js"></script>
+    <script src="js/calm.js"></script>
     <script src="jquery-emotions/jquery.emotions.js"></script>
     <script src="js/sjcl.js"></script>
-    <script src="js/img.bi.js"></script>
-    <script src="js/calm.js"></script>
 
     <script>
     $(function(){initInterfaceFollowing(); homeIntInit();});
-    changeStyle();
     </script>
 
   </head>
@@ -156,6 +154,19 @@
                 <a class="post-info-time"></a>
             </div>
             <p class="post-text"></p>
+            <div class="preview-container"></div>
+            
+            <!-- VIDEO PREVIEW TEMPLATE-->
+            <div id="vidPreviewTmpl" style="display:none">
+              <img src="">
+              <div id="imgOverlay"></div>
+              <div id="descWrap">
+                <a href=""></a>
+                <p></p>
+              </div>
+            </div>
+
+            <div style="clearfix:both"></div>
             <div class="post-context" style="display: none;">
                 <i class="post-retransmited-icon"></i>
                 <span>twisted again by</span>

home.html

@@ -32,7 +32,6 @@
     <script src="js/calm.js"></script>
     <script src="jquery-emotions/jquery.emotions.js"></script>
     <script src="js/sjcl.js"></script>
-    <script src="js/img.bi.js"></script>
     <script>
     $(function(){setInterval("networkUpdate()", 2000); homeIntInit();})
     </script>
@@ -218,7 +217,7 @@
             <p class="post-text"></p>
             <div class="preview-container"></div>
             
-            <!-- YOUTUBE PREVIEW TEMPLATE-->
+            <!-- VIDEO PREVIEW TEMPLATE-->
             <div id="vidPreviewTmpl" style="display:none">
               <img src="">
               <div id="imgOverlay"></div>

js/calm.js

@@ -16,7 +16,6 @@ $(function(){
     $('.bitmessage-ctc').on('click', function(){
     	window.prompt('Press Ctrl/Cmd+C to copy then Enter to close', $(this).attr('data'))
     })
-
 })
 
 function dhtIndicatorBg(){

js/img.bi.js

@@ -1,37 +0,0 @@
-(function () {
-  if (window.addEventListener) {
-    window.addEventListener('load', imgBiJS, false);
-  }
-  else if(window.attachEvent) {
-    window.attachEvent('onload', imgBiJS);
-  }
-  else {
-    document.addEventListener('load', imgBiJS, false);
-  }
-  function imgBiJS() {
-    var elems = document.querySelectorAll('[data-imgbi]');
-    i = elems.length;
-    while (i--) {
-      var params = elems[i].dataset.imgbi.split('!');
-      imgBiJSDownload(params[0].replace('#','') + 'download/' + params[1], params[2], elems[i], new XMLHttpRequest());
-    }
-  }
-  function imgBiJSDownload(url, pass, elem, request) {
-    request.open('GET', url);
-    request.onload = function() {
-      if (request.status == 200) {
-        var result = sjcl.decrypt(pass,request.responseText);
-        if (result) {
-          elem.src = result;
-        }
-        else {
-          console.log('Failed to decrypt image');
-        }
-      }
-      else {
-        console.log('Failed to load image');
-      }
-    };
-    request.send(null);
-  }
-})();

js/twister_formatpost.js

@@ -312,13 +312,36 @@ function imagePreview(link) {
     var linkAnon = proxyOpt !== 'disable' ? proxyOpt : '';
         
     if (link && /https:\/\/img.bi/i.test(link)){
-        return '<img data-imgbi="'+link+'" class="image-preview" />';
-        //imgBiJS();
-    }else{
+        getImgbi(link);
+        return '<img data-imgbi="'+link+'" class="image-preview imgbi"/>';
+    } else {
         var cleanLink;
         if(/\.gif\b/i.test(cleanLink) && $.Options.getOption('imagesPreviewGif', 'true') === 'false') return;
         cleanLink = link.replace(/^http[s]?:\/\//i, 'http://');
         return '<img src="'+linkAnon+cleanLink+'" class="image-preview" />';
+    };
+};
+
+function getImgbi(link) {
+    var params = link.split('!');
+    imgBiJSDownload(params[0].replace('#','') + 'download/' + params[1], params[2], new XMLHttpRequest(), link);
+
+    function imgBiJSDownload(url, pass, request, link) {
+        request.open('GET', url);
+        request.onload = function() {
+            if (request.status == 200) {
+                var result = sjcl.decrypt(pass,request.responseText);
+                if (result) {
+                    var elem = $('img[data-imgbi="'+link+'"]')[0];
+                    elem.src = result;
+                } else {
+                    console.log('Failed to decrypt image');
+                }
+            } else {
+                console.log('Failed to load image');
+            }
+        };
+        request.send(null);
     }
 }
 
@@ -332,7 +355,7 @@ function getYoutubePreview(link, ytid) {
         vidPreviewTmpl.find('a').text(ytDataStorage[ytid].title).attr('href', link).attr('target', '_blank');
         if (ytDataStorage[ytid].description) vidPreviewTmpl.find('p').html(ytDataStorage[ytid].description+'…');
         return vidPreviewTmpl;
-    }else{
+    } else {
         $.ajax({
             url: "http://gdata.youtube.com/feeds/api/videos/"+ytid+"?v=2&alt=jsonc",
             dataType: 'jsonp',
@@ -352,8 +375,8 @@ function getYoutubePreview(link, ytid) {
                 $('[data-youtube-id='+ytid+']').append(vidPreviewTmpl);
             }
         });
-    }
-}
+    };
+};
 
 function getVimeoPreview (link, vimid) {
     var vidPreviewTmpl = $('#vidPreviewTmpl').clone(true).removeAttr('style').removeAttr('class').addClass("vimeo");
@@ -364,7 +387,7 @@ function getVimeoPreview (link, vimid) {
         vidPreviewTmpl.find('a').text(vimDataStorage[vimid].title).attr('href', link).attr('target', '_blank');
         if (vimDataStorage[vimid].description) vidPreviewTmpl.find('p').html(vimDataStorage[vimid].description+'…');
         return vidPreviewTmpl;
-    }else{
+    } else {
         $.ajax({
             url: "http://vimeo.com/api/v2/video/"+vimid+".json",
             dataType: 'json',
@@ -384,5 +407,5 @@ function getVimeoPreview (link, vimid) {
                 $('[data-vimeo-id='+vimid+']').append(vidPreviewTmpl);
             }
         });
-    }
-}
+    };
+};