/**
 * Drop Curves - jQuery Plug-In
 * 
 * Version 0.1
 *
 * Nicholas Aiello (nikko.aiello@gmail.com)  MIT licensed
 */
(function($) {
	
	$.extend({
		dropCurves: new function() {
			
			// create the clipping mask
			function doMask(s) {
				s.ctx.save();
				s.ctx.translate(s.x + s.bSize, s.y + s.bSize);
				s.w -= s.bSize*2;
				s.h -= s.bSize*2;
				_doCorners(s);
				s.w += s.bSize*2;
				s.h += s.bSize*2;
				s.ctx.fillStyle = s.cl;
				s.ctx.fill();
				s.ctx.restore();
				s.ctx.clip();
			}
			
			// draw the shadow
			function doShadow(s) {
				s.ctx.save();
				s.ctx.translate(s.sX, s.sY);
				_doCorners(s);
				s.ctx.closePath();
				s.ctx.fillStyle = s.sColor;
				s.ctx.globalAlpha = s.o;
				s.ctx.fill();
				s.ctx.restore();
			}
			
			// draw the borders
			function doBorder(s) {
				s.ctx.save();
				s.ctx.translate(s.x, s.y);
				_doCorners(s);
				s.ctx.closePath();
				s.ctx.fillStyle = s.cl = s.bColor;
				s.ctx.fill();
				s.ctx.restore();				
			}
			
			// helper function to draw the shape of the corners
			function _doCorners(s) {
				s.ctx.beginPath();
			    s.ctx.moveTo(0, s.r);
			    s.ctx.lineTo(0, s.h - s.r);
			    s.ctx.quadraticCurveTo(0, s.h, s.r, s.h);
			    s.ctx.lineTo(s.w - s.r, s.h);
			    s.ctx.quadraticCurveTo(s.w, s.h, s.w, s.h - s.r);
			    s.ctx.lineTo(s.w, s.r);
			    s.ctx.quadraticCurveTo(s.w, 0, s.w - s.r, 0);
			    s.ctx.lineTo(s.r, 0);
			    s.ctx.quadraticCurveTo(0, 0, 0, s.r);
			}
			
			function _setPos(s) {
				s.x = (s.sX < 0 ? s.x - s.sX : s.x);
				s.y = (s.sY < 0 ? s.y - s.sY : s.y);
				s.sX = (s.sX > 0 ? s.sX : 0);
				s.sY = (s.sY > 0 ? s.sY : 0);
			}
			
			function _draw(s) {
				// sh
				if (s.s) doShadow(s);
				// border
				if (s.bSize > 0) doBorder(s);
				// mask
				doMask(s);
				// image
				s.ctx.drawImage(s.el, s.x + s.bSize, s.y + s.bSize, s.w - s.bSize*2, s.h - s.bSize*2);
			}
			
			this.construct = function(s) {
				s = s || null;
				var t,
					cv,
					clazz,
					id,
					w,
					h,
					sX,
					sY,
					st = {
						el:null, // image element
						ctx:null, // canvas context
						w:0, // width
						h:0, // height
						x:0, // image X
						y:0, // image Y
						bSize:4, // border size
						bColor:'#f00', // border color
						s:true, // shadow?
						sX:-4, // shadow X
						sY:-2, // shadow Y
						sColor:'#000', // shadow color
						blur:0, // shadow blur - not implemented
						o:0.5, // shadow opacity
						r:20, // corner radius
						cl:'#000' // general bg color
					};
				
				// override defaults with user settings
				if (s) {
					for (o in s) {
						st[o] = s[o];
					}
				}
				
				sX = Math.abs(st.sX);
				sY = Math.abs(st.sY);
				st.bSize = Math.abs(st.bSize);
				
				// set the canvas' coordinates
				_setPos(st);
				
	      		this.each(function() {
					$(this).load(function() {
						t = this;
						clazz = t.className;
						id = t.id;
						
						if (t.tagName != 'IMG') return;
						
						st.el = t;
						st.w = $(t).width();
						st.h = $(t).height();
        		
						w = st.w + sX;
						h = st.h + sY;

						// check if IE or other browser
						if ($.browser.msie) {
							// create "clipping mask"
							cv = $('<v:roundrect arcsize="' + (st.r/100 - .06) + '" strokeweight="' + st.bSize + '" strokecolor="' + st.bColor + '" style="width:' + st.w + 'px; height:' + st.h + 'px;"></v:roundrect>');
							// image
							cv.append($('<v:fill type="frame" src="' + t.src + '" />'));
							// sh
							if (st.sh) cv.append($('<v:shadow on="True" color="' + st.sColor + '" offset="' + st.sX + 'px,' + st.sY + 'px" />'));
							$(t).replaceWith(cv);
				        }
						else {
							cv = $('<canvas class="' + clazz + '" id="' + id + '" width="' + w + '" height="' + h + '"></canvas>');
							$(t).replaceWith(cv);
							
							st.ctx = cv[0].getContext('2d');
							_draw(st);
				        }
					});
				});
			}
		}
	});
	
	$.fn.extend({
		dropCurves: $.dropCurves.construct
	});
	
})(jQuery);