$(document).ready(function() {
    $('#panels li').click(function(e) {
        e.preventDefault();
        
        var thisPanel = $(this);
        var openPanel = $('#panels li.open').first();
        
        var newContent = $('#content-' + $(this).attr('id').split('-')[1]);
        var oldContent = $('#content-' + openPanel.attr('id').split('-')[1]);

        // fade out the colored image
        openPanel.children().first().fadeOut(10);
        openPanel.attr('class', 'closed');
                                
        // swap the content
        //oldContent.fadeOut(500);
        //newContent.fadeIn(500);        
        oldContent.hide();
        newContent.show();
        
        // close the open panel
        openPanel.animate(
            { width: 120 },
            1000,
            function() {       
                // when its done, open the clicked panel                 
                thisPanel.animate(
                    { width : 238 }, 
                    1000,
                    function() { 
                        // fade in the colored image
                        thisPanel.children().first().fadeIn(1000);
                    }
                );
                thisPanel.attr('class', 'open');        
            }
        );
    });
});