Sliderndescription

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    <?php
        //here's ur gonna get the images/descriptions like
        $div = array(
            "images" => array(
                0 => "http://image.naldzgraphics.net/2012/09/15-the-abstract.jpg",
                1 => "http://www.inspirationmix.com/wp-content/uploads/2010/11/abstract-colorful-background-green-2.jpg",
                2 => "http://www.kkuodesign.com/wordpress/wp-content/uploads/2010/07/iphone-wallpaper-abstract-design-71.png",
                3 => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-55.jpg",
                4 => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-21.jpg"
            ),
            "descriptions" => array(
                0 => "Desc1",
                1 => "Desc2",
                2 => "Desc3",
                3 => "Desc4",
                4 => "Desc5"
            )
        );

        // So u've gotta make a javascript code. I don't know how to make
        // the entire code with javascript so i'm gonna use jquery :)
    ?>
    $(function (){
        var numberOfImages = <?php echo count($div['images']); ?>;
        var images = new Array();
        var descriptions = new Array();
        <?php
        for($i = 0; $i < count($div['images']); $i++) {
            echo "images[".$i."] = \"".$div['images'][$i]."\";\n";
            echo "descriptions[".$i."] = \"".$div['descriptions'][$i]."\";\n";
        }
        ?>
        function sortImages(){
            var randomNumber = Math.floor((Math.random() * numberOfImages)); //this will get a random number from 0 -> numberOfImages - 1
            //alert(randomNumber);
            $('#slider').css("background-image", 'url("'+ images[randomNumber] +'")');
            $('#sliderDescription').html(descriptions[randomNumber]);
        }
        sortImages();
        setInterval(function (){sortImages()}, 1000); // the background will change every 5 seconds.
    });
</script>
<style type="text/css">
    #slider{
        width:500px;
        height:300px;
        margin:auto;
        background-color:black;
    }
    #sliderDescription{
        width:500px;
        margin:auto;
        text-align:center;
    }
</style>
</head>
<body>
    <div id="slider"></div>
    <p id="sliderDescription"></p>
</body>
</html>