// reset transforms to this
var zeros = {x:0, y:0, z:0};

// Implement animation methods on the element prototype
Element.implement({

// Scatter elements all over the place
scatter: function(){
return this.translate({
x: Number.random(-1000, 1000),
y: Number.random(-1000, 1000),
z: Number.random(-500, 500)
}).rotate({
x: Number.random(-720, 720),
y: Number.random(-720, 720),
z: Number.random(-720, 720)
});
},

// Return them to their original state
unscatter: function(){ 
return this.translate(zeros).rotate(zeros);
},

//  Frighten the image!  AHHHHHHHH!
frighten: function(d){
this.setTransition('timing-function', 'ease-out').scatter();
setTimeout(function(){ 
this.setTransition('timing-function', 'ease-in-out').unscatter();
}.bind(this), 500);
return this;
},

// Zoooooom into me
zoom: function(delay){
var self = this;
this.scale(0.01);
setTimeout(function(){
self.setTransition({
property: 'transform',
duration: '250ms',
'timing-function': 'ease-out'
}).scale(1.2);
setTimeout(function(){
self.setTransition('duration', '100ms').scale(1);
}, 250)
}, delay);
},

// Create a slider
makeSlider: function(){
var open = false,
next = this.getNext(),
height = next.getScrollSize().y,
transition = {
property: 'height',
duration: '500ms',
transition: 'ease-out'
};
next.setTransition(transition);
this.addEvent('click', function(){
next.setStyle('height', open ? 0 : height);
open = !open;
});
},

// Scatter, come back
fromChaos: (function(x){
var delay = 0;
return function(){
var element = this;
//element.scatter();
setTimeout(function(){
element.setTransition({
property: 'transform',
duration: '500ms',
'timing-function': 'ease-out'
});
setTimeout(function(){
element.unscatter();
element.addEvents({
mouseenter: element.frighten.bind(element),
touchstart: element.frighten.bind(element)
});
}, delay += x);
}, x);
}
}())

});