ThreeSixty Viewer

360 degree product viewer with MooTools.

HTML

<h1>ThreeSixty Viewer Demo by <a href="http://ryanflorence.com/mootools-threesixty-viewer-featuring-the-ipad/" target="_new">Ryan Florence</a></h1>
<h2>Click and drag</h2>
<div id="viewer">
    <img src="http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_001.jpg" />
</div>

CSS

body {
    font-family: helvetica, arial;
    text-align: center;
}

JavaScript

var MouseWatcher = new Class({
    
    Implements: [Options, Events], 

        options: {
            /*
            onStart: $empty,
            onEnd: $empty,
            onDrag: $empty,
            */
            downClass: 'down',
            dragClass: 'dragging'
        },

    isDragging: false,
    isDown: false,
    started: {x: false, y: false},
    finished: {x: false, y: false},

    initialize: function(element, options){
        this.setOptions(options);
        this.element = document.id(element);
        this.document = document.id(document);
        this.attachments = {
            mousedown: this.start.bind(this),
            mouseup: this.finish.bind(this)
        };
        this.boundMouseMove = this.mousemove.bind(this);
        this.attach();
    },
    
    attach: function(){
        this.element.addEvents(this.attachments);
        return this;
    },
    
    detach: function(){
        this.element.removeEvents(this.attachments);
        return this;
    },
    
    start: function(event){
        this.started = event.client;
        this.isDown = true;
        this.element.addClass(this.options.downClass);
        this.element.addEvent('mousemove', this.boundMouseMove);
        this.document.addEvent('mouseup', this.attachments.mouseup);
        this.fireEvent('start', this.started);
        return this;
    },
    
    finish: function(event){
        this.finished = (event) ? event.client : this.current;
        this.isDown = false;
        this.element.removeEvent('mousemove', this.boundMouseMove);
        this.document.removeEvent('mouseup', this.attachments.finish);
        this.element.removeClass(this.options.downClass);
        this.fireEvent('finish', this.finished);
        return this;
    },
    
    mousemove: function(event){
        this.current = event.client;
        this.isDragging = true;
        this.element.addClass(this.options.dragClass);
        this.fireEvent('drag', this.current);
        return this;
    }
...