<div class="form-group">
    <label class="col-sm-2 control-label" for="wr_1">서명<strong class="sound_only">필수</strong></label>
    <div class="col-sm-10">
        <?php if($write['wr_1']) { ?>
        <br>
        <img src="<?php echo $write['wr_1'] ?>">
        <?php } ?>
        <input type="hidden" name="wr_1" value="<?php echo $write['wr_1'] ?>" class="form-control input-sm">
        <div id="wr_1"></div>
        <div data-role="page">
            <!-- <div id="page" data-role="content"></div> --><br>
            <div data-role="popup" id="divPopUpSignContract">
                <div class="ui-content popUpHeight">
                    <div id="div_signcontract">
                        <canvas id="canvas">Canvas is not supported</canvas>
                        <div>
                            <input id="btnSubmitSign" class="btn btn-orangered btn-xs" type="button" data-inline="true" data-mini="true" data-theme="b" value="서명확인" onclick="fun_submit()" />
                            <input id="btnClearSign" class="btn btn-orangered btn-xs" type="button" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" />
                            <label id="page" data-role="content"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
var isSign = false;
var leftMButtonDown = false;
jQuery(function() {
    //Initialize sign pad
    init_Sign_Canvas();
});
function fun_submit() {
    if (isSign) {
        var canvas = $("#canvas").get(0);
        var imgData = canvas.toDataURL();
        jQuery('#page').find('p').remove();
        jQuery('#page').find('img').remove();
        jQuery('#page').append(jQuery('<p>위의 서명날인을 사용합니다.</p>'));
        jQuery('#wr_1').append($('<input type="hidden" name="wr_1" class="form-control input-sm">').attr('value', imgData));
        closePopUp();
    } else {
        alert('Please sign');
    }
}
function closePopUp() {
    jQuery('#divPopUpSignContract').popup('close');
    jQuery('#divPopUpSignContract').popup('close');
}
function init_Sign_Canvas() {
    isSign = false;
    leftMButtonDown = false;
    //Set Canvas width
    var sizedWindowWidth = $(window).width();
    if (sizedWindowWidth > 700)
        sizedWindowWidth = $(window).width() / 2;
    else if (sizedWindowWidth > 400)
        sizedWindowWidth = sizedWindowWidth - 100;
    else
        sizedWindowWidth = sizedWindowWidth - 50;
    //$("#canvas").width(sizedWindowWidth);
    $("#canvas").width(283);
    $("#canvas").height(80);
    $("#canvas").css("border", "1px solid #add8e6");
    var canvas = $("#canvas").get(0);
    canvasContext = canvas.getContext('2d');
    if (canvasContext) {
        //canvasContext.canvas.width  = sizedWindowWidth;
        canvasContext.canvas.width = 283;
        canvasContext.canvas.height = 80;
        canvasContext.fillStyle = "#e3f0f5";
        canvasContext.fillRect(0, 0, sizedWindowWidth, 200);
        canvasContext.moveTo(50, 150);
        canvasContext.lineTo(sizedWindowWidth - 50, 150);
        canvasContext.stroke();
        canvasContext.fillStyle = "#000";
        canvasContext.font = "20px Arial";
        canvasContext.fillText("x", 40, 155);
    }
    // Bind Mouse events
    $(canvas).on('mousedown', function(e) {
        if (e.which === 1) {
            leftMButtonDown = true;
            canvasContext.fillStyle = "#000";
            var x = e.pageX - $(e.target).offset().left;
            var y = e.pageY - $(e.target).offset().top;
            canvasContext.moveTo(x, y);
        }
        e.preventDefault();
        return false;
    });
    $(canvas).on('mouseup', function(e) {
        if (leftMButtonDown && e.which === 1) {
            leftMButtonDown = false;
            isSign = true;
        }
        e.preventDefault();
        return false;
    });
    // draw a line from the last point to this one
    $(canvas).on('mousemove', function(e) {
        if (leftMButtonDown == true) {
            canvasContext.fillStyle = "#000";
            var x = e.pageX - $(e.target).offset().left;
            var y = e.pageY - $(e.target).offset().top;
            canvasContext.lineTo(x, y);
            canvasContext.stroke();
        }
        e.preventDefault();
        return false;
    });
    //bind touch events
    $(canvas).on('touchstart', function(e) {
        leftMButtonDown = true;
        canvasContext.fillStyle = "#000";
        var t = e.originalEvent.touches[0];
        var x = t.pageX - $(e.target).offset().left;
        var y = t.pageY - $(e.target).offset().top;
        canvasContext.moveTo(x, y);
        e.preventDefault();
        return false;
    });
    $(canvas).on('touchmove', function(e) {
        canvasContext.fillStyle = "#000";
        var t = e.originalEvent.touches[0];
        var x = t.pageX - $(e.target).offset().left;
        var y = t.pageY - $(e.target).offset().top;
        canvasContext.lineTo(x, y);
        canvasContext.stroke();
        e.preventDefault();
        return false;
    });
    $(canvas).on('touchend', function(e) {
        if (leftMButtonDown) {
            leftMButtonDown = false;
            isSign = true;
        }
    });
}
</script>