$(document).ready(function(e)
{
    $('body').append(
        '<div id="gallery_overlay"></div>' +
        '<div id="gallery_image">' +
        '<img><p><span></span><a>&#10006;</a></p>' +
        '</div>' +
        '<div id="gallery_loading"></div>');

    set_position = function(selector, wSelector)
    {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        
        var scrollTop = window.pageYOffset 
            || document.documentElement.scrollTop 
            || document.body.scrollTop;
            
        //~ alert('wSelector: ' + $(wSelector).width().toString() + 
              //~ "\nwindow: " + (windowWidth * 0.9).toString())
        
        if ($(wSelector).width() > windowWidth * 0.9)
            $(wSelector).attr('width', windowWidth * 0.9);
        $(selector).css('width', $(wSelector).width());

        var vertOffset = 50;
        if ($(wSelector).height() < windowHeight * 0.8)
            vertOffset = (windowHeight - $(selector).height()) / 2;

        var left = (windowWidth - $(selector).width()) / 2;
        var top = scrollTop + vertOffset;
        
        $(selector).hide();
        
        $(selector).css({
            'left': left,
            'top': top});
            
        $(selector).fadeIn(300);
    };

    $('#gallery_image img').load(function(e)
    {
        $('#gallery_loading').hide();
        set_position('#gallery_image', '#gallery_image img');
    });
    
    $('a.gallery').click(function(e)
    {
        e.preventDefault();
        
        // overlay
        var maskHeight = $(document).height();
		var maskWidth = $(document).width();
        $('#gallery_overlay').css({
            'width': maskWidth,
            'height': maskHeight});
        $('#gallery_overlay').fadeIn(300); 
        $('#gallery_overlay').fadeTo(300, 0.8); 
        
        // image
        $('#gallery_image img').attr('src', '');
        $('#gallery_image img').removeAttr('width');
        $('#gallery_image img').attr('src', $(this).attr("href"));
        $('#gallery_image span').text($(this).children('img').attr('title'));
        $('#gallery_image').css('top', -2000);
        $('#gallery_image').show();
        
        // loading...
        $('#gallery_loading').text('Loading...');
        set_position('#gallery_loading', '#gallery_loading');
        $('#gallery_loading').show();
    });
    
    $('#gallery_overlay, #gallery_image img, #gallery_image a')
    .click(function(e)
    {
        e.preventDefault();
        $('#gallery_overlay, #gallery_image').hide();
    });
});