<html> <head>

<style>
  html {
    background-color:#FFFAFC;
    font-family: 'Josefin Sans', sans-serif;
    color:#BE99CC;
  }

  nav {
    height:60px;
    background-color:white;
  }

  nav h1 {
    display:inline-block;
    margin-top:6px;
  }

  nav ul {
    margin-top:18px;
    display:inline-block;
    float:right;
  }

  nav ul li {
    float:right;
    margin-left:30px;
  }

  nav ul li a {
    text-decoration: none;
  }

  h1 {
    font-weight: 400;
    font-size:48px;
  }

  h2, nav ul, h3 {
    font-weight: 300;
    font-size:24px;
  }

  .content {
    width:1200px;
    margin:0 auto;
  }

  img.before {
    border: 2px solid #9FCC99;
  }

  img.after {
    border: 2px solid #CC7B7B;
    background-color:green;
    pointer-events:none;
  }

  article.content {
    margin:36px auto;
  }

  section img {
    background-repeat: repeat-x repeat-y;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAeUlEQVRYCe3TIQ7AIBBE0QXRut7/mlSVGorE/22C+KtAzIa8DKW3Z0TiHNeZuC2ipm77YZkPpKgKKkgFaN4OKkgFaN4OKkgFaN4OKkgFaL6MOXTJmn/vvl7x2U9CCRVUkArQvB1UkArQvB1UkArQvB1UkArQ/PYd/AC9pgss8BZEQAAAAABJRU5ErkJggg==);
  }

  section div.onion {
    position: relative;
  }

  section div.onion p {
    text-align:center;
    position:absolute;
    top:600px;
    left:0px;
    width:100%;
  }

  section div.onion img {
    position:absolute;
    top:1px;
    left:1;
    max-height:520px;
  }

  section {
    background-color:white;
    height:660px;
  }

</style>
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>

<nav>
    <div class="content">
      <h1>Second Curtain</h1>
      <ul>
        <!-- <li><a href="file:///Users/orta/dev/ruby/second_curtain/lib/second_curtain/template.mustache.html">artsy/eigen#1112</a></li>
        <li><a href="file:///Users/orta/dev/ruby/second_curtain/lib/second_curtain/template.mustache.html">travis#5240812</a></li> -->
      </ul>
  </div>
</nav>

<!-- <article class="content">
  <h1>ARAmbiguousSplitStackViewSpec</h1>
  <h3>Single Stack With Two Views</h3>
  <section >
    <div class="onion">
      <img class="before" src="https://github.com/artsy/energy/raw/2c1b4d2eb35bba900c697a11e7e65f22024e7d0a/ArtsyFolio%20Tests/ReferenceImages/ARAmbiguousSplitStackViewSpec/single_stack_with_two_views%402x.png?raw=true">
      <img class="after" src="https://github.com/orta/energy/raw/5978c5bfa0dfdd0317f2b68e855efad7d7dc7df2/ArtsyFolio%20Tests/ReferenceImages/ARAmbiguousSplitStackViewSpec/single_stack_with_two_views%402x.png?raw=true">
      <p>320 x 280</p>
    </div>
  </section>
</article> -->

{{#uploads}}
<article class="content">
  <section>
    <div class="onion">
      <img class="before" src="{{ uploaded_expected_url }}">
      <img class="after" src="{{ uploaded_actual_url }}">
    </div>
  </section>
</article>
{{/uploads}}

<script>

  /*!
 * imagesLoaded PACKAGED v3.1.8
 * JavaScript is all like "You images are done yet or what?"
 * MIT License
 */

(function(){function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,o=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;e.length>t;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),o="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(o?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;e.length>t;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,o=this.getListenersAsObject(e);for(r in o)o.hasOwnProperty(r)&&(i=t(o[r],n),-1!==i&&o[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,o=e?this.removeListener:this.addListener,s=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)o.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?o.call(this,i,r):s.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if("object"===n)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,o,s=this.getListenersAsObject(e);for(r in s)if(s.hasOwnProperty(r))for(i=s[r].length;i--;)n=s[r][i],n.once===!0&&this.removeListener(e,n.listener),o=n.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=o,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:this.EventEmitter=e}).call(this),function(e){function t(t){var n=e.event;return n.target=n.target||n.srcElement||t,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(e,t,n){e.addEventListener(t,n,!1)}:n.attachEvent&&(i=function(e,n,i){e[n+i]=i.handleEvent?function(){var n=t(e);i.handleEvent.call(i,n)}:function(){var n=t(e);i.call(e,n)},e.attachEvent("on"+n,e[n+i])});var r=function(){};n.removeEventListener?r=function(e,t,n){e.removeEventListener(t,n,!1)}:n.detachEvent&&(r=function(e,t,n){e.detachEvent("on"+t,e[t+n]);try{delete e[t+n]}catch(i){e[t+n]=void 0}});var o={bind:i,unbind:r};"function"==typeof define&&define.amd?define("eventie/eventie",o):e.eventie=o}(this),function(e,t){"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter","eventie/eventie"],function(n,i){return t(e,n,i)}):"object"==typeof exports?module.exports=t(e,require("wolfy87-eventemitter"),require("eventie")):e.imagesLoaded=t(e,e.EventEmitter,e.eventie)}(window,function(e,t,n){function i(e,t){for(var n in t)e[n]=t[n];return e}function r(e){return"[object Array]"===d.call(e)}function o(e){var t=[];if(r(e))t=e;else if("number"==typeof e.length)for(var n=0,i=e.length;i>n;n++)t.push(e[n]);else t.push(e);return t}function s(e,t,n){if(!(this instanceof s))return new s(e,t);"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=o(e),this.options=i({},this.options),"function"==typeof t?n=t:i(this.options,t),n&&this.on("always",n),this.getImages(),a&&(this.jqDeferred=new a.Deferred);var r=this;setTimeout(function(){r.check()})}function f(e){this.img=e}function c(e){this.src=e,v[e]=this}var a=e.jQuery,u=e.console,h=u!==void 0,d=Object.prototype.toString;s.prototype=new t,s.prototype.options={},s.prototype.getImages=function(){this.images=[];for(var e=0,t=this.elements.length;t>e;e++){var n=this.elements[e];"IMG"===n.nodeName&&this.addImage(n);var i=n.nodeType;if(i&&(1===i||9===i||11===i))for(var r=n.querySelectorAll("img"),o=0,s=r.length;s>o;o++){var f=r[o];this.addImage(f)}}},s.prototype.addImage=function(e){var t=new f(e);this.images.push(t)},s.prototype.check=function(){function e(e,r){return t.options.debug&&h&&u.log("confirm",e,r),t.progress(e),n++,n===i&&t.complete(),!0}var t=this,n=0,i=this.images.length;if(this.hasAnyBroken=!1,!i)return this.complete(),void 0;for(var r=0;i>r;r++){var o=this.images[r];o.on("confirm",e),o.check()}},s.prototype.progress=function(e){this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded;var t=this;setTimeout(function(){t.emit("progress",t,e),t.jqDeferred&&t.jqDeferred.notify&&t.jqDeferred.notify(t,e)})},s.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";this.isComplete=!0;var t=this;setTimeout(function(){if(t.emit(e,t),t.emit("always",t),t.jqDeferred){var n=t.hasAnyBroken?"reject":"resolve";t.jqDeferred[n](t)}})},a&&(a.fn.imagesLoaded=function(e,t){var n=new s(this,e,t);return n.jqDeferred.promise(a(this))}),f.prototype=new t,f.prototype.check=function(){var e=v[this.img.src]||new c(this.img.src);if(e.isConfirmed)return this.confirm(e.isLoaded,"cached was confirmed"),void 0;if(this.img.complete&&void 0!==this.img.naturalWidth)return this.confirm(0!==this.img.naturalWidth,"naturalWidth"),void 0;var t=this;e.on("confirm",function(e,n){return t.confirm(e.isLoaded,n),!0}),e.check()},f.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("confirm",this,t)};var v={};return c.prototype=new t,c.prototype.check=function(){if(!this.isChecked){var e=new Image;n.bind(e,"load",this),n.bind(e,"error",this),e.src=this.src,this.isChecked=!0}},c.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},c.prototype.onload=function(e){this.confirm(!0,"onload"),this.unbindProxyEvents(e)},c.prototype.onerror=function(e){this.confirm(!1,"onerror"),this.unbindProxyEvents(e)},c.prototype.confirm=function(e,t){this.isConfirmed=!0,this.isLoaded=e,this.emit("confirm",this,t)},c.prototype.unbindProxyEvents=function(e){n.unbind(e.target,"load",this),n.unbind(e.target,"error",this)},s});

/* Second Curtain JS */

  $(".onion").each(function(index, element) {

    var $before = $($(element).find(".before"))[0]
    var $after = $($(element).find(".after"))[0]

    // position once we have the images

    imagesLoaded( element, function( instance ) {

      var left = ((1200 - $($before).width()) / 2) + "px"
      var top = ((660 - $($before).height()) / 2) + "px"

      $($before).css("top", top)
      $($before).css("left", left)

      $($after).css("top", top)
      $($after).css("left", left)
    });

    // allow mouse drag to change the clip on the after

    $( $before ).mousemove(function( event ) {
        var x = event.pageX - element.offsetLeft - ((1200 - $(this).width() ) / 2)
        var css = "rect( 0px, " + x + "px, " + $(this).height() + "px, 0px)"
        $after.style.clip = css
    });

});
</script>

</body> </html>