1 // $Id$ |
1 // $Id$ |
2 // balade_nature |
2 // balade_nature |
3 |
3 |
4 /*global $: true */ |
4 /*global jQuery: true */ |
5 /*global $$: true */ |
|
6 |
|
7 var text = null; |
|
8 var spot = null; |
|
9 var box = null; |
|
10 var boxProperty = ''; |
|
11 |
5 |
12 |
6 |
13 window.addEvent('domready', function(){ |
7 jQuery(document).ready(function($) { |
14 // Hotspots |
8 // Hotspots |
15 (function initialize() { |
9 var delay = 5000; |
16 $$(".pdocHotspot").each(function(hotspot) { |
10 $('.pdocHotspot').each(function() { |
17 var spot = $(hotspot.get('id') + "s"); |
11 var $hotspot = $(this); |
18 var scenario = hotspot.getElement("span"); |
12 var $spot = $('#' + $hotspot.attr('id') + 's'); |
19 if (spot && scenario) { |
13 var scenario = $hotspot.children('span').length; |
20 hotspot.addEvent("click", function() { |
14 if ($spot.length && scenario) { |
21 var spot = $(this.get('id') + "s"); |
15 $hotspot.css('opacity', 1); |
22 if (spot.getChildren("img")) { |
16 $hotspot.click(function() { |
23 spot.setStyles({"opacity": 1, "display": "block"}); |
17 if ($hotspot.css('opacity') == 1) { |
24 } else { |
18 $hotspot.animate({opacity: 0}) |
25 spot.setStyles({"opacity": 0, "display": "block"}); |
19 .delay(delay) |
26 spot.tween("opacity", 1); |
20 .animate({opacity: 1}); |
27 } |
21 $spot.css({opacity: 0, display: 'block'}) |
28 this.setStyle("display", "none"); |
22 .animate({opacity: 1}) |
29 (function() { |
23 .delay(delay) |
30 spot.setStyle("display", "none"); |
24 .animate({opacity: 0}, function() { |
31 hotspot.setStyle("display", "block"); |
25 $spot.css({opacity: '', display: ''}); |
32 }).delay(12000); |
26 }); |
|
27 } else { |
|
28 $spot.click(); |
|
29 } |
|
30 }); |
|
31 |
|
32 $spot.click(function() { |
|
33 $spot.stop().animate({opacity: 0}, function() { |
|
34 $spot.css({opacity: '', display: ''}); |
33 }); |
35 }); |
|
36 $hotspot.stop().animate({opacity: 1}); |
|
37 }); |
|
38 } |
|
39 }); |
34 |
40 |
35 spot.addEvent("click", function() { |
|
36 this.setStyle("display", "none"); |
|
37 $(this.get('id').substring(0, this.get('id').length-1)) |
|
38 .setStyle("display", "block"); |
|
39 }); |
|
40 } |
|
41 }); |
|
42 }).delay(100); |
|
43 |
|
44 // Effect: glow |
41 // Effect: glow |
45 var effectGlow = $("effectGlow"); |
42 var boxProperty = ''; |
46 if (effectGlow) { |
43 var $text = null; |
47 text = $("effectGlowText"); |
44 var $spot = null; |
48 spot = $("effectGlowSpot"); |
45 var $box = null; |
49 box = $("effectGlowBox") |
46 var $effectGlow = $('#effectGlow'); |
50 if (typeof box.style.webkitBoxShadow == 'string') { |
47 if ($effectGlow.length) { |
|
48 $text = $('#effectGlowText'); |
|
49 $spot = $('#effectGlowSpot'); |
|
50 $box = $('#effectGlowBox'); |
|
51 if (typeof $box.css('webkitBoxShadow') == 'string') { |
51 boxProperty = 'webkitBoxShadow'; |
52 boxProperty = 'webkitBoxShadow'; |
52 } else if (typeof box.style.MozBoxShadow == 'string') { |
53 } else if (typeof $box.css('MozBoxShadow') == 'string') { |
53 boxProperty = 'MozBoxShadow'; |
54 boxProperty = 'MozBoxShadow'; |
54 } else if (typeof box.style.boxShadow == 'string') { |
55 } else if (typeof $box.css('boxShadow') == 'string') { |
55 boxProperty = 'boxShadow'; |
56 boxProperty = 'boxShadow'; |
56 } |
57 } |
|
58 $effectGlow.on('mousemove touchmove', onMouseMove); |
|
59 } |
57 |
60 |
58 if (text && spot && box) { |
61 function onMouseMove(e) { |
59 effectGlow.onmousemove = onMouseMove; |
62 if (typeof e === 'undefined' || typeof e.clientX === 'undefined') { |
60 effectGlow.ontouchmove = function (e) { |
63 return; |
61 e.preventDefault(); |
|
62 e.stopPropagation(); |
|
63 onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY}); |
|
64 }; |
|
65 } |
64 } |
|
65 |
|
66 var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4; |
|
67 var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4; |
|
68 var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5); |
|
69 $text.css('textShadow', -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black'); |
|
70 |
|
71 if (boxProperty) { |
|
72 $box.css(boxProperty, '0 ' + -ym + 'px ' + (d + 30) + 'px black'); |
|
73 } |
|
74 |
|
75 xm = e.clientX - Math.floor(window.innerWidth / 2); |
|
76 ym = e.clientY - Math.floor(window.innerHeight / 2); |
|
77 $spot.css('backgroundPosition', xm + 'px ' + ym + 'px'); |
66 } |
78 } |
67 }); |
79 }); |
68 |
|
69 |
|
70 function onMouseMove(e) { |
|
71 if (typeof e === 'undefined' || typeof e.clientX === 'undefined') { |
|
72 return; |
|
73 } |
|
74 |
|
75 var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4; |
|
76 var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4; |
|
77 var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5); |
|
78 text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black'; |
|
79 |
|
80 if (boxProperty) { |
|
81 box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black'; |
|
82 } |
|
83 |
|
84 xm = e.clientX - Math.floor(window.innerWidth / 2); |
|
85 ym = e.clientY - Math.floor(window.innerHeight / 2); |
|
86 spot.style.backgroundPosition = xm + 'px ' + ym + 'px'; |
|
87 } |
|
88 |
|