diff --git a/src/test/event-test.html b/src/test/event-test.html
index 599d75235e50b2fad2e82145d22a944d193d9b1f..982edb0502a0c0c9fa3e77b78b0f6943ce6c7b9b 100644
--- a/src/test/event-test.html
+++ b/src/test/event-test.html
@@ -2,47 +2,136 @@
 <html>
 <head>
 <title>test event</title>
-<script src="lib/jquery.js" type="text/javascript"></script>
+<!-- <script src="lib/jquery1_4_2.js" type="text/javascript"></script>-->
+<link rel="stylesheet" href="style/main.css" type="text/css">
+<script src="lib/jquery-1.7.1.min.js" type="text/javascript"></script>
+<script src="lib/jquery.mousewheel.js" type="text/javascript"></script>
 <script src="lib/raphael-min.js" type="text/javascript"></script>
 </head>
 <body>
 <h1>titre</h1>
-<div id="genes_schema">
-<p>toto</p>
-<p id="test">toto</p>
+<div id="genes_schema" class="grabbable"  style="width: 500px; height: 500px;background-color: #e6e6e6;  border: 2px" >
+<div id="divScroll" class="grabbable" style="width: 250px; height: 250px; background-color: #e6e6e6; border: 2px groove #f6f6f6;">use the wheel over this DIV</div>
+<div id="event_log">
+<p>log event</p>
 </div>
 </body>
 <script type="text/javascript">
-var paper = new Raphael("genes_schema", 300, 150);
-paper.circle(50, 75, 30);
-paper.circle(150, 75, 30);
+var paper = new Raphael("genes_schema", 500, 500);
+var bckground = paper.rect( 0 , 0 , 500 , 500).attr( {fill:"pink"});
+var both = paper.set();
+var first_c = paper.circle(50, 75, 30);
+var rec =paper.rect( 100 ,100 , 50 , 50);
+both.push(first_c );
+both.push(rec );
+//var sec_circle = paper.circle(150, 75, 30);
 $("circle").each(function(i) {
 	$(this).attr({fill: 'red', stroke: '#000'});
     $(this).mouseup(function() { 
-        $("#test").append("<p>Mouseup</p>");
+        $("#event_log").append("<p>Mouseup</p>");
     });
-    $(this).mousedown(function() { 
-        $("#test").append("<p>MouseDown</p>");
+    $(this).mousedown(function(ObjectEvent) { 
+        $("#event_log").append("<p>MouseDown</p>");
     });
     
 });
-</script>
-<!-- 
-<script type="text/javascript">
-$(function() {  
-    var paper = new Raphael("canvas_container", 300, 150);
-    paper.circle(50, 75, 30);
-    paper.circle(150, 75, 30);
-
-    $("circle").each(function(i) {
-        $(this).mouseover(function() { 
-            $("#test").append("<p>MouseOver</p>");
-        });
-        $(this).mouseout(function() { 
-            $("#test").append("<p>MouseOut</p>");
-        });
+var intOverallDelta = 0;
+$("#divScroll").bind("mousewheel",function(objEvent, delta , deltaX, deltaY){
+    objEvent.stopImmediatePropagation();
+    objEvent.stopPropagation();
+    console.log(delta, deltaX, deltaY);
+    objEvent.stopPropagation();
+    return false;
+    
     });
+
+$("#genes_schema").bind("mousedown" , function( evt ){
+	console.log( "x="+evt.pageX +" y= "+evt.pageY );
+	$(this).toggleClass( "grabbing" ).toggleClass( "grabbable" );
+	console.log("mouseDown");
+}); 
+
+$("#genes_schema").bind("mouseup" , function(){
+    $(this).toggleClass( "grabbable" ).toggleClass( "grabbing" );
+    console.log("mouseUp");
+}); 
+
+
+/*
+var nowX, nowY, R = Raphael("canvas", 500, 500),
+c = R.rect(200, 200, 40, 40).attr({
+        fill: "hsb(.8, 1, 1)",
+        stroke: "none",
+        opacity: .5,
+        cursor: "move"
+    }),
+j = R.rect(0,0,100,100),
+// start, move, and up are the drag functions
+start = function () {
+    // storing original coordinates
+    this.ox = this.attr("x");
+    this.oy = this.attr("y");
+    this.attr({opacity: 1});
+    if (this.attr("y") < 60 &&  this.attr("x") < 60)
+        this.attr({fill: "#000"});        
+},
+move = function (dx, dy) {
+    // move will be called with dx and dy
+    if (this.attr("y") > 60 || this.attr("x") > 60)
+        this.attr({x: this.ox + dx, y: this.oy + dy}); 
+    else {
+        nowX = Math.min(60, this.ox + dx);
+        nowY = Math.min(60, this.oy + dy);
+        nowX = Math.max(0, nowX);
+        nowY = Math.max(0, nowY);            
+        this.attr({x: nowX, y: nowY });
+        if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
+    }
+},
+up = function () {
+    // restoring state
+    this.attr({opacity: .5});
+    if (this.attr("y") < 60 && this.attr("x") < 60)
+        this.attr({fill: "#AEAEAE"});            
+};   
+// rstart and rmove are the resize functions;
+c.drag(move, start, up);
+};​
+*/
+
+
+
+//var ox = 0;
+//var oy = 0;
+
+var mousedown= function(x ,y,event) {
+	console.log( "raphael mousedown");
+    this.ox = event.screenX;
+    this.oy = event.screenY;
+    this.attr({
+        opacity: .5
     });
+};
+
+var mousemove= function(dx, dy,x ,y ,event) {
+	console.log( "raphael mousemove");
+	this.translate(event.screenX - this.ox, event.screenY - this.oy);
+    this.ox = event.screenX;
+    this.oy = event.screenY;
+};
+
+var mouseup= function(x,y,event){
+	console.log( "raphael mouseup");
+    dragging = false;
+    this.attr({
+        opacity: 1
+    });
+};
+		
+//bckground.drag( move ,start ,stop );
+//first_c.drag( move ,start ,stop );
+//bckground.drag( move ,start ,stop , first_c ,first_c, first_c );
+bckground.drag( mousemove ,mousedown ,mouseup , both ,both, both );
 </script>
--->
+
 </html>
\ No newline at end of file
diff --git a/src/test/lib/jquery.js b/src/test/lib/jquery1_4_2.js
similarity index 100%
rename from src/test/lib/jquery.js
rename to src/test/lib/jquery1_4_2.js
diff --git a/src/test/secretion.html b/src/test/secretion.html
index 6e56691ea998e313327cef0c7a9caa67f710b165..31ff3f635e627c8706d2b002739a651dff105fd1 100644
--- a/src/test/secretion.html
+++ b/src/test/secretion.html
@@ -1,365 +1,541 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>secretion system YEPS004_p01_Syst-p</title>
-    <link rel="stylesheet" href="style/main.css" type="text/css">
-    <link rel="stylesheet" href="_attachements/style/color.css" type="text/css">
-    <script src="/_utils/script/jquery.js"></script>
-    <script type="text/javscript">
-    var = $('tbody th:lt(6)').toarrary();
+<head>
+<title>secretion system DEPI001WGS_c01_Syst_1-s</title>
+<link rel="stylesheet" href="style/system.css" type="text/css">
+<link rel="stylesheet" href="style/color.css" type="text/css">
+<script src="lib/jquery1_4_2.js" type="text/javascript"></script>
+<script src="lib/jquery.mousewheel.js" type="text/javascript"></script>
+<script src="lib/raphael-min.js" type="text/javascript"></script>
+<script src="lib/popup.js" type="text/javascript"></script>
+</head>
+<body>
+	
+
+	<div id="genes_schema" class="grabbable"></div>
+
+	<h3>Genes</h3>
+	<table>
+		<thead>
+			<tr>
+				<th>Gene-code</th>
+
+				<th>Gene-Id</th>
+				<th>Protein-length</th>
+				<th>Strand</th>
+				<th>Begin</th>
+				<th>End</th>
+				<th>Match</th>
+
+				<th>Full-score</th>
+				<th>Evalue</th>
+				<th>Best-domain-score</th>
+				<th>Best-domain-evalue</th>
+				<th>c-Evalue</th>
+				<th>Coverage-profile</th>
+
+				<th>Match-begin</th>
+				<th>Match-end</th>
+			</tr>
+		</thead>
+		<tbody>
+			
+			<tr>
+				<td id="DEPI001WGSc01_006560" class="gene_sctU">DEPI001WGSc01_006560</td>
+
+				<td>ZP_03310782.1</td>
+				<td>347</td>
+				<td>D</td>
+				<td>100</td>
+				<td>200</td>
+				<td>sctU</td>
+				<td>359.7</td>
+
+				<td>3.8e-105</td>
+				<td>359.5</td>
+				<td>4.4e-105</td>
+				<td>1.4e-108</td>
+				<td>1</td>
+				<td>2</td>
+
+				<td>338</td>
+			</tr>
+			<tr>
+				<td id="DEPI001WGSc01_006590" class="gene_sctV">DEPI001WGSc01_006590</td>
+				<td>ZP_03310785.1</td>
+				<td>697</td>
+				<td></td>
+
+				<td>490</td>
+				<td>510</td>
+				<td>sctV</td>
+				<td>20</td>
+				<td>8.7e-244</td>
+				<td>818.7</td>
+				<td>1e-243</td>
+
+				<td>2.4e-247</td>
+				<td>0.99</td>
+				<td>15</td>
+				<td>695</td>
+			</tr>
+			
+			<tr>
+				<td id="DEPI001WGSc01_006830" class="gene_sctQ">DEPI001WGSc01_006830</td>
+				<td>ZP_03310809.1</td>
+				<td>398</td>
+				<td>C</td>
+
+				<td>1000</td>
+				<td>1100</td>
+				<td>sctQ</td>
+				<td>63.1</td>
+				<td>5.5e-15</td>
+				<td>58.6</td>
+				<td>1.5e-13</td>
+
+				<td>4.7e-17</td>
+				<td>0.96</td>
+				<td>312</td>
+				<td>378</td>
+			</tr>
+					</tbody>
+	</table>
+
+</body>
+
+<script type="text/javascript">
+    	  function draw_genome_map( doc ) { 
+               
+    		   function transform_optimizer( old_transform, new_transform){
+    			   var s_factor_x= 1;
+    			   var s_factor_y= 1;
+    			   var s_x = 657;
+    			   var s_y = 55;
+    			   var t_x = 0;
+    			   var t_y = 0;
+    			   var new_scale= '';
+    			   var new_trans ='';
+    			   //console.log( "t_opt old_t = "+old_transform );
+    			   //console.log( "t_opt new_t = "+new_transform );
+    			   for (i=0; i< old_transform.length; i++){
+    				   if( old_transform[i][0] == 's'){
+    					    s_factor_x = old_transform[i][1];
+    					    s_factor_y = old_transform[i][2];
+    					    //s_x = old_transform[i][3];
+    				        //s_y = old_transform[i][4];
+    				   }
+    				   if( old_transform[i][0] == 't'){
+    					    var t_x= old_transform[i][1];
+    					    //var t_y= old_transform[i][2];
+    				   }
+    			   }
+    			   if (new_transform[0] == 's'){
+    				   new_scale= 's'+[ s_factor_x*new_transform[1] , s_factor_y, s_x , s_y].join(",");
+    				   if( t_x || t_y){
+    					    new_trans= 't'+[ t_x , t_y ].join(",");
+    				   }
+    			   }else if(new_transform[0] == 't'){
+    				   if( s_factor_x !=1 ){
+    					   new_scale= 's'+[  s_factor_x , s_factor_y, s_x , s_y].join(",");
+    				   }
+    				   new_trans= 't'+[ t_x + new_transform[1] , t_y ].join(",");
+    			   }else{
+    				   //pas implementer
+    			   }
+    			   console.log( "t_opt optimized_t = "+new_scale+new_trans)
+    			   return new_scale+new_trans;
+    		   }
+    		   
+    		   function getScaleFactor( tstr ){
+    			   s_factor_x =1;
+    			   s_factor_y = 1;
+    			   for (i=0; i< tstr.length; i++){
+                       if( tstr[i][0] == 's'){
+                            s_factor_x = tstr[i][1];
+                            s_factor_y = tstr[i][2];
+                            //s_x = tstr[i][3];
+                            //s_y = tstr[i][4];
+                       }
+                   }
+    			   return s_factor_x;
+    		   }
+    		   
+               var min = doc.genes[0].begin ;
+               var max = 0;
+               var all_protein_length = 0;
+               for( var i = 0 ;i<doc.genes.length ; i++ ){
+                    var beg = doc.genes[i].begin ;
+                    var end = doc.genes[i].end ;
+                    if(beg<min){min = beg;}
+                    if(end>max){max = end;}
+                    all_protein_length = all_protein_length + doc.genes[i].protein_length
+                }
+                var paper_w= $("#genes_schema").width();
+                var paper_h= 250;
+                var genome_offset= 45;
+                var genes_offset= 10;
+                var inter_gene = 50;
+                if( max == 0){
+                    min = 0;
+                    max = all_protein_length + (( doc.genes.length -1) * inter_gene );
+                }
+                var coef= (paper_w - (genome_offset+genes_offset)*2 )/(max - min);
+                var genome_orig= min;
+                var Y_genome= 55 ;
+                var x_genome_center = paper_w / 2;
+                	
+                Raphael.fn.draw_genome = function(){
+                    var genome_l = paper_w -(2* genome_offset);
+                    return this.path( ["M", genome_offset , Y_genome, "h", genome_l ,"a25,5 -1 0,1 0,5h",(-1*(genome_l)),"a25,5 0 0,1 0,-5z" ]).attr({fill: "#aaa", stroke:"#aaa", "stroke-width":"1"} );
+                };
+                
+                var Gene = function Gene( gene_info , previous_gene ){
+                    if (gene_info.begin){
+                    	this.begin = gene_info.begin;
+                    	this.end= gene_info.end;
+                    }else{
+                    	this.begin = previous_gene + inter_gene
+                    	this.end = this.begin + gene_info.protein_length
+                    }
+                    //this.begin and end are begin and end on the genome (in base)
+                    var g_arrow = paper.draw_gene( this.begin, this.end, gene_info, previous_gene);
+                    this.arrow = g_arrow[0];
+                    //g_arrow[1] and [2] are begin and end  on the paper (in px)
+                    this.popup = paper.draw_gene_popup( g_arrow[1] , g_arrow[2] , gene_info);
+                    this.arrow.mouseover( gene_show.bind(this));
+                    this.arrow.mouseout( gene_hide.bind(this) );
+                    
+                    this.zoom = gene_zoom;
+                    this.translate = gene_translate;
+                    this.arrow.dblclick(function(){
+                    	var box = g_arrow[0].getBBox(false);
+                    	//console.log("box x="+box.x+",box width="+box.width);
+                    	var x_ori_scale = box.x+(box.width/2 ) ;
+                    	//console.log("x_ori_scale="+x_ori_scale);
+                    	//console.log("matrix = "+g_arrow[0]["matrix"]);
+                    	var old_t = g_arrow[0].transform();
+                    	for (var i=0; i<old_t.length ; i++){
+                    		//console.log("old_t "+i+" = "+old_t[i]);
+                    		for (var j=0; j< old_t[i].length; j++){
+                    			//console.log("old_t "+i+","+j+" = "+old_t[i][j]);
+                    		}
+                    	}
+                    	//console.log("transform ="+g_arrow[0].transform());
+                    	//console.log("x="+g_arrow[0].attr("x"));
+                    	
+                    	var delta = g_arrow[0].paper.width/2 - x_ori_scale
+                    	//console.log( "center="+g_arrow[0].paper.width/2+", delta="+delta);
+                    	//zoomNcenter(2 , x_ori_scale , 0);
+                    	//g_arrow[0].scale( 2, 1 , x_ori_scale ,Y_genome )
+                    	
+                    	//var x_ori_scale = g_arrow[0].attr("x")+g_arrow[0].attr("width")/2 ;
+                    	var d_genome_gene = g_arrow[0].attr("x") - x_genome_center;
+                    	var dx = d_genome_gene * 2;
+                    	//console.log( "dx=",dx);
+                    	var new_t = "s2,1,"+x_genome_center+","+Y_genome+"t"+dx;
+                    	//console.log( "new_t"+new_t);
+                    	//var new_t = "s2,1,"+x_ori_scale+","+Y_genome;
+                    	g_arrow[0].transform(old_t+new_t);
+                    	//g_arrow[0].transform("s2,1,"+x_ori_scale+","+Y_genome);
+                    	var a_box = g_arrow[0].getBBox(false);
+                    	//console.log("box x="+box.x+",box width="+box.width);
+                    	//console.log( "new x_ori_scale="+ a_box.x+(a_box.width/2 ) );
+                    	//console.log("matrix = "+g_arrow[0]["matrix"]);
+                    	//console.log("transform fin db_click="+g_arrow[0].transform());
+                    });
+                };
+                
+                Raphael.fn.draw_gene_popup = function( start, stop, gene_info ){
+                    var popup = this.set();
+                    var label = this.set();
+                    var txt = {font: '12px Helvetica, Arial', fill: "#fff"};
+                    var title = {font: '12px Helvetica, Arial', fill: "#aaf"};
+                    label.push(this.text(60, 12, "Gene-Id: "+gene_info.id ).attr(title));
+                    if(gene_info.match){
+                        label.push(this.text(60, 27, "match: "+gene_info.match ).attr(txt));
+                    }
+                    label.push(this.text(60, 42, "protein length: "+gene_info.protein_length).attr(txt));
+                    label.hide();
+                    popup.push( label );
+                    var frame = this.popup( start +( (stop -start)/2 ) , 100, label , "bottom").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7});
+                    frame.hide();
+                    popup.push( frame );
+                    return popup;
+                };
+                
+                Raphael.fn.draw_gene = function( begin , end , gene_info , previous_gene ){
+                	var arrow_beg = (begin - genome_orig)*coef+genome_offset+genes_offset;
+                    var arrow_end = (end - genome_orig)*coef+genome_offset+genes_offset;
+                    var body_l = (arrow_end - arrow_beg)*3/5;
+                    var head_l = (arrow_end - arrow_beg)*2/5;
+                    var arrow ;
+                    if( gene_info.strand =='D' ){
+                        arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 20h", body_l, "v-20l", head_l, " 30l", (-1*head_l),"30v-20h",(-1*body_l),"z"]);
+                    }else if( gene_info.strand =='C' ){
+                        arrow = this.path( ["M", arrow_beg, Y_genome-28, "m0 30l",head_l, "-30v20h", body_l, "v20h", (-1*body_l),"v20z"]);
+                    }else{
+                    	var width = arrow_end-arrow_beg;
+                    	var height = 20 ;
+                    	arrow = this.rect( arrow_beg, Y_genome-8, width , height );
+                    }
+                    if(!gene_info.match){
+                        arrow.attr({fill: "white", stroke: "black", "stroke-dasharray": "-", "fill-opacity": 0.5});
+                    }else{
+                        var color=$( ".gene_"+gene_info.match).css( "backgroundColor" );
+                        arrow.attr({fill: color, stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.9});
+                    }
+                    return [arrow , arrow_beg ,arrow_end ];
+                };
+                
+                function gene_zoom( factor , ori ){
+                    var bf_box = this.arrow.getBBox();
+                    //this.arrow.scale( factor, 1 , ori ,Y_genome );
+                    //console.log( "gene_zoom factor="+factor);
+                    var old_t = this.arrow.transform();
+                    //console.log("transform avant sfactor: "+ this.arrow.transform());
+                    //var new_t = "s"+factor+",1,"+x_genome_center+","+Y_genome;
+                    var new_t = transform_optimizer( old_t , [ 's' , factor , 1,x_genome_center, Y_genome ]);
+                    this.arrow.transform( new_t );
+                    //console.log("transform apres sfactor: "+ this.arrow.transform());
+                    var af_box = this.arrow.getBBox();
+                    this.popup.translate( (af_box.x+(af_box.width/2 )) - (bf_box.x+(bf_box.width /2 ))  , 0);
+                    //old_t = this.popup.transform();
+                    //this.popup.transform(old_t+new_t);
+                };
+                function gene_translate( dx , dy ){
+                    var bf_box = this.arrow.getBBox(false);
+                    //this.arrow.translate( dx , dy );
+                    //console.log( "gene_translate dx="+dx);
+                    //console.log("transform avant tdx: "+ this.arrow.transform());
+                    var old_t = this.arrow.transform();
+                    var scaleFactor = getScaleFactor( old_t );
+                    var new_t = transform_optimizer( old_t , [ 't' , dx/scaleFactor , 0]);
+                    this.arrow.transform( new_t );
+                    //console.log("transform apres tdx: "+ this.arrow.transform());
+                    var af_box = this.arrow.getBBox(false);
+                    //this.popup.translate((af_box.x + (af_box.width /2 )) - (bf_box.x + (bf_box.width /2 )) , (af_box.y-bf_box.y));
+                    //old_t = this.popup.transform();
+                    //console.log("old transform popup = "+this.popup.transform());
+                    //this.popup.transform(new_t);
+                    //this.popup.forEach( function(){
+                    //	console.log( "transform " +this.type+" : "+this.transform );
+                    //});
+                    //console.log("new transform popup = "+this.popup.transform());
+                    this.popup.translate( dx , 0);
+                };
+                function gene_show(){
+                    this.popup.show();
+                };
+                function gene_hide(){
+                    this.popup.hide();
+                };
+                
+                
+                function zoomNcenter( factor, x_ori_scale, delta ){
+                	genome.scale( factor, 1 , x_ori_scale ,Y_genome );
+                	//genome.translate( delta , 0); 
+                    for(var i = 0 ;i<genes.length ; i++){ 
+                    	genes[i].zoom( factor , x_ori_scale)
+                    	//genes[i].translate( delta , 0 )
+                    }
+                    
+                };
+                
+                
+                Raphael.fn.control = function( x , y , genes , genome ){
+                    var west= this.path( ["M", x-40, y]+ "l20  -12 a70, 40 0 0,0   0, 24z").attr({fill:"blue"});//West
+                    west.mousedown( function(){ 
+                        for(var i = 0 ;i<genes.length ; i++){ genes[i].translate( -50 , 0); }
+                        var old_t = genome.transform();
+                        var scaleFactor = getScaleFactor(old_t);
+                        var new_t = transform_optimizer( old_t , [ 't' , -50/scaleFactor , 0]);
+                        genome.transform(new_t);
+                    });
+                    var east = this.path( ["M", x+40, y]+ "l-20 -12 a70, 40 0 0,1   0, 24z").attr({fill:"blue"});//East
+                    east.mousedown( function(){
+                        for(var i=0;i<genes.length; i++){ genes[i].translate(+50, 0);}
+                        var old_t = genome.transform();
+                        var scaleFactor = getScaleFactor(old_t)
+                        var new_t = transform_optimizer( old_t , [ 't' , 50/scaleFactor , 0]);
+                        genome.transform(new_t);
+                    });
+                    this.circle( x , y , 20).attr({stroke:"black", "stroke-width": 2});
+                    var genome_box= genome.getBBox();
+                    //var Xori_scale= genome_box.x+genome_box.width /2 ;
+                    var zoom_in = this.set();
+                    zoom_in.push(this.circle( x , y+9 , 8).attr({fill:"blue"}));//plus
+                    zoom_in.push(this.rect( x-4 , y+7.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//plus
+                    zoom_in.push(this.rect( x-1.5 , y+5 , 3 ,8 ).attr({fill:"white", stroke:"white" }));//plus
+                    zoom_in.mousedown( function(){
+                        for(var i= 0 ;i<genes.length ; i++){ 
+                            var g= genes[i] ;
+                            genes[i].zoom(1.25 , x_genome_center); 
+                            }
+                        var old_t = genome.transform();
+                        //console.log("transform avant s1.25,1: "+ genome.transform());
+                        var new_t = transform_optimizer( old_t , [ 's' , 1.25 , 1 , x_genome_center , Y_genome]);
+                        genome.transform(new_t);
+                        //console.log("transform apres s1.25,1: "+ genome.transform());
+                    });
+                   
+                    var zoom_out = this.set();
+                    zoom_out.push(this.circle( x , y-9 , 8).attr({fill:"blue"}));//moins
+                    zoom_out.push(this.rect( x-4 , y-10.5 , 8 ,3 ).attr({fill:"white", stroke:"white"}));//moins
+                    zoom_out.mousedown( function(){
+                        for(var i = 0 ;i<genes.length ; i++){ 
+                            genes[i].zoom( 0.8 , x_genome_center); 
+                            }
+                        //genome.scale( 0.8 ,1,Xori_scale ,Y_genome );
+                        var old_t = genome.transform();
+                        //console.log("transform avant s0.8,1: "+ genome.transform());
+                        //var new_t = "s0.8,1,"+x_genome_center+","+Y_genome;
+                        var new_t = transform_optimizer( old_t , [ 's' , 0.8 , 1 , x_genome_center , Y_genome]);
+                        genome.transform(new_t);
+                        //console.log("transform apres s0.8,1: "+ genome.transform());
+                    });
+                };
+                
+                var paper = Raphael("genes_schema", paper_w, paper_h );
+                var background = paper.rect( 0 , 1 , paper_w , paper_h).attr( {stroke:"none", fill:"white"});//pour recevoir les evts
+                var genesNgenome= paper.set();
+                var genome= paper.draw_genome();//bar grise
+                genesNgenome.push( genome );
+                var genes = new Array();
+                
+                var g = new Gene( doc.genes[0] , 0 );
+                genes.push(g);
+                genesNgenome.push(g.arrow , g.popup);
+                for(var i = 1 ;i<doc.genes.length ; i++){
+                    var g = new Gene( doc.genes[i] , genes[i-1].end) ;// gene end on genome 
+                    genes.push(g);
+                    genesNgenome.push(g.arrow , g.popup);
+                };
+                var genome_box = genome.getBBox();
+                var Xori4scale = genome_box.x + genome_box.width /2 ;
+                //for(var i = 0 ;i<doc.genes.length ; i++){
+                //    for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 1.01 , Xori4scale); }
+                //};
+                ctrl_panel = paper.control( 50 , paper_h-30 , genes , genome );
+                var curr_paper_width = $("#genes_schema").width();
+               
+                $(window).bind("resize" , function(Evt){
+                    var gs = $("#genes_schema")
+                    var new_width = gs.width();
+                    console.log( "old gs.width ="+ curr_paper_width);
+                    console.log( "new gs.width ="+ new_width);
+                    paper.setSize( gs.width() , paper_h);
+                    var genome_box = genome.getBBox( false );
+                    console.log( "genome_X = "+genome_box.x+" , genome_width = "+genome_box.width);
+                    var genome_ori_bt = genome_box.x;
+                    var old_genome_center = genome_box.x + genome_box.width / 2 ;
+                    var scale_factor = (new_width -2* genome_offset)/(curr_paper_width -2* genome_offset);
+                    console.log( "scale_factor="+scale_factor);
+                    //var Xori4scale = genome_offset;
+                    var Xori4scale = x_genome_center;
+                    var old_t = genome.transform();
+                    console.log("old_t = "+old_t );
+                    console.log("Y_genome = "+Y_genome);
+                    var new_t = transform_optimizer( old_t , [ 's' , scale_factor , 1 , x_genome_center , Y_genome]);
+                    console.log("new_t  = "+new_t );
+                    genome.transform(new_t);
+                    //genome.scale( scale_factor, 1 , Xori4scale ,Y_genome );
+                    //for(var i= 0 ;i<genes.length ; i++){ genes[i].zoom( scale_factor , Xori4scale); }
+                    for(var i= 0 ;i<genes.length ; i++){ genes[i].zoom( scale_factor , x_genome_center); }
+                    background.transform( new_t );
+                    var genome_box = genome.getBBox( false );
+                    console.log( "genome_X = "+genome_box.x+" , genome_width = "+genome_box.width);
+                    var new_genome_center = genome_box.x + genome_box.width / 2 ;
+                    var genome_ori_at = genome_box.x;
+                    //var dx = genome_ori_at - genome_ori_bt;
+                    var dx = new_genome_center - old_genome_center
+                    console.log( "new_t avant translation = "+new_t);
+                    old_t = genome.transform();
+                    var sc = getScaleFactor(old_t );
+                    new_t = transform_optimizer( old_t , [ 't' , dx/sc , 0]);
+                    console.log( "new_t apres optimization = "+new_t);
+                    genome.transform( new_t);
+                    curr_paper_width= new_width;
+                });
+                
+                var intOverallDelta= 0 ;
+                $("#genes_schema").mousewheel(function(objEvent, intDelta){
+                    objEvent.stopImmediatePropagation();
+                    var x_ori_scale = objEvent.pageX;
+                    if (intDelta > 0){
+                        intOverallDelta++;
+                        var old_t = genome.transform();
+                        var new_t = transform_optimizer( old_t , [ 's' , 1.25 , 1 , x_genome_center , Y_genome]);
+                        genome.transform(new_t);
+                        for(var i = 0 ;i<genes.length ; i++){ genes[i].zoom( 1.25 , x_genome_center); }
+                        //console.log("transform apres s1.25,1: "+ genome.transform());
+                        
+                     }
+                     else if (intDelta < 0){
+                         intOverallDelta--;
+                         var old_t = genome.transform();
+                         var new_t = transform_optimizer( old_t , [ 's' , 0.8 , 1 , x_genome_center , Y_genome]);
+                         genome.transform(new_t);
+                         for(var i=0 ;i<genes.length ; i++){ genes[i].zoom( 0.8 , x_genome_center); }
+                     }
+                    return false;//prevent to scroll the window
+                 });
+                
+                var drag_mousedown= function(x ,y,event) {
+                    this.ox = event.screenX;
+                    this.oy = event.screenY;
+                    this.attr({
+                        opacity: .5
+                    });
+                };
+                var drag_mousemove= function(dx, dy,x ,y ,event) {
+                    var dx = event.screenX - this.ox;
+                	for(var i = 0 ;i<genes.length ; i++){ genes[i].translate( dx , 0); }
+                	var old_t = genome.transform();
+                	var scaleFactor = getScaleFactor(old_t );
+                	var new_t = transform_optimizer( old_t , [ 't' , dx/scaleFactor , 0]);
+                	genome.transform(new_t);
+                	//genome.translate( dx / scaleFactor, 0);
+                    
+                	this.ox = event.screenX;
+                    this.oy = event.screenY;
+                };
+                var drag_mouseup= function(x,y,event){
+                    dragging = false;
+                    this.attr({
+                        opacity: 1
+                    });
+                };
+                        
+                genesNgenome.drag( drag_mousemove, drag_mousedown, drag_mouseup, genesNgenome, genesNgenome, genesNgenome );
+                background.drag( drag_mousemove, drag_mousedown, drag_mouseup, genesNgenome, genesNgenome, genesNgenome );
+                
+                
+                $("#genes_schema").bind("mousedown" , function( evt ){
+                    $(this).toggleClass( "grabbing" ).toggleClass( "grabbable" );
+                }); 
+                $("#genes_schema").bind("mouseup" , function(){
+                    $(this).toggleClass( "grabbable" ).toggleClass( "grabbing" );
+                }); 
+    };
+    
+    var doc = {
+            "_id":"DEPI001WGS_c01_Syst_1-s",
+            "_rev":"4-8df672bbeee3c66ae1df66e7948ed930",
+            "doc_type":"SecretionSystem","code":"DEPI001WGS_c01_Syst_1-s",
+            "T3SS_family":"Desulfo",
+            "replicon":{
+                "strain":"Desulfovibrio piger ATCC 29098, draft genome.",
+                "type":"Chromosome","taxid":411464,
+                "taxonomy":["Bacteria","Proteobacteria","Deltaproteobacteria","Desulfovibrionales","Desulfovibrionaceae","Desulfovibrio","Desulfovibrio piger"],
+                "name":"DEPI001WGSc01"
+                },
+            "genes":[
+                     {"protein_length":347,"strand":"D","begin":1,"end":100 ,"code":"DEPI001WGSc01_006560","match_end":338,"best_domain_evalue":4.4e-105,"match_begin":2,"coverage_profile":1.0,"c_value":1.4e-108,"match":"sctU","e_value":3.8e-105,"id":"ZP_03310782.1","full_score":359.7,"best_domain_score":359.5},
+                     {"protein_length":697,"begin":498,"end":502 ,"code":"DEPI001WGSc01_006590","match_end":695,"best_domain_evalue":1.0e-243,"match_begin":15,"coverage_profile":0.99,"c_value":2.4e-247,"match":"sctV","e_value":8.7e-244,"id":"ZP_03310785.1","full_score":818.9,"best_domain_score":818.7},
+                     {"protein_length":218,"strand":"C","begin":900,"end":1000 ,"code":"DEPI001WGSc01_006830","match_end":217,"best_domain_evalue":2.0e-76,"match_begin":18,"coverage_profile":1.0,"c_value":4.4e-80,"match":"sctQ","e_value":1.7e-76,"id":"ZP_03310810.1","full_score":264.4,"best_domain_score":264.2}
+                     ]};
+
+    $(document).ready(draw_genome_map ( doc));
     </script>
-
-  </head>
- 	<body>
- 		<h1>Secretion system YEPS004_p01_Syst-p</h1>
- 		<ul>
- 			<li>code: YEPS004_p01_Syst-p</li>
- 			<li>T3SS family:</li>
- 		</ul>
-
- 		<h2>Replicon</h2>
- 		<ul>
- 		     			<li>name: YEPS004p01</li>
- 			<li>taxid: 502801</li>
- 			<li>strain: Yersinia pseudotuberculosis PB1/+ plasmid pYPTS01, complete sequence.</li>
- 			<li>taxonomy: Bacteria,Proteobacteria,Gammaproteobacteria,Enterobacteriales,Enterobacteriaceae,Yersinia</li>
-
- 			<li>type: Plasmi</li>
- 			</ul>
- 		<div id="genes-schema">
- 		</div>
- 		<h3>Genes</h3>
- 		<table border="1">
- 			<thead>
- 				<tr>
-
- 					<th>Gene-code</th><th>Gene-Id</th><th>Protein-length</th><th>Strand</th><th>Begin</th><th>End</th>
- 					<th>Match</th><th>Full-score</th><th>E-value</th>
- 					<th>Best-domain-score</th><th>Best-domain-evalue</th><th>C-value</th><th>Coverage-profile</th>
-
- 					<th>Match-begin</th><th>Match-end</th>
- 				</tr>
- 			</thead>
- 			<tbody>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000010" class="">YEPS004p01_000010</th><th>YP_001874607.1</th><th>137</th><th>D</th><th>452</th><th>865</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000020" class="sctC">YEPS004p01_000020</th><th>YP_001874608.1</th><th>607</th><th>D</th><th>871</th><th>2694</th>
-
- 					<th>sctC</th><th>632.4</th><th>1.3e-187</th>
- 					<th>371.7</th><th>1.3e-108</th><th>5.4e-112</th><th>0.5</th>
- 					<th>242</th><th>509</th>
- 				</tr>
-
- 			  			 	<tr>
- 					<th id="YEPS004p01_000030" class="sctD">YEPS004p01_000030</th><th>YP_001874609.1</th><th>419</th><th>D</th><th>2691</th><th>3950</th>
- 					<th>sctD</th><th>479.3</th><th>4e-144</th>
- 					<th>479.2</th><th>4.5e-144</th><th>7.2e-146</th><th>1</th>
-
- 					<th>5</th><th>413</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000040" class="">YEPS004p01_000040</th><th>YP_001874610.1</th><th>66</th><th>D</th><th>3947</th><th>4147</th>
- 					<th></th><th></th><th></th>
-
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000050" class="sctF">YEPS004p01_000050</th><th>YP_001874611.1</th><th>87</th><th>D</th><th>4148</th><th>4411</th>
- 					<th>sctF</th><th>113.9</th><th>1.6e-33</th>
-
- 					<th>113.7</th><th>1.8e-33</th><th>2.5e-35</th><th>1</th>
- 					<th>16</th><th>86</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000060" class="">YEPS004p01_000060</th><th>YP_001874612.1</th><th>115</th><th>D</th><th>4413</th><th>4760</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000070" class="">YEPS004p01_000070</th><th>YP_001874613.1</th><th>165</th><th>D</th><th>4757</th><th>5254</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000080" class="sctI">YEPS004p01_000080</th><th>YP_001874614.1</th><th>115</th><th>D</th><th>5255</th><th>5602</th>
-
- 					<th>sctI</th><th>199.3</th><th>7.9e-60</th>
- 					<th>199.2</th><th>8.8e-60</th><th>7.1e-62</th><th>1</th>
- 					<th>4</th><th>115</th>
- 				</tr>
-
- 			  			 	<tr>
- 					<th id="YEPS004p01_000090" class="sctJ">YEPS004p01_000090</th><th>YP_001874615.1</th><th>244</th><th>D</th><th>5609</th><th>6343</th>
- 					<th>sctJ</th><th>309.5</th><th>3.3e-90</th>
- 					<th>309.4</th><th>3.6e-90</th><th>8.9e-94</th><th>1</th>
-
- 					<th>2</th><th>243</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000100" class="">YEPS004p01_000100</th><th>YP_001874616.1</th><th>208</th><th>D</th><th>6346</th><th>6972</th>
- 					<th></th><th></th><th></th>
-
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000110" class="sctL">YEPS004p01_000110</th><th>YP_001874617.1</th><th>210</th><th>D</th><th>6951</th><th>7583</th>
- 					<th>sctL</th><th>219</th><th>2.1e-65</th>
-
- 					<th>218.8</th><th>2.4e-65</th><th>4.4e-67</th><th>0.99</th>
- 					<th>21</th><th>201</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000120" class="">YEPS004p01_000120</th><th>YP_001874618.1</th><th>115</th><th>D</th><th>7808</th><th>8155</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000130" class="">YEPS004p01_000130</th><th>YP_001874619.1</th><th>88</th><th>D</th><th>8703</th><th>8969</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000140" class="">YEPS004p01_000140</th><th>YP_001874620.1</th><th>140</th><th>D</th><th>9005</th><th>9427</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000150" class="">YEPS004p01_000150</th><th>YP_001874621.1</th><th>468</th><th>C</th><th>10231</th><th>11637</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000160" class="">YEPS004p01_000160</th><th>YP_001874622.1</th><th>158</th><th>D</th><th>12078</th><th>12554</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000170" class="">YEPS004p01_000170</th><th>YP_001874623.1</th><th>288</th><th>C</th><th>13140</th><th>14006</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000180" class="">YEPS004p01_000180</th><th>YP_001874624.1</th><th>732</th><th>C</th><th>14402</th><th>16600</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000190" class="">YEPS004p01_000190</th><th>YP_001874625.1</th><th>149</th><th>C</th><th>16608</th><th>17057</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000630" class="">YEPS004p01_000630</th><th>YP_001874669.1</th><th>71</th><th>D</th><th>47328</th><th>47543</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000640" class="">YEPS004p01_000640</th><th>YP_001874670.1</th><th>529</th><th>C</th><th>47586</th><th>49175</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000650" class="">YEPS004p01_000650</th><th>YP_001874671.1</th><th>71</th><th>C</th><th>49563</th><th>49778</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000660" class="">YEPS004p01_000660</th><th>YP_001874672.1</th><th>402</th><th>D</th><th>50528</th><th>51736</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000670" class="yopD">YEPS004p01_000670</th><th>YP_001874673.1</th><th>306</th><th>C</th><th>52228</th><th>53148</th>
-
- 					<th>yopD</th><th>474.3</th><th>6.5e-143</th>
- 					<th>474.1</th><th>7.4e-143</th><th>1.9e-145</th><th>1</th>
- 					<th>21</th><th>306</th>
- 				</tr>
-
- 			  			 	<tr>
- 					<th id="YEPS004p01_000680" class="yopB">YEPS004p01_000680</th><th>YP_001874674.1</th><th>401</th><th>C</th><th>53167</th><th>54372</th>
- 					<th>yopB</th><th>486.4</th><th>1.7e-146</th>
- 					<th>485.8</th><th>2.7e-146</th><th>1.4e-148</th><th>1</th>
-
- 					<th>102</th><th>401</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000690" class="sycD">YEPS004p01_000690</th><th>YP_001874675.1</th><th>168</th><th>C</th><th>54350</th><th>54856</th>
- 					<th>sycD</th><th>113.7</th><th>1.7e-33</th>
-
- 					<th>113.7</th><th>1.7e-33</th><th>4.5e-35</th><th>0.99</th>
- 					<th>37</th><th>130</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000700" class="">YEPS004p01_000700</th><th>YP_001874676.1</th><th>326</th><th>C</th><th>54869</th><th>55849</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000710" class="">YEPS004p01_000710</th><th>YP_001874677.1</th><th>95</th><th>C</th><th>55851</th><th>56138</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000720" class="">YEPS004p01_000720</th><th>YP_001874678.1</th><th>146</th><th>C</th><th>56180</th><th>56620</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000730" class="sctV">YEPS004p01_000730</th><th>YP_001874679.1</th><th>704</th><th>C</th><th>56617</th><th>58731</th>
-
- 					<th>sctV</th><th>1031.4</th><th>4.4e-308</th>
- 					<th>1031.2</th><th>4.9e-308</th><th>0</th><th>1</th>
- 					<th>8</th><th>702</th>
- 				</tr>
-
- 			  			 	<tr>
- 					<th id="YEPS004p01_000740" class="sycD">YEPS004p01_000740</th><th>YP_001874680.1</th><th>114</th><th>C</th><th>58718</th><th>59062</th>
- 					<th>sycD</th><th>25.6</th><th>0.0000051</th>
- 					<th>23.4</th><th>0.000025</th><th>6.5e-7</th><th>0.63</th>
-
- 					<th>54</th><th>113</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000750" class="">YEPS004p01_000750</th><th>YP_001874681.1</th><th>122</th><th>C</th><th>59059</th><th>59427</th>
- 					<th></th><th></th><th></th>
-
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000760" class="sycN">YEPS004p01_000760</th><th>YP_001874682.1</th><th>123</th><th>C</th><th>59424</th><th>59795</th>
- 					<th>sycN</th><th>208.2</th><th>1.4e-62</th>
-
- 					<th>208.1</th><th>1.5e-62</th><th>5e-65</th><th>1</th>
- 					<th>1</th><th>122</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000770" class="yopN">YEPS004p01_000770</th><th>YP_001874683.1</th><th>92</th><th>C</th><th>59782</th><th>60060</th>
-
- 					<th>yopN</th><th>27.6</th><th>9.2e-7</th>
- 					<th>27.5</th><th>0.000001</th><th>8.5e-9</th><th>0.22</th>
- 					<th>7</th><th>74</th>
- 				</tr>
-
- 			  			 	<tr>
- 					<th id="YEPS004p01_000780" class="yopN">YEPS004p01_000780</th><th>YP_001874684.1</th><th>293</th><th>C</th><th>60041</th><th>60922</th>
- 					<th>yopN</th><th>359</th><th>8.1e-108</th>
- 					<th>358.8</th><th>9.2e-108</th><th>1.1e-109</th><th>1</th>
-
- 					<th>32</th><th>282</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000790" class="sctN">YEPS004p01_000790</th><th>YP_001874685.1</th><th>439</th><th>D</th><th>61120</th><th>62439</th>
- 					<th>sctN</th><th>741.4</th><th>7.1e-221</th>
-
- 					<th>741.3</th><th>8e-221</th><th>2.2e-223</th><th>0.99</th>
- 					<th>8</th><th>438</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000800" class="sctO">YEPS004p01_000800</th><th>YP_001874686.1</th><th>154</th><th>D</th><th>62436</th><th>62900</th>
-
- 					<th>sctO</th><th>230.7</th><th>2.9e-69</th>
- 					<th>230.5</th><th>3.3e-69</th><th>1.4e-71</th><th>1</th>
- 					<th>2</th><th>147</th>
- 				</tr>
-
- 			  			 	<tr>
- 					<th id="YEPS004p01_000810" class="">YEPS004p01_000810</th><th>YP_001874687.1</th><th>455</th><th>D</th><th>62900</th><th>64267</th>
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
-
- 			  			 	<tr>
- 					<th id="YEPS004p01_000820" class="sctQ">YEPS004p01_000820</th><th>YP_001874688.1</th><th>307</th><th>D</th><th>64264</th><th>65187</th>
- 					<th>sctQ</th><th>100.4</th><th>1.3e-26</th>
- 					<th>97.1</th><th>1.3e-25</th><th>4.2e-29</th><th>1</th>
-
- 					<th>233</th><th>301</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000830" class="sctR">YEPS004p01_000830</th><th>YP_001874689.1</th><th>217</th><th>D</th><th>65184</th><th>65837</th>
- 					<th>sctR</th><th>319.6</th><th>2e-93</th>
-
- 					<th>319.4</th><th>2.3e-93</th><th>5.2e-97</th><th>1</th>
- 					<th>17</th><th>215</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000840" class="sctS">YEPS004p01_000840</th><th>YP_001874690.1</th><th>88</th><th>D</th><th>65839</th><th>66105</th>
-
- 					<th>sctS</th><th>123.3</th><th>7.4e-34</th>
- 					<th>123.2</th><th>8.4e-34</th><th>1.9e-37</th><th>0.99</th>
- 					<th>5</th><th>84</th>
- 				</tr>
-
- 			  			 	<tr>
- 					<th id="YEPS004p01_000850" class="sctT">YEPS004p01_000850</th><th>YP_001874691.1</th><th>261</th><th>D</th><th>66102</th><th>66887</th>
- 					<th>sctT</th><th>312.3</th><th>5.9e-91</th>
- 					<th>312.1</th><th>6.6e-91</th><th>1.5e-94</th><th>1</th>
-
- 					<th>10</th><th>258</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000860" class="sctU">YEPS004p01_000860</th><th>YP_001874692.1</th><th>354</th><th>D</th><th>66887</th><th>67951</th>
- 					<th>sctU</th><th>502.3</th><th>1.6e-148</th>
-
- 					<th>502.1</th><th>1.9e-148</th><th>5.8e-152</th><th>1</th>
- 					<th>2</th><th>338</th>
- 				</tr>
- 			  			 	<tr>
- 					<th id="YEPS004p01_000870" class="">YEPS004p01_000870</th><th>YP_001874693.1</th><th>131</th><th>D</th><th>68527</th><th>68922</th>
-
- 					<th></th><th></th><th></th>
- 					<th></th><th></th><th></th><th></th>
- 					<th></th><th></th>
- 				</tr>
- 			 </tbody>
- 		</table>
- 	</body>
- </html>
-  </body>
-
 </html>
\ No newline at end of file
diff --git a/src/test/style/color.css b/src/test/style/color.css
index 635204fc7904b07f383b7bf686cfb9a60b71d9de..726ac0636e9e06bb0f35355d1c7320cd3a1e079a 100644
--- a/src/test/style/color.css
+++ b/src/test/style/color.css
@@ -1,6 +1,20 @@
-.gene_sctC { background-color: blue}
-.gene_sctD { background-color: yellow}
-.gene_sctF { background-color: red}
-.gene_sctI { background-color: green}
-.gene_sctJ { background-color: orange}
-.gene_sctL { background-color: pink}
\ No newline at end of file
+.gene_sctC { background-color: BlueViolet }
+.gene_sctD { background-color: Blue}
+.gene_sctD2{ background-color: DarkCyan}
+.gene_sctF { background-color: Cyan}
+.gene_sctI { background-color: Aqua}
+.gene_sctJ { background-color: DarkGreen}
+.gene_sctL { background-color: Green}
+.gene_sctN { background-color: ForestGreen}
+.gene_sctO { background-color: LimeGreen}
+.gene_sctQ { background-color: GreenYellow}
+.gene_sctR { background-color: YellowGreen}
+.gene_sctS { background-color: Yellow}
+.gene_sctT { background-color: Gold}
+.gene_sctU { background-color: GoldenRod}
+.gene_sctV { background-color: Orange}
+.gene_sycD { background-color: DarkOrange}
+.gene_sycN { background-color: OrangeRed}
+.gene_yopB { background-color: Red}
+.gene_yopD { background-color: FireBrick}
+.gene_yopN { background-color: Maroon}
\ No newline at end of file
diff --git a/src/test/style/main.css b/src/test/style/main.css
index 8336a9908dd733b6ecaf8e3c2d3915db8ce334e9..64140bae70b4a1efe69be114e306301ac1fffb85 100644
--- a/src/test/style/main.css
+++ b/src/test/style/main.css
@@ -48,3 +48,14 @@ td{
 #genes_schema{
 	border:1px solid black;
 }
+
+body {
+        cursor: default;
+    }
+
+.grabbing{
+	cursor: url("../closedhand.cur") , default !important;
+}
+.grabbable{
+    cursor: url("../openhand.cur") , default !important;
+}

Gene-code	Gene-Id	Protein-length	Strand	Begin	End	Match	Full-score	Evalue	Best-domain-score	Best-domain-evalue	c-Evalue	Coverage-profile	Match-begin	Match-end
DEPI001WGSc01_006560	ZP_03310782.1	347	D	100	200	sctU	359.7	3.8e-105	359.5	4.4e-105	1.4e-108	1	2	338
DEPI001WGSc01_006590	ZP_03310785.1	697		490	510	sctV	20	8.7e-244	818.7	1e-243	2.4e-247	0.99	15	695
DEPI001WGSc01_006830	ZP_03310809.1	398	C	1000	1100	sctQ	63.1	5.5e-15	58.6	1.5e-13	4.7e-17	0.96	312	378
Gene-code	Gene-Id	Protein-length	Strand	Begin	End	Match	Full-score	E-value	Best-domain-score	Best-domain-evalue	C-value	Coverage-profile	Match-begin	Match-end
YEPS004p01_000010	YP_001874607.1	137	D	452	865
YEPS004p01_000020	YP_001874608.1	607	D	871	2694	sctC	632.4	1.3e-187	371.7	1.3e-108	5.4e-112	0.5	242	509
YEPS004p01_000030	YP_001874609.1	419	D	2691	3950	sctD	479.3	4e-144	479.2	4.5e-144	7.2e-146	1	5	413
YEPS004p01_000040	YP_001874610.1	66	D	3947	4147
YEPS004p01_000050	YP_001874611.1	87	D	4148	4411	sctF	113.9	1.6e-33	113.7	1.8e-33	2.5e-35	1	16	86
YEPS004p01_000060	YP_001874612.1	115	D	4413	4760
YEPS004p01_000070	YP_001874613.1	165	D	4757	5254
YEPS004p01_000080	YP_001874614.1	115	D	5255	5602	sctI	199.3	7.9e-60	199.2	8.8e-60	7.1e-62	1	4	115
YEPS004p01_000090	YP_001874615.1	244	D	5609	6343	sctJ	309.5	3.3e-90	309.4	3.6e-90	8.9e-94	1	2	243
YEPS004p01_000100	YP_001874616.1	208	D	6346	6972
YEPS004p01_000110	YP_001874617.1	210	D	6951	7583	sctL	219	2.1e-65	218.8	2.4e-65	4.4e-67	0.99	21	201
YEPS004p01_000120	YP_001874618.1	115	D	7808	8155
YEPS004p01_000130	YP_001874619.1	88	D	8703	8969
YEPS004p01_000140	YP_001874620.1	140	D	9005	9427
YEPS004p01_000150	YP_001874621.1	468	C	10231	11637
YEPS004p01_000160	YP_001874622.1	158	D	12078	12554
YEPS004p01_000170	YP_001874623.1	288	C	13140	14006
YEPS004p01_000180	YP_001874624.1	732	C	14402	16600
YEPS004p01_000190	YP_001874625.1	149	C	16608	17057
YEPS004p01_000630	YP_001874669.1	71	D	47328	47543
YEPS004p01_000640	YP_001874670.1	529	C	47586	49175
YEPS004p01_000650	YP_001874671.1	71	C	49563	49778
YEPS004p01_000660	YP_001874672.1	402	D	50528	51736
YEPS004p01_000670	YP_001874673.1	306	C	52228	53148	yopD	474.3	6.5e-143	474.1	7.4e-143	1.9e-145	1	21	306
YEPS004p01_000680	YP_001874674.1	401	C	53167	54372	yopB	486.4	1.7e-146	485.8	2.7e-146	1.4e-148	1	102	401
YEPS004p01_000690	YP_001874675.1	168	C	54350	54856	sycD	113.7	1.7e-33	113.7	1.7e-33	4.5e-35	0.99	37	130
YEPS004p01_000700	YP_001874676.1	326	C	54869	55849
YEPS004p01_000710	YP_001874677.1	95	C	55851	56138
YEPS004p01_000720	YP_001874678.1	146	C	56180	56620
YEPS004p01_000730	YP_001874679.1	704	C	56617	58731	sctV	1031.4	4.4e-308	1031.2	4.9e-308	0	1	8	702
YEPS004p01_000740	YP_001874680.1	114	C	58718	59062	sycD	25.6	0.0000051	23.4	0.000025	6.5e-7	0.63	54	113
YEPS004p01_000750	YP_001874681.1	122	C	59059	59427
YEPS004p01_000760	YP_001874682.1	123	C	59424	59795	sycN	208.2	1.4e-62	208.1	1.5e-62	5e-65	1	1	122
YEPS004p01_000770	YP_001874683.1	92	C	59782	60060	yopN	27.6	9.2e-7	27.5	0.000001	8.5e-9	0.22	7	74
YEPS004p01_000780	YP_001874684.1	293	C	60041	60922	yopN	359	8.1e-108	358.8	9.2e-108	1.1e-109	1	32	282
YEPS004p01_000790	YP_001874685.1	439	D	61120	62439	sctN	741.4	7.1e-221	741.3	8e-221	2.2e-223	0.99	8	438
YEPS004p01_000800	YP_001874686.1	154	D	62436	62900	sctO	230.7	2.9e-69	230.5	3.3e-69	1.4e-71	1	2	147
YEPS004p01_000810	YP_001874687.1	455	D	62900	64267
YEPS004p01_000820	YP_001874688.1	307	D	64264	65187	sctQ	100.4	1.3e-26	97.1	1.3e-25	4.2e-29	1	233	301
YEPS004p01_000830	YP_001874689.1	217	D	65184	65837	sctR	319.6	2e-93	319.4	2.3e-93	5.2e-97	1	17	215
YEPS004p01_000840	YP_001874690.1	88	D	65839	66105	sctS	123.3	7.4e-34	123.2	8.4e-34	1.9e-37	0.99	5	84
YEPS004p01_000850	YP_001874691.1	261	D	66102	66887	sctT	312.3	5.9e-91	312.1	6.6e-91	1.5e-94	1	10	258
YEPS004p01_000860	YP_001874692.1	354	D	66887	67951	sctU	502.3	1.6e-148	502.1	1.9e-148	5.8e-152	1	2	338
YEPS004p01_000870	YP_001874693.1	131	D	68527	68922