var nbrTime=1;
var index=0;

var unknownImage = new Image();
unknownImage.src="/CS/images/diapoSmallNoImg.gif";

var unknownMainImage = new Image();
unknownMainImage.src="/CS/images/diapoMainNoImg.gif";

 function drawPicture() {
    if (imageList != null && imageList.length > 0) {
        document.write("<table cellpadding=\"0\" cellspacing=\"0\" width=\"385\"><tr height=\"224\"><td class=\"image\" valign=\"center\"><div id=\"diaporama_main\"><img src=\"/CS/images/diaporama_wait.gif\" border=\"0\"></div></td></tr><tr class=\"visuels\"><td valign=\"center\">");
        while(index<imageList.length)
            {
                if(index%4==0) {
                    (nbrTime==1) ? myTable="<div id=\""+nbrTime+"\" style=\"width:190px; margin-left:-8px; display:block\">" : myTable="<div id=\""+nbrTime+"\" style=\"width:190px; margin-left:-8px; display:none\">";
                    myTable+="<table width=\"190\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><td colspan=\"2\" valign=\"center\">";
                    myTable+="<table style=\"margin-left:5px;\">";
                }
                if(index == 0) {
                    myTable+= "<td width=\"85\" align=\"center\" valign=\"center\" colspan=\"2\"><img src=\"/CS/images/diapo-less-g.gif\" alt=\"Précédent\" /></td>"
                }

                if(index%2==0) {
                    (imageList[(index+1)]==undefined) ? contentColumn="&nbsp;" : contentColumn="<div id=\"diaporama_prev_" + (index+1) + "\"><img src=\"/CS/images/diaporama_wait.gif\" border=\"0\"></div>";
                    if (index > 3 && nbrTime > 1 && index%4==0) {
                        myTable+="<td width=\"85\" align=\"center\" valign=\"center\" colspan=\"2\"><a onclick=\"previousLayer("+nbrTime+");\" href=\"javascript:void(0)\"><img src=\"/CS/images/diapo-less.gif\" /></a></td><td valign=\"center\"><div id=\"diaporama_prev_" + index + "\"><img src=\"/CS/images/diaporama_wait.gif\" border=\"0\"></div></td><td valign=\"center\">"+contentColumn+"</td>";
                    } else {
                        myTable+="<td valign=\"center\"><div id=\"diaporama_prev_" + index + "\"><img src=\"/CS/images/diaporama_wait.gif\" border=\"0\"></div></td><td valign=\"center\">"+contentColumn+"</td>";
                    }
                }
                if(index%4==3 && nbrTime==1 && index!=(imageList.length-1)) {
                    myTable+="</table></td><td width=\"85\" align=\"center\" valign=\"center\">&nbsp;</td><td width=\"85\" align=\"center\" valign=\"center\"><a onclick=\"nextLayer("+nbrTime+");\" href=\"javascript:void(0)\"><img src=\"CS/images/diapo-more.gif\" alt=\"Suivant\" /></a></td></tr></table></div>";
                    nbrTime++;
                    document.write(myTable);
                }
                else if(index%4==3 && nbrTime!=1 && index!=(imageList.length-1)) {
                    myTable+="</table width=\"85\"></td><td>&nbsp;</td><td width=\"85\" align=\"center\" valign=\"center\"><a onclick=\"nextLayer("+nbrTime+");\" href=\"javascript:void(0)\"><img src=\"CS/images/diapo-more.gif\" alt=\"Suivant\" /></a></td></tr></table></div>";
                    nbrTime++;
                    document.write(myTable);
                }

                index++;
        }

        myTable+="</table></td><td width=\"85\" align=\"center\" valign=\"center\" colspan=\"2\"><img src=\"CS/images/diapo-more-g.gif\" alt=\"Suivant\" /></td></tr></table></div>";

        document.write(myTable + "</td></tr></table>");
    }
}


function previousLayer(thisID) {
    document.getElementById(thisID).style.display='none';
    document.getElementById(thisID-1).style.display='block';
}

function nextLayer(thisID) {
    document.getElementById(thisID).style.display='none';
    document.getElementById(thisID+1).style.display='block';
}

function changeImage(imgObjIndex) {

        var imgObj = unknownMainImage;

        if (imgObjIndex != null) {
            imgObj = imageList[imgObjIndex];
        }

        var heightWith = getConstraintsSize(imgObj, 385, 224);
        document.getElementById("diaporama_main").innerHTML = "<img src=\"" + imgObj.src + "\" " + heightWith + "  alt=\"\" title=\"\" />";
}

function displaySmallPreview(id, imgObj, withLink) {
    // alert(id + " - " + imgObj.src + " - " + "diaporama_prev_" + id + " - " + document.getElementById("diaporama_prev_" + id).innerHTML);
    // alert("avant = " + imgObj.width + " - " + imgObj.height);
    // var heightWith = getConstraintsSize(imgObj, 60, 60);
     var smallHeight = "height=\"" + 50 + "px\"";
     var smallWidth =  "width=\"" + 78 + "px\"";


    var linkStr = "";
    if (withLink) {
        linkStr = " onclick=\"changeImage("+id+")\" onmouseover=\"this.style.cursor='pointer';\"";
    }

    document.getElementById("diaporama_prev_" + id).innerHTML = "<img src=\""+imgObj.src+"\" border=\"0\" " + smallHeight + smallWidth + linkStr + ">";
}

function getConstraintsSize(imgObj, consWidth, consHeight) {

    var dispWidth = "";
    var dispHeight = "";
    // no constraints
    if (consWidth == null && consHeight == null) {
        return "";
    }

    // only one dim
    if (consWidth == null) {
        // height
        if (imgObj.height > consHeight) {
            dispHeight = " height=\"" + consHeight + "px\" ";
        }
        return dispWidth + dispHeight;
    }
    if (consHeight == null) {
        // width
        if (imgObj.width > consWidth) {
            dispWidth = " width=\"" + consWidth + "px\" ";
        }
        return dispWidth + dispHeight;
    }

    // need ratio
    var ratio = imgObj.width/imgObj.height;
    var constraintsRatio = consWidth/consHeight;


    if (ratio > constraintsRatio) {
        // width
        if (imgObj.width > consWidth) {
            dispWidth = " width=\"" + consWidth + "px\" ";
        }
    } else {
        // height
        if (imgObj.height > consHeight) {
            dispHeight = " height=\"" + consHeight + "px\" ";
        }
    }
    return dispWidth + dispHeight;
}

function redirectEncre(encre) {
    var url = document.URL;
    if (url.indexOf("#") != -1) {
        url = url.substring(0, url.indexOf("#"));
    }
    location.href = url + encre;
}