// Define the jQuery-scared plugin.
jQuery.fn.scared = function(){
 
	// Create a pointer to the curren scared object
	// such that we can refer to this base instance
	// without having to worry about the dynamic
	// run-time linking of THIS.
	var scared = this;
 
 
	// This is the mouse over/move handler.
	this.OnMouseOver = function( jNode ){
		// Pick a random direction to move in. Each number,
		// 0-3 will be N, E, W, or S.
		var intDirection = Math.round( Math.random() * 3 );
 
		// Pick a random distance to travel.
		var intDistance = Math.round( Math.random() * 30 );
 
		// Get the current position of the node.
		var intLeft = parseInt( jNode.css( "left" ) );
		var intTop = parseInt( jNode.css( "top" ) );
 
 
		// Check to see which direction we are moving in.
		switch( intDirection ){
 
			// Move node North.
			case 0:
				jNode.css(
					"top",
					(intTop - intDistance)
					);
				break;
 
			// Move node East.
			case 1:
				jNode.css(
					"left",
					(intLeft + intDistance)
					);
				break;
 
			// Move node South.
			case 2:
				jNode.css(
					"top",
					(intTop + intDistance)
					);
				break;
 
			// Move node West.
			case 3:
				jNode.css(
					"left",
					(intLeft - intDistance)
					);
				break;
 
		}
	}
 
 
	// ASSERT: Now that our event handlers are defined,
	// we need to initialize the DOM nodes an actually
	// bind node-level events to our event handlers.
 
 
	// Right now, THIS points to the jQuery stack object
	// that contains all the target elements to which we
	// are going to apply the scared plugin. Let's loop
	// over each element and initialize it.
	this.each(
		function(){
			// For each DOM node that we loop over, let's
			// create a jQuery object for it.
			var jNode = $( this );
 
			// When making these elements scared, we want
			// to make sure the current top/left positions
			// are not auto.
			if (isNaN( parseInt( jNode.css( "top" ) ) )){
 
				// The top value is NOT numeric. Therefore,
				// we need to set it to zero.
				jNode.css( "top", 0 );
 
			}
 
			if (isNaN( parseInt( jNode.css( "left" ) ) )){
 
				// The left value is NOT numeric. Therefore,
				// we need to set it to zero.
				jNode.css( "left", 0 );
 
			}
 
 
			// If the position is not explicitly set, we
			// are going to set it to relative.
			if (jNode.css( "position") == "static"){
 
				// Set to relative so that we can actually
				// move stuff around.
				jNode.css( "position", "relative" );
 
			}
 
 
			// NOTE: When it comes to binding the functions
			// below, notice that we are no longer referring
			// to the THIS pointer - we are referring to the
			// "scared" pointer. This is because at runtime,
			// in that function, THIS will be dynamically
			// linked to point to something else. Therefore,
			// we refer to "scared" which, at run time will
			// bind itself via the scope-chain to the current
			// THIS which is the jQuery stack for scared.
 
 
			// Bind the mouse over event to the element.
			// The method that will be called will fire
			// the event handler and will pass in the
			// source jQuery object.
			jNode.mouseover(
				function(){
					scared.OnMouseOver( jNode );
				}
				);
 
			// Just incase the user is really fast, we
			// want to bind the mouse move event to the
			// same handler.
			jNode.mousemove(
				function(){
					scared.OnMouseOver( jNode );
				}
				);
		}
		);
 
 
	// Return the THIS pointer such that the jQuery chain
	// is not broken.
	return( this );
}