var imageDrag = new Class({
    Binds: ["_handle", "_autoMove"],
    initialize: function() {
        var content = $('center');
        this.contentSize = $('draggable').getSize().x;
        $("draggable").setStyles({"top" : 12, "left": 0});
        if(Browser.Engine.trident) {
           document.ondragstart = function () { return false; };
        }
        $("hand").setStyles({"top" : 0, "left": 0});
        if (this.contentSize <= 1000) {
            $("hand").destroy();
            return;
        }
        content.addEvent("mousewheel", function(ev) {
            var draggable = $('draggable');
            draggable.setStyle("left", (draggable.getStyle("left").toInt() + ev.wheel * 12).limit(1000 - this.contentSize, 0));
            this._autoMove(draggable);
            ev.stop();
        } .bind(this));
        content.setStyles({ 'cursor': 'pointer', 'overflow': 'hidden' });
        var myDrag = new Drag($('draggable'), { limit: { x: [-this.contentSize + 1000, 0], y: [12,12] }}).addEvent('drag', this._autoMove);
        myDrag.attach();
        var handler = $('hand');
        var handleDrag = new Drag(handler, { limit: { x: [0, 950], y: [0, 0] } });
        handleDrag.addEvent('drag', this._handle).attach();

    },
    _handle: function(hand) {
        
        var percentPos = hand.getStyle('left').toInt() / 950;
        
        var toMove = (-((this.contentSize - 1000) * percentPos)).toInt();
        
        $('draggable').setStyle('left', toMove);
        
    },
    _autoMove: function(draggable) {
        
        var moved = draggable.getStyle('left').toInt();
        
        var percentMoved = -moved / (this.contentSize - 1000);
        
        $('hand').setStyle('left', 950 * percentMoved);
    }

});

window.addEvent("load", function() { new imageDrag(); });