﻿var ACS_ModalPopup = Class.create({  initialize: function(content_id, params) {    this.params = params;        // --------------------------------------------------------    // Paramètres possibles :    // --------------------------------------------------------      /*        content_id // /!\ Obligatoire : identifiant du popup "contenu"        // Tout le reste est facultatif        {          contentPositionTop: 0,        // Si l'on souhaite préciser une position en dur, ne sera jamaus replacé automatiquement. - DEFAUT : centré (y compris scroll et resize)          contentPositionLeft: 0,       // Si l'on souhaite préciser une position en dur, ne sera jamaus replacé automatiquement. - DEFAUT : centré (y compris scroll et resize)          backgroundColor: '#FF0000',   // Couleur à appliquer au fond transparent - DEFAUT : #000000          autoDetectCloseLinks: true,   // Détection automatique des liens pour fermer le popup - DEFAUT : non          backgroundZIndex: 500         // z-index du background transparent. à mettre tout en haut (le contenu du popup prendras cette valeur + 1000) - DEFAUT : 9999        }      */        // Définit l'élément à afficher dans le popup transparent      this.modalContent = $(content_id);        // Si le paramètre autoDetectCloseLinks a été passé et vaut true,    // on lance des observers sur le click sur tout les éléments ayant la classe "acs_modal_popup_close_link"      if ((this.isSet(this.params.autoDetectCloseLinks)) && (this.params.autoDetectCloseLinks == true)) {        this.modalContent.select('.acs_modal_popup_close_link').each(function(close_link) {          close_link.observe('click', this.close_popup.bind(this));        }.bind(this));      }        // Observe le resize pour MAJ les dimensions d'affichage      this.timerForResize = null;      Event.observe(window, 'resize', this.timerForUpdateDisplaySizeAndPositionModalContent.bind(this));    // Observe le scroll pour MAJ de la position du contenu      Event.observe(window, 'scroll', this.positionModalContent.bind(this));        // Paramètres du BG transparent      this.transparentBackgroundHeight = this.getPageHeight();      this.transparentBackgroundWidth = this.getPageWidth();      this.transparentBackgroundId = 'ModalBoxTransparentBackground';      this.transparentBackgroundColor = this.isSet(this.params.backgroundColor)  ? this.params.backgroundColor : '#000000';      this.transparentBackgroundZIndex = this.isSet(this.params.backgroundZIndex)  ? this.params.backgroundZIndex : 9999;;      this.transparentBackgroundTransparency = 0.5;      this.transparentBackgroundTransparencyBrowserSpecific = Math.round(this.transparentBackgroundTransparency * 100);        // Récupère les dimensions de la zone visible de la page      this.displayWidth = 0;      this.displayHeight = 0;        // Variable qui stoque si la popup est visible ou non    // Evite de s'embêter avec les observers quand c'est caché      this.popupIsVisible = false;        // Insère le BG transparent une fois pour toute lors de l'initialisation      this.insertTransparentBackground();  },    // Affiche la popup + le BG transparent  open_popup: function() {    this.popupIsVisible = true;        // BG      this.setBackgroundTransparent();      $(this.transparentBackgroundId).show();        // Content      this.updateDisplaySizeAndPositionModalContent();      this.modalContent.appear();  },    // Ferme la popup + le BG transparent  close_popup: function() {    this.popupIsVisible = false;        new Effect.Parallel(      [        $(this.transparentBackgroundId).fade(),         this.modalContent.fade()      ],       {         sync: true      }    );  },    // Timer lors du resize pour replacer le contenu à la bonne position  // Le timer est obligatoire à cause d'IE 6 qui lance l'event resize nimporte quand (boucles infinies)  // Comme le timer est annulé quand un nouvel évènement se produit, on ne le lance au final que lorsqu'il n'y a plus d'events en boucle  // /!\ Eviter une durée trop courte pour que les events ne se succèdent pas...  timerForUpdateDisplaySizeAndPositionModalContent: function() {    if (this.popupIsVisible == true) {      window.clearTimeout(this.timerForResize);      this.timerForResize = setTimeout(this.updateDisplaySizeAndPositionModalContent.bindAsEventListener(this), 200);    }  },    // Mets à jour les dimensions de l'affichage, et replace le contenu de la popup  updateDisplaySizeAndPositionModalContent: function() {    this.updateDisplaySize();    this.positionModalContent();  },    // Mets à jour les dimensions de la zone visible de la page  updateDisplaySize: function() {    var displayDimensions = document.viewport.getDimensions();        this.displayWidth = displayDimensions.width;    this.displayHeight = displayDimensions.height;  },    // Se charge de positionner le contenu de la popup  // Affiche le contenu centré dans la page, quel que soit le scroll;  positionModalContent: function() {    if (this.popupIsVisible == true) {      // Récupère les dimensions de la popup à afficher        var elementDimensions = this.modalContent.getDimensions();        var elementWidth = elementDimensions.width;        var elementHeight = elementDimensions.height;            // Récupère le scroll        var scrollDimensions = document.viewport.getScrollOffsets();        var scrollLeft = scrollDimensions.left;        var scrollTop = scrollDimensions.top;      // Calcule la position de l'élément        var elementPositionTop = this.isSet(this.params.contentPositionTop)  ? this.params.contentPositionTop : Math.round((this.displayHeight - elementHeight) / 2) + scrollTop;        var elementPositionLeft = this.isSet(this.params.contentPositionLeft)  ? this.params.contentPositionLeft : Math.round((this.displayWidth - elementWidth) / 2) + scrollLeft;            // Définit la position de l'élément en fonction des infos calculées au dessus        this.modalContent.setStyle({          zIndex: this.transparentBackgroundZIndex + 1000,          position: 'absolute',          top: elementPositionTop + 'px',          left: elementPositionLeft + 'px'        });    }  },    // Insére la trame grise transparente servant de fond au popup  insertTransparentBackground: function() {    // Si le BG n'existe pas encore, on le crée, et on l'insère immédiatement après le <body>    // Sinon, on ne fait rien (permets d'utiliser plusieurs popups différents sur une même page sans recréer à chaque fois ce BG)    if (!$(this.transparentBackgroundId)) {      // Créé l'élément avec les bons styles        var div_transparent_bg = new Element('div', {id: this.transparentBackgroundId});        div_transparent_bg.setStyle({          backgroundColor: this.transparentBackgroundColor,          margin: '0',          padding: '0',          border: '0',          width: this.transparentBackgroundWidth + 'px',          height: this.transparentBackgroundHeight + 'px',          zIndex: this.transparentBackgroundZIndex,          position: 'absolute',          top: 0,          left: 0,          display: 'none'        });            // Insère l'élément dans la page        $(document.body).insert({top: div_transparent_bg});    }  },    // Passe le background en transparent.  // A appeller avant chaque affichage de la popup (IE 6 reset la transparence à cause du fade())  setBackgroundTransparent: function() {    $(this.transparentBackgroundId).setStyle({        filter: 'alpha(opacity=' + this.transparentBackgroundTransparencyBrowserSpecific + ')',   /* IE */        '-moz-opacity': this.transparentBackgroundTransparency,                                   /* Old Mozilla & Netscape */        opacity: this.transparentBackgroundTransparency,                                          /* Standard CSS */        '-khtml-opacity': this.transparentBackgroundTransparency                                  /* Safari 1.x */      });  },  // Récupère la hauteur totale du contenu, quel que soit le navigateur  getPageHeight: function() {    // FFX      var height = document.documentElement.scrollHeight;    // IE 7 + Opera with "min window"      if(document.documentElement.clientHeight > height ) {        height  = document.documentElement.clientHeight;      }    // Safari      if(document.body.scrollHeight > height) {        height = document.body.scrollHeight;      }        return height;  },    // Récupère la largeur totale du contenu, quel que soit le navigateur  getPageWidth: function() {    // FFX      var width = document.documentElement.scrollWidth;    // IE 7 + Opera with "min window"      if(document.documentElement.clientWidth > width ) {        width  = document.documentElement.clientWidth;      }    // Safari      if(document.body.scrollWidth > width) {        width = document.body.scrollWidth;      }        return width;  },    // Teste si une variable est définie ou non  isSet: function(var_content) {    if (typeof(var_content) == 'undefined') {      return false;    } else {      return true;    }  }});