var MoyenneLargeur=305;
    var MoyenneHauteur=330;
    var MiniatureLargeur=70;
    var MiniatureHauteur=70;
    var MiniatureMoinsLargeur=35;
    var MiniatureMoinsHauteur=35;
    var NombreVignettesVisibles=3;

    var calageLeft = 25; //ajuster position cadre zoom
    var calageTop = -2; if (Prototype.Browser.IE) { calageTop = -2 }

    var waitbackgroundPosition = "50% 50%";

    //zoom sur place
    var Image_Zoom_height = 1080;
    var Image_Zoom_width = 1000;
    var Zoom_width = 305;
    var Zoom_height = 330;
    var Coef_reduc = 0;
    var Image_width = 305;
    var Image_height = 330;
    var cadre_width = parseInt(Image_width * Zoom_width / Image_Zoom_width);
    var cadre_height = parseInt(Image_height * Zoom_height / Image_Zoom_height);
    var offsetX = 0;
    var offsetY = 0;
    var wait = 'url(/Image/WEB/loading.gif)';
    var Recentrage_Image_Zoom_top = 0;
    var Recentrage_Image_Zoom_left = 0;

    var Video_width = 700;
    var Video_height = 400;

    var oMarker;

    function lancerGallery() {
        //caller les images moyennes
        var detailArticl_img = $$('.detailArticl_img img');
        for (j = 0; j != detailArticl_img.length; j++) {
            RedimImage(detailArticl_img[j], MoyenneLargeur, MoyenneHauteur);
        }
        //caller les images vignettes
        var detailArticl_Galr = $$('.detailArticl_Galr img');
        for (j = 0; j != detailArticl_Galr.length; j++) {
            if (detailArticl_Galr.length < NombreVignettesVisibles + 1) { RedimImage(detailArticl_Galr[j], MiniatureLargeur, MiniatureHauteur); } else { RedimImage(detailArticl_Galr[j], MiniatureMoinsLargeur, MiniatureMoinsHauteur); }
        }
        var detailArticl_Galr = $$('.detailArticl_Galr a');
        for (j = 0; j != detailArticl_Galr.length; j++) {
            if (detailArticl_Galr.length < NombreVignettesVisibles + 1) { detailArticl_Galr[j].style.width = MiniatureLargeur + "px"; detailArticl_Galr[j].style.height = MiniatureHauteur + "px"; } else { detailArticl_Galr[j].style.width = MiniatureMoinsLargeur + "px"; detailArticl_Galr[j].style.height = MiniatureMoinsHauteur + "px"; }
        }
        MontrerGalery(0);
        zoomIci_init();
    }


    function MontrerGalery(Num) {
        zoomIci_Out();
        //cacher tous 
        var detailArticl_img = $$('.detailArticl_img li');
        for (j = 0; j != detailArticl_img.length; j++) {
            detailArticl_img[j].style.display = "none";
        }
        var detailArticl_Galr = $$('.detailArticl_Galr li');
        for (j = 0; j != detailArticl_Galr.length; j++) {
            detailArticl_Galr[j].className = "";
        }
        //montrer selectionne
        detailArticl_img[Num].style.display = "block";
        detailArticl_Galr[Num].className = "selectImg";
    }

    function zoomIci_init() {
        try {
            $('zoomx-visuel').style.left = calageLeft + MoyenneLargeur + "px";
            $('zoomx-visuel').style.top = calageTop - MoyenneHauteur + "px";            

            if ($('detailArticl_img')) $('detailArticl_img').onmousemove = captureMouseMove;
            oMarker = $('RepereZoom');
            oMarker.style.width = cadre_width + "px";
            oMarker.style.height = cadre_height + "px";
        }
        catch (e)
        {
            //alert(e.message);
        }
    }
    
    function zoomIci_In(typeZoom) {
        //recherche url
        try {
		var URLImgZoom;
		var detailArticl_img = $$('.detailArticl_img li');
        for (j = 0; j != detailArticl_img.length; j++) {
            if (detailArticl_img[j].getStyle('display') == "block") {
                        detailArticl_img[j].className == "NoZoom" ? URLImgZoom = false : URLImgZoom = $$('.detailArticl_img li a')[j].href;
                }
        }
        if (typeZoom == 'XL') {
            if (URLImgZoom != false) {ZoomPleinePage(URLImgZoom); } /*zoom XL*/
        }
        else {
            if (URLImgZoom != false) { ImageChargee(URLImgZoom); }   /*sur place*/
        }
        }
        catch (e) {
            //alert(e.message);
        }
    }

    function ImageChargee(imgSrc) {
        var ImageXL = new Image();
        ImageXL.src = imgSrc;
        
        oMarker.style.display = "block";
        $("zoomx-visuel").style.display = "block";
        $("zoomx-visuel").style.backgroundImage = wait;
        
        if (ImageXL.width == 0) { //si l'image est nouvelle
            ImageXL.onload = function() { //apres chargement
                if (ImageXL.width > 1) {
                    // lancer zoom
                    $("zoomx-visuel").style.backgroundImage = 'url(' + imgSrc + ')';
                    Recentrage_Image_Zoom_top = (Image_Zoom_height - ImageXL.height) / 2; // preparer recentrage
                    Recentrage_Image_Zoom_left = (Image_Zoom_width - ImageXL.width) / 2;               
                }
                else {
                    //mettre au besoin un message Image Zoom non Dispo
                } }
        }
        else //image connue
        {
            if (ImageXL.width > 1) {
                // lancer zoom
                $("zoomx-visuel").style.backgroundImage = 'url(' + imgSrc + ')';
                Recentrage_Image_Zoom_top = (Image_Zoom_height - ImageXL.height) / 2; // preparer recentrage
                Recentrage_Image_Zoom_left = (Image_Zoom_width - ImageXL.width) / 2;       
            }
            else {
                //mettre au besoin un message Image Zoom non Dispo
            } 
        }
    }




    function captureMouseMove(e) {
    
        offsetX = Element.cumulativeOffset($('detailArticl_img'))[0];
        offsetY = Element.cumulativeOffset($('detailArticl_img'))[1];
        if ((Image_Zoom_height * 100 / Image_height) > (Image_Zoom_width * 100 / Image_width)) {
            Coef_reduc = Math.floor(Image_Zoom_height * 100 / Image_height) / 100;
        }
        else {
            Coef_reduc = Math.floor(Image_Zoom_width * 100 / Image_width) / 100;
        }
       
        //Position de la souris
        x = mouseposx - offsetX;
        y = mouseposy - offsetY;
        
        var markerX = 0;
        var markerY = 0;

        if (x <= (-1) || x >= (Image_width + cadre_width / 2) || y <= (-1) || y >= (Image_height + cadre_height / 2)) return; 
        
        if (x <= (-1 + cadre_width / 2)) {
            markerX = 0;
        } else if (x >= (Image_width - 2 - cadre_width / 2)) {
        markerX = (Image_width - 2 - cadre_width);
        } else {
        markerX = (x - cadre_width / 2);
        }
        
        if (y <= (-1 + cadre_height / 2)) {
            markerY = 0;
        } else if (y >= (Image_height - 2 - cadre_height / 2)) {
            markerY = (Image_height - 2 - cadre_height);
        } else {
            markerY = (y - cadre_height / 2);
        }

        x2 = -(parseInt(markerX)) * Coef_reduc + Recentrage_Image_Zoom_left;
        y2 = -(parseInt(markerY)) * Coef_reduc + Recentrage_Image_Zoom_top;

        oMarker.style.left = Number(markerX) + "px";
        oMarker.style.top = Number(markerY) + "px";

        if (document.getElementById("zoomx-visuel").style.backgroundImage != wait)
          document.getElementById('zoomx-visuel').style.backgroundPosition = x2 + "px " + y2 + "px"; 
        else
            document.getElementById('zoomx-visuel').style.backgroundPosition = waitbackgroundPosition;
    }

    function zoomIci_Out() {
        if ($("zoomx-visuel")) $("zoomx-visuel").style.display = "none";
        if ($("RepereZoom")) $("RepereZoom").style.display = "none";
    }

    function ZoomPleinePage(urlImage) {
        zoomIci_Out();
        if (Prototype.Browser.IE) { $$('html')[0].style.overflow = "hidden"; } else { document.body.style.overflow = "hidden"; }
        if ((!$('ZoomXL')) || ($('ZoomXL').innerHTML.length < 1)) {
            if (!$('ZoomXL')) {
                $$('body')[0].insert(new Element('div', { id: 'ZoomXL', style: 'position: absolute; top:' + Element.cumulativeOffset($('detailArticl_img'))[1] + 'px; left:' + Element.cumulativeOffset($('detailArticl_img'))[0] + 'px; width:' + MoyenneLargeur + 'px; height:' + MoyenneHauteur + 'px; display:none; + background-image:' + wait }));
            }
            else {
                $('ZoomXL').setStyle({ position: 'absolute',
                    top: Element.cumulativeOffset($('detailArticl_img'))[1] + 'px',
                    left: Element.cumulativeOffset($('detailArticl_img'))[0] + 'px',
                    width: MoyenneLargeur + 'px',
                    height: MoyenneHauteur + 'px',
                    display: 'none',
                    border: '1px solid #ccc',
                    backgroundImage: wait
                })
            }
            $('ZoomXL').appear({ duration: 0.8, afterFinish: function() {
                $('ZoomXL').style.backgroundImage = "none";
                new Effect.Move('ZoomXL', { x: 0, y: document.viewport.getScrollOffsets().top, mode: 'absolute' });
                var SizeScaleX = parseInt(document.viewport.getWidth()) / MoyenneLargeur * 100;
                var SizeScaleY = parseInt(document.viewport.getHeight()) / MoyenneHauteur * 100;
                new Effect.Scale('ZoomXL', SizeScaleX, { scaleX: true, scaleY: false, afterFinish: function() {
                    $('ZoomXL').style.width = document.viewport.getWidth() - 2 + "px";
                }
                });
                new Effect.Scale('ZoomXL', SizeScaleY, { scaleX: false, scaleY: true, afterFinish: function() {
                    $('ZoomXL').style.height = document.viewport.getHeight() - 2 + "px";
                    chargerBoutonFermer();
                }
                });
                $('ZoomXL').insert(new Element('img', { id: 'ImgXl', className: 'ImgXl', src: urlImage, style: 'display:none' }));
                $('ImgXl').appear({ duration: 1.5, afterFinish: function() {
                    new Draggable($('ImgXl'));
                    $('ImgXl').onmousedown = function() { this.className = 'ImgXlClick'; }
                    $('ImgXl').onmouseup = function() { this.className = 'ImgXl'; }
                    if (!$('ZoomXLBack')) { //garantir arrire plan blanc
                        $$('body')[0].insert(new Element('div', { id: 'ZoomXLBack' }));
                        $('ZoomXL').style.borderWidth = '0';
                    }
                    else {
                        $('ZoomXLBack').style.display = "block";
                        $('ZoomXL').style.borderWidth = '0';
                    }
                }
                });
            }
            });
        }
        else {
            $('ZoomXL').innerHTML = "<img src=" + urlImage + " class='ImgXl' id='ImgXl' />";
            new Draggable($('ImgXl'));
            $('ImgXl').onmousedown = function() { this.className = 'ImgXlClick'; }
            $('ImgXl').onmouseup = function() { this.className = 'ImgXl'; }
        }
    }

    function chargerBoutonFermer() {
    
        //bouton
        if (!$('ZoomXLClose')) {
            $$('body')[0].insert(new Element('div', { id: 'ZoomXLClose', style: 'display: none;'})); 
            }
        $('ZoomXLClose').onclick = function() { fermerZoomXXL(); }
        $('ZoomXLClose').style.display = "block";
        $('ZoomXLClose').style.top = document.viewport.getScrollOffsets().top + 5 + 'px';      
        
        //vignettes
        if (!$('ZoomXLVignettes')) {
            $$('body')[0].insert(new Element('div', { id: 'ZoomXLVignettes', style: 'display: none;' }));
        }
        $('ZoomXLVignettes').innerHTML = $('detailArticl_Galr').innerHTML;
        $('ZoomXLVignettes').style.display = "block";
        $('ZoomXLVignettes').style.top = document.viewport.getScrollOffsets().top + 20 + 'px';

        listenKeyXL(); //fermer au clavier
        
    }

    function fermerZoomXXL() {
        $('ZoomXL').fade({ duration: 0.3, afterFinish: function() {
            $('ZoomXL').innerHTML = "";
        }
        });
        $('ZoomXLBack').style.display = "none";
        $('ZoomXLVignettes').style.display = "none";
        $('ZoomXLClose').style.display = "none";
        if (Prototype.Browser.IE) { $$('html')[0].style.overflow = "auto"; } else { document.body.style.overflow = "auto"; }
    }

    function listenKeyXL() { document.onkeypress = getKeyXL; }

    function getKeyXL(e) {
        if (e == null) { // ie
            keycode = event.keyCode;
        } else { // mozilla
        keycode = e.keyCode;
        }
        if (keycode == 27) {
            fermerZoomXXL();
        }
    }

    function VideoIci(video) {
        zoomIci_Out();
        if (!$('VideoIci')) { $$('.detailArticl_RefZoom')[0].insert(new Element('div', { id: 'VideoIci', style: 'position: absolute; top:-' + MoyenneHauteur + 'px; left:0; width:' + MoyenneLargeur + 'px; height:' + MoyenneHauteur + 'px; display:none; + background-image:' + wait })); }
        else {
            $('VideoIci').setStyle({
                width: MoyenneLargeur + 'px',
                height: MoyenneHauteur + 'px',
                backgroundImage: wait
            })
        }
        $('VideoIci').appear({ duration: 0.8, afterFinish: function() {
            $('VideoIci').style.backgroundImage = "none";
            var SizeScaleX = parseInt(Video_width / MoyenneLargeur * 100);
            var SizeScaleY = parseInt(Video_height / MoyenneHauteur * 100);
            new Effect.Scale('VideoIci', SizeScaleX, { scaleX: true, scaleY: false, afterFinish: function() {
                $('VideoIci').style.width = Video_width + "px";
            }
            });
            new Effect.Scale('VideoIci', SizeScaleY, { scaleX: false, scaleY: true, afterFinish: function() {
                $('VideoIci').style.height = Video_height + "px";
                //bouton
                if (!$('VideoIciClose')) {
                    $$('.detailArticl_RefZoom')[0].insert(new Element('div', { id: 'VideoIciClose', style: 'display: none;' }));
                }
                $('VideoIciClose').onclick = function() { $('VideoIci').style.display = "none"; this.style.display = "none"; }
                $('VideoIciClose').style.display = "block";
                $('VideoIciClose').style.top = - MoyenneHauteur - 5 + 'px';
                $('VideoIciClose').style.left = Video_width + 2 + 'px';
            }
            });
            var so = new SWFObject('/flash/Player.swf', 'flashVideo', Video_width, Video_height, '9');
            so.addParam('allowscriptaccess', 'always');
            so.addParam('allowfullscreen', 'true');
            so.addVariable("file", "/File.aspx?FileName=" + video);
            so.addVariable("displayclick", "fullscreen");
            so.addVariable('autostart', 'true');
            so.addVariable('controlbar', 'over');
            so.write('VideoIci');

        }
        });
    }