(function($){

  $.fn.twentytwenty = function(options) {
    var options = $.extend({
            default_offset_pct: 0.5, 
            orientation: 'horizontal', 
            slider_move: "drag" //"drag" or "mousemove"
        }, options);
    return this.each(function() {

      var sliderPct = options.default_offset_pct;
      var container = $(this);
      var sliderOrientation = options.orientation;
      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
      
      
      container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
      container.append("<div class='twentytwenty-overlay'></div>");
      var beforeImg = container.find("img:first");
      var afterImg = container.find("img:last");
      container.append("<div class='twentytwenty-handle'></div>");
      var slider = container.find(".twentytwenty-handle");
      slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
      slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
      container.addClass("twentytwenty-container");
      beforeImg.addClass("twentytwenty-before");
      afterImg.addClass("twentytwenty-after");
      
      var overlay = container.find(".twentytwenty-overlay");
      overlay.append("<div class='twentytwenty-before-label'></div>");
      overlay.append("<div class='twentytwenty-after-label'></div>");

      var beforeLabel = container.find("div.twentytwenty-before-label");
      var afterLabel = container.find("div.twentytwenty-after-label");

      var calcOffset = function(dimensionPct) {
        var w = beforeImg.width();
        var h = beforeImg.height();
        return {
          w: w+"px",
          h: h+"px",
          cw: (dimensionPct*w)+"px",
          ch: (dimensionPct*h)+"px",
        };
      };

      var adjustContainer = function(offset) {
      	if (sliderOrientation === 'vertical') {
      	  beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
          
      	}
      	else {
          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
          beforeLabel.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
          afterLabel.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")"); //clip: rect(0px, 700px, 1000px, 600px);
    	}
        container.css("height", offset.h);
      };

      var adjustSlider = function(pct) {
        var offset = calcOffset(pct);
        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
        adjustContainer(offset);
      }

      $(window).on("resize.twentytwenty", function(e) {
        adjustSlider(sliderPct);
      });

      var offsetX = 0;
      var imgWidth = 0;

      if(options.slider_move == "drag") {      
          slider.on("movestart", function(e) {
            if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
              e.preventDefault();
            }
            else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
              e.preventDefault();
            }
            container.addClass("active");
            offsetX = container.offset().left;
            offsetY = container.offset().top;
            imgWidth = beforeImg.width(); 
            imgHeight = beforeImg.height();          
          });

          slider.on("moveend", function(e) {
            container.removeClass("active");
          });
          
          slider.on("move", function(e) {
            if (container.hasClass("active")) {
              sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
              if (sliderPct < 0) {
                sliderPct = 0;
              }
              if (sliderPct > 1) {
                sliderPct = 1;
              }
              adjustSlider(sliderPct);
            }
          });
      } else {
          container.mousemove(function(e) {
              sliderPct = (sliderOrientation === 'vertical') 
                  ? (e.pageY-container.offset().top)/beforeImg.height() 
                  : (e.pageX-container.offset().left)/beforeImg.width();
              if (sliderPct < 0) {
                sliderPct = 0;
              }
              if (sliderPct > 1) {
                sliderPct = 1;
              }
              adjustSlider(sliderPct);
          });
      }
      
      container.find("img").on("mousedown", function(event) {
        event.preventDefault();
      });

      $(window).trigger("resize.twentytwenty");
    });
  };

})(jQuery);