commit ed5e83c5cb123a89b7057911973767a583b5d5aa
Author: Marc Souviron <marc.souviron@vous-et-nous.com>
Date:   Tue Aug 27 01:51:31 2013 +0200

    Amélioration du système de navigation assisté par OSM ou google
    Correction d'un bug de non-linéarité sur les panoramas rebouclés (360°)
    simplification du style

diff --git a/addParams.php b/addParams.php
index 5688ddf..7bb2e85 100644
--- a/addParams.php
+++ b/addParams.php
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
-   <link rel="stylesheet" media="screen" href="css/index_style.css" />
+   <link rel="stylesheet" media="screen" href="css/base.css" />
    <title>Positionnerment dun panoramique</title>
 <?php
    // tableau de vérification de conformité
diff --git a/creerPano.php b/creerPano.php
index 6c581ab..2997630 100644
--- a/creerPano.php
+++ b/creerPano.php
@@ -3,7 +3,7 @@
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
     <title>Liste des images transformables en panoramas</title>
-    <link rel="stylesheet" media="screen" href="css/index_style.css"/>
+    <link rel="stylesheet" media="screen" href="css/base.css"/>
   </head>
   <body>
     <header>
diff --git a/css/index_style.css b/css/base.css
similarity index 96%
rename from css/index_style.css
rename to css/base.css
index ad5b829..d891bb8 100644
--- a/css/index_style.css
+++ b/css/base.css
@@ -46,6 +46,7 @@ h2 {
     font-weight:bold;
     color:#F00;
 }
+
 #pano-list li {
     list-style-type:circle;
     list-style-position:inside;
@@ -93,6 +94,11 @@ footer {
     background-color:#fff;
 }
 
+form li {
+    padding:1em;
+    list-style-type:none;
+}
+
 .validators a {
   border:solid 0.2em #FFF;
 }
diff --git a/css/ttn_style_1.css b/css/ttn_style_1.css
deleted file mode 100644
index 25ffd14..0000000
--- a/css/ttn_style_1.css
+++ /dev/null
@@ -1,135 +0,0 @@
-body
-	{
-		
-		background:#44F;
-		font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
-		font-size:small;
-		margin:8px 0 16px;
-		text-align:center;
-		overflow:auto;
-		
-	}
-	
-	#top
-	{
-		display:block;
-		height:10px;
-		margin:10px auto 0;
-		width:650px;
-	}
-	
-	div#page_container
-	{
-		background:#fff;
-		
-		margin: auto;
-		text-align:left;
-		width:640px;
-	}
-	
-	div#page_container h2 {
-		display:inline-block;
-		margin:1.05em;
-		text-shadow: 0.1em 0.1em 0.15em #44F; 
-	}
-	#bottom
-	{
-		display:block;
-		height:10px;
-		margin:0 auto;
-		width:650px;
-	}
-	
-	h1
-	{
-		background-color:#6699CC;
-		margin:0;
-		min-height:0;
-		padding:0;
-		text-decoration:none;
-		text-align: center;
-		
-	}
-	
-	h1 a
-	{
-		
-		display:block;
-		height:100%;
-		min-height:40px;
-		
-	}
-	
-	h1 img
-	{
-		margin-top: 8px;
-	}
-	
-	img
-	{
-		/*behavior:url(css/iepngfix.htc);*/
-		border:none;
-	}
-	
-	h2 + p {
-		display:inline-block;
-		
-	}
-	
-	div#containerList
-	{
-		margin:20px 20px 0;
-		padding:0 0 20px;
-	}
-	
-	#containerList
-	{
-		font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
-		
-	}
-	
-	#containerList li
-	{
-		width:100%;
-		margin:1.05em;
-		font-size:14px;
-		list-style-type:none;
-		
-	}
-	
-	div#containerList ul
-	{
-		font-size:100%;
-		list-style-type:circle;
-		margin:0;
-		padding:0;
-		width:100%;
-	}
-	
-	li a{
-	
-	    color:#3F2DFF;
-	    text-decoration:none;
-	    font-size:16px;
-    }
-	 
-	li a:hover {
-		color:#FF9900;
-		text-decoration:underline;
-	}
-	
-	li img {
-		margin-left:20px;
-	}
-	
-	#footer
-	{
-		width:640px;
-		clear:both;
-		color:#999999;
-		text-align:center;
-		width:640px;
-		padding-bottom: 15px;
-		font-size: 85%;
-	}
-	
\ No newline at end of file
diff --git a/css/view.css b/css/view.css
deleted file mode 100644
index a4520bc..0000000
--- a/css/view.css
+++ /dev/null
@@ -1,268 +0,0 @@
-body
-{
-	
-	background:#44F;
-	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
-	font-size:small;
-	margin:8px 0 16px;
-	text-align:center;
-}
-
-#form_container
-{
-	background:#fff;
-	
-	margin:0 auto;
-	text-align:left;
-	width:640px;
-}
-
-#top
-{
-	display:block;
-	height:10px;
-	margin:10px auto 0;
-	width:650px;
-}
-
-#footer
-{
-	width:640px;
-	clear:both;
-	color:#999999;
-	text-align:center;
-	width:640px;
-	padding-bottom: 15px;
-	font-size: 85%;
-}
-
-#footer a{
-	color:#999999;
-	text-decoration: none;
-	border-bottom: 1px dotted #999999;
-}
-
-#bottom
-{
-	display:block;
-	height:10px;
-	margin:0 auto;
-	width:650px;
-}
-
-form.appnitro
-{
-	margin:20px 20px 0;
-	padding:0 0 20px;
-}
-
-h1
-{
-	background-color:#6699CC;
-	margin:0;
-	min-height:0;
-	padding:0;
-	text-decoration:none;
-	text-align: center;
-	
-}
-
-h1 a
-{
-	
-	display:block;
-	height:100%;
-	min-height:40px;
-	overflow:hidden;
-}
-
-
-h1 img
-{
-	margin-top: 8px;
-	
-}
-
-img
-{
-	/*behavior:url(css/iepngfix.htc);*/
-	border:none;
-}
-
-div#form_container h2 
-{
-	margin:1.05em;
-	text-shadow: 0.1em 0.1em 0.15em #44F; 
-}
-/**** Form Section ****/
-.appnitro
-{
-	font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
-	font-size:small;
-}
-
-.appnitro li
-{
-	width:61%;
-}
-
-form ul
-{
-	font-size:100%;
-	list-style-type:none;
-	margin:0;
-	padding:0;
-	width:100%;
-}
-
-form li
-{
-	display:block;
-	margin:0;
-	padding:4px 5px 2px 9px;
-	position:relative;
-}
-
-form li:after
-{
-	clear:both;
-	content:".";
-	display:block;
-	height:0;
-	visibility:hidden;
-}
-
-.buttons:after
-{
-	clear:both;
-	content:".";
-	display:block;
-	height:0;
-	visibility:hidden;
-}
-
-.buttons
-{
-	clear:both;
-	display:block;
-	margin-top:10px;
-}
-
-* html form li
-{
-	height:1%;
-}
-
-* html .buttons
-{
-	height:1%;
-}
-
-* html form li div
-{
-	display:inline-block;
-}
-
-form li div
-{
-	color:#444;
-	margin:0 4px 0 0;
-	padding:0 0 8px;
-}
-
-.clear
-{
-	clear:both;
-}
-
-form li div label
-{
-	clear:both;
-	color:#444;
-	display:block;
-	font-size:9px;
-	line-height:9px;
-	margin:0;
-	padding-top:3px;
-}
-
-
-form li span
-{
-	color:#444;
-	float:left;
-	margin:0 4px 0 0;
-	padding:0 0 8px;
-}
-
-.form_description
-{
-	border-bottom:1px dotted #ccc;
-	clear:both;
-	display:inline-block;
-	margin:0 0 1em;
-}
-
-.form_description[class]
-{
-	display:block;
-}
-
-.form_description h2
-{
-	clear:left;
-	font-size:160%;
-	font-weight:400;
-	margin:0 0 3px;
-}
-
-.form_description p
-{
-	font-size:95%;
-	line-height:130%;
-	margin:0 0 12px;
-}
-
-div#infoSize #bulle,#txtInfo
-{
-	display:inline-block;
-}
-
-img#bulle
-{
-	margin-right:1.1em;
-}
-
-#pb_outer {
-	height: 20px;
-	border: 1px inset #000000;
-	width: 80%;
-	margin: 20px auto;
-	display: none;
-}
-#pb_inner {
-	font-weight: bold;
-	color: #FFFFFF;
-	background-color: #003399;
-	height: 20px;
-	width: 1px;
-	text-align: center;
-}
-
-div#genererPano 
-{
-	border:2px inset #FF0;
-	border-radius:4px;
-	width : 40%;
-	margin : auto;
-	margin-bottom: 10px; 
-	
-}
-
-label#l_generer
-{
-	background-color:#6699CC;
-	padding:2px;
-	border-radius:10px;
-}
-
diff --git a/envoyer.php b/envoyer.php
index bcb168b..db39f90 100644
--- a/envoyer.php
+++ b/envoyer.php
@@ -3,34 +3,39 @@
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
     <link type="image/x-icon" rel="shortcut icon" href="images/tsf.png"/>
-    <link rel="stylesheet" media="screen" href="css/view.css" />
+    <link rel="stylesheet" media="screen" href="css/base.css" />
     <title>Envoi d'une image sur le serveur</title>
   </head>
   <body id="main_body">
-    <img id="top" src="images/top.png" alt="">
-    <div id="form_container">
-      <h1><img src="images/tetaneutral.svg"></h1>
+    <header>
+      <h1><img src="images/tetaneutral.svg" alt="tetaneutral.net"/></h1>
+    </header>
+    <section id="main">
+      <h2>Ajouter un nouveau panorama</h2>
       <form action="uploadReceive.php" method="post" enctype="multipart/form-data" id="upload">
-	<h2>Ajouter un nouveau panorama</h2>
 	<ul>
-	  <li id="li_1" >
-	    <label for="file" class="description">Envoyer le fichier :</label>
+	  <li>
+	    <label for="file" class="description">Envoyer le fichier :</label>
 	    <div>
-	      <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="panoramas"/>
-	      <input type="file" name="files[]" id="file" multiple="multiple"
-		     title="Le fichier à envoyer doit être une image de taille maximale 300 Mo"/>
+	    <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="panoramas"/>
+	    <input type="file" name="files[]" id="file" multiple="multiple"
+		   title="Le fichier à envoyer doit être une image de taille maximale 300 Mo"/>
 	    </div>  
 	  </li>
 	  
-	  <li class="buttons">
-	    <input type="submit" name="submit" id="submit" value="Submit" />
+	  <li>
+	    <input type="submit" name="submit" value="Envoyer" />
 	  </li>
 	</ul>
       </form>
-      <!-- Fin du formulaire -->
-      <div id="footer">
-	<a href="./index.php">Retour liste</a>
-      </div>
-    </div>
+      <a href="./index.php">Retour liste</a>
+    </section>
+    <footer class="validators"><samp>
+	page validée par
+	<a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_xhtml.svg"
+								 alt="Valid XHTML" title="xHTML validé !"/></a>
+	<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/valid_css.svg"
+									alt="CSS validé !" title="CSS validé !"/></a>
+    </samp></footer>
   </body>
 </html>
diff --git a/index.php b/index.php
index 0f63830..f2587a6 100644
--- a/index.php
+++ b/index.php
@@ -3,7 +3,7 @@
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
     <title>Liste des panoramas</title>
-    <link rel="stylesheet" media="screen" href="css/index_style.css"/>
+    <link rel="stylesheet" media="screen" href="css/base.css"/>
   </head>
   <body>
     <header>
diff --git a/js/pano.js b/js/pano.js
index 6482bf5..a4afca6 100644
--- a/js/pano.js
+++ b/js/pano.js
@@ -122,6 +122,9 @@ function draw_image(ox, oy) {
 	}
     }
     drawDecorations(ox, oy);
+    var cap_ele = zm.get_cap_ele(last.x, last.y);
+    angle_control.value = cap_ele.cap.toFixed(2);
+    elvtn_control.value = cap_ele.ele.toFixed(2);
 }
 
 function draw_tile_del(ref, idx, tx, ty, ox, oy, twidth, theight) {
@@ -162,13 +165,6 @@ function drawDecorations(ox, oy, tx, ty, twidth, theight) {
 	}
     }
 
-    //cntext.font = "20pt Arial";
-    //cntext.fillRect(0, 0, 200, 20);
-    //cntext.fillStyle = "rgb(255,0,0)";
-    //cntext.fillText(od.toFixed(2), 5, 20);
-    //for (i=0; i<canvas.width/wgrd; i++) {
-	//cntext.strokeRect(i*wgrd, 0, wgrd, 20);
-    //}
     if (twidth) {
 	cntext.restore();
     }
@@ -464,10 +460,10 @@ function tzoom(zv) {
 		    dpix  = this.im.width - this.ref_pixels[this.ref_pixels.length-1].x + this.ref_pixels[1].x;
 		    delt = this.ref_pixels[this.ref_pixels.length-1].shift_y - this.ref_pixels[1].shift_y;
 		}
-		this.ref_pixels[0].dshft_y = delt/dpix;
+		this.ref_pixels[0].dshft_y = -delt/dpix;
 		this.ref_pixels[ord_pts.length].dshft_y = this.ref_pixels[0].dshft_y;
 		dpix = this.im.width - this.ref_pixels[ord_pts.length].x;
-		this.ref_pixels[0].shift_y = this.ref_pixels[ord_pts.length].shift_y - dpix*this.ref_pixels[0].dshft_y;
+		this.ref_pixels[0].shift_y = this.ref_pixels[ord_pts.length].shift_y + dpix*this.ref_pixels[0].dshft_y;
 	    } else {
 		this.ref_pixels[0].shift_y = this.ref_pixels[1].shift_y;
 		this.ref_pixels[0].dshft_y = 0;
diff --git a/js/utils_osm.js b/js/utils_osm.js
index c42c4e6..db7761c 100644
--- a/js/utils_osm.js
+++ b/js/utils_osm.js
@@ -24,7 +24,17 @@ function draw_map() {
 	map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: ''}));
     }
 
-    map.addLayer(new OpenLayers.Layer.OSM());
+    if (typeof base_layers != 'undefined') {
+	map.addControl(new OpenLayers.Control.LayerSwitcher());
+	for (var i = 0; i < base_layers.length; i++) {
+	    map.addLayer(base_layers[i]);
+	    if (base_layers[i].type == google.maps.MapTypeId.SATELLITE) {
+		base_layers[i].mapObject.setTilt(0);
+	    }
+	}
+    } else {
+	map.addLayer(new OpenLayers.Layer.OSM());
+    }
 
     if (typeof contour != 'undefined') contours = [contour];
     if (typeof contours == 'undefined') contours = new Array;
@@ -53,6 +63,46 @@ function draw_map() {
 	map.addLayer(cntr);
     }
 
+    if (typeof ref_line != 'undefined') ref_lines = [ref_line];
+    if (typeof ref_lines != 'undefined') {
+	if (typeof def_line_style == 'undefined') def_line_style = {};
+	var def_ln = {
+	    width:       def_line_style.width? def_line_style.width:2,
+	    color:       def_line_style.color? def_line_style.color:'#00F',
+	    length:      def_line_style.length? def_line_style.length:20000,
+	    opacity:     def_line_style.opacity? def_line_style.opacity:1}
+	
+	var lineLayer = new OpenLayers.Layer.Vector("ref_lines"); 
+	map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));                                     
+	for (var i = 0; i < ref_lines.length; i++) {
+	    var ln = ref_lines[i];
+	    if(isNaN(ln.cap)) {
+		var pt = {lon: ln.lon2, lat: ln.lat2};
+	    } else {
+		var LonLat = new OpenLayers.LonLat(ln.lon1, ln.lat1);
+		var dist = ln.length? ln.length:def_ln.length;
+		var pt = OpenLayers.Util.destinationVincenty(LonLat, ln.cap, dist);
+	    }
+	    var points = new Array(
+		new OpenLayers.Geometry.Point(ln.lon1, ln.lat1),
+		new OpenLayers.Geometry.Point(pt.lon, pt.lat)
+	    );
+	    points[0].transform("EPSG:4326", map.getProjectionObject());
+	    points[1].transform("EPSG:4326", map.getProjectionObject());
+	    var line = new OpenLayers.Geometry.LineString(points);
+
+	    var style = { 
+		strokeColor:   ln.color? ln.color:def_ln.color, 
+		strokeWidth:   ln.width? ln.width:def_ln.width,
+		strokeOpacity: ln.width? ln.opacity:def_ln.opacity
+	    };
+
+	    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
+	    lineLayer.addFeatures([lineFeature]);
+	}
+	map.addLayer(lineLayer);                    
+    }
+
     if (typeof ref_point != 'undefined') ref_points = [ref_point];
     if (typeof ref_points != 'undefined') {
 	refpts_layer = new OpenLayers.Layer.Vector("ref_points", {projection: "EPSG:4326"}); 
@@ -114,51 +164,11 @@ function draw_map() {
 	}
 	if (typeof zoom == 'undefined') map.zoomToExtent(refpts_layer.getDataExtent());
     }
-
-    if (typeof ref_line != 'undefined') ref_lines = [ref_line];
-    if (typeof ref_lines != 'undefined') {
-	if (typeof def_line_style == 'undefined') def_line_style = {};
-	var def_ln = {
-	    width:       def_line_style.width? def_line_style.width:2,
-	    color:       def_line_style.color? def_line_style.color:'#00F',
-	    length:      def_line_style.length? def_line_style.length:20000,
-	    opacity:     def_line_style.opacity? def_line_style.opacity:1}
-	
-	var lineLayer = new OpenLayers.Layer.Vector("ref_lines"); 
-	map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));                                     
-	for (var i = 0; i < ref_lines.length; i++) {
-	    var ln = ref_lines[i];
-	    if(isNaN(ln.cap)) {
-		var pt = {lon: ln.lon2, lat: ln.lat2};
-	    } else {
-		var LonLat = new OpenLayers.LonLat(ln.lon1, ln.lat1);
-		var dist = ln.length? ln.length:def_ln.length;
-		var pt = OpenLayers.Util.destinationVincenty(LonLat, ln.cap, dist);
-	    }
-	    var points = new Array(
-		new OpenLayers.Geometry.Point(ln.lon1, ln.lat1),
-		new OpenLayers.Geometry.Point(pt.lon, pt.lat)
-	    );
-	    points[0].transform("EPSG:4326", map.getProjectionObject());
-	    points[1].transform("EPSG:4326", map.getProjectionObject());
-	    var line = new OpenLayers.Geometry.LineString(points);
-
-	    var style = { 
-		strokeColor:   ln.color? ln.color:def_ln.color, 
-		strokeWidth:   ln.width? ln.width:def_ln.width,
-		strokeOpacity: ln.width? ln.opacity:def_ln.opacity
-	    };
-
-	    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
-	    lineLayer.addFeatures([lineFeature]);
-	}
-	map.addLayer(lineLayer);                    
-    }
     if (typeof get_lon_lat != 'undefined' && get_lon_lat) {
 	map.events.register("click", map, function(e) {
 	    var position = map.getLonLatFromViewPortPx(e.xy);
 	    position.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
-	    alert(position.lon.toFixed(3) + ', ' + position.lat.toFixed(3));
+	    alert(position.lat.toFixed(5) + ', ' + position.lon.toFixed(5));
 	});
     }
 }
diff --git a/ref_points.php b/ref_points.php
index 36f027d..199fa1a 100644
--- a/ref_points.php
+++ b/ref_points.php
@@ -1,6 +1,6 @@
 <?php
 $ref_points = array (
-                     'Marc' => array(43.60568, 1.42841, 170),
+                     'Marc' => array(43.60570, 1.42846, 170),
                      'FF2' => array(43.67737, 1.45077, 140),
 		     'Clocher de Saint-Sernin' => array(43.6085, 1.4424, 214),
 		     'Clocher des Minimes' => array(43.61811, 1.43639, 192),
@@ -22,5 +22,6 @@ $ref_points = array (
 		     "Cheminée du sang de serp" => array(43.62494, 1.42202, 170),
 		     "Château d'eau de blagnac" => array(43.62443, 1.39547, 170),
 		     "Château d'eau de fenouillet" => array(43.67984, 1.39290,170),
+		     "Château d'eau d'Aucamville" => array(43.66759, 1.42796, 170),
 		     "Tour du boulevard de Genève" => array(43.617408, 1.419533, 163),
 		     );
diff --git a/show_capline.php b/show_capline.php
index e40c9d9..98cc5ff 100644
--- a/show_capline.php
+++ b/show_capline.php
@@ -2,7 +2,7 @@
   <title>Visualisation axe horizontal sur OSM</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link type="image/x-icon" rel="shortcut icon" href="images/tsf.png"/>
-  <link rel="stylesheet" type="text/css" href="style.css" />
+  <link rel="stylesheet" type="text/css" href="map.css" />
 <?php
 if (isset($_REQUEST['cap']) && isset($_REQUEST['org_lat']) && isset($_REQUEST['org_lon'])) {
   $cap = $_REQUEST['cap'];
@@ -17,11 +17,18 @@ if (isset($_REQUEST['title'])) {
 } else {
   $pt_comment = 'Le point de départ';
 }
+if (isset($_REQUEST['dist'])) {
+  $dist = $_REQUEST['dist'];
+} else {
+  $dist = 120000;
+}
 if ($complete) {
   echo <<< EOS
+<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
+<script src="http://openlayers.org/api/OpenLayers.js"></script>
     <script>
     zoom = 12;
-  var get_lon_lat = false;
+  var get_lon_lat = true;
   var scale_line = true;
 
   var def_points_style = {
@@ -50,11 +57,29 @@ var ref_line = {
  lat1: $org_lat,
  cap: $cap,
  width: 2,
- length: 120000,
+ length: $dist,
  color: '#F00'
 };
+var base_layers = [
+		   new OpenLayers.Layer.OSM(),
+		   new OpenLayers.Layer.Google(
+					       "Google Satellite",
+  {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
+					       ),
+		   new OpenLayers.Layer.Google(
+					       "Google Physical",
+  {type: google.maps.MapTypeId.TERRAIN, visibility: false}
+					       ),
+		   new OpenLayers.Layer.Google(
+					       "Google Streets",
+  {numZoomLevels: 20, visibility: false}
+					       ),
+		   new OpenLayers.Layer.Google(
+					       "Google Hybrid",
+  {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 22, visibility: false}
+					       )];
+
 </script>
-<script src="http://openlayers.org/api/OpenLayers.js"></script>
 <script src="js/utils_osm.js"></script>
 EOS;
 }
