﻿(function($){

	$.fn.fsmagnify = function(options) {

		var defaults = {
			ratio : 3,
			imageurl : false,
			animation : { opacity: 'toggle' },
			magText: 'Click to Magnify!',
			clsText: 'Click to Close',
			onStart: function() { },
			onEnd: function() { },
			onClose: function() { }
		};

		var s = $.extend(defaults, options);

		return this.each(function() {
			if(this.tagName=="IMG") { // applicable only to the images
				var obj = $(this);
				obj.css({'cursor':'pointer'}).attr('title',s.magText);
				
				obj.click(function() {
					var tmpObj = $(this);
					if(!tmpObj.hasClass("clicked")) {
						tmpObj.addClass("clicked");
						
						var cln = obj.clone();
						cln.css({'display':'none','border':'1px solid #000','position':'absolute','top':tmpObj.position().top,'left':tmpObj.position().left,width: tmpObj.width(),height: tmpObj.height()}).insertAfter(obj)
							.attr('title',s.clsText);
							
						s.onStart(cln,tmpObj);
						
						if(s.imageurl || tmpObj.attr("rel")) { //if another image is requested
							var i = new Image();
							i.onload = function() {
								if(tmpObj.attr("rel")) { //if rel attribute exists then ignore s.imageurl
									cln.attr('src',tmpObj.attr("rel"));
								}
								else {
									cln.attr('src',s.imageurl);
								}
							};
							if(tmpObj.attr("rel"))
								i.src = tmpObj.attr("rel");
							else
								i.src = s.imageurl;
						}
						
						var animVars = {
							width: tmpObj.width()*s.ratio,
							height: tmpObj.height()*s.ratio
						};
						
						animVars = $.extend(animVars, s.animation);
						cln.animate(animVars,function() {
							s.onEnd(cln,tmpObj);
						});
						
						cln.click(function() {
							s.onClose(cln,tmpObj);
							tmpObj.removeClass("clicked");
							$(this).remove();
						});
					}
				});
			}
		});

	};
	
})(jQuery);
