fancy swapping elements

by Dimitar Christoff

HTML

Click on any 2 icons to swap them.
<div id="shuffler">
    <div class="icon" rel="0">
        <img src="http://razorjack.net/quicksand/content/images/activity-monitor.png" />        
    </div>
    <div class="icon" rel="1">
        <img src="http://razorjack.net/quicksand/content/images/address-book.png" />        
    </div>
    
    <div class="icon" rel="2">
        <img src="http://razorjack.net/quicksand/content/images/finder.png" />        
    </div>
    <div class="icon" rel="3">
        <img src="http://razorjack.net/quicksand/content/images/ichat.png" />        
    </div>
    <div class="icon" rel="4">
        <img src="http://razorjack.net/quicksand/content/images/sync.png" />        
    </div>
    <div class="icon" rel="5">
        <img src="http://razorjack.net/quicksand/content/images/network-utility.png" />
    </div>
    <div id="swapper"></div>
</div>

CSS

#shuffler {
    width: 450px;
    margin: 10px auto auto;
    background-color: #333;
    background-image: -moz-linear-gradient(top, #444,#333,#555,#333);
    background-image: -webkit-linear-gradient(top, #444,#333,#555,#333);
    background-image: -o-linear-gradient(top, #444,#333,#555,#333);
    border: 1px solid #000;
    -moz-box-shadow: 8px 8px 15px rgba(0,0,0,.7);
    -webkit-box-shadow: 8px 8px 15px rgba(0,0,0,.7);
    -ms-box-shadow: 8px 8px 15px rgba(0,0,0,.7);
    box-shadow: 8px 8px 15px rgba(0,0,0,.7);
    -o-box-shadow: 8px 8px 15px rgba(0,0,0,.7);
}
.clear {
    clear: both;
}
#shuffler div.icon {
    width: 140px;
    cursor: pointer;
    height: 150px;
    text-align: center;
    font-family: verdana;
    margin: 2px; 
    float: left;
    font-weight: bold;
    color: yellow;
}

.clear {
    clear: both;
}

body {
    background: #999;
    font-family: arial; font-size: 16px; 
}

#swapper {
    
    text-transform: uppercase;
    clear: both;
    text-shadow: 1px 1px 1px #000;
    text-align: center;
    padding: 5px;
    color: #B3AF74;
    font-weight: bold;
    border-top: 1px solid #000;
    background-color: #500;
    background-image: -moz-linear-gradient(top, #700,#500);
    background-image: -webkit-linear-gradient(top, #700,#500);
    background-image: -o-linear-gradient(top, #700,#500);
    -moz-box-shadow:inset -1px -1px 4px rgba(255,255,255, 0.2);
    -webkit-box-shadow:inset -1px -1px 4px rgba(255,255,255, 0.2);
    -ms-box-shadow:inset -1px -1px 4px rgba(255,255,255, 0.2);
    box-shadow:inset -1px -1px 4px rgba(255,255,255, 0.2);
}

JavaScript

(function() {
    // internals to do with allowing mootools to parse and modify transform2d scale
    Element.Styles.MozTransform = "rotate(@deg) scale(@)";
    Element.Styles.MsTransform = "rotate(@deg) scale(@)";
    Element.Styles.OTransform = "rotate(@deg) scale(@)";
    Element.Styles.WebkitTransform = "rotate(@deg) scale(@)";

    Object.append(Fx.CSS.Parsers, {

        TransformScale: {
            parse: function(value) {
                return ((value = value.match(/^scale\((([0-9]*\.)?[0-9]+)\)$/i))) ? parseFloat(value[1]) : false;
            },
            compute: function(from, to, delta) {
                return Fx.compute(from, to, delta);
            },
            serve: function(value) {
                return 'scale(' + value + ')';
            }
        }

    });

    Array.implement({
        swap: function(x, y) {
            var t = this[x];
            this[x] = this[y];
            this[y] = t;
            return this;
        }
    });

    this.serializer = new Class({

        options: {
            transforms: {
                computed: ['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'],
                raw: ['transform', '-webkit-transform', '-moz-transform', '-o-transform', 'msTransform']
            }
        },
        
        Implements: [Options],

        initialize: function(element, options) {
            
            this.setOptions(options);

            this.element = document.id(element);
            this.elements = this.element.getChildren();

            var testEl = new Element("div"),
                self = this;
            this.scaleTransform = this.options.transforms.computed.some(function(el, index) {
                var test = el in testEl.style;
                if (test) {
                    self.prop = self.options.transforms.raw[index];
                }

                return test;
            });

            if (!this.prop) {
                this.prop = "opacity";
 ...