var nbrTime=1;
var index=0;

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

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

 function drawPicture() {
    if (imageList != null && imageList.length > 0) {
        document.write("<table cellpadding=\"0\" cellspacing=\"0\" width=\"270\"><tr height=\"100\"><td class=\"image\" valign=\"center\"><div id=\"diaporama_main\"><img src=\"/img_opodo/v6/diaporama_wait_hublot.gif\" border=\"0\"></div></td></tr><tr class=\"visuels\"><td valign=\"center\">");
        while(index<imageList.length)
            {
                if(index%6==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=\"250\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><td colspan=\"2\" valign=\"center\">";
                    myTable+="<table style=\"margin-left:10px;margin-top:10px;\">";
                }
                if(index%2==0) {
                    (imageList[(index+1)]==undefined) ? contentColumn="&nbsp;" : contentColumn="<div id=\"diaporama_prev_" + (index+1) + "\"><img src=\"/img_opodo/diaporama_wait.gif\" border=\"0\"></div>";
                    if (index > 5 && nbrTime > 1 && index%6==0) {
                        myTable+="<td width=\"85\" align=\"center\" valign=\"center\" colspan=\"2\"><a onclick=\"previousLayer("+nbrTime+");\" href=\"javascript:void(0)\"><img src=\"/img_opodo/diapo-less-g.gif\"  /></a></td><td valign=\"center\"><div id=\"diaporama_prev_" + index + "\"><img src=\"/img_opodo/diaporama_wait.gif\" border=\"0\"></div></td><td valign=\"center\">"+contentColumn+"</td>";
                    } else {
                        myTable+="<td valign=\"center\"><div id=\"diaporama_prev_" + index + "\"><img src=\"/img_opodo/diaporama_wait.gif\" border=\"0\"></div></td><td valign=\"center\">"+contentColumn+"</td>";
                    }
                }
                if(index%6==5 && nbrTime==1 && index!=(imageList.length-1)) {
                    myTable+="<td width=\"85\" align=\"center\" valign=\"center\"><a onclick=\"nextLayer("+nbrTime+");\" href=\"javascript:void(0)\"><img src=\"/img_opodo/diapo-more-g.gif\"  /></a></td></tr></table></tr></td></table></div>";
                    nbrTime++;
                    document.write(myTable);
                }
                else if(index%6==5 && nbrTime!=1 && index!=(imageList.length-1)) {
                    myTable+="<td width=\"85\" align=\"center\" valign=\"center\"><a onclick=\"nextLayer("+nbrTime+");\" href=\"javascript:void(0)\"><img src=\"/img_opodo/diapo-more-g.gif\"  /></a></td></tr></table></td></tr></table></div>";
                    nbrTime++;
                    document.write(myTable);
                }

                index++;
        }

        myTable+="</table></td><td width=\"85\" align=\"center\" valign=\"center\" colspan=\"2\">&nbsp;</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, 250, 250);
        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, 37, 37);

    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\" " + heightWith + 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;
}