$(document).ready(function(e)
{
    $('body').append(
        '<div id="gallery_overlay"></div>' +
        '<div id="gallery_image">' +
        '<img><p><span></span><a class="close">&#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;
            
        var imageWidth = $(wSelector).width();
        var imageHeight = $(wSelector).height();
        
        //~ alert('image: ' + imageWidth.toString() + 
              //~ 'x' + imageHeight.toString() + 
              //~ "\nwindow: " + (windowWidth * 0.9).toString() +
              //~ 'x' + (windowHeight * 0.8).toString())
        
        var needResizeW = imageWidth > windowWidth * 0.9;
        var needResizeH = imageHeight > windowHeight * 0.8;
        if (needResizeW || needResizeH)
        {
            var kw = windowWidth * 0.9 / imageWidth;
            var kh = windowHeight * 0.8 / imageHeight;
            var k = Math.min(kw, kh);
            $(wSelector).attr('width', imageWidth * k);   
            $(wSelector).attr('height', imageHeight * k);
        }
        
        var vertOffset = 50;
        if ($(wSelector).height() < windowHeight * 0.85)
            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').html($(this).attr('title')
            .replace(/&amp;/g, '&')
            .replace(/&quot;/g, '"')
            .replace(/&lt;/g, '<')
            .replace(/&gt;/g, '>'));
        $('#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();
    });
});