//바르지 못한 방법:
Event.observe('myContainer', 'click', doSomeMagic);

//적당한 방법: 논쟁의 여지가 있지만 객체지향적이다!
$('myContainer').observe('click', doSomeMagic);

흠.. 전자를 사용하였는데.. 논쟁의 여지가 있는줄에 대해서는 알지 못하였다.


//바르지 못한 방법:
$$('div.collapsed').each(function(el){
    el.observe('click', expand);
})
//적당한 방법: invoke를 이용한 이벤트 핸들링, 졸라 쉽다!
$$('div.collapsed').invoke('observe', 'click', expand)

//바르지 못한 방법:
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
//적당한 방법: $$는 오버해드가 크기 때문에 invoke를 사용하면 $$를 여러번 사용할 필요도 없다.
$$('input.date').invoke('observe', 'focus', onFocus).invoke('observe', 'blur', onBlur)

//바르지 못한 방법:
$('productTable').innerHTML =
    $('productTable').innerHTML +
    '<tr><td>' + productId + ' '
    + productName + '</td></tr><tr><td>'
    + productId + ' ' + productPrice +
    '</td></tr>'
//적당한 방법: Template 클래스는 정말 쓸만한 DOM 솔루션이다. 하지만 잘 사용되고 있지 않는 것 같다.
var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
    rowTemplate.evaluate({
        id: productId,
        name: productName,
        price: productPrice
    }))
)

var Ani = Class.create();
Ani.prototype = {

initialize: function(img, element, options){

this.options = Object.extend({
cnt: 0, // 애니메이션 몇장의 컷인가?
width: 0, // 애니메이션 크기
height: 0, // 애니메이션 높이
line: 0, // 이미지 줄
field: 0, // 이미지 몇개에
x: 0, // 시작 x점
y: 0, // 시작 y점
interval: 0, // 인터발 시간이며, 이 시간은 javascript 의 시간이다. 1초 = 1000
repeat: 0, // 이미지 반복횟수
type: 'image' // 타입은 background, image 형 두개가 있다.
}, options || {});

this.img = img;
this.element = (typeof(element) == 'string') ? $(element) : element;


this.aniNode = document.createElement('div');
Element.setStyle(this.aniNode, {width:this.options.width+'px', height:this.options.height+'px', overflow:'hidden', position:'relative'});
this.element.appendChild(this.aniNode);

this.options.x = this.options.x*-1;
this.options.y = this.options.y*-1;
this[this.options.type]();
this.repeat = 1;
this.cnt = 0;

this.line = 0;
this.field = 0;
this.interVal = setInterval(this.ani.bind(this), this.options.interval);
},

ani: function()
{
var x = y = 0;

if((this.options.cnt-2) < this.cnt)
{
this.cnt = 0;
this.repeat++;

this.line = 0;
this.field = 0;
}

// 리피트가 넘으면 종료
if(this.options.repeat < this.repeat)
{
clearInterval(this.interVal);
return;
}


//alert(this.cnt%this.options.field);
if((this.cnt%this.options.field) == (this.options.field-1))
{

this.line++;
this.field = 0;
}

y = (this.line * this.options.height)*-1;
x = (this.field * this.options.width)*-1;
y = this.options.y+y;
x = this.options.x+x;


if(this.options.type == 'background')
{
this.aniNode.style.backgroundPosition = x+'px '+y+'px';
}
else
{
this.imgNode.style.top = y+'px';
this.imgNode.style.left = x+'px';
}

this.cnt++;
this.field++;

},

background: function()
{
this.aniNode.style.backgroundImage = 'url('+this.img+')';
this.aniNode.style.backgroundPosition = this.options.x+'px '+this.options.y+'px';
},

image: function()
{
this.imgNode = document.createElement('img');
this.imgNode.setAttribute('src', this.img);
Element.setStyle(this.imgNode, {position:'absolute', top:this.options.y, left:this.options.x});
this.aniNode.appendChild(this.imgNode);
}
}