$(document).ready(function() {
    var gallery  = $('#gallery');
    var image    = gallery.find('#image .image');
    var thumbs   = gallery.find('.thumbs .image');
    var header   = gallery.find('h1');
    var loading  = $('<div class="loading" />');
    loading.hide();
    
    image.append(loading);
    loadImage    = false;
    
    thumbs.each(function(){
        var thumb = $(this);
        var link  = thumb.find('a');
        var title = link.attr('title');
        var imageFull = new Image();

        var loadingImage = new Image()
        loadingImage.src = '/images/loading.gif';

        var newImage = $('<img />');
        newImage.attr( 'src', link.attr('href') )
        //console.log(newImage.attr('complete'));
        newImage.attr( 'title', title )
        newImage.hide();
        
        thumb.mouseover(function(){
            $(this).fadeTo( 'fast', 1 );
        }).mouseout(function(){
            $(this).fadeTo( 'fast', 0.5 );
        });
        
        link.click(function(){
            var oldImage = image.find('img');
            if( link.attr('href') != oldImage.attr('src') ) {
                newImage.addClass('transition');
                newImage.appendTo(image);
                loadImage = setInterval( function() {
                    if( newImage.attr('complete') ){
                        newImage.fadeIn('fast');
                        loading.hide();
                        clearInterval( loadImage );
                    } else {
                        loading.show();
                    }
                }, 100 );
                oldImage.fadeOut('fast', function() {
                    $(this).remove();
                    newImage.removeClass('transition');
                });
                header.text( title );
            }
            return false;
        })
    })
});