6 var box = null; |
6 var box = null; |
7 var boxProperty = ''; |
7 var boxProperty = ''; |
8 |
8 |
9 |
9 |
10 window.addEvent('domready', function(){ |
10 window.addEvent('domready', function(){ |
11 // Tooltips |
11 // Hotspots |
12 (function initialize() { |
12 (function initialize() { |
13 $$(".pdocImagePulse").each(function(pulse) { |
13 var scenario; |
14 var mainImg = pulse.getParent().getElement("img"); |
14 var content; |
15 var pulseImg = pulse.getElement("img"); |
15 $$(".pdocHotspot").each(function(hotspot) { |
16 var tooltip = $(pulse.get('id')+"t"); |
16 scenario = hotspot.getElement("span"); |
17 mainImg.setStyle("max-width", "none"); |
17 content = $(hotspot.get('id').replace("x", "z")) |
18 var pulseWidth = 100 * pulseImg.getSize().x / mainImg.getSize().x; |
18 if (scenario && content) { |
19 var pulseHeight = 100 * pulseImg.getSize().y / mainImg.getSize().y; |
19 |
20 var mainImgRealWidth = mainImg.getSize().x; |
20 hotspot.addEvent("click", function() { |
|
21 var content = $(this.get('id').replace("x", "z")); |
|
22 content.setStyles({"opacity": 0, "display": "block"}); |
|
23 this.setStyle("display", "none"); |
|
24 content.tween("opacity", 1); |
|
25 (function() { |
|
26 content.setStyle("display", "none"); |
|
27 hotspot.setStyle("display", "block"); |
|
28 }).delay(12000); |
|
29 }); |
21 |
30 |
22 pulse.setStyles({ |
31 content.addEvent("click", function() { |
23 "width": pulseWidth + "%", "height": pulseHeight + "%", |
32 this.setStyle("display", "none"); |
24 "left": (pulse.getStyle("left").toFloat() - pulseWidth/2) + "%", |
33 $(this.get('id').replace("z", "x")) |
25 "top": (pulse.getStyle("top").toFloat() - pulseHeight/2) + "%" |
34 .setStyle("display", "block"); |
26 }); |
35 }); |
27 pulseImg.setStyle("width", "100%"); |
|
28 mainImg.setStyle("max-width", "100%"); |
|
29 mainImg.getParent().setStyle("max-width", "100%"); |
|
30 |
|
31 var fontSize = tooltip.getStyle("font-size").toFloat(); |
|
32 tooltip.setStyles({ |
|
33 "opacity": 0, "display": "block", |
|
34 "font-size": (fontSize * mainImg.getSize().x / mainImgRealWidth) |
|
35 + tooltip.getStyle("font-size").replace(fontSize, "") |
|
36 }); |
|
37 |
|
38 var tooltipImg = tooltip.getElement("img"); |
|
39 if (tooltipImg) { |
|
40 tooltip.setStyle( |
|
41 "width", (100 * tooltipImg.getSize().x / mainImgRealWidth) + "%"); |
|
42 tooltipImg.setStyle("width", "100%"); |
|
43 } |
36 } |
44 }); |
37 }); |
45 |
38 }).delay(100); |
46 $$(".pdocImagePulse").addEvent("click", function() { |
|
47 var pulse = this; |
|
48 var tooltip = $(this.get('id')+"t"); |
|
49 pulse.setStyle("display", "none"); |
|
50 tooltip.tween("opacity", 1); |
|
51 (function() { |
|
52 tooltip.tween("opacity", 0); |
|
53 pulse.setStyle("display", "block"); |
|
54 }).delay(12000); |
|
55 }); |
|
56 |
|
57 $$(".pdocImageTooltip").addEvent("click", function() { |
|
58 this.tween("opacity", 0); |
|
59 $(this.get('id').substr(0, this.get('id').length-1)) |
|
60 .setStyle("display", "block"); |
|
61 }); |
|
62 }).delay(50); |
|
63 |
39 |
64 // Effect: glow |
40 // Effect: glow |
65 var effectGlow = $("effectGlow"); |
41 var effectGlow = $("effectGlow"); |
66 if (effectGlow) { |
42 if (effectGlow) { |
67 text = $("effectGlowText"); |
43 text = $("effectGlowText"); |