[Sommaire] [Imprimer]

   1  /***********************************************************************
   2  ** Title.........:  Online Image Editor Interface
   3  ** Version.......:  1.0
   4  ** Author........:  Xiang Wei ZHUO <wei@zhuo.org>
   5  ** Filename......:  EditorContents.js
   6  ** Last changed..:  31 Mar 2004 
   7  ** Notes.........:  Handles most of the interface routines for the ImageEditor.
   8  *
   9  * Added:  29 Mar 2004  - Constrainted resizing/scaling
  10  **/ 
  11  
  12  
  13  function MM_findObj(n, d) { //v4.01
  14    var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  15      d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  16    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  17    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  18    if(!x && d.getElementById) x=d.getElementById(n); return x;
  19  }
  20  
  21  var pic_x, pic_y;
  22  function P7_Snap() { //v2.62 by PVII
  23    var x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,args=P7_Snap.arguments;a=parseInt(a);
  24    for (k=0; k<(args.length-3); k+=4)
  25     if ((g=MM_findObj(args[k]))!=null) {
  26      el=eval(MM_findObj(args[k+1]));
  27      a=parseInt(args[k+2]);b=parseInt(args[k+3]);
  28      x=0;y=0;ox=0;oy=0;p="";tx=1;da="document.all['"+args[k]+"']";
  29      if(document.getElementById) {
  30       d="document.getElementsByName('"+args[k]+"')[0]";
  31       if(!eval(d)) {d="document.getElementById('"+args[k]+"')";if(!eval(d)) {d=da;}}
  32      }else if(document.all) {d=da;} 
  33      if (document.all || document.getElementById) {
  34       while (tx==1) {p+=".offsetParent";
  35        if(eval(d+p)) {x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop"));
  36        }else{tx=0;}}
  37       ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);var tw=x+ox+y+oy;
  38       if(tw==0 || (navigator.appVersion.indexOf("MSIE 4")>-1 && navigator.appVersion.indexOf("Mac")>-1)) {
  39        ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);
  40        }else{var w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;
  41        a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
  42        //alert(event.clientX);
  43        if (event == null) x=document.body.scrollLeft + bx;
  44          else x=document.body.scrollLeft + event.clientX + bx;
  45        if (event == null) y=document.body.scrollTop;
  46          else y=document.body.scrollTop + event.clientY;}}
  47     }else if (document.layers) {x=g.x;y=g.y;var q0=document.layers,dd="";
  48      for(var s=0;s<q0.length;s++) {dd='document.'+q0[s].name;
  49       if(eval(dd+'.document.'+args[k])) {x+=eval(dd+'.left');y+=eval(dd+'.top');break;}}}
  50     if(el) {e=(document.layers)?el:el.style;
  51     var xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
  52     //alert(xx+":"+yy);
  53     if(navigator.appName=="Netscape" && parseInt(navigator.appVersion)>4){xx+="px";yy+="px";}
  54     if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){
  55      xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);
  56      xx+="px";yy+="px";}e.left=xx;e.top=yy;}
  57      pic_x = parseInt(xx); pic_y = parseInt(yy);
  58      //alert(xx+":"+yy);
  59      }
  60  }
  61  
  62  var ie=document.all
  63  var ns6=document.getElementById&&!document.all
  64  
  65  var dragapproved=false
  66  var z,x,y,status, ant, canvas, content, pic_width, pic_height, image, resizeHandle, oa_w, oa_h, oa_x, oa_y, mx2, my2;
  67  
  68  
  69  function init_resize() 
  70  {
  71      if(mode == "scale") 
  72      {
  73          P7_Snap('theImage','ant',0,0);
  74  
  75          if (canvas == null)
  76              canvas = MM_findObj("imgCanvas");
  77  
  78          if (pic_width == null || pic_height == null)
  79          {
  80              image = MM_findObj("theImage");
  81              pic_width = image.width;
  82              pic_height = image.height;
  83          }
  84          
  85          if (ant == null)
  86              ant = MM_findObj("ant");
  87  
  88          ant.style.left = pic_x; ant.style.top = pic_y;
  89          ant.style.width = pic_width; ant.style.height = pic_height;
  90          ant.style.visibility = "visible";
  91  
  92          drawBoundHandle();
  93          jg_doc.paint();
  94      }
  95  }
  96  
  97  initEditor = function () 
  98  {
  99      init_crop();
 100      init_resize();
 101      var markerImg = MM_findObj('markerImg', window.top.document);
 102  
 103      if (markerImg.src.indexOf("img/t_white.gif")>0)
 104          toggleMarker() ;
 105  }
 106  
 107  function init_crop() 
 108  {
 109      //if(mode == "crop") {
 110          P7_Snap('theImage','ant',0,0);
 111      //}
 112  }
 113  
 114  function setMode(newMode) 
 115  {
 116      mode = newMode;
 117      reset();
 118  }
 119  
 120  function reset() 
 121  {
 122      if (ant == null)
 123          ant = MM_findObj("ant");
 124  
 125      ant.style.visibility = "hidden";
 126      ant.style.left = 0;
 127      ant.style.top = 0;
 128      ant.style.width = 0;
 129      ant.style.height = 0;
 130  
 131      mx2 = null;
 132      my2 = null;
 133  
 134      jg_doc.clear();
 135      if(mode != 'measure')
 136          showStatus();   
 137  
 138      if(mode == "scale") {
 139          init_resize();
 140      }
 141  
 142      P7_Snap('theImage','ant',0,0);
 143  }
 144  
 145  function toggleMarker() 
 146  {
 147      //alert("Toggle");
 148      if (ant == null)
 149          ant = MM_findObj("ant");
 150  
 151      if(ant.className=="selection")
 152          ant.className="selectionWhite";
 153      else
 154          ant.className="selection";
 155      
 156      if (jg_doc.getColor() == "#000000")
 157          jg_doc.setColor("#FFFFFF");
 158      else
 159          jg_doc.setColor("#000000");
 160      
 161      drawBoundHandle
 162      jg_doc.paint();
 163  }
 164  
 165  
 166  function move(e)
 167  {
 168      if (dragapproved)
 169      {
 170          //z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
 171          //z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
 172          var w = ns6? temp1+e.clientX - x : temp1+event.clientX - x;
 173          var h = ns6? temp2+e.clientY - y : temp2+event.clientY - y;
 174  
 175          //alert(canvas.style.left);
 176          /*if (status !=null)
 177          {
 178              status.innerHTML  = "x:"+x+" y:"+y+" w:"+w+" h:"+h+" can_h:"+pic_height;
 179              status.innerHTML += " can_w:"+pic_width+" px:"+pic_x+" py:"+pic_y;
 180              status.innerHTML += " pix:"+image.style.left+" piy:"+image.style.top+" obj:"+obj.id;
 181          }*/
 182  
 183          /*jg_doc.clear();
 184          jg_doc.fillRectPattern(0,0,Math.abs(w),Math.abs(h),pattern);
 185          jg_doc.paint();
 186  */
 187          if (ant != null)
 188          {
 189              if (w >= 0)
 190              {
 191                  ant.style.left = x;
 192                  ant.style.width = w;
 193              }
 194              else
 195              {
 196                  ant.style.left = x+w;
 197                  ant.style.width = -1*w;
 198              }
 199  
 200              if (h >= 0)
 201              {
 202                  ant.style.top = y;
 203                  ant.style.height = h;
 204              }
 205              else
 206              {
 207                  ant.style.top = y+h;
 208                  ant.style.height = -1*h
 209              }
 210          }
 211          
 212          showStatus();
 213          return false
 214      }
 215  }
 216  
 217  function moveContent(e) 
 218  {
 219      if (dragapproved)
 220      {
 221  
 222          var dx =ns6? oa_x + e.clientX-x: oa_x + event.clientX-x
 223          var dy =ns6? oa_y + e.clientY-y : oa_y + event.clientY-y
 224  
 225  
 226          /*if (status !=null)
 227          {
 228              status.innerHTML  = "x:"+x+" y:"+y+" dx:"+dx+" dy:"+dy;
 229          }*/
 230  
 231          ant.style.left = dx;
 232          ant.style.top = dy;
 233  
 234          showStatus();
 235  
 236          return false;
 237      }
 238  }
 239  
 240  //Code add for constraints by Frédéric Klee <fklee@isuisse.com>
 241  function moveHandle(e) 
 242  {
 243      if (dragapproved)
 244      {
 245          var w = ns6? e.clientX - x : event.clientX - x;
 246          var h = ns6? e.clientY - y : event.clientY - y;
 247          
 248          var constrained = MM_findObj('constProp', window.top.document);
 249          var orginal_height = document.theImage.height ;
 250          var orginal_width = document.theImage.width ;
 251          rapp = orginal_width/orginal_height ;
 252          rapp_inv = orginal_height / orginal_width ;
 253  
 254          switch(resizeHandle) 
 255          {
 256  
 257              case "s-resize":
 258                  if (oa_h + h >= 0) 
 259                  {
 260                      ant.style.height = oa_h + h;
 261                      if(constrained.checked) 
 262                      {
 263                          ant.style.width = rapp * (oa_h + h) ;
 264                          ant.style.left = oa_x - rapp * h/2;
 265                      }
 266  
 267                  }
 268                  break;
 269              case "e-resize":
 270                  if(oa_w + w >= 0)
 271                  {
 272                      ant.style.width = oa_w + w;
 273                      if(constrained.checked) 
 274                      {
 275                          ant.style.height = rapp_inv * (oa_w + w) ;
 276                          ant.style.top = oa_y - rapp_inv * w/2;
 277                      }
 278  
 279                  }
 280                  break;
 281              case "n-resize":
 282                  if (oa_h - h >= 0)
 283                  {
 284                      ant.style.top = oa_y + h;
 285                      ant.style.height = oa_h - h;
 286                      if(constrained.checked) 
 287                      {
 288                          ant.style.width = rapp * (oa_h - h) ;
 289                          ant.style.left = oa_x + rapp * h/2;
 290                      }
 291  
 292                  }
 293                  break;
 294              case "w-resize":
 295                  if(oa_w - w >= 0) 
 296                  {
 297                      ant.style.left = oa_x + w;
 298                      ant.style.width = oa_w - w;
 299                      if(constrained.checked) 
 300                      {
 301                          ant.style.height = rapp_inv * (oa_w - w) ;
 302                          ant.style.top = oa_y + rapp_inv * w/2;
 303                      }
 304  
 305                  }break;
 306              case "nw-resize":
 307                  if(oa_h - h >= 0 && oa_w - w >= 0) {
 308                      ant.style.left = oa_x + w;
 309                      ant.style.width = oa_w - w;
 310                      ant.style.top = oa_y + h;
 311                      if(constrained.checked) 
 312                          ant.style.height = rapp_inv * (oa_w - w) ;
 313                      else
 314                          ant.style.height = oa_h - h;
 315                  }
 316              break;
 317              case "ne-resize":
 318                  if (oa_h - h >= 0 && oa_w + w >= 0){
 319                      ant.style.top = oa_y + h;
 320                      ant.style.width = oa_w + w;
 321                      if(constrained.checked) 
 322                          ant.style.height = rapp_inv * (oa_w + w) ;
 323                      else
 324                          ant.style.height = oa_h - h;
 325                  }
 326                  break;
 327              case "se-resize":
 328                  if (oa_h + h >= 0 && oa_w + w >= 0) 
 329                  {
 330                      ant.style.width = oa_w + w;
 331                      if(constrained.checked)
 332                          ant.style.height = rapp_inv * (oa_w + w) ;
 333                      else
 334                          ant.style.height = oa_h + h;
 335                  }
 336                  break;
 337              case "sw-resize":
 338                  if (oa_h + h >= 0 && oa_w - w >= 0)
 339                  {
 340                      ant.style.left = oa_x + w;
 341                      ant.style.width = oa_w - w;
 342                      if(constrained.checked)
 343                          ant.style.height = rapp_inv * (oa_w - w) ;
 344                      else
 345                         ant.style.height = oa_h + h;
 346                  }
 347          }
 348          
 349          showStatus();
 350          return false;
 351          
 352      }
 353  }
 354  
 355  function drags(e)
 356  {
 357      if (!ie&&!ns6)
 358          return
 359      
 360      var firedobj=ns6? e.target : event.srcElement
 361      var topelement=ns6? "HTML" : "BODY"
 362  
 363      while (firedobj.tagName!=topelement&&
 364              !(firedobj.className=="crop" 
 365                  || firedobj.className=="handleBox" 
 366                  || firedobj.className=="selection" || firedobj.className=="selectionWhite"))
 367      {
 368          firedobj=ns6? firedobj.parentNode : firedobj.parentElement
 369      }
 370  
 371      if(firedobj.className=="handleBox") {
 372          
 373          if(content != null) {
 374              if(content.width != null && content.height != null) {
 375                  content.width = 0;
 376                  content.height = 0;
 377              }
 378              //alert(content.width+":"+content.height);
 379          }
 380          resizeHandle = firedobj.id;
 381          
 382          /*if(status!=null) {
 383              status.innerHTML  = " obj:"+firedobj.id;
 384          }*/
 385  
 386          x=ns6? e.clientX: event.clientX
 387          y=ns6? e.clientY: event.clientY
 388  
 389          oa_w = parseInt(ant.style.width);
 390          oa_h = parseInt(ant.style.height);
 391          oa_x = parseInt(ant.style.left);
 392          oa_y = parseInt(ant.style.top);
 393  
 394          dragapproved=true
 395          document.onmousemove=moveHandle;
 396          return false;
 397      }
 398      else
 399      if((firedobj.className == "selection" || firedobj.className=="selectionWhite")&& mode == "crop") {
 400          
 401          x=ns6? e.clientX: event.clientX
 402          y=ns6? e.clientY: event.clientY
 403          
 404          oa_x = parseInt(ant.style.left);
 405          oa_y = parseInt(ant.style.top);
 406  
 407          dragapproved=true
 408          document.onmousemove=moveContent;
 409          return false;
 410      }
 411      else
 412      if (firedobj.className=="crop" && mode == "crop")
 413      {
 414          if(content != null) {
 415              if(content.width != null && content.height != null) {
 416                  content.width = 0;
 417                  content.height = 0;
 418              }
 419              //alert(content.width+":"+content.height);
 420          }
 421  
 422          if (status == null)
 423              status = MM_findObj("status");
 424  
 425          if (ant == null)
 426              ant = MM_findObj("ant");
 427  
 428          if (canvas == null)
 429              canvas = MM_findObj("imgCanvas");
 430          if(content == null) {
 431              content = MM_findObj("cropContent");
 432          }
 433  
 434          if (pic_width == null || pic_height == null)
 435          {
 436              image = MM_findObj("theImage");
 437              pic_width = image.width;
 438              pic_height = image.height;
 439          }
 440  
 441          ant.style.visibility = "visible";
 442  
 443          obj = firedobj;
 444          dragapproved=true
 445          z=firedobj
 446          temp1=parseInt(z.style.left+0)
 447          temp2=parseInt(z.style.top+0)
 448          x=ns6? e.clientX: event.clientX
 449          y=ns6? e.clientY: event.clientY
 450          document.onmousemove=move
 451          return false
 452      }
 453          else if(firedobj.className=="crop" && mode == "measure") {
 454  
 455              if (ant == null)
 456                  ant = MM_findObj("ant");
 457  
 458              if (canvas == null)
 459                  canvas = MM_findObj("imgCanvas");
 460  
 461              x=ns6? e.clientX: event.clientX
 462              y=ns6? e.clientY: event.clientY
 463  
 464                  //jg_doc.draw
 465              dragapproved=true
 466              document.onmousemove=measure
 467  
 468              return false
 469          }
 470  }
 471  
 472  function measure(e) 
 473  {
 474      if (dragapproved)
 475      {
 476          mx2 = ns6? e.clientX : event.clientX;
 477          my2 = ns6? e.clientY : event.clientY;
 478          
 479          jg_doc.clear();
 480          jg_doc.setStroke(Stroke.DOTTED); 
 481          jg_doc.drawLine(x,y,mx2,my2);
 482          jg_doc.paint();
 483          showStatus();
 484          return false;
 485      }
 486  }
 487  
 488  function setMarker(nx,ny,nw,nh) 
 489  {
 490      if (ant == null)
 491          ant = MM_findObj("ant");
 492  
 493      if (canvas == null)
 494          canvas = MM_findObj("imgCanvas");
 495      if(content == null) {
 496          content = MM_findObj("cropContent");
 497      }
 498  
 499      if (pic_width == null || pic_height == null)
 500      {
 501          image = MM_findObj("theImage");
 502          pic_width = image.width;
 503          pic_height = image.height;
 504      }
 505  
 506      ant.style.visibility = "visible";
 507  
 508      nx = pic_x + nx;
 509      ny = pic_y + ny;
 510  
 511      if (nw >= 0)
 512      {
 513          ant.style.left = nx;
 514          ant.style.width = nw;
 515      }
 516      else
 517      {
 518          ant.style.left = nx+nw;
 519          ant.style.width = -1*nw;
 520      }
 521  
 522      if (nh >= 0)
 523      {
 524          ant.style.top = ny;
 525          ant.style.height = nh;
 526      }
 527      else
 528      {
 529          ant.style.top = ny+nh;
 530          ant.style.height = -1*nh
 531      }
 532  
 533      
 534  }
 535  
 536  function max(x,y) 
 537  {
 538      if(y > x)
 539          return x;
 540      else 
 541          return y;
 542  }
 543  
 544  function drawBoundHandle() 
 545  {
 546      if(ant == null || ant.style == null) 
 547          return false;
 548  
 549      var ah = parseInt(ant.style.height);
 550      var aw = parseInt(ant.style.width);
 551      var ax = parseInt(ant.style.left);
 552      var ay = parseInt(ant.style.top);
 553  
 554      jg_doc.drawHandle(ax-15,ay-15,30,30,"nw-resize"); //upper left
 555      jg_doc.drawHandle(ax-15,ay+ah-15,30,30,"sw-resize"); //lower left
 556      jg_doc.drawHandle(ax+aw-15,ay-15,30,30,"ne-resize"); //upper right
 557      jg_doc.drawHandle(ax+aw-15,ay+ah-15,30,30,"se-resize"); //lower right
 558  
 559      jg_doc.drawHandle(ax+max(15,aw/10),ay-8,aw-2*max(15,aw/10),8,"n-resize"); //top middle
 560      jg_doc.drawHandle(ax+max(15,aw/10),ay+ah,aw-2*max(15,aw/10),8,"s-resize"); //bottom middle
 561      jg_doc.drawHandle(ax-8, ay+max(15,ah/10),8,ah-2*max(15,ah/10),"w-resize"); //left middle
 562      jg_doc.drawHandle(ax+aw, ay+max(15,ah/10),8,ah-2*max(15,ah/10),"e-resize"); //right middle
 563  
 564  
 565  
 566      jg_doc.drawHandleBox(ax-4,ay-4,8,8,"nw-resize"); //upper left
 567      jg_doc.drawHandleBox(ax-4,ay+ah-4,8,8,"sw-resize"); //lower left
 568      jg_doc.drawHandleBox(ax+aw-4,ay-4,8,8,"ne-resize"); //upper right
 569      jg_doc.drawHandleBox(ax+aw-4,ay+ah-4,8,8,"se-resize"); //lower right
 570  
 571      jg_doc.drawHandleBox(ax+aw/2-4,ay-4,8,8,"n-resize"); //top middle
 572      jg_doc.drawHandleBox(ax+aw/2-4,ay+ah-4,8,8,"s-resize"); //bottom middle
 573      jg_doc.drawHandleBox(ax-4, ay+ah/2-4,8,8,"w-resize"); //left middle
 574      jg_doc.drawHandleBox(ax+aw-4, ay+ah/2-4,8,8,"e-resize"); //right middle
 575  
 576      //jg_doc.paint();
 577  }
 578  
 579  function showStatus() 
 580  {
 581      if(ant == null || ant.style == null) {
 582          return false;
 583      }
 584  
 585      if(mode == "measure") {
 586          //alert(pic_x);
 587          mx1 = x - pic_x;
 588          my1 = y - pic_y;
 589  
 590          mw = mx2 - x;
 591          mh = my2 - y;
 592  
 593          md = parseInt(Math.sqrt(mw*mw + mh*mh)*100)/100;
 594  
 595          ma = (Math.atan(-1*mh/mw)/Math.PI)*180;
 596          if(mw < 0 && mh < 0)
 597              ma = ma+180;
 598  
 599          if (mw <0 && mh >0)
 600              ma = ma - 180;
 601  
 602          ma = parseInt(ma*100)/100;
 603  
 604          if (m_sx != null && !isNaN(mx1))
 605              m_sx.value = mx1+"px";
 606          if (m_sy != null && !isNaN(my1))
 607              m_sy.value = my1+"px";
 608          if(m_w != null && !isNaN(mw))
 609              m_w.value = mw + "px";
 610          if(m_h != null && !isNaN(mh))
 611              m_h.value = mh + "px";
 612  
 613          if(m_d != null && !isNaN(md))
 614              m_d.value = md + "px";
 615          if(m_a != null && !isNaN(ma))
 616              m_a.value = ma + "";
 617  
 618          if(r_ra != null &&!isNaN(ma))
 619              r_ra.value = ma;            
 620  
 621          //alert("mx1:"+mx1+" my1"+my1);
 622          return false;
 623      }
 624  
 625      var ah = parseInt(ant.style.height);
 626      var aw = parseInt(ant.style.width);
 627      var ax = parseInt(ant.style.left);
 628      var ay = parseInt(ant.style.top);
 629  
 630      var cx = ax-pic_x<0?0:ax-pic_x;
 631      var cy = ay-pic_y<0?0:ay-pic_y;
 632      cx = cx>pic_width?pic_width:cx;
 633      cy = cy>pic_height?pic_height:cy;
 634      
 635      var cw = ax-pic_x>0?aw:aw-(pic_x-ax);
 636      var ch = ay-pic_y>0?ah:ah-(pic_y-ay);
 637  
 638      ch = ay+ah<pic_y+pic_height?ch:ch-(ay+ah-pic_y-pic_height);
 639      cw = ax+aw<pic_x+pic_width?cw:cw-(ax+aw-pic_x-pic_width);
 640  
 641      ch = ch<0?0:ch; cw = cw<0?0:cw;
 642      
 643      if (ant.style.visibility == "hidden")
 644      {
 645          cx = ""; cy = ""; cw=""; ch="";
 646      }
 647  
 648      if(mode == 'crop') {
 649          if(t_cx != null)
 650              t_cx.value = cx;
 651          if (t_cy != null)   
 652              t_cy.value = cy;
 653          if(t_cw != null)
 654              t_cw.value = cw;
 655          if (t_ch != null)   
 656              t_ch.value = ch;
 657      }
 658      else if(mode == 'scale') {
 659  
 660          var sw = aw, sh = ah;
 661  
 662          if (s_sw.value.indexOf('%')>0 && s_sh.value.indexOf('%')>0)
 663          {   
 664              sw = cw/pic_width;
 665              sh = ch/pic_height;
 666          }
 667          if (s_sw != null)
 668              s_sw.value = sw;
 669          if (s_sh != null)
 670              s_sh.value = sh;
 671      }
 672  
 673  }
 674  
 675  function dragStopped()
 676  {
 677      dragapproved=false;
 678  
 679      if(ant == null || ant.style == null) {
 680          return false;
 681      }
 682  
 683      if(mode == "measure") {
 684          jg_doc.drawLine(x-4,y,x+4,y);
 685          jg_doc.drawLine(x,y-4,x,y+4);
 686          jg_doc.drawLine(mx2-4,my2,mx2+4,my2);
 687          jg_doc.drawLine(mx2,my2-4,mx2,my2+4);
 688  
 689          jg_doc.paint();
 690          showStatus();
 691          return false;
 692      }
 693          var ah = parseInt(ant.style.height);
 694          var aw = parseInt(ant.style.width);
 695          var ax = parseInt(ant.style.left);
 696          var ay = parseInt(ant.style.top);
 697          jg_doc.clear();
 698          
 699          if(content != null) {
 700              if(content.width != null && content.height != null) {
 701                  content.width = aw-1;
 702                  content.height = ah-1;
 703              }
 704              //alert(content.width+":"+content.height);
 705          }
 706          if(mode == "crop") {
 707              //alert(pic_y);
 708              jg_doc.fillRectPattern(pic_x,pic_y,pic_width,ay-pic_y,pattern);
 709              
 710              var h1 = ah;
 711              var y1 = ay;
 712              if (ah+ay >= pic_height+pic_y)
 713                  h1 = pic_height+pic_y-ay;
 714              else if (ay <= pic_y)
 715              {
 716                  h1 = ay+ah-pic_y;
 717                  y1 = pic_y;
 718              }
 719              jg_doc.fillRectPattern(pic_x,y1,ax-pic_x,h1,pattern);
 720              jg_doc.fillRectPattern(ax+aw,y1,pic_x+pic_width-ax-aw,h1,pattern);
 721              jg_doc.fillRectPattern(pic_x,ay+ah,pic_width,pic_height+pic_y-ay-ah,pattern);
 722          }
 723          else if(mode == "scale") {
 724              //alert("Resizing: iw:"+image.width+" nw:"+aw);
 725              document.theImage.height = ah;
 726              document.theImage.width = aw;
 727              document.theImage.style.height = ah+" px";
 728              document.theImage.style.width = aw+" px";
 729  
 730              P7_Snap('theImage','ant',0,0);
 731  
 732              //alert("After Resizing: iw:"+image.width+" nw:"+aw);
 733          }
 734  
 735          drawBoundHandle();
 736          jg_doc.paint();
 737      
 738          showStatus();
 739      return false;
 740  }
 741  
 742  document.onmousedown=drags
 743  document.onmouseup=dragStopped;
 744