MeMeThisBuildForm.js

MeMeThisBuildForm.js

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/*  SHA-1 implementation in JavaScript (c) Chris Veness 2002-2009                                 */
/*  http://www.movable-type.co.uk/scripts/sha1.html                                               */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
function sha1Hash(k){var o=[1518500249,1859775393,2400959708,3395469782];k+=String.fromCharCode(128);var y=k.length/4+2;var m=Math.ceil(y/16);var n=new Array(m);for(var A=0;A<m;A++){n[A]=new Array(16);for(var z=0;z<16;z++){n[A][z]=(k.charCodeAt(A*64+z*4)<<24)|(k.charCodeAt(A*64+z*4+1)<<16)|(k.charCodeAt(A*64+z*4+2)<<8)|(k.charCodeAt(A*64+z*4+3))}}n[m-1][14]=((k.length-1)*8)/Math.pow(2,32);n[m-1][14]=Math.floor(n[m-1][14]);n[m-1][15]=((k.length-1)*8)&4294967295;var v=1732584193;var u=4023233417;var r=2562383102;var q=271733878;var p=3285377520;var g=new Array(80);var F,E,D,C,B;for(var A=0;A<m;A++){for(var w=0;w<16;w++){g[w]=n[A][w]}for(var w=16;w<80;w++){g[w]=ROTL(g[w-3]^g[w-8]^g[w-14]^g[w-16],1)}F=v;E=u;D=r;C=q;B=p;for(var w=0;w<80;w++){var x=Math.floor(w/20);var h=(ROTL(F,5)+f(x,E,D,C)+B+o[x]+g[w])&4294967295;B=C;C=D;D=ROTL(E,30);E=F;F=h}v=(v+F)&4294967295;u=(u+E)&4294967295;r=(r+D)&4294967295;q=(q+C)&4294967295;p=(p+B)&4294967295}return v.toHexStr()+u.toHexStr()+r.toHexStr()+q.toHexStr()+p.toHexStr()}function f(b,a,d,c){switch(b){case 0:return(a&d)^(~a&c);case 1:return a^d^c;case 2:return(a&d)^(a&c)^(d&c);case 3:return a^d^c}}function ROTL(a,b){return(a<<b)|(a>>>(32-b))}Number.prototype.toHexStr=function(){var c='',a;for(var b=7;b>=0;b--){a=(this>>>(b*4))&15;c+=a.toString(16)}return c};

// Called by the "X" button and upon startup (to handle nervous fingers)
function closeMemeThisOverlay() {
  $('#div_memethis_overlay').remove();
  $("#memethis_data").remove();
}

// Called when the MemeThis button is clicked
function submitMemeThisOverlay(data) {
  // Retrieve params and sign the call
  var parts = data.split('|');
  var id = parts[0];
  var token = parts[1];
  var caption = document.form_memethis_bookmarklet.caption.value;
  var is_link = (document.form_memethis_bookmarklet.is_link.checked ? 1 : 0);
  var content_url = location.href;
  var image_url = document.form_memethis_bookmarklet.image_url.value;
  var hash = sha1Hash(token + content_url + image_url);

  $('#btn_submit_memethis_overlay').attr('disabled', true);
  $('#div_memethis_message').html('Sending...').show();
  $.jsonp({
    url: 'http://memethis.com/ajaxmeme?callback=?',
    cache: false,
    type: 'GET',
    data: {
      id: id,
      caption: caption,
      is_link: is_link,
      content_url: content_url,
      image_url: image_url,
      hash: hash
    },
    dataType: "jsonp",
    timeout: 15000,
    success: function (data, status) {
      $('#div_memethis_message').html('Success! You\'ve meme\'d this! :-)');
    },
    error: function (xOptions, textStatus) {
      $('#div_memethis_message').html('An error has occurred - try again later. :-(');
      $('#btn_submit_memethis_overlay').attr('disabled', false);
    }
  });

  return false;
}

// Called when the image selector is clicked, toggles it
function selectMemeThisImage(id, url) {
  selected = $('#div_memethis_overlay #td_memethis_image_' + id).hasClass('memethis_selected');
  $('#div_memethis_overlay td').removeClass('memethis_selected');
  if (!selected) {
    $('#div_memethis_overlay #td_memethis_image_' + id).addClass('memethis_selected');
    document.form_memethis_bookmarklet.image_url.value = url;
  } else {
    document.form_memethis_bookmarklet.image_url.value = "";
  }

}

// Makes sure bigger images will come first
function memeThisImageSortFunction(imgA, imgB) {
  var sizeA = imgA.width * imgA.height;
  var sizeB = imgB.width * imgB.height;
  return sizeB - sizeA;
}

// Build a clickable table with all images from the page
function buildMemeThisImageList() {
  var IMAGES_PER_ROW = 5;
  var IMAGES_PER_FORM = 40;
  var imageList = 'Choose an image (optional):<br><table>';
  var images = [];
  for (i = 0; i < document.images.length; i++) {
    images.push(document.images[i]);
  }
  images.sort(memeThisImageSortFunction);
  var currentPrintedImage = 0;
  for (i = 0; i < images.length; i++) {
    img = images[i];
    if ((img.width >= 150) && (img.height >= 50)) {
      ratio = (50 / Math.max(img.width, img.height));
      thumbWidth = img.width * ratio;
      thumbHeight = img.height * ratio;
      if (currentPrintedImage % IMAGES_PER_ROW === 0) {
        imageList += '<tr>';
      }
      var tooltip = img.src.substring(img.src.lastIndexOf('/') + 1) + ' (' + img.width + 'x' + img.height + ')';
      imageList += '<td id="td_memethis_image_' + currentPrintedImage + '" style="text-align:center"><a title="' + tooltip + '" href="javascript:selectMemeThisImage(' + currentPrintedImage + ',\'' + img.src + '\');void(0);"><img src="' + img.src + '" width="' + thumbWidth + '" height="' + thumbHeight + '"></img></a></td>';
      if ((currentPrintedImage % IMAGES_PER_ROW === (IMAGES_PER_ROW - 1)) || (i === images.length - 1) || (currentPrintedImage === IMAGES_PER_FORM - 1)) {
        imageList += '</tr>';
      }
      if (currentPrintedImage === IMAGES_PER_FORM - 1) {
        break;
      }
      currentPrintedImage++;
    }
  }
  imageList += '</table>';
  if (currentPrintedImage > 0) {
    return imageList;
  } else {
    return "";
  }
}

// Builds the overlay that will be injected (including its CSS)
function buildMemeThisOverlay(data) {
  var jsonpPlugin = '<script type="text/javascript" src="http://memethis.com/js/jquery.jsonp-1.1.0.min.js"></script>';
  var formCss = '<link type="text/css" href="http://memethis.com/css/bookmarklet_style.css" rel="stylesheet"></link>';
  var formHeading = '<img id="img_memethis_overlay_logo" src="http://memethis.com/img/overlay_logo.png"></img><span id="span_memethis_title">MemeThis</span><br><br>';
  var btnClose = '<a id="btn_close" href="javascript:void(null);" onClick="closeMemeThisOverlay()">x</a>';
  var formNormalFields = 'Enter a Caption:<br><textarea name="caption">' + document.title + ' (via MemeThis)</textarea>Link to this page? <input type="checkbox" name="is_link" checked="on"><br><br>';
  var formHiddenFields = '<input type="hidden" name="id" >' + '<input type="hidden" name="hash" >' + '<input type="hidden" name="content_url">' + '<input type="hidden" name="image_url" value="" >';
  var formSubmitButton = '<br><br><input id="btn_submit_memethis_overlay" type="submit" value="Meme This!">';
  var formMsg = '<div id="div_memethis_message">-</div>';
  var form = btnClose + formHeading + '<form name="form_memethis_bookmarklet" onsubmit="return submitMemeThisOverlay(\'' + data + '\');">' + formHiddenFields + formNormalFields + buildMemeThisImageList() + formSubmitButton + formMsg + "</form>";
  var overlay = formCss + '<div id="div_memethis_overlay">' + jsonpPlugin + form + '</div>';
  data = null;
  return overlay;
}
function BindPreviewImagesOverlay() {
  try {
    $('#div_memethis_overlay').append("<div id='div_memethis_preview'>MeMeThis Image Preview...<img id='img_memethis_preview' src=''></img></div>");
    var div_preview = $('#div_memethis_preview');
    div_preview.css('background-color','853EAA');
    div_preview.css('border','2px dotted white');
    div_preview.css('position','absolute');
    div_preview.css('text-align','center');
    div_preview.css('align','center');
    div_preview.css('top',0);
    div_preview.css('left',$('#div_memethis_overlay').width()+30);
    div_preview.css('display','block');
    div_preview.hide();
    $('#div_memethis_overlay img').each(function(pos, img) {
      $(img).bind('mouseover', function(e) {
        var _newItem = $(e.target).clone();
        var re = /.+(\(([\d]+)x([\d]+)\)).*/gi;
        var _oriW = $(img).parent().eq(0).attr('title').replace(re,"$2") * 1;
        var _oriH = $(img).parent().eq(0).attr('title').replace(re,"$3") * 1;
        _newItem.width(_oriW);
        _newItem.height(_oriH);
        $('#div_memethis_preview').width(_oriW + 50);
        $('#div_memethis_preview').height(_oriH + 50);      
        $('#div_memethis_preview img').replaceWith(_newItem);
        $('#div_memethis_preview').show();
      });
      $(img).bind('mouseout', function(e) {
        $('#div_memethis_preview').hide();
      });   
    });
  } catch (err) {
    // Hum... to bad... something went wrong
    //console.log(err);
  }
}
// Make sure we don't have leftovers and inject the whole thing
var data = $("#memethis_data").html();
closeMemeThisOverlay();
$(buildMemeThisOverlay(data)).appendTo("body");
BindPreviewImagesOverlay();
$("#memethis_loading").remove();
data = null;