$(function(){
    var gallery = $('<div class=gallery>');
    var gallery_box = $('<div class=box>');
    var gallery_slide = $('<div class=slide>');
    var thumbs = $('<div class=thumbs>');
    var tabs = [];

    gallery_box.append(gallery_slide);

    var thumb_box = $('<div class=thumb-box>').append(thumbs);

    gallery.append(gallery_box, thumb_box);

    $('#gallery').children().each(function(index, node){
        var picture = new Image;
        picture.src = $(node).attr('ref');

        var tab = $('<div>').append(picture, node, '<div class=clear>');
        tab.css('display', 'inline-block');
        tabs.push(tab);

        var thumb = new Image;
        thumb.src = $(node).attr('ref').replace(/^(.*)\.(.*)$/, '$1.thumb.$2');
        thumbs.append(thumb);
        $(thumb).click(function(){
            gallery_box.scrollTo(tab, 1000);
        });
        $(thumb).css('cursor', 'pointer');
        gallery_slide.append(tab);
    });
    gallery_slide.width(1000*tabs.length);
    $('#gallery').after(gallery).hide();
});