diff -r 94f586daa623 -r 8ca7f2cea729 alcatel/static/libraries/nco/tapestry.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/alcatel/static/libraries/nco/tapestry.js	Thu Jan 24 16:58:55 2013 +0100
@@ -0,0 +1,153 @@
+function glow() {
+	document.getElementById('')
+}
+
+
+function Tapestry(json,parametres){
+	this.parametres = {
+			name: null,
+			hauteur: 400,
+			largeur: 900,	
+			timelineHaute : "#timelinehaute",
+			relations: null,
+			contenu: function(cellule, element) {
+				
+				var html;
+				var img = new Image();
+				img.src= element.name;
+				indexx = element.indexx;
+				var wi, hi, wc, hc;
+				
+				wi = img.width;
+				hi = img.height;
+				wc = cellule.offsetWidth  ;
+				hc = cellule.offsetHeight ;
+			//	r = Math.min(hi/hc, wi/wc);
+			//	w = wi/r;
+			//	h = hi/r;
+				
+				var posx, posy;
+				posx = (wi-wc)/2;
+				posy = (hi-hc)/2;
+				
+				html = "<img class = 'img' src = \"" + img.src + "\" style=\" width:"+ wc + "px; height:" +hc + "px; margin-top: 0px; margin-left: 0px;\" />";
+				html += "<p class = 'title' style = \" width:" + wc + "px;\"> Image "+String(indexx)+"</p>";
+				
+				return html;
+
+
+			}};
+		
+	
+		
+	var object = this;
+
+	
+	//----------------------------------------------------------------------
+	// FENETRE DE FOND
+	
+	object.tapestryHtml = d3.select("#timelinehaute")
+	.style('position', 'relative')
+	.style('width', object.parametres.largeur + 'px')
+	.style('height', object.parametres.hauteur + 'px')
+	.style('background-color', 'black');	
+	//.style('overflow','hidden');
+	
+	object.boutonzoom = d3.select("#timelinebasse").append('div')
+	.style('position', 'relative')
+	.style('width', '200px')
+	.style('height','20px')
+	.style('background-color', 'grey')	
+	.style('margin-top', '5px')
+	.html("<p class = 'title' style = \" width:200px;\"> Dezoooooom </p>")
+	.on('mouseover', function(){d3.select(this).style('opacity', 0.8);})
+	.on('mouseout', function(){d3.select(this).style('opacity', 1);})
+	.on('click',function(){object.agencerzoom;})
+	
+		
+	//----------------------------------------------------------------------
+	// CREATION DES PETITES FENETRES
+	
+	var listeposition = this.getPosition();
+	var larg,haut;
+	larg = String(this.parametres.largeur/5) + "px";
+	larg2=String(this.parametres.largeur/10) + "px";
+	haut = String(this.parametres.hauteur/2 -1) + "px" ;
+	
+	d3.select("#timelinehaute").selectAll("div")
+		.data(donnees).enter().append("div")
+			.attr('class', 'cell')
+			.attr('id', function(index){
+				if(index==0){return "first";}
+				else if (index==10){return "last";}
+			})
+			
+			.on('mouseover', function(){d3.select(this).style('opacity', 0.8);})
+			.on('mouseout', function(){d3.select(this).style('opacity', 1);})
+			.on('click',function(datum,index){object.agencerzoom(datum,index);})
+			
+			.style('position', 'absolute')
+			.style('width', function(datum,index){
+				if(index==0 || index==10){return larg2;}
+				else{return larg;}
+			})
+			.style('height',haut)
+			.style('background-color', '#32675F')
+			.style('text-align','center')
+			.html(function(datum,index){return object.parametres.contenu(this,datum);})
+			.style('left', function(datum, index) {
+				return listeposition[index][0];
+			})
+			.style('top', function(datum, index) {
+				return listeposition[index][1];
+			})
+	//		.attr('onmouseover',"this.style(\"stroke\",\"white\");" )
+			;
+		
+	
+	
+};
+// Position des fenetres 
+Tapestry.prototype = {		
+
+		getPosition: function(){
+			var l,h;
+			l= this.parametres.largeur;
+			h= this.parametres.hauteur;
+			var listposition=[[0,0]];
+			for (var i=0;i<9;i++){
+				listposition.push([(i*0.5)*l/5,h/2*((i+1)%2)]);
+			}
+			listposition.push([4.5*l/5,0]);
+			//for (var j=0;j<5;j++){
+			//	listposition.push([j*l/5,h/2]);
+			//}
+			return listposition;
+			
+
+		},
+			
+		agencerzoom: function(element,indexx){
+			var object = this;
+			this.tapestryHtml.selectAll("div")
+				.data(donnees[indexx].childs)
+					.html(function(datum,index){return object.parametres.contenu(this,datum);});
+			this.tapestryHtml.select("first")
+				.data(donnees[indexx-1])
+					.html(function(datum,index){return object.parametres.contenu(this,datum);});
+		},
+			
+			
+		agencerdezoom: function(){
+			var object = this;
+			this.tapestryHtml.selectAll("div")
+			.data(donnees)
+				.html(function(datum,index){return object.parametres.contenu(this,datum);});
+			
+		}
+				
+		
+		
+};
+
+