//获取相对于屏幕左边距离
function getPosition(node){
    var left = node.offsetLeft;
    var top = node.offsetTop;
    var parent = node.offsetParent;
    while(parent != null){
    left = left + parent.offsetLeft;
    top = top + parent.offsetTop;
    parent = parent.offsetParent;
    }
    return {"left":left,"top":top};
}
/////////////////////////////////////////////////////////
  var rightDiv = document.getElementById("midright");
  var upDiv = document.getElementById("topmid");
  var leftDiv = document.getElementById("midleft");
  var downDiv = document.getElementById("botmid");
  //////////////////////////////////////////////////
  var mainDiv = document.getElementById("main");
  var ifkeydown = false;
  var contact = "";
  /////////////////////////////////////////////
  rightDiv.onmousedown = function(){
      ifkeydown = true;
      contact = "right";
      }
  rightDiv.onmouseup = function(){
      ifkeydown = false;
      }

  upDiv.onmousedown = function(){
      ifkeydown = true;
      contact = "up";
      }  
  upDiv.onmouseup = function(){
      ifkeydown = false;
      }

  leftDiv.onmousedown = function(){
      ifkeydown = true;
      contact = "left";
      }  
  leftDiv.onmouseup = function(){
      ifkeydown = false;
      }
  downDiv.onmousedown = function(){
      ifkeydown = true;
      contact = "down";
      }  
  downDiv.onmouseup = function(){
      ifkeydown = false;
      }
  //////////////
   window.onmousemove= function(e){
      if(ifkeydown == true ){
          if(contact == "right"){
              var x = e.clientX;//鼠标X坐标
              var widthBefore = mainDiv.offsetWidth ;//选取框变化前宽度
              var addWidth = x - widthBefore - getPosition(mainDiv).left;
              mainDiv.style.width = widthBefore + addWidth + "px"; //变化后的宽度
               }
               else if(contact =="down"){
                   var y = e.clientY;//鼠标X坐标
                   var heightBefore = mainDiv.offsetHeight ;//选取框变化前宽度
                   var addHeight = y - heightBefore - getPosition(mainDiv).top;
                   mainDiv.style.height = heightBefore + addHeight + "px";
               }
               else if(contact == "up"){
                   var y = e.clientY;
                   var heightBefore = mainDiv.offsetHeight;
                   var addHeight = getPosition(mainDiv).top - y;                   
                   mainDiv.style.height = heightBefore + addHeight + "px";
                   mainDiv.style.top = mainDiv.offsetTop - addHeight + "px";
               }
               else if(contact =="left"){
                   var x = e.clientX;//鼠标X坐标
                   var addWidth = getPosition(mainDiv).left - x;
                   var widthBefore = mainDiv.offsetWidth ;//选取框变化前宽度
                   mainDiv.style.width = widthBefore + addWidth + "px";
                   mainDiv.style.left = mainDiv.offsetLeft - addWidth + "px";
               }
               setChoice();
         }
    }
    ///////////////////////////////////
    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)";
    }