/**
* BEFORE AFTER PLUGIN
* @author Joe Critchley, Motionlab Marketing Ltd.
*
*/

(function(jq) {

	jq.before_after_plugin = {
		defaults: {
			imageHolder: '.sliderImage',
			beforeImageHolder: '.beforeImage',
			afterImageHolder: '.afterImage',
			dragger: '.dragger',
			beforeLabel: '.beforeLabel',
			afterLabel: '.afterLabel'
		}
	};
	
	jq.fn.extend({
		before_after_plugin: function(config) {
			
			var config = jq.extend({}, jq.before_after_plugin.defaults, config); // Merge with defaults.	
			config.container = this;
			config.beforeImageHolder = $(config.container).find(config.beforeImageHolder);
			config.beforeImage = (config.beforeImageHolder).find('img');
			config.afterImageHolder = $(config.container).find(config.afterImageHolder);
			config.afterImage = (config.afterImageHolder).find('img');
			config.dragger = $(config.container).find(config.dragger);
			config.startDraggerLeft = (config.dragger).position().left;
			config.beforeLabel = $(config.container).find(config.beforeLabel);
			config.afterLabel = $(config.container).find(config.afterLabel);
			updateImagePositions(config, false, null, null);
			
			(config.dragger).draggable({axis: 'x', containment: (config.container)});
			(config.dragger).bind('drag', function(event, ui) {
				var e = event;
				updateImagePositions(config, true, e, ui);
			});
			
			$(config.beforeLabel).click(function(e) {					
				(config.dragger).css({'left': '0px'});
				config.startDraggerLeft = (config.dragger).position().left;
				updateImagePositions(config, false, null, null);
			});
			
			$(config.afterLabel).click(function(e) {					
				(config.dragger).css({'left': ($(config.container).width() - (config.dragger).width()) + 'px'});
				config.startDraggerLeft = (config.dragger).position().left;
				updateImagePositions(config, false, null, null);
			});
			
		}
	});
	
	/**
	 * Update the positions of image and their wrappers depending on the position of the dragger.
	 */
	function updateImagePositions(config, dragging, e, ui) {
		
		var draggerLeftPosition = (dragging == true) ? ui.position.left : config.startDraggerLeft;
		
		// Get the distance from the right.
		config.draggerDistanceRight = ($(config.container).width()) - (draggerLeftPosition);
				
		// Set the amount of negative offset for the left image holder.
		(config.beforeImageHolder).css({'left': '-' + (config.draggerDistanceRight) + 'px'});
		
		// Reflect the changes on the image (makes it look like it's staying still)
		var reflectedLeftPosition = Math.abs((config.beforeImageHolder).position().left);
		(config.beforeImage).css({'left': reflectedLeftPosition + 'px'});
		
		// Get the distance from the left.
		config.draggerDistanceLeft = ((draggerLeftPosition));
		
		// Set the amount of position offset for the right image holder.
		(config.afterImageHolder).css({'left' : (config.draggerDistanceLeft) + 'px'});
		
		// Reflect the changes on the image (makes it look like it's staying still)
		var rightPosition = (config.afterImageHolder).position().left;				
		(config.afterImage).css({'left': '-' + rightPosition + 'px'});
				
	}

})(jQuery);