(function($){
	$.Peeler = function(options){
		
		settings = $.extend({
			src: "www/absolute/path/to/image.jpg",
			href: "http://www.default.com",
			target:"_blank",
			duration: 500,//milliseconds
			pulse:1000,
			pagebackimg: "/javascript/Peeler/pageback.png",
			position:"right",// ["left","right"],
			closed:{x:75,y:75,offsetx:6,offsety:6},
			open:{x:500,y:500,offsetx:32,offsety:31}
		},options);
		
		//the container, this establishes the position of the media
		peeler = $("<div>").attr({
			"id":"Peeler"+settings.position
		})
		.css("position","absolute")
		.css("z-index","999")
		.css(settings.position,0)
		.css("top",0)
		.appendTo(document.body);
		
		//the all important link
		link = $("<a>").attr({
			href:settings.href,
			target:settings.target
		})
		.appendTo(peeler);
		
		//the element where our image will be placed as the bg
		msg = $("<span>").attr({
			"class":"banner"
		})
		.css("display","block")
		.css("postition","absolute")
		.css(settings.position,0)
		.css("top",0)
		.css("width",settings.closed.x+"px")
		.css("height",settings.closed.y+"px")
		.css("background-image","url('"+settings.src+"')")
		.css("background-position","right top")
		.css("background-repeat","no-repeat")
		.appendTo(link);
		
		
		
		//The peel back portion
		pagebackimg = $("<img>").attr({
			"src":settings.pagebackimg
		})
		.css("width",(settings.closed.x+settings.closed.offsetx)+"px")
		.css("height",(settings.closed.y+settings.closed.offsety)+"px")
		.css("z-index","99")
		.css("position","absolute")
		.css("right","0")
		.css("top","0")
		.css("-ms-interpolation-mode","bicubic")
		.appendTo(link);
		
		pulseInterval = 0; //our pulse interval
		pulse = function(){
			
			var offset = 1.10;
			
			// pulse image
			$("#Peeler"+settings.position+" img")
			.stop()
			.animate({
				width: ((settings.closed.x+settings.closed.offsetx)*offset)+'px',
				height: ((settings.closed.y+settings.closed.offsety)*offset)+'px'	
			}, settings.pulse*.5)
			// chain the pulse
			.animate({
				width: (settings.closed.x+settings.closed.offsetx)+'px',
				height: (settings.closed.y+settings.closed.offsety)+'px'	
			}, settings.pulse*.5);
			
			// pulse banner
			$("#Peeler"+settings.position+" .banner")
			.stop()
			.animate({
				width: (settings.closed.x*offset)+'px',
				height: (settings.closed.y*offset)+'px'
			}, settings.pulse*.5)
			// chain the pulse
			.animate({
				width: settings.closed.x+'px',
				height: settings.closed.y+'px'
			}, settings.pulse*.5);
			
		}
		
		peeler.hover(function(){
			clearInterval(pulseInterval);
			//Animate and expand the image and the msg_block (Width + height)
			$("#Peeler"+settings.position+" img").stop().animate({
				width: (settings.open.x+settings.open.offsetx)+'px',
				height: (settings.open.y+settings.open.offsety)+'px'
			}, settings.duration);
			
			$("#Peeler"+settings.position+" .banner").stop().animate({
				width: settings.open.x+'px',
				height: settings.open.y+'px'
			}, settings.duration);
		}, function(){
			
			//On hover out, go back to original size 50x52
			$("#Peeler"+settings.position+" img")
			.stop() 
			.animate({
				width: (settings.closed.x+settings.closed.offsetx)+'px',
				height: (settings.closed.y+settings.closed.offsety)+'px'
			}, settings.duration,function(){
				clearInterval(pulseInterval);
				pulseInterval = setInterval(pulse,settings.pulse);
			});
			
			//On hover out, go back to original size 50x50
			$("#Peeler"+settings.position+" .banner")
			.stop()
			.animate({
				width: settings.closed.x+'px',
				height: settings.closed.y+'px'
			}, settings.duration); //Note this one retracts a bit faster (to prevent glitching in IE)
		});
		clearInterval(pulseInterval);
		pulseInterval = setInterval(pulse, settings.pulse)
	}
})(jQuery);