$html = Loader::helper('html');
echo $html->javascript('jquery.ui.js');
<script src="<?php echo $this->getThemePath(); ?>/js/supersized.2.0.js"></script>
<?php if (!$c->isEditMode()): ?>
<script type="text/javascript">  
   $(function(){
      $.fn.supersized.options = {  
         startwidth: 640,  
         startheight: 480,
         vertical_center: 1,
         slideshow: 1,
         navigation: 1,
         transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
         pause_hover: 0,
         slide_counter: 1,

<!--Slides-->
<div id="supersize">
   <?php
   $a = new Area('Background Images');
   $a->display($c);
   ?>
</div>
<!--Content area that hovers on top-->
<div id="content">
   <?php
   $a = new Area('Main');
   $a->display($c);
   ?>
</div>

<style type="text/css">
   <?php
   $fsID = 1; //<--set this to the fileset you want to use.
   $bgih = Loader::helper('background_image');
   $src = $bgih->getRandomImageUrl($fsID);
   ?>
   body { background-image: url(<?php echo $src; ?>); }
</style>

<style type="text/css">
      body { background-image: url(); }
</style>

<?php foreach ($images as $img): ?>
{image : '<?php echo $img['fullSrc']; ?>', title : '<?php echo htmlspecialchars($img['title'], ENT_QUOTES, APP_CHARSET); ?>'},
<?php endforeach; ?>

<?php
$js = array();
foreach ($images as $img) {
  $js[] = "{image : '" . $img['fullSrc'] . "', title : '" . htmlspecialchars($img['title'], ENT_QUOTES, APP_CHARSET) . "'}";
}
echo implode(',', $js);
?>