$(document).ready(function(){
        $('#thumbnails a').click(function(){
            $('a.active').removeClass('active');
            $(this).addClass('active');
            $('#showPic').switchFoto($(this).attr('href'));
            return false;
        });
        $('#thumbnails a[href='+$('#showPic img:first-child').attr('src')+']').addClass('active');
    });
    
    
    $.fn.switchFoto = function(src){
        var current = $(this).find('.pic:visible');
        var cim = current.find('img');
        var iid = 'i-'+src.replace(/[.\/]/g,'_');
        
        if (cim.attr('src') != src){
            $('.pic.new').stop().fadeOut('normal');
            current.addClass('remove');
            var h = cim.height();
            var w = cim.width();
            if (0 == $('#'+iid).length){
                $('.loading').fadeIn('normal');
                $(this).append('<div class="pic new" id="'+iid+'"></div>');
                var i= new Image();
                i.src=src;
                $(this).find('.new').append(i);
                i.onload=function(){
                    //$(this).css('left',Math.round((512-$(this).width())/2)+'px');
                    $(this).parent().fadeIn('normal').removeClass('new');
                    $('#showPic .remove').fadeOut('normal',function(){$(this).removeClass('remove')});
                    $('.loading').stop().fadeOut('fast');
                }; 
            } else {
                $('#'+iid).fadeIn('normal');
                $('.remove').fadeOut('normal',function(){$(this).removeClass('remove')});
            }
        }
    };