RubyGems - javascriptmvc - Versions diffs - 3.0.0.pre15 - Mend

javascriptmvc 3.0.0.pre15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (550) hide show

data/lib/javascriptmvc/funcunit/synthetic/test/qunit/qunit.js ADDED

@@ -0,0 +1,6 @@
+//we probably have to have this only describing where the tests are
+steal
+ .plugins("jquery")
+ .plugins("funcunit/synthetic")  //load your app
+ .plugins('funcunit/qunit')  //load qunit
+ .then("synthetic_test", "mouse_test", "key_test")

data/lib/javascriptmvc/funcunit/synthetic/test/qunit/synthetic_test.js ADDED

@@ -0,0 +1,91 @@
+module("funcunit/synthetic")
+st = {
+	g: function( id ) {
+		return document.getElementById(id)
+	},
+	log: function( c ) {
+		if(st.g("mlog"))
+			st.g("mlog").innerHTML = st.g("mlog").innerHTML+c+"<br/>"
+	},
+	binder: function( id, ev, f ) {
+		st.bind(st.g(id), ev, f)
+	},
+	unbinder: function( id, ev, f ) {
+		st.unbind(st.g(id), ev, f)
+	},
+	bind : window.addEventListener ?
+			function(el, ev, f){el.addEventListener(ev, f, false)} :
+			function(el, ev, f){ el.attachEvent("on"+ev, f) },
+	unbind : window.addEventListener ?
+			function(el, ev, f){ el.removeEventListener(ev, f, false)} :
+			function(el, ev, f){ el.detachEvent("on"+ev, f) }
+};
+(function(){
+	for(var name in Syn.support){
+		st.log(name+": "+Syn.support[name])
+	}
+})();
+test("Selecting a select element", function(){
+	st.g("qunit-test-area").innerHTML =
+		"<form id='outer'><select name='select'><option value='1' id='one'>one</option><option value='2' id='two'>two</option></select></form>";
+	var change = 0, changef = function(){
+		change++;
+	}
+	st.g("outer").select.selectedIndex = 0;
+	st.bind(st.g("outer").select,"change",changef );
+	stop()
+	Syn.click( st.g("two"), function(){
+		equals(change, 1 , "change called once")
+		equals(st.g("outer").select.selectedIndex, 1, "Change Selected Index");
+		//st.g("qunit-test-area").innerHTML = ""
+		start();
+	})
+})
+asyncTest("scrollTop triggers scroll events", function(){
+	st.g("qunit-test-area").innerHTML = "<div id='scroller' style='height:100px;width: 100px;overflow:auto'>"+
+			"<div style='height: 200px; width: 100%'>text"+
+			"</div>"+
+			"</div>";
+	st.binder("scroller","scroll",function(ev){
+		ok(true,"scrolling created just by changing ScrollTop");
+		st.g("qunit-test-area").innerHTML ="";
+		start();
+	} );
+	stop();
+	setTimeout(function(){
+		var sc = st.g("scroller");
+		sc && (sc.scrollTop = 10);
+	},13)
+})
+test("focus triggers focus events", function(){
+	st.g("qunit-test-area").innerHTML = "<input type='text' id='focusme'/>";
+	st.binder("focusme","focus",function(ev){
+		ok(true,"focus creates event");
+		st.g("qunit-test-area").innerHTML ="";
+		start();
+	} );
+	stop();
+	setTimeout(function(){
+		st.g("focusme").focus();
+	},10)
+})

data/lib/javascriptmvc/funcunit/synthetic/test/submit.html ADDED

@@ -0,0 +1,29 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+            "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+    <head>
+        <title>Synthetic Submit Test</title>
+        <style type='text/css'>
+        </style>
+    </head>
+    <body>
+    	<form action='submitted.html' method='get'>
+    		<input type='submit' id='submitter'/>
+			<input name='something' value='else'/>
+    	</form>
+		<a href='' id='go'>Go</a>
+<script type='text/javascript' src='../../../steal/steal.js'></script>
+<script type='text/javascript'>
+	steal.plugins('funcunit/synthetic','jquery').start();
+</script>
+<script type='text/javascript' id="demo-source">
+	$("#go").click(function(ev){
+		ev.preventDefault();
+		setTimeout(function(){
+			Syn.click({},'submitter')
+		},100)
+	})
+</script>
+    </body>
+</html>

data/lib/javascriptmvc/funcunit/synthetic/test/submitted.html ADDED

@@ -0,0 +1,3 @@
+<html>
+	<h1>Sumibtted!</h1>
+</html>

data/lib/javascriptmvc/funcunit/template.html ADDED

@@ -0,0 +1,18 @@
+<html>
+<head>
+	<!-- Change HREF to point to your copy of qunit.css -->
+    <link rel="stylesheet" type="text/css" href="http://v3.javascriptmvc.com/funcunit/dist/qunit.css" />
+    <!-- Change SRC to point to your copy of funcunit.js -->
+	<script type='text/javascript' src='http://v3.javascriptmvc.com/funcunit/dist/funcunit.js'></script>
+	<!-- Change SRC to point to your test.js -->
+	<script type='text/javascript' src='TEMPLATE_test.js'></script>
+	<title>TEMPLATE Test Suite</title>
+</head>
+<body>
+    <h1 id="qunit-header">TEMPLATE Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+    <ol id="qunit-tests"></ol>
+</body>
+</html>

data/lib/javascriptmvc/funcunit/test/drag.html ADDED

@@ -0,0 +1,63 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+            "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
+    <head>
+        <title>Synthetic Typing Test</title>
+        <style type='text/css'>
+			#key th:nth-child(even) {background: #CCf}
+			#who th:nth-child(even) {background: #fCb}
+			.hover {background-color: blue}
+			#drag, #drop {
+				width: 20px;
+				height: 20px;
+				border:1px solid black;
+			}
+			#drag {
+				top: 0px;
+				background-color: green;
+			}
+			#drop {
+				margin-top:10px;
+				background-color: blue;
+			}
+			.clicked {
+				border:1px solid red;
+			}
+        </style>
+    </head>
+    <body>
+	<p id='start'>start</p>
+	<div class='over'>Move over me</div>
+	<p id='end'>end</p>
+	<div>
+		<div id='drag'></div>
+		<div id='drop'></div>
+	</div>
+	<div class='status'></div>
+<script type='text/javascript' src='../../steal/steal.js'></script>
+<script type='text/javascript'>
+	steal.plugins('jquery', 'jquery/event/drag', 'jquery/event/drop').start();
+</script>
+<script type='text/javascript' id="demo-source">
+	var hoveredOnce = false;
+	$(".over").bind('mouseover',function(){
+		if (!hoveredOnce) {
+			$(this).addClass('hover')
+			$(document.body).append("<input type='text' id='typer' />")
+			hoveredOnce = true;
+		}
+	})
+	$('#drag')
+		.live("draginit", function(){})
+	$('#drop')
+		.live("dropover", function(){
+			$(document.body).append("<a href='#' id='clicker'>click</a>")
+			$("#clicker").click(function(){
+				$(".status").html("dragged")
+			})
+		})
+</script>
+    </body>
+</html>

data/lib/javascriptmvc/funcunit/test/funcunit/funcunit.js ADDED

@@ -0,0 +1,3 @@
+steal
+ .plugins("funcunit")
+ .then("funcunit_test","open_test","syn_test",'protodrag_test')

data/lib/javascriptmvc/funcunit/test/funcunit/funcunit_test.js ADDED

@@ -0,0 +1,87 @@
+module("funcunit - jQuery API",{
+	setup: function() {
+		var self = this;
+		S.open("test/myapp.html", function(){
+			self.pageIsLoaded = true;
+		}, 10000)
+	}
+})
+test("qUnit module setup works async", function(){
+	ok(this.pageIsLoaded, "page is loaded set before")
+})
+test("Iframe access", function(){
+	equals(S("h2",0).text(), "Goodbye World", "text of iframe")
+})
+test("html with function", 1, function(){
+	S("#clickToChange").click()
+		.html(function(html){
+			return html == "changed"
+		}, function(){
+			equals(S("#clickToChange").html(),"changed","wait actually waits")
+		})
+})
+test("Html with value", 1, function(){
+	S("#clickToChange").click()
+		.html("changed", function(){
+			equals(S("#clickToChange").html(),"changed","wait actually waits")
+		})
+})
+test("Wait", function(){
+	var before,
+		after
+	setTimeout(function(){
+		before = true;
+	},2)
+	setTimeout(function(){
+		after = true
+	},1000)
+	S.wait(20,function(){
+		ok(before, 'after 2 ms')
+		ok(!after, 'before 1000ms')
+	})
+})
+test("hasClass", function(){
+	var fast
+	S("#hasClass").click();
+	setTimeout(function(){
+		fast = true
+	},50)
+	S("#hasClass").hasClass("someClass",true, function(){
+		ok(fast,"waited until it has a class exists")
+	});
+})
+test("Exists", function(){
+	var fast
+	S("#exists").click();
+	setTimeout(function(){
+		fast = true
+	},50)
+	S("#exists p").exists(function(){
+		ok(fast,"waited until it exists")
+	});
+})
+test("Accessing the window", function(){
+	ok(S(S.window).width()> 20, "I can get the window's width")
+})
+test("Accessing the document", function(){
+	ok(S(S.window.document).width()> 20, "I can get the document's width")
+})

data/lib/javascriptmvc/funcunit/test/funcunit/open_test.js ADDED

@@ -0,0 +1,28 @@
+module("funcunit-open")
+test("URL Test", function(){
+	var path;
+	path = FuncUnit.getAbsolutePath("http://foo.com")
+	equals(path, "http://foo.com", "paths match");
+	FuncUnit.jmvcRoot = "http://localhost/"
+	path = FuncUnit.getAbsolutePath("//myapp/mypage.html")
+	equals(path, "http://localhost/myapp/mypage.html", "paths match");
+	FuncUnit.jmvcRoot = null
+	path = FuncUnit.getAbsolutePath("//myapp/mypage.html")
+	equals(path, "../myapp/mypage.html", "paths match");
+})
+test("Back to back opens", function(){
+	S.open("test/myotherapp.html", null, 10000);
+	S.open("test/myapp.html", null, 10000);
+	S("#changelink").click(function(){
+		equals(S("#changelink").text(), "Changed","href javascript run")
+	})
+})

data/lib/javascriptmvc/funcunit/test/funcunit/protodrag_test.js ADDED

@@ -0,0 +1,13 @@
+module("funcunit-prototype / scriptaculous drag",{
+	setup: function() {
+		S.open("test/protodrag/myapp.html", null, 10000);
+	}
+})
+test("Drag", function(){
+	S("#drag").drag("#drop", function(){
+		equals(S("#drop").text(), "Drags 1", 'drag worked correctly')
+	})
+})

data/lib/javascriptmvc/funcunit/test/funcunit/syn_test.js ADDED

@@ -0,0 +1,41 @@
+module("funcunit-syn integration")
+test("Type and slow Click", function(){
+	S.open("test/myapp.html", null, 10000);
+	S("#typehere").type("javascriptmvc", function(){
+		equals(S("#seewhatyoutyped").text(), "typed javascriptmvc","typing");
+	})
+	//click is going to run slow, to make sure we don't continue
+	//until after it is done.
+	S("#copy").click(function(){
+		equals(S("#seewhatyoutyped").text(), "copied javascriptmvc","copy");
+	});
+	//S("#typehere").offset(function(offset){
+	//	ok(offset.top,"has values")
+	//})
+})
+test("Move To", function(){
+	S.open("test/drag.html", null, 10000);
+	S("#start").move("#end")
+	S("#typer").type("javascriptmvc",function(){
+		equals(S("#typer").val(), "javascriptmvc","move test worked correctly");
+	})
+})
+test("Drag To", function(){
+	S.open("test/drag.html", null, 10000);
+	S("#drag").drag("#drop")
+	S("#clicker").click(function(){
+		equals(S(".status").text(), "dragged", 'drag worked correctly')
+	})
+})

data/lib/javascriptmvc/funcunit/test/jquery.event.drag.js ADDED

@@ -0,0 +1,801 @@
+// jquery/lang/vector/vector.js
+(function($){
+	var getSetZero = function(v){ return v !== undefined ? (this.array[0] = v) : this.array[0] },
+		getSetOne = function(v){ return v !== undefined ? (this.array[1] = v) : this.array[1] }
+/**
+ * @constructor
+ * A vector class
+ * @init creates a new vector instance from the arguments.  Example:
+ * @codestart
+ * new jQuery.Vector(1,2)
+ * @codeend
+ *
+ */
+jQuery.Vector = function(){
+	this.update( jQuery.makeArray(arguments) );
+};
+jQuery.Vector.prototype =
+/* @Prototype*/
+{
+	/**
+	 * Applys the function to every item in the vector.  Returns the new vector.
+	 * @param {Function} f
+	 * @return {jQuery.Vector} new vector class.
+	 */
+	app: function(f){
+		  var newArr = [];
+		  for(var i=0; i < this.array.length; i++)
+			  newArr.push( f(  this.array[i] ) );
+		  var vec = new jQuery.Vector();
+		  return vec.update(newArr);
+	},
+	/**
+	 * Adds two vectors together.  Example:
+	 * @codestart
+	 * new Vector(1,2).plus(2,3) //-> &lt;3,5>
+	 * new Vector(3,5).plus(new Vector(4,5)) //-> &lt;7,10>
+	 * @codeend
+	 * @return {jQuery.Vector}
+	 */
+	plus: function(){
+		var args = arguments[0] instanceof jQuery.Vector ?
+				 arguments[0].array :
+				 jQuery.makeArray(arguments),
+			arr=this.array.slice(0),
+			vec = new jQuery.Vector();
+		for(var i=0; i < args.length; i++)
+			arr[i] = (arr[i] ? arr[i] : 0) + args[i];
+		return vec.update(arr);
+	},
+	/**
+	 * Like plus but subtracts 2 vectors
+	 * @return {jQuery.Vector}
+	 */
+	minus: function(){
+		 var args = arguments[0] instanceof jQuery.Vector ?
+				 arguments[0].array :
+				 jQuery.makeArray(arguments),
+			 arr=this.array.slice(0), vec = new jQuery.Vector();
+		 for(var i=0; i < args.length; i++)
+			arr[i] = (arr[i] ? arr[i] : 0) - args[i];
+		 return vec.update(arr);
+	},
+	/**
+	 * Returns the current vector if it is equal to the vector passed in.
+	 * False if otherwise.
+	 * @return {jQuery.Vector}
+	 */
+	equals : function(){
+		var args = arguments[0] instanceof jQuery.Vector ?
+				 arguments[0].array :
+				 jQuery.makeArray(arguments),
+			 arr=this.array.slice(0), vec = new jQuery.Vector();
+		 for(var i=0; i < args.length; i++)
+			if(arr[i] != args[i]) return null;
+		 return vec.update(arr);
+	},
+	/*
+	 * Returns the 2nd value of the vector
+	 * @return {Number}
+	 */
+	x : getSetZero,
+	width : getSetZero,
+	/**
+	 * Returns the first value of the vector
+	 * @return {Number}
+	 */
+	y : getSetOne,
+	height : getSetOne,
+	/**
+	 * Same as x()
+	 * @return {Number}
+	 */
+	top : getSetOne,
+	/**
+	 * same as y()
+	 * @return {Number}
+	 */
+	left : getSetZero,
+	/**
+	 * returns (x,y)
+	 * @return {String}
+	 */
+	toString: function(){
+		return "("+this.array[0]+","+this.array[1]+")";
+	},
+	/**
+	 * Replaces the vectors contents
+	 * @param {Object} array
+	 */
+	update: function(array){
+		if(this.array){
+			for(var i =0; i < this.array.length; i++) delete this.array[i];
+		}
+		this.array = array;
+		for(var i =0; i < array.length; i++) this[i]= this.array[i];
+		return this;
+	}
+};
+jQuery.Event.prototype.vector = function(){
+	if(this.originalEvent.synthetic){
+		var doc = document.documentElement, body = document.body;
+		return  new jQuery.Vector(this.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc.clientLeft || 0),
+								  this.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0));
+	}else{
+		return new jQuery.Vector(this.pageX, this.pageY);
+	}
+}
+jQuery.fn.offsetv = function() {
+	if(this[0] == window){
+		return new jQuery.Vector(window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft,
+							  window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop)
+	}else{
+		var offset = this.offset();
+ 		 return new jQuery.Vector(offset.left, offset.top);
+	}
+};
+jQuery.fn.dimensionsv = function(){
+	if(this[0] == window)
+		return new jQuery.Vector(this.width(), this.height());
+	else
+		return new jQuery.Vector(this.outerWidth(), this.outerHeight());
+}
+jQuery.fn.centerv = function(){
+	return this.offsetv().plus( this.dimensionsv().app(function(u){return u /2;})  )
+}
+jQuery.fn.makePositioned = function() {
+	return this.each(function(){
+		var that = jQuery(this);
+		var pos = that.css('position');
+		if (!pos || pos == 'static') {
+			var style = { position: 'relative' };
+			if (window.opera) {
+				style.top = '0px';
+				style.left = '0px';
+			}
+			that.css(style);
+		}
+	});
+};
+})(jQuery);
+// jquery/event/livehack/livehack.js
+(function($){
+	var event = jQuery.event,
+		//helper that finds handlers by type and calls back a function, this is basically handle
+		findHelper = function(events, types, callback){
+			for( var t =0; t< types.length; t++ ) {
+				var type = types[t],
+					typeHandlers,
+					all = type.indexOf(".") < 0,
+					namespaces,
+					namespace;
+				if ( !all ) {
+					namespaces = type.split(".");
+					type = namespaces.shift();
+					namespace = new RegExp("(^|\\.)" + namespaces.slice(0).sort().join("\\.(?:.*\\.)?") + "(\\.|$)");
+				}
+				typeHandlers = ( events[type] || [] ).slice(0);
+				for( var h = 0; h <typeHandlers.length; h++ ) {
+					var handle = typeHandlers[h];
+					if( !handle.selector && (all || namespace.test( handle.namespace ))  ){
+						callback(type, handle.origHandler || handle.handler);
+					}
+				}
+			}
+		}
+	/**
+	 * Finds event handlers of a given type on an element.
+	 * @param {HTMLElement} el
+	 * @param {Array} types an array of event names
+	 * @param {String} [selector] optional selector
+	 * @return {Array} an array of event handlers
+	 */
+	event.find  = function(el, types, selector){
+		var events = $.data(el, "events"),
+			handlers = [];
+		if( !events ) {
+			return handlers;
+		}
+		if( selector ) {
+			if (!events.live) {
+				return [];
+			}
+			var live = events.live;
+			for ( var t = 0; t < live.length; t++ ) {
+				var liver = live[t];
+				if(  liver.selector === selector &&  $.inArray(liver.origType, types  ) !== -1 ) {
+					handlers.push(liver.origHandler || liver.handler);
+				}
+			}
+		}else{
+			// basically re-create handler's logic
+			findHelper(events, types, function(type, handler){
+				handlers.push(handler);
+			})
+		}
+		return handlers;
+	}
+	/**
+	 * Finds
+	 * @param {HTMLElement} el
+	 * @param {Array} types
+	 */
+	event.findBySelector = function(el, types){
+		var events = $.data(el, "events"),
+			selectors = {},
+			//adds a handler for a given selector and event
+			add = function(selector, event, handler){
+				var select = selectors[selector] ||  (selectors[selector] = {}),
+					events = select[event] || (select[event] = []);
+				events.push(handler);
+			};
+		if ( !events ) {
+			return selectors;
+		}
+		//first check live:
+		$.each( events.live||[] , function(i, live) {
+			if( $.inArray(live.origType, types  ) !== -1 ) {
+				add( live.selector, live.origType, live.origHandler || live.handler );
+			}
+		})
+		//then check straight binds
+		findHelper(events, types, function(type, handler){
+			add("", type, handler);
+		})
+		return selectors;
+	}
+	$.fn.respondsTo = function(events){
+		if(!this.length){
+			return false;
+		}else{
+			//add default ?
+			return event.find(this[0], $.isArray(events) ? events : [events]).length > 0;
+		}
+	}
+	$.fn.triggerHandled = function(event, data){
+		event = ( typeof event == "string" ? $.Event(event) : event);
+		this.trigger(event, data);
+		return event.handled;
+	}
+	/**
+	 * Only attaches one event handler for all types ...
+	 * @param {Array} types llist of types that will delegate here
+	 * @param {Object} startingEvent the first event to start listening to
+	 * @param {Object} onFirst a function to call
+	 */
+	event.setupHelper = function(types, startingEvent, onFirst){
+		if(!onFirst) {
+			onFirst = startingEvent;
+			startingEvent = null;
+		}
+		var add = function(handleObj){
+			var selector = handleObj.selector || "";
+			if (selector) {
+				var bySelector = event.find(this, types, selector);
+				if (!bySelector.length) {
+					$(this).delegate(selector,startingEvent, onFirst );
+				}
+			}
+			else {
+				//var bySelector = event.find(this, types, selector);
+				event.add(this, startingEvent, onFirst, {
+					selector: selector,
+					delegate: this
+				});
+			}
+		}
+		var remove = function(handleObj){
+			var selector = handleObj.selector || "";
+			if (selector) {
+				var bySelector = event.find(this, types, selector);
+				if (!bySelector.length) {
+					$(this).undelegate(selector,startingEvent, onFirst );
+				}
+			}
+			else {
+				event.remove(this, startingEvent, onFirst, {
+					selector: selector,
+					delegate: this
+				});
+			}
+		}
+		$.each(types, function(){
+			event.special[this] = {
+				add:  add,
+				remove: remove,
+				setup : function(){}
+			};
+		});
+	}
+})(jQuery);
+// jquery/event/drag/drag.js
+(function($){
+	//modify live
+	//steal the live handler ....
+	var bind = function(object, method){
+			var args = Array.prototype.slice.call(arguments, 2);
+			return function() {
+				var args2 = [this].concat(args, $.makeArray( arguments ));
+				return method.apply(object, args2);
+			};
+		},
+		event = $.event, handle  = event.handle;
+	/**
+	 * @constructor jQuery.Drag
+	 * @parent specialevents
+	 * @plugin jquery/event/drag
+	 * @download jquery/dist/jquery.event.drag.js
+	 * @test jquery/event/drag/qunit.html
+	 * Provides drag events as a special events to jQuery.
+	 * A jQuery.Drag instance is created on a drag and passed
+	 * as a parameter to the drag event callbacks.  By calling
+	 * methods on the drag event, you can alter the drag's
+	 * behavior.
+	 * <h2>Drag Events</h2>
+	 * The drag plugin allows you to listen to the following events:
+	 * <ul>
+	 * 	<li><code>dragdown</code> - the mouse cursor is pressed down</li>
+	 *  <li><code>draginit</code> - the drag motion is started</li>
+	 *  <li><code>dragmove</code> - the drag is moved</li>
+	 *  <li><code>dragend</code> - the drag has ended</li>
+	 *  <li><code>dragover</code> - the drag is over a drop point</li>
+	 *  <li><code>dragout</code> - the drag moved out of a drop point</li>
+	 * </ul>
+	 * <p>Just by binding or delegating on one of these events, you make
+	 * the element dragable.  You can change the behavior of the drag
+	 * by calling methods on the drag object passed to the callback.
+	 * <h3>Example</h3>
+	 * Here's a quick example:
+	 * @codestart
+	 * //makes the drag vertical
+	 * $(".drags").live("draginit", function(event, drag){
+	 *   drag.vertical();
+	 * })
+	 * //gets the position of the drag and uses that to set the width
+	 * //of an element
+	 * $(".resize").live("dragmove",function(event, drag){
+	 *   $(this).width(drag.position.left() - $(this).offset().left   )
+	 * })
+	 * @codeend
+	 * <h2>Drag Object</h2>
+	 * <p>The drag object is passed after the event to drag
+	 * event callback functions.  By calling methods
+	 * and changing the properties of the drag object,
+	 * you can alter how the drag behaves.
+	 * </p>
+	 * <p>The drag properties and methods:</p>
+	 * <ul>
+	 * 	<li><code>[jQuery.Drag.prototype.cancel cancel]</code> - stops the drag motion from happening</li>
+	 *  <li><code>[jQuery.Drag.prototype.ghost ghost]</code> - copys the draggable and drags the cloned element</li>
+	 *  <li><code>[jQuery.Drag.prototype.horizontal horizontal]</code> - limits the scroll to horizontal movement</li>
+	 *  <li><code>[jQuery.Drag.prototype.location location]</code> - where the drag should be on the screen</li>
+	 *  <li><code>[jQuery.Drag.prototype.mouseElementPosition mouseElementPosition]</code> - where the mouse should be on the drag</li>
+	 *  <li><code>[jQuery.Drag.prototype.only only]</code> - only have drags, no drops</li>
+	 *  <li><code>[jQuery.Drag.prototype.representative representative]</code> - move another element in place of this element</li>
+	 *  <li><code>[jQuery.Drag.prototype.revert revert]</code> - animate the drag back to its position</li>
+	 *  <li><code>[jQuery.Drag.prototype.vertical vertical]</code> - limit the drag to vertical movement</li>
+	 *  <li><code>[jQuery.Drag.prototype.limit limit]</code> - limit the drag within an element (*limit plugin)</li>
+	 *  <li><code>[jQuery.Drag.prototype.scrolls scrolls]</code> - scroll scrollable areas when dragging near their boundries (*scroll plugin)</li>
+	 * </ul>
+	 * <h2>Demo</h2>
+	 * Now lets see some examples:
+	 * @demo jquery/event/drag/drag.html 1000
+	 * @init
+	 * The constructor is never called directly.
+	 */
+	$.Drag = function(){}
+	/**
+	 * @Static
+	 */
+	$.extend($.Drag,
+	{
+		lowerName: "drag",
+		current : null,
+		/**
+		 * Called when someone mouses down on a draggable object.
+		 * Gathers all callback functions and creates a new Draggable.
+		 * @hide
+		 */
+		mousedown : function(ev, element){
+			var isLeftButton = ev.button == 0 || ev.button == 1;
+			if( !isLeftButton || this.current) return; //only allows 1 drag at a time, but in future could allow more
+			ev.preventDefault();
+			//create Drag
+			var drag = new $.Drag(),
+			delegate = ev.liveFired || element,
+			selector = ev.handleObj.selector,
+			self = this;
+			this.current = drag;
+			drag.setup({
+				element: element,
+				delegate: ev.liveFired || element,
+				selector: ev.handleObj.selector,
+				moved: false,
+				callbacks: {
+					dragdown: event.find(delegate, ["dragdown"], selector)[0],
+					draginit: event.find(delegate, ["draginit"], selector)[0],
+					dragover: event.find(delegate, ["dragover"], selector)[0],
+					dragmove: event.find(delegate, ["dragmove"], selector)[0],
+					dragout: event.find(delegate, ["dragout"], selector)[0],
+					dragend: event.find(delegate, ["dragend"], selector)[0]
+				},
+				destroyed : function(){
+					self.current = null;
+				}
+			}, ev)
+		}
+	})
+	/**
+	 * @Prototype
+	 */
+	$.extend($.Drag.prototype , {
+		setup : function(options, ev){
+			this.noSelection();
+			$.extend(this,options);
+			this.element = $(this.element);
+			this.event = ev;
+			this.moved = false;
+			this.allowOtherDrags = false;
+			var mousemove = bind(this, this.mousemove);
+			var mouseup =   bind(this, this.mouseup);
+			this._mousemove = mousemove;
+			this._mouseup = mouseup;
+			$(document).bind('mousemove' ,mousemove);
+			$(document).bind('mouseup',mouseup);
+			this.callDown(this.element, ev)
+		},
+		/**
+		 * Unbinds listeners and allows other drags ...
+		 * @hide
+		 */
+		destroy  : function(){
+			$(document).unbind('mousemove', this._mousemove);
+			$(document).unbind('mouseup', this._mouseup);
+			if(!this.moved){
+				this.event = this.element = null;
+			}
+			this.selection();
+			this.destroyed();
+		},
+		mousemove : function(docEl, ev){
+			if(!this.moved){
+				this.init(this.element, ev)
+				this.moved= true;
+			}
+			var pointer = ev.vector();
+			if (this._start_position && this._start_position.equals(pointer)) {
+				return;
+			}
+			//e.preventDefault();
+			this.draw(pointer, ev);
+		},
+		mouseup : function(docEl,event){
+			//if there is a current, we should call its dragstop
+			if(this.moved){
+				this.end(event);
+			}
+			this.destroy();
+		},
+		noSelection : function(){
+			document.documentElement.onselectstart = function() { return false; };
+			document.documentElement.unselectable = "on";
+			$(document.documentElement).css('-moz-user-select', 'none');
+		},
+		selection : function(){
+			document.documentElement.onselectstart = function() { };
+			document.documentElement.unselectable = "off";
+			$(document.documentElement).css('-moz-user-select', '');
+		},
+		init :  function( element, event){
+			element = $(element);
+			var startElement = (this.movingElement = (this.element = $(element)));         //the element that has been clicked on
+													//if a mousemove has come after the click
+			this._cancelled = false;                //if the drag has been cancelled
+			this.event = event;
+			this.mouseStartPosition = event.vector(); //where the mouse is located
+			/**
+			 * @attribute mouseElementPosition
+			 * The position of start of the cursor on the element
+			 */
+			this.mouseElementPosition = this.mouseStartPosition.minus( this.element.offsetv() ); //where the mouse is on the Element
+			this.callStart(element, event);
+			//Check what they have set and respond accordingly
+			//  if they canceled
+			if(this._cancelled == true) return;
+			//if they set something else as the element
+			this.startPosition = startElement != this.movingElement ? this.movingElement.offsetv() : this.currentDelta();
+			this.movingElement.makePositioned();
+			this.movingElement.css('zIndex',1000);
+			if(!this._only && this.constructor.responder)
+				this.constructor.responder.compile(event, this);
+		},
+		callDown : function(element, event){
+			if(this.callbacks[this.constructor.lowerName+"down"])
+				this.callbacks[this.constructor.lowerName+"down"].call(element, event, this  );
+		},
+		callStart : function(element, event){
+			if(this.callbacks[this.constructor.lowerName+"init"])
+				this.callbacks[this.constructor.lowerName+"init"].call(element, event, this  );
+		},
+		/**
+		 * Returns the position of the movingElement by taking its top and left.
+		 * @hide
+		 * @return {Vector}
+		 */
+		currentDelta: function() {
+			return new $.Vector( parseInt( this.movingElement.css('left') ) || 0 ,
+								parseInt( this.movingElement.css('top') )  || 0 )  ;
+		},
+		//draws the position of the dragmove object
+		draw: function(pointer, event){
+			// only drag if we haven't been cancelled;
+			if(this._cancelled) return;
+			/**
+			 * @attribute location
+			 * The location of where the element should be in the page.  This
+			 * takes into account the start position of the cursor on the element.
+			 */
+			this.location =  pointer.minus(this.mouseElementPosition);                              // the offset between the mouse pointer and the representative that the user asked for
+			// position = mouse - (dragOffset - dragTopLeft) - mousePosition
+			this.move( event );
+			if(this._cancelled) return;
+			if(!event.isDefaultPrevented())
+				this.position(this.location);
+			//fill in
+			if(!this._only && this.constructor.responder)
+				this.constructor.responder.show(pointer, this, event);
+		},
+		/**
+		 * @hide
+		 * Set the drag to only allow horizontal dragging
+		 */
+		position : function(offsetPositionv){  //should draw it on the page
+			var dragged_element_page_offset = this.movingElement.offsetv();          // the drag element's current page location
+			var dragged_element_css_offset = this.currentDelta();                   //  the drag element's current left + top css attributes
+			var dragged_element_position_vector =                                   // the vector between the movingElement's page and css positions
+				dragged_element_page_offset.minus(dragged_element_css_offset);      // this can be thought of as the original offset
+			this.required_css_position = offsetPositionv.minus(dragged_element_position_vector)
+			var style = this.movingElement[0].style;
+			if(!this._cancelled && !this._horizontal) {
+				style.top =  this.required_css_position.top() + "px"
+			}
+			if(!this._cancelled && !this._vertical){
+				style.left = this.required_css_position.left() + "px"
+			}
+		},
+		move : function(event){
+			if(this.callbacks[this.constructor.lowerName+"move"]) this.callbacks[this.constructor.lowerName+"move"].call(this.element, event, this  );
+		},
+		/**
+		 * Called on drag up
+		 * @hide
+		 * @param {Event} event a mouseup event signalling drag/drop has completed
+		 */
+		end : function(event){
+			if(this._cancelled) return;
+			if(!this._only && this.constructor.responder)
+				this.constructor.responder.end(event, this);
+			if(this.callbacks[this.constructor.lowerName+"end"])
+				this.callbacks[this.constructor.lowerName+"end"].call(this.element, event, this  );
+			if(this._revert){
+				var self= this;
+				this.movingElement.animate(
+					{
+						top: this.startPosition.top()+"px",
+						left: this.startPosition.left()+"px"},
+						function(){
+							self.cleanup.apply(self, arguments)
+						}
+				)
+			}
+			else
+				this.cleanup();
+			this.event = null;
+		},
+		/**
+		 * Cleans up drag element after drag drop.
+		 * @hide
+		 */
+		cleanup : function(){
+			this.movingElement.css({zIndex: ""})
+			if (this.movingElement[0] !== this.element[0])
+				this.movingElement.css({ display: 'none' });
+			if(this._removeMovingElement)
+				this.movingElement.remove();
+			this.movingElement = this.element = this.event = null;
+		},
+		/**
+		 * Stops drag drop from running.
+		 */
+		cancel: function() {
+			this._cancelled = true;
+			//this.end(this.event);
+			if(!this._only && this.constructor.responder)
+				this.constructor.responder.clear(this.event.vector(), this, this.event);
+			this.destroy();
+		},
+		/**
+		 * Clones the element and uses it as the moving element.
+		 * @return {jQuery.fn} the ghost
+		 */
+		ghost: function(loc) {
+			// create a ghost by cloning the source element and attach the clone to the dom after the source element
+			var ghost = this.movingElement.clone().css('position','absolute');
+			(loc ? $(loc) : this.movingElement ).after(ghost);
+			ghost.width(this.movingElement.width())
+				.height(this.movingElement.height())
+			// store the original element and make the ghost the dragged element
+			this.movingElement = ghost;
+			this._removeMovingElement = true;
+			return ghost;
+		},
+		/**
+		 * Use a representative element, instead of the movingElement.
+		 * @param {HTMLElement} element the element you want to actually drag
+		 * @param {Number} offsetX the x position where you want your mouse on the object
+		 * @param {Number} offsetY the y position where you want your mouse on the object
+		 */
+		representative : function( element, offsetX, offsetY ){
+			this._offsetX = offsetX || 0;
+			this._offsetY = offsetY || 0;
+			var p = this.mouseStartPosition;
+			this.movingElement = $(element);
+			this.movingElement.css({
+				top: (p.y() - this._offsetY) + "px",
+				left: (p.x() - this._offsetX) + "px",
+				display: 'block',
+				position: 'absolute'
+			}).show();
+			this.mouseElementPosition = new $.Vector(this._offsetX, this._offsetY)
+		},
+		/**
+		 * Makes the movingElement go back to its original position after drop.
+		 * @codestart
+		 * ".handle dragend" : function(el, ev, drag){
+		 *    drag.revert()
+		 * }
+		 * @codeend
+		 * @param {optional:Boolean} val optional, set to false if you don't want to revert.
+		 */
+		revert : function(val){
+			this._revert = val == null ? true : val;
+		},
+		/**
+		 * Isolates the drag to vertical movement.
+		 */
+		vertical : function(){
+			this._vertical = true;
+		},
+		/**
+		 * Isolates the drag to horizontal movement.
+		 */
+		horizontal : function(){
+			this._horizontal = true;
+		},
+		/**
+		 * Respondables will not be alerted to this drag.
+		 */
+		only :function(only){
+			return (this._only = (only === undefined ? true : only));
+		}
+	});
+	/**
+	 * @add jQuery.event.special static
+	 */
+	event.setupHelper( [
+		/**
+		 * @attribute dragdown
+		 * Listens for when a drag movement has started on a mousedown.
+		 * <p>Drag events are covered in more detail in [jQuery.Drag].</p>
+		 * @codestart
+		 * $(".handles").live("dragdown", function(ev, drag){})
+		 * @codeend
+		 */
+		'dragdown',
+		/**
+		 * @attribute draginit
+		 * Called when the drag starts.
+		 * <p>Drag events are covered in more detail in [jQuery.Drag].</p>
+		 */
+		'draginit',
+		/**
+		 * @attribute dragover
+		 * Called when the drag is over a drop.
+		 * <p>Drag events are covered in more detail in [jQuery.Drag].</p>
+		 */
+		'dragover',
+		/**
+		 * @attribute dragmove
+		 * Called when the drag is moved.
+		 * <p>Drag events are covered in more detail in [jQuery.Drag].</p>
+		 */
+		'dragmove',
+		/**
+		 * @attribute dragout
+		 * When the drag leaves a drop point.
+		 * <p>Drag events are covered in more detail in [jQuery.Drag].</p>
+		 */
+		'dragout',
+		/**
+		 * @attribute dragend
+		 * Called when the drag is done.
+		 * <p>Drag events are covered in more detail in [jQuery.Drag].</p>
+		 */
+		'dragend'
+		], "mousedown", function(e){
+		$.Drag.mousedown.call($.Drag, e, this)
+	} )
+})(jQuery);