1

// $Id$

     2

// balade_nature

     3

     4

var text = null;

     5

var spot = null;

     6

var box = null;

     7

var boxProperty = '';

     8

     9

    10

window.addEvent('domready', function(){

    11

    // Tooltips

    12

    (function initialize() {

    13

        $$(".pdocImagePulse").each(function(pulse) {

    14

            var mainImg  = pulse.getParent().getElement("img");

    15

            var pulseImg = pulse.getElement("img");

    16

            var tooltip  = $(pulse.get('id')+"t");

    17

            mainImg.setStyle("max-width", "none");

    18

            var pulseWidth  = 100 * pulseImg.getSize().x / mainImg.getSize().x;

    19

            var pulseHeight = 100 * pulseImg.getSize().y / mainImg.getSize().y;

    20

            var mainImgRealWidth = mainImg.getSize().x;

    21

    22

            pulse.setStyles({

    23

                "width": pulseWidth + "%", "height": pulseHeight + "%",

    24

                "left": (pulse.getStyle("left").toFloat() - pulseWidth/2) + "%",

    25

                "top":  (pulse.getStyle("top").toFloat() - pulseHeight/2) + "%"

    26

            });

    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

            }

    44

        });

    45

    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

    64

    // Effect: glow

    65

    var effectGlow = $("effectGlow");

    66

    if (effectGlow) {

    67

        text = $("effectGlowText");

    68

        spot = $("effectGlowSpot");

    69

        box = $("effectGlowBox")

    70

        if (typeof box.style.webkitBoxShadow == 'string') {

    71

            boxProperty = 'webkitBoxShadow';

    72

        } else if (typeof box.style.MozBoxShadow == 'string') {

    73

            boxProperty = 'MozBoxShadow';

    74

        } else if (typeof box.style.boxShadow == 'string') {

    75

            boxProperty = 'boxShadow';

    76

        }

    77

    78

        if (text && spot && box) {

    79

            effectGlow.onmousemove = onMouseMove;

    80

            effectGlow.ontouchmove = function (e) {

    81

                e.preventDefault();

    82

                e.stopPropagation();

    83

                onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});

    84

            }

    85

        }

    86

    }

    87

});

    88

    89

    90

function onMouseMove(e) {

    91

    if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {

    92

        return;

    93

    }

    94

    95

    var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;

    96

    var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;

    97

    var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);

    98

    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';

    99

   100

    if (boxProperty) {

   101

        box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';

   102

    }

   103

   104

    xm = e.clientX - Math.floor(window.innerWidth / 2);

   105

    ym = e.clientY - Math.floor(window.innerHeight / 2);

   106

    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';

   107

}

   108