var decEnhc = {
	
	insertDynamically: function() {
		$('#before-after-container').prepend('<div class="slider"><div class="slider-control"></div></div>');
		$('#before-after-container').append('<div class="before"></div>');
	},
	
	setGlobals: function() {
		$mainWrapper = $('#main-wrapper');
		$beforeBox = $('#before-after-container .before');
		$sliderControl = $('#before-after-container .slider-control');
		var sliderX, sliderTotX;
		var beforeWidth = 820;
		var leftOffset;
	},
	
	setBeforeAfter: function() {
		sliderTotX = 0;
		
		var position = $mainWrapper.offset();
		console.log(position);
		leftOffset = position.left;
		
		$(window).resize(function() {
			position = $mainWrapper.offset();
			leftOffset = position.left;
		});
		
		$sliderControl.draggable({ 
			axis: 'x',
			containment: 'parent',
			drag: function(event, ui) {
				$('body').mousemove(function(e){
					sliderTotX = e.pageX; //This is needed to track whether or not the drag event is past the end of the image.
				});
				if(sliderTotX > (900 + leftOffset)) {
					$beforeBox.css('width', 0);
					$sliderControl.css('left', '820px'); // Without this, if the visitor is moving the mouse too fast, the slider will appear to stop too short of the end of the containment, as it won't refresh its position once the drag event moves past the end.
				}
				decEnhc.setAfterReveal();
			},
			stop: function(event, ui) {
				decEnhc.setAfterReveal();
				$('body').unbind('mousemove');
			}
		});
	},
	
	setAfterReveal: function() {
		sliderX = parseInt($sliderControl.css('left'), 10);
		beforeWidth = 820-sliderX-2;
		beforeWidth = beforeWidth + 'px';
		$beforeBox.css('width', beforeWidth);
	}
	
};

$('document').ready(function() {
	if ($.browser.msie == true) {
		document.execCommand('BackgroundImageCache', false, true);
	}
	decEnhc.insertDynamically();
	decEnhc.setGlobals();
	decEnhc.setBeforeAfter();
});