var etat= false;
var tabH =new Array()
var tabV =new Array()
nom_objet = new Array(
			"Ecole d'art|http://www.cyberhal.com/collection_01.php",
			"Cabinet de curiosité|http://www.cyberhal.com/collection_02.php",
			"Rhapsodie|http://www.cyberhal.com/collection_03.php",
			"Merveilles de l'Avent|http://www.cyberhal.com/collection_04.php",
			"Jardin d'hiver|http://www.cyberhal.com/collection_05.php",
			"Stella mineralis|http://www.cyberhal.com/collection_06.php",
			"Célébrations|http://www.cyberhal.com/collection_07.php",
			"Classiques flambeaux|http://www.cyberhal.com/collection_08.php",
			"Confitures|http://www.cyberhal.com/collection_09.php",
			"Basics parfumés|http://www.cyberhal.com/collection_10.php",
			"Ecole d'art|http://www.cyberhal.com/collection_01.php",
			"Cabinet de curiosité|http://www.cyberhal.com/collection_02.php",
			"Rhapsodie|http://www.cyberhal.com/collection_03.php",
			"Merveilles de l'Avent|http://www.cyberhal.com/collection_04.php",
			"Jardin d'hiver|http://www.cyberhal.com/collection_05.php",
			"Stella mineralis|http://www.cyberhal.com/collection_06.php",
			"Célébrations|http://www.cyberhal.com/collection_07.php",
			"Classiques flambeaux|http://www.cyberhal.com/collection_08.php",
			"Confitures|http://www.cyberhal.com/collection_09.php",
			"Basics parfumés|http://www.cyberhal.com/collection_10.php",
			"Ecole d'art|http://www.cyberhal.com/collection_01.php",
			"Cabinet de curiosité|http://www.cyberhal.com/collection_02.php",
			"Rhapsodie|http://www.cyberhal.com/collection_03.php",
			"Merveilles de l'Avent|http://www.cyberhal.com/collection_04.php",
			"Jardin d'hiver|http://www.cyberhal.com/collection_05.php"
			);


var img_width=70
var img_height=56
var left_x = 0
var top_y = 0
var sizeMos = "5,5";
var positionMos = "200%,200%";
var ecart= 0
var num_imgs=25
var rotPath="";
var tiret  = "-" ;
var sep=";";
var e_out;

window.onload = mainCanvasLoaded;

function mainCanvasLoaded() {

	imagesHolder = document.getElementById('canvas');
	buildImages();
}


function buildImages(val) { 

	imagesHolder.innerHTML="";

	for(i=0;i<num_imgs;i++) {
	
	cur_img = val == undefined ? i+".jpg" : val ;
	img_url="images/"+cur_img;		 

	var vrect = document.createElement('v:rect');
    vrect.id = "rect_"+i;
	vrect.title = nom_objet[i].split("|")[0];
	vrect.name = nom_objet[i].split("|")[1]; 
	vrect.coordsize = 21600,21600;
    vrect.style.position = "absolute";
	vrect.style.zoom ="-1";
	vrect.style.filter = "progid:DXImageTransform.Microsoft.MotionBlur(strength=3, direction=45)"; 
	vrect.style.left ="0";
	vrect.style.top ="0";
    vrect.style.width = img_width;
    vrect.style.height = img_height;
    vrect.filled="t";
    vrect.fillcolor="black";
	vrect.stroked="t";
    vrect.strokecolor="white";
    vrect.strokeweight="0";
	
    var fill = document.createElement('v:fill');
	fill.color2="black";
    fill.opacity = "0";
	fill.rotate = "t"
	fill.angle = 0;
	fill.type = "frame";
	fill.src = img_url;
	fill.aspect = "atLeast";
	fill.size = sizeMos;
	fill.position = positionMos;
    vrect.appendChild(fill);

	var extru = document.createElement('v:extrusion');
	extru.on="f" ;
	extru.type="perspective" ;
	extru.color="#ffffff" ;
	extru.rotationAngle="0-0" ;
	extru.backdepth="3" ;
	extru.skewangle="0" ;
	vrect.appendChild(extru);

	var aniMos1 = document.createElement('t:ANIMATE'); 
	aniMos1.id= "ani1_"+i;
	aniMos1.className= "time" ;
	aniMos1.fill="hold" ;
	aniMos1.attributeName = "filters[0].strength"; 
	aniMos1.targetElement="rect_"+i;
	aniMos1.begin= "0" ;
	aniMos1.dur= "1" ;
	aniMos1.autoreverse="true";
	aniMos1.from =0;
	aniMos1.to = 5;
	vrect.appendChild(aniMos1);

	var aniMos2 = document.createElement('t:ANIMATE'); 
	aniMos2.id= "ani2_"+i;
	aniMos2.className= "time" ;
	aniMos2.fill="hold" ;
	aniMos2.attributeName = "fill.opacity"; 
	aniMos2.targetElement="rect_"+i;
	aniMos2.begin= "0" ;
	aniMos2.dur= "2" ;
	aniMos2.autoreverse="false";
	aniMos2.from = "0";
	aniMos2.to = "1";
	vrect.appendChild(aniMos2);

	var aniMos3 = document.createElement('t:ANIMATE'); 
	aniMos3.id= "ani3_"+i;
	aniMos3.className= "time" ;
	aniMos3.fill="hold" ;
	aniMos3.attributeName = "style.zoom"; 
	aniMos3.targetElement="rect_"+i;
	aniMos3.begin= "0" ;
	aniMos3.dur= "1" ;
	aniMos3.autoreverse="false";
	aniMos3.from = "0.8";
	aniMos3.to = 1;
	vrect.appendChild(aniMos3);

	var aniMos4 = document.createElement('t:ANIMATE'); 
	aniMos4.id= "ani4_"+i;
	aniMos4.className= "time" ;
	aniMos4.fill="hold" ;
	aniMos4.attributeName = "stroke.strokeweight";
	aniMos4.targetElement="rect_"+i;
	aniMos4.begin= "0" ;
	aniMos4.dur= "0.6" ;
	aniMos4.autoreverse="true";
	aniMos4.from = "0";
	aniMos4.to = 3;
	aniMos4.decelerate = "1";
	vrect.appendChild(aniMos4);

	imagesHolder.appendChild(vrect);

	vrect.attachEvent("onmouseover", imageOver );
	vrect.attachEvent("onmouseout", imageOut );
	vrect.attachEvent("onclick", imageDown );
	

	}

	if ( val == undefined ) { mosaicInit() } else {	mosaicItems() }
}

function mosaicInit() {

	dimH = parseInt(document.getElementById("rect_"+0).style.height);
	dimW = parseInt(document.getElementById("rect_"+0).style.width);


	cptTab = 0;
	tabH[0] = "0%";
	tabH[1] = "0%";
	tabH[2] = "0%";
	tabH[3] = "0%";
	tabH[4] = "0%";

	
	for(i=0;i<5;i++) {

	if (i > 0 ) {
		for(j=0; j<5; j++) {
		document.getElementById("rect_"+j).style.top = top_y;
		document.getElementById("rect_"+j).style.left = left_x ;
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[0];
		document.getElementById("rect_"+j).fill.size = "0,0";
		document.getElementById("rect_"+j).fill.position = "0,0";
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++		
		} 
		left_x = 0;
		cptTab=0;
		
	}
	if (i > 1 ) {
		for(j=5; j<10; j++) {
		document.getElementById("rect_"+j).style.top = (dimH+ecart)*1;
		document.getElementById("rect_"+j).style.left = left_x ;
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[1];
		document.getElementById("rect_"+j).fill.size = "0,0";
		document.getElementById("rect_"+j).fill.position = "0,0";
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++		
		} 
		left_x = 0;
		cptTab=0;
	}
	if (i > 2 ) {
		for(j=10; j<15; j++) {
		document.getElementById("rect_"+j).style.top = (dimH+ecart)*2;
		document.getElementById("rect_"+j).style.left = left_x ;
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[2];
		document.getElementById("rect_"+j).fill.size = "0,0";
		document.getElementById("rect_"+j).fill.position = "0,0";
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++		
		} 
		left_x = 0;
		cptTab=0;
	}
	if (i > 3 ) {
		for(j=15; j<20; j++) {
		document.getElementById("rect_"+j).style.top = (dimH+ecart)*3;
		document.getElementById("rect_"+j).style.left = left_x ;
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[3];
		document.getElementById("rect_"+j).fill.size = "0,0";
		document.getElementById("rect_"+j).fill.position = "0,0";
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++		
		} 
		left_x = 0;
		cptTab=0;
	}
	if (i >= 4 ) {
		for(j=20; j<25; j++) {
		document.getElementById("rect_"+j).style.top = (dimH+ecart)*4;
		document.getElementById("rect_"+j).style.left = left_x ;
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[4];
		document.getElementById("rect_"+j).fill.size = "0,0";
		document.getElementById("rect_"+j).fill.position = "0,0";
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++		
		} 
		left_x = 0;
		cptTab=0;
	}	
	
	}
	

}


function mosaicItems() {

	dimH = parseInt(document.getElementById("rect_"+0).style.height);
	dimW = parseInt(document.getElementById("rect_"+0).style.width);

	cptTab = 0;
	tabH[0] = "0%";
	tabH[1] = "20%";
	tabH[2] = "40%";
	tabH[3] = "60%";
	tabH[4] = "80%";

	
	for(i=0;i<5;i++) {

	if (i > 0 ) {
		for(j=0; j<5; j++) {
		document.getElementById("rect_"+j).style.top = top_y;
		document.getElementById("rect_"+j).style.left = left_x ;
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[0];
		document.getElementById("rect_"+j).fill.size = "5,5";
		document.getElementById("rect_"+j).fill.position = "200%,200%";
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++		
		} 
		left_x = 0;
		cptTab=0;
	}
	if (i > 1 ) {
		for(j=5; j<10; j++) {
		document.getElementById("rect_"+j).style.top = (dimH+ecart)*1;
		document.getElementById("rect_"+j).style.left = left_x ;
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[1];
		document.getElementById("rect_"+j).fill.size = "5,5";
		document.getElementById("rect_"+j).fill.position = "200%,200%";
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++		
		} 
		left_x = 0;
		cptTab=0;
	}
	if (i > 2 ) {
		for(j=10; j<15; j++) {
		document.getElementById("rect_"+j).style.top = (dimH+ecart)*2;
		document.getElementById("rect_"+j).style.left = left_x ;
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[2];
		document.getElementById("rect_"+j).fill.size = "5,5";
		document.getElementById("rect_"+j).fill.position = "200%,200%";
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++		
		} 
		left_x = 0;
		cptTab=0;
	}
	if (i > 3 ) {
		for(j=15; j<20; j++) {
		document.getElementById("rect_"+j).style.top = (dimH+ecart)*3;
		document.getElementById("rect_"+j).style.left = left_x ;
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[3];
		document.getElementById("rect_"+j).fill.size = "5,5";
		document.getElementById("rect_"+j).fill.position = "200%,200%";
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++		
		} 
		left_x = 0;
		cptTab=0;
	}
	if (i >= 4 ) {
		for(j=20; j<25; j++) {
		if ( j == 24 ) { 
		document.getElementById("rect_"+j).href = e_out.name;
		//window.status = nom_objet[j].split("|")[1];
		document.getElementById("rect_"+j).title="Commander";
		document.getElementById("rect_"+j).fill.origin = "0,0";
		document.getElementById("rect_"+j).fill.size = "0,0";
		document.getElementById("rect_"+j).fill.position = "0,0";
		document.getElementById("rect_"+j).fill.src = "http://www.cyberhal.com/images/picto-achat.jpg";
		} else {
		document.getElementById("rect_"+j).fill.origin = tabH[cptTab]+","+tabH[4];
		document.getElementById("rect_"+j).fill.size = "5,5";
		document.getElementById("rect_"+j).fill.position = "200%,200%";
		}
		document.getElementById("rect_"+j).style.top = (dimH+ecart)*4;
		document.getElementById("rect_"+j).style.left = left_x ;
		
		document.getElementById("ani1_"+j).beginElement();
		document.getElementById("ani2_"+j).beginElement();
		document.getElementById("ani3_"+j).beginElement();
		document.getElementById("ani4_"+j).beginElement();
		left_x += dimW+ecart;
		cptTab++	
		} 
		left_x = 0;
		cptTab=0;
	}	
	
	}
	

}


function imageOver(evt) { 

	e_out = evt.srcElement;
	e_out.fill.opacity="0.2";

}
function imageOut(evt) {

	e_out = evt.srcElement;
	e_out.fill.opacity="1";


}

function imageDown(evt) {

	e_out = evt.srcElement;
	file_source=e_out.fill.src.split("/")[1];

	if ( etat == false ) { 
	buildImages(file_source);
	mosaicItems();
	etat=true;
	} else {
	buildImages();
	mosaicInit();
	etat=false;
	}

}