Clusterer.PopUp = function (cluster) {

    var clusterer = cluster.clusterer;
    n = 6; // NOMBRE DE CPG PAR PAGES ICI
    html = '<div id="Gmap">';
    nbC = cluster.markerCount;
    nbP = Math.ceil(cluster.markerCount / n);
    cpt = 0;
    for (i = cpt; i < nbP; i++) {
        html += "<div class ='gpage' id='page_" + i + "'";
        if (i > 0) {
            html += " style='display:none'>";
        }
        else {
            html += ">";
        }
        limite = cpt + n;
        for (j = cpt; j < limite && j < cluster.markerCount; j++) {
            marker = mygmap.markerCamps[j].infos;
            html += "<img style='float:left' height='15.5' width='10.5' src='./style/skin3/images/markers.png'/>";
            nom = marker.nom.toLowerCase();
            nom = nom.slice(0, 1).toUpperCase() + nom.slice(1);
            /* mise en forme idE = 3728 - nom trop long */
            if (marker.num_camp == 3728) { nom = nom.replace("du", ""); }

            html += "<a style='float:left;display:block;margin-left:5px' href='plus_infos.aspx?lg=" + language + "&idM=" + engineNum + "&idE=" + marker.num_camp + "' target='_self'>" + nom + "</a><div style='clear:both'></div>";
            cpt++;
        }

        if (i == 0) {
            html += "<div id='previous' style='display:none'>&lt;&lt; previous</div>";
            if (nbP > 1) {
                suiv = i + 1;
                html += "<div id='next' style='margin-top:2px;' onClick='display(" + suiv + "," + nbP + ")'>next &gt;&gt;</div>";
            }
            else {
                html += "<div id='next' style='display:none'>next &gt;&gt;</div>";
            }
        }

        if ((i < nbP - 1) && (i > 0)) {
            prec = i - 1;
            suiv = i + 1;
            html += "<div id='previous' style='display:block;float:left;margin-top:3px;' onClick='display(" + prec + "," + nbP + ")'>&lt;&lt; previous</div>";
            html += "<div id='next' style='display:block;float:left;margin-top:3px;margin-left:100px' onClick='display(" + suiv + "," + nbP + ")'>next &gt;&gt;</div>";
        }
        if ((i == nbP - 1) && (nbC > n)) {
            prec = i - 1;
            html += "<div id='previous' style='margin-top:3px;' onClick='display(" + prec + "," + nbP + ")'>&lt;&lt; previous</div>";
            html += "<div id='next' style='display:none'>next &gt;&gt;</div>";
        }

        html += "</div>";
    }
    html += "</div>";

    clusterer.map.closeInfoWindow();
    cluster.marker.openInfoWindowHtml(html);
    clusterer.poppedUpCluster = cluster;
};

function display(numP, nbP ) {


    $$(".gpage").each(function (elt) {
        if (elt.id == 'page_' + numP ) {
            elt.style.display = "";
        }
        else {
            elt.style.display = "none";
        }
    });

    if (numP == 0) {
        $('previous').style.display = "none";

        if (nbP > 1) {
            $('next').style.display = "margin-top:3px;";
            $('next').onClick = "display(" + numP + 1 + ");";
        }
        else {
            $('next').style.display = "none";
        }
    }
   

    if ((numP < nbP)&&(numP > 0)) {
        $('previous').setStyle = "display:block;float:left;margin-top:3px;";
        $('previous').onClick = "display(" + numP - 1 + ");";
        $('next').setStyle = "display:block;float:left;margin-top:3px;margin-left:100px;";
        $('next').onClick = "display(" + numP + 1 + ");";
    }

    if ((numP == nbP) && (nbP == 1)) {
        $('previous').style.display = "none";
        $('next').setStyle = "display:'';margin-top:3px;";
        $('next').onClick = "display(" + numP + 1 + ");";
    }

    if ((numP == nbP) && (nbP != 1)) {
        $('next').style.display = "none";
        $('previous').setStyle = "display:'';margin-top:3px;";
        $('previous').onClick = "display(" + numP - 1 + ");";
    }  
}


//*********************************
// code base ok
/*

if (marker.getIcon().smallImage != null) {
                reshtml += '<img src="' + marker.getIcon().smallImage + '">';
            } else {
                reshtml += '<img src="' + marker.getIcon().image + '" width="' + (marker.getIcon().iconSize.width / 2) + '" height="' + (marker.getIcon().iconSize.height / 2) + '">';
            }

            var idEstab = "";
            for (var j = 0; j < mygmap.markerCamps.length; ++j) {
                var info = mygmap.markerCamps[j].infos;
                if (info.nom == marker.title) idEstab = info.num_camp;
            }

            reshtml += "</td><td id='camp" + i + "'><a href='plus_infos.aspx?lg=" + language + "&idM=" + engineNum + "&idE=" + idEstab + "' target='_self'>" + marker.title + "</a></td></tr>";


Clusterer.PopUp = function (cluster) {
var clusterer = cluster.clusterer;
var html = '<div><table width="300">';
var n = 0;

for (var i = 0; i < cluster.markers.length; ++i) {
var marker = cluster.markers[i];
if (marker != null) {
++n;
html += "<tr><td>";
if (marker.getIcon().smallImage != null) {
html += '<img src="' + marker.getIcon().smallImage + '">';
} else {
html += '<img src="' + marker.getIcon().image + '" width="' + (marker.getIcon().iconSize.width / 2) + '" height="' + (marker.getIcon().iconSize.height / 2) + '">';
}
var idEstab = "";
for (var j = 0; j < mygmap.markerCamps.length; ++j) {
var info = mygmap.markerCamps[j].infos;
if (info.nom == marker.title) idEstab = info.num_camp;
}
html += "</td><td><a href='plus_infos.aspx?lg=" + language + "&idM=" + engineNum + "&idE=" + idEstab + "' target='_self'>" + marker.title + "</td></tr>";
if (n == clusterer.maxLinesPerInfoBox - 1 && cluster.markerCount > clusterer.maxLinesPerInfoBox) {
html += '<tr><td colspan="2">...and ' + (cluster.markerCount - n) + " more</td></tr>";
break;
}
}
}

html += "</table></div>";
clusterer.map.closeInfoWindow();
cluster.marker.openInfoWindowHtml(html);
clusterer.poppedUpCluster = cluster;
};
*/