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() {
 	var bandeAnnonce = '';
 	if (urlBA != '' || urlBA == null) {
 		bandeAnnonce = "<table id=\"bande-annonce\"><tr><td><a href=\"#\" onclick=\"window.open('"+urlBA+"','','height=450,width=800,left=300,scrollbars=no');\">Acc&eacute;der &agrave; la Bande Annonce</a></td><td><a href=\"#\" onclick=\"window.open('"+urlBA+"','','height=450,width=800,left=300,scrollbars=no');\"><img src=\"/CS/images/logo-BA.gif\" alt=\"BA\" /></a></td></tr></table>";
 	}
 	
    if (imageList != null && imageList.length > 0) {
        document.write("<table cellpadding=\"0\" cellspacing=\"0\" width=\"750\"><tr height=\"300\"><td class=\"image\" valign=\"center\"><div id=\"diaporama_main\"><img src=\"/CS/images/diaporama_wait.gif\" border=\"0\"></div></td><td class=\"visuels\">"+bandeAnnonce);
        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\" height=\"250\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><td colspan=\"2\" valign=\"center\">";
                    myTable+="<table style=\"margin-left:5px;\">";
                }
                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>";
                    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></tr><tr>";
                    
                }
                if(index%4==3 && nbrTime==1 && index!=(imageList.length-1)) {
                    myTable+="</table></td></tr><tr><td width=\"85\" align=\"center\" valign=\"center\">&nbsp;</td><td width=\"85\" align=\"center\" valign=\"center\"><a onclick=\"nextLayer("+nbrTime+");\" href=\"javascript:void(0)\">Suivant <img src=\"/CS/images/fleche-right.gif\"/></a></td></tr></table></div>";
                    nbrTime++;
                    document.write(myTable);
                }
                else if(index%4==3 && nbrTime!=1 && index!=(imageList.length-1)) {
                    myTable+="</table></td></tr><tr><td width=\"85\" align=\"center\" valign=\"center\"><a onclick=\"previousLayer("+nbrTime+");\" href=\"javascript:void(0)\"><img src=\"/CS/images/fleche-left.gif\"/> Pr&eacute;c&eacute;dent</a></td><td width=\"85\" align=\"center\" valign=\"center\"><a onclick=\"nextLayer("+nbrTime+");\" href=\"javascript:void(0)\">Suivant <img src=\"/CS/images/fleche-right.gif\"/></a></td></tr></table></div>";
                    nbrTime++;
                    document.write(myTable);
                }
                index++;
        }
		if (imageList.length > 4) {
        	myTable+="<tr><td><a onclick=\"previousLayer("+nbrTime+");\" href=\"javascript:void(0)\"><img src=\"/CS/images/fleche-left.gif\"/> Pr&eacute;c&eacute;dent</a></td></tr></table></td><td width=\"85\" align=\"center\" valign=\"center\" colspan=\"2\">&nbsp;</td></tr></table></div>";
		} else {
			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, 398, 275);
        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, 150, 150);

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