/*
 * jQuery beforeafter plugin
 * @author admin@catchmyfame.com - http://www.catchmyfame.com
 * @version 1.3
 * @date May 21, 2011
 * @category jQuery plugin
 * @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)
 * @license CC Attribution-NoDerivs 3.0 Unported - http://creativecommons.org/licenses/by-nc-sa/3.0/
 */
(function(a) {
	a.fn.extend({
		beforeAfter: function(b) {
			var d= {
				animateIntro:false,
				introDelay:1000,
				introDuration:1000,
				introPosition:0.7,
				showFullLinks:true,
				beforeLinkText:"Show only before",
				afterLinkText:"Show only after",
				imagePath:"http://www.designyougo.com/js/",
				cursor:"pointer",
				clickSpeed:600,
				linkDisplaySpeed:200,
				dividerColor:"#888",
				onReady: function() {
				}
			};
			var b=a.extend(d,b);
			var c=Math.round(Math.random()*100000000);
			return this.each( function() {
				var l=b;
				var k=a(this);
				var f=a("img:first",k).width();
				var e=a("img:first",k).height();
				if(a("div",k).length!=2) {
					a("img",k).wrap("<div>")
				}
				a(k).width(f).height(e).css({
					overflow:"hidden",
					position:"relative",
					padding:"0"
				});
				var g=a("img:first",k).attr("src");
				var j=a("img:last",k).attr("src");
				a("img:first",k).attr("id","beforeimage"+c);
				a("img:last",k).attr("id","afterimage"+c);
				a(k).prepend('<div id="dragwrapper'+c+'"><div id="drag'+c+'"><img width="8" height="56" alt="handle" src="'+l.imagePath+'handle.gif" title="Drag me left or right to see the before and after images" id="handle'+c+'" /></div></div>');
				a("#dragwrapper"+c).css({
					opacity:0.25,
					position:"absolute",
					padding:"0",
					left:(f*l.introPosition)-(a("#handle"+c).width()/2)+"px",
					"z-index":"20"
				}).width(a("#handle"+c).width()).height(e);
				a("div:eq(2)",k).height(e).width(f*l.introPosition).css({
					position:"absolute",
					overflow:"hidden",
					left:"0px",
					"z-index":"10"
				});
				a("div:eq(3)",k).height(e).width(f).css({
					position:"absolute",
					overflow:"hidden",
					right:"0px"
				});
				a("#drag"+c).width(2).height(e).css({
					background:l.dividerColor,
					position:"absolute",
					left:"3px"
				});
				a("#beforeimage"+c).css({
					position:"absolute",
					top:"0px",
					left:"0px"
				});
				a("#afterimage"+c).css({
					position:"absolute",
					top:"0px",
					right:"0px"
				});
				a("#handle"+c).css({
					"z-index":"100",
					position:"relative",
					cursor:l.cursor,
					top:(e/2)-(a("#handle"+c).height()/2)+"px",
					left:"-3px"
				});
				a(k).append('<img src="'+l.imagePath+'lt-small.png" width="7" height="15" id="lt-arrow'+c+'"><img src="'+l.imagePath+'rt-small.png" width="7" height="15" id="rt-arrow'+c+'">');
				if(l.showFullLinks) {
					a(k).after('<div class="balinks" id="links'+c+'" style="position:relative"><span class="bflinks"><a id="showleft'+c+'" href="javascript:void(0)">'+l.beforeLinkText+'</a></span><span class="bflinks"><a id="showright'+c+'" href="javascript:void(0)">'+l.afterLinkText+"</a></span></div>");
					a("#links"+c).width(f);
					a("#showleft"+c).css({
						position:"relative",
						left:"0px"
					}).click( function() {
						a("div:eq(2)",k).animate({
							width:f
						},l.linkDisplaySpeed);
						a("#dragwrapper"+c).animate({
							left:f-a("#dragwrapper"+c).width()+"px"
						},l.linkDisplaySpeed)
					});
					a("#showright"+c).css({
						position:"absolute",
						right:"0px"
					}).click( function() {
						a("div:eq(2)",k).animate({
							width:0
						},l.linkDisplaySpeed);
						a("#dragwrapper"+c).animate({
							left:"0px"
						},l.linkDisplaySpeed)
					})
				}
				a("#dragwrapper"+c).draggable({
					containment:k,
					drag:h,
					stop:h
				});
				function h() {
					a("#lt-arrow"+c+", #rt-arrow"+c).stop().css("opacity",0);
					a("div:eq(2)",k).width(parseInt(a(this).css("left"))+4)
				}

				if(l.animateIntro) {
					a("div:eq(2)",k).width(f);
					a("#dragwrapper"+c).css("left",f-(a("#dragwrapper"+c).width()/2)+"px");
					setTimeout( function() {
						a("#dragwrapper"+c).css({
							opacity:1
						}).animate({
							left:(f*l.introPosition)-(a("#dragwrapper"+c).width()/2)+"px"
						},l.introDuration, function() {
							a("#dragwrapper"+c).animate({
								opacity:0.25
							},1000)
						});
						a("div:eq(2)",k).width(f).animate({
							width:f*l.introPosition+"px"
						},l.introDuration, function() {
							i();
							l.onReady.call(this)
						})
					},l.introDelay)
				} else {
					i();
					l.onReady.call(this)
				}
				function i() {
					a(k).hover( function() {
						a("#lt-arrow"+c).stop().css({
							"z-index":"20",
							position:"absolute",
							top:e/2-a("#lt-arrow"+c).height()/2+"px",
							left:parseInt(a("#dragwrapper"+c).css("left"))-10+"px"
						}).animate({
							opacity:1,
							left:parseInt(a("#lt-arrow"+c).css("left"))-6+"px"
						},200);
						a("#rt-arrow"+c).stop().css({
							position:"absolute",
							top:e/2-a("#lt-arrow"+c).height()/2+"px",
							left:parseInt(a("#dragwrapper"+c).css("left"))+10+"px"
						}).animate({
							opacity:1,
							left:parseInt(a("#rt-arrow"+c).css("left"))+6+"px"
						},200);
						a("#dragwrapper"+c).animate({
							opacity:1
						},200)
					}, function() {
						a("#lt-arrow"+c).animate({
							opacity:0,
							left:parseInt(a("#lt-arrow"+c).css("left"))-6+"px"
						},350);
						a("#rt-arrow"+c).animate({
							opacity:0,
							left:parseInt(a("#rt-arrow"+c).css("left"))+6+"px"
						},350);
						a("#dragwrapper"+c).animate({
							opacity:0.25
						},350)
					});
					a(k).click( function(m) {
						var n=m.pageX-a(this).offset().left;
						a("#dragwrapper"+c).stop().animate({
							left:n-(a("#dragwrapper"+c).width()/2)+"px"
						},l.clickSpeed);
						a("div:eq(2)",k).stop().animate({
							width:n+"px"
						},l.clickSpeed);
						a("#lt-arrow"+c+",#rt-arrow"+c).stop().animate({
							opacity:0
						},50)
					});
					a(k).one("mousemove", function() {
						a("#dragwrapper"+c).stop().animate({
							opacity:1
						},500)
					})
				}

			})
		}
	})
})(jQuery);