ElementsStack 1.5-wip

The original ElementsStack. Work-in-progress version. Refactoring the code for a 1.5 release.

HTML

<ul id="wrapper">
    <li><a title="" href="#"><img width="75" height="75" src="http://farm4.static.flickr.com/3536/3783437904_f8be14bb03_s.jpg" /></a></li>
    <li><a title="" href="#"><img width="75" height="75" src="http://farm3.static.flickr.com/2639/4142476380_7b928bdd6d_s.jpg" /></a></li>
    <li><a title="" href="#"><img width="75" height="75" src="http://farm5.static.flickr.com/4104/4847086400_c2b2d2f5fd_s.jpg" /></a></li>
    <li><a title="" href="#"><img width="75" height="75" src="http://farm4.static.flickr.com/3298/3502874366_d73cb0f6fe_s.jpg" /></a></li>
    <li><a title="" href="#"><img width="75" height="75" src="http://farm3.static.flickr.com/2630/3795161224_1012daa415_s.jpg" /></a></li>
    <li><a title="" href="#"><img width="75" height="75" src="http://farm3.static.flickr.com/2736/4158101064_89f08e4bff_s.jpg" /></a></li>
    <li><a title="" href="#"><img width="75" height="75" src="http://farm4.static.flickr.com/3524/3880365897_682521f7b9_s.jpg" /></a></li>
    <li><a title="" href="#"><img width="75" height="75" src="http://farm5.static.flickr.com/4072/4208775604_8d1e65578d_s.jpg" /></a></li>
    <li><a title="" href="#"><img width="75" height="75" src="http://farm5.static.flickr.com/4005/4247684077_6848f141ff_s.jpg" /></a></li>
</ul>

CSS

body {
    background: #D4D7DF url('http://img21.imageshack.us/img21/7868/mootoolifiedbg.png');
    font-family: "Georgia", "Times New Roman", serif;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
}

h1 {
    font-size: 1.7em;
    line-height: 150%;
}

#wrapper {
    position: relative;
    height: 400px;
    width: 350px;
    margin: 15px auto;
}

li {
    position: relative;
    float: left;
    padding: 0;
    margin: 7px;
    background: #fff;
    -webkit-box-shadow: 0 0 5px #73799C;
    -moz-box-shadow: 0 0 5px #73799C;
    border: solid 8px #fff;
    -webkit-transition: -webkit-transform 0.20s ease-in-out;
    -moz-transition: -moz-transform 0.20s ease-in-out;
}

li:hover {
    -webkit-box-shadow: 0 0 7px #50546B;
    -moz-box-shadow: 0 0 7px #50546B;
}

img, a {
    display: block;
}

JavaScript

/*
---
script: ElementsStack.js
decription: ElementsStack stacks elements/images on top of each other with a funky transition
license: MIT-style license.
authors:
- Oskar Krawczyk (http://nouincolor.com/)
requires:
core:1.2.4:
- Class.Extras
- Array
- Function
- Event
- Element.Style
- Element.Dimensions
- Fx.Morph
- Fx.Transitions
provides: [ElementsStack]
...
*/

// bigger demo: http://nouincolor.com/ElementStack/

var ElementsStack = new Class({
    Implements: [Options],
    
    options: {
        maxRotation: 20,
        delay: 40,
        duration: 600,
        transition: 'back:out',
        position: 'middle', 
        specific: 1,
        customPosition: $empty
    },
    
    initialize: function(selector, wrapper, options){
        this.setOptions(options);
        
        this.pos,
            this.wrapper = wrapper,
            this.stackItems = selector,
            this.trigger = $pick(this.wrapper, this.stackItems[0].getParent());
        
        this.setDefaults();
    },
    
    setDefaults: function(){
        this.stackItems.each(function(stackItem){
            this.pos = stackItem.getPosition(this.wrapper);
            
            stackItem.store('default:coords', this.pos);
            
            stackItem.set('styles', {
                top: this.pos.y,
                left: this.pos.x
            });
            
            stackItem.set('morph', {
                transition: this.options.transition,
                duration: this.options.duration
            });
            
            // Need to delay this, otherwise the top/left
            // position will be set to zero (Moo bug?)
            (function(){
                this.setStyle('position', 'absolute');
            }).delay(1, stackItem);
        }, this);
        
        this.initPosition();
        this.attachActions();
    },
    
    initPosition: function(){
        var Positioner = $merge({
            'first': function(){
                return...