jQuery(function ($) {
    
    function tabImageSrc(name, state) {
        return Configure.Routes.img + 'splash/tab.' + name + '.' + state + '.' + Configure.Config.language + '.png';
    }
    
    $tabs = $(document.createElement('ul'));
    $('#splash .slide').each(function (i) {
        var name = $(this).attr('id');
        var state = i == 0 ? 'on' : 'off';
        
        document.createElement('img').src = tabImageSrc(name, 'off');
        document.createElement('img').src = tabImageSrc(name, 'over');
        document.createElement('img').src = tabImageSrc(name, 'on');

        var $img = $('<img src="' + tabImageSrc(name, state) + '" />').hover(
            function () { $(this).attr('src', $(this).attr('src').replace(/\.off\./, '.over.')); },
            function () { $(this).attr('src', $(this).attr('src').replace(/\.over\./, '.off.')); }
        );
        var $link = $('<a href="#' + name + '"></a>').append($img);
        var $li = $('<li></li>').append($link);

        $tabs.append($li);
    });
    $('#splash')
        .append($tabs)
        .css({ height : '500px', overflow : 'visible', 'margin-bottom' : 0 })
        .tabs({
            select  : function (event, ui) {
                $('li img', $tabs).each(function () {
                    $(this).attr('src', $(this).attr('src').replace(/\.(on|over)\./, '.off.'));
                });
                $this = $('img', ui.tab);
                $this.attr('src', $this.attr('src').replace(/\.(off|over)\./, '.on.'));
            }
        });
});