/*----------------------------- before_after -----------------------------*/
(function($){
	var 
	defaults = {
		displayRate:0.5 
	};
	$.fn.beforeAfter = function(options){
		var 
		el = this, 
		lenEl = el.length;
		if(lenEl === 0)return this;
		if(lenEl > 1){
			el.each(function(){$(this).beforeAfter(options)});
			return this;
		}
		var 
		configs = {}, 
		triggerSizeHalfH = 0, 
		flagExecute = false, 
		funcInit = function(){
			configs = $.extend({}, defaults, options);
			funcPutEle();
			funcImgLoad(el, function(){
				var 
				eleSizeH = $('.before_after_before_ele', el).eq(0).height();
				el.height(eleSizeH);
				$('.before_after_after_ele', el).eq(0).height(eleSizeH * configs.displayRate);
				triggerSizeHalfH = $('.before_after_trigger', el).eq(0).outerHeight() / 2;
				$('.before_after_trigger', el).eq(0).css({
					'top':(eleSizeH * configs.displayRate - triggerSizeHalfH) + 'px' 
				});
				funcAddEvent();
				funcDestructor();
			});
		}, 
		funcDestructor = function(){
			lenEl = 
			funcInit = 
			funcPutEle = 
			funcImgLoad = void 0;
		}, 
		funcPutEle = function(){
			el
			.empty()
			.html('\
				<div class="before_after_after_ele" style="background:url(' + el.data('img-after') + ') no-repeat top left; background-size:100%;"></div>\
				<img src="' + el.data('img-before') + '" alt="before" class="before_after_before_ele">\
				<a href="javascript:void(0);" class="before_after_trigger"><span></span></a>\
				<div class="before_after_release before_after_release_top"></div>\
				<div class="before_after_release before_after_release_right"></div>\
				<div class="before_after_release before_after_release_bottom"></div>\
				<div class="before_after_release before_after_release_left"></div>\
			');
		}, 
		funcImgLoad = function(ele, callback){
			var 
			count = 0, 
			eleImg = ele.find('img'), 
			lenImg = $(eleImg).length;
			if(lenImg === 0)
			callback();
			$(eleImg).each(function(){
				var 
				eleImg = $('<img>');
				eleImg.on({
					'load':function(){
						count++;
						if(lenImg === count)
						callback();
					}, 
					'error':function(){
						count++;
						if(lenImg === count)
						callback();
					} 
				});
				eleImg.attr('src', $(this).attr('src'));
			});
		}, 
		funcAddEvent = function(){
			$(window).on({
				'load resize':function(){
					el.height($('.before_after_before_ele', el).eq(0).height());
					triggerSizeHalfH = $('.before_after_trigger', el).eq(0).outerHeight() / 2;
				} 
			});
			var 
			funcMove = function(e){
				var 
				elSizeH = e.clientY - (el.offset().top - $(window).scrollTop());
				if(
					elSizeH < 0 || 
					elSizeH > el.outerHeight() 
				)return false;
				$('.before_after_after_ele', el).eq(0).height(elSizeH);
				$('.before_after_trigger', el).eq(0).css({
					'top':(elSizeH - triggerSizeHalfH) + 'px' 
				});
			};
			el.on({
				'mousedown touchstart':function(e){
					if(flagExecute)
					return ;
					flagExecute = true;
					e.preventDefault();
				}, 
				'mousemove':function(e){
					if(flagExecute === false)
					return ;
					e.preventDefault();
					funcMove(e);
				}, 
				'touchmove':function(e){
					if(flagExecute === false)
					return ;
					e.preventDefault();
					funcMove(e.originalEvent.changedTouches[0]);
				}, 
				'mouseup touchend':function(){
					flagExecute = false;
				} 
			});
			$($('.before_after_release'), el).on({
				'mouseover':function(){
					flagExecute = false;
				} 
			});
		};
		funcInit();
	};
})(jQuery);
/*----------------------------- /before_after -----------------------------*/