video = {
    list:    [],
    padding: 10,

    init: function (){

        // create div with transperant png as background
        this.overlay = $( $.create("div", { id: 'busy', className: 'overlay' }, []));
        this.window  = $( $.create("div", { className: 'window' }, [
                "div", { className: 'close'   }, [],
                "div", { className: 'content' }, []
            ]));

        $('.close', this.window).click( function(){ video.hide() })
        $(document.body).append( this.overlay );
        this.overlay.append(this.window);
    },

    show: function(){

        var _img = new Image();
        _img.src = $('#gallery_middle_image').attr('big_img');

        

        // add image to overlay window
        var img_html = '<img src="' + $('#gallery_middle_image').attr('big_img') + '"/>';
        $('.content', this.window).append( img_html );

        var doc = {
            width:  $(document).width(),
            height: $(document).height()
        };

        var win = {
            width       : $(window).width(),
            height      : $(window).height(),
            scroll_top  : $(window).scrollTop(),
            scroll_left : $(window).scrollLeft()
        };

        this.overlay.css({
            width:  doc.width  > win.width  ? doc.width  : win.width,
            height: doc.height > win.height ? doc.height : win.height
        })

        this.overlay.show();

        this.window.width(_img.width + 2 * this.padding);
        this.window.height(_img.height + this.padding + 20);
        this.window.css({
            top      : ( win.height - this.window.height() ) / 2 + win.scroll_top,
            left     : ( win.width  - this.window.width()  ) / 2 + win.scroll_left
        })
    },

    hide: function(){
        this.overlay.hide();
        $('.content', this.window).empty();
    }
}


$(document).ready(function(){
    $("img.gallery").each(function() {
        // preload images
        this.src.match(/^(.*)\.(\w+)$/);
        this._middle        = new Image();
        this._middle.src    = RegExp.$1 + "_m." + RegExp.$2;;
        
        this._big           = new Image();
        this._big.src       = RegExp.$1 + "_b." + RegExp.$2;;

        $(this).click(function(){
            middle_img = $('#gallery_middle_image').get(0);
            middle_img.src  = this._middle.src;
            $(middle_img).attr('big_img', this._big.src);
            
            if ($('#gallery_image_text').length > 0){
                var bio = '&nbsp;';
                if (typeof($(this).attr('bio')) != 'undefined'){
                    bio = $(this).attr('bio');
                }
                $('#gallery_image_text').html(bio);
            }
        });
    });
    
    video.init();
});