function boxPicture(img, id)
{
	numeroCourant = id;
	var tbl = document.createElement("TABLE");
	tbl.id = 'fenetreTemporairePourPictureBox';
    tbl.style.background = 'url(images/fondT.png) repeat';
    tbl.style.position = 'fixed';
    tbl.style.top = '0px';
    tbl.style.left = '0px';
    tbl.style.width = '100%';
    tbl.style.height = '100%';
    var tbody = document.createElement("TBODY");
    var tr = document.createElement("TR");
    var td = document.createElement("TD");
    td.align = 'center';
    td.innerHTML = 
	'<table><tr>' +
	'<td><img src="images/H_fleche_g.png" style="cursor:pointer" onmouseover="this.src=\'images/H_fleche_g_h.png\'" onmouseout="this.src=\'images/H_fleche_g.png\'" onclick="privious()" /></td>' +
	
		'<td><table cellSpacing="0" cellPadding="0">' +
			'<tr>' +
				'<td style="background:#ffffff">'+
					'<div style="position:relative">' +
						'<img id="imageTemporairePourPictureBox" src="'+img.src+'" title="'+img.title+'" alt="'+img.alt+'" width="'+img.width+'" height="'+img.height+'" />' +
						
						'<div style="position:absolute;top:0px;right:0px;width:65px;height:10px;" >' +
							'<img src="images/anglePictureBox.png" />' +
							/*'<img src="images/agrandir.png" style="cursor:pointer" onclick="Agrandir(this.parentNode.parentNode.firstChild)" onmouseover="this.src=\'images/agrandir_h.png\'" onmouseout="this.src=\'images/agrandir.png\'" />' +*/
							'<img src="images/fermer.png" style="cursor:pointer" onclick="document.body.removeChild(document.getElementById(\'fenetreTemporairePourPictureBox\'))" onmouseover="this.src=\'images/fermer_h.png\'" onmouseout="this.src=\'images/fermer.png\'" />' +
						'</div>' +
					'</div>' +
				'</td>' +
				'<td valign="top">' +
					'<img src="images/ombreAngleHD.png" />' +
					'<div style="position:relative;top:0px;bottom:0px;"><div id="ombreTemporairePourPictureBoxHauteur" style="position:absolute;width:10px;top:0px;left:0px;height:'+(img.height-10)+'px;background:url(images/ombreVertical.png) repeat-y;"></div></div>' +
				'</td>' +
			'</tr>' +
			'<tr>' +
				'<td valign="top" align="left">' +
					'<img src="images/ombreAngleBG.png" />' +
					'<div style="position:relative;top:-10px;left:10px;right:0px;"><div id="ombreTemporairePourPictureBoxLargeur" style="position:absolute;width:'+(img.width-10)+'px;top:0px;left:0px;height:10px;background:url(images/ombreHorizontale.png) repeat-x;"></div></div>' +
				'</td>' +
				'<td><img src="images/ombreAngleBD.png" /></td>' +
			'</tr>' +
		'</table></td>' +
		'<td><img src="images/H_fleche_d.png" style="cursor:pointer" onmouseover="this.src=\'images/H_fleche_d_h.png\'" onmouseout="this.src=\'images/H_fleche_d.png\'" onclick="next()" /></td>' +
		'</tr></table>';
	
	tr.appendChild(td);
    tbody.appendChild(tr);
    tbl.appendChild(tbody);
    document.body.appendChild(tbl);
}

var numeroCourant;

function next()
{
	numeroCourant = (numeroCourant+1==imgProduct.length?0:numeroCourant+1);
	afficheImg(imgProduct[numeroCourant]);
}

function privious()
{
	numeroCourant = (numeroCourant-1==-1?imgProduct.length-1:numeroCourant-1);
	afficheImg(imgProduct[numeroCourant]);
}

function afficheImg(img)
{
	conteneur = document.getElementById('imageTemporairePourPictureBox');
	conteneur.src = img.src;
	conteneur.title = img.title;
	conteneur.height = img.height;
	conteneur.width = img.width;
	
	document.getElementById('ombreTemporairePourPictureBoxHauteur').style.height = (img.height - 10)+'px';
	document.getElementById('ombreTemporairePourPictureBoxLargeur').style.width = (img.width - 10)+'px';
}

/*function Agrandir(img)
{
	window.open(img.src, 'agrandissement',"menubar=no, status=no, scrollbars=no, menubar=no");
}*/