# HG changeset patch
# User veltr
# Date 1372416402 -7200
# Node ID df9a887eae92dc3eb51ca4612093ce4b17e58777
# Parent  af621f52de704531e3e245ac397f097422e20f2b
Added FullScreen and Play to Slideshow

diff -r af621f52de70 -r df9a887eae92 integration/v2/04-slideshow.html
--- a/integration/v2/04-slideshow.html	Fri Jun 28 12:12:57 2013 +0200
+++ b/integration/v2/04-slideshow.html	Fri Jun 28 12:46:42 2013 +0200
@@ -28,11 +28,15 @@
         <svg class="image-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" preserveAspectRatio="none">
             <defs>
                 <clipPath id="fragment-clip">
-                    <path d="" class="clip-path" />
+                    <path d="M0 0L1 0L1 1L0 1Z" class="clip-path" />
                 </clipPath>
             </defs>
             <image class="main-image" xlink:href="" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip)" />
         </svg>
+        <div class="top-controls">
+            <a class="full-screen" href="#"></a>
+            <a class="play-pause" href="#"></a>
+        </div>
         <div class="arrow-wrap left-arrow">
             <a class="arrow" href="#"></a>
         </div>
diff -r af621f52de70 -r df9a887eae92 integration/v2/css/slideshow.css
--- a/integration/v2/css/slideshow.css	Fri Jun 28 12:12:57 2013 +0200
+++ b/integration/v2/css/slideshow.css	Fri Jun 28 12:46:42 2013 +0200
@@ -1,9 +1,9 @@
 body {
-    overflow: hidden;
+    overflow: hidden; background: #ffffff;
 }
 
 .slideshow-wrap {
-    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+    position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff;
 }
 
 .backdrop {
@@ -72,4 +72,28 @@
 
 .right-arrow .arrow {
     transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
-}
\ No newline at end of file
+}
+
+.top-controls {
+    position: absolute; left: 20px; top: 20px; display: none;
+}
+
+.top-controls a {
+    display: block; float: left; background-image: url(../img/slideshow-controls.png); height: 57px; opacity: 0.5;
+}
+
+.top-controls a:hover {
+    opacity: 1;
+}
+
+.full-screen {
+    width: 55px; margin-right: 20px;
+}
+
+.play-pause {
+    background-position: -55px 0; width: 48px;
+}
+
+.play-pause.pause {
+    background-position: -103px 0;
+}
diff -r af621f52de70 -r df9a887eae92 integration/v2/img/slideshow-controls.png
Binary file integration/v2/img/slideshow-controls.png has changed
diff -r af621f52de70 -r df9a887eae92 integration/v2/js/slideshow.js
--- a/integration/v2/js/slideshow.js	Fri Jun 28 12:12:57 2013 +0200
+++ b/integration/v2/js/slideshow.js	Fri Jun 28 12:46:42 2013 +0200
@@ -83,21 +83,21 @@
         return false;
     }
     
-    var hideTO, isInArrow = false, jqArrows = $(".arrow-wrap");
+    var hideTO, isInArrow = false, jqControls = $(".arrow-wrap,.top-controls");
     function resetTO() {
         clearTimeout(hideTO);
         if (!isInArrow) {
             hideTO = setTimeout(function() {
-                jqArrows.hide();
+                jqControls.hide();
             }, 1000);
         }
     }
     $("body").mousemove(function() {
-        jqArrows.show();
+        jqControls.show();
         resetTO();
         return false;
     });
-    jqArrows.hover(function() {
+    jqControls.hover(function() {
         isInArrow = true;
         resetTO();
     }, function() {
@@ -108,6 +108,39 @@
     $(".left-arrow").click(prevSlide);
     $(".right-arrow").click(nextSlide);
     
+    function fullScreen() {
+        var isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || false;
+        if (isFull) {
+            (document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen || function(){}).call(document);
+        } else {
+            (document.body.requestFullScreen || document.body.mozRequestFullScreen || document.body.webkitRequestFullScreen || function(){}).call(document.body);
+        }
+        showSlide();
+        return false;
+    }
+    
+    $(".full-screen").click(fullScreen);
+           
+    if ( typeof document.fullScreen === "undefined"
+        && typeof document.mozFullScreen === "undefined"
+        && typeof document.webkitIsFullScreen === "undefined") {
+        $(".full-screen").remove();
+    }
+    
+    var playInterval, playing = false;
+    
+    $(".play-pause").click(function() {
+        clearInterval(playInterval);
+        playing = !playing;
+        if (playing) {
+            $(this).addClass("pause");
+            playInterval = setInterval(nextSlide,4000);
+        } else {
+            $(this).removeClass("pause");
+        }
+        return false;
+    });
+    
     slides.forEach(function(slide, k) {
         if (!slide.path) {
             slide.path = "M0 0L1 0L1 1L0 1Z"