--- a/integration/v2/js/slideshow.js	Thu Jun 27 17:42:07 2013 +0200
+++ b/integration/v2/js/slideshow.js	Thu Jun 27 18:47:14 2013 +0200
@@ -1,7 +1,11 @@
 $(function() {
     
     var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"),
-        margin = 50, jqmainimg = $(".main-image"), jqbackdrop = $(".backdrop"),
+        margin = 50,
+        jqimgcontainer = $(".image-container"),
+        jqmainimg = $(".main-image"),
+        jqbackdrop = $(".backdrop"),
+        jqpath = $(".clip-path"),
         lastSlide = null;
     
     function showSlide() {
@@ -10,34 +14,53 @@
         if (slide !== lastSlide) {
             jqcaption.find("h2").text(slide.title);
             jqcaption.find("h3").text(slide.author);
-            jqcaption.find("p").text(slide.description);
-            jqmainimg.attr("src", slide.image.src);
+            var captiondiv = jqcaption.find(".caption-description");
+            captiondiv.empty();
+            slide.description.split(/\s*[\r\n]\s*/gm).forEach(function(p) {
+                captiondiv.append($("<p>").text(p));
+            });
+            jqmainimg.attr("xlink:href", slide.image.src);
             jqbackdrop.attr("src", slide.image.src);
+            jqpath.attr("d", slide.path);
         }
         
         lastSlide = slide;
         
         if (slide.image && slide.image.width) {
-            var ww = jqwin.width(),
+            var pathcoords = slide.path.match(/[\d\.]+/g),
+                pathx = pathcoords.filter(function(p,i) {
+                    return !(i%2);
+                }),
+                pathy = pathcoords.filter(function(p,i) {
+                    return (i%2);
+                }),
+                minpx = Math.min.apply(Math,pathx),
+                maxpx = Math.max.apply(Math,pathx),
+                minpy = Math.min.apply(Math,pathy),
+                maxpy = Math.max.apply(Math,pathy),
+                ww = jqwin.width(),
                 wh = jqwin.height(),
                 cw = jqcaption.outerWidth(),
                 ch = jqcaption.outerHeight(),
                 wi = slide.image.width,
-                hi = slide.image.height,    
+                hi = slide.image.height,
+                wp = wi * (maxpx - minpx),
+                hp = hi * (maxpy - minpy),
                 w1 = ww - 2 * margin, w2 = w1 - cw
                 h1 = wh - 2 * margin, h2 = h1 - ch,
                 ra = Math.max(
-                    Math.min((h1 / hi), (w2 / wi)),
-                    Math.min((h2 / hi), (w1 / wi))
+                    Math.min((h1 / hp), (w2 / wp)),
+                    Math.min((h2 / hp), (w1 / wp))
                 ),
-                wa = wi * ra, ha = hi * ra,
+                wa = wp * ra, ha = hp * ra,
                 rb = Math.max(ww / wi, wh / hi),
                 wb = wi * rb, hb = hi * rb,
                 xb = (ww - wb) / 2, yb = (wh - hb) / 2;
-            jqmainimg.css({
+            jqimgcontainer.css({
                 width: wa,
                 height: ha
             });
+            jqimgcontainer[0].setAttribute("viewBox", [minpx,minpy,(maxpx-minpx),(maxpy-minpy)].join(" "));
             jqbackdrop.css({
                 width: wb,
                 height: hb,
@@ -86,13 +109,16 @@
     $(".right-arrow").click(nextSlide);
     
     slides.forEach(function(slide, k) {
+        if (!slide.path) {
+            slide.path = "M0 0L1 0L1 1L0 1Z"
+        }
         slide.image = new Image();
         slide.image.onload = function() {
             if (k === currentSlide) {
                 showSlide();
             }
         };
-        slide.image.src = imgurlbase + slide.url;
+        slide.image.src = imgurlbase + slide.src;
     });
     
     showSlide();