{template "header.html"}

<link href="{THEME_PATH}assets/global/plugins/cropper/css/cropper.css" rel="stylesheet" type="text/css" />
<link href="{THEME_PATH}assets/global/plugins/cropper/css/main.css" rel="stylesheet" type="text/css" />

<script src="{THEME_PATH}assets/global/plugins/cropper/js/cropper.js" type="text/javascript"></script>
<script src="{THEME_PATH}assets/global/plugins/cropper/js/main.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function (){
        var img = $('#image');
        var realWidth;//真实的宽度
        var realHeight;//真实的高度
        $("<img/>").attr("src", $(img).attr("src")).on('load', function() {
            $('#image_cc').html(this.width+'X'+this.height);
        });
    });
</script>
<form class="form-horizontal" method="post" style="margin-top: -20px;" role="form" id="myform">
    {$form}
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center margin-bottom-20">
                <a href="{$data.url}" target="_blank">{$data.url}</a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <!-- <h3>Demo:</h3> -->
                <div class="img-container">
                    <img id="image" src="{$data.url}?{SYS_TIME}" alt="Picture">
                    <canvas id="brushCanvas" style="position: absolute;left: 0;top: 0;z-index: 20;display: none;"></canvas>
                </div>
                <div class="margin-top-10 margin-bottom-10 text-center" style="clear: both">
                    {dr_lang('图片实际尺寸：')}<span id="image_cc"></span>
                </div>
            </div>
            <div class="col-md-3">
                <!-- <h3>Preview:</h3> -->
                <div class="docs-preview clearfix">
                    <div class="img-preview preview-lg"></div>
                </div>

                <!-- <h3>Data:</h3> -->
                <div class="docs-data">
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon" for="dataX">X</label>
                        <input type="text" class="form-control" readonly name="data[x]" id="dataX" placeholder="x">
                        <span class="input-group-addon">px</span>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon" for="dataY">Y</label>
                        <input type="text" class="form-control" readonly name="data[y]" id="dataY" placeholder="y">
                        <span class="input-group-addon">px</span>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon" for="dataWidth">Width</label>
                        <input type="text" class="form-control" readonly name="data[w]" id="dataWidth" placeholder="width">
                        <span class="input-group-addon">px</span>
                    </div>
                    <div class="input-group input-group-sm">
                        <label class="input-group-addon" for="dataHeight">Height</label>
                        <input type="text" class="form-control" readonly name="data[h]" id="dataHeight" placeholder="height">
                        <span class="input-group-addon">px</span>
                    </div>

                    <div class="input-group input-group-sm hide">
                        <label class="input-group-addon" for="dataRotate">Rotate</label>
                        <input type="text" class="form-control" name="data[r]" id="dataRotate" placeholder="rotate">
                        <span class="input-group-addon">deg</span>
                    </div>

                    <div class="input-group input-group-sm hide">
                        <label class="input-group-addon" for="dataScaleX">ScaleX</label>
                        <input type="text" class="form-control" name="data[sx]" id="dataScaleX" placeholder="scaleX">
                        <span class="input-group-addon">px</span>
                    </div>

                    <div class="input-group input-group-sm hide">
                        <label class="input-group-addon" for="dataScaleY">ScaleY</label>
                        <input type="text" class="form-control" name="data[sy]" id="dataScaleY" placeholder="scaleY">
                        <span class="input-group-addon">px</span>
                    </div>
                    <input type="hidden" name="data[brush]" id="dataBrush" value="">
                    <input type="hidden" name="data[brush_points]" id="dataBrushPoints" value="">
                    <input type="hidden" name="data[brush_color]" id="dataBrushColor" value="#ff0000">
                    <input type="hidden" name="data[brush_size]" id="dataBrushSize" value="24">
                    <div class="margin-top-10">
                        <button type="button" class="btn btn-xs btn-warning" id="toggleBrush">{dr_lang('开启画笔')}</button>
                        <button type="button" class="btn btn-xs btn-default" id="clearBrush">{dr_lang('清空笔迹')}</button>
                    </div>
                    <div class="input-group input-group-sm margin-top-10">
                        <label class="input-group-addon" for="brushSize">{dr_lang('笔刷大小')}</label>
                        <input type="range" class="form-control" id="brushSize" min="8" max="80" value="24">
                        <span class="input-group-addon"><span id="brushSizeText">24</span>px</span>
                    </div>
                    <div class="input-group input-group-sm margin-top-10">
                        <label class="input-group-addon" for="brushColor">{dr_lang('画笔颜色')}</label>
                        <input type="color" class="form-control" id="brushColor" value="#ff0000">
                    </div>
                    <div class="margin-top-10 text-muted margin-bottom-20">
                        <span id="brushStatus">{dr_lang('未开启画笔')}</span>
                    </div>
                </div>
                <div class="docs-buttons">
                <!-- <h3>Toolbar:</h3> -->


                <div class="btn-group">
                    <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, 0.1)">
              <span class="fa fa-search-plus"></span>
            </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, -0.1)">
              <span class="fa fa-search-minus"></span>
            </span>
                    </button>
                </div>

                <div class="btn-group">
                    <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;move&quot;, -10, 0)">
              <span class="fa fa-arrow-left"></span>
            </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;move&quot;, 10, 0)">
              <span class="fa fa-arrow-right"></span>
            </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;move&quot;, 0, -10)">
              <span class="fa fa-arrow-up"></span>
            </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;move&quot;, 0, 10)">
              <span class="fa fa-arrow-down"></span>
            </span>
                    </button>
                </div>

                <div class="btn-group">
                    <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, -45)">
              <span class="fa fa-rotate-left"></span>
            </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, 45)">
              <span class="fa fa-rotate-right"></span>
            </span>
                    </button>
                </div>

                <div class="btn-group">
                    <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;scaleX&quot;, -1)">
              <span class="fa fa-arrows-h"></span>
            </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;scaleY&quot;, -1)">
              <span class="fa fa-arrows-v"></span>
            </span>
                    </button>
                </div>

                <div class="btn-group">
                    <button type="button" class="btn btn-primary" data-method="crop" title="Crop">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;crop&quot;)">
              <span class="fa fa-check"></span>
            </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-method="clear" title="Clear">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;clear&quot;)">
              <span class="fa fa-remove"></span>
            </span>

                        <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;reset&quot;)">
              <span class="fa fa-refresh"></span>
            </span>
                        </button>
                    </button>
                </div>




            </div><!-- /.docs-buttons -->

                <div class="docs-toggles">
                <!-- <h3>Toggles:</h3> -->
                <div class="btn-group btn-group-justified" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
                        <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 16 / 9">
              16:9
            </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
                        <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 4 / 3">
              4:3
            </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
                        <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 1 / 1">
              1:1
            </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
                        <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 2 / 3">
              2:3
            </span>
                    </label>
                    <label class="btn btn-primary active">
                        <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN" checked>
                        <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: NaN">
              Free
            </span>
                    </label>
                </div>

                <div class="btn-group btn-group-justified" data-toggle="buttons">
                    <label class="btn btn-primary active">
                        <input type="radio" class="sr-only" id="viewMode0" name="viewMode" value="0" checked>
                        <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 0">
              VM0
            </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="viewMode1" name="viewMode" value="1">
                        <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 1">
              VM1
            </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="viewMode2" name="viewMode" value="2">
                        <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 2">
              VM2
            </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="viewMode3" name="viewMode" value="3">
                        <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 3">
              VM3
            </span>
                    </label>
                </div>



            </div><!-- /.docs-toggles -->
            </div>
        </div>
    </div>
</form>

{template "footer.html"}