< html >
< head >

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script> -->
<script src="./jquery-1.8.1.min.js"></script>
<script src="./jquery-ui-1.10.4.custom.min.js"></script>
<script src="./test.js"></script> 
<style type="text/css">
    body{
        background: -sharp333;
    }
    -sharpbox{
        position: absolute;
        top:100px;
        left: 200px;
    }
    -sharpimg1{
        opacity: 0.7;
        position: absolute;
        top:0;
        left:0;
    }
    -sharpimg2{
        position: absolute;
        top:0;
        left:0;
        clip:rect(0,200px,200px,0)
    }
    -sharpmain{
        border:1px solid -sharpfff;
        width:200px;
        height: 200px;
        position: absolute;
        top:0;
        left:0;
    }
    .minDiv{
       position: absolute;
       width: 8px;
       height: 8px;
       background: -sharpfff;
   } 
   -sharpleft-up{
       top: -4px;
       left: -4px;
       cursor: nw-resize;
   }
   -sharpup{
        left:50%;
        top:0;
        margin-top: -4px;
        margin-left:-4px; 
        cursor: n-resize;
   }
   -sharpright-up{
       right:-4px;
       top:-4px;
       cursor: ne-resize;
   }
   -sharpright{
        top:50%;
        margin-top: -4px;
        right:-4px; 
        cursor: e-resize;
   }
   -sharpright-down{
        bottom:-4px;
        right:-4px;
        cursor: se-resize;
   }
   -sharpdown{
        left:50%;
        bottom:-4px;
        margin-left:-4px; 
        cursor: s-resize;
   }
   -sharpleft-down{
        left:-4px;
        bottom:-4px;
        cursor: sw-resize;
   }
   -sharpleft{
        left:-4px;
        top:50%;
        margin-top: -4px;
        cursor: w-resize;
   }
   -sharppreview{
       position: absolute;
        top:100px;
        left:800px;
   }
   -sharppreview img{
       position: absolute;
   }
</style>

< / head >
< body >

<div id="box">
    <img src="./images/032d0ff1-f77f-4830-a469-f3564d55e0c5.jpg" id="img1">
    <img src="./images/032d0ff1-f77f-4830-a469-f3564d55e0c5.jpg" id="img2">
    <div id="main">
        <div class="minDiv" id="left-up"></div>
        <div class="minDiv" id="up"></div>
        <div class="minDiv" id="right-up"></div>
        <div class="minDiv" id="right"></div>
        <div class="minDiv" id="right-down"></div>
        <div class="minDiv" id="down"></div>
        <div class="minDiv" id="left-down"></div>
        <div class="minDiv" id="left"></div>
    </div>
</div>
<div id="preview">
    <img src="./images/032d0ff1-f77f-4830-a469-f3564d55e0c5.jpg" id="img3">
</div>
<script>
 
</script>

< / body >
< / html >

window.onload=function () {

document.onselectstart=new Function("event.returnValue=false;");
var rightDiv=document.getElementById("right");
var upDiv=document.getElementById("up");
var leftDiv=document.getElementById("left");
var downDiv=document.getElementById("down");
var leftUpDiv=document.getElementById("left-up");
var rightUpDiv=document.getElementById("right-up");
var rightDownDiv=document.getElementById("right-down");
var leftDownDiv=document.getElementById("left-down");
var mainDiv=document.getElementById("main");
var ifKeyDown=false;
var contact="";
rightDiv.onmousedown=function(e){
    e.stopPropagation();
    ifKeyDown=true;
    contact="right";
}
upDiv.onmousedown=function(e){
    e.stopPropagation();
    ifKeyDown=true;
    contact="up";
}
leftDiv.onmousedown=function(e){
    e.stopPropagation();
    ifKeyDown=true;
    contact="left";
}
downDiv.onmousedown=function(e){
    e.stopPropagation();
    ifKeyDown=true;
    contact="down";
}
leftUpDiv.onmousedown=function(e){
    e.stopPropagation();
    ifKeyDown=true;
    contact="left-up";
}
rightUpDiv.onmousedown=function(e){
    e.stopPropagation();
    ifKeyDown=true;
    contact="right-up";
}
rightDownDiv.onmousedown=function(e){
    e.stopPropagation();
    ifKeyDown=true;
    contact="right-down";
}
leftDownDiv.onmousedown=function(e){
    e.stopPropagation();
    ifKeyDown=true;
    contact="left-down";
}
window.onmouseup=function(){
    ifKeyDown=false;
}
window.onmousemove=function(e){
    if(ifKeyDown==true){
        switch(contact){
            case "right":rightMove(e); break;
            case "up": upMove(e);break;
            case "left": leftMove(e);break;
            case "down": downMove(e);break;
            case "left-up":
                    leftMove(e);
                    upMove(e);
                    break;
            case "right-up":
                rightMove(e);
                upMove(e);
                break;
            case "right-down":
                rightMove(e);
                downMove(e);
                break;
            case "left-down":
                leftMove(e);
                downMove(e);
                break;
        }
    }
    setChoice();
    setPreview();
}
function rightMove(e){
    var x=e.clientX;
    var addWidth="";
    var widthBefore=mainDiv.offsetWidth-2;
    addWidth=x-getPosition(mainDiv).left- widthBefore;
    mainDiv.style.width=widthBefore+addWidth+"px";
}
function upMove(e){
    var y=e.clientY;
    var mainY=getPosition(mainDiv).top;
    var addHeight=mainY-y;
    var heightBefore=mainDiv.offsetHeight-2;
    mainDiv.style.height=heightBefore+addHeight+"px";
    mainDiv.style.top=mainDiv.offsetTop-addHeight;
}
function leftMove(e){
    var x=e.clientX;
    var mainX=getPosition(mainDiv).left;
    var addWidth=mainX-x;
    var widthBefore=mainDiv.offsetWidth-2;
    mainDiv.style.width=widthBefore+addWidth+"px";
    mainDiv.style.left=mainDiv.offsetLeft-addWidth;
}
function downMove(e){
    var y=e.clientY;
    var heightBefore=mainDiv.offsetHeight-2;
    var mainY=getPosition(mainDiv).top;
    var addHeight=y-heightBefore-mainY;
    mainDiv.style.height=heightBefore+addHeight+"px";
}
function getPosition(node){
    var left=node.offsetLeft;
    var top=node.offsetTop;
    var parent=node.offsetParent;
    while(parent != null){
        left+=parent.offsetLeft;
        top+=parent.offsetTop;
        parent=parent.offsetParent;
        
    }
    return {"left":left,"top":top};
}
function setChoice(){
    var top=mainDiv.offsetTop;
    var right=mainDiv.offsetLeft+mainDiv.offsetWidth;
    var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;
    var left=mainDiv.offsetLeft;
    var img2=document.getElementById("img2");
    img2.style.clip="rect("+top+"px,"+"right"+"px,"+bottom+"px,"+left+"px)";

}
function setPreview(){
    var top=mainDiv.offsetTop;
    var right=mainDiv.offsetLeft+mainDiv.offsetWidth;
    var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;
    var left=mainDiv.offsetLeft;
    img3=document.getElementById("img3")
    img3.style.top=-top+"px";
    img3.style.left=-left+"px";
    img3.style.clip="rect("+top+"px,"+"right"+"px,"+bottom+"px,"+left+"px)";
}

}