prototype.js 1.4 原代码阅读

野性酷女 2022-09-17 15:20 25阅读 0赞

/\*\*  
\* 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号  
\*/  
var Prototype = \{  
Version: '1.5.0\_rc0',  
ScriptFragment: '(?:<script.\*?>)((/n|/r|.)\*?)(?:<//script>)',

emptyFunction: function() \{\},  
K: function(x) \{return x\}  
\}

/\*\*  
\* 创建一种类型，注意其属性 create 是一个方法，返回一个构造函数。  
\* 一般使用如下  
\* var X = Class.create(); 返回一个类型，类似于 java 的一个Class实例。  
\* 要使用 X 类型，需继续用 new X()来获取一个实例，如同 java 的 Class.newInstance()方法。  
\*  
\* 返回的构造函数会执行名为 initialize 的方法， initialize 是 Ruby 对象的构造器方法名字。  
\* 此时initialize方法还没有定义，其后的代码中创建新类型时会建立相应的同名方法。  
\*  
\* 如果一定要从java上去理解。你可以理解为用Class.create()创建一个继承java.lang.Class类的类。当然java不允许这样做，因为Class类是final的  
\*  
\*/  
var Class = \{  
create: function() \{  
return function() \{  
this.initialize.apply(this, arguments);  
\}  
\}  
\}

/\*\*  
\* 创建一个对象，从变量名来思考，本意也许是定义一个抽象类，以后创建新对象都 extend 它。  
\* 但从其后代码的应用来看， Abstract 更多是为了保持命名空间清晰的考虑。  
\* 也就是说，我们可以给 Abstract 这个对象实例添加新的对象定义。  
\*  
\* 从java去理解，就是动态给一个对象创建内部类。  
\*/  
var Abstract = new Object();

/\*\*  
\* 获取参数对象的所有属性和方法，有点象多重继承。但是这种继承是动态获得的。  
\* 如：  
\* var a = new ObjectA(), b = new ObjectB();  
\* var c = a.extend(b);  
\* 此时 c 对象同时拥有 a 和 b 对象的属性和方法。但是与多重继承不同的是，c instanceof ObjectB 将返回false。  
\*/  
Object.extend = function(destination, source) \{  
for (var property in source) \{  
destination\[property\] = source\[property\];  
\}  
return destination;  
\}

Object.inspect = function(object) \{  
try \{  
if (object == undefined) return 'undefined';  
if (object == null) return 'null';  
return object.inspect ? object.inspect() : object.toString();  
\} catch (e) \{  
if (e instanceof RangeError) return '...';  
throw e;  
\}  
\}

/\*\*  
\* 这个方法很有趣，它封装一个javascript函数对象，返回一个新函数对象，新函数对象的主体和原对象相同，但是bind()方法参数将被用作当前对象的对象。  
\* 也就是说新函数中的 this 引用被改变为参数提供的对象。  
\* 比如：  
\* <input type="text" id="aaa" value="aaa">  
\* <input type="text" id="bbb" value="bbb">  
\* .................  
\* <script>  
\* var aaa = document.getElementById("aaa");  
\* var bbb = document.getElementById("bbb");  
\* aaa.showValue = function() \{alert(this.value);\}  
\* aaa.showValue2 = aaa.showValue.bind(bbb);  
\* </script>  
\* 那么，调用aaa.showValue 将返回"aaa", 但调用aaa.showValue2 将返回"bbb"。  
\*  
\* apply 是ie5.5后才出现的新方法(Netscape好像很早就支持了)。  
\* 该方法更多的资料参考MSDN [http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp][http_msdn.microsoft.com_library_en-us_script56_html_js56jsmthApply.asp]  
\* 还有一个 call 方法，应用起来和 apply 类似。可以一起研究下。  
\*/  
Function.prototype.bind = function() \{  
var \_\_method = this, args = $A(arguments), object = args.shift();  
return function() \{  
return \_\_method.apply(object, args.concat($A(arguments)));  
\}  
\}

/\*\*  
\* 和bind一样，不过这个方法一般用做html控件对象的事件处理。所以要传递event对象  
\* 注意这时候，用到了 Function.call。它与 Function.apply 的不同好像仅仅是对参数形式的定义。  
\* 如同 java 两个过载的方法。  
\*/  
Function.prototype.bindAsEventListener = function(object) \{  
var \_\_method = this;  
return function(event) \{  
return \_\_method.call(object, event || window.event);  
\}  
\}

/\*\*  
\* 将整数形式RGB颜色值转换为HEX形式  
\*/  
Object.extend(Number.prototype, \{  
toColorPart: function() \{  
var digits = this.toString(16);  
if (this < 16) return '0' + digits;  
return digits;  
\},

succ: function() \{  
return this + 1;  
\},

times: function(iterator) \{  
$R(0, this, true).each(iterator);  
return this;  
\}  
\});

/\*\*  
\* 典型 Ruby 风格的函数，将参数中的方法逐个调用，返回第一个成功执行的方法的返回值  
\*/  
var Try = \{  
these: function() \{  
var returnValue;

for (var i = 0; i < arguments.length; i++) \{  
var lambda = arguments\[i\];  
try \{  
returnValue = lambda();  
break;  
\} catch (e) \{\}  
\}

return returnValue;  
\}  
\}

/\*--------------------------------------------------------------------------\*/

/\*\*  
\* 一个设计精巧的定时执行器  
\* 首先由 Class.create() 创建一个 PeriodicalExecuter 类型，  
\* 然后用对象直接量的语法形式设置原型。  
\*  
\* 需要特别说明的是 rgisterCallback 方法，它调用上面定义的函数原型方法bind, 并传递自己为参数。  
\* 之所以这样做，是因为 setTimeout 默认总以 window 对象为当前对象，也就是说，如果 registerCallback 方法定义如下的话：  
\* registerCallback: function() \{  
\* setTimeout(this.onTimerEvent, this.frequency \* 1000);  
\* \}  
\* 那么，this.onTimeoutEvent 方法执行失败，因为它无法访问 this.currentlyExecuting 属性。  
\* 而使用了bind以后，该方法才能正确的找到this，也就是PeriodicalExecuter的当前实例。  
\*/  
var PeriodicalExecuter = Class.create();  
PeriodicalExecuter.prototype = \{  
initialize: function(callback, frequency) \{  
this.callback = callback;  
this.frequency = frequency;  
this.currentlyExecuting = false;

this.registerCallback();  
\},

registerCallback: function() \{  
setInterval(this.onTimerEvent.bind(this), this.frequency \* 1000);  
\},

onTimerEvent: function() \{  
if (!this.currentlyExecuting) \{  
try \{  
this.currentlyExecuting = true;  
this.callback();  
\} finally \{  
this.currentlyExecuting = false;  
\}  
\}  
\}  
\}  
Object.extend(String.prototype, \{  
gsub: function(pattern, replacement) \{  
var result = '', source = this, match;  
replacement = arguments.callee.prepareReplacement(replacement);

while (source.length > 0) \{  
if (match = source.match(pattern)) \{  
result += source.slice(0, match.index);  
result += (replacement(match) || '').toString();  
source = source.slice(match.index + match\[0\].length);  
\} else \{  
result += source, source = '';  
\}  
\}  
return result;  
\},

sub: function(pattern, replacement, count) \{  
replacement = this.gsub.prepareReplacement(replacement);  
count = count === undefined ? 1 : count;

return this.gsub(pattern, function(match) \{  
if (--count < 0) return match\[0\];  
return replacement(match);  
\});  
\},

scan: function(pattern, iterator) \{  
this.gsub(pattern, iterator);  
return this;  
\},

truncate: function(length, truncation) \{  
length = length || 30;  
truncation = truncation === undefined ? '...' : truncation;  
return this.length > length ?  
this.slice(0, length - truncation.length) + truncation : this;  
\},

strip: function() \{  
return this.replace(/^/s+/, '').replace(//s+$/, '');  
\},

stripTags: function() \{  
return this.replace(/<//?\[^>\]+>/gi, '');  
\},

stripScripts: function() \{  
return this.replace(new RegExp(Prototype.ScriptFragment, 'img'), '');  
\},

extractScripts: function() \{  
var matchAll = new RegExp(Prototype.ScriptFragment, 'img');  
var matchOne = new RegExp(Prototype.ScriptFragment, 'im');  
return (this.match(matchAll) || \[\]).map(function(scriptTag) \{  
return (scriptTag.match(matchOne) || \['', ''\])\[1\];  
\});  
\},

evalScripts: function() \{  
return this.extractScripts().map(function(script) \{ return eval(script) \});  
\},

escapeHTML: function() \{  
var div = document.createElement('div');  
var text = document.createTextNode(this);  
div.appendChild(text);  
return div.innerHTML;  
\},

unescapeHTML: function() \{  
var div = document.createElement('div');  
div.innerHTML = this.stripTags();  
return div.childNodes\[0\] ? div.childNodes\[0\].nodeValue : '';  
\},

toQueryParams: function() \{  
var pairs = this.match(/^/??(.\*)$/)\[1\].split('&');  
return pairs.inject(\{\}, function(params, pairString) \{  
var pair = pairString.split('=');  
params\[pair\[0\]\] = pair\[1\];  
return params;  
\});  
\},

toArray: function() \{  
return this.split('');  
\},

camelize: function() \{  
var oStringList = this.split('-');  
if (oStringList.length == 1) return oStringList\[0\];

var camelizedString = this.indexOf('-') == 0  
? oStringList\[0\].charAt(0).toUpperCase() + oStringList\[0\].substring(1)  
: oStringList\[0\];

for (var i = 1, len = oStringList.length; i < len; i++) \{  
var s = oStringList\[i\];  
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);  
\}

return camelizedString;  
\},

inspect: function() \{  
return "'" + this.replace(g, '').replace(/'/g, '///'') + "'";  
\}  
\});

String.prototype.gsub.prepareReplacement = function(replacement) \{  
if (typeof replacement == 'function') return replacement;  
var template = new Template(replacement);  
return function(match) \{ return template.evaluate(match) \};  
\}

String.prototype.parseQuery = String.prototype.toQueryParams;

var Template = Class.create();  
Template.Pattern = /(^|.|/r|/n)(\#/\{(.\*?)/\})/;  
Template.prototype = \{  
initialize: function(template, pattern) \{  
this.template = template.toString();  
this.pattern = pattern || Template.Pattern;  
\},

evaluate: function(object) \{  
return this.template.gsub(this.pattern, function(match) \{  
var before = match\[1\];  
if (before == '//') return match\[2\];  
return before + (object\[match\[3\]\] || '').toString();  
\});  
\}  
\}

var $break = new Object();  
var $continue = new Object();

all: function(iterator) \{  
var result = true;  
this.each(function(value, index) \{  
result = result && !!(iterator || Prototype.K)(value, index);  
if (!result) throw $break;  
\});  
return result;  
\},

any: function(iterator) \{  
var result = true;  
this.each(function(value, index) \{  
if (result = !!(iterator || Prototype.K)(value, index))  
throw $break;  
\});  
return result;  
\},

collect: function(iterator) \{  
var results = \[\];  
this.each(function(value, index) \{  
results.push(iterator(value, index));  
\});  
return results;  
\},

detect: function (iterator) \{  
var result;  
this.each(function(value, index) \{  
if (iterator(value, index)) \{  
result = value;  
throw $break;  
\}  
\});  
return result;  
\},

findAll: function(iterator) \{  
var results = \[\];  
this.each(function(value, index) \{  
if (iterator(value, index))  
results.push(value);  
\});  
return results;  
\},

grep: function(pattern, iterator) \{  
var results = \[\];  
this.each(function(value, index) \{  
var stringValue = value.toString();  
if (stringValue.match(pattern))  
results.push((iterator || Prototype.K)(value, index));  
\})  
return results;  
\},

include: function(object) \{  
var found = false;  
this.each(function(value) \{  
if (value == object) \{  
found = true;  
throw $break;  
\}  
\});  
return found;  
\},

inject: function(memo, iterator) \{  
this.each(function(value, index) \{  
memo = iterator(memo, value, index);  
\});  
return memo;  
\},

invoke: function(method) \{  
var args = $A(arguments).slice(1);  
return this.collect(function(value) \{  
return value\[method\].apply(value, args);  
\});  
\},

max: function(iterator) \{  
var result;  
this.each(function(value, index) \{  
value = (iterator || Prototype.K)(value, index);  
if (result == undefined || value >= result)  
result = value;  
\});  
return result;  
\},

min: function(iterator) \{  
var result;  
this.each(function(value, index) \{  
value = (iterator || Prototype.K)(value, index);  
if (result == undefined || value < result)  
result = value;  
\});  
return result;  
\},

partition: function(iterator) \{  
var trues = \[\], falses = \[\];  
this.each(function(value, index) \{  
((iterator || Prototype.K)(value, index) ?  
trues : falses).push(value);  
\});  
return \[trues, falses\];  
\},

pluck: function(property) \{  
var results = \[\];  
this.each(function(value, index) \{  
results.push(value\[property\]);  
\});  
return results;  
\},

reject: function(iterator) \{  
var results = \[\];  
this.each(function(value, index) \{  
if (!iterator(value, index))  
results.push(value);  
\});  
return results;  
\},

sortBy: function(iterator) \{  
return this.collect(function(value, index) \{  
return \{value: value, criteria: iterator(value, index)\};  
\}).sort(function(left, right) \{  
var a = left.criteria, b = right.criteria;  
return a < b ? -1 : a > b ? 1 : 0;  
\}).pluck('value');  
\},

toArray: function() \{  
return this.collect(Prototype.K);  
\},

zip: function() \{  
var iterator = Prototype.K, args = $A(arguments);  
if (typeof args.last() == 'function')  
iterator = args.pop();

var collections = \[this\].concat(args).map($A);  
return this.map(function(value, index) \{  
return iterator(collections.pluck(index));  
\});  
\},

inspect: function() \{  
return '\#<Enumerable:' + this.toArray().inspect() + '>';  
\}  
\}

Object.extend(Enumerable, \{  
map: Enumerable.collect,  
find: Enumerable.detect,  
select: Enumerable.findAll,  
member: Enumerable.include,  
entries: Enumerable.toArray  
\});  
var $A = Array.from = function(iterable) \{  
if (!iterable) return \[\];  
if (iterable.toArray) \{  
return iterable.toArray();  
\} else \{  
var results = \[\];  
for (var i = 0; i < iterable.length; i++)  
results.push(iterable\[i\]);  
return results;  
\}  
\}

Object.extend(Array.prototype, Enumerable);

if (!Array.prototype.\_reverse)  
Array.prototype.\_reverse = Array.prototype.reverse;

Object.extend(Array.prototype, \{  
\_each: function(iterator) \{  
for (var i = 0; i < this.length; i++)  
iterator(this\[i\]);  
\},

clear: function() \{  
this.length = 0;  
return this;  
\},

first: function() \{  
return this\[0\];  
\},

last: function() \{  
return this\[this.length - 1\];  
\},

compact: function() \{  
return this.select(function(value) \{  
return value != undefined || value != null;  
\});  
\},

flatten: function() \{  
return this.inject(\[\], function(array, value) \{  
return array.concat(value && value.constructor == Array ?  
value.flatten() : \[value\]);  
\});  
\},

without: function() \{  
var values = $A(arguments);  
return this.select(function(value) \{  
return !values.include(value);  
\});  
\},

indexOf: function(object) \{  
for (var i = 0; i < this.length; i++)  
if (this\[i\] == object) return i;  
return -1;  
\},

reverse: function(inline) \{  
return (inline !== false ? this : this.toArray()).\_reverse();  
\},

inspect: function() \{  
return '\[' + this.map(Object.inspect).join(', ') + '\]';  
\}  
\});  
var Hash = \{  
\_each: function(iterator) \{  
for (var key in this) \{  
var value = this\[key\];  
if (typeof value == 'function') continue;

var pair = \[key, value\];  
pair.key = key;  
pair.value = value;  
iterator(pair);  
\}  
\},

keys: function() \{  
return this.pluck('key');  
\},

values: function() \{  
return this.pluck('value');  
\},

merge: function(hash) \{  
return $H(hash).inject($H(this), function(mergedHash, pair) \{  
mergedHash\[pair.key\] = pair.value;  
return mergedHash;  
\});  
\},

toQueryString: function() \{  
return this.map(function(pair) \{  
return pair.map(encodeURIComponent).join('=');  
\}).join('&');  
\},

inspect: function() \{  
return '\#<Hash:\{' + this.map(function(pair) \{  
return pair.map(Object.inspect).join(': ');  
\}).join(', ') + '\}>';  
\}  
\}

\_each: function(iterator) \{  
var value = this.start;  
do \{  
iterator(value);  
value = value.succ();  
\} while (this.include(value));  
\},

include: function(value) \{  
if (value < this.start)  
return false;  
if (this.exclusive)  
return value < this.end;  
return value <= this.end;  
\}  
\});

var $R = function(start, end, exclusive) \{  
return new ObjectRange(start, end, exclusive);  
\}

/\*\*  
\* 定义 Ajax 对象, 静态方法 getTransport 方法返回一个 XMLHttp 对象  
\*/  
var Ajax = \{  
getTransport: function() \{  
return Try.these(  
function() \{return new XMLHttpRequest()\},  
function() \{return new ActiveXObject('Msxml2.XMLHTTP')\},  
function() \{return new ActiveXObject('Microsoft.XMLHTTP')\}  
) || false;  
\},

activeRequestCount: 0  
\}

Ajax.Responders = \{  
responders: \[\],

\_each: function(iterator) \{  
this.responders.\_each(iterator);  
\},

unregister: function(responderToRemove) \{  
this.responders = this.responders.without(responderToRemove);  
\},

dispatch: function(callback, request, transport, json) \{  
this.each(function(responder) \{  
if (responder\[callback\] && typeof responder\[callback\] == 'function') \{  
try \{  
responder\[callback\].apply(responder, \[request, transport, json\]);  
\} catch (e) \{\}  
\}  
\});  
\}  
\};

Object.extend(Ajax.Responders, Enumerable);

Ajax.Responders.register(\{  
onCreate: function() \{  
Ajax.activeRequestCount++;  
\},

onComplete: function() \{  
Ajax.activeRequestCount--;  
\}  
\});

/\*\*  
\* 我以为此时的Ajax对象起到命名空间的作用。  
\* Ajax.Base 声明为一个基础对象类型  
\* 注意 Ajax.Base 并没有使用 Class.create() 的方式来创建，我想是因为作者并不希望 Ajax.Base 被库使用者实例化。  
\* 作者在其他对象类型的声明中，将会继承于它。  
\* 就好像 java 中的私有抽象类  
\*/  
Ajax.Base = function() \{\};  
Ajax.Base.prototype = \{  
setOptions: function(options) \{  
this.options = \{  
method: 'post',  
asynchronous: true,  
contentType: 'application/x-www-form-urlencoded',  
parameters: ''  
\}  
Object.extend(this.options, options || \{\});  
\},

responseIsSuccess: function() \{  
return this.transport.status == undefined  
|| this.transport.status == 0  
|| (this.transport.status >= 200 && this.transport.status < 300);  
\},

responseIsFailure: function() \{  
return !this.responseIsSuccess();  
\}  
\}

/\*\*  
\* Ajax.Request 封装 XmlHttp  
\*/  
Ajax.Request = Class.create();

/\*\*  
\* 定义四种事件(状态)， 参考[http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate\_1.asp][http_msdn.microsoft.com_workshop_author_dhtml_reference_properties_readystate_1.asp]  
\*/  
Ajax.Request.Events =  
\['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete'\];

Ajax.Request.prototype = Object.extend(new Ajax.Base(), \{  
initialize: function(url, options) \{  
this.transport = Ajax.getTransport();  
this.setOptions(options);  
this.request(url);  
\},

request: function(url) \{  
var parameters = this.options.parameters || '';  
if (parameters.length > 0) parameters += '&\_=';

try \{  
this.url = url;  
if (this.options.method == 'get' && parameters.length > 0)  
this.url += (this.url.match(//?/) ? '&' : '?') + parameters;

Ajax.Responders.dispatch('onCreate', this, this.transport);

/\*\*  
\* 此处好像强制使用了异步方式，而不是依照 this.options.asynchronous 的值  
\*/  
this.transport.open(this.options.method, this.url,  
this.options.asynchronous);

/\*\*  
\* 这里提供了 XmlHttp 传输过程中每个步骤的回调函数  
\*/  
if (this.options.asynchronous) \{  
this.transport.onreadystatechange = this.onStateChange.bind(this);  
setTimeout((function() \{this.respondToReadyState(1)\}).bind(this), 10);  
\}

this.setRequestHeaders();

var body = this.options.postBody ? this.options.postBody : parameters;  
this.transport.send(this.options.method == 'post' ? body : null);

\} catch (e) \{  
this.dispatchException(e);  
\}  
\},

setRequestHeaders: function() \{  
var requestHeaders =  
\['X-Requested-With', 'XMLHttpRequest',  
'X-Prototype-Version', Prototype.Version,  
'Accept', 'text/javascript, text/html, application/xml, text/xml, \*/\*'\];

if (this.options.method == 'post') \{  
requestHeaders.push('Content-type', this.options.contentType);

if (this.transport.overrideMimeType)  
requestHeaders.push('Connection', 'close');  
\}

if (this.options.requestHeaders)  
requestHeaders.push.apply(requestHeaders, this.options.requestHeaders);

for (var i = 0; i < requestHeaders.length; i += 2)  
this.transport.setRequestHeader(requestHeaders\[i\], requestHeaders\[i+1\]);  
\},

onStateChange: function() \{  
var readyState = this.transport.readyState;  
/\*\*  
\* 如果不是 Loading 状态，就调用回调函数  
\*/  
if (readyState != 1)  
this.respondToReadyState(this.transport.readyState);  
\},

header: function(name) \{  
try \{  
return this.transport.getResponseHeader(name);  
\} catch (e) \{\}  
\},

evalJSON: function() \{  
try \{  
return eval('(' + this.header('X-JSON') + ')');  
\} catch (e) \{\}  
\},

evalResponse: function() \{  
try \{  
return eval(this.transport.responseText);  
\} catch (e) \{  
this.dispatchException(e);  
\}  
\},

/\*\*  
\* 回调函数定义在 this.options 属性中，比如:  
var option = \{  
onLoaded : function(req) \{...\};  
......  
\}  
new Ajax.Request(url, option);  
\*/  
respondToReadyState: function(readyState) \{  
var event = Ajax.Request.Events\[readyState\];  
var transport = this.transport, json = this.evalJSON();

if (event == 'Complete') \{  
try \{  
(this.options\['on' + this.transport.status\]  
|| this.options\['on' + (this.responseIsSuccess() ? 'Success' : 'Failure')\]  
|| Prototype.emptyFunction)(transport, json);  
\} catch (e) \{  
this.dispatchException(e);  
\}

if ((this.header('Content-type') || '').match(/^text//javascript/i))  
this.evalResponse();  
\}

try \{  
(this.options\['on' + event\] || Prototype.emptyFunction)(transport, json);  
Ajax.Responders.dispatch('on' + event, this, transport, json);  
\} catch (e) \{  
this.dispatchException(e);  
\}

if (event == 'Complete')  
this.transport.onreadystatechange = Prototype.emptyFunction;  
\},

dispatchException: function(exception) \{  
(this.options.onException || Prototype.emptyFunction)(this, exception);  
Ajax.Responders.dispatch('onException', this, exception);  
\}  
\});

/\*\*  
\* Ajax.Updater 用于绑定一个html元素与 XmlHttp调用的返回值。类似与 buffalo 的 bind。  
\* 如果 options 中有 insertion(from dom.js) 对象的话, insertion 能提供更多的插入控制。  
\*/  
Ajax.Updater = Class.create();

Object.extend(Object.extend(Ajax.Updater.prototype, Ajax.Request.prototype), \{  
initialize: function(container, url, options) \{  
this.containers = \{  
success: container.success ? $(container.success) : $(container),  
failure: container.failure ? $(container.failure) :  
(container.success ? null : $(container))  
\}

this.transport = Ajax.getTransport();  
this.setOptions(options);

var onComplete = this.options.onComplete || Prototype.emptyFunction;  
this.options.onComplete = (function(transport, object) \{  
this.updateContent();  
onComplete(transport, object);  
\}).bind(this);

this.request(url);  
\},

updateContent: function() \{  
var receiver = this.responseIsSuccess() ?  
this.containers.success : this.containers.failure;  
var response = this.transport.responseText;

if (!this.options.evalScripts)  
response = response.stripScripts();

if (receiver) \{  
if (this.options.insertion) \{  
new this.options.insertion(receiver, response);  
\} else \{  
Element.update(receiver, response);  
\}  
\}

if (this.responseIsSuccess()) \{  
if (this.onComplete)  
setTimeout(this.onComplete.bind(this), 10);  
\}  
\}  
\});

Ajax.PeriodicalUpdater = Class.create();  
Ajax.PeriodicalUpdater.prototype = Object.extend(new Ajax.Base(), \{  
initialize: function(container, url, options) \{  
this.setOptions(options);  
this.onComplete = this.options.onComplete;

this.frequency = (this.options.frequency || 2);  
this.decay = (this.options.decay || 1);

this.updater = \{\};  
this.container = container;  
this.url = url;

this.start();  
\},

start: function() \{  
this.options.onComplete = this.updateComplete.bind(this);  
this.onTimerEvent();  
\},

stop: function() \{  
this.updater.onComplete = undefined;  
clearTimeout(this.timer);  
(this.onComplete || Prototype.emptyFunction).apply(this, arguments);  
\},

updateComplete: function(request) \{  
if (this.options.decay) \{  
this.decay = (request.responseText == this.lastText ?  
this.decay \* this.options.decay : 1);

this.lastText = request.responseText;  
\}  
this.timer = setTimeout(this.onTimerEvent.bind(this),  
this.decay \* this.frequency \* 1000);  
\},

onTimerEvent: function() \{  
this.updater = new Ajax.Updater(this.container, this.url, this.options);  
\}  
\});

/\*\*  
\* 这个函数就 Ruby 了。我觉得它的作用主要有两个  
\* 1. 大概是 document.getElementById(id) 的最简化调用。  
\* 比如：$("aaa") 将返回上 aaa 对象  
\* 2. 得到对象数组  
\* 比如: $("aaa","bbb") 返回一个包括id为"aaa"和"bbb"两个input控件对象的数组。  
\*/  
function $() \{  
var results = \[\], element;  
for (var i = 0; i < arguments.length; i++) \{  
element = arguments\[i\];  
if (typeof element == 'string')  
element = document.getElementById(element);  
results.push(Element.extend(element));  
\}  
return results.length < 2 ? results\[0\] : results;  
\}

document.getElementsByClassName = function(className, parentElement) \{  
var children = ($(parentElement) || document.body).getElementsByTagName('\*');  
return $A(children).inject(\[\], function(elements, child) \{  
if (child.className.match(new RegExp("(^|//s)" + className + "(//s|$)")))  
elements.push(Element.extend(child));  
return elements;  
\});  
\}

/\*--------------------------------------------------------------------------\*/

if (!window.Element)  
var Element = new Object();

Element.extend = function(element) \{  
if (!element) return;  
if (\_nativeExtensions) return element;

if (!element.\_extended && element.tagName && element != window) \{  
var methods = Element.Methods, cache = Element.extend.cache;  
for (property in methods) \{  
var value = methods\[property\];  
if (typeof value == 'function')  
element\[property\] = cache.findOrStore(value);  
\}  
\}

element.\_extended = true;  
return element;  
\}

Element.extend.cache = \{  
findOrStore: function(value) \{  
return this\[value\] = this\[value\] || function() \{  
return value.apply(null, \[this\].concat($A(arguments)));  
\}  
\}  
\}

Element.Methods = \{  
visible: function(element) \{  
return $(element).style.display != 'none';  
\},

toggle: function() \{  
for (var i = 0; i < arguments.length; i++) \{  
var element = $(arguments\[i\]);  
Element\[Element.visible(element) ? 'hide' : 'show'\](element);  
\}  
\},

hide: function() \{  
for (var i = 0; i < arguments.length; i++) \{  
var element = $(arguments\[i\]);  
element.style.display = 'none';  
\}  
\},

show: function() \{  
for (var i = 0; i < arguments.length; i++) \{  
var element = $(arguments\[i\]);  
element.style.display = '';  
\}  
\},

remove: function(element) \{  
element = $(element);  
element.parentNode.removeChild(element);  
\},

update: function(element, html) \{  
$(element).innerHTML = html.stripScripts();  
setTimeout(function() \{html.evalScripts()\}, 10);  
\},

replace: function(element, html) \{  
element = $(element);  
if (element.outerHTML) \{  
element.outerHTML = html.stripScripts();  
\} else \{  
var range = element.ownerDocument.createRange();  
range.selectNodeContents(element);  
element.parentNode.replaceChild(  
range.createContextualFragment(html.stripScripts()), element);  
\}  
setTimeout(function() \{html.evalScripts()\}, 10);  
\},

getHeight: function(element) \{  
element = $(element);  
return element.offsetHeight;  
\},

classNames: function(element) \{  
return new Element.ClassNames(element);  
\},

hasClassName: function(element, className) \{  
if (!(element = $(element))) return;  
return Element.classNames(element).include(className);  
\},

addClassName: function(element, className) \{  
if (!(element = $(element))) return;  
return Element.classNames(element).add(className);  
\},

removeClassName: function(element, className) \{  
if (!(element = $(element))) return;  
return Element.classNames(element).remove(className);  
\},

// removes whitespace-only text node children  
cleanWhitespace: function(element) \{  
element = $(element);  
for (var i = 0; i < element.childNodes.length; i++) \{  
var node = element.childNodes\[i\];  
if (node.nodeType == 3 && !//S/.test(node.nodeValue))  
Element.remove(node);  
\}  
\},

empty: function(element) \{  
return $(element).innerHTML.match(/^/s\*$/);  
\},

childOf: function(element, ancestor) \{  
element = $(element), ancestor = $(ancestor);  
while (element = element.parentNode)  
if (element == ancestor) return true;  
return false;  
\},

scrollTo: function(element) \{  
element = $(element);  
var x = element.x ? element.x : element.offsetLeft,  
y = element.y ? element.y : element.offsetTop;  
window.scrollTo(x, y);  
\},

getStyle: function(element, style) \{  
element = $(element);  
var value = element.style\[style.camelize()\];  
if (!value) \{  
if (document.defaultView && document.defaultView.getComputedStyle) \{  
var css = document.defaultView.getComputedStyle(element, null);  
value = css ? css.getPropertyValue(style) : null;  
\} else if (element.currentStyle) \{  
value = element.currentStyle\[style.camelize()\];  
\}  
\}

if (window.opera && \['left', 'top', 'right', 'bottom'\].include(style))  
if (Element.getStyle(element, 'position') == 'static') value = 'auto';

return value == 'auto' ? null : value;  
\},

setStyle: function(element, style) \{  
element = $(element);  
for (var name in style)  
element.style\[name.camelize()\] = style\[name\];  
\},

getDimensions: function(element) \{  
element = $(element);  
if (Element.getStyle(element, 'display') != 'none')  
return \{width: element.offsetWidth, height: element.offsetHeight\};

var els = element.style;  
var originalVisibility = els.visibility;  
var originalPosition = els.position;  
els.visibility = 'hidden';  
els.position = 'absolute';  
els.display = '';  
var originalWidth = element.clientWidth;  
var originalHeight = element.clientHeight;  
els.display = 'none';  
els.position = originalPosition;  
els.visibility = originalVisibility;  
return \{width: originalWidth, height: originalHeight\};  
\},

makePositioned: function(element) \{  
element = $(element);  
var pos = Element.getStyle(element, 'position');  
if (pos == 'static' || !pos) \{  
element.\_madePositioned = true;  
element.style.position = 'relative';  
if (window.opera) \{  
element.style.top = 0;  
element.style.left = 0;  
\}  
\}  
\},

undoPositioned: function(element) \{  
element = $(element);  
if (element.\_madePositioned) \{  
element.\_madePositioned = undefined;  
element.style.position =  
element.style.top =  
element.style.left =  
element.style.bottom =  
element.style.right = '';  
\}  
\},

makeClipping: function(element) \{  
element = $(element);  
if (element.\_overflow) return;  
element.\_overflow = element.style.overflow;  
if ((Element.getStyle(element, 'overflow') || 'visible') != 'hidden')  
element.style.overflow = 'hidden';  
\},

undoClipping: function(element) \{  
element = $(element);  
if (element.\_overflow) return;  
element.style.overflow = element.\_overflow;  
element.\_overflow = undefined;  
\}  
\}

Object.extend(Element, Element.Methods);

var \_nativeExtensions = false;

if(!HTMLElement && /Konqueror|Safari|KHTML/.test(navigator.userAgent)) \{  
var HTMLElement = \{\}  
HTMLElement.prototype = document.createElement('div').\_\_proto\_\_;  
\}

Element.addMethods = function(methods) \{  
Object.extend(Element.Methods, methods || \{\});

if(typeof HTMLElement != 'undefined') \{  
var methods = Element.Methods, cache = Element.extend.cache;  
for (property in methods) \{  
var value = methods\[property\];  
if (typeof value == 'function')  
HTMLElement.prototype\[property\] = cache.findOrStore(value);  
\}  
\_nativeExtensions = true;  
\}  
\}

Element.addMethods();

var Toggle = new Object();  
Toggle.display = Element.toggle;

/\*--------------------------------------------------------------------------\*/

Abstract.Insertion = function(adjacency) \{  
this.adjacency = adjacency;  
\}

Abstract.Insertion.prototype = \{  
initialize: function(element, content) \{  
this.element = $(element);  
this.content = content.stripScripts();

if (this.adjacency && this.element.insertAdjacentHTML) \{  
try \{  
this.element.insertAdjacentHTML(this.adjacency, this.content);  
\} catch (e) \{  
var tagName = this.element.tagName.toLowerCase();  
if (tagName == 'tbody' || tagName == 'tr') \{  
this.insertContent(this.contentFromAnonymousTable());  
\} else \{  
throw e;  
\}  
\}  
\} else \{  
this.range = this.element.ownerDocument.createRange();  
if (this.initializeRange) this.initializeRange();  
this.insertContent(\[this.range.createContextualFragment(this.content)\]);  
\}

setTimeout(function() \{content.evalScripts()\}, 10);  
\},

contentFromAnonymousTable: function() \{  
var div = document.createElement('div');  
div.innerHTML = '<table><tbody>' + this.content + '</tbody></table>';  
return $A(div.childNodes\[0\].childNodes\[0\].childNodes);  
\}  
\}

var Insertion = new Object();

Insertion.Before = Class.create();  
Insertion.Before.prototype = Object.extend(new Abstract.Insertion('beforeBegin'), \{  
initializeRange: function() \{  
this.range.setStartBefore(this.element);  
\},

insertContent: function(fragments) \{  
fragments.each((function(fragment) \{  
this.element.parentNode.insertBefore(fragment, this.element);  
\}).bind(this));  
\}  
\});

Insertion.Top = Class.create();  
Insertion.Top.prototype = Object.extend(new Abstract.Insertion('afterBegin'), \{  
initializeRange: function() \{  
this.range.selectNodeContents(this.element);  
this.range.collapse(true);  
\},

insertContent: function(fragments) \{  
fragments.reverse(false).each((function(fragment) \{  
this.element.insertBefore(fragment, this.element.firstChild);  
\}).bind(this));  
\}  
\});

Insertion.Bottom = Class.create();  
Insertion.Bottom.prototype = Object.extend(new Abstract.Insertion('beforeEnd'), \{  
initializeRange: function() \{  
this.range.selectNodeContents(this.element);  
this.range.collapse(this.element);  
\},

insertContent: function(fragments) \{  
fragments.each((function(fragment) \{  
this.element.appendChild(fragment);  
\}).bind(this));  
\}  
\});

Insertion.After = Class.create();  
Insertion.After.prototype = Object.extend(new Abstract.Insertion('afterEnd'), \{  
initializeRange: function() \{  
this.range.setStartAfter(this.element);  
\},

insertContent: function(fragments) \{  
fragments.each((function(fragment) \{  
this.element.parentNode.insertBefore(fragment,  
this.element.nextSibling);  
\}).bind(this));  
\}  
\});

/\*--------------------------------------------------------------------------\*/

Element.ClassNames = Class.create();  
Element.ClassNames.prototype = \{  
initialize: function(element) \{  
this.element = $(element);  
\},

\_each: function(iterator) \{  
this.element.className.split(//s+/).select(function(name) \{  
return name.length > 0;  
\}).\_each(iterator);  
\},

set: function(className) \{  
this.element.className = className;  
\},

add: function(classNameToAdd) \{  
if (this.include(classNameToAdd)) return;  
this.set(this.toArray().concat(classNameToAdd).join(' '));  
\},

remove: function(classNameToRemove) \{  
if (!this.include(classNameToRemove)) return;  
this.set(this.select(function(className) \{  
return className != classNameToRemove;  
\}).join(' '));  
\},

toString: function() \{  
return this.toArray().join(' ');  
\}  
\}

Object.extend(Element.ClassNames.prototype, Enumerable);  
var Selector = Class.create();  
Selector.prototype = \{  
initialize: function(expression) \{  
this.params = \{classNames: \[\]\};  
this.expression = expression.toString().strip();  
this.parseExpression();  
this.compileMatcher();  
\},

parseExpression: function() \{  
function abort(message) \{ throw 'Parse error in selector: ' + message; \}

if (this.expression == '') abort('empty expression');

var params = this.params, expr = this.expression, match, modifier, clause, rest;  
while (match = expr.match(/^(.\*)/\[(\[a-z0-9\_:-\]+?)(?:(\[~/|!\]?=)(?:"(\[^"\]\*)"|(\[^/\]/s\]\*)))?/\]$/i)) \{  
params.attributes = params.attributes || \[\];  
params.attributes.push(\{name: match\[2\], operator: match\[3\], value: match\[4\] || match\[5\] || ''\});  
expr = match\[1\];  
\}

if (expr == '\*') return this.params.wildcard = true;

while (match = expr.match(/^(\[^a-z0-9\_-\])?(\[a-z0-9\_-\]+)(.\*)/i)) \{  
modifier = match\[1\], clause = match\[2\], rest = match\[3\];  
switch (modifier) \{  
case '\#': params.id = clause; break;  
case '.': params.classNames.push(clause); break;  
case '':  
case undefined: params.tagName = clause.toUpperCase(); break;  
default: abort(expr.inspect());  
\}  
expr = rest;  
\}

if (expr.length > 0) abort(expr.inspect());  
\},

buildMatchExpression: function() \{  
var params = this.params, conditions = \[\], clause;

if (params.wildcard)  
conditions.push('true');  
if (clause = params.id)  
conditions.push('element.id == ' + clause.inspect());  
if (clause = params.tagName)  
conditions.push('element.tagName.toUpperCase() == ' + clause.inspect());  
if ((clause = params.classNames).length > 0)  
for (var i = 0; i < clause.length; i++)  
conditions.push('Element.hasClassName(element, ' + clause\[i\].inspect() + ')');  
if (clause = params.attributes) \{  
clause.each(function(attribute) \{  
var value = 'element.getAttribute(' + attribute.name.inspect() + ')';  
var splitValueBy = function(delimiter) \{  
return value + ' && ' + value + '.split(' + delimiter.inspect() + ')';  
\}

switch (attribute.operator) \{  
case '=': conditions.push(value + ' == ' + attribute.value.inspect()); break;  
case '~=': conditions.push(splitValueBy(' ') + '.include(' + attribute.value.inspect() + ')'); break;  
case '|=': conditions.push(  
splitValueBy('-') + '.first().toUpperCase() == ' + attribute.value.toUpperCase().inspect()  
); break;  
case '!=': conditions.push(value + ' != ' + attribute.value.inspect()); break;  
case '':  
case undefined: conditions.push(value + ' != null'); break;  
default: throw 'Unknown operator ' + attribute.operator + ' in selector';  
\}  
\});  
\}

return conditions.join(' && ');  
\},

compileMatcher: function() \{  
this.match = new Function('element', 'if (!element.tagName) return false; /  
return ' + this.buildMatchExpression());  
\},

findElements: function(scope) \{  
var element;

if (element = $(this.params.id))  
if (this.match(element))  
if (!scope || Element.childOf(element, scope))  
return \[element\];

scope = (scope || document).getElementsByTagName(this.params.tagName || '\*');

var results = \[\];  
for (var i = 0; i < scope.length; i++)  
if (this.match(element = scope\[i\]))  
results.push(Element.extend(element));

return results;  
\},

toString: function() \{  
return this.expression;  
\}  
\}

/\*\*  
\* 针对 页面元素对象 的工具类，提供一些简单静态方法  
\*/  
var Field = \{  
/\*\*  
\* 清除参数引用对象的值  
\*/  
clear: function() \{  
for (var i = 0; i < arguments.length; i++)  
$(arguments\[i\]).value = '';  
\},

/\*\*  
\* 使参数引用对象获取焦点  
\*/  
focus: function(element) \{  
$(element).focus();  
\},

/\*\*  
\* 判断参数引用对象值是否为空，如为空，返回false, 反之true  
\*/  
present: function() \{  
for (var i = 0; i < arguments.length; i++)  
if ($(arguments\[i\]).value == '') return false;  
return true;  
\},

/\*\*  
\* 使选中参数引用对象  
\*/  
select: function(element) \{  
$(element).select();  
\},

/\*\*  
\* 使参数引用对象处于可编辑状态  
\*/  
activate: function(element) \{  
element = $(element);  
element.focus();  
if (element.select)  
element.select();  
\}  
\}

/\*--------------------------------------------------------------------------\*/

/\*\*  
\* 表单工具类  
\*/  
var Form = \{  
/\*\*  
\* 将表单元素序列化后的值组合成 QueryString 的形式  
\*/  
serialize: function(form) \{  
var elements = Form.getElements($(form));  
var queryComponents = new Array();

for (var i = 0; i < elements.length; i++) \{  
var queryComponent = Form.Element.serialize(elements\[i\]);  
if (queryComponent)  
queryComponents.push(queryComponent);  
\}

return queryComponents.join('&');  
\},

/\*\*  
\* 得到表单的所有元素对象  
\*/  
getElements: function(form) \{  
form = $(form);  
var elements = new Array();

for (var tagName in Form.Element.Serializers) \{  
var tagElements = form.getElementsByTagName(tagName);  
for (var j = 0; j < tagElements.length; j++)  
elements.push(tagElements\[j\]);  
\}  
return elements;  
\},

getInputs: function(form, typeName, name) \{  
form = $(form);  
var inputs = form.getElementsByTagName('input');

if (!typeName && !name)  
return inputs;

var matchingInputs = new Array();  
for (var i = 0; i < inputs.length; i++) \{  
var input = inputs\[i\];  
if ((typeName && input.type != typeName) ||  
(name && input.name != name))  
continue;  
matchingInputs.push(input);  
\}

return matchingInputs;  
\},

/\*\*  
\* 将指定表单的元素置于不可用状态  
\*/  
disable: function(form) \{  
var elements = Form.getElements(form);  
for (var i = 0; i < elements.length; i++) \{  
var element = elements\[i\];  
element.blur();  
element.disabled = 'true';  
\}  
\},

enable: function(form) \{  
var elements = Form.getElements(form);  
for (var i = 0; i < elements.length; i++) \{  
var element = elements\[i\];  
element.disabled = '';  
\}  
\},

findFirstElement: function(form) \{  
return Form.getElements(form).find(function(element) \{  
return element.type != 'hidden' && !element.disabled &&  
\['input', 'select', 'textarea'\].include(element.tagName.toLowerCase());  
\});  
\},

/\*\*  
\* 使表单的第一个非 hidden 类型而且处于可用状态的元素获得焦点  
\*/  
focusFirstElement: function(form) \{  
Field.activate(Form.findFirstElement(form));  
\},

/\*  
\* 重置表单  
\*/  
reset: function(form) \{  
$(form).reset();  
\}  
\}

/\*\*  
\* 表单元素工具类  
\*/  
Form.Element = \{  
/\*\*  
\* 返回表单元素的值先序列化再进行 URL 编码后的值  
\*/  
serialize: function(element) \{  
element = $(element);  
var method = element.tagName.toLowerCase();  
var parameter = Form.Element.Serializers\[method\](element);

if (parameter) \{  
var key = encodeURIComponent(parameter\[0\]);  
if (key.length == 0) return;

if (parameter\[1\].constructor != Array)  
parameter\[1\] = \[parameter\[1\]\];

return parameter\[1\].map(function(value) \{  
return key + '=' + encodeURIComponent(value);  
\}).join('&');  
\}  
\},

/\*\*  
\* 返回表单元素序列化后的值  
\*/  
getValue: function(element) \{  
element = $(element);  
var method = element.tagName.toLowerCase();  
var parameter = Form.Element.Serializers\[method\](element);

if (parameter)  
return parameter\[1\];  
\}  
\}

/\*\*  
\* prototype 的所谓序列化其实就是将表单的名字和值组合成一个数组  
\*/  
Form.Element.Serializers = \{  
input: function(element) \{  
switch (element.type.toLowerCase()) \{  
case 'submit':  
case 'hidden':  
case 'password':  
case 'text':  
return Form.Element.Serializers.textarea(element);  
case 'checkbox':  
case 'radio':  
return Form.Element.Serializers.inputSelector(element);  
\}  
return false;  
\},

inputSelector: function(element) \{  
if (element.checked)  
return \[element.name, element.value\];  
\},

textarea: function(element) \{  
return \[element.name, element.value\];  
\},

select: function(element) \{  
return Form.Element.Serializers\[element.type == 'select-one' ?  
'selectOne' : 'selectMany'\](element);  
\},

selectOne: function(element) \{  
var value = '', opt, index = element.selectedIndex;  
if (index >= 0) \{  
opt = element.options\[index\];  
value = opt.value || opt.text;  
\}  
return \[element.name, value\];  
\},

selectMany: function(element) \{  
var value = \[\];  
for (var i = 0; i < element.length; i++) \{  
var opt = element.options\[i\];  
if (opt.selected)  
value.push(opt.value || opt.text);  
\}  
return \[element.name, value\];  
\}  
\}

/\*--------------------------------------------------------------------------\*/

var $F = Form.Element.getValue;

/\*--------------------------------------------------------------------------\*/  
/\*\*  
\* Abstract.TimedObserver 也没有用 Class.create() 来创建，和Ajax.Base 意图应该一样  
\* Abstract.TimedObserver 顾名思义，是套用Observer设计模式来跟踪指定表单元素，  
\* 当表单元素的值发生变化的时候，就执行回调函数  
\*  
\* 我想　Observer 与注册onchange事件相似，不同点在于 onchange 事件是在元素失去焦点的时候才激发。  
\* 同样的与 onpropertychange 事件也相似，不过它只关注表单元素的值的变化，而且提供timeout的控制。  
\*  
\* 除此之外，Observer 的好处大概就在与更面向对象，另外可以动态的更换回调函数，这就比注册事件要灵活一些。  
\* Observer 应该可以胜任动态数据校验，或者多个关联下拉选项列表的连动等等  
\*  
\*/  
Abstract.TimedObserver = function() \{\}  
Abstract.TimedObserver.prototype = \{  
initialize: function(element, frequency, callback) \{  
this.frequency = frequency;  
this.element = $(element);  
this.callback = callback;

this.lastValue = this.getValue();  
this.registerCallback();  
\},

registerCallback: function() \{  
setInterval(this.onTimerEvent.bind(this), this.frequency \* 1000);  
\},

onTimerEvent: function() \{  
var value = this.getValue();  
if (this.lastValue != value) \{  
this.callback(this.element, value);  
this.lastValue = value;  
\}  
\}  
\}

Form.Element.Observer = Class.create();  
Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), \{  
getValue: function() \{  
return Form.Element.getValue(this.element);  
\}  
\});

Form.Observer = Class.create();  
Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), \{  
getValue: function() \{  
return Form.serialize(this.element);  
\}  
\});

/\*--------------------------------------------------------------------------\*/

Abstract.EventObserver = function() \{\}  
Abstract.EventObserver.prototype = \{  
initialize: function(element, callback) \{  
this.element = $(element);  
this.callback = callback;

this.lastValue = this.getValue();  
if (this.element.tagName.toLowerCase() == 'form')  
this.registerFormCallbacks();  
else  
this.registerCallback(this.element);  
\},

onElementEvent: function() \{  
var value = this.getValue();  
if (this.lastValue != value) \{  
this.callback(this.element, value);  
this.lastValue = value;  
\}  
\},

registerFormCallbacks: function() \{  
var elements = Form.getElements(this.element);  
for (var i = 0; i < elements.length; i++)  
this.registerCallback(elements\[i\]);  
\},

registerCallback: function(element) \{  
if (element.type) \{  
switch (element.type.toLowerCase()) \{  
case 'checkbox':  
case 'radio':  
Event.observe(element, 'click', this.onElementEvent.bind(this));  
break;  
case 'password':  
case 'text':  
case 'textarea':  
case 'select-one':  
case 'select-multiple':  
Event.observe(element, 'change', this.onElementEvent.bind(this));  
break;  
\}  
\}  
\}  
\}

Form.Element.EventObserver = Class.create();  
Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), \{  
getValue: function() \{  
return Form.Element.getValue(this.element);  
\}  
\});

Form.EventObserver = Class.create();  
Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), \{  
getValue: function() \{  
return Form.serialize(this.element);  
\}  
\});  
if (!window.Event) \{  
var Event = new Object();  
\}

Object.extend(Event, \{  
KEY\_BACKSPACE: 8,  
KEY\_TAB: 9,  
KEY\_RETURN: 13,  
KEY\_ESC: 27,  
KEY\_LEFT: 37,  
KEY\_UP: 38,  
KEY\_RIGHT: 39,  
KEY\_DOWN: 40,  
KEY\_DELETE: 46,

element: function(event) \{  
return event.target || event.srcElement;  
\},

isLeftClick: function(event) \{  
return (((event.which) && (event.which == 1)) ||  
((event.button) && (event.button == 1)));  
\},

pointerX: function(event) \{  
return event.pageX || (event.clientX +  
(document.documentElement.scrollLeft || document.body.scrollLeft));  
\},

pointerY: function(event) \{  
return event.pageY || (event.clientY +  
(document.documentElement.scrollTop || document.body.scrollTop));  
\},

stop: function(event) \{  
if (event.preventDefault) \{  
event.preventDefault();  
event.stopPropagation();  
\} else \{  
event.returnValue = false;  
event.cancelBubble = true;  
\}  
\},

findElement: function(event, tagName) \{  
var element = Event.element(event);  
while (element.parentNode && (!element.tagName ||  
(element.tagName.toUpperCase() != tagName.toUpperCase())))  
element = element.parentNode;  
return element;  
\},

observers: false,

\_observeAndCache: function(element, name, observer, useCapture) \{  
if (!this.observers) this.observers = \[\];  
if (element.addEventListener) \{  
this.observers.push(\[element, name, observer, useCapture\]);  
element.addEventListener(name, observer, useCapture);  
\} else if (element.attachEvent) \{  
this.observers.push(\[element, name, observer, useCapture\]);  
element.attachEvent('on' + name, observer);  
\}  
\},

unloadCache: function() \{  
if (!Event.observers) return;  
for (var i = 0; i < Event.observers.length; i++) \{  
Event.stopObserving.apply(this, Event.observers\[i\]);  
Event.observers\[i\]\[0\] = null;  
\}  
Event.observers = false;  
\},

observe: function(element, name, observer, useCapture) \{  
var element = $(element);  
useCapture = useCapture || false;

if (name == 'keypress' &&  
(navigator.appVersion.match(/Konqueror|Safari|KHTML/)  
|| element.attachEvent))  
name = 'keydown';

this.\_observeAndCache(element, name, observer, useCapture);  
\},

stopObserving: function(element, name, observer, useCapture) \{  
var element = $(element);  
useCapture = useCapture || false;

if (name == 'keypress' &&  
(navigator.appVersion.match(/Konqueror|Safari|KHTML/)  
|| element.detachEvent))  
name = 'keydown';

if (element.removeEventListener) \{  
element.removeEventListener(name, observer, useCapture);  
\} else if (element.detachEvent) \{  
element.detachEvent('on' + name, observer);  
\}  
\}  
\});

/\* prevent memory leaks in IE \*/  
if (navigator.appVersion.match(//bMSIE/b/))  
Event.observe(window, 'unload', Event.unloadCache, false);  
var Position = \{  
includeScrollOffsets: false,

prepare: function() \{  
this.deltaX = window.pageXOffset  
|| document.documentElement.scrollLeft  
|| document.body.scrollLeft  
|| 0;  
this.deltaY = window.pageYOffset  
|| document.documentElement.scrollTop  
|| document.body.scrollTop  
|| 0;  
\},

realOffset: function(element) \{  
var valueT = 0, valueL = 0;  
do \{  
valueT += element.scrollTop || 0;  
valueL += element.scrollLeft || 0;  
element = element.parentNode;  
\} while (element);  
return \[valueL, valueT\];  
\},

cumulativeOffset: function(element) \{  
var valueT = 0, valueL = 0;  
do \{  
valueT += element.offsetTop || 0;  
valueL += element.offsetLeft || 0;  
element = element.offsetParent;  
\} while (element);  
return \[valueL, valueT\];  
\},

positionedOffset: function(element) \{  
var valueT = 0, valueL = 0;  
do \{  
valueT += element.offsetTop || 0;  
valueL += element.offsetLeft || 0;  
element = element.offsetParent;  
if (element) \{  
p = Element.getStyle(element, 'position');  
if (p == 'relative' || p == 'absolute') break;  
\}  
\} while (element);  
return \[valueL, valueT\];  
\},

offsetParent: function(element) \{  
if (element.offsetParent) return element.offsetParent;  
if (element == document.body) return element;

while ((element = element.parentNode) && element != document.body)  
if (Element.getStyle(element, 'position') != 'static')  
return element;

return document.body;  
\},

within: function(element, x, y) \{  
if (this.includeScrollOffsets)  
return this.withinIncludingScrolloffsets(element, x, y);  
this.xcomp = x;  
this.ycomp = y;  
this.offset = this.cumulativeOffset(element);

return (y >= this.offset\[1\] &&  
y < this.offset\[1\] + element.offsetHeight &&  
x >= this.offset\[0\] &&  
x < this.offset\[0\] + element.offsetWidth);  
\},

withinIncludingScrolloffsets: function(element, x, y) \{  
var offsetcache = this.realOffset(element);

this.xcomp = x + offsetcache\[0\] - this.deltaX;  
this.ycomp = y + offsetcache\[1\] - this.deltaY;  
this.offset = this.cumulativeOffset(element);

return (this.ycomp >= this.offset\[1\] &&  
this.ycomp < this.offset\[1\] + element.offsetHeight &&  
this.xcomp >= this.offset\[0\] &&  
this.xcomp < this.offset\[0\] + element.offsetWidth);  
\},

overlap: function(mode, element) \{  
if (!mode) return 0;  
if (mode == 'vertical')  
return ((this.offset\[1\] + element.offsetHeight) - this.ycomp) /  
element.offsetHeight;  
if (mode == 'horizontal')  
return ((this.offset\[0\] + element.offsetWidth) - this.xcomp) /  
element.offsetWidth;  
\},

clone: function(source, target) \{  
source = $(source);  
target = $(target);  
target.style.position = 'absolute';  
var offsets = this.cumulativeOffset(source);  
target.style.top = offsets\[1\] + 'px';  
target.style.left = offsets\[0\] + 'px';  
target.style.width = source.offsetWidth + 'px';  
target.style.height = source.offsetHeight + 'px';  
\},

page: function(forElement) \{  
var valueT = 0, valueL = 0;

var element = forElement;  
do \{  
valueT += element.offsetTop || 0;  
valueL += element.offsetLeft || 0;

if (element.offsetParent==document.body)  
if (Element.getStyle(element,'position')=='absolute') break;

\} while (element = element.offsetParent);

element = forElement;  
do \{  
valueT -= element.scrollTop || 0;  
valueL -= element.scrollLeft || 0;  
\} while (element = element.parentNode);

return \[valueL, valueT\];  
\},

clone: function(source, target) \{  
var options = Object.extend(\{  
setLeft: true,  
setTop: true,  
setWidth: true,  
setHeight: true,  
offsetTop: 0,  
offsetLeft: 0  
\}, arguments\[2\] || \{\})

// find page position of source  
source = $(source);  
var p = Position.page(source);

target = $(target);  
var delta = \[0, 0\];  
var parent = null;  
if (Element.getStyle(target,'position') == 'absolute') \{  
parent = Position.offsetParent(target);  
delta = Position.page(parent);  
\}

if (parent == document.body) \{  
delta\[0\] -= document.body.offsetLeft;  
delta\[1\] -= document.body.offsetTop;  
\}

if(options.setLeft) target.style.left = (p\[0\] - delta\[0\] + options.offsetLeft) + 'px';  
if(options.setTop) target.style.top = (p\[1\] - delta\[1\] + options.offsetTop) + 'px';  
if(options.setWidth) target.style.width = source.offsetWidth + 'px';  
if(options.setHeight) target.style.height = source.offsetHeight + 'px';  
\},

absolutize: function(element) \{  
element = $(element);  
if (element.style.position == 'absolute') return;  
Position.prepare();

var offsets = Position.positionedOffset(element);  
var top = offsets\[1\];  
var left = offsets\[0\];  
var width = element.clientWidth;  
var height = element.clientHeight;

element.\_originalLeft = left - parseFloat(element.style.left || 0);  
element.\_originalTop = top - parseFloat(element.style.top || 0);  
element.\_originalWidth = element.style.width;  
element.\_originalHeight = element.style.height;

element.style.position = 'absolute';  
element.style.top = top + 'px';;  
element.style.left = left + 'px';;  
element.style.width = width + 'px';;  
element.style.height = height + 'px';;  
\},

relativize: function(element) \{  
element = $(element);  
if (element.style.position == 'relative') return;  
Position.prepare();

element.style.position = 'relative';  
var top = parseFloat(element.style.top || 0) - (element.\_originalTop || 0);  
var left = parseFloat(element.style.left || 0) - (element.\_originalLeft || 0);

element.style.top = top + 'px';  
element.style.left = left + 'px';  
element.style.height = element.\_originalHeight;  
element.style.width = element.\_originalWidth;  
\}  
\}

if (/Konqueror|Safari|KHTML/.test(navigator.userAgent)) \{  
Position.cumulativeOffset = function(element) \{  
var valueT = 0, valueL = 0;  
do \{  
valueT += element.offsetTop || 0;  
valueL += element.offsetLeft || 0;  
if (element.offsetParent == document.body)  
if (Element.getStyle(element, 'position') == 'absolute') break;

element = element.offsetParent;  
\} while (element);

return \[valueL, valueT\];  
\}  
\}

var SelectorLiteAddon=Class.create();

SelectorLiteAddon.prototype = \{

initialize: function(stack) \{  
  
this.r=\[\]; //results  
this.s=\[\]; //stack of selectors  
this.i=0; //stack pointer  
  
for (var i=stack.length-1;i>=0;i--) \{  
  
var s=\["\*","",\[\]\];  
  
var t=stack\[i\];  
  
var cursor=t.length-1;  
do \{  
  
var d=t.lastIndexOf("\#");  
var p=t.lastIndexOf(".");  
cursor=Math.max(d,p);  
  
if (cursor==-1) \{  
s\[0\]=t.toUpperCase();  
  
\} else if (d==-1 || p==cursor) \{  
s\[2\].push(t.substring(p+1));  
  
\} else if (!s\[1\]) \{  
s\[1\]=t.substring(d+1);  
\}  
t=t.substring(0,cursor);  
\} while (cursor>0);  
this.s\[i\]=s;  
\}  
\},  
  
get:function(root) \{  
this.explore(root || document,this.i==(this.s.length-1));  
return this.r;  
\},  
  
explore:function(elt,leaf) \{  
  
var s=this.s\[this.i\];  
  
var r=\[\];  
  
if (s\[1\]) \{  
  
e=$(s\[1\]);  
if (e && (s\[0\]=="\*" || e.tagName==s\[0\]) && e.childOf(elt)) \{  
r=\[e\];  
\}  
  
\} else \{  
r=$A(elt.getElementsByTagName(s\[0\]));  
\}  
  
if (s\[2\].length==1) \{ //single classname  
r=r.findAll(function(o) \{  
  
if (o.className.indexOf(" ")==-1) \{  
return o.className==s\[2\]\[0\];  
\} else \{  
return o.className.split(//s+/).include(s\[2\]\[0\]);  
\}  
\});  
  
\} else if (s\[2\].length>0) \{  
r=r.findAll(function(o) \{  
  
if (o.className.indexOf(" ")==-1) \{  
return false;  
\} else \{  
  
var q=o.className.split(//s+/);  
return s\[2\].all(function(c) \{  
return q.include(c);  
\});  
\}  
\});  
\}  
  
  
if (leaf) \{  
this.r=this.r.concat(r);  
  
\} else \{  
\++this.i;  
r.each(function(o) \{  
this.explore(o,this.i==(this.s.length-1));  
\}.bind(this));  
\}  
\}  
  
\}

var $$old=$$;

var $$=function(a,b) \{

if (b || a.indexOf("\[")>=0) return $$old.apply(this,arguments);  
  
return new SelectorLiteAddon(a.split(//s+/)).get();  
\}

[http_msdn.microsoft.com_library_en-us_script56_html_js56jsmthApply.asp]: http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp
[http_msdn.microsoft.com_workshop_author_dhtml_reference_properties_readystate_1.asp]: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp