(function ($) {

	$.fn.twentytwenty = function (options) {
		var options = $.extend({
			default_offset_pct: 0.5,
			orientation: 'horizontal'
		}, 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(".imgcontent:first");
			var afterImg = container.find(".imgcontent: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 calcOffset = function (dimensionPct) {
				var w = beforeImg.width();
				var h = beforeImg.height();
				return {
					w: w + "px",
					w2: w,
					h: h + "px",
					cw: (dimensionPct * w) + "px",
					cw2: (dimensionPct * w),
					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)");
				}
				container.css("height", offset.h);
				console.log(offset.cw);
				if (offset.cw2 > beforeImg.width() /2) {
					$(".company-box-left .cbox").removeClass("active");
					$(".company-box-right .cbox").addClass("active");
					
				} else {
					$(".company-box-left .cbox").addClass("active");
					$(".company-box-right .cbox").removeClass("active");
				}

			};

			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;

			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);
				}
			});

			container.find("img").on("mousedown", function (event) {
				event.preventDefault();
			});

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

})(jQuery);