(function($, wrapID, BUTTON_TEXT) {
  document.write('<div id="' + wrapID + '"></div>');
  $(function() {
    var jWrap = $('#' + wrapID);
    var jImageWrap = $('<div class="image-wrap">').appendTo(jWrap);
    var jFileInput = $('<input type="file">')
      .hide()
      .appendTo(jWrap)
      .wrap('<div>')
      .on('change', function(event) {
        jImageWrap.html('');
        var files = event.target.files;
        [].forEach.call(files, function(file) {
          if (file.type.match('image.*')) {
            var reader = new FileReader();
            reader.onload = function(e) {
              var img = new Image();
              img.onload = function() {
                img.onload = null;
                var canvas = $('<canvas>').prop({
                  width: img.width,
                  height: img.height
                })[0];
                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                var imageData = ctx.getImageData(0, 0, img.width, img.height);
                var d = imageData.data;
                var maxY = img.height;
                for (var y, alpha, i = 3, l = d.length; i < l; i += 4) {
                  y = Math.floor(i / 4 / img.width);
                  alpha = Math.round(255 * y / maxY);
                  d[i] = Math.min(d[i], alpha);
                }
                ctx.clearRect(0, 0, img.width, img.height);
                ctx.putImageData(imageData, 0, 0);
                $(img)
                  .prop({
                    src: canvas.toDataURL(),
                    title: 'Open Image In New Tab'
                  })
                  .click(function() {
                    window.open(img.src, '_blank');
                  })
                  .css({
                    maxWidth: 300,
                    backgroundImage: [
                      'linear-gradient(45deg, #CCC 25%, transparent 25%)',
                      'linear-gradient(-45deg, #CCC 25%, transparent 25%)',
                      'linear-gradient(45deg, transparent 75%, #CCC 75%)',
                      'linear-gradient(-45deg, transparent 75%, #CCC 75%)',
                      'linear-gradient(0deg, #FFF, #FFF)'
                    ].join(','),
                    backgroundSize: '20px 20px',
                    backgroundPosition: [
                      '0 0',
                      '0 10px',
                      '10px -10px',
                      '-10px 0px'
                    ].join(','),
                    cursor: 'pointer',
                    boxShadow: '0 0 10px 0',
                    margin: '10px 0',
                    padding: 10,
                    boxSizing: 'border-box'
                  })
                  .appendTo(jImageWrap);
                jButton.text(BUTTON_TEXT).prop('disabled', false);
              };
              img.src = e.target.result;
            };
            reader.readAsDataURL(file);
          }
          else {
            jButton.text(BUTTON_TEXT).prop('disabled', false);
          }
        });
      });
    var jButton = $('<button>')
      .text(BUTTON_TEXT)
      .appendTo(jWrap)
      .wrap('<div>')
      .click(function() {
        jButton.text('Working...').prop('disabled', true);
        jFileInput.click();
      });
  });
})(jQuery, ('_' + Math.random()).replace('.', ''), 'Choose An Image');