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