/*
 * jQuery.twinkle 0.2
 * http://larsjung.de/twinkle
 * 
 * provided under the terms of the MIT License
 */

( function( $ ) {


	var TwinkleEvent = function ( offX, offY, element, posX, posY ) {

		this.offset = { "left": offX, "top": offY };
		this.element = element;
		this.position = { "left": posX, "top": posY };
	};


	var Twinkler = function () {

		this.defaults = {
			"widthRatio": 0.5,
			"heightRatio": 0.5,
			"delay": 0,
			"gap": 0,
			"effect": "splash",
			"effectOptions": undefined 
		};
		this.effects = {};


		this.twinkle = function ( event, options ) {

			var settings = $.extend( {}, this.defaults, options );

			var effect = this.effects[settings.effect];
			if ( effect !== undefined ) {
				event.element = event.element || "body";
				effect.run( event, settings.effectOptions );
			};
		};


		this.twinkleAtElement = function ( htmlElement, options ) {

			var settings = $.extend( {}, this.defaults, options );
			
			var $ele = $( htmlElement );
			
			var off = $ele.offset();
			var offX = off.left + $ele.outerWidth( true ) * settings.widthRatio;
			var offY = off.top + $ele.outerHeight( true ) * settings.heightRatio;

			var pos = $ele.position();
			var posX = pos.left + $ele.outerWidth( true ) * settings.widthRatio;
			var posY = pos.top + $ele.outerHeight( true ) * settings.heightRatio;

			var event = new TwinkleEvent( offX, offY, htmlElement, posX, posY );

			this.twinkle( event, options );
		};

		
		this.twinkleAtElements = function ( htmlElements, options ) {

			var THIS = this;
			var settings = $.extend( {}, this.defaults, options );

			var delay = settings.delay;
			$( htmlElements ).each( function () {
				var htmlElement = this;
				setTimeout( function () {
					THIS.twinkleAtElement( htmlElement, options );
				}, delay );
				delay += settings.gap;
			} );
		};
	};
	


	var twinkler = new Twinkler();
	var namespace = "twinkle";


	var globals = {

		twinkle: function ( element, left, top, options ) {

			var event = new TwinkleEvent( 0, 0, element, left, top );
			twinkler.twinkle( event, options );
			return globals;
		},

		add: function ( effect ) {
			
			if ( twinkler.effects[effect.id] === undefined ) {
				twinkler.effects[effect.id] = effect;
			};
			return globals;
		},

		remove: function ( effect ) {
			
			if ( twinkler.effects[effect.id] !== undefined ) {
				delete twinkler.effects[effect.id];
			};
			return globals;
		}
	};


	var methods = {

		twinkle: function ( options ) {
			
			twinkler.twinkleAtElements( this, options );
			return this;
		}
	};


	$[namespace] = globals;
	$.fn[namespace] = function( method ) {

		if ( methods[method] ) {
			return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ) );
		} else if ( method === undefined || method instanceof Object ) {
			return methods.twinkle.apply( this, arguments );
		} else {
			$.error( "Method " +  method + " does not exist on jQuery." + namespace );
		};
	};


} )( jQuery );


/*
 * jQuery.twinkle 0.2
 * CSS Effects
 * http://larsjung.de/twinkle
 * 
 * provided under the terms of the MIT License
 */

( function( $ ) {

	
	function animation( css, event, settings ) {

		var $dot = $( "<div />" ).css( css ).appendTo( event.element );

		var fadeIn = function() {
			$dot.animate(
				{
					"left": event.position.left - settings.radius * 0.5,
					"top": event.position.top - settings.radius * 0.5,
					"width": settings.radius,
					"height": settings.radius,
					"opacity": 1
				},
				settings.duration * 0.5,
				"linear",
				fadeOut
			);
		};
		var fadeOut = function () {
			$dot.animate(
				{
					"left": event.position.left - settings.radius,
					"top": event.position.top - settings.radius,
					"width": settings.radius * 2,
					"height": settings.radius * 2,
					"opacity": 0
				},
				settings.duration * 0.5,
				"linear",
				cleanUp
			);
		};
		var cleanUp = function () {
			$dot.remove();
		};

		fadeIn();
	};

	
	var SplashEffect = function () {

		var defaults = {
			"color": "rgba(255,0,0,0.5)",
			"radius": 300,
			"duration": 1000
		};

		this.id = "splash-css";

		this.run = function ( event, options ) {
	
			var settings = $.extend( {}, defaults, options );
			var css = {
				"position": "absolute",
				"z-index": 1000,
				"display": "block",
				"border-radius": settings.radius,
				"background-color": settings.color,
				"box-shadow": "0 0 30px " + settings.color,
				"left": event.position.left,
				"top": event.position.top,
				"width": 0,
				"height": 0,
				"opacity": 0.4
			};

			animation( css, event, settings );
		};
	};


	var DropEffect = function () {

		var drops = new DropsEffect();

		this.id = "drop-css";

		this.run = function ( event, options ) {
	
			drops.run( event, $.extend( options, { count: 1 } ) );
		};
	};


	var DropsEffect = function () {

		var defaults = {
			"color": "rgba(255,0,0,0.5)",
			"radius": 300,
			"duration": 1000,
			"width": 2,
			"count": 3,
			"delay": 300
		};

		this.id = "drops-css";

		this.run = function ( event, options ) {
	
			var settings = $.extend( {}, defaults, options );
			var css = {
				"position": "absolute",
				"z-index": 1000,
				"display": "block",
				"border-radius": settings.radius,
				"border": "" + settings.width + "px solid " + settings.color,
				"left": event.position.left,
				"top": event.position.top,
				"width": 0,
				"height": 0,
				"opacity": 0.4
			};

			var delay = 0;
			for ( var i = 0; i < settings.count; i++ ) {
				setTimeout( function () {
					animation( css, event, settings );
				}, delay );
				delay += settings.delay;
			};
		};
	};


	$.twinkle.add( new SplashEffect() );
	$.twinkle.add( new DropEffect() );
	$.twinkle.add( new DropsEffect() );


} )( jQuery );


/*
 * jQuery.twinkle 0.2
 * Canvas Effects
 * http://larsjung.de/twinkle
 * 
 * provided under the terms of the MIT License
 */

( function( $ ) {


	var Interpolator = function ( values ) {

		var equiDist = function( values ) {

			var dist = 1 / ( values.length - 1 );
			var points = [];
			for ( var i = 0; i < values.length; i++ ) {
				points.push( { x: dist * i , y: values[i] } );
			};
			return points;
		};

		var interpolate = function ( p1, p2, x ) {
			
			var m = ( p2.y - p1.y ) / ( p2.x - p1.x );
			var y = p1.y + m * ( x - p1.x );
			return y;
		};
		
		var findSection = function ( x ) {
			
			for ( var i = 0; i < points.length; i++ ) {
				
				if ( i === 0 ) {
					continue;
				};
				
				var prev = points[i-1];
				var current = points[i];
				if ( x >= prev.x && x <= current.x ) {
					return [ prev, current ];
				};
			};
			return undefined;
		};

		var points = equiDist( values );
		
		this.get = function ( x ) {

			x = Math.max( 0, Math.min( 1, x ) );
			var secPts = findSection( x );
			return interpolate( secPts[0], secPts[1], x );
		};
	
	};
	Interpolator.scale = function ( x, scale, offset ) {
		
		scale = scale || 1;
		offset = offset || 0;
		x = ( x - offset ) / scale;
		return x >= 0 && x <= 1 ? x : undefined;
	};


	var FrameEvent = function ( ctx, frac, millis ) {

		this.ctx = ctx;
		this.frac = frac;
		this.millis = millis;
	};


	var CanvasEffect = function ( twinkleEvent, width, height, frame ) {

		this.element = twinkleEvent.element;
		this.x = twinkleEvent.position.left;
		this.y = twinkleEvent.position.top;
		this.width = width;
		this.height = height;
		this.frame = frame;
		this.$canvas = undefined;
		this.ctx = undefined;

		this.init = function () {
			
			var css = {
				"position": "absolute",
				"z-index": 1000,
				"display": "block",
				"left": this.x - this.width * 0.5,
				"top": this.y - this.height * 0.5,
				"width": this.width,
				"height": this.height
			};

			this.$canvas = $( "<canvas width='" + this.width + "' height='" + this.height + "' />" ).css( css ).appendTo( this.element );
			this.ctx = new Ctx( this.$canvas.get( 0 ).getContext( "2d" ) );
		};

		this.destroy = function () {

			this.$canvas.remove();
			this.$canvas = undefined;
			this.ctx = undefined;
		};

		this.run = function ( duration, fps ) {

			this.init();

			var THIS = this;
			var frameCount = duration / 1000 * fps;
			var delta = 1 / frameCount;
			for ( var i = 0; i < frameCount + 1; i++ ) {
				( function ( frac ) {
					setTimeout( function () {
						if ( THIS.ctx ) {
							THIS.frame( new FrameEvent( THIS.ctx, frac, duration * frac ) );
						};
					}, duration * frac );
				} )( i * delta );
			};

			setTimeout( $.proxy( this.destroy, this ), duration );
		};

	};

	
	var Path = function ( ctx ) {

		var context = ctx.context;
		context.beginPath();

		this.circle = function ( x, y, radius ) {
			
			context.arc( x, y, radius, 0, 2 * Math.PI, false );
			return this;
		};

		this.stroke = function ( strokeWidth, strokeStyle ) {

			context.lineWidth = strokeWidth;
			context.strokeStyle = strokeStyle;
			context.stroke();
			return ctx;
		};
		
		this.fill = function ( fillStyle ) {

			context.fillStyle = fillStyle;
			context.fill();
			return ctx;
		};
		
		this.draw = function ( strokeWidth, strokeStyle, fillStyle ) {

			this.stroke( strokeWidth, strokeStyle );
			this.fill( fillStyle );
			return ctx;
		};
	};


	var Ctx = function ( context ) {
		
		this.context = context;
		this.width = $( context.canvas ).width();
		this.height = $( context.canvas ).height();
		
		this.clear = function () {

			this.resetTransform();
			this.context.clearRect( 0, 0, this.width, this.height );
			return this;
		};

		this.resetTransform = function () {
			
			this.context.setTransform( 1, 0, 0, 1, 0, 0 );
			return this;
		};
		
		this.translate = function ( x, y ) {

			this.context.translate( x, y );
			return this;
		};

		this.rotate = function ( alpha ) {
			
			this.context.rotate( Math.PI * alpha / 180 );
			return this;
		};

		this.opacity = function ( opacity ) {
			
			this.context.globalAlpha = opacity;			
			return this;
		};

		this.path = function () {
			
			return new Path( this );
		};
	};



	var SplashEffect = function () {

		var defaults = {
			"color": "rgba(255,0,0,0.5)",
			"radius": 300,
			"duration": 1000
		};

		this.id = "splash";

		this.run = function ( twinkleEvent, options ) {

			var settings = $.extend( {}, defaults, options );
			var size = settings.radius * 2;
			var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
			var radiusIpl = new Interpolator( [ 0, settings.radius ] );
			var frame = function ( frameEvent ) {
				
				var radius = radiusIpl.get( frameEvent.frac );
				var opacity = opacityIpl.get( frameEvent.frac );
				
				this.ctx
					.clear()
					.opacity( opacity )
					.path()
					.circle( this.width * 0.5, this.height * 0.5, radius )
					.fill( settings.color );
			};
			
			new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
		};
	};

	$.twinkle.add( new SplashEffect() );



	var DropEffect = function () {

		var defaults = {
			"color": "rgba(255,0,0,0.5)",
			"radius": 300,
			"duration": 1000,
			"width": 2
		};

		this.id = "drop";

		this.run = function ( twinkleEvent, options ) {

			var settings = $.extend( {}, defaults, options );
			var size = settings.radius * 2;
			var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
			var radiusIpl = new Interpolator( [ 0, settings.radius ] );
			var frame = function ( frameEvent ) {
				
				var radius = radiusIpl.get( frameEvent.frac );
				var opacity = opacityIpl.get( frameEvent.frac );

				this.ctx
					.clear()
					.opacity( opacity )
					.path()
					.circle( this.width * 0.5, this.height * 0.5, radius )
					.stroke( settings.width, settings.color );
			};
			
			new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
		};
	};

	$.twinkle.add( new DropEffect() );



	var DropsEffect = function () {

		var defaults = {
			"color": "rgba(255,0,0,0.5)",
			"radius": 300,
			"duration": 1000,
			"width": 2,
			"count": 3,
			"delay": 100
		};

		this.id = "drops";

		this.run = function ( twinkleEvent, options ) {

			var settings = $.extend( {}, defaults, options );
			var size = settings.radius * 2;
			var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
			var radiusIpl = new Interpolator( [ 0, settings.radius ] );
			var scale = ( settings.duration - ( settings.count - 1 ) * settings.delay ) / settings.duration;
			var offset = settings.delay / settings.duration;
			
			var frame = function ( frameEvent ) {
				
				this.ctx.clear();
				for ( var i = 0; i < settings.count; i++ ) {
					var frac = Interpolator.scale( frameEvent.frac, scale, offset * i );

					if ( frac !== undefined ) {
						var radius = radiusIpl.get( frac );
						var opacity = opacityIpl.get( frac );
						this.ctx
							.opacity( opacity )
							.path()
							.circle( this.width * 0.5, this.height * 0.5, radius )
							.stroke( settings.width, settings.color );
					};
				};
			};
			
			new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
		};
	};

	$.twinkle.add( new DropsEffect() );



	var PulseEffect = function () {

		var defaults = {
			"color": "rgba(255,0,0,0.5)",
			"radius": 100,
			"duration": 3000
		};

		this.id = "pulse";

		this.run = function ( twinkleEvent, options ) {
	
			var settings = $.extend( {}, defaults, options );
			var size = settings.radius * 2;
			var opacityIpl = new Interpolator( [ 0, 1, 0.6, 1, 0.6, 1, 0 ] );
			var radiusIpl = new Interpolator( [ 0, settings.radius, settings.radius * 0.6, settings.radius, settings.radius * 0.6, settings.radius, 0 ] );
			var frame = function ( frameEvent ) {
				
				var x = this.width * 0.5;
				var y = this.height * 0.5;
				var radius = radiusIpl.get( frameEvent.frac );
				var opacity = opacityIpl.get( frameEvent.frac );
	
				this.ctx
					.clear()
					.opacity( opacity )
					.path()
					.circle( this.width * 0.5, this.height * 0.5, radius )
					.fill( settings.color );
			};
	
			new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
		};
	};

	$.twinkle.add( new PulseEffect() );



	var OrbitEffect = function () {

		var defaults = {
			"color": "rgba(255,0,0,0.5)",
			"radius": 100,
			"duration": 3000,
			"satellites": 10,
			"satellitesRadius": 10,
			"circulations": 1.5
		};

		this.id = "orbit";

		this.run = function ( twinkleEvent, options ) {
	
			var settings = $.extend( {}, defaults, options );
			var size = settings.radius * 2;
			var opacityIpl = new Interpolator( [ 0.4, 1, 1, 0.4 ] );
			var r = settings.radius - settings.satellitesRadius;
			var radiusIpl = new Interpolator( [ 0, r, r, 0 ] );
			var frame = function ( frameEvent ) {
				
				var radius = radiusIpl.get( frameEvent.frac );
				var opacity = opacityIpl.get( frameEvent.frac );
				var bog = Math.PI * 2 * settings.circulations * frameEvent.frac;
	
				this.ctx
					.clear()
					.opacity( opacity )
					.translate( this.width * 0.5, this.height * 0.5 );
				
				var path = this.ctx.path();
				for ( var i = 0; i < settings.satellites; i++ ) {

					bog += Math.PI * 2 / settings.satellites;
					var x = Math.cos( bog ) * radius;
					var y = Math.sin( bog ) * radius;
					path.circle( x, y, settings.satellitesRadius );
				};
				path.fill( settings.color );
			};
	
			new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
		};
	};

	$.twinkle.add( new OrbitEffect() );



} )( jQuery );