<div class="modal hide fade in banner-preview" id="<%= @preview_obj.id %>">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3><%= t(:preview) %></h3>
  </div>
  <div class="modal-body">
    <iframe src=<%= @preview_obj.get_preview_link %>></iframe>
  </div>
  <div class="modal-footer">
    
    <a href="#" class="btn" data-dismiss="modal"><%= t(:close) %></a>
  </div>
  <div>
    <script type="text/javascript" src="/assets/kernel.js"></script>
    <script type="text/javascript">
      var preview_img;

      $(function() {
        $("iframe").load(function() {
          // Get the body element
          var frameBody = $("iframe").contents().find('body');
          // Get all links inside the BODY tag
          $("iframe").contents().find('#orbit-bar').hide();

          $('.thumbnail').each(function(){
            if($(this).children('img').length) preview_img = $(this).children('img').attr('src');
          });
          
          InsertPreviewImage();

          frameBody.find('a').click(function(e){
            //Disable all default actions
            e.preventDefault();
          });
          $('input', frameBody).attr("disabled", true);
        });
        $(".modal").on("hidden", function () {
          $("#show_preview").remove();
        });
      });

      function InsertPreviewImage(){
        if($("iframe").contents().find('.news_image').length){
          $("iframe").contents().find('.news_image').append("<a href='' target='_blank'><img src='"+preview_img+"' width='320' height='240' /></a>");
        }else{
          setTimeout(InsertPreviewImage,1000);
        }
      }
    </script>
  </div>
</div>