dynamic flip

gistfile1.html

<div id="flip" class="container">
  <div class="loading" style="position: absolute; left: 100px; top: 200px; font-size: 15px;">
    <div id="loading">loading...</div>
  </div>
</div>

...

<script type="text/javascript">
$(function () {
   $.ajax({
      url: "mobile/data.json",
      dataType: 'json',
      success: function (json) {
         // create a new document element
         var $newflip = $(
            '<div>' +
            '  <div class="f-page f-cover">' +
            '    <div class="cover-elements">' +
            '    </div>' +
            '    <div class="f-cover-flip">&lt; Flip</div>' +
            '  </div>' +
            '  <div class="f-page f-cover-back">' +
            '  </div>' +
            '</div>'
         );
         // populate it with the results
         var $newpage = $('<div class="f-page"></div>');
         for (var i in json) {
            var result = json[i];
            $newcss += '.img-' + i + ' { background-image: url(' + title.featureimage.secure_url + '); '+ deepimg + '}\n';
            $newpage.append(
               $(
                  '<div class="' + result.classname + '">'       + 
                  '  <div class="img-cont img-' + i + '"></div>' +
                  '  <h3>' + result.title + '</h3>'              +
                  ' ' + result.synopsis                          +
                  '</div>'
               )
            );
         }
         $newflip.find(".f-cover").after($newpage);
         
         // replace the placeholder
         $("#flip").replaceWith($newflip);
         
         var $imagecss = ... // create or retrieve a <style/> element for adding our custom styles to
         $imagecss.text($newcss); // replace with the new css
         
         // Give the $newflip div an id and class
         // NB this could possibly be done further above but I'm not quite
         // sure what happens if two divs have the same id so I've opted
         // to do it AFTER the replacement.
         $newflip.attr("id", "flip")
         $newflip.attr("class", "container");
         
         // DO THE MAGIC!!
         $newflip.flips();
      },
      error: function (jqXHR, textStatus, errorThrown) {
         // error processing
      }
   });
});
</script>