prototype javascript library Element extend example

<div id="d1">replace</div>
<div id="d11" class="c1 c2 c3">x</div>
<div id="d10">xx</div>
<div id="d20">y</div>
<div id="d3">test</div>
<form action="index" method="post" id="f1" accept-charset="utf-8" style="background: #ddd; border: #ccc double 1px;">
<input type="text" name="input1" value="origin is enabled" id="input1">element.disable()<br/>
<input type="text" name="input2" value="origin is disabled" id="input2" disabled="true">element.enable()<br/>
<input type="text" name="input3" value="test activate()" id="input3">element.activate()<br/>
<input type="text" name="input4" value="test clear" id="input4">element.clear()<br/>
<input type="text" name="input5" value="test present(id input5)" id="input5">element.present()<br/>
<input type="text" name="input6" value="test serialize()" id="input6">element.serialize()<br/>
<input type="text" name="input7" value="test focus()" id="input7">element.focus()<br/>
<input type="text" name="input8" value="test select()" id="input8">element.select()<br/>
<input type="submit" value="Continue →"><br/>
</form>
<div id="d4">test Element scrollTo()</div>
<div id="d5">test element scrollTo()</div>
<div id="image">
 <%= image_tag 'rails' %>
</div>
<script type="text/javascript" charset="utf-8">
 function doc(argument) {
  document.write("<p>\n");
  document.write(argument);
  document.write("</p>\n");
 }
 $('input1').disable();
 $('input2').enable();
 //$('input3').activate();
 $('input4').clear();
 doc('$("input5").present() = '  + $('input5').present());
 doc('$("input6").serialize() is: ' + $('input6').serialize());
 //$('input7').focus();
 $('input8').select();
 
 doc('form action is: ' + $('f1').readAttribute('action'));
 doc('style of form: ' + $('f1').readAttribute('style'));
 doc('getStyle background of form: ' + $('f1').getStyle('background'));
 
 var cn = new Element.ClassNames('d11');
 cn.add('c4');
 cn.remove('c2');
 
 Element.update('d10', 'test<strong> Element.update(element, "HTML") </strong>');
 $('d20').update('test<strong> element.update("HTML") </strong>');
 
 Element.replace('d1', '<div id="d2"><span>replaced div</span></div>');
 doc(Element.inspect('d2'));
 doc(Element.ancestors('d2').inspect().escapeHTML());
 doc(Element.descendants('d2').inspect().escapeHTML());
 doc(Element.previousSiblings('d3').inspect().escapeHTML());
 doc(Element.nextSiblings('d3').inspect().escapeHTML());

 Element.setOpacity('image', 0.6);
 doc($('image').getOpacity());

 $H(Element.Methods).each (function (m) {
  doc(m);
 });
 
 doc($H(Element.getDimensions('d4')).inspect().escapeHTML());
 // Element.scrollTo('d4'); 
 $('f1').scrollTo();
 doc("$('d5').empty() is: " + $('d5').empty());

 var timer1 = setTimeout(function () {
  $('d5').replace('<div id="d5">replace timer1</div>');
 }, 5000);
 var timer2 = setTimeout(function () {
  $('d5').replace('<div id="d5">timeout d5</div>');
 }, 15000);
 
 $('f1').request({onComplete: function (xhr) {
  alert(xhr.responseText);
 }});
</script>