/*
         * I'm pretty sure parts of this JavaScript rely on features from
         * jQuery 1.4. It's only been a few months since it was released, and
         * I've already forgotten what's old and what's new.
         */
    
        $(document).ready(function() {
            // jQuery lets you use the CSS child selector
            var slides = $("#slides > li");
            // Nobody likes how JavaScript implements random numbers
            var random_number = Math.floor(Math.random() * slides.length);
            
            // Caption background is a separate element so that it"s opacity
            // can be manipulated separate from the text.
            // No need to add the caption background element manually, it
            // doens"t vary between slides or have any content
            slides.append(function(index, html) {
                var caption = $(slides).eq(index).find("div.caption");
                caption.css("z-index", 201);
                return $("<div>", {
                    "class": "caption-background",
                    css: {
                        height: caption.height(),
                        opacity: 1,
                        width: caption.width(),
                        "z-index": 200
                    }
                });
            });
            
            // This goes so fast, no one should notice
            slides.hide();
            slides.eq(random_number).show();
        });