@{
    Layout = "~/Areas/Manage/Views/DefaultSkin/Shared/_Layout_Base.cshtml";
    var ImgPath = ViewBag.ImgPath as string;
    var maxW = 500;
}

<script src="~/App_Scripts/Jquery/plugin/tapmodo-Jcrop-1902fbc/js/jquery.Jcrop.js"></script>
<script type="text/javascript">
    //裁剪图片的方法
    jQuery(function ($) {
        // Create variables (in this scope) to hold the API and image size
        var jcrop_api,
            boundx,
            boundy,
            // Grab some information about the preview pane
            $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),
            xsize = $pcnt.width(),
            ysize = $pcnt.height();
        console.log('init', [xsize, ysize]);
        $('#target').Jcrop({
            onChange: updatePreview,
            onSelect: updatePreview,
            aspectRatio: xsize / ysize
        }, function () {
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });
        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
            }
            //裁剪的边界的参数
            $('#x1').val(c.x);
            $('#y1').val(c.y);
            $('#x2').val(c.x2);
            $('#y2').val(c.y2);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };
    });
    //提交裁剪缩略图
    function postThumbnails() {
        //http://localhost:9999/Upload/PostThumbnails
        //http://localhost:43584/api/Interaction/UploadFile
        $.messager.progress();	// 显示进度条
        var url = "/manage/default/UploadThumbnails";
        var json = { x1: parseInt($("#x1").val()), y1: parseInt($("#y1").val()), x2: parseInt($("#x2").val()), y2: parseInt($("#y2").val()), w: '@(ViewBag.Width)', h: '@(ViewBag.Height)', maxW: '@(maxW)', name: '@(ImgPath)' };
        $.post(url, json, function (data) {
            //隐藏进度条
            $.messager.progress('close');
            if (data.success) {
                window.parent.SetLogoNewValue_@(Request["ID"])(data.result);
                //$.messager.alert('提示', "图片裁剪成功！", 'info');
                window.parent.close();
            } else {
                $.messager.alert('错误', data.error.message, 'error');
            }
        }, "json");
    }
</script>
<link href="~/App_Scripts/Jquery/plugin/tapmodo-Jcrop-1902fbc/css/jquery.Jcrop.css" rel="stylesheet" />
<link rel="stylesheet" href="~/App_Scripts/Jquery/plugin/jquery.easyui/themes/gray/easyui.css" rel="stylesheet">
<style type="text/css">
		/* Apply these styles only when #preview-pane has
		been placed within the Jcrop widget */
		.jcrop-holder #preview-pane {
			display: block;
			position: absolute;
			z-index: 2000;
			top: 10px;
			left:600px;
			padding: 6px;
			border: 1px rgba(0,0,0,.4) solid;
			background-color: white;
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
			-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
			box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		}
		/* The Javascript code will set the aspect ratio of the crop
		area based on the size of the thumbnail preview,
		specified here */
		#preview-pane .preview-container {
			width: @(ViewBag.Width)px;
			height: @(ViewBag.Height)px;
			overflow: hidden;
		}
		.easyui-linkbutton{
			font-size: 12px;
			font-family: 宋体;
			text-align: center;
		}
</style>

@*<body style="padding-top: 15px; padding-left: 15px;">*@
<div style="padding-top: 15px; padding-left: 15px;">
    <form id="coords" class="coords">
        <div class="inline-labels" style="display:none;">
            <label>
                X1
                <input type="text" size="4" id="x1" name="x1" />
            </label>
            <label>
                Y1
                <input type="text" size="4" id="y1" name="y1" />
            </label>
            <label>
                X2
                <input type="text" size="4" id="x2" name="x2" />
            </label>
            <label>
                Y2
                <input type="text" size="4" id="y2" name="y2" />
            </label>
            <label>
                W
                <input type="text" size="4" id="w" name="w" />
            </label>
            <label>
                H
                <input type="text" size="4" id="h" name="h" />
            </label>
            <label>
                N
                <input type="text" id="name" name="name" value="@(ImgPath)" />
            </label>
        </div>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="postThumbnails()"><span class="l-btn-left"><span class="l-btn-text">确认裁剪图片</span></span></a>
        <span style="color:#f00;">@(Request["width"])</span>×<span style="color:#f00;">@(Request["height"])</span> px
        <br /><br />
    </form>
    <div class="jc-demo-box">
        <img src="@(ImgPath)" id="target" alt="[Example]" width="@(maxW)" />
        <div id="preview-pane">

            <div class="preview-container">
                <img src="@(ImgPath)" class="jcrop-preview" alt="Preview" />
            </div>
        </div>
    </div>
</div>
@*</body>*@
