<style type="text/css">
body                                        { background:#222; margin:0px; overflow-x:hidden; }
body::-webkit-scrollbar                     { width:10px; height:10px; }
body::-webkit-scrollbar-thumb               { background-color:#d32f2f; }
body::-webkit-scrollbar-thumb:hover         { background-color:#00ff00; }
</style>
<?php
@extract($_GET);
echo "<script src='../../../js/jquery-1.12.4.min.js?ver=210618'></script>";
echo "<img src='{$fileurl}' alt='' class='draggable' style='position:relative;top:0;left:0;cursor:move;'>";
?>

<script>
jQuery(function($){
$.fn.imgLoad = function(callback) {
    return this.each(function() {
        if (callback) {
            if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                callback.apply(this);
            }
            else {
                $(this).on('load', function(){
                    callback.apply(this);
                });
            }
        }
    });
};
    $(".bbs-view-image img").imgLoad(function(){
        var win_w = 736;
        var win_h = 1472 + 70;

        if( !win_w || !win_h ){
            win_w = $(this).width();
            win_h = $(this).height();
        }
        var win_l = (screen.width - win_w) / 2;
        var win_t = (screen.height - win_h) / 2;
        if(win_w > screen.width) {
            win_l = 0;
            win_w = screen.width - 20;
            if(win_h > screen.height) {
                win_t = 0;
                win_h = screen.height - 40;
            }
        }
        if(win_h > screen.height) {
            win_t = 0;
            win_h = screen.height - 40;

            if(win_w > screen.width) {
                win_w = screen.width - 20;
                win_l = 0;
            }
        }
        if(win_w < screen.width) {
            if(window.outerWidth){
                win_w = win_w + (window.outerWidth - (document.documentElement.clientWidth || window.innerWidth));
            }
        }
        window.moveTo(win_l, win_t);
        window.resizeTo(win_w, win_h);
    });
    var is_draggable = false;
    var x = y = 0;
    var pos_x = pos_y = 0;
    $(".draggable").mousemove(function(e) {
        if(is_draggable) {
            x = parseInt($(this).css("left")) - (pos_x - e.pageX);
            y = parseInt($(this).css("top")) - (pos_y - e.pageY);
            pos_x = e.pageX;
            pos_y = e.pageY;
            $(this).css({ "left" : x, "top" : y });
        }
        return false;
    });
    $(".draggable").mousedown(function(e) {
        pos_x = e.pageX;
        pos_y = e.pageY;
        is_draggable = true;
        return false;
    });

    $(".draggable").mouseup(function() {
        is_draggable = false;
        return false;
    });

    $(".draggable").dblclick(function() {
        window.close();
    });
});
</script>