gistfile1.js

var BAZoom = new Cobra.Class({
    __init__: function(self) {
        // Create the BAZoom container
        self.container = $('<div/>').attr({ id: 'BAZoom' });
        self.container.hide();
        
        // Create inner table
        var table = new Array(
            '<table id="BAZoom_table">',
                '<tbody>',
                    '<tr>',
                        '<td class="nw" />',
                        '<td class="n" />',
                        '<td class="ne" />',
                    '</tr>',
                    '<tr>',
                        '<td class="w" />',
                        '<td class="BAZoom_content_td"></td>',
                        '<td class="e" />',
                    '</tr>',
                    '<tr>',
                        '<td class="sw" />',
                        '<td class="s" />',
                        '<td class="se" />',
                    '</tr>',
                '</tbody>',
            '</table>').join('');
        
        // Create table dom obj and append to container
        self.table = $(table);
        self.table.appendTo(self.container);
        
        // Create the content div to be placed inside the table
        self.content = $('<div/>').attr('id', 'BAZoom_content');
        self.table.find('.BAZoom_content_td').append(self.content);
        
        // Create the close button
        self.close_button = $('<a/>').attr({
            href: '#close',
            id: 'BAZoom_close'
        }).bind('click', function(event) {
            self.close();
            return false;
        });
        self.close_button.prependTo(self.container);
        
        self.overlay = $('<div/>').attr({ id: 'BAZoom_overlay' }).bind('click', self.close);
        self.overlay.hide();
        
        // Add the overlay and container to the current page
        $('body').prepend(self.overlay);
        $('body').prepend(self.container);
    },
    
    open: function(self) {
        self.is_open = true;

        self.reposition();
        
        self.overlay.fadeIn('fast');
        self.container.fadeIn('fast');
        
        // If the escape key is pressed, close the bazoom window.
        $(document).bind('keyup', function(event) {
            if (event.keyCode == 27 && self.is_open)
                self.close();
        });
    },
    
    close: function(self) {
        self.is_open = false;
        
        self.overlay.fadeOut('fast');
        self.container.fadeOut('fast');
        
        $(document).unbind('keyup');
    },
    
    reposition: function(self) {
        var dimensions = {
            width: self.container.width(),
            height: self.container.height()
        };
        
        self.container.css({
            'margin-top': -(dimensions.height/2),
            'margin-left': -(dimensions.width/2)
        });
    },
    
    load: function(self, payload) {
        // empty the current container
        self.content.empty();
        
        var types = {
            'img':  self.loadImage,
            'url':  self.loadURL,
            'html': self.loadHTML
        }
        
        if (types[payload.type]) {
            types[payload.type](payload.content, self.open);
        } else {
            console.log('Invalid type?')
        }
    },
    
    loadImage: function(self, image, callback) {
        imagePreload = new Image();
        imagePreload.onload = null;
        imagePreload.src = image;
        
        var img = $('<img/>').attr({
            'src': image
        });
        
        self.content.append(img);
        
        callback();
    },
    
    loadURL: function(self, url, callback) {
        
        callback();
    },
    
    loadHTML: function(self, url, callback) {
        
        callback();
    }
    
});