var MoyenneLargeur = 340;
var MoyenneHauteur = 300;
var MiniatureLargeur = 50;
var MiniatureHauteur = 50;
var MiniatureMoinsLargeur = 25;
var MiniatureMoinsHauteur = 25;
var NombreVignettesVisibles = 5;

var calageLeft = 6; //ajuster position cadre zoom
var calageTop = -8; 

var waitbackgroundPosition = "50% 90px";

//zoom sur place
var Image_Zoom_height = 1000;
var Image_Zoom_width = 1000;
var Zoom_width = 340;
var Zoom_height = 300;
var Coef_reduc = 0;
var Image_width = 340;
var Image_height = 300;
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/loading100.gif)';
var Recentrage_Image_Zoom_top = 0;
var Recentrage_Image_Zoom_left = 0;

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 li');
    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 les onglets
    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 l'onglet 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 InfoDev(message) {
    if (!$('InfoDev')) { $$('body')[0].insert(new Element('div', { id: 'InfoDev', style: 'position: absolute; top:0; left:0; font-size:25px;' })); }
    $('InfoDev').innerHTML = message;
}

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();
    }
}