--- a/Pdf/BaladeNature/Js/balade_nature.js	ven. mai 30 19:05:48 2014 +0200
+++ b/Pdf/BaladeNature/Js/balade_nature.js	ven. mai 30 20:05:02 2014 +0200
@@ -1,88 +1,79 @@
 // $Id$
 // balade_nature
 
-/*global $: true */
-/*global $$: true */
+/*global jQuery: true */
 
-var text = null;
-var spot = null;
-var box = null;
-var boxProperty = '';
 
+jQuery(document).ready(function($) {
+    // Hotspots
+    var delay = 5000;
+    $('.pdocHotspot').each(function() {
+        var $hotspot = $(this);
+        var $spot = $('#' + $hotspot.attr('id') + 's');
+        var scenario = $hotspot.children('span').length;
+        if ($spot.length && scenario) {
+            $hotspot.css('opacity', 1);
+            $hotspot.click(function() {
+                if ($hotspot.css('opacity') == 1) {
+                    $hotspot.animate({opacity: 0})
+                        .delay(delay)
+                        .animate({opacity: 1});
+                    $spot.css({opacity: 0, display: 'block'})
+                        .animate({opacity: 1})
+                        .delay(delay)
+                        .animate({opacity: 0}, function() {
+                            $spot.css({opacity: '', display: ''});  
+                        });
+                } else {
+                    $spot.click(); 
+                }
+            });
 
-window.addEvent('domready', function(){
-    // Hotspots
-    (function initialize() {
-        $$(".pdocHotspot").each(function(hotspot) {
-            var spot = $(hotspot.get('id') + "s");
-            var scenario = hotspot.getElement("span");
-            if (spot && scenario) {
-                hotspot.addEvent("click", function() {
-                    var spot = $(this.get('id') + "s");
-                    if (spot.getChildren("img")) {
-                        spot.setStyles({"opacity": 1, "display": "block"});
-                    } else {
-                        spot.setStyles({"opacity": 0, "display": "block"});
-                        spot.tween("opacity", 1);
-                    }
-                    this.setStyle("display", "none");
-                    (function() {
-                        spot.setStyle("display", "none");
-                        hotspot.setStyle("display", "block");
-                    }).delay(12000);
+            $spot.click(function() {
+                $spot.stop().animate({opacity: 0}, function() {
+                    $spot.css({opacity: '', display: ''});  
                 });
+                $hotspot.stop().animate({opacity: 1});
+            });
+        }
+    });
 
-                spot.addEvent("click", function() {
-                    this.setStyle("display", "none");
-                    $(this.get('id').substring(0, this.get('id').length-1))
-                        .setStyle("display", "block");
-                });
-            }
-        });
-    }).delay(100);
-     
     // Effect: glow
-    var effectGlow = $("effectGlow");
-    if (effectGlow) {
-        text = $("effectGlowText");
-        spot = $("effectGlowSpot");
-        box = $("effectGlowBox")
-        if (typeof box.style.webkitBoxShadow == 'string') {
+    var boxProperty = '';
+    var $text = null;
+    var $spot = null;
+    var $box = null;
+    var $effectGlow = $('#effectGlow');
+    if ($effectGlow.length) {
+        $text = $('#effectGlowText');
+        $spot = $('#effectGlowSpot');
+        $box = $('#effectGlowBox');
+        if (typeof $box.css('webkitBoxShadow') == 'string') {
             boxProperty = 'webkitBoxShadow';
-        } else if (typeof box.style.MozBoxShadow == 'string') {
+        } else if (typeof $box.css('MozBoxShadow') == 'string') {
             boxProperty = 'MozBoxShadow';
-        } else if (typeof box.style.boxShadow == 'string') {
+        } else if (typeof $box.css('boxShadow') == 'string') {
             boxProperty = 'boxShadow';
         }
+        $effectGlow.on('mousemove touchmove', onMouseMove);
+    }
 
-        if (text && spot && box) {
-            effectGlow.onmousemove = onMouseMove;
-            effectGlow.ontouchmove = function (e) {
-                e.preventDefault();
-                e.stopPropagation();
-                onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});
-            };
+    function onMouseMove(e) {
+        if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
+            return;
         }
+        
+        var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;
+        var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;
+        var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
+        $text.css('textShadow',  -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black');
+        
+        if (boxProperty) {
+            $box.css(boxProperty, '0 ' + -ym + 'px ' + (d + 30) + 'px black');
+        }
+        
+        xm = e.clientX - Math.floor(window.innerWidth / 2);
+        ym = e.clientY - Math.floor(window.innerHeight / 2);
+        $spot.css('backgroundPosition', xm + 'px ' + ym + 'px');
     }
 });
-
-
-function onMouseMove(e) {
-    if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
-        return;
-    }
-    
-    var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;
-    var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;
-    var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
-    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
-    
-    if (boxProperty) {
-        box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
-    }
-    
-    xm = e.clientX - Math.floor(window.innerWidth / 2);
-    ym = e.clientY - Math.floor(window.innerHeight / 2);
-    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
-}
-

--- a/Pdf/BaladeNature/balade_nature_rich.xml	ven. mai 30 19:05:48 2014 +0200
+++ b/Pdf/BaladeNature/balade_nature_rich.xml	ven. mai 30 20:05:02 2014 +0200
@@ -238,9 +238,9 @@
       </section>
      </topic>
 
-     <!--====================================================================-->
-    <topic xml:id="tpc006" type="image">
-      <?effect-glow GLOW?>
+     <!--===================================================================-->
+     <topic xml:id="tpc006" type="image">
+      <?effect-glow?>
       <section>
         <media>
           <image id="balade_nature_006"/>