Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

- uploading 1.1 in tags

git-svn-id: http://svn.mootools.net/tags/1-10@566 4db308c1-fb21-0410-9919-de62e267375e
  • Loading branch information...
commit d4b15bdd4061d7012748bc2c9da7e70864e12bbb 0 parents
kamicane authored
Showing with 7,928 additions and 0 deletions.
  1. +121 −0 CHANGELOG
  2. +223 −0 Class/Class.Extras.js
  3. +133 −0 Class/Class.js
  4. +318 −0 Core/Core.js
  5. +168 −0 Drag/Drag.Base.js
  6. +121 −0 Drag/Drag.Move.js
  7. +127 −0 Effects/Fx.Base.js
  8. +84 −0 Effects/Fx.CSS.js
  9. +88 −0 Effects/Fx.Elements.js
  10. +126 −0 Effects/Fx.Scroll.js
  11. +132 −0 Effects/Fx.Slide.js
  12. +118 −0 Effects/Fx.Style.js
  13. +108 −0 Effects/Fx.Styles.js
  14. +215 −0 Effects/Fx.Transitions.js
  15. +99 −0 Effects/Fx.Utils.js
  16. +154 −0 Element/Element.Dimensions.js
  17. +372 −0 Element/Element.Event.js
  18. +83 −0 Element/Element.Filters.js
  19. +74 −0 Element/Element.Form.js
  20. +242 −0 Element/Element.Selectors.js
  21. +395 −0 Misc/Debugger.js
  22. +146 −0 Misc/Physics.js
  23. +408 −0 Native/Array.js
  24. +951 −0 Native/Element.js
  25. +190 −0 Native/Function.js
  26. +83 −0 Native/Number.js
  27. +250 −0 Native/String.js
  28. +146 −0 Plugins/Accordion.js
  29. +216 −0 Plugins/Color.js
  30. +76 −0 Plugins/Group.js
  31. +97 −0 Plugins/Hash.Cookie.js
  32. +190 −0 Plugins/Hash.js
  33. +85 −0 Plugins/Scroller.js
  34. +145 −0 Plugins/Slider.js
  35. +47 −0 Plugins/SmoothScroll.js
  36. +142 −0 Plugins/Sortables.js
  37. +168 −0 Plugins/Tips.js
  38. +166 −0 Remote/Ajax.js
  39. +137 −0 Remote/Assets.js
  40. +101 −0 Remote/Cookie.js
  41. +45 −0 Remote/Json.Remote.js
  42. +66 −0 Remote/Json.js
  43. +155 −0 Remote/XHR.js
  44. +62 −0 Window/Window.DomReady.js
  45. +112 −0 Window/Window.Size.js
  46. +243 −0 scripts.json
121 CHANGELOG
@@ -0,0 +1,121 @@
+MOOTOOLS CHANGELOG
+------ r474 ------
+
+
+1.1 (??? ??, 2007) http://svn.mootools.net/trunk/
+
+ADD: Added $iterable to Utility.js - returns true for arrays and iterable objects (digitarald)
+ADD: Added: document.head holds a shortcut to the <head> element (kamicane)
+ADD: Fx.Transitions allows now configurable transitions parameters for effects (kamicane)
+ADD: Added Element::injectTop to inject Elements as first child (kamicane)
+ADD: Added String::contains, which checks occurence of string, second parameter is an optional seperator. (kamicane)
+ADD: Added String::escapeRegExp, escapes expression characters in string (kamicane)
+ADD: Added Cookie option: secure for secure connections (digitarald)
+ADD: Added Element::empty, trashes all child elements and sets innerHTML to '' (aaron)
+ADD: Drag.Base grid option, for snap-to-grid movement, also accepts an object with the usual x/y values. (kamicane)
+ADD: Slider with offset option for exact knob position (kamicane)
+ADD: When you click the Slider Container you can also drag with the same click (kamicane)
+ADD: Added Element::removeProperty (kamicane)
+ADD: Element::getStyle: Full paddings/margins/borders support, correct width/height for ie. (kamicane)
+ADD: Added simple Abstract, to automatically add .extend to objects. Converted singletons to Abstract (kamicane)
+ADD: Added global MooTools object, with version property
+ADD: Added Array.getLast and .getRandom (kamicane)
+ADD: Accordion now allows you to add elements to it after its creation (addSection) (kamicane)
+ADD: Group class to collect events from several class instances
+ADD: Garbage.trash automatically cleans up the internal $ property for elements and fires onTrash before cleaning elements
+ADD: Implemented custom events, with some defaults as mouseenter, mouseleave and domready (kamicane)
+ADD: Added Array::merge and Array::include (similar to extend/push but with duplicate check) (kamicane)
+ADD: Ajax::evalScripts with global eval and automated eval for javascript response, can be forced with evalResponse , added Ajax::getHeader (digitarald)
+ADD: XHR now has a 'cancel' method, the option 'autoCancel' and the running property for active requests (digitarald, kamicane)
+ADD: UrlEncoding moved from Ajax to XHR to allow get/post encoding for Xhr/Json.Request (digitarald, kamicane)
+ADD: Added Element::hasChild() (kamicane)
+CHG: Element::setStyle does not require anymore "+ 'px'", automatically added to number values (kamicane)
+ADD: BREAKING CHANGE: Ajax: postBody renamed in data. It now works also with method=get. (kamicane)
+ADD: Added Array.include, to push an item in an array only if it's not already in. (kamicane)
+ADD: Added $time (Utility.js) to return the current timestamp [#90] (Inviz)
+ADD: Dom.js now uses Xpath if supported (window.xpath property), including selector caching and duplicate check
+ADD: setOptions accepts now any number of arguments, this.options holds the default values (Inviz)
+ADD: f1-f12 keys for Event.key [#70] (Inviz)
+ADD: Element constructor now takes an object argument for setting 'styles', 'attributes' and 'events' (ibolmo)
+ADD: Added $merge, merging objects recursively (aaron)
+ADD: Added Element.getStyles() (aaron)
+ADD: $each iterates objects and arrays (aaron)
+
+CHG: Refractored Element::getStyle. Now smaller, safer, better, up to 40% faster. (kamicane)
+CHG: DEPRECATED Array::test is now Array::contains (kamicane)
+CHG: BREAKING CHANGE: Hash::empty now clears the Hash values (kamicane)
+CHG: Drag.Base, return this to Drag::attach/detach (kamicane)
+CHG: Behavior of fixed tooltips is different, is not anymore relative to the mouse position, but to the element position.
+CHG: Element::inject allows 'top'
+CHG: $type does now recognize 'regexp' [#163] (digitarald)
+CHG: BREAKING CHANGE: Hash::each callback arguments are now (value, key) to be consistent with all each's (blame digitarald)
+CHG: Object.extend is now $extend, still compatible
+CHG: Object.native is now $native, still compatible
+CHG: Renamed internal element properties with prepended $ ($events, $included) (digitarald)
+CHG: Cookie.remove with paths and domains [#127] (kamicane)
+CHG: Added $pick to bind argument in Function::create, to allow null binds (kamicane)
+CHG: Added Array::removeItem, copied from remove, useful for $$ collection as remove gets overridden by Element::remove (kamicane)
+CHG: Added set and get Property cases for the attribute 'for' [#48] (kamicane)
+CHG: Event.js mouse events now respond also to menu types and all click types (including dblclick) (kamicane)
+CHG: Added String.prototype.hasListed for speedy classNames and tilde attributes (kamicane)
+CHG: MINOR BREAKING CHANGE: Element.hasClass does not use Regexp anymore (For Dom.js performance)
+CHG: Splitted Element.js in Element, Element.Dimensions, Element.Events and Element.Form, moved Files from Addons to Core/Native/Plugins (kamicane)
+CHG: Fast Element.walk for getNext/Previous/Last/First (Inviz)
+CHG: onProgress of Asset.Images is now binded to the current image and the index is passed. (kamicane)
+CHG: In Event class keys are now only computed for 'keydown' (kamicane)
+CHG: DEPRECATED window.onDomReady, use window.addEvent('domready', fn)
+CHG: Window.Base.js renamed to Window.DomReady.js
+CHG: Tips now use 'mouseenter' and 'mouseleave' instead of 'mouseover' and 'mouseout' (kamicane)
+CHG: Moved 'get' fallback from Ajax to XHR (kamicane)
+CHG: Garbage.trash now take as input an array of elements (kamicane)
+CHG: Event onStateChange in XHR is gone (kamicane)
+CHG: Garbage.unload is now Garbage.empty (kamicane)
+CHG: Hash.remove now use delete operator, and Hash.each uses $each (digitarald)
+CHG: BREAKING CHANGE: Cookie has now Cookie.options, duration is now in seconds, not days and false by default [for sessions] (digitarald)
+CHG: Sortables are now independent from Drag.Base, also have their own ghosting behaviour (kamicane)
+CHG: Element.setStyle also supports float now (kamicane)
+CHG: Fx.Slide allows borders and margins. Positioning is now possible. (kamicane)
+CHG: Ajax.request can take data as first argument to override options [#69] (Inviz)
+CHG: Element.adopt allows multiple arguments [#71] (Inviz)
+CHG: Removed new Element in adopt, inject and replaceWith, now only id's and element references are allows (kamicane)
+CHG: Fixed Element.getValue/Element.toQueryString with support for multiple-selects (digitarald)
+CHG: Moved $type to Moo.js
+
+FIX: Array::remove now also works with null/undefined/0
+FIX: Fixed several bugs with Assets.image and Assets.images, cleaner and better behaviour (digitarald)
+FIX: Fixed ie-domready-problem with secure sites
+FIX: Better behvaiour for Fx.Scroll::toElement [#169] (Yuffster)
+FIX: Couple of fixes to the Color class, now it also carries hex values. (kamicane)
+FIX: String::toInt fixed [#125]
+FIX: SmoothScroll now sets hash, not href [#149] (digitarald)
+FIX: Fixed the drag bug about the element getting stuck to the cursor when right-clicking or clicking outside of the window [#84] (kamicane)
+FIX: little fix for $each, provided default binding (kamicane)
+FIX: Fixed domready problem in secure sites [#139]
+FIX: Element.setOpacity with opacity/clear-type fix for ie (digitarald)
+FIX: Fixed Safari relatedTarget for Text Nodes issue (kamicane)
+FIX: Event.keyCode can also be 0 (kamicane)
+FIX: Element.toQueryString takes empty values into account [#105] (kamicane)
+FIX: Fixed opacity/clear-type fo IE to Element.setOpacity. It resets filter when opacity is 1 (digitarald)
+FIX: Fixed a bug in Asset.image, the property to the object and only once (kamicane)
+FIX: Fixed a bug in getElements to avoid potentially return of duplicates (kamicane)
+FIX: Fixed a possible warning in Array.remove (kamicane)
+FIX: Fixed flickering in Sortables (kamicane)
+FIX: $$ does not returns duplicate entries anymore (kamicane)
+FIX: Added HTMLElement support for safari, a lot faster (kamicane)
+FIX: Array iterations in Array.js optimized (digitarald)
+FIX: Accordion now resets paddings and margins (kamicane)
+FIX: Optional isSuccess in XHR with correct this (kamicane)
+FIX: Element was not extended in SmoothScroll [#45] (chris)
+FIX: Fixed a bug in Fx.Slide() causing an error in Safari when first calling show() or hide() (Chris)
+FIX: Fixed object key names not encoded correctly if they contained the " or \ special characters, in Json.toString (Chris)
+FIX: PERL-Syntax for regexp in Json.toString for better perfomance (Chris)
+FIX: Fixed Array methods behaviour [#43] (Chris)
+FIX: Several minor documentation errors fixed and more examples
+FIX: Several missing dependency fixed
+FIX: Several space fixed
+
+1.0 (January 29, 2007) http://svn.mootools.net/tags/1-00/
+
+CHG: BREAKING CHANGES:
+
+0.87 (December 12, 2006) http://svn.mootools.net/tags/0-87/
223 Class/Class.Extras.js
@@ -0,0 +1,223 @@
+/*
+Script: Class.Extras.js
+ Contains common implementations for custom classes. In Mootools is implemented in <Ajax>, <XHR> and <Fx.Base> and many more.
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Chain
+ An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>.
+ Currently implemented in <Fx.Base>, <XHR> and <Ajax>. In <Fx.Base> for example, is used to execute a list of function, one after another, once the effect is completed.
+ The functions will not be fired all togheter, but one every completion, to create custom complex animations.
+
+Example:
+ (start code)
+ var myFx = new Fx.Style('element', 'opacity');
+
+ myFx.start(1,0).chain(function(){
+ myFx.start(0,1);
+ }).chain(function(){
+ myFx.start(1,0);
+ }).chain(function(){
+ myFx.start(0,1);
+ });
+ //the element will appear and disappear three times
+ (end)
+*/
+
+var Chain = new Class({
+
+ /*
+ Property: chain
+ adds a function to the Chain instance stack.
+
+ Arguments:
+ fn - the function to append.
+ */
+
+ chain: function(fn){
+ this.chains = this.chains || [];
+ this.chains.push(fn);
+ return this;
+ },
+
+ /*
+ Property: callChain
+ Executes the first function of the Chain instance stack, then removes it. The first function will then become the second.
+ */
+
+ callChain: function(){
+ if (this.chains && this.chains.length) this.chains.shift().delay(10, this);
+ },
+
+ /*
+ Property: clearChain
+ Clears the stack of a Chain instance.
+ */
+
+ clearChain: function(){
+ this.chains = [];
+ }
+
+});
+
+/*
+Class: Events
+ An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>.
+
+ In <Fx.Base> Class, for example, is used to give the possibility add any number of functions to the Effects events, like onComplete, onStart, onCancel.
+
+Example:
+ (start code)
+ var myFx = new Fx.Style('element', 'opacity').addEvent('onComplete', function(){
+ alert('the effect is completed');
+ }).addEvent('onComplete', function(){
+ alert('I told you the effect is completed');
+ });
+
+ myFx.start(0,1);
+ //upon completion it will display the 2 alerts, in order.
+ (end)
+
+Implementing:
+ This class can be implemented into other classes to add the functionality to them.
+ Goes well with the <Options> class.
+
+Example:
+ (start code)
+ var Widget = new Class({
+ initialize: function(){},
+ finish: function(){
+ this.fireEvent('onComplete');
+ }
+ });
+ Widget.implement(new Events);
+ //later...
+ var myWidget = new Widget();
+ myWidget.addEvent('onComplete', myfunction);
+ (end)
+*/
+
+var Events = new Class({
+
+ /*
+ Property: addEvent
+ adds an event to the stack of events of the Class instance.
+
+ Arguments:
+ type - string; the event name (e.g. 'onComplete')
+ fn - function to execute
+ */
+
+ addEvent: function(type, fn){
+ if (fn != Class.empty){
+ this.$events = this.$events || {};
+ this.$events[type] = this.$events[type] || [];
+ this.$events[type].include(fn);
+ }
+ return this;
+ },
+
+ /*
+ Property: fireEvent
+ fires all events of the specified type in the Class instance.
+
+ Arguments:
+ type - string; the event name (e.g. 'onComplete')
+ args - array or single object; arguments to pass to the function; if more than one argument, must be an array
+ delay - (integer) delay (in ms) to wait to execute the event
+
+ Example:
+ (start code)
+ var Widget = new Class({
+ initialize: function(arg1, arg2){
+ ...
+ this.fireEvent("onInitialize", [arg1, arg2], 50);
+ }
+ });
+ Widget.implement(new Events);
+ (end)
+ */
+
+ fireEvent: function(type, args, delay){
+ if (this.$events && this.$events[type]){
+ this.$events[type].each(function(fn){
+ fn.create({'bind': this, 'delay': delay, 'arguments': args})();
+ }, this);
+ }
+ return this;
+ },
+
+ /*
+ Property: removeEvent
+ removes an event from the stack of events of the Class instance.
+
+ Arguments:
+ type - string; the event name (e.g. 'onComplete')
+ fn - function that was added
+ */
+
+ removeEvent: function(type, fn){
+ if (this.$events && this.$events[type]) this.$events[type].remove(fn);
+ return this;
+ }
+
+});
+
+/*
+Class: Options
+ An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>.
+ Used to automate the options settings, also adding Class <Events> when the option begins with on.
+
+ Example:
+ (start code)
+ var Widget = new Class({
+ options: {
+ color: '#fff',
+ size: {
+ width: 100
+ height: 100
+ }
+ },
+ initialize: function(options){
+ this.setOptions(options);
+ }
+ });
+ Widget.implement(new Options);
+ //later...
+ var myWidget = new Widget({
+ color: '#f00',
+ size: {
+ width: 200
+ }
+ });
+ //myWidget.options = {color: #f00, size: {width: 200, height: 100}}
+ (end)
+*/
+
+var Options = new Class({
+
+ /*
+ Property: setOptions
+ sets this.options
+
+ Arguments:
+ defaults - object; the default set of options
+ options - object; the user entered options. can be empty too.
+
+ Note:
+ if your Class has <Events> implemented, every option beginning with on, followed by a capital letter (onComplete) becomes an Class instance event.
+ */
+
+ setOptions: function(){
+ this.options = $merge.apply(null, [this.options].extend(arguments));
+ if (!this.addEvent) return this;
+ for (var option in this.options){
+ if ($type(this.options[option] == 'function') && option.test(/^on[A-Z]/)) this.addEvent(option, this.options[option]);
+ }
+ return this;
+ }
+
+});
133 Class/Class.js
@@ -0,0 +1,133 @@
+/*
+Script: Class.js
+ Contains the Class Function, aims to ease the creation of reusable Classes.
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Class
+ The base class object of the <http://mootools.net> framework.
+ Creates a new class, its initialize method will fire upon class instantiation.
+ Initialize wont fire on instantiation when you pass *null*.
+
+Arguments:
+ properties - the collection of properties that apply to the class.
+
+Example:
+ (start code)
+ var Cat = new Class({
+ initialize: function(name){
+ this.name = name;
+ }
+ });
+ var myCat = new Cat('Micia');
+ alert(myCat.name); //alerts 'Micia'
+ (end)
+*/
+
+var Class = function(properties){
+ var klass = function(){
+ return (arguments[0] !== null && this.initialize && $type(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
+ };
+ $extend(klass, this);
+ klass.prototype = properties;
+ klass.constructor = Class;
+ return klass;
+};
+
+/*
+Property: empty
+ Returns an empty function
+*/
+
+Class.empty = function(){};
+
+Class.prototype = {
+
+ /*
+ Property: extend
+ Returns the copy of the Class extended with the passed in properties.
+
+ Arguments:
+ properties - the properties to add to the base class in this new Class.
+
+ Example:
+ (start code)
+ var Animal = new Class({
+ initialize: function(age){
+ this.age = age;
+ }
+ });
+ var Cat = Animal.extend({
+ initialize: function(name, age){
+ this.parent(age); //will call the previous initialize;
+ this.name = name;
+ }
+ });
+ var myCat = new Cat('Micia', 20);
+ alert(myCat.name); //alerts 'Micia'
+ alert(myCat.age); //alerts 20
+ (end)
+ */
+
+ extend: function(properties){
+ var proto = new this(null);
+ for (var property in properties){
+ var pp = proto[property];
+ proto[property] = Class.Merge(pp, properties[property]);
+ }
+ return new Class(proto);
+ },
+
+ /*
+ Property: implement
+ Implements the passed in properties to the base Class prototypes, altering the base class, unlike <Class.extend>.
+
+ Arguments:
+ properties - the properties to add to the base class.
+
+ Example:
+ (start code)
+ var Animal = new Class({
+ initialize: function(age){
+ this.age = age;
+ }
+ });
+ Animal.implement({
+ setName: function(name){
+ this.name = name
+ }
+ });
+ var myAnimal = new Animal(20);
+ myAnimal.setName('Micia');
+ alert(myAnimal.name); //alerts 'Micia'
+ (end)
+ */
+
+ implement: function(){
+ for (var i = 0, l = arguments.length; i < l; i++) $extend(this.prototype, arguments[i]);
+ }
+
+};
+
+//internal
+
+Class.Merge = function(previous, current){
+ if (previous && previous != current){
+ var type = $type(current);
+ if (type != $type(previous)) return current;
+ switch(type){
+ case 'function':
+ var merged = function(){
+ this.parent = arguments.callee.parent;
+ return current.apply(this, arguments);
+ };
+ merged.parent = previous;
+ return merged;
+ case 'object': return $merge(previous, current);
+ }
+ }
+ return current;
+};
318 Core/Core.js
@@ -0,0 +1,318 @@
+/*
+Script: Core.js
+ Mootools - My Object Oriented javascript.
+
+License:
+ MIT-style license.
+
+MooTools Copyright:
+ copyright (c) 2007 Valerio Proietti, <http://mad4milk.net>
+
+MooTools Credits:
+ - Class is slightly based on Base.js <http://dean.edwards.name/weblog/2006/03/base/> (c) 2006 Dean Edwards, License <http://creativecommons.org/licenses/LGPL/2.1/>
+ - Some functions are inspired by those found in prototype.js <http://prototype.conio.net/> (c) 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license
+ - Documentation by Aaron Newton (aaron.newton [at] cnet [dot] com) and Valerio Proietti.
+*/
+
+var MooTools = {
+ 'version': 1.1
+};
+
+/*
+Function: $defined
+ Returns true if the passed in value/object is defined, that means is not null or undefined.
+
+Arguments:
+ obj - object to inspect
+*/
+
+function $defined(obj){
+ return (obj != undefined);
+};
+
+/*
+Function: $type
+ Returns the type of object that matches the element passed in.
+
+Arguments:
+ obj - the object to inspect.
+
+Example:
+ >var myString = 'hello';
+ >$type(myString); //returns "string"
+
+Returns:
+ 'element' - if obj is a DOM element node
+ 'textnode' - if obj is a DOM text node
+ 'whitespace' - if obj is a DOM whitespace node
+ 'arguments' - if obj is an arguments object
+ 'object' - if obj is an object
+ 'string' - if obj is a string
+ 'number' - if obj is a number
+ 'boolean' - if obj is a boolean
+ 'function' - if obj is a function
+ 'regexp' - if obj is a regular expression
+ 'class' - if obj is a Class. (created with new Class, or the extend of another class).
+ 'arguments' - if obj is the arguments object.
+ 'collection' - if obj is a native htmlelements collection, such as childNodes, getElementsByTagName .. etc.
+ false - (boolean) if the object is not defined or none of the above.
+*/
+
+function $type(obj){
+ if (!$defined(obj)) return false;
+ if (obj.htmlElement) return 'element';
+ var type = typeof obj;
+ if (type == 'object' && obj.nodeName){
+ switch(obj.nodeType){
+ case 1: return 'element';
+ case 3: return /\S/.test(obj.nodeValue) ? 'textnode' : 'whitespace';
+ }
+ }
+ if (type == 'object' || type == 'function'){
+ switch(obj.constructor){
+ case Array: return 'array';
+ case RegExp: return 'regexp';
+ case Class: return 'class';
+ }
+ if (typeof obj.length == 'number'){
+ if (obj.item) return 'collection';
+ if (obj.callee) return 'arguments';
+ }
+ }
+ return type;
+};
+
+/*
+Function: $merge
+ merges a number of objects recursively without referencing them or their sub-objects.
+
+Arguments:
+ any number of objects.
+
+Example:
+ >var mergedObj = $merge(obj1, obj2, obj3);
+ >//obj1, obj2, and obj3 are unaltered
+*/
+
+function $merge(){
+ var mix = {};
+ for (var i = 0; i < arguments.length; i++){
+ for (var property in arguments[i]){
+ var ap = arguments[i][property];
+ var mp = mix[property];
+ if (mp && $type(ap) == 'object' && $type(mp) == 'object') mix[property] = $merge(mp, ap);
+ else mix[property] = ap;
+ }
+ }
+ return mix;
+};
+
+/*
+Function: $extend
+ Copies all the properties from the second passed object to the first passed Object.
+ If you do myWhatever.extend = $extend the first parameter will become myWhatever, and your extend function will only need one parameter.
+
+Example:
+ (start code)
+ var firstOb = {
+ 'name': 'John',
+ 'lastName': 'Doe'
+ };
+ var secondOb = {
+ 'age': '20',
+ 'sex': 'male',
+ 'lastName': 'Dorian'
+ };
+ $extend(firstOb, secondOb);
+ //firstOb will become:
+ {
+ 'name': 'John',
+ 'lastName': 'Dorian',
+ 'age': '20',
+ 'sex': 'male'
+ };
+ (end)
+
+Returns:
+ The first object, extended.
+*/
+
+var $extend = Object.extend = function(){
+ var args = arguments;
+ if (!args[1]) args = [this, args[0]];
+ for (var property in args[1]) args[0][property] = args[1][property];
+ return args[0];
+};
+
+/*
+Function: $native
+ Will add a .extend method to the objects passed as a parameter, but the property passed in will be copied to the object's prototype only if non previously existent.
+ Its handy if you dont want the .extend method of an object to overwrite existing methods.
+ Used automatically in mootools to implement Array/String/Function/Number methods to browser that dont support them whitout manual checking.
+
+Arguments:
+ a number of classes/native javascript objects
+
+*/
+
+var $native = Object.Native = function(){
+ for (var i = 0, l = arguments.length; i < l; i++){
+ arguments[i].extend = function(props){
+ for (var prop in props){
+ if (!this.prototype[prop]) this.prototype[prop] = props[prop];
+ if (!this[prop]) this[prop] = $native.generic(prop);
+ }
+ };
+ }
+};
+
+$native.generic = function(prop){
+ return function(bind){
+ return this.prototype[prop].apply(bind, Array.prototype.slice.call(arguments, 1));
+ };
+};
+
+$native(Function, Array, String, Number);
+
+/*
+Class: Abstract
+ Abstract class, to be used as singleton. Will add .extend to any object
+
+Arguments:
+ an object
+
+Returns:
+ the object with an .extend property, equivalent to <$extend>.
+*/
+
+var Abstract = function(obj){
+ obj = obj || {};
+ obj.extend = $extend;
+ return obj;
+};
+
+//window, document
+
+var Window = new Abstract(window);
+var Document = new Abstract(document);
+document.head = document.getElementsByTagName('head')[0];
+
+/* Section: Utility Functions */
+
+/*
+Function: $chk
+ Returns true if the passed in value/object exists or is 0, otherwise returns false.
+ Useful to accept zeroes.
+
+Arguments:
+ obj - object to inspect
+*/
+
+function $chk(obj){
+ return !!(obj || obj === 0);
+};
+
+/*
+Function: $pick
+ Returns the first object if defined, otherwise returns the second.
+
+Arguments:
+ obj - object to test
+ picked - the default to return
+
+Example:
+ (start code)
+ function say(msg){
+ alert($pick(msg, 'no meessage supplied'));
+ }
+ (end)
+*/
+
+function $pick(obj, picked){
+ return $defined(obj) ? obj : picked;
+};
+
+/*
+Function: $random
+ Returns a random integer number between the two passed in values.
+
+Arguments:
+ min - integer, the minimum value (inclusive).
+ max - integer, the maximum value (inclusive).
+
+Returns:
+ a random integer between min and max.
+*/
+
+function $random(min, max){
+ return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+/*
+Function: $time
+ Returns the current timestamp
+
+Returns:
+ a timestamp integer.
+*/
+
+function $time(){
+ return new Date().getTime();
+};
+
+/*
+Function: $clear
+ clears a timeout or an Interval.
+
+Returns:
+ null
+
+Arguments:
+ timer - the setInterval or setTimeout to clear.
+
+Example:
+ >var myTimer = myFunction.delay(5000); //wait 5 seconds and execute my function.
+ >myTimer = $clear(myTimer); //nevermind
+
+See also:
+ <Function.delay>, <Function.periodical>
+*/
+
+function $clear(timer){
+ clearTimeout(timer);
+ clearInterval(timer);
+ return null;
+};
+
+/*
+Class: window
+ Some properties are attached to the window object by the browser detection.
+
+Properties:
+ window.ie - will be set to true if the current browser is internet explorer (any).
+ window.ie6 - will be set to true if the current browser is internet explorer 6.
+ window.ie7 - will be set to true if the current browser is internet explorer 7.
+ window.gecko - will be set to true if the current browser is Mozilla/Gecko.
+ window.webkit - will be set to true if the current browser is Safari/Konqueror.
+ window.webkit419 - will be set to true if the current browser is Safari2 / webkit till version 419.
+ window.webkit420 - will be set to true if the current browser is Safari3 (Webkit SVN Build) / webkit over version 419.
+ window.opera - is set to true by opera itself.
+*/
+
+window.xpath = !!(document.evaluate);
+if (window.ActiveXObject) window.ie = window[window.XMLHttpRequest ? 'ie7' : 'ie6'] = true;
+else if (document.childNodes && !document.all && !navigator.taintEnabled) window.khtml = window.webkit = window[window.xpath ? 'webkit420' : 'webkit419'] = true;
+else if (document.getBoxObjectFor != null) window.gecko = true;
+
+//htmlelement
+
+if (typeof HTMLElement == 'undefined'){
+ var HTMLElement = function(){};
+ if (window.webkit) document.createElement("iframe"); //fixes safari
+ HTMLElement.prototype = (window.webkit) ? window["[[DOMElement.prototype]]"] : {};
+}
+HTMLElement.prototype.htmlElement = true;
+
+//enables background image cache for internet explorer 6
+
+if (window.ie6) try {document.execCommand("BackgroundImageCache", false, true);} catch(e){};
168 Drag/Drag.Base.js
@@ -0,0 +1,168 @@
+/*
+Script: Drag.Base.js
+ Contains <Drag.Base>, <Element.makeResizable>
+
+License:
+ MIT-style license.
+*/
+
+var Drag = {};
+
+/*
+Class: Drag.Base
+ Modify two css properties of an element based on the position of the mouse.
+
+Note:
+ Drag.Base requires an XHTML doctype.
+
+Arguments:
+ el - the $(element) to apply the transformations to.
+ options - optional. The options object.
+
+Options:
+ handle - the $(element) to act as the handle for the draggable element. defaults to the $(element) itself.
+ modifiers - an object. see Modifiers Below.
+ onStart - optional, function to execute when the user starts to drag (on mousedown);
+ onComplete - optional, function to execute when the user completes the drag.
+ onDrag - optional, function to execute at every step of the drag
+ limit - an object, see Limit below.
+ grid - optional, distance in px for snap-to-grid dragging
+ snap - optional, the distance you have to drag before the element starts to respond to the drag. defaults to false
+
+ modifiers:
+ x - string, the style you want to modify when the mouse moves in an horizontal direction. defaults to 'left'
+ y - string, the style you want to modify when the mouse moves in a vertical direction. defaults to 'top'
+
+ limit:
+ x - array with start and end limit relative to modifiers.x
+ y - array with start and end limit relative to modifiers.y
+*/
+
+Drag.Base = new Class({
+
+ options: {
+ handle: false,
+ unit: 'px',
+ onStart: Class.empty,
+ onBeforeStart: Class.empty,
+ onComplete: Class.empty,
+ onSnap: Class.empty,
+ onDrag: Class.empty,
+ limit: false,
+ modifiers: {x: 'left', y: 'top'},
+ grid: false,
+ snap: 6
+ },
+
+ initialize: function(el, options){
+ this.setOptions(options);
+ this.element = $(el);
+ this.handle = $(this.options.handle) || this.element;
+ this.mouse = {'now': {}, 'pos': {}};
+ this.value = {'start': {}, 'now': {}};
+ this.bound = {
+ 'start': this.start.bindWithEvent(this),
+ 'check': this.check.bindWithEvent(this),
+ 'drag': this.drag.bindWithEvent(this),
+ 'stop': this.stop.bind(this)
+ };
+ this.attach();
+ if (this.options.initialize) this.options.initialize.call(this);
+ },
+
+ attach: function(){
+ this.handle.addEvent('mousedown', this.bound.start);
+ return this;
+ },
+
+ detach: function(){
+ this.handle.removeEvent('mousedown', this.bound.start);
+ return this;
+ },
+
+ start: function(event){
+ this.fireEvent('onBeforeStart', this.element);
+ this.mouse.start = event.page;
+ var limit = this.options.limit;
+ this.limit = {'x': [], 'y': []};
+ for (var z in this.options.modifiers){
+ if (!this.options.modifiers[z]) continue;
+ this.value.now[z] = this.element.getStyle(this.options.modifiers[z]).toInt();
+ this.mouse.pos[z] = event.page[z] - this.value.now[z];
+ if (limit && limit[z]){
+ for (var i = 0; i < 2; i++){
+ if ($chk(limit[z][i])) this.limit[z][i] = ($type(limit[z][i]) == 'function') ? limit[z][i]() : limit[z][i];
+ }
+ }
+ }
+ if ($type(this.options.grid) == 'number') this.options.grid = {'x': this.options.grid, 'y': this.options.grid};
+ document.addListener('mousemove', this.bound.check);
+ document.addListener('mouseup', this.bound.stop);
+ this.fireEvent('onStart', this.element);
+ event.stop();
+ },
+
+ check: function(event){
+ var distance = Math.round(Math.sqrt(Math.pow(event.page.x - this.mouse.start.x, 2) + Math.pow(event.page.y - this.mouse.start.y, 2)));
+ if (distance > this.options.snap){
+ document.removeListener('mousemove', this.bound.check);
+ document.addListener('mousemove', this.bound.drag);
+ this.drag(event);
+ this.fireEvent('onSnap', this.element);
+ }
+ event.stop();
+ },
+
+ drag: function(event){
+ this.out = false;
+ this.mouse.now = event.page;
+ for (var z in this.options.modifiers){
+ if (!this.options.modifiers[z]) continue;
+ this.value.now[z] = this.mouse.now[z] - this.mouse.pos[z];
+ if (this.limit[z]){
+ if ($chk(this.limit[z][1]) && (this.value.now[z] > this.limit[z][1])){
+ this.value.now[z] = this.limit[z][1];
+ this.out = true;
+ } else if ($chk(this.limit[z][0]) && (this.value.now[z] < this.limit[z][0])){
+ this.value.now[z] = this.limit[z][0];
+ this.out = true;
+ }
+ }
+ if (this.options.grid[z]) this.value.now[z] -= (this.value.now[z] % this.options.grid[z]);
+ this.element.setStyle(this.options.modifiers[z], this.value.now[z] + this.options.unit);
+ }
+ this.fireEvent('onDrag', this.element);
+ event.stop();
+ },
+
+ stop: function(){
+ document.removeListener('mousemove', this.bound.check);
+ document.removeListener('mousemove', this.bound.drag);
+ document.removeListener('mouseup', this.bound.stop);
+ this.fireEvent('onComplete', this.element);
+ }
+
+});
+
+Drag.Base.implement(new Events, new Options);
+
+/*
+Class: Element
+ Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
+*/
+
+Element.extend({
+
+ /*
+ Property: makeResizable
+ Makes an element resizable (by dragging) with the supplied options.
+
+ Arguments:
+ options - see <Drag.Base> for acceptable options.
+ */
+
+ makeResizable: function(options){
+ return new Drag.Base(this, $merge({modifiers: {x: 'width', y: 'height'}}, options));
+ }
+
+});
121 Drag/Drag.Move.js
@@ -0,0 +1,121 @@
+/*
+Script: Drag.Move.js
+ Contains <Drag.Move>, <Element.makeDraggable>
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Drag.Move
+ Extends <Drag.Base>, has additional functionality for dragging an element, support snapping and droppables.
+ Drag.move supports either position absolute or relative. If no position is found, absolute will be set.
+
+Note:
+ Drag.Move requires an XHTML doctype.
+
+Arguments:
+ el - the $(element) to apply the drag to.
+ options - optional. see Options below.
+
+Options:
+ all the drag.Base options, plus:
+ container - an element, will fill automatically limiting options based on the $(element) size and position. defaults to false (no limiting)
+ droppables - an array of elements you can drop your draggable to.
+ overflown - an array of nested scrolling containers, see Element::getPosition
+*/
+
+Drag.Move = Drag.Base.extend({
+
+ options: {
+ droppables: [],
+ container: false,
+ overflown: []
+ },
+
+ initialize: function(el, options){
+ this.setOptions(options);
+ this.element = $(el);
+ this.droppables = $$(this.options.droppables);
+ this.container = $(this.options.container);
+ this.position = {'element': this.element.getStyle('position'), 'container': false};
+ if (this.container) this.position.container = this.container.getStyle('position');
+ if (!['absolute', 'relative'].contains(this.position.element)) this.position.element = 'absolute';
+ var top = this.element.getStyle('top').toInt();
+ var left = this.element.getStyle('left').toInt();
+ if (this.position.element == 'absolute' && !['relative', 'absolute', 'fixed'].contains(this.position.container)){
+ top = $chk(top) ? top : this.element.getTop(this.options.overflown);
+ left = $chk(left) ? left : this.element.getLeft(this.options.overflown);
+ } else {
+ top = $chk(top) ? top : 0;
+ left = $chk(left) ? left : 0;
+ }
+ this.element.setStyles({'top': top, 'left': left, 'position': this.position.element});
+ this.parent(this.element);
+ },
+
+ start: function(event){
+ this.overed = null;
+ if (this.container){
+ var cont = this.container.getCoordinates();
+ var el = this.element.getCoordinates();
+ if (this.position.element == 'absolute' && !['relative', 'absolute', 'fixed'].contains(this.position.container)){
+ this.options.limit = {
+ 'x': [cont.left, cont.right - el.width],
+ 'y': [cont.top, cont.bottom - el.height]
+ };
+ } else {
+ this.options.limit = {
+ 'y': [0, cont.height - el.height],
+ 'x': [0, cont.width - el.width]
+ };
+ }
+ }
+ this.parent(event);
+ },
+
+ drag: function(event){
+ this.parent(event);
+ var overed = this.out ? false : this.droppables.filter(this.checkAgainst, this).getLast();
+ if (this.overed != overed){
+ if (this.overed) this.overed.fireEvent('leave', [this.element, this]);
+ this.overed = overed ? overed.fireEvent('over', [this.element, this]) : null;
+ }
+ return this;
+ },
+
+ checkAgainst: function(el){
+ el = el.getCoordinates(this.options.overflown);
+ var now = this.mouse.now;
+ return (now.x > el.left && now.x < el.right && now.y < el.bottom && now.y > el.top);
+ },
+
+ stop: function(){
+ if (this.overed && !this.out) this.overed.fireEvent('drop', [this.element, this]);
+ else this.element.fireEvent('emptydrop', this);
+ this.parent();
+ return this;
+ }
+
+});
+
+/*
+Class: Element
+ Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
+*/
+
+Element.extend({
+
+ /*
+ Property: makeDraggable
+ Makes an element draggable with the supplied options.
+
+ Arguments:
+ options - see <Drag.Move> and <Drag.Base> for acceptable options.
+ */
+
+ makeDraggable: function(options){
+ return new Drag.Move(this, options);
+ }
+
+});
127 Effects/Fx.Base.js
@@ -0,0 +1,127 @@
+/*
+Script: Fx.Base.js
+ Contains <Fx.Base> and two Transitions.
+
+License:
+ MIT-style license.
+*/
+
+var Fx = {Shared: {}};
+
+/*
+Class: Fx.Base
+ Base class for the Mootools Effects (Moo.Fx) library.
+
+Options:
+ onStart - the function to execute as the effect begins; nothing (<Class.empty>) by default.
+ onComplete - the function to execute after the effect has processed; nothing (<Class.empty>) by default.
+ transition - the equation to use for the effect see <Fx.Transitions>; default is <Fx.Transitions.Sine.easeInOut>
+ duration - the duration of the effect in ms; 500 is the default.
+ unit - the unit is 'px' by default (other values include things like 'em' for fonts or '%').
+ wait - boolean: to wait or not to wait for a current transition to end before running another of the same instance. defaults to true.
+ fps - the frames per second for the transition; default is 30
+*/
+
+Fx.Base = new Class({
+
+ options: {
+ onStart: Class.empty,
+ onComplete: Class.empty,
+ onCancel: Class.empty,
+ transition: function(p){
+ return -(Math.cos(Math.PI * p) - 1) / 2;
+ },
+ duration: 500,
+ unit: 'px',
+ wait: true,
+ fps: 50
+ },
+
+ initialize: function(options){
+ this.element = this.element || null;
+ this.setOptions(options);
+ if (this.options.initialize) this.options.initialize.call(this);
+ },
+
+ step: function(){
+ var time = $time();
+ if (time < this.time + this.options.duration){
+ this.delta = this.options.transition((time - this.time) / this.options.duration);
+ this.setNow();
+ this.increase();
+ } else {
+ this.stop(true);
+ this.set(this.to);
+ this.fireEvent('onComplete', this.element, 10);
+ this.callChain();
+ }
+ },
+
+ /*
+ Property: set
+ Immediately sets the value with no transition.
+
+ Arguments:
+ to - the point to jump to
+
+ Example:
+ >var myFx = new Fx.Style('myElement', 'opacity').set(0); //will make it immediately transparent
+ */
+
+ set: function(to){
+ this.now = to;
+ this.increase();
+ return this;
+ },
+
+ setNow: function(){
+ this.now = this.compute(this.from, this.to);
+ },
+
+ compute: function(from, to){
+ return (to - from) * this.delta + from;
+ },
+
+ /*
+ Property: start
+ Executes an effect from one position to the other.
+
+ Arguments:
+ from - integer: staring value
+ to - integer: the ending value
+
+ Examples:
+ >var myFx = new Fx.Style('myElement', 'opacity').start(0,1); //display a transition from transparent to opaque.
+ */
+
+ start: function(from, to){
+ if (!this.options.wait) this.stop();
+ else if (this.timer) return this;
+ this.from = from;
+ this.to = to;
+ this.change = this.to - this.from;
+ this.time = $time();
+ this.timer = this.step.periodical(Math.round(1000 / this.options.fps), this);
+ this.fireEvent('onStart', this.element);
+ return this;
+ },
+
+ /*
+ Property: stop
+ Stops the transition.
+ */
+
+ stop: function(end){
+ if (!this.timer) return this;
+ this.timer = $clear(this.timer);
+ if (!end) this.fireEvent('onCancel', this.element);
+ return this;
+ },
+
+ //compat
+ custom: function(from, to){return this.start(from, to)},
+ clearTimer: function(end){return this.stop(end)}
+
+});
+
+Fx.Base.implement(new Chain, new Events, new Options);
84 Effects/Fx.CSS.js
@@ -0,0 +1,84 @@
+/*
+Script: Fx.CSS.js
+ Css parsing class for effects. Required by <Fx.Style>, <Fx.Styles>, <Fx.Elements>. No documentation needed, as its used internally.
+
+License:
+ MIT-style license.
+*/
+
+Fx.CSS = {
+
+ select: function(property, to){
+ if (property.test(/color/i)) return this.Color;
+ if (to.contains && to.contains(' ')) return this.Multi;
+ return this.Single;
+ },
+
+ parse: function(el, property, fromTo){
+ if (!fromTo.push) fromTo = [fromTo];
+ var from = fromTo[0], to = fromTo[1];
+ if (!to && to != 0){
+ to = from;
+ from = el.getStyle(property);
+ }
+ var css = this.select(property, to);
+ return {from: css.parse(from), to: css.parse(to), css: css};
+ }
+
+};
+
+Fx.CSS.Single = {
+
+ parse: function(value){
+ return parseFloat(value);
+ },
+
+ getNow: function(from, to, fx){
+ return fx.compute(from, to);
+ },
+
+ getValue: function(value, unit, property){
+ if (unit == 'px' && property != 'opacity') value = Math.round(value);
+ return value + unit;
+ }
+
+};
+
+Fx.CSS.Multi = {
+
+ parse: function(value){
+ return value.push ? value : value.split(' ').map(function(v){
+ return parseFloat(v);
+ });
+ },
+
+ getNow: function(from, to, fx){
+ var now = [];
+ for (var i = 0; i < from.length; i++) now[i] = fx.compute(from[i], to[i]);
+ return now;
+ },
+
+ getValue: function(value, unit, property){
+ if (unit == 'px' && property != 'opacity') value = value.map(Math.round);
+ return value.join(unit + ' ') + unit;
+ }
+
+};
+
+Fx.CSS.Color = {
+
+ parse: function(value){
+ return value.push ? value : value.hexToRgb(true);
+ },
+
+ getNow: function(from, to, fx){
+ var now = [];
+ for (var i = 0; i < from.length; i++) now[i] = Math.round(fx.compute(from[i], to[i]));
+ return now;
+ },
+
+ getValue: function(value){
+ return 'rgb(' + value.join(',') + ')';
+ }
+
+};
88 Effects/Fx.Elements.js
@@ -0,0 +1,88 @@
+/*
+Script: Fx.Elements.js
+ Contains <Fx.Elements>
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Fx.Elements
+ Fx.Elements allows you to apply any number of styles transitions to a selection of elements. Includes colors (must be in hex format).
+
+Arguments:
+ elements - a collection of elements the effects will be applied to.
+ options - same as <Fx.Base> options.
+*/
+
+Fx.Elements = Fx.Base.extend({
+
+ initialize: function(elements, options){
+ this.elements = $$(elements);
+ this.parent(options);
+ },
+
+ setNow: function(){
+ for (var i in this.from){
+ var iFrom = this.from[i], iTo = this.to[i], iCss = this.css[i], iNow = this.now[i] = {};
+ for (var p in iFrom) iNow[p] = iCss[p].getNow(iFrom[p], iTo[p], this);
+ }
+ },
+
+ set: function(to){
+ var parsed = {};
+ this.css = {};
+ for (var i in to){
+ var iTo = to[i], iCss = this.css[i] = {}, iParsed = parsed[i] = {};
+ for (var p in iTo){
+ iCss[p] = Fx.CSS.select(p, iTo[p]);
+ iParsed[p] = iCss[p].parse(iTo[p]);
+ }
+ }
+ return this.parent(parsed);
+ },
+
+ /*
+ Property: start
+ Applies the passed in style transitions to each object named (see example). Each item in the collection is refered to as a numerical string ("1" for instance). The first item is "0", the second "1", etc.
+
+ Example:
+ (start code)
+ var myElementsEffects = new Fx.Elements($$('a'));
+ myElementsEffects.start({
+ '0': { //let's change the first element's opacity and width
+ 'opacity': [0,1],
+ 'width': [100,200]
+ },
+ '4': { //and the fifth one's opacity
+ 'opacity': [0.2, 0.5]
+ }
+ });
+ (end)
+ */
+
+ start: function(obj){
+ if (this.timer && this.options.wait) return this;
+ this.now = {};
+ this.css = {};
+ var from = {}, to = {};
+ for (var i in obj){
+ var iProps = obj[i], iFrom = from[i] = {}, iTo = to[i] = {}, iCss = this.css[i] = {};
+ for (var p in iProps){
+ var parsed = Fx.CSS.parse(this.elements[i], p, iProps[p]);
+ iFrom[p] = parsed.from;
+ iTo[p] = parsed.to;
+ iCss[p] = parsed.css;
+ }
+ }
+ return this.parent(from, to);
+ },
+
+ increase: function(){
+ for (var i in this.now){
+ var iNow = this.now[i], iCss = this.css[i];
+ for (var p in iNow) this.elements[i].setStyle(p, iCss[p].getValue(iNow[p], this.options.unit, p));
+ }
+ }
+
+});
126 Effects/Fx.Scroll.js
@@ -0,0 +1,126 @@
+/*
+Script: Fx.Scroll.js
+ Contains <Fx.Scroll>
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Fx.Scroll
+ Scroll any element with an overflow, including the window element.
+
+Note:
+ Fx.Scroll requires an XHTML doctype.
+
+Arguments:
+ element - the element to scroll
+ options - optional, see Options below.
+
+Options:
+ all the Fx.Base options, plus:
+ offset - the distance for the scrollTo point/element. an Object with x/y properties.
+ overflown - an array of nested scrolling containers, see <Element.getPosition>
+*/
+
+Fx.Scroll = Fx.Base.extend({
+
+ options: {
+ overflown: [],
+ offset: {'x': 0, 'y': 0}
+ },
+
+ initialize: function(element, options){
+ this.now = [];
+ this.element = $(element);
+ this.bound = {'stop': this.stop.bind(this, false)};
+ this.addEvent('onStart', function(){
+ document.addEvent('mousewheel', this.bound.stop);
+ }.bind(this));
+ this.removeEvent('onComplete', function(){
+ document.removeEvent('mousewheel', this.bound.stop);
+ }.bind(this));
+ this.parent(options);
+ },
+
+ setNow: function(){
+ for (var i = 0; i < 2; i++) this.now[i] = this.compute(this.from[i], this.to[i]);
+ },
+
+ /*
+ Property: scrollTo
+ Scrolls the chosen element to the x/y coordinates.
+
+ Arguments:
+ x - the x coordinate to scroll the element to
+ y - the y coordinate to scroll the element to
+ */
+
+ scrollTo: function(x, y){
+ if (this.timer && this.options.wait) return this;
+ var el = this.element.getSize();
+ var values = {'x': x, 'y': y};
+ for (var z in el.size){
+ var max = el.scrollSize[z] - el.size[z];
+ if ($chk(values[z])) values[z] = ($type(values[z]) == 'number') ? values[z].limit(0, max) : max;
+ else values[z] = el.scroll[z];
+ values[z] += this.options.offset[z];
+ }
+ return this.start([el.scroll.x, el.scroll.y], [values.x, values.y]);
+ },
+
+ /*
+ Property: toTop
+ Scrolls the chosen element to its maximum top.
+ */
+
+ toTop: function(){
+ return this.scrollTo(false, 0);
+ },
+
+ /*
+ Property: toBottom
+ Scrolls the chosen element to its maximum bottom.
+ */
+
+ toBottom: function(){
+ return this.scrollTo(false, 'full');
+ },
+
+ /*
+ Property: toLeft
+ Scrolls the chosen element to its maximum left.
+ */
+
+ toLeft: function(){
+ return this.scrollTo(0, false);
+ },
+
+ /*
+ Property: toRight
+ Scrolls the chosen element to its maximum right.
+ */
+
+ toRight: function(){
+ return this.scrollTo('full', false);
+ },
+
+ /*
+ Property: toElement
+ Scrolls the specified element to the position the passed in element is found.
+
+ Arguments:
+ el - the $(element) to scroll the window to
+ */
+
+ toElement: function(el){
+ var parent = this.element.getPosition(this.options.overflown);
+ var target = $(el).getPosition(this.options.overflown);
+ return this.scrollTo(target.x - parent.x, target.y - parent.y);
+ },
+
+ increase: function(){
+ this.element.scrollTo(this.now[0], this.now[1]);
+ }
+
+});
132 Effects/Fx.Slide.js
@@ -0,0 +1,132 @@
+/*
+Script: Fx.Slide.js
+ Contains <Fx.Slide>
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Fx.Slide
+ The slide effect; slides an element in horizontally or vertically, the contents will fold inside. Extends <Fx.Base>, inherits all its properties.
+
+Note:
+ Fx.Slide requires an XHTML doctype.
+
+Options:
+ mode - set it to vertical or horizontal. Defaults to vertical.
+ options - all the <Fx.Base> options
+
+Example:
+ (start code)
+ var mySlider = new Fx.Slide('myElement', {duration: 500});
+ mySlider.toggle() //toggle the slider up and down.
+ (end)
+*/
+
+Fx.Slide = Fx.Base.extend({
+
+ options: {
+ mode: 'vertical'
+ },
+
+ initialize: function(el, options){
+ this.element = $(el);
+ this.wrapper = new Element('div', {'styles': $extend(this.element.getStyles('margin'), {'overflow': 'hidden'})}).injectAfter(this.element).adopt(this.element);
+ this.element.setStyle('margin', 0);
+ this.setOptions(options);
+ this.now = [];
+ this.parent(this.options);
+ if (window.webkit419) this.addEvent('onComplete', function(){
+ this.element.remove().inject(this.wrapper);
+ });
+ },
+
+ setNow: function(){
+ for (var i = 0; i < 2; i++) this.now[i] = this.compute(this.from[i], this.to[i]);
+ },
+
+ vertical: function(){
+ this.margin = 'margin-top';
+ this.layout = 'height';
+ this.offset = this.element.offsetHeight;
+ },
+
+ horizontal: function(){
+ this.margin = 'margin-left';
+ this.layout = 'width';
+ this.offset = this.element.offsetWidth;
+ },
+
+ /*
+ Property: slideIn
+ Slides the elements in view horizontally or vertically.
+
+ Arguments:
+ mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
+ */
+
+ slideIn: function(mode){
+ this[mode || this.options.mode]();
+ return this.start([this.element.getStyle(this.margin).toInt(), this.wrapper.getStyle(this.layout).toInt()], [0, this.offset]);
+ },
+
+ /*
+ Property: slideOut
+ Sides the elements out of view horizontally or vertically.
+
+ Arguments:
+ mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
+ */
+
+ slideOut: function(mode){
+ this[mode || this.options.mode]();
+ return this.start([this.element.getStyle(this.margin).toInt(), this.wrapper.getStyle(this.layout).toInt()], [-this.offset, 0]);
+ },
+
+ /*
+ Property: hide
+ Hides the element without a transition.
+
+ Arguments:
+ mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
+ */
+
+ hide: function(mode){
+ this[mode || this.options.mode]();
+ return this.set([-this.offset, 0]);
+ },
+
+ /*
+ Property: show
+ Shows the element without a transition.
+
+ Arguments:
+ mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
+ */
+
+ show: function(mode){
+ this[mode || this.options.mode]();
+ return this.set([0, this.offset]);
+ },
+
+ /*
+ Property: toggle
+ Slides in or Out the element, depending on its state
+
+ Arguments:
+ mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
+
+ */
+
+ toggle: function(mode){
+ if (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0) return this.slideIn(mode);
+ return this.slideOut(mode);
+ },
+
+ increase: function(){
+ this.element.setStyle(this.margin, this.now[0] + this.options.unit);
+ this.wrapper.setStyle(this.layout, this.now[1] + this.options.unit);
+ }
+
+});
118 Effects/Fx.Style.js
@@ -0,0 +1,118 @@
+/*
+Script: Fx.Style.js
+ Contains <Fx.Style>
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Fx.Style
+ The Style effect; Extends <Fx.Base>, inherits all its properties. Used to transition any css property from one value to another. Includes colors.
+ Colors must be in hex format.
+
+Arguments:
+ el - the $(element) to apply the style transition to
+ property - the property to transition
+ options - the Fx.Base options (see: <Fx.Base>)
+
+Example:
+ >var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
+ >marginChange.start(10, 100);
+*/
+
+Fx.Style = Fx.Base.extend({
+
+ initialize: function(el, property, options){
+ this.element = $(el);
+ this.property = property;
+ this.parent(options);
+ },
+
+ /*
+ Property: hide
+ Same as <Fx.Base.set> (0); hides the element immediately without transition.
+ */
+
+ hide: function(){
+ return this.set(0);
+ },
+
+ setNow: function(){
+ this.now = this.css.getNow(this.from, this.to, this);
+ },
+
+ /*
+ Property: set
+ Sets the element's css property (specified at instantiation) to the specified value immediately.
+
+ Example:
+ (start code)
+ var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
+ marginChange.set(10); //margin-top is set to 10px immediately
+ (end)
+ */
+
+ set: function(to){
+ this.css = Fx.CSS.select(this.property, to);
+ return this.parent(this.css.parse(to));
+ },
+
+ /*
+ Property: start
+ Displays the transition to the value/values passed in
+
+ Arguments:
+ from - (integer; optional) the starting position for the transition
+ to - (integer) the ending position for the transition
+
+ Note:
+ If you provide only one argument, the transition will use the current css value for its starting value.
+
+ Example:
+ (start code)
+ var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
+ marginChange.start(10); //tries to read current margin top value and goes from current to 10
+ (end)
+ */
+
+ start: function(from, to){
+ if (this.timer && this.options.wait) return this;
+ var parsed = Fx.CSS.parse(this.element, this.property, [from, to]);
+ this.css = parsed.css;
+ return this.parent(parsed.from, parsed.to);
+ },
+
+ increase: function(){
+ this.element.setStyle(this.property, this.css.getValue(this.now, this.options.unit, this.property));
+ }
+
+});
+
+/*
+Class: Element
+ Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
+*/
+
+Element.extend({
+
+ /*
+ Property: effect
+ Applies an <Fx.Style> to the Element; This a shortcut for <Fx.Style>.
+
+ Arguments:
+ property - (string) the css property to alter
+ options - (object; optional) key/value set of options (see <Fx.Style>)
+
+ Example:
+ >var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear});
+ >myEffect.start(10, 100);
+ >//OR
+ >$('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear}).start(10,100);
+ */
+
+ effect: function(property, options){
+ return new Fx.Style(this, property, options);
+ }
+
+});
108 Effects/Fx.Styles.js
@@ -0,0 +1,108 @@
+/*
+Script: Fx.Styles.js
+ Contains <Fx.Styles>
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Fx.Styles
+ Allows you to animate multiple css properties at once; Extends <Fx.Base>, inherits all its properties. Includes colors.
+ Colors must be in hex format.
+
+Arguments:
+ el - the $(element) to apply the styles transition to
+ options - the fx options (see: <Fx.Base>)
+
+Example:
+ (start code)
+ var myEffects = new Fx.Styles('myElement', {duration: 1000, transition: Fx.Transitions.linear});
+
+ //height from 10 to 100 and width from 900 to 300
+ myEffects.start({
+ 'height': [10, 100],
+ 'width': [900, 300]
+ });
+
+ //or height from current height to 100 and width from current width to 300
+ myEffects.start({
+ 'height': 100,
+ 'width': 300
+ });
+ (end)
+*/
+
+Fx.Styles = Fx.Base.extend({
+
+ initialize: function(el, options){
+ this.element = $(el);
+ this.parent(options);
+ },
+
+ setNow: function(){
+ for (var p in this.from) this.now[p] = this.css[p].getNow(this.from[p], this.to[p], this);
+ },
+
+ set: function(to){
+ var parsed = {};
+ this.css = {};
+ for (var p in to){
+ this.css[p] = Fx.CSS.select(p, to[p]);
+ parsed[p] = this.css[p].parse(to[p]);
+ }
+ return this.parent(parsed);
+ },
+
+ /*
+ Property: start
+ Executes a transition for any number of css properties in tandem.
+
+ Arguments:
+ obj - an object containing keys that specify css properties to alter and values that specify either the from/to values (as an array) or just the end value (an integer).
+
+ Example:
+ see <Fx.Styles>
+ */
+
+ start: function(obj){
+ if (this.timer && this.options.wait) return this;
+ this.now = {};
+ this.css = {};
+ var from = {}, to = {};
+ for (var p in obj){
+ var parsed = Fx.CSS.parse(this.element, p, obj[p]);
+ from[p] = parsed.from;
+ to[p] = parsed.to;
+ this.css[p] = parsed.css;
+ }
+ return this.parent(from, to);
+ },
+
+ increase: function(){
+ for (var p in this.now) this.element.setStyle(p, this.css[p].getValue(this.now[p], this.options.unit, p));
+ }
+
+});
+
+/*
+Class: Element
+ Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
+*/
+
+Element.extend({
+
+ /*
+ Property: effects
+ Applies an <Fx.Styles> to the Element; This a shortcut for <Fx.Styles>.
+
+ Example:
+ >var myEffects = $(myElement).effects({duration: 1000, transition: Fx.Transitions.Sine.easeInOut});
+ >myEffects.start({'height': [10, 100], 'width': [900, 300]});
+ */
+
+ effects: function(options){
+ return new Fx.Styles(this, options);
+ }
+
+});
215 Effects/Fx.Transitions.js
@@ -0,0 +1,215 @@
+/*
+Script: Fx.Transitions.js
+ Effects transitions, to be used with all the effects.
+
+License:
+ MIT-style license.
+
+Credits:
+ Easing Equations by Robert Penner, <http://www.robertpenner.com/easing/>, modified & optimized to be used with mootools.
+*/
+
+/*
+Class: Fx.Transitions
+ A collection of tweening transitions for use with the <Fx.Base> classes.
+
+Example:
+ >//Elastic.easeOut with default values:
+ >new Fx.Style('margin', {transition: Fx.Transitions.Elastic.easeOut});
+ >//Elastic.easeOut with user-defined value for elasticity.
+ > var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);
+ >new Fx.Style('margin', {transition: myTransition.easeOut});
+
+See also:
+ http://www.robertpenner.com/easing/
+*/
+
+Fx.Transition = function(transition, params){
+ params = params || [];
+ if ($type(params) != 'array') params = [params];
+ return $extend(transition, {
+ easeIn: function(pos){
+ return transition(pos, params);
+ },
+ easeOut: function(pos){
+ return 1 - transition(1 - pos, params);
+ },
+ easeInOut: function(pos){
+ return (pos <= 0.5) ? transition(2 * pos, params) / 2 : (2 - transition(2 * (1 - pos), params)) / 2;
+ }
+ });
+};
+
+Fx.Transitions = new Abstract({
+
+ /*
+ Property: linear
+ displays a linear transition.
+
+ Graph:
+ (see Linear.png)
+ */
+
+ linear: function(p){
+ return p;
+ }
+
+});
+
+Fx.Transitions.extend = function(transitions){
+ for (var transition in transitions){
+ Fx.Transitions[transition] = new Fx.Transition(transitions[transition]);
+ Fx.Transitions.compat(transition);
+ };
+};
+
+Fx.Transitions.compat = function(transition){
+ ['In', 'Out', 'InOut'].each(function(easeType){
+ Fx.Transitions[transition.toLowerCase() + easeType] = Fx.Transitions[transition]['ease' + easeType];
+ });
+};
+
+Fx.Transitions.extend({
+
+ /*
+ Property: Quad
+ displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut
+
+ Graph:
+ (see Quad.png)
+ */
+
+ //auto generated
+
+ /*
+ Property: Cubic
+ displays a cubicular transition. Must be used as Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut
+
+ Graph:
+ (see Cubic.png)
+ */
+
+ //auto generated
+
+ /*
+ Property: Quart
+ displays a quartetic transition. Must be used as Quart.easeIn or Quart.easeOut or Quart.easeInOut
+
+ Graph:
+ (see Quart.png)
+ */
+
+ //auto generated
+
+ /*
+ Property: Quint
+ displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut
+
+ Graph:
+ (see Quint.png)
+ */
+
+ //auto generated
+
+ /*
+ Property: Pow
+ Used to generate Quad, Cubic, Quart and Quint.
+ By default is p^6.
+
+ Graph:
+ (see Pow.png)
+ */
+
+ Pow: function(p, x){
+ return Math.pow(p, x[0] || 6);
+ },
+
+ /*
+ Property: Expo
+ displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut
+
+ Graph:
+ (see Expo.png)
+ */
+
+ Expo: function(p){
+ return Math.pow(2, 8 * (p - 1));
+ },
+
+ /*
+ Property: Circ
+ displays a circular transition. Must be used as Circ.easeIn or Circ.easeOut or Circ.easeInOut
+
+ Graph:
+ (see Circ.png)
+ */
+
+ Circ: function(p){
+ return 1 - Math.sin(Math.acos(p));
+ },
+
+
+ /*
+ Property: Sine
+ displays a sineousidal transition. Must be used as Sine.easeIn or Sine.easeOut or Sine.easeInOut
+
+ Graph:
+ (see Sine.png)
+ */
+
+ Sine: function(p){
+ return 1 - Math.sin((1 - p) * Math.PI / 2);
+ },
+
+ /*
+ Property: Back
+ makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut
+
+ Graph:
+ (see Back.png)
+ */
+
+ Back: function(p, x){
+ x = x[0] || 1.618;
+ return Math.pow(p, 2) * ((x + 1) * p - x);
+ },
+
+ /*
+ Property: Bounce
+ makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut
+
+ Graph:
+ (see Bounce.png)
+ */
+
+ Bounce: function(p){
+ var value;
+ for (var a = 0, b = 1; 1; a += b, b /= 2){
+ if (p >= (7 - 4 * a) / 11){
+ value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
+ break;
+ }
+ }
+ return value;
+ },
+
+ /*
+ Property: Elastic
+ Elastic curve. Must be used as Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut
+
+ Graph:
+ (see Elastic.png)
+ */
+
+ Elastic: function(p, x){
+ return Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
+ }
+
+});
+
+['Quad', 'Cubic', 'Quart', 'Quint'].each(function(transition, i){
+ Fx.Transitions[transition] = new Fx.Transition(function(p){
+ return Math.pow(p, [i + 2]);
+ });
+ Fx.Transitions.compat(transition);
+});
99 Effects/Fx.Utils.js
@@ -0,0 +1,99 @@
+/*
+Script: Fx.Utils.js
+ Contains Fx.Height, Fx.Width, Fx.Opacity. Only useful if you really, really need to toggle those values, and toggling only works in STRICT DOCTYPE.
+ See <Fx.Style> for a better alternative.
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Fx.Height
+ Alters the height of an element. Extends <Fx.Style> (and consequentially <Fx.Base>), and inherits all its methods.
+
+Arguments:
+ el - the $(element) to apply the style transition to
+ options - the Fx.Base options (see: <Fx.Base>)
+
+Example:
+ >var myEffect = new Fx.Height('myElementId', {duration: 500});
+ >myEffect.toggle(); //will close the element if open, and vice-versa.
+*/
+
+Fx.Height = Fx.Style.extend({
+
+ initialize: function(el, options){
+ $(el).setStyle('overflow', 'hidden');
+ this.parent(el, 'height', options);
+ },
+
+ /*
+ Property: toggle
+ Toggles the height of an element from zero to it's scrollHeight, and vice-versa.
+ */
+
+ toggle: function(){
+ var style = this.element.getStyle('height').toInt();
+ if (style > 0) return this.start(style, 0);
+ else return this.start(0, this.element.scrollHeight);
+ },
+
+ /*
+ Property: show
+ Size the element to its full scrollHeight immediatly, without applying a transition.
+ */
+
+ show: function(){
+ return this.set(this.element.scrollHeight);
+ }
+
+});
+
+/*
+Class: Fx.Width
+ Same as Fx.Height, but uses Width. It always toggles from its initial width to zero, and vice versa.
+*/
+
+Fx.Width = Fx.Style.extend({
+
+ initialize: function(el, options){
+ this.element = $(el);
+ this.element.setStyle('overflow', 'hidden');
+ this.iniWidth = this.element.getStyle('width').toInt();
+ this.parent(this.element, 'width', options);
+ },
+
+ toggle: function(){
+ var style = this.element.getStyle('width').toInt();
+ if (style > 0) return this.start(style, 0);
+ else return this.start(0, this.iniWidth);
+ },
+
+ show: function(){
+ return this.set(this.iniWidth);
+ }
+
+});
+
+/*
+Class: Fx.Opacity
+ Same as Fx.Height, but uses Opacity. It always toggles from opaque to transparent, and vice versa.
+*/
+
+Fx.Opacity = Fx.Style.extend({
+
+ initialize: function(el, options){
+ this.now = 1;
+ this.parent(el, 'opacity', options);
+ },
+
+ toggle: function(){
+ if (this.now > 0) return this.start(1, 0);
+ else return this.start(0, 1);
+ },
+
+ show: function(){
+ return this.set(1);
+ }
+
+});
154 Element/Element.Dimensions.js
@@ -0,0 +1,154 @@
+/*
+Script: Element.Dimensions.js
+ Contains Element prototypes to deal with Element size and position in space.
+
+Note:
+ The functions in this script require n XHTML doctype.
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Element
+ Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
+*/
+
+Element.extend({
+
+ /*
+ Property: scrollTo
+ Scrolls the element to the specified coordinated (if the element has an overflow)
+
+ Arguments:
+ x - the x coordinate
+ y - the y coordinate
+
+ Example:
+ >$('myElement').scrollTo(0, 100)
+ */
+
+ scrollTo: function(x, y){
+ this.scrollLeft = x;
+ this.scrollTop = y;
+ },
+
+ /*
+ Property: getSize
+ Return an Object representing the size/scroll values of the element.
+
+ Example:
+ (start code)
+ $('myElement').getSize();
+ (end)
+
+ Returns:
+ (start code)
+ {
+ 'scroll': {'x': 100, 'y': 100},
+ 'size': {'x': 200, 'y': 400},
+ 'scrollSize': {'x': 300, 'y': 500}
+ }
+ (end)
+ */
+
+ getSize: function(){
+ return {
+ 'scroll': {'x': this.scrollLeft, 'y': this.scrollTop},
+ 'size': {'x': this.offsetWidth, 'y': this.offsetHeight},
+ 'scrollSize': {'x': this.scrollWidth, 'y': this.scrollHeight}
+ };
+ },
+
+ /*
+ Property: getPosition
+ Returns the real offsets of the element.
+
+ Arguments:
+ overflown - optional, an array of nested scrolling containers for scroll offset calculation, use this if your element is inside any element containing scrollbars
+
+ Example:
+ >$('element').getPosition();
+
+ Returns:
+ >{x: 100, y:500};
+ */
+
+ getPosition: function(overflown){
+ overflown = overflown || [];
+ var el = this, left = 0, top = 0;
+ do {
+ left += el.offsetLeft || 0;
+ top += el.offsetTop || 0;
+ el = el.offsetParent;
+ } while (el);
+ overflown.each(function(element){
+ left -= element.scrollLeft || 0;
+ top -= element.scrollTop || 0;
+ });
+ return {'x': left, 'y': top};
+ },
+
+ /*
+ Property: getTop
+ Returns the distance from the top of the window to the Element.
+
+ Arguments:
+ overflown - optional, an array of nested scrolling containers, see Element::getPosition
+ */
+
+ getTop: function(overflown){
+ return this.getPosition(overflown).y;
+ },
+
+ /*
+ Property: getLeft
+ Returns the distance from the left of the window to the Element.
+
+ Arguments:
+ overflown - optional, an array of nested scrolling containers, see Element::getPosition
+ */
+
+ getLeft: function(overflown){
+ return this.getPosition(overflown).x;
+ },
+
+ /*
+ Property: getCoordinates
+ Returns an object with width, height, left, right, top, and bottom, representing the values of the Element
+
+ Arguments:
+ overflown - optional, an array of nested scrolling containers, see Element::getPosition
+
+ Example:
+ (start code)
+ var myValues = $('myElement').getCoordinates();
+ (end)
+
+ Returns:
+ (start code)
+ {
+ width: 200,
+ height: 300,
+ left: 100,
+ top: 50,
+ right: 300,
+ bottom: 350
+ }
+ (end)
+ */
+
+ getCoordinates: function(overflown){
+ var position = this.getPosition(overflown);
+ var obj = {
+ 'width': this.offsetWidth,
+ 'height': this.offsetHeight,
+ 'left': position.x,
+ 'top': position.y
+ };
+ obj.right = obj.left + obj.width;
+ obj.bottom = obj.top + obj.height;
+ return obj;
+ }
+
+});
372 Element/Element.Event.js
@@ -0,0 +1,372 @@
+/*
+Script: Element.Event.js
+ Contains the Event Class, Element methods to deal with Element events, custom Events, and the Function prototype bindWithEvent.
+
+License:
+ MIT-style license.
+*/
+
+/*
+Class: Event
+ Cross browser methods to manage events.
+
+Arguments:
+ event - the event
+
+Properties:
+ shift - true if the user pressed the shift
+ control - true if the user pressed the control
+ alt - true if the user pressed the alt
+ meta - true if the user pressed the meta key
+ wheel - the amount of third button scrolling
+ code - the keycode of the key pressed
+ page.x - the x position of the mouse, relative to the full window
+ page.y - the y position of the mouse, relative to the full window
+ client.x - the x position of the mouse, relative to the viewport
+ client.y - the y position of the mouse, relative to the viewport
+ key - the key pressed as a lowercase string. key also returns 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', 'esc'. Handy for these special keys.
+ target - the event target
+ relatedTarget - the event related target
+
+Example:
+ (start code)
+ $('myLink').onkeydown = function(event){
+ var event = new Event(event);
+ //event is now the Event class.
+ alert(event.key); //returns the lowercase letter pressed
+ alert(event.shift); //returns true if the key pressed is shift
+ if (event.key == 's' && event.control) alert('document saved');
+ };
+ (end)
+*/
+
+var Event = new Class({
+
+ initialize: function(event){
+ if (event && event.$extended) return event;
+ this.$extended = true;
+ event = event || window.event;
+ this.event = event;
+ this.type = event.type;
+ this.target = event.target || event.srcElement;
+ if (this.target.nodeType == 3) this.target = this.target.parentNode;
+ this.shift = event.shiftKey;
+ this.control = event.ctrlKey;
+ this.alt = event.altKey;
+ this.meta = event.metaKey;
+ if ([