$(function() {

        // The preview image added after a topic title
        $('a.topictitle').after(' <img id="topicPreview" src="http://hitskin.com/themes/20/23/90/i_icon_latest_reply.png" title="عرض فورى للموضوع" alt="Preview" style="cursor:pointer;" />');
   
        // Once the preview image is clicked
        // we appened the HTML below to the document
        $('img#topicPreview').click(function() {
            $('body').append(
       
                '<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div>'+
           
                '<div id="topicPreview-container" style="top:20%;left:15%;right:15%;padding:4px;position:fixed;z-index:50;background:#D1D1D1;border-radius:5px;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;">'+
                    '<style>'+
                        '#closeButton {color:#fff;font-size:10px;font-weight:bold;background:rgba(0,0,0,0.6);box-shadow:0px 0px 2px rgba(0,0,0,1) inset;text-shadow:0px 0px 1px #000;display:inline-block;border-radius:30px;padding:3px 6px;cursor:pointer;position:absolute;top:-8px;right:-8px;}'+
                        '#closeButton:hover {background:#D56262;}'+
                    '</style>'+
                    '<div id="closeButton">اغلاق الصفحة</div>'+
                    '<div id="topicPreviewing" style="max-height:600px;overflow-y:auto;">'+
                        '<center>'+
                            '<span class="topicPreview-loading" style="font-weight:bold;font-size:18px;">'+
                                'انتظر من فضلك'+
                            '</span>'+
                        '</center>'+
                    '</div>'+
                '</div>'
           
            );
       
            // Load the first post of a topic
            $('#topicPreviewing').load(jQuery(this).siblings('a.topictitle').attr('href')+' .post:eq(0)');
       
            // Remove preview on click of the filter
            $('div#preview-filter, #closeButton').click(function() {
              $('#preview-filter, #topicPreview-container').remove();
          });
        });
    });

        #topicPreview-container {
          left:2% !important;
          right:2% !important;
          top:7% !important;
        }