window.Dragfont = new Singletone ({
    offset: null,
    dragged: false,
    width: 543,
    height: 625,
    last: null,
    frame: {w: 0, h: 0},
    
    set: function () {
        self.wrapper = ID('wrapper');
        self.wrapper.onmousedown = self.pick;
        self.update();
    },
    
    update: function () {
        self = Dragfont;
        
        var doc_width  = 288;
        var act_width  = (self.width - doc_width) / 2;
        var doc_height = 600;
        var act_height = (self.height - doc_height) / 2;
        
        self.offset = {x: act_width, y: act_height};
        
        self.wrapper.style.backgroundPosition = -act_width + 'px ' + (-act_height) + 'px';
    },
    
    reset: function () {
        self.offset = self.last;
        self.wrapper.removeClass('hand');
    },
    
    pick: function (event, elements) {
        self = Dragfont;

        event = Mohawk.DOM.event(event);
        
        document.addEvent('mousemove', self.drag);
        document.addEvent('mouseup', self.release);

        if (IE) {
            // cancel out any text selections
            document.body.focus();

            // prevent text selection in IE
            document.addEvent('selectstart', self.returnFalse);
        }
        if (!self.offset) {
            self.update();
        }
        
        var cur = event.cursor();
        self.start = cur;
        
        return false;
    },

    drag: function (event) {
        self = Dragfont;

        event = Mohawk.DOM.event(event);
        
        if (!self.dragged) {
            document.removeEvent('mouseup', self.release);
            document.addEvent('mouseup', self.drop);
        }
        self.dragged = true;

        var cur = event.cursor();

        var act_width  = self.offset.x - (cur.x - self.start.x);
        var act_height = self.offset.y - (cur.y - self.start.y);

        var doc_width  = 288;
        var doc_height = 600;

        if (act_width < -self.frame.w) {
            act_width = -self.frame.w;
        } else if (act_width > self.width - doc_width + self.frame.w) {
            act_width = self.width - doc_width + self.frame.w;
        }
            
        if (act_height < -self.frame.h) {
            act_height = -self.frame.h;
        } else if (act_height > self.height - doc_height + self.frame.h) {
            act_height = self.height - doc_height + self.frame.h;
        }
        
        self.last = {x: act_width, y: act_height};
        self.wrapper.style.backgroundPosition = -act_width + 'px ' + (-act_height) + 'px';
        self.wrapper.addClass('hand');
        
        return false;
    },

    drop: function (event) {
        self = Dragfont;

        event = Mohawk.DOM.event(event);

        document.removeEvent('mousemove', self.drag);
        document.removeEvent('mouseup', self.drop);
        if (IE) {
            document.removeEvent('selectstart', self.returnFalse);
        }

        var cur = event.cursor();
        self.reset();
    },

    release: function (event) {
        self = Dragfont;

        event = Mohawk.DOM.event(event);

        document.removeEvent('mousemove', self.drag);
        document.removeEvent('mouseup', self.release);

        self.reset();
    },
    
    returnFalse: function () {
        return false;
    }
});

document.addLoader(function () {
    Dragfont.set();
    window.onresize = Dragfont.update;
});