<?php include $this->admin_tpl('meta', 'admin');?>
<title>图像裁剪 - YzmCMS内容管理系统</title>
<link rel="stylesheet" type="text/css" href="<?php echo STATIC_URL;?>plugin/cropper/3.1.6/cropper.css">
<script type="text/javascript" src="<?php echo STATIC_URL;?>plugin/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="<?php echo STATIC_URL;?>plugin/cropper/3.1.6/cropper.js"></script>
<script type="text/javascript" src="<?php echo STATIC_URL;?>plugin/layer/layer.js"></script>
</head>
<body>
<div class="container_box">
    <div class="container">
        <img id="image" src="<?php echo $filepath;?>">
    </div>

    <div class="con_right">
        <div class="preview">
            <div class="preview_img small_lg"></div>
            <div class="preview_img small_md"></div>
            <div class="preview_img small_sm"></div>
        </div>

        <div class="toggles">
            <span title="4:3比例" onclick="yzm_toggle(this, 4/3)">4:3</span>
            <span title="3:2比例" class="on" onclick="yzm_toggle(this, 3/2)">3:2</span>
            <span title="1:1比例" onclick="yzm_toggle(this, 1/1)">1:1</span>
            <span title="2:3比例" onclick="yzm_toggle(this, 2/3)">2:3</span>
            <span title="自由裁剪" onclick="yzm_toggle(this, NaN)">自由</span>
        </div>

<!--         <div class="toggles">
            <span title="逆时针旋转45度" class="rotate1"><i class="Hui-iconfont">&#xe66b;</i></span>
            <span title="顺时针旋转45度" class="rotate2"><i class="Hui-iconfont">&#xe66c;</i></span>
            <span title="左右旋转" class="about"><i class="Hui-iconfont">&#xe6fd;</i></span>
            <span title="上下旋转" class="updown"><i class="Hui-iconfont">&#xe6fc;</i></span>
            <span title="重置" class="reset"><i class="Hui-iconfont">&#xe68f;</i></span>
        </div> -->
    </div>

    <div class="clearfix"></div>
    <form  action="" method="post" id="myform">
        <input type="hidden" name="filepath" value="<?php echo $filepath;?>">
        <input type="hidden" value="" name="x" />
        <input type="hidden" value="" name="y" />
        <input type="hidden" value="" name="w" />
        <input type="hidden" value="" name="h" />
    </form>
    <input type="hidden" name="new_filename" id="new_filename">
    <div class="bottom_button">
        <input type="button" class="btn btn-primary radius" id="determine" onclick="dosbumit()" value="&nbsp;&nbsp;确定&nbsp;&nbsp;">
        <input type="button" class="btn btn-default radius" id="cancel" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
    </div>
</div>
<script type="text/javascript">
    init_crop();
    function init_crop(){
        $(".preview_img").html('<img src="' + $("#image").attr('src')  + '">');
        $('.container > img').cropper({
            aspectRatio: <?php echo $spec;?>,
            viewMode : 1,
            preview: '.preview_img', 
            crop: function(data) {
                $("input[name='x']").val(data.x);
                $("input[name='y']").val(data.y);
                $("input[name='w']").val(data.width);
                $("input[name='h']").val(data.height);
            }
        })
    }

    function dosbumit(){
		layer.msg('正在处理中……', {icon:16,shade:0.21,shadeClose:true,time:999999});
        $.ajax({
            type: 'POST',
            url: '<?php echo U('img_cropper');?>', 
            data: $("#myform").serialize(),
            dataType: "json", 
            success: function (msg) {
                if(msg.status == 1){
                    $("#new_filename").val(msg.filepath);
                    layer.msg('保存成功!', {icon: 6,time:1000});
                    setTimeout(cropper_close, 1500);
                }else{
                    layer.alert('保存失败');
                }
            }
        })
        return false;       
    }

    var index = parent.layer.getFrameIndex(window.name);

    $('#cancel').on('click', function(){
        parent.layer.close(index);
    });

    function cropper_close(){
        var new_filename = $("#new_filename").val();
        parent.$("#<?php echo $cid;?>").val(new_filename);
        parent.$("#<?php echo $cid;?>_src").attr("src", new_filename);
        parent.layer.close(index);
    }

    function yzm_toggle(obj, n) {
        $(obj).addClass('on').siblings().removeClass('on');
        $('#image').cropper('setAspectRatio', n);
    }

    $('.rotate1').on('click', function(){
        $('#image').cropper('rotate', -45);
    });
    $('.rotate2').on('click', function(){
        $('#image').cropper('rotate', 45);
    });
    $('.about').on('click', function(){
        $('#image').cropper("scaleX", -1);
    });
    $('.updown').on('click', function(){
        $('#image').cropper("scaleY", -1);
    });
    $('.reset').on('click', function(){
        $('#image').cropper('reset');
    });
</script>
</body>
</html>