Bulk Zoom Thumbnail

<table id="bulkzoom_toolbox" cellspacing="10" border="0" cellpadding="0" class="toolbox" style="display:none">
  <tr align="center" valign="middle">
    <td align="center" valign="middle"><strong class="headmd black">bulk zoom<br/>thumbnails</strong></td>
  </tr>
  <tr align="center">
    <td align="center" valign="middle"><input id="bulkSave" type="submit" value="save changes"  class="buttons" onclick="zoomThumbnails();"/></td>
  </tr>
  <tr align="center" valign="middle">
    <td align="center" valign="middle">
      <strong class="black">ratio:</strong><br />
      <select name="ratio" onChange="changeRatioBulk(this.value);">
        <option value="0,0" selected="selected">none</option>
        <option value="1,1">1 x 1</option>
        <option value=".6,1.67">3 x 5</option>
        <option value=".67,1.5">4 x 6</option>
        <option value=".72,1.4">5 x 7</option>
        <option value=".8,1.25">8 x 10</option>
        <option value=".56,1.78">9 x 16</option>
      </select>
      <div id="customRatio" style="display: none;">
        <input type="text" name="ratioH" value="1" maxlength="4" size="2" onblur="changeRatio('custom');" />h
        <strong class="black">&nbsp;x&nbsp;</strong>
        <input type="text" name="ratioW" value="1" maxlength="4" size="2" onblur="changeRatio('custom');" />w
      </div>
    </td>
  </tr>
  <tr align="center" valign="middle">
    <td align="center" valign="middle"><input type="button" value="rotate crop" onclick="rotateBulk();"  class="buttons" /></td>
  </tr>
  <noscript>
  <tr align="center" valign="top">
    <td align="center" valign="middle">
      <strong class="red">You must enable javascript in order to use this tool.</strong>
    </td>
  </tr>
  </noscript>
</table>

#bulkzoom_toolbox {
background-color: #666666;
border: 2px white solid;
font-family: Verdana, Tahoma, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
position: absolute;
left: 25px;
top: 170px;
z-index: 10;
}

.smugmug #bulkzoom_toolbox {
left: 0px;
top:  0px;
}

/*==============================*/
/*== Bulk Zoom thumbnail v3.5 ==*/
/*==============================*/
var thumbnailArray = new Array();
var thumbnailCount;
var thumbnailItem;
var thumbnailEXIFArray = new Array();
var reqIncrement = 0;

YE.onAvailable("toolsButton",function() {
  var menu = SM.buttons.toolsButton.button.getMenu();
  menu.subscribe('render',function(){
    this.getSubmenus()[2].subscribe('render',function(){
      this.addItem({ text: "Bulk Zoom Thumbnail", 'onclick': { 'fn': processThumbnails} });
    })
  })
});

YE.on(window, "load", onStartBulk);

function processThumbnails() {
  var re = /\/(\d+)_(\w+)\-(Ti|Th)/;

  pageWorking('Loading...');

  YD.get("bulkzoom_toolbox").style.display = "";

  var divTag = YD.inDocument("thumbnails") ? YD.get("thumbnails") : YD.get("photos");

  if (divTag) {
    var divTags = YD.getElementsByClassName("photo", "div", divTag);
    for (var i = 0, len = divTags.length; i < len; i++) {
      if (re.test(divTags[i].innerHTML)) {
        re.exec(divTags[i].innerHTML);
        thumbnailEXIFArray.push({"id": RegExp.$1, "key": RegExp.$2});
      }
    }
  }
  getThumbnailEXIF();
}

function maskThumbnails(objThumbnail, j) {
  var re1 = /\/gallery\/\d+_\w+\/\d+\/(\d+)_(\w+)/;
  var re2 = /javascript\:openLB\(([0-9]+),/;
  var re3 = /#(\d+)(_(\w+))?/;

  var divTag = YD.inDocument("thumbnails") ? YD.get("thumbnails") : YD.get("photos");

  if (divTag) {
    divTags = YD.getElementsByClassName("photo", "div", divTag);

    for (var i = 0, len = divTags.length; i < len; i++) {
      if (re1.test(divTags[i].innerHTML))
        re1.exec(divTags[i].innerHTML);
      else
      {
        if (re2.test(divTags[i].innerHTML))
          re2.exec(divTags[i].innerHTML);
        else {
          if (re3.test(divTags[i].innerHTML))
            re3.exec(divTags[i].innerHTML);
          else
            continue;
        }
          
      }

      var thumbnailId = RegExp.$1;
      var thumbnailKey = RegExp.$2;

      var aTags = divTags[i].getElementsByTagName("a");
      var imgTags = aTags[0].getElementsByTagName("img");

      if (objThumbnail.id == thumbnailId) {
        var maskedDiv = document.createElement("div");
        maskedDiv.id = thumbnailId + "_masked";
        maskedDiv.className = j;
        maskedDiv.style.cssText = "position: relative; background: transparent url('" + webServer+"/photos/toolthumbs.mg?tool=cropmask&Size=Small&ImageID="+ objThumbnail.id + "&ImageKey="+ objThumbnail.key + "') no-repeat; width: " + objThumbnail.imgWidth + "px; height: " + objThumbnail.imgHeight + "px; z-index: 1; margin:0px auto; text-align:left;";

        var clearedDiv = document.createElement("div");
        clearedDiv.id = thumbnailId + "_cleared";
        clearedDiv.className = j;
        clearedDiv.style.cssText = "position: absolute; background: url('" + objThumbnail.url + "') no-repeat; width: " + objThumbnail.imgWidth + "px; height: " + objThumbnail.imgHeight + "px; z-index: 2; clip:rect(0px," + objThumbnail.imgWidth + "px," + objThumbnail.imgHeight + "px,0px);";

        maskedDiv.appendChild(clearedDiv);

        var cropboxDiv = document.createElement("div");
        cropboxDiv.id = thumbnailId + "_cropbox";
        cropboxDiv.className = j;
        cropboxDiv.style.cssText = "position: absolute; left: 0px; top: 0px; width: " + (objThumbnail.imgWidth-4) + "px; height: " + (objThumbnail.imgHeight-4) + "px; border: solid 2px blue; z-index: 3; cursor: move";
        YE.on(cropboxDiv, "mousedown", testMouseBulk);
        clearedDiv.appendChild(cropboxDiv);

        var ratioboxDiv = document.createElement("div");
        ratioboxDiv.id = thumbnailId + "_ratiobox";
        ratioboxDiv.className = j;
        ratioboxDiv.style.cssText = "position: absolute; bottom: 0px; right: 0px; width: 25px; height: 25px; border-top: solid 2px blue; border-left: solid 2px blue;  cursor: pointer; cursor: hand; z-index: 4;";
        YE.on(ratioboxDiv, "mousedown", testZoomBulk); 
        cropboxDiv.appendChild(ratioboxDiv);
          
        var replaceNode = aTags[0];
        replaceNode.parentNode.replaceChild(maskedDiv, replaceNode);
        divTags[i].style.width = objThumbnail.imgWidth + "px";
        divTags[i].style.height = objThumbnail.imgHeight + "px";
      }
    }
  } 
}

function getThumbnailEXIF()
{
  var thumbnail = thumbnailEXIFArray.shift();

  if (thumbnail) {
    var postArray = new Array();
    postArray['method'] = "getImageInfo";
    postArray['imageId'] = thumbnail.id;
    postArray['imageKey'] = thumbnail.key;
    ajax_query(processThumbnailEXIF, webServer+'/rpc/image.mg', postArray, true);
    window.setTimeout(getThumbnailEXIF, 100);
  }
  else
  {
    removePageWorking();

    if (YD.hasClass(document.body,"loggedIn"))
      YD.get("bulkSave").disabled = false;
  }
}

function processThumbnailEXIF(response) {

  var json = eval('(' + response + ')');

  var imgWidth = parseInt(json.result.OriginalWidth);
  var imgHeight = parseInt(json.result.OriginalHeight);

  var obj = {"id": json.result.ImageID, "key": json.result.imageKey, "url": json.result.SmallURL};

  obj.imgHeight = (imgWidth < imgHeight) ? 300 : Math.round((imgHeight / imgWidth) * 400);
  obj.imgWidth = (imgWidth < imgHeight) ? Math.round((imgWidth / imgHeight) * 300) : 400;
  obj.ratio = 0;
  obj.invRatio = 0;
  obj.marginTop = 0;
  obj.marginLeft = 0;
  obj.cropHeight = obj.imgHeight;
  obj.cropWidth = obj.imgWidth;
  obj.oRatio = (imgWidth / obj.imgWidth);
  obj.cropDiff = 0;

  thumbnailArray.push(obj);

  maskThumbnails(thumbnailArray[thumbnailArray.length-1], "bzt_"+ (thumbnailArray.length-1));
}

function zoomThumbnails() {
  if (!thumbnailItem) {
    thumbnailItem = 0;
    thumbnailCount = thumbnailArray.length;
  }

  var thumbnail = thumbnailArray.shift();
  YD.get("bulkzoom_toolbox").style.display = "none";
  
  if (thumbnail) {
    thumbnailItem++; 

    postArray = new Array();
    postArray['method'] = 'crop';
    postArray['croptype'] = 'thumb';
    postArray['imageId'] = thumbnail.id;
    postArray['imageKey'] = thumbnail.key;
    postArray['action'] = "doit";
    postArray['cropH'] = Math.round(parseInt(thumbnail.cropHeight) * parseFloat(thumbnail.oRatio));
    postArray['cropW'] = Math.round(parseInt(thumbnail.cropWidth) * parseFloat(thumbnail.oRatio));
    postArray['cropX'] = Math.round(parseInt(thumbnail.marginLeft) * parseFloat(thumbnail.oRatio));
    postArray['cropY'] = Math.round(parseInt(thumbnail.marginTop) * parseFloat(thumbnail.oRatio));

    reqIncrement ++;
    pageWorking('Processing thumbnails');
    window.setTimeout('ajax_query(thumbReqHandler, webServer+\'\/rpc\/tools.mg\', postArray, true, true);', 10);
    window.setTimeout(zoomThumbnails, 50);
  } 
}


function thumbReqHandler() {
  reqIncrement--;

  if (thumbnailArray.length == 0 && reqIncrement == 0) {
      window.location.reload();
  }
}

var smallestBulk = 75;   
var mouseXBulk = 0;
var mouseYBulk = 0;
var mouseToolBulk = "move";
var hideRatioBulk = false;    
var scaleBulk = 1;
var pageLoadedBulk = false;

function onStartBulk() {
  pageLoadedBulk = true;
}        

function moveBulk(X,Y,e) {
  if (pageLoadedBulk == true)
  {
    try {
      var objClass = (e.srcElement) ? e.srcElement.className : e.target.className;
      var obj = thumbnailArray[objClass.replace("bzt_", "")];

      X = X*scaleBulk;
      Y = Y*scaleBulk;
      var newLeft = obj.marginLeft+X;
      var newTop = obj.marginTop+Y;                                
      var stopX = obj.imgWidth - obj.cropWidth;
      var stopY = obj.imgHeight - obj.cropHeight;





      if (newLeft < 0)
        newLeft = 0;

      if (newLeft > stopX)
        newLeft = stopX;

      if (newTop < 0)
        newTop = 0;

      if (newTop > stopY)
        newTop = stopY;

      obj.marginLeft = newLeft;
      obj.marginTop = newTop;

      var objNode = (e.srcElement) ? e.srcElement : e.target;

      while (objNode.id != obj.id + "_cropbox")
        objNode = objNode.parentNode;

      updateCropBulk(objNode);
    }
    catch(e) {}
  }
  else {
    window.alert("Page loading, please wait.");
  }
}        

function zoomBulk(X,Y,e)
{
  if (pageLoadedBulk == true) {
    try {
      var objClass = (e.srcElement) ? e.srcElement.className : e.target.className;
      var obj = thumbnailArray[objClass.replace("bzt_", "")];              

      var Xadj = (obj.ratio == 0) ? obj.cropWidth+(X*scaleBulk) : 0;
      var Yadj = (obj.ratio == 0) ? obj.cropHeight+(Y*scaleBulk) : 0;

      var newWidth = obj.cropWidth+(X*scaleBulk);
      var newHeight = Math.round(newWidth*obj.ratio)+Yadj;

      if (newWidth < smallestBulk) {
        newWidth = smallestBulk;
        newHeight = Math.round(newWidth*obj.ratio)+Yadj;
      }

      if (newHeight < smallestBulk) {
        newHeight = smallestBulk;
        newWidth = Math.round(newHeight*obj.invRatio)+Xadj;
      } 

      if (newWidth+obj.marginLeft > obj.imgWidth) {
        newWidth = obj.imgWidth-obj.marginLeft;
        newHeight = Math.round(newWidth*obj.ratio)+Yadj;
      } 

      if (newHeight+obj.marginTop > obj.imgHeight) {
        newHeight = obj.imgHeight-obj.marginTop;
        newWidth = Math.round(newHeight*obj.invRatio)+Xadj;
      }                

      obj.cropWidth = newWidth;
      obj.cropHeight = newHeight;

      var objNode = (e.srcElement) ? e.srcElement : e.target;

      while (objNode.id != obj.id + "_cropbox")
        objNode = objNode.parentNode;

      updateCropBulk(objNode);
    }
    catch(e) {}
    
  }
  else {
    window.alert("Page loading, please wait.");
  }
}        

function changeRatioBulk(newRatios) {
  if (pageLoadedBulk == true) {
    var newRatio = newRatios.split(",");

    for (i=0; i<thumbnailArray.length; i++) {
      var obj = thumbnailArray[i];

      if (obj.imgHeight > obj.imgWidth) {
        obj.ratio = newRatio[1];
        obj.invRatio = newRatio[0];
      }
      else {
        obj.ratio = newRatio[0];
        obj.invRatio = newRatio[1];
      }

      if (obj.ratio == 0) {
        YD.get('customRatio').style.display = "none";
        obj.marginTop = 0;
        obj.marginLeft = 0;
        obj.cropHeight = obj.imgHeight;
        obj.cropWidth = obj.imgWidth;
      }
      else {
        if (newRatios == "custom") {
          obj.ratio = document.cropTool.ratioH.value/document.cropTool.ratioW.value;
          obj.invRatio = document.cropTool.ratioW.value/document.cropTool.ratioH.value;
          YD.get('customRatio').style.display = "block";
        }
        else
          YD.get('customRatio').style.display = "none";

        obj.cropWidth = Math.round(1 * obj.imgWidth);

        obj.cropHeight = Math.round(obj.cropWidth * obj.ratio);        

        if ((obj.cropHeight > obj.imgHeight)||(obj.cropWidth > obj.imgWidth)) {
          obj.cropHeight = obj.imgHeight;  
          obj.cropWidth = Math.round(obj.cropHeight * obj.invRatio);
        }   

        obj.marginTop = ((obj.imgHeight - obj.cropHeight)/2);
        obj.marginLeft = ((obj.imgWidth - obj.cropWidth)/2);
      }

      updateCropBulk(YD.get(thumbnailArray[i].id + "_cropbox"));
    }
  }
  else {
     window.alert("Page loading, please wait.");
  }
}        

function rotateBulk() {
  if (pageLoadedBulk == true) {
    for (i=0; i<thumbnailArray.length; i++) {
      var obj = thumbnailArray[i];

      var Xadj = (obj.ratio == 0) ? obj.cropHeight : 0;
      var Yadj = (obj.ratio == 0) ? obj.cropWidth : 0;

      var temp = obj.invRatio;
      obj.invRatio = obj.ratio;
      obj.ratio = temp;
      temp = obj.cropWidth;
      obj.cropWidth = obj.cropHeight;
      obj.cropHeight = temp;  

      if (obj.cropWidth + obj.marginLeft > obj.imgWidth) {

        obj.marginLeft = obj.imgWidth - obj.cropWidth;

        if (obj.marginLeft < 0) {
          obj.marginLeft = 0;
          obj.cropWidth = obj.imgWidth - obj.marginLeft;
          obj.cropHeight = Math.round(obj.cropWidth * obj.ratio)+Yadj;                        
        }
      } 

      if (obj.cropHeight + obj.marginTop > obj.imgHeight) {
        obj.marginTop = obj.imgHeight - obj.cropHeight;

        if (obj.marginTop < 0) {
          obj.marginTop = 0;
          obj.cropHeight = obj.imgHeight - obj.marginTop;
          obj.cropWidth = Math.round(obj.cropHeight * obj.invRatio)+Xadj;
        }
      }

      updateCropBulk(YD.get(obj.id + "_cropbox"));
    }
  }
  else
    window.alert("Page loading, please wait.");
}        

function updateCropBulk(e) {
  var objClass = e.className;
  var obj = thumbnailArray[objClass.replace("bzt_", "")];

  e.parentNode.style.clip = "rect("+obj.marginTop+"px "+(obj.marginLeft+obj.cropWidth)+"px "+(obj.marginTop+obj.cropHeight)+"px "+obj.marginLeft+"px)";
  e.style.top = obj.marginTop+"px";
  e.style.left = obj.marginLeft+"px";
  e.style.width = obj.cropWidth-obj.cropDiff+"px";
  e.style.height = obj.cropHeight-obj.cropDiff+"px";
}        

function mouseMoveBulk(e) {
  if (!e) var e = window.event;

   var objClass = (e.srcElement) ? e.srcElement.className : e.target.className;

  if (lookMouse) {
    var tempX = mouseXBulk;
    var tempY = mouseYBulk;
    mouseXBulk = e.clientX;
    mouseYBulk = e.clientY;
    var x = mouseXBulk-tempX;
    var y = mouseYBulk-tempY;

    if (mouseToolBulk == "zoom") {
      if (thumbnailArray[objClass.replace("bzt_","")].ratio == 0)
        zoomBulk(x,y,e);
      else
        zoomBulk(x,0,e);
    }
    else
      moveBulk(x,y,e)
  }
}

function testMouseBulk(e) {
  state = true;
  if (!e) var e = window.event;

  if (mouseToolBulk != "zoom") {
    lookMouse = state;

    if (state == true) {
      mouseToolBulk = "move";
      mouseXBulk = e.clientX;
      mouseYBulk = e.clientY;
      document.onmousemove = mouseMoveBulk;
    }
  }
}

function testZoomBulk(e) {
  state=true;
  if (!e) var e = window.event;

  lookMouse = state;
  if (state == true) {	            
    mouseToolBulk = "zoom"
    mouseXBulk = e.clientX;
    mouseYBulk = e.clientY;
    document.onmousemove = mouseMoveBulk;
  }
}

function cancelMouse() {
  mouseToolBulk = "move";
  lookMouse = false;
}

document.onmouseup = cancelMouse;