WebSVN – eFlore/Applications.cel – Path Comparison – / – /branches/v1.6-croc/widget/modules/saisie/squelettes/ Rev 1546 and /branches/v1.6-croc/widget/modules/saisie/squelettes/ Rev 1547

Ignore whitespace Rev 1546 → Rev 1547

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/favicon.ico
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/favicon.ico
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/chargement.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/chargement.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/aide.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/aide.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/supprimer.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/supprimer.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/chargement.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/chargement.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/logos/sdmr.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/logos/sdmr.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/debut.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/debut.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/relief.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/relief.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/panneau.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/panneau.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/fin.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/fin.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/fleur.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/fleur.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/classic.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/classic.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/chargement_arbre.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/chargement_arbre.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

 /branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/css/sauvages.css
 New file
 ,0 → 1,392
+@CHARSET "UTF-8";
+body {
+        padding:0;
+        margin:0;
+        width:100%;
+        height:100%;
+        font-family:Arial;
+        font-size:12px;
+        background-color:#FFF;
+        color:#000;
+}
+h1 {
+        font-size:1.6em;
+}
+h2 {
+        font-size:1.4em;
+        text-transform:uppercase;
+        letter-spacing:0.3em;
+        padding:5px 10px;
+        background:#A1CA10;
+        width:250px;
+        margin-bottom:0;
+        margin-left:2px;
+        -webkit-border-radius: 10px 10px 0 0;-moz-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0;
+        line-height:2em;
+}
+a, a:active, a:visited {
+        border-bottom:1px dotted #666;
+        color:#181;
+        text-decoration:none;
+}
+a:active {
+        outline:none;
+}
+a:focus {
+        outline:thin dotted;
+}
+a:hover {
+        color:#56B80E;
+        border-bottom:1px dotted #56B80E;
+}
+/*+-----------------------------------------------------------------------------------------------------------------+*/
+/* Présentation des listes de définitions */
+dl {
+        width:100%;
+}
+dt {
+        float:left;
+        font-weight:bold;
+        text-align:top left;
+        margin-right:0.3em;
+}
+dd {
+        width:auto;
+        margin:0.5em 0;
+}
+/*+-----------------------------------------------------------------------------------------------------------------+*/
+/* Tableau : */
+table {
+        border:1px solid gray;
+        border-collapse:collapse;
+}
+table thead, table tfoot, table tbody {
+        background-color:Gainsboro;
+        border:1px solid gray;
+        color:black;
+}
+table tbody {
+        background-color:#FFF;
+}
+table th {
+        font-family:monospace;
+        border:1px dotted gray;
+        padding:5px;
+        background-color:Gainsboro;
+}
+table td {
+        font-family:arial;
+        border:1px dotted gray;
+        padding:5px;
+        text-align:left;
+}
+table caption {
+        font-family:sans-serif;
+}
+legend {
+        font-size:1.2em;
+        color:#000;
+        text-transform:uppercase;
+        letter-spacing:0.2em;
+        padding:5px 10px;
+}
+.colonne_milieu {
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Générique */
+.discretion {
+        color:grey;
+        font-family:arial;
+        font-size:11px;
+}
+.nettoyage{
+        clear:both;
+}
+hr.nettoyage{
+        visibility:hidden;
+}
+label[title]:after, th[title]:after, span[title]:after {
+    content: " " url("../images/icones/aide.png");
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Positionnement général */
+#zone-appli {
+        margin:0 auto;
+        width:600px;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Formulaire générique */
+fieldset {
+        background-color:#fff;
+}
+input[type="text"], select, textarea {
+        width:240px;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Formulaire spécifique */
+#zone-fiche-terrain, #zone-fiche-terrain-photo{
+        background:#A1CA10;
+        width:600px;
+        margin-left:2px;
+        padding-bottom:10px;
+}
+#zone-fiche-terrain{
+        -webkit-border-radius: 0 10px 0 0;-moz-border-radius: 0 10px 0 0;border-radius: 0 10px 0 0;
+}
+#zone-fiche-terrain-photo{
+        -webkit-border-radius: 0 0 10px 10px;-moz-border-radius: 0 0 10px 10px;border-radius: 0 0 10px 10px;
+        margin-top:-10px;
+}
+#zone-liste-obs{
+        padding-bottom:25px;
+        margin-top:15px;
+        -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
+}
+#saisie-obs fieldset{
+        display:block;
+}
+#saisie-obs label{
+        font-weight:bold;
+}
+#partie-observation, #partie-preview, #partie-station{
+        margin-top:10px;
+}
+#partie-date * {
+        position: relative;
+        z-index:50;
+}
+#partie-station, #partie-observation, #partie-photo, #partie-date{
+        width:550px;
+        margin-left:10px;
+        background:#E5E5E5;
+        -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
+}
+#partie-station legend, #partie-observation legend, #partie-photo legend, #partie-date legend{
+        background:#E5E5E5;
+        -webkit-border-radius: 10px 10px 0 0 ;-moz-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0;
+}
+#saisie-obs ul {
+        list-style-type:none;
+        margin:0;
+        padding:0;
+}
+#saisie-obs li {
+        margin:5px;
+}
+/*-------------------------------------------------------*/
+/* Partie-identification */
+#partie-identification, #partie-identification legend{
+        background:#A1CA10;
+        -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
+}
+#partie-identification{
+        width:582px;
+}
+#partie-identification li{
+        float: left;
+    margin-left: 20px;
+        display:inline;
+        width:250px;
+}
+#partie-identification label{
+        /*display:block;*/
+}
+/*-------------------------------------------------------*/
+/* Partie-station */
+#partie-station fieldset{
+        margin-top:0;
+}
+#partie-station label {
+    width: 120px;
+        display:block;
+        float:left;
+}
+#latitude, #longitude {
+        width:70px;
+        float:left;
+}
+#latitude {
+        margin-right:5px;
+}
+#lat-lon-info {
+        margin-left:5px;
+}
+#partie-observation label{
+        width:120px;
+        float:left;
+}
+#partie-observation li{
+        margin :10px;
+}
+#partie-station #label_map_canvas {
+        width: 100%;
+}
+#map-canvas {
+        width:525px;
+        height: 340px;
+}
+#partie-station #partie-lat-lon label.error{
+        float:left;
+        width:80px;
+}
+#partie-observation li li, #rue_numeros li{
+        width :150px;
+        float:left;
+        margin :5px;
+}
+#rue_numeros li{
+        width :265px;
+        float:left;
+        margin:0;
+}
+#rue_numeros li label{
+        width:80px;
+        float:left;
+}
+#rue_numeros li input{
+        width:175px;
+}
+#partie-observation li li label.error{
+        position: relative;
+    margin-top: -42px;
+        margin-left:50px;
+        float:left;
+}
+label[for=milieu]{
+        display:block;
+        width:100%;
+}
+label[for=coordonnees-geo] {
+        display:block;
+        width:100% !important;
+}
+ul#coordonnees-geo {
+        list-style-type:none;
+        float:left;
+        width: 100%;
+}
+ul#coordonnees-geo li {
+        float: left;
+    margin: 5px;
+        width: 201px;
+}
+ul#coordonnees-geo #coord-lat,ul#coordonnees-geo #coord-lng {
+        width: 70px;
+}
+ul#coordonnees-geo #info-commune{
+        width: 150px;
+}
+ul#liste-milieux{
+        float:left;
+}
+ul#liste-milieux li{
+        display:inline;
+        width:100px;
+}
+#notes{
+        width:400px;
+}
+#rue{
+        /**width:440px;**/
+    left: 35px;
+    position: relative;
+    top: 35px;
+    width: 320px;
+    z-index: 45;
+}
+.indication_geolocalisation {
+        color:#118811;
+    font-style: italic;
+    font-weight: bold;
+        font-weight:0.9em;
+}
+.indication_geolocalisation {
+    height: 30px;
+    position: relative;
+    top: 15px;
+}
+/*-------------------------------------------------------*/
+/* Photo */
+#resultat,.resultat {
+        width:20%;
+}
+.resultat {
+        width:30px;
+}
+#form-upload{
+        margin-top:10px;
+}
+#miniature-info{
+        margin:0;
+}
+.b64{
+        max-width:100px;
+        max-height:100px;
+}
+/*-------------------------------------------------------*/
+/* Partie-preview */
+#partie-preview legend, #partie-preview{
+        background:#A1CA10;
+        -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
+}
+#partie-preview {
+        width:582px;
+        border:none;
+}
+.supprimer-obs{
+        background-color:transparent;
+        border:none;
+        padding:0;
+    cursor:pointer;
+}
+.obs-miniature {
+        text-align:center;
+}
+.obligatoire {
+        color:red;
+}
+label.error {
+        display:inline;
+        float:none;
+        padding-left:.5em;
+        color:red;
+}
+#partie-observation label.error,#partie-station label.error {
+        width:150px;
+        float:right;
+}
+#ajouter-obs{
+        margin-left:407px;
+        margin-top:10px;
+        font-size:20px;
+        background:#181;
+        color:#FFF;
+        -webkit-border-radius: 5x;-moz-border-radius: 5px;border-radius: 5px;
+        height:35px;
+        width:137px;
+}
+#transmettre-obs{
+        margin-left:400px;
+        margin-top:5px;
+        font-size:20px;
+        background:#811;
+        color:#FFF;
+        -webkit-border-radius: 5x;-moz-border-radius: 5px;border-radius: 5px;
+        height:35px;
+}
+/*-------------------------------------------------------*/
+/* Autocomplete */
+.valeur-defaut-recherche {
+        color:#848484;
+        font-style:italic;
+        font-weight:0.9em;
+}

 /branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/js/sauvages.js
 New file
 ,0 → 1,707
+//+---------------------------------------------------------------------------------------------------------+
+// GÉNÉRAL
+/**
+ * Stope l'évènement courrant quand on clique sur un lien.
+ * Utile pour Chrome, Safari...
+ * @param evenement
+ * @return
+ */
+function arreter(evenement) {
+        if (evenement.stopPropagation) {
+                evenement.stopPropagation();
+        }
+        return false;
+}
+// TODO : voir si cette fonction est bien utile. Résoud le pb d'un warning sous chrome.
+(function(){
+    // remove layerX and layerY
+    var all = $.event.props,
+        len = all.length,
+        res = [];
+    while (len--) {
+      var el = all[len];
+      if (el != 'layerX' && el != 'layerY') res.push(el);
+    }
+    $.event.props = res;
+}());
+//+----------------------------------------------------------------------------------------------------------+
+//UPLOAD PHOTO : Traitement de l'image
+$(document).ready(function() {
+        $("#effacer-miniature").click(function () {
+                supprimerMiniature();
+        });
+        if (HTML5 && window.File && window.FileReader && isCanvasSupported()) {
+                if (DEBUG) {
+                        console.log("Support OK pour : API File et Canvas.");
+                }
+                $('#fichier').bind('change', function(e) {
+                        afficherMiniatureHtml5(e);
+                });
+        } else {
+                $("#fichier").bind('change', function (e) {
+                        arreter(e);
+                        var options = {
+                                success: afficherMiniature, // post-submit callback
+                                dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type)
+                                resetForm: true // reset the form after successful submit
+                        };
+                        $("#form-upload").ajaxSubmit(options);
+                        return false;
+                });
+        }
+});
+function isCanvasSupported(){
+        var elem = document.createElement('canvas');
+        return !!(elem.getContext && elem.getContext('2d'));
+}
+function afficherMiniatureHtml5(evt) {
+        supprimerMiniature();
+        var selectedfiles = evt.target.files;
+        var f = selectedfiles[0];// Nous récupérons seulement le premier fichier.
+        if (f.type != 'image/jpeg') {
+                var message = "Seule les images JPEG sont supportées.";
+                $("#miniature-msg").append(message);
+        } else if (f.size > 5242880) {
+                var message = "Votre image à un poids supérieur à 5Mo.";
+                $("#miniature-msg").append(message);
+        } else {
+                var reader = new FileReader();
+                // Lit le fichier image commune url de données
+                reader.readAsDataURL(f);
+                var imgNom = f.name;
+                // Closure pour capturer les infos du fichier
+                reader.onload = (function(theFile) {
+                        return function(e) {
+                                // Rendre la miniature
+                                var imageBase64 = e.target.result;
+                                //$("#miniature").append('<img id="miniature-img" class="miniature b64" src="'+imageBase64+'" alt="'+imgNom+'"/>');
+                                // HTML5 Canvas
+                                var img = new Image();
+                            img.src = imageBase64;
+                            img.alt = imgNom;
+                            img.onload = function() {
+                                transformerImgEnCanvas(this, 100, 100, false, 'white');
+                            };
+                        };
+                })(f);
+        }
+        $("#effacer-miniature").show();
+}
+function transformerImgEnCanvas(img, thumbwidth, thumbheight, crop, background) {
+        var canvas = document.createElement('canvas');
+        canvas.width = thumbwidth;
+        canvas.height = thumbheight;
+        var dimensions = calculerDimenssions(img.width, img.height, thumbwidth, thumbheight);
+        if (crop) {
+                canvas.width = dimensions.w;
+                canvas.height = dimensions.h;
+                dimensions.x = 0;
+                dimensions.y = 0;
+        }
+        cx = canvas.getContext('2d');
+        if (background !== 'transparent') {
+                cx.fillStyle = background;
+                cx.fillRect(0, 0, thumbwidth, thumbheight);
+        }
+        cx.drawImage(img, dimensions.x, dimensions.y, dimensions.w, dimensions.h);
+        afficherMiniatureCanvas(img, canvas);
+}
+function calculerDimensions(imagewidth, imageheight, thumbwidth, thumbheight) {
+        var w = 0, h = 0, x = 0, y = 0,
+            widthratio = imagewidth / thumbwidth,
+            heightratio = imageheight / thumbheight,
+            maxratio = Math.max(widthratio, heightratio);
+        if (maxratio > 1) {
+            w = imagewidth / maxratio;
+            h = imageheight / maxratio;
+        } else {
+            w = imagewidth;
+            h = imageheight;
+        }
+        x = (thumbwidth - w) / 2;
+        y = (thumbheight - h) / 2;
+        return {w:w, h:h, x:x, y:y};
+}
+function afficherMiniatureCanvas(imgB64, canvas) {
+        var url = canvas.toDataURL('image/jpeg' , 0.8);
+        var alt = imgB64.alt;
+        var title = Math.round(url.length / 1000 * 100) / 100 + ' KB';
+        var miniature = '<img id="miniature-img" class="miniature b64-canvas" src="'+url+'" alt="'+alt+'" title="'+title+'" />';
+        $("#miniature").append(miniature);
+        $("#miniature-img").data('b64', imgB64.src);
+}
+function afficherMiniature(reponse) {
+        supprimerMiniature();
+        if (DEBUG) {
+                var debogage = $("debogage", reponse).text();
+                console.log("Débogage upload : "+debogage);
+        }
+        var message = $("message", reponse).text();
+        if (message != '') {
+                $("#miniature-msg").append(message);
+        } else {
+                var miniatureUrl = $("miniature-url", reponse).text();
+                var imgNom = $("image-nom", reponse).text();
+                $("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>');
+        }
+        $("#effacer-miniature").show();
+}
+function supprimerMiniature() {
+        $("#miniature").empty();
+        $("#miniature-msg").empty();
+        $("#effacer-miniature").hide();
+}
+//+----------------------------------------------------------------------------------------------------------+
+// GOOGLE MAP
+var geocoder;
+var map;
+// marqueurs de début et fin de rue
+var marker;
+var markerFin;
+// coordonnées de début et fin de rue
+var latLng;
+var latLngFin;
+// ligne reliant les deux points de début et fin
+var ligneRue;
+// Booléen de test afin de ne pas faire apparaitre la fin de rue à la premiere localisation
+var premierDeplacement = true;
+function initialiserGoogleMap(){
+        // Carte
+        latLng = new google.maps.LatLng(48.8543, 2.3483);// Paris
+        if (VILLE == 'Marseille') {
+                latLng = new google.maps.LatLng(43.29545, 5.37458);
+        } else if (VILLE == 'Montpellier') {
+                latLng = new google.maps.LatLng(43.61077, 3.87672);
+        }
+        latLngFin = latLng;
+        var options = {
+                zoom: 16,
+                center: latLng,
+                mapTypeId: google.maps.MapTypeId.HYBRID,
+                mapTypeControlOptions: {
+                        mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]}
+        };
+        // Ajout de la couche OSM à la carte
+        osmMapType = new google.maps.ImageMapType({
+                getTileUrl: function(coord, zoom) {
+                        return "http://tile.openstreetmap.org/" +
+                        zoom + "/" + coord.x + "/" + coord.y + ".png";
+                },
+                tileSize: new google.maps.Size(256, 256),
+                isPng: true,
+                alt: 'OpenStreetMap',
+                name: 'OSM',
+                maxZoom: 19
+        });
+        // Création de la carte Google
+        map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas
+        map.mapTypes.set('OSM', osmMapType);
+        // Geocodeur
+        geocoder = new google.maps.Geocoder();
+        // Marqueur google draggable
+        marker = new google.maps.Marker({
+                map: map,
+                draggable: true,
+                title: 'Début de la portion de rue étudiée',
+                icon: MARQUEUR_ICONE_DEBUT_URL,
+                position: latLng
+        });
+        deplacerMarker(latLng);
+        // Tentative de geocalisation
+        if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(function(position) {
+                        var latitude = position.coords.latitude;
+                        var longitude = position.coords.longitude;
+                        latLng = new google.maps.LatLng(latitude, longitude);
+                        latLngFin = latLng;
+                        // si l'utilisateur géolocalise sa ville alors le premier déplacement doit être réinitialisé
+                        premierDeplacement = true;
+                        deplacerMarker(latLng);
+                });
+        }
+}
+var valeurDefautRechercheLieu = "";
+$(document).ready(function() {
+        initialiserGoogleMap();
+        gererAffichageValeursParDefaut();
+        // Autocompletion du champ adresse
+        $("#rue").autocomplete({
+                //Cette partie utilise geocoder pour extraire des valeurs d'adresse
+                source: function(request, response) {
+                        geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, function(results, status) {
+                                if (status == google.maps.GeocoderStatus.OK) {
+                                        response($.map(results, function(item) {
+                                                var rue = "";
+                                                $.each(item.address_components, function(){
+                                                        if (this.types[0] == "route" || this.types[0] == "street_address" ) {
+                                                                rue = this.short_name;
+                                                        }
+                                                });
+                                                var retour = {
+                                                        label: item.formatted_address,
+                                                        value: rue,
+                                                        latitude: item.geometry.location.lat(),
+                                                        longitude: item.geometry.location.lng()
+                                                };
+                                                return retour;
+                                        }));
+                                } else {
+                                        afficherErreurGoogleMap(status);
+                                }
+                        });
+                },
+                // Cette partie est executee a la selection d'une adresse
+                select: function(event, ui) {
+                        latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
+                        deplacerMarker(latLng);
+                        afficherEtapeGeolocalisation(2);
+                }
+        });
+        $("#geolocaliser").click(function() {
+                var latitude = $('#latitude').val();
+                var longitude = $('#longitude').val();
+                latLng = new google.maps.LatLng(latitude, longitude);
+                deplacerMarker(latLng);
+        });
+        google.maps.event.addListener(marker, 'dragend', function() {
+                trouverCommune(marker.getPosition());
+                mettreAJourMarkerPosition(marker.getPosition());
+                deplacerMarker(marker.getPosition());
+        });
+        google.maps.event.addListener(map, 'click', function(event) {
+                deplacerMarker(event.latLng);
+        });
+});
+function gererAffichageValeursParDefaut() {
+        afficherEtapeGeolocalisation(1);
+}
+function afficherEtapeGeolocalisation(numEtape) {
+        $(".liste_indication_geolocalisation").children().hide();
+        $(".liste_indication_geolocalisation :nth-child("+numEtape+")").show();
+}
+function afficherErreurGoogleMap(status) {
+        if (DEBUG) {
+                $("#dialogue-google-map").empty();
+                $("#dialogue-google-map").append('<pre class="msg-erreur">'+
+                        "Le service de Géocodage de Google Map a échoué à cause de l'erreur : "+status+
+                        '</pre>');
+                $("#dialogue-google-map").dialog();
+        }
+}
+function deplacerMarker(latLng) {
+        if (marker != undefined) {
+                marker.setPosition(latLng);
+                map.setCenter(latLng);
+                //map.setZoom(18);
+                trouverCommune(latLng);
+                if(!premierDeplacement) {
+                        if(markerFin != undefined) {
+                                markerFin.setMap(null);
+                        }
+                        latLngFin = new google.maps.LatLng(latLng.lat(), latLng.lng() + 0.0010);
+                        // Marqueur google draggable
+                        markerFin = new google.maps.Marker({
+                                map: map,
+                                draggable: true,
+                                title: 'Fin de la portion de rue étudiée',
+                                icon: MARQUEUR_ICONE_FIN_URL,
+                                position: latLngFin
+                        });
+                        google.maps.event.addListener(markerFin, 'dragend', function() {
+                                dessinerLigneRue(marker.getPosition(), markerFin.getPosition());
+                                latLngFin = markerFin.getPosition();
+                                latLngCentre = new google.maps.LatLng((latLngFin.lat() + latLng.lat())/2, (latLngFin.lng() + latLng.lng())/2);
+                                mettreAJourMarkerPosition(latLngCentre);
+                                afficherEtapeGeolocalisation(4);
+                        });
+                        dessinerLigneRue(latLng, latLngFin);
+                        latLngCentre = new google.maps.LatLng((latLngFin.lat() + latLng.lat())/2, (latLngFin.lng() + latLng.lng())/2);
+                        mettreAJourMarkerPosition(latLng);
+                        afficherEtapeGeolocalisation(3);
+                } else {
+                        mettreAJourMarkerPosition(latLng);
+                }
+                premierDeplacement = false;
+        }
+}
+function dessinerLigneRue(pointDebut, pointFin) {
+        if(ligneRue != undefined) {
+                ligneRue.setMap(null);
+        }
+        ligneRue = new google.maps.Polyline({
+            path: [pointDebut, pointFin],
+            strokeColor: "#FF0000",
+            strokeOpacity: 1.0,
+            strokeWeight: 2
+          });
+        ligneRue.setMap(map);
+}
+function mettreAJourMarkerPosition(latLng) {
+        var lat = latLng.lat().toFixed(5);
+        var lng = latLng.lng().toFixed(5);
+        remplirChampLatitude(lat);
+        remplirChampLongitude(lng);
+}
+function remplirChampLatitude(latDecimale) {
+        var lat = Math.round(latDecimale*100000)/100000;
+        $('#latitude').val(lat);
+}
+function remplirChampLongitude(lngDecimale) {
+        var lng = Math.round(lngDecimale*100000)/100000;
+        $('#longitude').val(lng);
+}
+function trouverCommune(pos) {
+        $(function() {
+                var urlNomCommuneFormatee = SERVICE_NOM_COMMUNE_URL.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
+                $.ajax({
+                        url : urlNomCommuneFormatee,
+                        type : "GET",
+                        dataType : "jsonp",
+                        beforeSend : function() {
+                                $(".commune-info").empty();
+                                $("#dialogue-erreur").empty();
+                        },
+                        success : function(data, textStatus, jqXHR) {
+                                $(".commune-info").empty();
+                                if(data != null) {
+                                        $("#commune-nom").append(data.nom);
+                                        $("#commune-code-insee").append(data.codeINSEE);
+                                        $("#marqueur-commune").data('commune', {'nom' : data.nom, 'codeInsee' : data.codeINSEE});
+                                }
+                        },
+                        statusCode : {
+: function(jqXHR, textStatus, errorThrown) {
+                                        if (DEBUG) {
+                                                $("#dialogue-erreur").append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');
+                                                reponse = jQuery.parseJSON(jqXHR.responseText);
+                                                var erreurMsg = "";
+                                                if (reponse != null) {
+                                                        $.each(reponse, function (cle, valeur) {
+                                                                erreurMsg += valeur + "<br />";
+                                                        });
+                                                }
+                                                $("#dialogue-erreur").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
+                                        }
+                            }
+                        },
+                        error : function(jqXHR, textStatus, errorThrown) {
+                                if (DEBUG) {
+                                        $("#dialogue-erreur").append('<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>');
+                                        reponse = jQuery.parseJSON(jqXHR.responseText);
+                                        var erreurMsg = "";
+                                        if (reponse != null) {
+                                                $.each(reponse, function (cle, valeur) {
+                                                        erreurMsg += valeur + "<br />";
+                                                });
+                                        }
+                                        $("#dialogue-erreur").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
+                                }
+                        },
+                        complete : function(jqXHR, textStatus) {
+                                if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
+                                        var debugMsg = "";
+                                        debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
+                                        if (debugInfos != null) {
+                                                $.each(debugInfos, function (cle, valeur) {
+                                                        debugMsg += valeur + "<br />";
+                                                });
+                                                $("#dialogue-erreur").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
+                                        }
+                                }
+                                if ($("#dialogue-erreur .msg").length > 0) {
+                                        $("#dialogue-erreur").dialog();
+                                }
+                        }
+                });
+        });
+}
+//+---------------------------------------------------------------------------------------------------------+
+// FORMULAIRE
+$(document).ready(function() {
+        $("#date").datepicker($.datepicker.regional['fr']);
+        $("form#saisie-obs").validate({
+                rules: {
+                        courriel : {
+                                required : true,
+                                email : true},
+                        courriel_confirmation : {
+                                required : true,
+                                equalTo: "#courriel"
+                        },
+                        rue_cote : "required",
+                        "milieu[]" : {
+                               required: true,
+                               minlength: 1
+                        },
+                        latitude : {
+                                required: true,
+                                range: [-90, 90]},
+                        longitude : {
+                                required: true,
+                                range: [-180, 180]},
+                        date : {
+                                required: true,
+                                date: true},
+                        taxon : "required"
+                },
+                messages: {
+                        "milieu[]": "Vous devez sélectionner au moins un milieu"
+                }
+        });
+        $("#courriel_confirmation").bind('paste', function(e) {
+                $("#dialogue-bloquer-copier-coller").dialog();
+                return false;
+        });
+        //bascule le texte d'afficher à masquer
+        $("a.afficher-coord").click(function() {
+                $("a.afficher-coord").toggle();
+                $("#coordonnees-geo").toggle('slow');
+                //valeur false pour que le lien ne soit pas suivi
+                return false;
+        });
+        var obsNumero = 0;
+        $("#ajouter-obs").bind('click', function(e) {
+                if ($("#saisie-obs").valid() == false) {
+                        $("#dialogue-form-invalide").dialog();
+                } else {
+                        var milieux = [];
+                        $('input:checked["name=milieux[]"]').each(function() {
+                                milieux.push($(this).val());
+                        });
+                        var rue = ($("#rue").val() == valeurDefautRechercheLieu) ? 'non renseigné(e)' : $("#rue").val();
+                        //rassemble les obs dans un tableau html
+                        obsNumero = obsNumero + 1;
+                        $("#liste-obs tbody").append(
+                                        '<tr id="obs'+obsNumero+'" class="obs">'+
+                                        '<td>'+obsNumero+'</td>'+
+                                        '<td>'+$("#date").val()+'</td>'+
+                                        '<td>'+rue+'</td>'+
+                                        '<td>'+$("#taxon option:selected").text()+'</td>'+
+                                        '<td>'+milieux.join(',<br />')+'</td>'+
+                                        '<td>'+$("#latitude").val()+' / '+$("#longitude").val()+'</td>'+
+                                        //Ajout du champ photo
+                                        '<td class="obs-miniature">'+ajouterImgMiniatureAuTransfert()+'</td>'+
+                                        '<td>'+$("#notes").val()+'</td>'+
+                                        '<td><button class="supprimer-obs" value="'+obsNumero+'" title="Supprimer l\'observation '+obsNumero+'">'+
+                                        '<img src="'+SUPPRIMER_ICONE_URL+'"/></button></td>'+
+                                '</tr>');
+                        //rassemble les obs dans #liste-obs
+                        var numNomSel = $("#taxon").val();
+                        $("#liste-obs").data('obsId'+obsNumero, {
+                                'date' : $("#date").val(),
+                                'num_nom_sel' : numNomSel,
+                                'nom_sel' : taxons[numNomSel]['nom_sel'],
+                                'nom_ret' : taxons[numNomSel]['nom_ret'],
+                                'num_nom_ret' : taxons[numNomSel]['num_nom_ret'],
+                                'num_taxon' : taxons[numNomSel]['num_taxon'],
+                                'famille' : taxons[numNomSel]['famille'],
+                                'nom_fr' : taxons[numNomSel]['nom_fr'],
+                                'milieu' : milieux.join(','),
+                                'latitude' : $("#latitude").val(),
+                                'longitude' : $("#longitude").val(),
+                                'commune_nom' : $("#commune-nom").text(),
+                                'commune_code_insee' : $("#commune-code-insee").text(),
+                                'lieudit' : rue,
+                                'station' : latLng.lat().toFixed(5)+','+latLng.lng().toFixed(5)+';'+latLngFin.lat().toFixed(5)+','+latLngFin.lng().toFixed(5)+';'+$("#rue_cote").val(),
+                                'notes' : $("#notes").val(),
+                                //Ajout des champs images
+                                'image_nom' : $("#miniature-img").attr('alt'),
+                                'image_b64' : getB64ImgOriginal()
+                        });
+                        // retour à une sélection vide pour le taxon
+                        $('#taxon option[value=""]').attr("selected", "selected");
+                }
+        });
+        $(".supprimer-obs").live('click', supprimerObs);
+        $("#transmettre-obs").click(function(e) {
+                var observations = $("#liste-obs").data();
+                if (observations == undefined || jQuery.isEmptyObject(observations)) {
+                        $("#dialogue-zero-obs").dialog();
+                } else if ($("#saisie-obs").valid() == false) {
+                        $("#dialogue-form-invalide").dialog();
+                } else {
+                        observations['projet'] = 'Sauvages';
+                        var utilisateur = new Object();
+                        utilisateur.prenom = $("#prenom").val();
+                        utilisateur.nom = $("#nom").val();
+                        utilisateur.courriel = $("#courriel").val();
+                        observations['utilisateur'] = utilisateur;
+                        var erreurMsg = "";
+                        $.ajax({
+                                url : SERVICE_SAISIE_URL,
+                                type : "POST",
+                                data : observations,
+                                dataType : "json",
+                                beforeSend : function() {
+                                        $(".msg").remove();
+                                        $(".msg-erreur").remove();
+                                        $(".msg-debug").remove();
+                                        $("#chargement").show();
+                                },
+                                success : function(data, textStatus, jqXHR) {
+                                        var message = 'Merci Beaucoup! Vos observations ont bien été transmises aux chercheurs.<br />'+
+                                    'Elles sont désormais affichées sur la carte Sauvages de ma rue, <br />'+
+                                    'et s\'ajoutent aux données du Carnet en ligne (<a href="http://www.tela-botanica.org/widget:cel:carto">voir la carte</a>) de Tela Botanica <br />'+
+                                        '<br /> '+
+                                        'Bonne continuation! <br />'+
+                                        '<br /> '+
+                                        'Si vous souhaitez modifier ou supprimer vos données, vous pouvez les retrouver en vous connectant au <a href="http://www.tela-botanica.org/page:cel">Carnet en ligne</a>. <br /> '+
+                                        '(Attention, il est nécessaire de s\'inscrire gratuitement à Tela Botanica au préalable, si ce n\'est pas déjà fait). <br /> '+
+                                        '<br /> '+
+                                        'Pour toute question, n\'hésitez pas: notre contact: sauvages@tela-botanica.org ';
+                                        $("#dialogue-obs-transaction").append('<p class="msg">'+message+'</p>');
+                                        supprimerMiniature();
+                                },
+                                statusCode : {
+: function(jqXHR, textStatus, errorThrown) {
+                                                $("#chargement").hide();
+                                                erreurMsg += "Erreur 500 :\ntype : "+textStatus+' '+errorThrown+"\n";
+                                                if (DEBUG) {
+                                                        $("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');
+                                                }
+                                    }
+                                },
+                                error : function(jqXHR, textStatus, errorThrown) {
+                                        erreurMsg += "Erreur Ajax :\ntype : "+textStatus+' '+errorThrown+"\n";
+                                        try {
+                                                reponse = jQuery.parseJSON(jqXHR.responseText);
+                                                if (reponse != null) {
+                                                        $.each(reponse, function (cle, valeur) {
+                                                                erreurMsg += valeur + "\n";
+                                                        });
+                                                }
+                                        } catch(e) {
+                                                erreurMsg += "L'erreur n'était pas en JSON.";
+                                        }
+                                        if (DEBUG) {
+                                                $("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');
+                                        }
+                                },
+                                complete : function(jqXHR, textStatus) {
+                                        $("#chargement").hide();
+                                        var debugMsg = '';
+                                        if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
+                                                debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
+                                                if (debugInfos != null) {
+                                                        $.each(debugInfos, function (cle, valeur) {
+                                                                debugMsg += valeur + "\n";
+                                                        });
+                                                }
+                                        }
+                                        if (erreurMsg != '') {
+                                                $("#dialogue-obs-transaction").append('<p class="msg">'+
+                                                                'Une erreur est survenue lors de la transmission de vos observations.'+'<br />'+
+                                                                'Vous pouvez signaler le disfonctionnement à <a href="'+
+                                                                'mailto:cel@tela-botanica.org'+'?'+
+                                                                'subject=Disfonctionnement du widget de saisie Biodiversite34'+
+                                                                "&body="+erreurMsg+"\nDébogage :\n"+debugMsg+
+                                                                '">cel@tela-botanica.org</a>.'+
+                                                                '</p>');
+                                        }
+                                        if (DEBUG) {
+                                                $("#dialogue-obs-transaction").append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>');
+                                        }
+                                        $("#dialogue-obs-transaction").dialog();
+                                        $("#liste-obs").removeData();
+                                        $('.obs').remove();
+                                        obsNumero = 0;
+                                }
+                        });
+                }
+                return false;
+        });
+});
+function getB64ImgOriginal() {
+        var b64 = '';
+        if ($("#miniature-img").hasClass('b64')) {
+                b64 = $("#miniature-img").attr('src');
+        } else if ($("#miniature-img").hasClass('b64-canvas')) {
+                b64 = $("#miniature-img").data('b64');
+        }
+        return b64;
+}
+function supprimerObs() {
+        var obsId = $(this).val();
+        // Problème avec IE 6 et 7
+        if (obsId == "Supprimer") {
+                obsId = $(this).attr("title");
+        }
+        $('#obs'+obsId).remove();
+        $("#liste-obs").removeData('obsId'+obsId);
+}
+function ajouterImgMiniatureAuTransfert() {
+        var miniature = '';
+        if ($("#miniature img").length == 1) {
+                var css = $("#miniature-img").hasClass('b64') ? 'miniature b64' : 'miniature';
+                var src = $("#miniature-img").attr("src");
+                var alt = $("#miniature-img").attr("alt");
+                miniature = '<img class="'+css+'" alt="'+alt+'"src="'+src+'" />';
+        }
+        return miniature;
+}

/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/sauvages_image.tpl.xml
New file
0,0 → 1,7
<?='<?xml version="1.0" encoding="UTF-8"?>'."\n";?>
<root>
<miniature-url><?=$urlMiniature?></miniature-url>
<image-nom><?=$imageNom?></image-nom>
<message><?=$message?></message>
<debogage><?=$debogage?></debogage>
</root>

 /branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/sauvages.tpl.html
 New file
 ,0 → 1,324
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+        <head>
+                <title>Sauvages de ma rue</title>
+                <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+                <meta http-equiv="Content-style-type" content="text/css" />
+                <meta http-equiv="Content-script-type" content="text/javascript" />
+                <meta http-equiv="Content-language" content="fr" />
+                <meta name="revisit-after" content="15 days" />
+        <meta name="robots" content="index,follow" />
+        <meta name="author" content="Céline VIDAL, Jean-Pascal MILCENT" />
+        <meta name="keywords" content="Tela Botanica, Natural Solutions, MNHN, Sauvages de ma rue, CEL" />
+        <meta name="description" content="Widget de saisie simplifié pour le projet Sauvages de ma rue" />
+                <!-- Favicones -->
+                <link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/sauvages/images/favicon.ico" />
+                <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+                <!-- Javascript : bibliothèques -->
+                <!-- Google Map v3 -->
+                <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
+                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
+                <!-- Jquery -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/js/jquery-ui-1.8.17.custom.min.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/js/jquery.ui.datepicker-fr.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/jquery.validate.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
+                <script src="<?=$url_base?>saisie?projet=sauvages&amp;service=taxons" type="text/javascript"></script>
+                <!-- Javascript : appli saisie -->
+                <script type="text/javascript">
+                //<![CDATA[
+                        // La présence du parametre 'debug' dans l'URL enclenche le dégogage
+                        var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
+                        // La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
+                        var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
+                        // La présence du parametre 'ville' dans l'URL géolocalise
+                        var VILLE = "<?=isset($_GET['ville']) ? $_GET['ville'] : ''?>";
+                        VILLE = <?= isset($_GET['commune']) ? "'".$_GET['commune']."'" : 'VILLE' ?>;
+                        // URL du web service réalisant l'insertion des données dans la base du CEL.
+                        var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
+                        // Squelette d'URL du web service d'eFlore fournissant les noms de communes.
+                        var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
+                        // URL du marqueur à utiliser dans la carte Google Map
+                        var MARQUEUR_ICONE_DEBUT_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/debut.png";
+                        // URL de l'icône du bouton supprimer
+                        var SUPPRIMER_ICONE_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/icones/supprimer.png";
+                        // URL de l'icône du chargement en cours
+                        var CHARGEMENT_ICONE_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/icones/chargement.gif";
+                        // URL de l'icône de fin de rue
+                        var MARQUEUR_ICONE_FIN_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/fin.png";
+                //]]>
+                </script>
+                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/sauvages/js/sauvages.js"></script>
+                <!-- CSS -->
+                <link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/css/ui-darkness/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" media="screen" />
+                <link href="<?=$url_base?>modules/saisie/squelettes/sauvages/css/<?=isset($_GET['style']) ? $_GET['style'] : 'sauvages'?>.css" rel="stylesheet" type="text/css" media="screen" />
+        </head>
+        <body>
+                <div id="zone-appli">
+                        <?php if($titre == 'defaut' ) { ?>
+                                <h1 id="widget-titre"><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/images/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1>
+                        <?php } else { ?>
+                                <h1 id="widget-titre"><?= $titre ?></h1>
+                        <?php } ?>
+                        <form id="saisie-obs" action="#" enctype="multipart/form-data" autocomplete="on">
+                                <fieldset id="partie-identification">
+                                        <legend>Observateur</legend>
+                                        <ul>
+                                                <li>
+                                                        <label for="prenom">Prénom</label>
+                                                        <input id="prenom" name="prenom" type="text" value=""/>
+                                                </li>
+                                                <li>
+                                                        <label for="nom">Nom</label>
+                                                        <input id="nom" name="nom" type="text" value=""/>
+                                                </li>
+                                                <li>
+                                                        <label for="courriel" class="oblig"
+                                                                title="Saisissez votre adresse email. Elle vous permettra de retrouver vos données, et ne sera pas utilisée à des fins commerciales.">
+                                                                <strong class="obligatoire">*</strong> Courriel
+                                                        </label>
+                                                        <input id="courriel" name="courriel" type="text" value=""/>
+                                                </li>
+                                                <li>
+                                                        <label for="courriel_confirmation" class="oblig" title="Saisissez à nouveau votre adresse email pour la confirmer">
+                                                                <strong class="obligatoire">*</strong> Courriel (confirmation)
+                                                        </label>
+                                                        <input id="courriel_confirmation" name="courriel_confirmation" type="text" value=""/>
+                                                </li>
+                                        </ul>
+                                </fieldset>
+                                <h2>Fiche de terrain</h2>
+                                <div id="zone-fiche-terrain">
+                                        <fieldset id="partie-date">
+                                                <legend>Date du relevé</legend>
+                                                <ul>
+                                                        <li>
+                                                                <label for="date" title="Indiquez la date de votre relevé (au format jj/mm/aaaa) ou utilisez le calendrier">
+                                                                        <strong class="obligatoire">*</strong> Date du relevé
+                                                                </label>
+                                                                <input id="date" name="date" type="text" value="" />
+                                                        </li>
+                                                </ul>
+                                        </fieldset>
+                                        <fieldset id="partie-station">
+                                                <legend>Lieu du relevé</legend>
+                                                <ul>
+                                                        <li>
+                                                                <label id="label_map_canvas" for="map_canvas" class="oblig" title="Sur la carte ci-dessous, retracez le parcours étudié, en placant d'abord le point de début de la rue, puis le point de fin">
+                                                                        <strong class="obligatoire">*</strong> Localisation de la rue étudiée
+                                                                </label>
+                                                        </li>
+                                                        <li>
+                                                                <ul class="liste_indication_geolocalisation">
+                                                                        <li class="indication_geolocalisation">1ere étape : Entrez le nom de la rue et de la ville dans l'espace de recherche ci-dessous</li>
+                                                                        <li class="indication_geolocalisation">2eme étape : Placez le drapeau vert au début de la portion de rue étudiée</li>
+                                                                        <li class="indication_geolocalisation">3eme étape : Placez le drapeau rouge à la fin de la portion de rue étudiée, si vous vous êtes trompé,
+                                                                                                                                                        vous pouvez redéplacer le drapeau vert</li>
+                                                                        <li class="indication_geolocalisation">4eme étape : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li>
+                                                                </ul>
+                                                                <input id="rue" name="rue" type="text" placeholder="Entrez un nom de ville, de lieu ou de rue..." value="" />
+                                                        </li>
+                                                        <li id="map-canvas"></li>
+                                                        <li>
+                                                                <label for="coordonnees-geo">
+                                                                        <a href="#" class="afficher-coord">Afficher</a>
+                                                                        <a href="#" class="afficher-coord" style="display:none;">Cacher</a>
+                                                                        Les coordonnées géographiques
+                                                                        <span id="lat-lon-info" class="info"
+                                                                                title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
+                                                                                (WGS84)
+                                                                        </span>
+                                                                </label>
+                                                                <ul id="coordonnees-geo" style="display:none;">
+                                                                        <li id="coord-lat">
+                                                                                <label for="latitude">Latitude</label>
+                                                                                <input id="latitude" name="latitude" type="text" value=""/>
+                                                                        </li>
+                                                                        <li id="coord-lng">
+                                                                                <label for="longitude">Longitude</label>
+                                                                                <input id="longitude" name="longitude" type="text" value=""/>
+                                                                        </li>
+                                                                        <li id="info-commune">
+                                                                        <label for="marqueur-commune">Commune</label><br />
+                                                                        <span id="marqueur-commune">
+                                                                                <span id="commune-nom" class="commune-info"></span>
+                                                                                (<span id="commune-code-insee" class="commune-info" title="Code INSEE de la commune"></span>)
+                                                                        </span>
+                                                                </li>
+                                                                        <li>
+                                                                                <input id="geolocaliser" type="button" value="Voir sur la carte"/>
+                                                                        </li>
+                                                                </ul>
+                                                        </li>
+                                                        <li>
+                                                                <hr class="nettoyage" />
+                                                        </li>
+                                                        <li>
+                                                                <ul>
+                                                                        <li>
+                                                                                <label for="rue_cote" title="Choisissez le (ou les) côté(s) de la rue que vous avez étudié">
+                                                                                        <strong class="obligatoire">*</strong>
+                                                                                        Côté de la rue
+                                                                                </label>
+                                                                                <select id="rue_cote" name="rue_cote">
+                                                                                        <option value="">Sélectionner un type de côté</option>
+                                                                                        <option value="pair">Pair</option>
+                                                                                        <option value="impair">Impair</option>
+                                                                                        <option value="2cotes">Les deux</option>
+                                                                                </select>
+                                                                        </li>
+                                                                </ul>
+                                                        </li>
+                                                </ul>
+                                        </fieldset>
+                                        <fieldset id="partie-observation">
+                                                <legend>Observations</legend>
+                                                <ul>
+                                                        <li>
+                                                                <label for="taxon" title="Choisissez une espèce rencontrée. Si vous avez trouvé d'autres espèces non listées, n'hésitez pas à le signaler dans les notes">
+                                                                        <strong class="obligatoire">*</strong>
+                                                                        Espèce
+                                                                </label>
+                                                                <select id="taxon" name="taxon">
+                                                                        <option value="">Sélectionner une espèce</option>
+                                                                        <?php foreach ($taxons as $taxon) :?>
+                                                                                <option <?= $taxon['nom_ret']== $taxon['nom_fr'] ? 'style="font-style:italic;"' : '' ?> value="<?=$taxon['num_nom_sel']?>"
+                                                                                        title="<?=$taxon['nom_ret'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>">
+                                                                                        <?=$taxon['nom_fr']?>
+                                                                                </option>
+                                                                        <?php endforeach; ?>
+                                                                </select>
+                                                        </li>
+                                                        <li>
+                                                                <label for="liste-milieux" title="Indiquez le (ou les) milieu(x) dans lequel (lesquels) vous avez rencontré cette espèce">
+                                                                        <strong class="obligatoire">*</strong>
+                                                                        Milieu
+                                                                </label>
+                                                                <ul id="liste-milieux">
+                                                                        <?php foreach ($milieux as $milieu => $description) : ?>
+                                                                        <li>
+                                                                                <input type="checkbox" class="milieu" name="milieu[]" value="<?=$milieu?>"
+                                                                                        <?=($description != '') ? 'title="'.$description.'"': '' ?>/>
+                                                                                <?=$milieu?>
+                                                                        </li>
+                                                                        <?php endforeach; ?>
+                                                                </ul>
+                                                                <hr class="nettoyage" />
+                                                        </li>
+                                                        <li>
+                                                                <label for="notes">Notes</label>
+                                                                <textarea id="notes" name="notes" rows="3" cols="4" placeholder="Indiquez nous en particulier le ou les outils d'identification que vous avez utilisé, et toute autre information concernant le milieu ou l'espèce" ></textarea>
+                                                        </li>
+                                                </ul>
+                                        </fieldset>
+                                </div><!-- zone-fiche-terrain-->
+                        </form>
+                        <div id="zone-fiche-terrain-photo">
+                                <form id="form-upload"  action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
+                                        method="post" enctype="multipart/form-data">
+                                        <fieldset id="partie-photo">
+                                                <legend>Ajouter une photo</legend>
+                                                <p id="miniature-info" class="discretion">Vous pouvez ajouter une photo correspondant à cette espèce. La photo doit être au format JPEG et ne doit pas excéder 5Mo.</p>
+                                                <input type="file" id="fichier" name="fichier" accept="image/jpeg"/>
+                                                <input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
+                                                <p id="miniature-msg">&nbsp;</p>
+                                                <div id="miniature"></div>
+                                                <button id="effacer-miniature" type="button" style="display:none;">Effacer</button>
+                                        </fieldset>
+                                </form>
+                                <div>
+                                        <button id="ajouter-obs" type="button">Ajouter</button>
+                                </div>
+                        </div><!-- zone-fiche-terrain-photo -->
+                        <!-- Affiche le tableau récapitualif des observations ajoutées -->
+                        <div id="zone-liste-obs">
+                                <form action="#" >
+                                        <fieldset id="partie-preview">
+                                                <legend>Liste des observations à transmettre</legend>
+                                                <table id="liste-obs">
+                                                        <thead>
+                                                                <tr>
+                                                                        <th>N&deg;</th>
+                                                                        <th>Date</th>
+                                                                        <th>Adresse</th>
+                                                                        <th>Nom</th>
+                                                                        <th>Milieu(x)</th>
+                                                                        <th title="Latitude / Longitude">Lat./Long.</th>
+                                                                        <th>Photo</th>
+                                                                        <th>Notes</th>
+                                                                        <th></th>
+                                                                </tr>
+                                                        </thead>
+                                                        <tbody></tbody>
+                                                </table>
+                                                <button id="transmettre-obs" type="button">Transmettre</button>
+                                        </fieldset>
+                                </form>
+                        </div> <!-- zone-liste-obs : wrap3 -->
+                </div>
+                <!-- Messages d'erreur du formulaire-->
+                <div id="dialogue-bloquer-copier-coller" style="display: none;" title="Information copier/coller">
+                        <p>
+                                Merci de ne pas copier/coller votre courriel.<br/>
+                                La double saisie permet de vérifier l'absence d'erreurs.
+                        </p>
+                </div>
+                <div id="dialogue-zero-obs" style="display: none;" title="Information aucune observation">
+                        <p>Veuillez saisir des observations pour les transmettres.</p>
+                </div>
+                <div id="dialogue-form-invalide" style="display: none;" title="Validation du formulaire">
+                        <p>Certains champs n'ont pas été saisis correctement, veuillez vérifier les champs saisis.</p>
+                </div>
+                <div id="dialogue-obs-transaction" style="display: none;" title="Transmission des observations"></div>
+                <div id="dialogue-google-map" style="display: none;" title="Information sur Google Map"></div>
+                <div id="dialogue-erreur" style="display: none;" title="Erreur"></div>
+                <div id="chargement" style="position:fixed;z-index:1000;top:0;left:0;height:100%;width:100%;background:#777;background:rgba(90,86,93,0.7);text-align:center;display:none;">
+                        <div id="chargement-centrage" style="position:relative;width:30%;margin:0 auto;top:30%;">
+                                <img id="chargement-img" src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif" alt="Transfert en cours..."/>
+                                <p id="chargement-txt" style="color:white;font-size:1.5em;">
+                                        Transfert des observations en cours...<br />
+                                        Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre d'observation à transférer.
+                                </p>
+                        </div>
+                </div>
+                <!-- Stats : Google Analytics-->
+                <script type="text/javascript">
+                        //<![CDATA[
+                        var _gaq = _gaq || [];
+                        _gaq.push(['_setAccount', 'UA-20092557-1']);
+                        _gaq.push(['_trackPageview']);
+                        (function() {
+                          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+                          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+                        })();
+                        //]]>
+                </script>
+        </body>
+</html>

 /branches/v1.6-croc/widget/modules/saisie/squelettes/biodiversite34/js/biodiversite34.js
 New file
 ,0 → 1,432
+//+---------------------------------------------------------------------------------------------------------+
+// GÉNÉRAL
+/**
+ * Stope l'évènement courrant quand on clique sur un lien.
+ * Utile pour Chrome, Safari...
+ * @param evenement
+ * @return
+ */
+function arreter(evenement) {
+        if (evenement.stopPropagation) {
+                evenement.stopPropagation();
+        }
+        return false;
+}
+//+---------------------------------------------------------------------------------------------------------+
+// FORMULAIRE
+$(function() {
+        $("#saisie-obs").validate({
+                rules: {
+                        prenom : "required",
+                        nom : "required",
+                        courriel : {
+                                required : true,
+                                email : true},
+                        courriel_confirmation : {
+                                required : true,
+                                equalTo: "#courriel"
+                        },
+                        milieu : "required",
+                        latitude : {
+                                required: true,
+                                range: [-90, 90]},
+                        longitude : {
+                                required: true,
+                                range: [-180, 180]},
+                        date : {
+                                required: true,
+                                date: true},
+                        taxon : "required"
+                }
+        });
+        $("#date").datepicker({
+                   onClose: function(dateText, inst) {$("#saisie-obs").valid();}
+        });
+        $("#courriel_confirmation").bind('paste', function(e) {
+                $("#dialogue-bloquer-copier-coller").dialog();
+                return false;
+        });
+        $("#localiser-gg-map").fancybox({
+                'modal'                 : true,
+                'autoDimensions' : true,
+                'titleShow'             : false,
+                'onClosed'              : function() {
+                    $("#gg-map").hide();
+                },
+                'onStart'               : function(e) {
+                        arreter(e);
+                        $("#gg-map-localisation").height($(window).height() - 100);
+                        $("#gg-map-carte").height($(window).height() - 200);
+                        $("#gg-map-localisation").width($(window).width() - 100);
+                },
+                'onComplete'    : function() {
+                        initialiserCarte();
+                }
+        });
+        $("#valider-coordonnees").click(function(e) {
+                var coordonnees = $("#marqueur-coordonnees").data('latLon');
+                if (coordonnees != undefined) {
+                        $("#latitude").val(coordonnees.lat);
+                        $("#longitude").val(coordonnees.lon);
+                }
+                var commune = $("#marqueur-commune").data('commune');
+                if (commune != undefined) {
+                        $("#commune_nom").val(commune.nom);
+                        $("#commune_code_insee").val(commune.codeInsee);
+                }
+                $.fancybox.close();
+                $("#saisie-obs").valid();
+        });
+        $("#annuler-coordonnees").bind('click', function(e) {
+                $.fancybox.close();
+                $("#saisie-obs").valid()
+        });
+        var obsNumero = 0;
+        $("#ajouter-obs").bind('click', function(e) {
+                if ($("#saisie-obs").valid() == false) {
+                        $("#dialogue-form-invalide").dialog();
+                } else {
+                        obsNumero = obsNumero + 1;
+                        $("#liste-obs tbody").append(
+                                '<tr id="obs'+obsNumero+'" class="obs">'+
+                                        '<td>'+obsNumero+'</td>'+
+                                        '<td>'+$("#date").val()+'</td>'+
+                                        '<td>'+$("#taxon option:selected").text()+'</td>'+
+                                        '<td>'+$("#milieu option:selected").text()+'</td>'+
+                                        '<td>'+$("#latitude").val()+'</td>'+
+                                        '<td>'+$("#longitude").val()+'</td>'+
+                                        '<td>'+$("#notes").val()+'</td>'+
+                                        '<td><button class="supprimer-obs" value="'+obsNumero+'" title="'+obsNumero+'">Supprimer</button></td>'+
+                                '</tr>');
+                        var numNomSel = $("#taxon").val();
+                        $("#liste-obs").data('obsId'+obsNumero, {
+                                'date' : $("#date").val(),
+                                'num_nom_sel' : numNomSel,
+                                'nom_sel' : taxons[numNomSel]['nom_sel'],
+                                'nom_ret' : taxons[numNomSel]['nom_ret'],
+                                'num_nom_ret' : taxons[numNomSel]['num_nom_ret'],
+                                'num_taxon' : taxons[numNomSel]['num_taxon'],
+                                'famille' : taxons[numNomSel]['famille'],
+                                'nom_fr' : taxons[numNomSel]['nom_fr'],
+                                'milieu' : $("#milieu option:selected").val(),
+                                'latitude' : $("#latitude").val(),
+                                'longitude' : $("#longitude").val(),
+                                'commune_nom' : $("#commune_nom").val(),
+                                'commune_code_insee' : $("#commune_code_insee").val(),
+                                'notes' : $("#notes").val()});
+                }
+        });
+        $(".supprimer-obs").live('click', function() {
+                var obsId = $(this).val();
+                // Problème avec IE 6 et 7
+                if (obsId == "Supprimer") {
+                        obsId = $(this).attr("title");
+                }
+                $('#obs'+obsId).remove();
+                $("#liste-obs").removeData('obsId'+obsId)
+        });
+        $("#tramsmettre-obs").click(function(e) {
+                var observations = $("#liste-obs").data();
+                if (observations == undefined || jQuery.isEmptyObject(observations)) {
+                        $("#dialogue-zero-obs").dialog();
+                } else if ($("#saisie-obs").valid() == false) {
+                        $("#dialogue-form-invalide").dialog();
+                } else {
+                        observations['projet'] = 'Biodiversite34';
+                        var utilisateur = new Object();
+                        utilisateur.id_utilisateur = $("#id_utilisateur").val();
+                        utilisateur.prenom = $("#prenom").val();
+                        utilisateur.nom = $("#nom").val();
+                        utilisateur.courriel = $("#courriel").val();
+                        observations['utilisateur'] = utilisateur;
+                        var erreurMsg = "";
+                        $.ajax({
+                                url : SERVICE_SAISIE_URL,
+                                type : "POST",
+                                data : observations,
+                                dataType : "json",
+                                beforeSend : function() {
+                                        $(".msg").remove();
+                                        $(".msg-erreur").remove();
+                                        $(".msg-debug").remove();
+                                },
+                                success : function(data, textStatus, jqXHR) {
+                                        $("#dialogue-obs-transaction").append('<p class="msg">Vos observations ont bien été transmises.</p>');
+                                },
+                                statusCode : {
+: function(jqXHR, textStatus, errorThrown) {
+                                                erreurMsg += "Erreur 500 :\ntype : "+textStatus+' '+errorThrown+"\n";
+                                                reponse = jQuery.parseJSON(jqXHR.responseText);
+                                                if (reponse != null) {
+                                                        $.each(reponse, function (cle, valeur) {
+                                                                erreurMsg += valeur + "\n";
+                                                        });
+                                                }
+                                                if (DEBUG) {
+                                                        $("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');
+                                                }
+                                    }
+                                },
+                                error : function(jqXHR, textStatus, errorThrown) {
+                                        erreurMsg += "Erreur Ajax :\ntype : "+textStatus+' '+errorThrown+"\n";
+                                        reponse = jQuery.parseJSON(jqXHR.responseText);
+                                        if (reponse != null) {
+                                                $.each(reponse, function (cle, valeur) {
+                                                        erreurMsg += valeur + "\n";
+                                                });
+                                        }
+                                        if (DEBUG) {
+                                                $("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');
+                                        }
+                                },
+                                complete : function(jqXHR, textStatus) {
+                                        var debugMsg = '';
+                                        if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
+                                                debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
+                                                if (debugInfos != null) {
+                                                        $.each(debugInfos, function (cle, valeur) {
+                                                                debugMsg += valeur + "\n";
+                                                        });
+                                                }
+                                        }
+                                        if (erreurMsg != '') {
+                                                $("#dialogue-obs-transaction").append('<p class="msg">'+
+                                                                'Une erreur est survenue lors de la transmission de vos observations.'+'<br />'+
+                                                                'Vous pouvez signaler le disfonctionnement à <a href="'+
+                                                                'mailto:cel@tela-botanica.org'+'?'+
+                                                                'subject=Disfonctionnement du widget de saisie Biodiversite34'+
+                                                                "&body="+erreurMsg+"\nDébogage :\n"+debugMsg+
+                                                                '">cel@tela-botanica.org</a>.'+
+                                                                '</p>');
+                                        }
+                                        if (DEBUG) {
+                                                $("#dialogue-obs-transaction").append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>');
+                                        }
+                                        $("#dialogue-obs-transaction").dialog();
+                                        $("#liste-obs").removeData();
+                                        $('.obs').remove();
+                                        obsNumero = 0;
+                                }
+                        });
+                }
+                return false;
+        });
+});
+//+---------------------------------------------------------------------------------------------------------+
+// GOOGLE MAP
+var geocoder;
+var latLng;
+var map;
+var marker;
+var osmMapType;
+function initialiserCarte() {
+        geocoder = new google.maps.Geocoder();
+        latLng = new google.maps.LatLng(43.577, 3.455);
+        map = new google.maps.Map(document.getElementById('gg-map-carte'), {
+                zoom: 9,
+                mapTypeId: google.maps.MapTypeId.HYBRID,
+                mapTypeControlOptions: {
+                        mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]}
+        });
+        // Ajout de la couche OSM à la carte
+        osmMapType = new google.maps.ImageMapType({
+                getTileUrl: function(coord, zoom) {
+                        return "http://tile.openstreetmap.org/" +
+                        zoom + "/" + coord.x + "/" + coord.y + ".png";
+                },
+                tileSize: new google.maps.Size(256, 256),
+                isPng: true,
+                alt: "OpenStreetMap",
+                name: "OSM",
+                maxZoom: 19
+        });
+        map.mapTypes.set('OSM', osmMapType);
+        // Ajout des limites de communes
+        ctaLayer = new google.maps.KmlLayer('http://www.tela-botanica.org/commun/google/map/3/kmz/communes/34.kmz', {preserveViewport: true});
+        ctaLayer.setMap(map);
+        // Définition du marqueur
+        marker = new google.maps.Marker({
+                position: latLng,
+                title: 'Ma station',
+                map: map,
+                draggable: true
+        });
+        deplacerMarker(latLng);
+        // Tentative de géolocalisation
+        if(navigator.geolocation) {     // Try W3C Geolocation (Preferred)
+                navigator.geolocation.getCurrentPosition(function(position) {
+                        (DEBUG) ? console.log("Géolocalisation OK.") : '';
+                        latLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+                        deplacerMarker(latLng);
+                        map.setCenter(latLng);
+                }, function(erreur) {
+                        (DEBUG) ? console.log("Géolocalisation échouée : "+erreur.code+" = "+erreur.message) : '';
+                });
+        } else { //Browser doesn't support Geolocation
+                (DEBUG) ? console.log("Navigateur ne supportant pas la géolocalisation. Localisation par défaut.") : '';
+        }
+        deplacerMarker(latLng);
+        map.setCenter(latLng);
+        // Add des évènements concernant le marqueur
+        google.maps.event.addListener(marker, 'dragstart', function() {
+                mettreAJourMarkerAdresse('Marqueur de station début du déplacement...');
+        });
+        google.maps.event.addListener(marker, 'drag', function() {
+                mettreAJourMarkerStatut('Marqueur de station en cours de déplacement...');
+                mettreAJourMarkerPosition(marker.getPosition());
+        });
+        google.maps.event.addListener(marker, 'dragend', function() {
+                mettreAJourMarkerStatut('Marqueur de station déplacé (glisser/déposer).');
+                mettreAJourMarkerPosition(marker.getPosition());
+                geocoderPosition(marker.getPosition());
+                trouverCommune(marker.getPosition());
+        });
+        google.maps.event.addListener(map, 'click', function(event) {
+                deplacerMarker(event.latLng);
+        });
+}
+function deplacerMarker(latLon) {
+        if (marker != undefined) {
+                marker.setPosition(latLon);
+                mettreAJourMarkerStatut('Marqueur de station déplacé (clic).');
+                mettreAJourMarkerPosition(marker.getPosition());
+                geocoderPosition(marker.getPosition());
+                trouverCommune(marker.getPosition());
+        }
+}
+function geocoderPosition(pos) {
+        if (geocoder != undefined) {
+                geocoder.geocode({
+                        latLng: pos
+                }, function(responses, status) {
+                        if (status == google.maps.GeocoderStatus.OK) {
+                                if (responses && responses.length > 0) {
+                                        mettreAJourMarkerAdresse(responses[0].formatted_address);
+                                } else {
+                                        mettreAJourMarkerAdresse("Impossible de trouver d'adresse pour cette position.");
+                                }
+                        } else {
+                                mettreAJourMarkerAdresse("Un problème de géolocalisation est survenu : "+status+".");
+                        }
+                });
+        }
+}
+function trouverCommune(pos) {
+        $(function() {
+                var urlNomCommuneFormatee = SERVICE_NOM_COMMUNE_URL.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
+                $.ajax({
+                        url : urlNomCommuneFormatee,
+                        type : "GET",
+                        dataType : "json",
+                        beforeSend : function() {
+                                $(".commune-info").empty();
+                                $("#dialogue-erreur").empty();
+                        },
+                        success : function(data, textStatus, jqXHR) {
+                                $(".commune-info").empty();
+                                $("#commune-nom").append(data.nom);
+                                $("#commune-code-insee").append(data.codeINSEE);
+                                $("#marqueur-commune").data('commune', {'nom' : data.nom, 'codeInsee' : data.codeINSEE});
+                        },
+                        statusCode : {
+: function(jqXHR, textStatus, errorThrown) {
+                                        if (DEBUG) {
+                                                $("#dialogue-erreur").append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');
+                                                reponse = jQuery.parseJSON(jqXHR.responseText);
+                                                var erreurMsg = "";
+                                                if (reponse != null) {
+                                                        $.each(reponse, function (cle, valeur) {
+                                                                erreurMsg += valeur + "<br />";
+                                                        });
+                                                }
+                                                $("#dialogue-erreur").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
+                                        }
+                            }
+                        },
+                        error : function(jqXHR, textStatus, errorThrown) {
+                                if (DEBUG) {
+                                        $("#dialogue-erreur").append('<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>');
+                                        reponse = jQuery.parseJSON(jqXHR.responseText);
+                                        var erreurMsg = "";
+                                        if (reponse != null) {
+                                                $.each(reponse, function (cle, valeur) {
+                                                        erreurMsg += valeur + "<br />";
+                                                });
+                                        }
+                                        $("#dialogue-erreur").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
+                                }
+                        },
+                        complete : function(jqXHR, textStatus) {
+                                if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
+                                        var debugMsg = "";
+                                        debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
+                                        if (debugInfos != null) {
+                                                $.each(debugInfos, function (cle, valeur) {
+                                                        debugMsg += valeur + "<br />";
+                                                });
+                                                $("#dialogue-erreur").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
+                                        }
+                                }
+                                if ($("#dialogue-erreur .msg").length > 0) {
+                                        $("#dialogue-erreur").dialog();
+                                }
+                        }
+                });
+        });
+}
+function mettreAJourMarkerStatut(str) {
+        document.getElementById('marqueur-statut').innerHTML = str;
+}
+function mettreAJourMarkerPosition(latLng) {
+        var lat = latLng.lat().toFixed(5);
+        var lon = latLng.lng().toFixed(5);
+        document.getElementById('marqueur-wgs84').innerHTML = [lat, lon].join(', ');
+        $("#marqueur-coordonnees").data('latLon', {'lat' : lat, 'lon' : lon});
+        Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
+        Proj4js.defs["EPSG:2154"]="+title=RGF93 / Lambert-93 +proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ";
+        var source = new Proj4js.Proj('EPSG:4326');// Coordonnées source : WGS 84
+        var dest = new Proj4js.Proj('EPSG:2154');// Coordonnées destination  : Lambert 93
+        var p = new Proj4js.Point(lon+','+lat);//lon+','+lat any object will do as long as it has 'x' and 'y' properties
+        Proj4js.transform(source, dest, p);
+        //Proj4js.reportError = function(msg) {alert(msg);}
+        //console.log(p.toString());
+        document.getElementById('marqueur-lambert93').innerHTML = [p.x.toFixed(0)+' '+dest.units, p.y.toFixed(0)+' '+dest.units].join(', ');
+}
+function mettreAJourMarkerAdresse(str) {
+        document.getElementById('marqueur-adresse').innerHTML = str;
+}

 /branches/v1.6-croc/widget/modules/saisie/squelettes/biodiversite34/biodiversite34.tpl.html
 New file
 ,0 → 1,213
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+        <head>
+                <title>Biodiversité 34</title>
+                <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+                <meta http-equiv="Content-style-type" content="text/css" />
+                <meta http-equiv="Content-script-type" content="text/javascript" />
+                <meta http-equiv="Content-language" content="fr" />
+                <meta name="revisit-after" content="15 days" />
+        <meta name="robots" content="index,follow" />
+        <meta name="author" content="Delphine CAUQUIL, Jean-Pascal MILCENT" />
+        <meta name="keywords" content="Tela Botanica, Biodiversité34, CG34, CEL" />
+        <meta name="description" content="Widget de saisie simplifié pour le projet Biodiversité 34" />
+                <!-- Favicones -->
+                <link rel="icon" type="image/png" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.png" />
+                <link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/sites/commun/generique/images/favicones/tela_botanica.ico" />
+                <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+                <!-- Javascript : bibliothèques -->
+                <!--    Google Map v3 -->
+                <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=true&amp;language=fr&amp;region=FR"></script>
+                <!--    Jquery -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.13/js/jquery-ui-1.8.13.custom.min.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.13/js/jquery.ui.datepicker-fr.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.8.1/jquery.validate.min.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.8.1/messages_fr.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/proj4js/1.0.1/proj4js-compressed.js"></script>
+                <script src="<?=$url_base?>saisie?projet=biodiversite34&service=taxons" type="text/javascript"></script>
+                <!-- Javascript : appli saisie -->
+                <script type="text/javascript">
+                //<![CDATA[
+                        // La présence du parametre 'debug' dans l'URL enclenche le dégogage
+                        var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
+                        // URL du web service réalisant l'insertion des données dans la base du CEL.
+                        var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
+                        // Squelette d'URL du web service d'eFlore fournissant les noms de communes.
+                        var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
+                //]]>
+                </script>
+                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/biodiversite34/js/biodiversite34.js"></script>
+                <!-- CSS -->
+                <link href="<?=$url_base?>modules/saisie/squelettes/biodiversite34/css/biodiversite34.css" rel="stylesheet" type="text/css" media="screen" />
+                <link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.13/css/ui-darkness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" />
+                <link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
+        </head>
+        <body>
+                <div id="zone-appli">
+                        <?php if($titre == 'defaut' ) { ?>
+                                                        <h1>Biodiversité 34</h1>
+                        <?php } else { ?>
+                                <h1 id="widget-titre"><?= $titre ?></h1>
+                        <?php } ?>
+                        <h2>Saisie des observations</h2>
+                        <form id="saisie-obs" action="#">
+                                <fieldset id="partie-identification">
+                                        <legend>1. Identification</legend>
+                                        <ul>
+                                                <li>
+                                                        <label for="prenom"><span class="obligatoire" title="Champ obligatoire">*</span> Prénom</label>
+                                                        <input id="prenom" name="prenom" type="text" value=""/>
+                                                </li>
+                                                <li>
+                                                        <label for="nom"><span class="obligatoire" title="Champ obligatoire">*</span> NOM</label>
+                                                        <input id="nom" name="nom" type="text" value=""/>
+                                                </li>
+                                                <li>
+                                                        <label for="courriel"><span class="obligatoire" title="Champ obligatoire">*</span> Courriel</label>
+                                                        <input id="courriel" name="courriel" type="text" value=""/>
+                                                        <input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
+                                                </li>
+                                                <li>
+                                                        <label for="courriel_confirmation"><span class="obligatoire" title="Champ obligatoire">*</span> Courriel (confirmation)</label>
+                                                        <input id="courriel_confirmation" name="courriel_confirmation" type="text" value=""/>
+                                                </li>
+                                        </ul>
+                                </fieldset>
+                                <fieldset id="partie-station">
+                                        <legend>2. Station / Localisation</legend>
+                                        <input id="commune_nom" name="commune_nom" type="hidden" value="" />
+                                        <input id="commune_code_insee" name="commune_code_insee" type="hidden" value="" />
+                                        <ul>
+                                                <li>
+                                                        <label for="milieu"><span class="obligatoire" title="Champ obligatoire">*</span> Milieu</label>
+                                                        <select id="milieu" name="milieu">
+                                                                <option value="">Sélectionner un milieu</option>
+                                                                <?php foreach ($milieux as $milieu => $description) : ?>
+                                                                <option value="<?=$milieu?>" <?=($description != '') ? 'title="'.$description.'"': '' ?>><?=$milieu?></option>
+                                                                <?php endforeach; ?>
+                                                        </select>
+                                                </li>
+                                                <li><a id="localiser-gg-map" href="#gg-map-localisation">Localiser votre station sur une carte Google Map</a></li>
+                                                <li id="partie-lat-lon">
+                                                        <label for="latitude"><span class="obligatoire" title="Champ obligatoire">*</span> Latitude</label>
+                                                        <input id="latitude" name="latitude" type="text" value=""/>
+                                                        <label for="longitude"><span class="obligatoire" title="Champ obligatoire">*</span> Longitude</label>
+                                                        <input id="longitude" name="longitude" type="text" value=""/>
+                                                        <span id="lat-lon-info" class="info">(WGS84)</span>
+                                                </li>
+                                        </ul>
+                                </fieldset>
+                                <fieldset id="partie-observation">
+                                        <legend>3. Observation</legend>
+                                        <ul>
+                                                <li>
+                                                        <label for="date"><span class="obligatoire" title="Champ obligatoire">*</span> Date</label>
+                                                        <input id="date" name="date" type="text" value="" />
+                                                </li>
+                                                <li>
+                                                        <label for="taxon"><span class="obligatoire" title="Champ obligatoire">*</span> Espèce</label>
+                                                        <select id="taxon" name="taxon">
+                                                                <option value="">Sélectionner un taxon</option>
+                                                        <?php foreach ($taxons as $taxon) : ?>
+                                                                <option value="<?=$taxon['num_nom_sel']?>" title="<?=$taxon['nom_sel'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>"><?=$taxon['nom_fr']?></option>
+                                                        <?php endforeach; ?>
+                                                        </select>
+                                                </li>
+                                                <li>
+                                                        <label for="notes">Notes</label>
+                                                        <textarea id="notes" name="notes"></textarea>
+                                                </li>
+                                        </ul>
+                                        <button id="ajouter-obs" type="button">Ajouter</button>
+                                </fieldset>
+                        </form>
+                        <h2>Liste des observations à transmettre</h2>
+                        <form action="#">
+                                <table id="liste-obs">
+                                        <thead><tr><th>Numéro</th><th>Date</th><th>Nom</th><th>Milieu</th><th>Latitude</th><th>Longitude</th><th>Notes</th><th>Suppression</th></tr></thead>
+                                        <tbody></tbody>
+                                </table>
+                                <button id="tramsmettre-obs" type="button">Transmettre</button>
+                        </form>
+                </div>
+                <div id="gg-map" style="display: none;">
+                        <div id="gg-map-localisation">
+                                <div id="gg-map-carte">Carte en cours de chargement...</div>
+                                        <ul id="gg-map-info">
+                                                <li>
+                                                        <span class="champ">Marqueur de station</span>
+                                                        <span id="marqueur-statut">Déplacer le marqueur sur le centre de votre station.</span>
+                                                </li>
+                                                <li>
+                                                        <span class="champ">Coordonnées du marqueur</span>
+                                                <span id="marqueur-coordonnees"><span title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">WGS84 : <span id="marqueur-wgs84">&nbsp;</span></span> / <span title="Système géodésique RGF93 - Coordonnées en projection Lambert 93">Lambert 93 : <span id="marqueur-lambert93">&nbsp;</span></span></span>
+                                        </li>
+                                        <li>
+                                                <span class="champ">Commune</span>
+                                                <span id="marqueur-commune">
+                                                        <span id="commune-nom" class="commune-info">&nbsp;</span>
+                                                        (<span id="commune-code-insee" class="commune-info" title="Code INSEE de la commune">&nbsp;</span>)
+                                                </span>
+                                                <span class="champ">Adresse</span>
+                                                <span id="marqueur-adresse">&nbsp;</span>
+                                        </li>
+                                </ul>
+                                    <form id="gg-map-form">
+                                        <button id="valider-coordonnees" type="button">Valider</button>
+                                        <button id="annuler-coordonnees" type="button">Annuler</button>
+                                </form>
+                        </div>
+                        </div>
+                </div>
+                <div id="dialogue-bloquer-copier-coller" style="display: none;" title="Information copier/coller">
+                        <p>
+                                Merci de ne pas copier/coller votre courriel.<br/>
+                                La double saisie permet de vérifier l'absence d'erreurs.
+                        </p>
+                </div>
+                <div id="dialogue-zero-obs" style="display: none;" title="Information aucune observation">
+                        <p>
+                                Veuillez saisir des observations pour les transmettres.
+                        </p>
+                </div>
+                <div id="dialogue-form-invalide" style="display: none;" title="Validation du formulaire">
+                        <p>Certains champs n'ont pas été saisis correctement, veuillez vérifier les champs saisis.</p>
+                </div>
+                <div id="dialogue-obs-transaction" style="display: none;" title="Transmission des observations">
+                </div>
+                <div id="dialogue-erreur" style="display: none;" title="Erreur">
+                </div>
+                <!-- Stats : Google Analytics -->
+                <script type="text/javascript">
+                        //<![CDATA[
+                        var _gaq = _gaq || [];
+                        _gaq.push(['_setAccount', 'UA-20092557-1']);
+                        _gaq.push(['_trackPageview']);
+                        (function() {
+                          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+                          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+                        })();
+                        //]]>
+                </script>
+        </body>
+</html>

/branches/v1.6-croc/widget/modules/saisie/squelettes/biodiversite34/biodiversite34_taxons.tpl.js
New file
0,0 → 1,0
var taxons = <?=$taxons?>;

 /branches/v1.6-croc/widget/modules/saisie/squelettes/biodiversite34/css/biodiversite34.css
 New file
 ,0 → 1,175
+@CHARSET "UTF-8";
+body {
+        padding:0;
+        margin:0;
+        width:100%;
+        height:100%;
+        font-family:Arial;
+        font-size:12px;
+        background-color:#4A4B4C;
+        color:#CCC;
+}
+h1 {
+        font-size:1.6em;
+}
+h2 {
+        font-size:1.4em;
+}
+a, a:active, a:visited {
+        border-bottom:1px dotted #666;
+        color:#CCC;
+        text-decoration:none;
+}
+a:active {
+        outline:none;
+}
+a:focus {
+        outline:thin dotted;
+}
+a:hover {
+        color:#56B80E;
+        border-bottom:1px dotted #56B80E;
+}
+/*+-----------------------------------------------------------------------------------------------------------------+*/
+/* Présentation des listes de définitions */
+dl {
+        width:100%;
+}
+dt {
+        float:left;
+        font-weight:bold;
+        text-align:top left;
+        margin-right:0.3em;
+}
+dd {
+        width:auto;
+        margin:0.5em 0;
+}
+/*+-----------------------------------------------------------------------------------------------------------------+*/
+/* Tableau : */
+table {
+        border:1px solid gray;
+        border-collapse:collapse;
+}
+table thead, table tfoot, table tbody {
+        background-color:Gainsboro;
+        border:1px solid gray;
+        color:black;
+}
+table tbody {
+        background-color:#FFF;
+}
+table th {
+        font-family:monospace;
+        border:1px dotted gray;
+        padding:5px;
+        background-color:Gainsboro;
+}
+table td {
+        font-family:arial;
+        border:1px dotted gray;
+        padding:5px;
+        text-align:left;
+}
+table caption {
+        font-family:sans-serif;
+}
+legend {
+        font-size:1.2em;
+        color:#CCC;
+}
+/*+-----------------------------------------------------------------------------------------------------------------+*/
+/* Générique */
+.nettoyage{
+        clear:both;
+}
+hr.nettoyage{
+        visibility:hidden;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Positionnement général */
+#zone-appli {
+        margin:0 auto;
+        width:600px;
+}
+/*+-----------------------------------------------------------------------------------------------------------------+*/
+/* Formulaire */
+fieldset {
+        width:800px;
+}
+label{
+        width:140px;
+        display:block;
+        float:left;
+}
+input, select, textarea {
+        width:240px;
+}
+#saisie-obs fieldset{
+        margin-top:10px;
+        border:0;
+        display:block;
+}
+#saisie-obs ul {
+        list-style-type:none;
+        margin:0;
+        padding:0;
+}
+#saisie-obs li {
+        margin:5px;
+}
+#partie-station label {
+        width:70px;
+        display:block;
+        float:left;
+}
+#latitude, #longitude {
+        width:70px;
+        float:left;
+}
+#latitude {
+        margin-right:5px;
+}
+#lat-lon-info {
+        margin-left:5px;
+}
+.obligatoire {
+        color:red;
+}
+label.error {
+        display:inline;
+        float:none;
+        color:red;
+        padding-left:.5em;
+}
+/*+-----------------------------------------------------------------------------------------------------------------+*/
+/* Carte Google Map */
+#gg-map-localisation {
+        background-color:#4A4B4C;
+        color:#CCC;
+}
+#gg-map-carte {
+        width:100%;
+}
+#gg-map-info {
+        list-style-type:none;
+        padding: 5px 0;
+        margin:0;
+}
+#gg-map-info li {
+        margin:0 0 0 5px;
+}
+#gg-map-form {
+        padding:0;
+        margin:0 5px;
+}
+#gg-map-form button {
+        margin:5px;
+}
+.champ {
+        color:#56B80E;
+        font-weight:bold;
+}

 /branches/v1.6-croc/widget/modules/saisie/squelettes/mobile/css/mobile.css
 New file
 ,0 → 1,30
+@CHARSET "UTF-8";
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Balises */
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Générique */
+.ui-icon-pencil{
+        background:url(http://www.tela-botanica.org/commun/icones/glyphish/187-pencil-white.png) no-repeat;
+}
+.ui-icon-notepad{
+        background:url(http://www.tela-botanica.org/commun/icones/glyphish/179-notepad-white.png) no-repeat;
+}
+.ui-icon-cloud{
+        background:url(http://www.tela-botanica.org/commun/icones/glyphish/56-cloud-white.png) no-repeat;
+}
+.ui-icon-radar{
+        background:url(http://www.tela-botanica.org/commun/icones/glyphish/73-radar-white.png) no-repeat;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Formulaire à l'application */
+#conteneur_reponse{
+        display:none;
+}
+.reponse{
+        background-color:#D5F2B6;
+        padding:20px;
+        text-align:center;
+        font-size:1.2 em;
+        font-weight:bold;
+}

 /branches/v1.6-croc/widget/modules/saisie/squelettes/mobile/mobile.tpl.html
 New file
 ,0 → 1,162
+<?php
+$annee = date('Y');
+$aujourdhui = date('d/m/Y');
+?>
+<!DOCTYPE html>
+<html lang="fr" manifest="<?=$url_base?>modules/saisie/squelettes/mobile/mobile.appcache">
+        <head>
+                <title>CEL Mobile</title>
+                <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+                <meta http-equiv="Content-style-type" content="text/css" />
+                <meta http-equiv="Content-script-type" content="text/javascript" />
+                <meta http-equiv="Content-language" content="fr" />
+                <meta name="revisit-after" content="15 days" />
+        <meta name="robots" content="index,follow" />
+        <meta name="author" content="Jean-Pascal MILCENT, Mathilde SALTHUN-LASSALLE" />
+        <meta name="keywords" content="Tela Botanica, CEL, mobile" />
+        <meta name="description" content="Widget de saisie du CEL pour smartphone" />
+                <!-- Favicones -->
+                <link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/favicon.ico" />
+                <!-- Viewport -->
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <!-- CSS -->
+                <link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
+                <link href="<?=$url_base?>modules/saisie/squelettes/mobile/css/<?=isset($_GET['style']) ? $_GET['style'] : 'mobile'?>.css" rel="stylesheet" type="text/css" media="screen" />
+                <!-- Javascript -->
+                <script src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
+                <!-- Javascript : appli saisie -->
+                <script type="text/javascript">
+                //<![CDATA[
+                        // La présence du parametre 'debug' dans l'URL enclenche le dégogage
+                        var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
+                //]]>
+                </script>
+                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/mobile/js/mobile.js"></script>
+                <!-- Javascript : Jquery Mobile -->
+                <script src="http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
+        </head>
+        <body data-theme="b">
+                <div id="menu" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
+                        <div data-role="header">
+                                <?php if($titre == 'defaut' ) { ?>
+                                        <h1>Accueil</h1>
+                                <?php } else { ?>
+                                        <h1><?= $titre ?></h1>
+                                <?php } ?>
+                        </div>
+                        <div data-role="content" data-theme="g">
+                                <ul data-role="listview">
+                                        <li>
+                                                <img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
+                                                <a href="#saisie" data-role="button">Saisir une observation</a>
+                                        </li>
+                                        <li>
+                                                <img src="http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png" class="ui-li-icon"/>
+                                                <a href="#liste" data-role="button">Voir mes observations</a>
+                                        </li>
+                                        <li>
+                                                <img src="http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png" class="ui-li-icon"/>
+                                                <a href="#transmission" data-role="button">Transmettre mes observations</a>
+                                        </li>
+                                </ul>
+                        </div>
+                        <div data-role="footer" data-position="fixed">
+                                <a href="#infos" data-role="button">Infos</a>
+                        </div>
+                </div>
+                <div id="saisie" data-role="page">
+                        <div data-role="header" data-position="inline">
+                                <a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
+                                <h1>Saisie</h1>
+                                <a href="#liste" data-icon="notepad" data-iconpos="notext">Liste des obs</a>
+                        </div>
+                        <form id="form_saisie_observation" method="post" action="#">
+                                <div data-role="content">
+                                        <div id="obs-saisie-infos"></div>
+                                        <div data-role="fieldcontain">
+                                                <!--
+                                                <label for="location">Commune :</label>
+                                                <input type="text" name="location" id="location"/>
+                                                 -->
+                                                <button id="geolocaliser" data-role="button" data-icon="search" data-iconpos="">Trouver ma position</button>
+                                                <label for="lat">Latitude :</label>
+                                                <input id="lat" type="text" name="lat"/>
+                                                <label for="lng">Longitude :</label>
+                                                <input id="lng" type="text" name="lng"/>
+                                                <label for="date">Date :</label>
+                                                <input id="date" type="text" name="date" value="<?=$aujourdhui?>"/>
+                                                <label for="nom">Espece :</label>
+                                                <input id="nom" type="text" name="nom"/>
+                                                <input id="num_nom" type="hidden" name="num_nom"/>
+                                        </div>
+                                </div>
+                                <div data-role="footer" data-position="fixed">
+                                        <button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
+                                </div>
+                        </form>
+                </div>
+                <div id="liste" data-role="page">
+                        <div data-role="header" data-position="inline">
+                                <a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
+                                <h1>Observations</h1>
+                        </div>
+                        <div data-role="content">
+                                <ul id="liste-obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
+                        </div>
+                        <div data-role="footer" data-position="fixed">
+                                <div data-role="navbar">
+                                        <ul>
+                                                <li><a href="#saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
+                                                <li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
+                                        </ul>
+                                </div>
+                        </div>
+                </div>
+                <div id="transmission" data-role="page">
+                        <div data-role="header">
+                                <a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
+                                <h1>Transmission</h1>
+                                <a href="#saisie" data-icon="notepad" data-iconpos="notext">Saisie</a>
+                        </div>
+                        <form id="form-transmission" method="post" action="#">
+                                <div data-role="content">
+                                        <div data-role="fieldcontain">
+                                                <label for="courriel">Courriel :</label>
+                                                <input id="courriel" type="email" name="courriel"/>
+                                        </div>
+                                </div>
+                                <div data-role="footer" data-position="fixed">
+                                        <button data-role="button" data-icon="cloud">Transmettre</button>
+                                </div>
+                        </form>
+                </div>
+                <div id="infos" data-role="page">
+                        <div data-role="header">
+                                <a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
+                                <h1>Infos</h1>
+                        </div>
+                        <div data-role="content">
+                                <p>Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>.</p>
+                        </div>
+                        <div data-role="footer" data-position="fixed">
+                                <p>©Copyright <?=$annee?> - <a href="http://www.tela-botanica.org/site:accueil">Tela Botanica</a></p>
+                        </div>
+                </div>
+        </body>
+</html>

 /branches/v1.6-croc/widget/modules/saisie/squelettes/mobile/mobile.appcache
 New file
 ,0 → 1,18
+CACHE MANIFEST
+# v2 - 2012-03-28
+# Fichier Manifest pour le cache du widget Mobile.
+CACHE:
+http://localhost/eflore/applications/cel-widget_cisaille/modules/saisie/squelettes/mobile/css/mobile.css
+http://localhost/eflore/applications/cel-widget_cisaille/modules/saisie/squelettes/mobile/js/mobile.js
+http://www.tela-botanica.org/favicon.ico
+http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css
+http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/images/*
+http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js
+http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js
+http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png
+http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png
+http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png
+http://www.tela-botanica.org/commun/icones/glyphish/73-radar-white.png
+http://www.tela-botanica.org/commun/icones/glyphish/187-pencil-white.png
+http://www.tela-botanica.org/commun/icones/glyphish/179-notepad-white.png
+http://www.tela-botanica.org/commun/icones/glyphish/56-cloud-white.png

 /branches/v1.6-croc/widget/modules/saisie/squelettes/mobile/js/mobile.js
 New file
 ,0 → 1,124
+//+----------------------------------------------------------------------------------------------------------+
+// Initialisation de Jquery mobile
+$(document).bind("mobileinit", function(){
+  $.mobile.defaultPageTransition = "fade";
+});
+//+----------------------------------------------------------------------------------------------------------+
+// Géolocalisation
+var gps = navigator.geolocation;
+$(document).ready(function() {
+        $('#geolocaliser').on('click', geolocaliser);
+});
+function geolocaliser(event) {
+        if (gps) {
+            navigator.geolocation.getCurrentPosition(surSuccesGeoloc, surErreurGeoloc);
+        } else {
+            var erreur = {code:'0', message:'Géolocalisation non supportée par le navigateur'};
+            surErreurGeoloc(erreur);
+        }
+        event.stopPropagation();
+        event.preventDefault();
+}
+function surSuccesGeoloc(position){
+        if (position){
+        var lat = position.coords.latitude;
+        var lng = position.coords.longitude;
+        $('#lat').val(lat);
+        $('#lng').val(lng);
+    }
+}
+function surErreurGeoloc(error){
+        alert("Echec de la géolocalisation, code: " + error.code + " message: "+ error.message);
+}
+//+----------------------------------------------------------------------------------------------------------+
+// Local Storage
+var bdd = window.localStorage;
+bdd.clear();
+$(document).ready(function() {
+        $('#sauver-obs').on('click', ajouterObs);
+        $('body').on('pageshow', '#liste', chargerListeObs);
+});
+function ajouterObs(event) {
+        var obs = {num:0, date:'', lat:'', lng:'', nom:''};
+        obs.num = (bdd.length + 1);
+        obs.date = $('#date').val();
+        obs.lat = $('#lat').val();
+        obs.lng = $('#lng').val();
+        obs.nom = $('#nom').val();
+        var cle = 'obs'+obs.num;
+        var val = JSON.stringify(obs);
+        bdd.setItem(cle, val);
+        var txt = 'Observation n°'+obs.num+'/'+bdd.length+' créée';
+        $('#obs-saisie-infos').html('<p class="reponse ui-btn-inner ui-btn-corner-all">'+txt+'</p>')
+                .fadeIn("slow")
+                .delay(1600)
+                .fadeOut("slow");
+        event.stopPropagation();
+        event.preventDefault();
+}
+function supprimerObs(event) {
+        var cle = 'obs'+obs.num;
+        bdd.removeItem(cle);
+        var txt = 'Observation n°'+obs.num+' supprimée';
+        $('#obs-saisie-infos').html('<p class="reponse ui-btn-inner ui-btn-corner-all">'+txt+'</p>')
+                .fadeIn("slow")
+                .delay(1600)
+                .fadeOut("slow");
+        event.stopPropagation();
+        event.preventDefault();
+}
+function chargerListeObs() {
+        $('#liste-obs').empty();
+        var nbre = bdd.length;
+        for (var i = 0; i < nbre; i++) {
+                var cle = 'obs'+(i+1);
+                var obs = JSON.parse(bdd.getItem(cle));
+                $('#liste-obs').append(
+                        '<li>'+
+                                '<img src="http://www.tela-botanica.org/widget-test:cel:modules/saisie/squelettes/defaut/img/icones/pasdephoto.png" />'+
+                                '<a href="#'+cle+'" data-split-icon="next" data-split-theme="a" title="Voir la fiche" data-obs-num="'+obs.num+'">'+
+                                        '<strong>'+obs.nom+'</strong> observé le '+obs.date+' à lat : '+obs.lat+' lng : '+obs.lng+
+                                '</a>'+
+                                '<a href="#" title="Supprimer l\'observation" data-obs-num="'+obs.num+'">'+
+                                        'Supprimer'+
+                                '</a>'+
+                        '</li>'
+                );
+        }
+        $('#liste-obs').listview('refresh');
+}
+//+----------------------------------------------------------------------------------------------------------+
+// Manifest Cache
+var appCache = window.applicationCache;
+$(document).ready(function() {
+        appCache.addEventListener('updateready', function() {
+                alert('Mise à jour :'+appCache.status);
+        });
+        if (appCache.status === appCache.UPDATEREADY) {
+                surMiseAJourCache();
+        }
+});
+function surMiseAJourCache() {
+        // Browser downloaded a new app cache.
+    // Swap it in and reload the page to get the new hotness.
+        appCache.swapCache();
+    if (confirm('A new version of this site is available. Load it?')) {
+      window.location.reload();
+    }
+}

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/defaut_image.tpl.xml
New file
0,0 → 1,7
<?='<?xml version="1.0" encoding="UTF-8"?>'."\n";?>
<root>
<miniature-url><?=$urlMiniature?></miniature-url>
<image-nom><?=$imageNom?></image-nom>
<message><?=$message?></message>
<debogage><?=$debogage?></debogage>
</root>

 /branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/css/defaut.css
 New file
 ,0 → 1,168
+@CHARSET "UTF-8";
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Balises */
+footer p{
+        text-align:center;
+}
+button img {
+        display:block;
+}
+h1 {
+        font-size: 26px;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Générique */
+.discretion {
+        color:grey;
+        font-family:arial;
+        font-size:11px;
+        line-height: 13px;
+}
+.droite {
+        text-align:right;
+}
+.centre {
+        text-align:center;
+}
+.modal-fenetre {
+        position:fixed;
+        z-index:1000;
+        top:0;
+        left:0;
+        height:100%;
+        width:100%;
+        background:#777;
+        background:rgba(90,86,93,0.7);
+        text-align:center;
+}
+.modal-contenu {
+        position:relative;
+        width:30%;
+        margin:0 auto;
+        top:30%;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Formulaire spécifique */
+#map-canvas {
+        height:240px;
+}
+#info-commune {
+        text-align:right;
+}
+.ns-retenu {
+        font-weight:bold;
+}
+.nn{
+        color:#3B9D3B;
+}
+.nom-sci{
+        font-size:1.5em;
+        font-weight:bold;
+}
+.commune, .date{
+        font-size:1.3em;
+        font-weight:bold;
+}
+.obs-action{
+        opacity:1;
+}
+#miniatures {
+    padding-top: 5px;
+}
+.miniature{
+    float: left;
+    height: 130px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+.miniature-img {
+        height: 100px;
+}
+.miniature img {
+        display: block;
+}
+.miniature-chargement {
+        height:100px;
+        width: 100px;
+}
+.defilement-miniatures-gauche, .defilement-miniatures-droite {
+    float: left;
+    font-size: 1.2em;
+    font-weight: bold;
+    height: 62px;
+    margin: 5px;
+    padding-top: 30px;
+    width: 12px;
+}
+.defilement-miniatures {
+   width: 210px;
+}
+.defilement-miniatures-cache {
+        visibility: hidden;
+}
+.miniature-cachee {
+        display: none;
+}
+.miniature-selectionnee {
+        display: block;
+        width: 90px;
+}
+.referentiel-obs {
+        color:#3B9D3B;
+}
+#referentiel {
+        display: inline;
+}
+#logo-titre {
+        position: relative;
+    top: -8px;
+}
+#photos-conteneur {
+        height: 120px;
+}
+#photo-placeholder {
+        background: url("../img/icones/icone-photo.png");
+        background-size: 89px;
+        cursor: pointer;
+        margin-bottom: 15px;
+        margin-right: 15px;
+        float:left;
+        border: 5px dashed #CCCCCC;
+        border-radius: 8px 8px 8px 8px;
+        height: 100px;
+        margin: 2px 0 2px 2px;
+        text-align: center;
+        width: 98px;
+        box-sizing:border-box;
+        -moz-box-sizing:border-box;
+        -webkit-box-sizing:border-box;
+}
+#photo-placeholder:hover {
+        background: url("../img/icones/icone-photo-hover.png");
+        background-size: 89px;
+        border: 5px dashed #111;
+        border-radius: 8px;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Correction style CSS Bootstrap */
+.well {
+        margin-bottom: 5px;
+        padding: 4px;
+}

 /branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/defaut.tpl.html
 New file
 ,0 → 1,560
+<!DOCTYPE html>
+<html>
+        <head>
+                <title>Saisie simplifiée du CEL</title>
+                <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+                <meta http-equiv="Content-style-type" content="text/css" />
+                <meta http-equiv="Content-script-type" content="text/javascript" />
+                <meta http-equiv="Content-language" content="fr" />
+                <meta name="revisit-after" content="15 days" />
+        <meta name="robots" content="index,follow" />
+        <meta name="author" content="Jean-Pascal MILCENT" />
+        <meta name="keywords" content="Tela Botanica, CEL" />
+        <meta name="description" content="Widget de saisie simplifiée pour le CEL" />
+                <!-- Viewport Mobile -->
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <!-- Favicones -->
+                <link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/defaut/img/favicon.ico" />
+                <!-- Javascript : bibliothèques -->
+                <!-- Google Map v3 -->
+                <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
+                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
+                <!-- Jquery -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.js"></script>
+                <!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
+                <!-- Jquery Plugins -->
+                <!-- Jquery Validate : nécessaire pour la validation des formulaires -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/validate/1.9.0/jquery.validate.min.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
+                <!-- Jquery Form :nécessaire pour l'upload des images -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
+                <!-- Bootstrap -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/bootstrap.min.js"></script>
+                <!-- Javascript : appli saisie -->
+                <script type="text/javascript">
+                //<![CDATA[
+                        // La présence du parametre 'debug' dans l'URL enclenche le dégogage
+                        var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
+                        // La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
+                        var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
+                        // Mot-clé du widget/projet
+                        var TAG_PROJET = "WidgetSaisie";
+                        // Mots-clés à ajouter aux images
+                        var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
+                        var SEPARATION_TAG_IMG = '<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>';
+                        TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."'+SEPARATION_TAG_IMG+TAG_IMG" : 'TAG_IMG' ?>;
+                        // Mots-clés à ajouter aux observations
+                        var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
+                        var SEPARATION_TAG_OBS = '<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>';
+                        TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."'+SEPARATION_TAG_OBS+TAG_OBS" : 'TAG_OBS' ?>;
+                        // URL du web service réalisant l'insertion des données dans la base du CEL.
+                        var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
+                        // Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
+                        var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
+                        // Nom du référentiel utilisé pour les nom scientifiques.
+                        var NOM_SCI_PROJET = "<?=$ns_projet?>";
+                        // Code de la version du référentiel utilisé pour les nom scientifiques.
+                        var NOM_SCI_VERSION = "<?=$ns_version?>";
+                        // Indication de la présence d'une espèce imposée
+                        var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
+                        // Tableau d'informations sur l'espèce imposée
+                        var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
+                        // Nombre d'élément dans les listes d'auto-complétion
+                        var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
+                        // Indication de la présence d'un référentiel imposé
+                        var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
+                        // Indication des version utilisées de chaque référentiel
+                        var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
+                        // URL du web service permettant l'auto-complétion des noms scientifiques.
+                        var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
+                                        "masque={masque}&"+
+                                        "recherche=etendue&"+
+                                        "retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
+                                        //"version.projet="+NOM_SCI_VERSION+"&"+
+                                        "ns.structure=au"+"&"+
+                                        "navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
+                        // URL du web service permettant l'auto-complétion des noms scientifiques.
+                        var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
+                                        "masque={masque}&"+
+                                        "recherche=etendue&"+
+                                        "retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
+                                        //"version.projet="+NOM_SCI_VERSION+"&"+
+                                        "ns.structure=au"+"&"+
+                                        "navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
+                        // Nombre d'observations max autorisé avant transmission
+                        var OBS_MAX_NBRE = 10;
+                        // Durée d'affichage en milliseconde des messages d'informations
+                        var DUREE_MESSAGE = 15000;
+                        // Squelette d'URL du web service d'eFlore fournissant les noms de communes.
+                        var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
+                        // Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
+                        var SERVICE_NOM_COMMUNE_URL_ALT = "http://www.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
+                        // URL du marqueur à utiliser dans la carte Google Map
+                        var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
+                        // URL de l'icône du chargement en cours
+                        var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
+                        // URL de l'icône du chargement en cours d'une image
+                        var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
+                        // URL de l'icône du calendrier
+                        var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
+                        // URL de l'icône du calendrier
+                        var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
+                //]]>
+                </script>
+                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.js"></script>
+                <!-- CSS -->
+                <link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
+                <link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
+                <link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
+                <link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
+        </head>
+        <body data-spy="scroll">
+                <div class="container">
+                        <div class="row-fluid">
+                                <div class="span6 page-header">
+                                        <div class="row">
+                                                <div class="span6">
+                                                        <h1>
+                                                                <?php if($logo != 'defaut' && $logo != '0') { ?>
+                                                                        <img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
+                                                                <?php } else if($logo == 'defaut') { ?>
+                                                                        <img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/defaut/img/logos/tela_botanica.png" alt="Tela Botanica" />
+                                                                <?php } ?>
+                                                                <?php if($titre != 'defaut') { ?>
+                                                                        <?= $titre; ?>
+                                                                <?php } else { ?>
+                                                                        Ajout rapide d'observations
+                                                                <?php } ?>
+                                                        </h1>
+                                                </div>
+                                        </div>
+                                        <div class="row">
+                                                <div class="span6">
+                                                        <p>
+                                                                Cet outil vous permet de partager simplement vos observations avec le
+                                                                <a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a> (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
+                                                                Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
+                                                                <a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
+                                                                Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
+                                                                Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique?langue=fr">cartes et galeries photos </a> du site.
+                                                        </p>
+                                                        <p class="discretion">
+                                                                Pour toute question contactez <a href="mailto:cel_remarques@tela-botanica.org">cel_remarques@tela-botanica.org</a>
+                                                        </p>
+                                                        <p class="discretion">
+                                                                Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
+                                                                <button id="btn-aide" class="btn btn-mini btn-success">
+                                                                        <span class="icon-question-sign icon-white"></span>
+                                                                        <span id="btn-aide-txt" >Désactiver l'aide</span>
+                                                                </button>
+                                                        </p>
+                                                </div>
+                                        </div>
+                                </div>
+                                <div class="span6">
+                                        <div class="well">
+                                                <h2>Observateur</h2>
+                                                <form id="form-observateur" action="#" class="" autocomplete="on">
+                                                        <div class="row-fluid">
+                                                                <div class="span6" rel="tooltip" data-placement="right"
+                                                                        title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
+                                                                                Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
+                                                                                ultérieurement. Des informations complémentaires vont vous être
+                                                                                demandées : prénom et nom.">
+                                                                        <label for="courriel"
+                                                                                title="Veuillez saisir votre adresse courriel.">
+                                                                                <strong class="obligatoire">*</strong> Courriel
+                                                                        </label>
+                                                                        <div class="input-prepend">
+                                                                                <span class="add-on">
+                                                                                        <i class="icon-envelope"></i>
+                                                                                </span>
+                                                                                <input id="courriel" class="input-medium" name="courriel" type="text"/>
+                                                                                <input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
+                                                                        </div>
+                                                                </div>
+                                                                <div id="zone-courriel-confirmation" class="span6 hidden">
+                                                                        <label for="courriel_confirmation"
+                                                                                title="Veuillez saisir confirmer le courriel.">
+                                                                                <strong class="obligatoire">*</strong> Courriel (confirmation)
+                                                                        </label>
+                                                                        <div class="input-prepend">
+                                                                                <span class="add-on">
+                                                                                        <i class="icon-envelope"></i>
+                                                                                </span><input id="courriel_confirmation" class="input-medium" name="courriel_confirmation" type="text"/>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                        <div id="zone-prenom-nom" class="row-fluid hidden">
+                                                                <div class="span6">
+                                                                        <label for="prenom">Prénom</label>
+                                                                        <div>
+                                                                                <input id="prenom" name="prenom" class="span3" type="text"/>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="span6">
+                                                                        <label for="nom">Nom</label>
+                                                                        <div>
+                                                                                <input id="nom" name="nom"  class="span3" type="text"/>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                </form>
+                                        </div>
+                                </div>
+                        </div>
+                        <!-- Messages d'erreur du formulaire-->
+                        <div class="row">
+                                <div class="zone-alerte span6 offset3">
+                                        <div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
+                                                <a class="close">×</a>
+                                                <h4 class="alert-heading">Information : copier/coller</h4>
+                                                <p>
+                                                        Merci de ne pas copier/coller votre courriel.<br/>
+                                                        La double saisie permet de vérifier l'absence d'erreurs.
+                                                </p>
+                                        </div>
+                                        <div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
+                                                <a class="close">×</a>
+                                                <h4 class="alert-heading">Information : courriel introuvable</h4>
+                                                <p>
+                                                        Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
+                                                        Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
+                                                        Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
+                                                        il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
+                                                </p>
+                                        </div>
+                                </div>
+                        </div>
+                        <div class="row-fluid">
+                                <div class="span12">
+                                        <div class="well">
+                                                <div class="row-fluid">
+                                                        <div class="span6">
+                                                                <div>
+                                                                        <div class="row-fluid">
+                                                                                <div class="span12">
+                                                                                        <h2>Lieu du relevé</h2>
+                                                                                </div>
+                                                                        </div>
+                                                                        <div class="row-fluid">
+                                                                                <div class="span4">
+                                                                                        <label for="map_canvas" title="Veuillez localiser l'observation">
+                                                                                                Géolocalisation
+                                                                                        </label>
+                                                                                </div>
+                                                                                <div class="span8 droite">
+                                                                                        <form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
+                                                                                                <div class="control-group">
+                                                                                                        <label for="carte-recherche">Rechercher</label>
+                                                                                                        <input id="carte-recherche" class="search-query" type="text" value=""
+                                                                                                                rel="tooltip"
+                                                                                                                title="Permet de centrer la carte sur le lieu recherché."
+                                                                                                                placeholder="Centrer la carte sur un lieu..."/>
+                                                                                                </div>
+                                                                                        </form>
+                                                                                </div>
+                                                                        </div>
+                                                                        <div class="row-fluid">
+                                                                                <div class="span12">
+                                                                                        <div id="map-canvas" rel="tooltip"
+                                                                                                title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
+                                                                                                        représentant votre station ou bien le glisser-déposer sur
+                                                                                                        le lieu souhaité."></div>
+                                                                                </div>
+                                                                        </div>
+                                                                        <div class="row-fluid">
+                                                                                <label for="coordonnees-geo" class="span7">
+                                                                                        <a href="#" class="afficher-coord">Afficher</a>
+                                                                                        <a href="#" class="afficher-coord" style="display:none;">Cacher</a>
+                                                                                        les coordonnées géographiques
+                                                                                        <span id="lat-lon-info" class="info"
+                                                                                                rel="tooltip"
+                                                                                                title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
+                                                                                                (WGS84)
+                                                                                        </span>
+                                                                                </label>
+                                                                                <div id="info-commune" class="span5">
+                                                                                <span for="marqueur-commune">Commune : </span>
+                                                                                <span id="marqueur-commune">
+                                                                                        <span id="commune-nom" class="commune-info"></span>
+                                                                                        (<span id="commune-code-insee" class="commune-info"
+                                                                                                rel="tooltip"
+                                                                                                title="Code INSEE de la commune"></span>)
+                                                                                </span>
+                                                                        </div>
+                                                                        </div>
+                                                                        <form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
+                                                                                <div id="coordonnees-geo" class="well" style="display:none;">
+                                                                                        <div class="row-fluid form-inline">
+                                                                                                <div id="coord-lat" class="span4">
+                                                                                                        <label for="latitude">Latitude</label>
+                                                                                                        <div>
+                                                                                                                <input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
+                                                                                                        </div>
+                                                                                                </div>
+                                                                                                <div id="coord-lng" class="span4">
+                                                                                                        <label for="longitude">Longitude</label>
+                                                                                                        <div>
+                                                                                                                <input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
+                                                                                                        </div>
+                                                                                                </div>
+                                                                                                <div class="span1">
+                                                                                                        <div>
+                                                                                                                <input id="geolocaliser" type="button" value="Voir sur la carte"
+                                                                                                                        rel="tooltip"
+                                                                                                                        title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
+                                                                                                        </div>
+                                                                                                </div>
+                                                                                </div>
+                                                                                </div>
+                                                                                <div class="row-fluid">
+                                                                                        <div class="span4" rel="tooltip"
+                                                                                                title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
+                                                                                                <label for="lieudit">Lieu-dit</label>
+                                                                                                <div>
+                                                                                                        <input type="text" id="lieudit" class="span2" name="lieudit"/>
+                                                                                                </div>
+                                                                                        </div>
+                                                                                        <div class="span4" rel="tooltip"
+                                                                                                title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
+                                                                                                <label for="station">Station</label>
+                                                                                                <div>
+                                                                                                        <input type="text" id="station" class="span2" name="station"/>
+                                                                                                </div>
+                                                                                        </div>
+                                                                                        <div class="span4" rel="tooltip"
+                                                                                                title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
+                                                                                                <label for="milieux">Milieu</label>
+                                                                                                <div>
+                                                                                                        <input type="text" id="milieu" class="span2" name="milieu" />
+                                                                                                </div>
+                                                                                        </div>
+                                                                                </div>
+                                                                        </form>
+                                                                </div>
+                                                        </div>
+                                                        <div class="span6">
+                                                                <form id="form-obs" action="#" autocomplete="on">
+                                                                        <h2>Observation</h2>
+                                                                        <?php if(!$referentiel_impose) : ?>
+                                                                                <div class="row-fluid">
+                                                                                        <div rel="tooltip"
+                                                                                                title="Sélectionnez le référentiel associé à votre relevé">
+                                                                                                <label for="referentiel" title="Réferentiel">
+                                                                                                        Référentiel
+                                                                                                </label>
+                                                                                                <span class="input-prepend">
+                                                                                                        <span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
+                                                                                                        <select id="referentiel" autocomplete="off">
+                                                                                                                <option value="bdtfx" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
+                                                                                                                <option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
+                                                                                                        </select>
+                                                                                                </span>
+                                                                                        </div>
+                                                                                </div>
+                                                                        <?php endif; ?>
+                                                                        <div class="row-fluid">
+                                                                                <div class="span4" rel="tooltip"
+                                                                                        title="Vous pouvez cliquer sur l'icône de calendrier pour
+                                                                                                sélectionner une date dans un calendrier.">
+                                                                                        <label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
+                                                                                                Date du relevé
+                                                                                        </label>
+                                                                                        <div class="input-prepend">
+                                                                                                <span id="date-icone" class="add-on"></span><input id="date"
+                                                                                                        class="input-small" name="date" type="text"
+                                                                                                        placeholder="jj/mm/aaaa" />
+                                                                                        </div>
+                                                                                </div>
+                                                                                <div id="taxon-input-groupe" class="span8" rel="tooltip"
+                                                                                        title="Sélectionnez une espèce dans la liste déroulante pour lier
+                                                                                                votre nom au référentiel selectionné. Si vous
+                                                                                                le désirez vous pouvez aussi saisir un nom absent du référentiel
+                                                                                                (Ex. : 'fleur violette' ou 'viola sinensis???')." >
+                                                                                        <label for="taxon" title="Choisissez une espèce">
+                                                                                                <strong class="obligatoire">*</strong>
+                                                                                                Espèce <?= $referentiel_impose ? '('.$ns_projet.')' : '' ?> <em>(ou indication sur la plante)</em>
+                                                                                        </label>
+                                                                                        <div class="input-prepend">
+                                                                                                <span class="add-on">
+                                                                                                        <i class="icon-leaf"></i>
+                                                                                                </span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
+                                                                                        </div>
+                                                                                </div>
+                                                                        </div>
+                                                                        <div class="row-fluid">
+                                                                                <div class="span12">
+                                                                                        <label for="notes">Commentaires</label>
+                                                                                        <div>
+                                                                                                <textarea id="notes" class="span6" rows="7" name="notes"
+                                                                                                        placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
+                                                                                        </div>
+                                                                                </div>
+                                                                        </div>
+                                                                </form>
+                                                                <form id="form-upload" class="form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
+                                                                        method="post" enctype="multipart/form-data">
+                                                                        <h2>Image(s) de cette plante</h2>
+                                                                        <strong>Ajouter une image</strong>
+                                                                        <p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
+                                                                        <div id ="photos-conteneur">
+                                                                                <input type="file" id="fichier" name="fichier" accept="image/jpeg" />
+                                                                                <input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
+                                                                                <div id="miniatures">
+                                                                                </div>
+                                                                                <p class="miniature-msg" class="span12">&nbsp;</p>
+                                                                        </div>
+                                                                </form>
+                                                        </div>
+                                                        <div class="row-fluid">
+                                                                <div class="span12 centre" rel="tooltip"
+                                                                        title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
+                                                                                ajouter votre observation à la liste à transmettre.">
+                                                                        <button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
+                                                                                Créer
+                                                                        </button>
+                                                                </div>
+                                                        </div>
+                                                </div>
+                                        </div>
+                                </div>
+                        </div>
+                        <!-- Messages d'erreur du formulaire-->
+                        <div class="row">
+                                <div class="zone-alerte span6 offset3">
+                                        <div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
+                                                <a class="close">×</a>
+                                                <h4 class="alert-heading">Information : 10 observations maximum</h4>
+                                                <p>
+                                                        Vous venez d'ajouter votre 10ème observation.<br/>
+                                                        Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
+                                                </p>
+                                        </div>
+                                </div>
+                                <div class="zone-alerte span6 offset3">
+                                        <div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
+                                                <a class="close">×</a>
+                                                <h4 class="alert-heading">Information : champs en erreur</h4>
+                                                <p>
+                                                        Certains champs du formulaire sont mal remplis.<br/>
+                                                        Veuillez vérifier vos données.
+                                                </p>
+                                        </div>
+                                </div>
+                        </div>
+                        <!-- Affiche le tableau récapitualif des observations ajoutées -->
+                        <div id="zone-liste-obs" class="row-fluid">
+                                <div class="span12">
+                                        <div class="well">
+                                                <div class="row-fluid">
+                                                        <div class="span8">
+                                                                <h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
+                                                        </div>
+                                                        <div class="span4 droite">
+                                                                <button id="transmettre-obs" class="btn btn-primary btn-large"
+                                                                        type="button" disabled="disabled" rel="tooltip"
+                                                                        title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
+                                                                        Transmettre
+                                                                </button>
+                                                        </div>
+                                                </div>
+                                                <div id="liste-obs" ></div>
+                                                <div class="row">
+                                                        <div class="zone-alerte span6 offset3">
+                                                                <div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
+                                                                        <a class="close">×</a>
+                                                                        <h4 class="alert-heading">Attention : aucune observation</h4>
+                                                                        <p>Veuillez saisir des observations pour les transmettres.</p>
+                                                                </div>
+                                                                <div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
+                                                                        <a class="close">×</a>
+                                                                        <h4 class="alert-heading">Information : transmission des observations</h4>
+                                                                        <div class="alert-txt"></div>
+                                                                </div>
+                                                                <div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
+                                                                        <a class="close">×</a>
+                                                                        <h4 class="alert-heading">Erreur : transmission des observations</h4>
+                                                                        <div class="alert-txt"></div>
+                                                                </div>
+                                                        </div>
+                                                </div>
+                                        </div>
+                                </div>
+                        </div>
+                        <footer class="row-fluid">
+                                <p class="span12">&copy; Tela Botanica 2012</p>
+                        </footer>
+                        <!-- Fenêtres modales -->
+                        <div id="chargement" class="modal-fenetre" style="display:none;">
+                                <div id="chargement-centrage" class="modal-contenu">
+                                        <img id="chargement-img"
+                                                src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif"
+                                                alt="Transfert en cours..."/>
+                                        <p id="chargement-txt" style="color:white;font-size:1.5em;">
+                                                Transfert des observations en cours...<br />
+                                                Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
+                                                d'observations à transférer.
+                                        </p>
+                                </div>
+                        </div>
+                        <!-- Templates HTML -->
+                        <div id="tpl-transmission-ok" style="display:none;">
+                                <p class="msg">
+                                        Vos observations ont bien été transmises.<br />
+                                        Elles sont désormais consultables à travers les différents outils de visualisation
+                                        du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
+                                        <a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
+                                        <a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
+                                        <a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
+                                        Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
+                                        connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
+                                        N'oubliez pas qu'il est nécessaire de
+                                        <a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
+                                        au préalable, si ce n'est pas déjà fait.
+                                </p>
+                        </div>
+                        <div id="tpl-transmission-ko" style="display:none;">
+                                <p class="msg">
+                                        Une erreur est survenue lors de la transmission de vos observations.<br />
+                                        Vous pouvez signaler le dysfonctionnement à
+                                        <a class="courriel-erreur" href="mailto:">cel_remarques@tela-botanica.org</a>.
+                                </p>
+                        </div>
+                        <!-- Stats : Google Analytics-->
+                        <script type="text/javascript">
+                                //<![CDATA[
+                                var _gaq = _gaq || [];
+                                _gaq.push(['_setAccount', 'UA-20092557-1']);
+                                _gaq.push(['_trackPageview']);
+                                (function() {
+                                  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                                  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+                                  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+                                })();
+                                //]]>
+                        </script>
+                </div>
+        </body>
+</html>

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/aide.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/aide.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/plus.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/plus.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/icone-photo.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/icone-photo.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/icone-photo-hover.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/icone-photo-hover.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/pasdephoto.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/pasdephoto.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/supprimer.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/supprimer.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/calendrier.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/calendrier.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/chargement_arbre.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/chargement_arbre.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/chargement-image.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/chargement-image.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/chargement.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/icones/chargement.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/logos/tela_botanica.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/logos/tela_botanica.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/marqueurs/carre_vert_jaune.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/marqueurs/carre_vert_jaune.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/marqueurs/etoile_argent.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/marqueurs/etoile_argent.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/marqueurs/epingle.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/marqueurs/epingle.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/marqueurs/rond_vert_jaune.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/marqueurs/rond_vert_jaune.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/marqueurs/source.txt
New file
0,0 → 1,4
carre_vert_jaune.png Designer : Dat Nguyen, License: Free for commercial use, Size (px)16 x 16, Icon set Splashyfish
rond_vert_jaune.png Designer : Dat Nguyen, License: Free for commercial use, Size (px)16 x 16, Icon set Splashyfish
etoile_argent.png Designer : mebaze, Licence : License: Free for personal use only, Size (px)32 x 32, Icon set Brushed Metal Icons
epingle.png Designer : Nahas M.A., License: Free for commercial use \| (Read me), Size (px)32 x 32, Icon set Aristocracy
Property changes:
Added: svn:eol-style
+native
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/favicon.ico
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/img/favicon.ico
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

 /branches/v1.6-croc/widget/modules/saisie/squelettes/defaut/js/defaut.js
 New file
 ,0 → 1,1016
+//+---------------------------------------------------------------------------------------------------------+
+// GÉNÉRAL
+$(document).ready(function() {
+        $(window).on('beforeunload', function(event) {
+                return 'Êtes vous sûr de vouloir quiter la page?\nLes observations saisies mais non transmises seront perdues.';
+        });
+});
+//+----------------------------------------------------------------------------------------------------------+
+// FONCTIONS GÉNÉRIQUES
+/**
+ * Stope l'évènement courrant quand on clique sur un lien.
+ * Utile pour Chrome, Safari...
+ * @param evenement
+ * @return
+ */
+function arreter(evenement) {
+        if (evenement.stopPropagation) {
+                evenement.stopPropagation();
+        }
+        if (evenement.preventDefault) {
+                evenement.preventDefault();
+        }
+        return false;
+}
+function extraireEnteteDebug(jqXHR) {
+        var msgDebug = '';
+        if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
+                var debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
+                if (debugInfos != null) {
+                        $.each(debugInfos, function (cle, valeur) {
+                                msgDebug += valeur + "\n";
+                        });
+                }
+        }
+        return msgDebug;
+}
+function afficherPanneau(selecteur) {
+        $(selecteur).fadeIn("slow").delay(DUREE_MESSAGE).fadeOut("slow");
+}
+//+----------------------------------------------------------------------------------------------------------+
+//UPLOAD PHOTO : Traitement de l'image
+$(document).ready(function() {
+        $(".effacer-miniature").click(function () {
+                supprimerMiniatures($(this));
+        });
+        $("#fichier").bind('change', function (e) {
+                arreter(e);
+                var options = {
+                        success: afficherMiniature, // post-submit callback
+                        dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type)
+                        resetForm: true // reset the form after successful submit
+                };
+                $("#miniature").append('<img id="miniature-chargement" class="miniature" alt="chargement" src="'+CHARGEMENT_IMAGE_URL+'"/>');
+                $("#ajouter-obs").attr('disabled', 'disabled');
+                if(verifierFormat($("#fichier").val())) {
+                        $("#form-upload").ajaxSubmit(options);
+                } else {
+                        window.alert("Le format de fichier n'est pas supporté, les formats acceptés sont "+   $("#fichier").attr("accept"));
+                }
+                return false;
+        });
+        if(ESPECE_IMPOSEE) {
+                $("#taxon").attr("disabled", "disabled");
+                $("#taxon-input-groupe").attr("title","");
+                var infosAssociee = new Object();
+                infosAssociee.label = INFOS_ESPECE_IMPOSEE.nom_sci_complet;
+                infosAssociee.value = INFOS_ESPECE_IMPOSEE.nom_sci_complet;
+                infosAssociee.nt = INFOS_ESPECE_IMPOSEE.num_taxonomique;
+                infosAssociee.nomSel = INFOS_ESPECE_IMPOSEE.nom_sci;
+                infosAssociee.nomSelComplet = INFOS_ESPECE_IMPOSEE.nom_sci_complet;
+                infosAssociee.numNomSel = INFOS_ESPECE_IMPOSEE.id;
+                infosAssociee.nomRet = INFOS_ESPECE_IMPOSEE["nom_retenu.libelle"];
+                infosAssociee.numNomRet = INFOS_ESPECE_IMPOSEE["nom_retenu.id"];
+                infosAssociee.famille = INFOS_ESPECE_IMPOSEE.famille;
+                infosAssociee.retenu = (INFOS_ESPECE_IMPOSEE.retenu == 'false') ? false : true;
+                $("#taxon").data(infosAssociee);
+        }
+        $('.effacer-miniature').live('click', function() {
+                $(this).parent().remove();
+        });
+});
+function verifierFormat(nom) {
+        var parts = nom.split('.');
+        extension = parts[parts.length - 1];
+        return (extension.toLowerCase() == 'jpeg' || extension.toLowerCase() == 'jpg');
+}
+function afficherMiniature(reponse) {
+        if (DEBUG) {
+                var debogage = $("debogage", reponse).text();
+                console.log("Débogage upload : "+debogage);
+        }
+        var message = $("message", reponse).text();
+        if (message != '') {
+                $("#miniature-msg").append(message);
+        } else {
+                $("#miniatures").append(creerWidgetMiniature(reponse));
+        }
+        $('#ajouter-obs').removeAttr('disabled');
+}
+function creerWidgetMiniature(reponse) {
+        var miniatureUrl = $("miniature-url", reponse).text();
+        var imgNom = $("image-nom", reponse).text();
+        var html =
+                '<div class="miniature">'+
+                        '<img class="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'+
+                        '<button class="effacer-miniature" type="button">Effacer</button>'+
+                '</div>'
+        return html;
+}
+function supprimerMiniatures() {
+        $("#miniatures").empty();
+        $("#miniature-msg").empty();
+}
+//+----------------------------------------------------------------------------------------------------------+
+// GOOGLE MAP
+var map;
+var marker;
+var latLng;
+var geocoder;
+$(document).ready(function() {
+        initialiserGoogleMap();
+        // Autocompletion du champ adresse
+        $("#carte-recherche").on('focus', function() {
+                $(this).select();
+        });
+        $("#carte-recherche").on('mouseup', function(event) {// Pour Safari...
+                event.preventDefault();
+        });
+        $("#carte-recherche").keypress(function(e) {
+                if (e.which == 13) {
+                        e.preventDefault();
+                }
+        });
+        $("#carte-recherche").autocomplete({
+                //Cette partie utilise geocoder pour extraire des valeurs d'adresse
+                source: function(request, response) {
+                        geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, function(results, status) {
+                                if (status == google.maps.GeocoderStatus.OK) {
+                                        response($.map(results, function(item) {
+                                                var retour = {
+                                                        label: item.formatted_address,
+                                                        value: item.formatted_address,
+                                                        latitude: item.geometry.location.lat(),
+                                                        longitude: item.geometry.location.lng()
+                                                };
+                                                return retour;
+                                        }));
+                                } else {
+                                        afficherErreurGoogleMap(status);
+                                }
+                        });
+                },
+                // Cette partie est executee a la selection d'une adresse
+                select: function(event, ui) {
+                        var latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
+                        deplacerMarker(latLng);
+                }
+        });
+        $("#geolocaliser").on('click', geolocaliser);
+        google.maps.event.addListener(marker, 'dragend', surDeplacementMarker);
+        google.maps.event.addListener(map, 'click', surClickDansCarte);
+});
+function surDeplacementMarker() {
+        trouverCommune(marker.getPosition());
+        mettreAJourMarkerPosition(marker.getPosition());
+}
+function surClickDansCarte(event) {
+        deplacerMarker(event.latLng);
+}
+function geolocaliser() {
+        var latitude = $('#latitude').val();
+        var longitude = $('#longitude').val();
+        latLng = new google.maps.LatLng(latitude, longitude);
+        deplacerMarker(latLng);
+}
+function initialiserGoogleMap(){
+        // Carte
+        if(REFERENTIEL_IMPOSE && NOM_SCI_PROJET == 'bdtxa') {
+                var latLng = new google.maps.LatLng(14.6, -61.08334);// Fort-De-France
+                // Les antilles étant dispersées, un zoom moins précis est préférable
+                var zoomDefaut = 8;
+        } else {
+                var latLng = new google.maps.LatLng(46.30871, 2.54395);// Centre de la France
+                var zoomDefaut = 5;
+        }
+        var options = {
+                zoom: zoomDefaut,
+                center: latLng,
+                mapTypeId: google.maps.MapTypeId.HYBRID,
+                mapTypeControlOptions: {
+                        mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]}
+        };
+        // Ajout de la couche OSM à la carte
+        osmMapType = new google.maps.ImageMapType({
+                getTileUrl: function(coord, zoom) {
+                        return "http://tile.openstreetmap.org/" +
+                        zoom + "/" + coord.x + "/" + coord.y + ".png";
+                },
+                tileSize: new google.maps.Size(256, 256),
+                isPng: true,
+                alt: 'OpenStreetMap',
+                name: 'OSM',
+                maxZoom: 19
+        });
+        // Création de la carte Google
+        map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas
+        map.mapTypes.set('OSM', osmMapType);
+        // Création du Geocoder
+        geocoder = new google.maps.Geocoder();
+        // Marqueur google draggable
+        marker = new google.maps.Marker({
+                map: map,
+                draggable: true,
+                title: 'Ma station',
+                icon: GOOGLE_MAP_MARQUEUR_URL,
+                position: latLng
+        });
+        initialiserMarker(latLng);
+        // Tentative de geocalisation
+        if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(function(position) {
+                        var latitude = position.coords.latitude;
+                        var longitude = position.coords.longitude;
+                        latLng = new google.maps.LatLng(latitude, longitude);
+                        deplacerMarker(latLng);
+                });
+        }
+}
+function initialiserMarker(latLng) {
+        if (marker != undefined) {
+                marker.setPosition(latLng);
+                map.setCenter(latLng);
+        }
+}
+function deplacerMarker(latLng) {
+        if (marker != undefined) {
+                marker.setPosition(latLng);
+                map.setCenter(latLng);
+                mettreAJourMarkerPosition(latLng);
+                trouverCommune(latLng);
+        }
+}
+function mettreAJourMarkerPosition(latLng) {
+        var lat = latLng.lat().toFixed(5);
+        var lng = latLng.lng().toFixed(5);
+        remplirChampLatitude(lat);
+        remplirChampLongitude(lng);
+}
+function remplirChampLatitude(latDecimale) {
+        var lat = Math.round(latDecimale * 100000) / 100000;
+        $('#latitude').val(lat);
+}
+function remplirChampLongitude(lngDecimale) {
+        var lng = Math.round(lngDecimale * 100000) / 100000;
+        $('#longitude').val(lng);
+}
+function trouverCommune(pos) {
+        $(function() {
+                var url_service = SERVICE_NOM_COMMUNE_URL;
+                var urlNomCommuneFormatee = url_service.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
+                $.ajax({
+                        url : urlNomCommuneFormatee,
+                        type : "GET",
+                        dataType : "jsonp",
+                        beforeSend : function() {
+                                $(".commune-info").empty();
+                                $("#dialogue-erreur .alert-txt").empty();
+                        },
+                        success : function(data, textStatus, jqXHR) {
+                                $(".commune-info").empty();
+                                $("#commune-nom").append(data.nom);
+                                $("#commune-code-insee").append(data.codeINSEE);
+                                $("#marqueur-commune").data('commune', {'nom' : data.nom, 'codeInsee' : data.codeINSEE});
+                        },
+                        statusCode : {
+: function(jqXHR, textStatus, errorThrown) {
+                                        if (DEBUG) {
+                                                $("#dialogue-erreur .alert-txt").append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');
+                                                reponse = jQuery.parseJSON(jqXHR.responseText);
+                                                var erreurMsg = "";
+                                                if (reponse != null) {
+                                                        $.each(reponse, function (cle, valeur) {
+                                                                erreurMsg += valeur + "<br />";
+                                                        });
+                                                }
+                                                $("#dialogue-erreur .alert-txt").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
+                                        }
+                            }
+                        },
+                        error : function(jqXHR, textStatus, errorThrown) {
+                                if (DEBUG) {
+                                        $("#dialogue-erreur .alert-txt").append('<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>');
+                                        reponse = jQuery.parseJSON(jqXHR.responseText);
+                                        var erreurMsg = "";
+                                        if (reponse != null) {
+                                                $.each(reponse, function (cle, valeur) {
+                                                        erreurMsg += valeur + "<br />";
+                                                });
+                                        }
+                                        $("#dialogue-erreur .alert-txt").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
+                                }
+                        },
+                        complete : function(jqXHR, textStatus) {
+                                var debugMsg = extraireEnteteDebug(jqXHR);
+                                if (debugMsg != '') {
+                                        if (DEBUG) {
+                                                $("#dialogue-erreur .alert-txt").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
+                                        }
+                                }
+                                if ($("#dialogue-erreur .msg").length > 0) {
+                                        $("#dialogue-erreur").show();
+                                }
+                        }
+                });
+        });
+}
+//+---------------------------------------------------------------------------------------------------------+
+// IDENTITÉ
+$(document).ready(function() {
+        $("#courriel").on('blur', requeterIdentite);
+        $("#courriel").on('keypress', testerLancementRequeteIdentite);
+});
+function testerLancementRequeteIdentite(event) {
+        if (event.which == 13) {
+                requeterIdentite();
+                event.preventDefault();
+                event.stopPropagation();
+        }
+}
+function requeterIdentite() {
+        var courriel = $("#courriel").val();
+        //TODO: mettre ceci en paramètre de config
+        var urlAnnuaire = "http://www.tela-botanica.org/client/annuaire_nouveau/actuelle/jrest/utilisateur/identite-par-courriel/"+courriel;//http://localhost/applications/annuaire/jrest/
+        $.ajax({
+                url : urlAnnuaire,
+                type : "GET",
+                success : function(data, textStatus, jqXHR) {
+                        console.log('SUCCESS:'+textStatus);
+                        if (data != undefined && data[courriel] != undefined) {
+                                var infos = data[courriel];
+                                $("#id_utilisateur").val(infos.id);
+                                $("#prenom").val(infos.prenom);
+                                $("#nom").val(infos.nom);
+                                $("#courriel_confirmation").val(courriel);
+                                $("#prenom, #nom, #courriel_confirmation").attr('disabled', 'disabled');
+                                $("#date").focus();
+                        } else {
+                                surErreurCompletionCourriel();
+                        }
+                },
+                error : function(jqXHR, textStatus, errorThrown) {
+                        console.log('ERREUR :'+textStatus);
+                        surErreurCompletionCourriel();
+                },
+                complete : function(jqXHR, textStatus) {
+                        console.log('COMPLETE :'+textStatus);
+                        $("#zone-prenom-nom").removeClass("hidden");
+                        $("#zone-courriel-confirmation").removeClass("hidden");
+                }
+        });
+}
+function surErreurCompletionCourriel() {
+        $("#prenom, #nom, #courriel_confirmation").val('');
+        $("#prenom, #nom, #courriel_confirmation").removeAttr('disabled');
+        afficherPanneau("#dialogue-courriel-introuvable");
+}
+//+---------------------------------------------------------------------------------------------------------+
+//FORMULAIRE VALIDATION
+$(document).ready(function() {
+});
+//+---------------------------------------------------------------------------------------------------------+
+// FORMULAIRE
+var obsNbre = 0;
+$(document).ready(function() {
+        $(".alert .close").on('click', fermerPanneauAlert);
+        $("[rel=tooltip]").tooltip('enable');
+        $("#btn-aide").on('click', basculerAffichageAide);
+        $("#prenom").on("change", formaterPrenom);
+        $("#nom").on("change", formaterNom);
+        configurerDatePicker();
+        ajouterAutocompletionNoms();
+        configurerFormValidator();
+        definirReglesFormValidator();
+        $("#courriel_confirmation").on('paste', bloquerCopierCollerCourriel);
+        $("a.afficher-coord").on('click', basculerAffichageCoord);
+        $("#ajouter-obs").on('click', ajouterObs);
+        $(".obs-nbre").on('changement', surChangementNbreObs);
+        $("body").on('click', ".supprimer-obs", supprimerObs);
+        $("#transmettre-obs").on('click', transmettreObs);
+        $("#referentiel").on('change', surChangementReferentiel);
+        $("body").on('click', ".defilement-miniatures-gauche", function(event) {
+                        event.preventDefault();
+                        defilerMiniatures($(this));
+        });
+        $("body").on('click', ".defilement-miniatures-droite", function(event) {
+                event.preventDefault();
+                defilerMiniatures($(this));
+        });
+});
+function configurerFormValidator() {
+        $.validator.addMethod(
+                "dateCel",
+                function (value, element) {
+                        return value == "" || (/^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{4}$/.test(value));
+                },
+                "Format : jj/mm/aaaa. Date incomplète, utiliser 0, exemple : 00/12/2011.");
+        $.extend($.validator.defaults, {
+                errorClass: "control-group error",
+                validClass: "control-group success",
+                errorElement: "span",
+                highlight: function(element, errorClass, validClass) {
+                        if (element.type === 'radio') {
+                                this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
+                        } else {
+                                $(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
+                        }
+                },
+                unhighlight: function(element, errorClass, validClass) {
+                        if (element.type === 'radio') {
+                                this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
+                        } else {
+                                if ($(element).attr('id') == 'taxon') {
+                                        if ($("#taxon").val() != '') {
+                                                // Si le taxon n'est pas lié au référentiel, on vide le data associé
+                                                if($("#taxon").data("value") != $("#taxon").val()) {
+                                                        $("#taxon").data("numNomSel","");
+                                                        $("#taxon").data("nomRet","");
+                                                        $("#taxon").data("numNomRet","");
+                                                        $("#taxon").data("nt","");
+                                                        $("#taxon").data("famille","");
+                                                }
+                                                $("#taxon-input-groupe").removeClass(errorClass).addClass(validClass);
+                                                $(element).next(" span.help-inline").remove();
+                                        }
+                                } else {
+                                        $(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
+                                        $(element).next(" span.help-inline").remove();
+                                }
+                        }
+                }
+        });
+}
+function definirReglesFormValidator() {
+        $("#form-observateur").validate({
+                rules: {
+                        courriel : {
+                                required : true,
+                                email : true},
+                        courriel_confirmation : {
+                                required : true,
+                                equalTo: "#courriel"}
+                }
+        });
+        $("#form-station").validate({
+                rules: {
+                        latitude : {
+                                range: [-90, 90]},
+                        longitude : {
+                                range: [-180, 180]}
+                }
+        });
+        $("#form-obs").validate({
+                rules: {
+                        date : "dateCel",
+                        taxon : "required"
+                }
+        });
+}
+function configurerDatePicker() {
+        $.datepicker.setDefaults($.datepicker.regional["fr"]);
+        $("#date").datepicker({
+                dateFormat: "dd/mm/yy",
+                showOn: "button",
+                buttonImageOnly: true,
+                buttonImage: CALENDRIER_ICONE_URL,
+                buttonText: "Afficher le calendrier pour saisir la date.",
+                showButtonPanel: true
+        });
+        $("img.ui-datepicker-trigger").appendTo("#date-icone");
+}
+function fermerPanneauAlert() {
+        $(this).parentsUntil(".zone-alerte", ".alert").hide();
+}
+function formaterNom() {
+        $(this).val($(this).val().toUpperCase());
+}
+function formaterPrenom() {
+        var prenom = new Array();
+        var mots = $(this).val().split(' ');
+        for (var i = 0; i < mots.length; i++) {
+                var mot = mots[i];
+                if (mot.indexOf('-') >= 0) {
+                        var prenomCompose = new Array();
+                        var motsComposes = mot.split('-');
+                    for (var j = 0; j < motsComposes.length; j++) {
+                        var motSimple = motsComposes[j];
+                        var motMajuscule = motSimple.charAt(0).toUpperCase() + motSimple.slice(1);
+                        prenomCompose.push(motMajuscule);
+                    }
+                    prenom.push(prenomCompose.join('-'));
+                } else {
+                        var motMajuscule = mot.charAt(0).toUpperCase() + mot.slice(1);
+                        prenom.push(motMajuscule);
+                }
+        }
+        $(this).val(prenom.join(' '));
+}
+function basculerAffichageAide()  {
+        if ($(this).hasClass('btn-warning')) {
+                $("[rel=tooltip]").tooltip('enable');
+                $(this).removeClass('btn-warning').addClass('btn-success');
+                $('#btn-aide-txt', this).text("Désactiver l'aide");
+        } else {
+                $("[rel=tooltip]").tooltip('disable');
+                $(this).removeClass('btn-success').addClass('btn-warning');
+                $('#btn-aide-txt', this).text("Activer l'aide");
+        }
+}
+function bloquerCopierCollerCourriel() {
+        afficherPanneau("#dialogue-bloquer-copier-coller");
+        return false;
+}
+function basculerAffichageCoord() {
+        $("a.afficher-coord").toggle();
+        $("#coordonnees-geo").toggle('slow');
+        //valeur false pour que le lien ne soit pas suivi
+        return false;
+}
+function ajouterObs() {
+        if (validerFormulaire() == true) {
+                obsNbre = obsNbre + 1;
+                $(".obs-nbre").text(obsNbre);
+                $(".obs-nbre").triggerHandler('changement');
+                afficherObs();
+                stockerObsData();
+                supprimerMiniatures();
+                $("#taxon").val("");
+                $("#taxon").data("numNomSel",undefined);
+        } else {
+                afficherPanneau('#dialogue-form-invalide');
+        }
+}
+function afficherObs() {
+        $("#liste-obs").prepend(
+                '<div id="obs'+obsNbre+'" class="row-fluid obs obs'+obsNbre+'">'+
+                        '<div class="span12">'+
+                                '<div class="well">'+
+                                        '<div class="obs-action pull-right" rel="tooltip" data-placement="bottom" '+
+                                                'title="Supprimer cette observation de la liste à transmettre">'+
+                                                '<button class="btn btn-danger supprimer-obs" value="'+obsNbre+'" title="'+obsNbre+'">'+
+                                                        '<i class="icon-trash icon-white"></i>'+
+                                                '</button>'+
+                                        '</div> '+
+                                        '<div class="row-fluid">'+
+                                                '<div class="thumbnail span2">'+
+                                                        ajouterImgMiniatureAuTransfert()+
+                                                '</div>'+
+                                                '<div class="span9">'+
+                                                        '<ul class="unstyled">'+
+                                                                '<li>'+
+                                                                        '<span class="nom-sci">'+$("#taxon").val()+'</span> '+
+                                                                        ajouterNumNomSel()+'<span class="referentiel-obs">'+
+                                                                        ($("#taxon").data("numNomSel") == undefined ? '' : '['+NOM_SCI_PROJET+']')+'</span>'+
+                                                                        ' observé à '+
+                                                                        '<span class="commune">'+$('#commune-nom').text()+'</span> '+
+                                                                        '('+$('#commune-code-insee').text()+') ['+$("#latitude").val()+' / '+$("#longitude").val()+']'+
+                                                                        ' le '+
+                                                                        '<span class="date">'+$("#date").val()+'</span>'+
+                                                                '</li>'+
+                                                                '<li>'+
+                                                                        '<span>Lieu-dit :</span> '+$('#lieudit').val()+' '+
+                                                                        '<span>Station :</span> '+$('#station').val()+' '+
+                                                                        '<span>Milieu :</span> '+$('#milieu').val()+' '+
+                                                                '</li>'+
+                                                                '<li>'+
+                                                                        'Commentaires : <span class="discretion">'+$("#notes").val()+'</span>'+
+                                                                '</li>'+
+                                                        '</ul>'+
+                                                '</div>'+
+                                        '</div>'+
+                                '</div>'+
+                        '</div>'+
+                '</div>');
+}
+function stockerObsData() {
+        $("#liste-obs").data('obsId'+obsNbre, {
+                'date' : $("#date").val(),
+                'notes' : $("#notes").val(),
+                'nom_sel' : $("#taxon").val(),
+                'num_nom_sel' : $("#taxon").data("numNomSel"),
+                'nom_ret' : $("#taxon").data("nomRet"),
+                'num_nom_ret' : $("#taxon").data("numNomRet"),
+                'num_taxon' : $("#taxon").data("nt"),
+                'famille' : $("#taxon").data("famille"),
+                'referentiel' : ($("#taxon").data("numNomSel") == undefined ? '' : NOM_SCI_REFERENTIEL),
+                'latitude' : $("#latitude").val(),
+                'longitude' : $("#longitude").val(),
+                'commune_nom' : $("#commune-nom").text(),
+                'commune_code_insee' : $("#commune-code-insee").text(),
+                'lieudit' : $("#lieudit").val(),
+                'station' : $("#station").val(),
+                'milieu' : $("#milieu").val(),
+                //Ajout des champs images
+                'image_nom' : getNomsImgsOriginales(),
+                'image_b64' : getB64ImgsOriginales()
+        });
+}
+function surChangementReferentiel() {
+        NOM_SCI_PROJET = $('#referentiel').val();
+        NOM_SCI_REFERENTIEL = NOM_SCI_PROJET+':'+PROJETS_VERSIONS[NOM_SCI_PROJET];
+        $('#taxon').val('');
+}
+function surChangementNbreObs() {
+        if (obsNbre == 0) {
+                $("#transmettre-obs").attr('disabled', 'disabled');
+                $("#ajouter-obs").removeAttr('disabled');
+        } else if (obsNbre > 0 && obsNbre < OBS_MAX_NBRE) {
+                $("#transmettre-obs").removeAttr('disabled');
+                $("#ajouter-obs").removeAttr('disabled');
+        } else if (obsNbre >= OBS_MAX_NBRE) {
+                $("#ajouter-obs").attr('disabled', 'disabled');
+                afficherPanneau("#dialogue-bloquer-creer-obs");
+        }
+}
+function transmettreObs() {
+        var observations = $("#liste-obs").data();
+        console.log(observations);
+        if (observations == undefined || jQuery.isEmptyObject(observations)) {
+                afficherPanneau("#dialogue-zero-obs");
+        } else {
+                observations['projet'] = TAG_PROJET;
+                observations['tag-obs'] = TAG_OBS;
+                observations['tag-img'] = TAG_IMG;
+                var utilisateur = new Object();
+                utilisateur.id_utilisateur = $("#id_utilisateur").val();
+                utilisateur.prenom = $("#prenom").val();
+                utilisateur.nom = $("#nom").val();
+                utilisateur.courriel = $("#courriel").val();
+                observations['utilisateur'] = utilisateur;
+                envoyerObsAuCel(observations);
+        }
+        return false;
+}
+function envoyerObsAuCel(observations) {
+        var erreurMsg = "";
+        $.ajax({
+                url : SERVICE_SAISIE_URL,
+                type : "POST",
+                data : observations,
+                dataType : "json",
+                beforeSend : function() {
+                        $("#dialogue-obs-transaction-ko").hide();
+                        $("#dialogue-obs-transaction-ok").hide();
+                        $(".alert-txt .msg").remove();
+                        $(".alert-txt .msg-erreur").remove();
+                        $(".alert-txt .msg-debug").remove();
+                        $("#chargement").show();
+                },
+                success : function(data, textStatus, jqXHR) {
+                        $('#dialogue-obs-transaction-ok .alert-txt').append($("#tpl-transmission-ok").clone().html());
+                        supprimerMiniatures();
+                },
+                statusCode : {
+: function(jqXHR, textStatus, errorThrown) {
+                                erreurMsg += "Erreur 500 :\ntype : "+textStatus+' '+errorThrown+"\n";
+                    }
+                },
+                error : function(jqXHR, textStatus, errorThrown) {
+                        erreurMsg += "Erreur Ajax :\ntype : "+textStatus+' '+errorThrown+"\n";
+                        try {
+                                reponse = jQuery.parseJSON(jqXHR.responseText);
+                                if (reponse != null) {
+                                        $.each(reponse, function (cle, valeur) {
+                                                erreurMsg += valeur + "\n";
+                                        });
+                                }
+                        } catch(e) {
+                                erreurMsg += "L'erreur n'était pas en JSON.";
+                        }
+                },
+                complete : function(jqXHR, textStatus) {
+                        $("#chargement").hide();
+                        var debugMsg = extraireEnteteDebug(jqXHR);
+                        if (erreurMsg != '') {
+                                if (DEBUG) {
+                                        $("#dialogue-obs-transaction-ko .alert-txt").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');
+                                        $("#dialogue-obs-transaction-ko .alert-txt").append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>');
+                                }
+                                var hrefCourriel = "mailto:cel@tela-botanica.org?"+
+                                        "subject=Disfonctionnement du widget de saisie "+TAG_PROJET+
+                                        "&body="+erreurMsg+"\nDébogage :\n"+debugMsg;
+                                $('#dialogue-obs-transaction-ko .alert-txt').append($("#tpl-transmission-ko").clone()
+                                        .find('.courriel-erreur')
+                                        .attr('href', hrefCourriel)
+                                        .end()
+                                        .html());
+                                $("#dialogue-obs-transaction-ko").show();
+                        } else {
+                                if (DEBUG) {
+                                        $("#dialogue-obs-transaction-ok .alert-txt").append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>');
+                                }
+                                $("#dialogue-obs-transaction-ok").show();
+                        }
+                        initialiserObs();
+                }
+        });
+}
+function validerFormulaire() {
+        $observateur = $("#form-observateur").valid();
+        $station = $("#form-station").valid();
+        $obs = $("#form-obs").valid();
+        return ($observateur == true && $station == true && $obs == true) ? true : false;
+}
+function getNomsImgsOriginales() {
+        var noms = new Array();
+        $(".miniature-img").each(function() {
+                noms.push($(this).attr('alt'));
+        });
+        return noms;
+}
+function getB64ImgsOriginales() {
+        var b64 = new Array();
+        $(".miniature-img").each(function() {
+                if ($(this).hasClass('b64')) {
+                        b64.push($(this).attr('src'));
+                } else if ($(this).hasClass('b64-canvas')) {
+                        b64.push($(this).data('b64'));
+                }
+        });
+        return b64;
+}
+function supprimerObs() {
+        var obsId = $(this).val();
+        // Problème avec IE 6 et 7
+        if (obsId == "Supprimer") {
+                obsId = $(this).attr("title");
+        }
+        obsNbre = obsNbre - 1;
+        $(".obs-nbre").text(obsNbre);
+        $(".obs-nbre").triggerHandler('changement');
+        $('.obs'+obsId).remove();
+        $("#liste-obs").removeData('obsId'+obsId);
+}
+function initialiserObs() {
+        obsNbre = 0;
+        $(".obs-nbre").text(obsNbre);
+        $(".obs-nbre").triggerHandler('changement');
+        $("#liste-obs").removeData();
+        $('.obs').remove();
+        $("#dialogue-bloquer-creer-obs").hide();
+}
+function ajouterImgMiniatureAuTransfert() {
+        var html = '';
+        var miniatures = '';
+        var premiere = true;
+        if ($("#miniatures img").length >= 1) {
+                $("#miniatures img").each(function() {
+                        var visible = premiere ? 'miniature-selectionnee' : 'miniature-cachee';
+                        premiere = false;
+                        var css = $(this).hasClass('b64') ? 'miniature b64' : 'miniature';
+                        var src = $(this).attr("src");
+                        var alt = $(this).attr("alt");
+                        miniature = '<img class="'+css+' '+visible+'"  alt="'+alt+'"src="'+src+'" />';
+                        miniatures += miniature;
+                });
+                visible = ($("#miniatures img").length > 1) ? '' : 'defilement-miniatures-cache';
+                var html =
+                        '<div class="defilement-miniatures">'+
+                                '<a href="#" class="defilement-miniatures-gauche '+visible+'">&#60;</a>'+
+                                miniatures+
+                                '<a href="#" class="defilement-miniatures-droite '+visible+'">&#62;</a>'+
+                        '</div>';
+        } else {
+                html = '<img class="miniature" alt="Aucune photo"src="'+PAS_DE_PHOTO_ICONE_URL+'" />';
+        }
+        return html;
+}
+function defilerMiniatures(element) {
+        var miniatureSelectionne = element.siblings("img.miniature-selectionnee");
+        miniatureSelectionne.removeClass('miniature-selectionnee');
+        miniatureSelectionne.addClass('miniature-cachee');
+        var miniatureAffichee = miniatureSelectionne;
+        if(element.hasClass('defilement-miniatures-gauche')) {
+                if(miniatureSelectionne.prev('.miniature').length != 0) {
+                        miniatureAffichee = miniatureSelectionne.prev('.miniature');
+                } else {
+                        miniatureAffichee = miniatureSelectionne.siblings(".miniature").last();
+                }
+        } else {
+                if(miniatureSelectionne.next('.miniature').length != 0) {
+                        miniatureAffichee = miniatureSelectionne.next('.miniature');
+                } else {
+                        miniatureAffichee = miniatureSelectionne.siblings(".miniature").first();
+                }
+        }
+        console.log(miniatureAffichee);
+        miniatureAffichee.addClass('miniature-selectionnee');
+        miniatureAffichee.removeClass('miniature-cachee');
+}
+function ajouterNumNomSel() {
+        var nn = '';
+        if ($("#taxon").data("numNomSel") == undefined) {
+                nn = '<span class="alert-error">[non lié au référentiel]</span>';
+        } else {
+                nn = '<span class="nn">[nn'+$("#taxon").data("numNomSel")+']</span>';
+        }
+        return nn;
+}
+//+---------------------------------------------------------------------------------------------------------+
+// AUTO-COMPLÉTION Noms Scientifiques
+function ajouterAutocompletionNoms() {
+        $('#taxon').autocomplete({
+                source: function(requete, add){
+                        // la variable de requête doit être vidée car sinon le parametre "term" est ajouté
+                        requete = "";
+                        var url = getUrlAutocompletionNomsSci();
+                        $.getJSON(url, requete, function(data) {
+                                var suggestions = traiterRetourNomsSci(data);
+                                add(suggestions);
+            });
+        },
+        html: true
+        });
+        $( "#taxon" ).bind("autocompleteselect", function(event, ui) {
+                $("#taxon").data(ui.item);
+                if (ui.item.retenu == true) {
+                        $("#taxon").addClass('ns-retenu');
+                } else {
+                        $("#taxon").removeClass('ns-retenu');
+                }
+        });
+}
+function getUrlAutocompletionNomsSci() {
+        var mots = $('#taxon').val();
+        var url = SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL.replace('{referentiel}',NOM_SCI_PROJET);
+        url = url.replace('{masque}', mots);
+        return url;
+}
+function traiterRetourNomsSci(data) {
+        var suggestions = [];
+        if (data.resultat != undefined) {
+                $.each(data.resultat, function(i, val) {
+                        val.nn = i;
+                        var nom = {label : '', value : '', nt : '', nomSel : '', nomSelComplet : '', numNomSel : '',
+                                nomRet : '', numNomRet : '', famille : '', retenu : false
+                        };
+                        if (suggestions.length >= AUTOCOMPLETION_ELEMENTS_NBRE) {
+                                nom.label = "...";
+                                nom.value = $('#taxon').val();
+                                suggestions.push(nom);
+                                return false;
+                        } else {
+                                nom.label = val.nom_sci_complet;
+                                nom.value = val.nom_sci_complet;
+                                nom.nt = val.num_taxonomique;
+                                nom.nomSel = val.nom_sci;
+                                nom.nomSelComplet = val.nom_sci_complet;
+                                nom.numNomSel = val.nn;
+                                nom.nomRet = val.nom_retenu_complet;
+                                nom.numNomRet = val["nom_retenu.id"];
+                                nom.famille = val.famille;
+                                nom.retenu = (val.retenu == 'false') ? false : true;
+                                suggestions.push(nom);
+                        }
+                });
+        }
+        return suggestions;
+}
+/*
+ * jQuery UI Autocomplete HTML Extension
+ *
+ * Copyright 2010, Scott González (http://scottgonzalez.com)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * http://github.com/scottgonzalez/jquery-ui-extensions
+ *
+ * Adaptation par Aurélien Peronnet pour la mise en gras des noms de taxons valides
+ */
+(function( $ ) {
+        var proto = $.ui.autocomplete.prototype,
+                initSource = proto._initSource;
+        function filter( array, term ) {
+                var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
+                return $.grep( array, function(value) {
+                        return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
+                });
+        }
+        $.extend( proto, {
+                _initSource: function() {
+                        if ( this.options.html && $.isArray(this.options.source) ) {
+                                this.source = function( request, response ) {
+                                        response( filter( this.options.source, request.term ) );
+                                };
+                        } else {
+                                initSource.call( this );
+                        }
+                },
+                _renderItem: function( ul, item) {
+                        if (item.retenu == true) {
+                                item.label = "<strong>"+item.label+"</strong>";
+                        }
+                        return $( "<li></li>" )
+                                .data( "item.autocomplete", item )
+                                .append( $( "<a></a>" )[ this.options.html ? "html" : "text" ]( item.label ) )
+                                .appendTo( ul );
+                }
+        });
+})( jQuery );

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/css/fonts/caflisch_scriptw_web.ttf
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/css/fonts/caflisch_scriptw_web.ttf
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/css/fonts/caflisch_scriptw_web.woff
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/css/fonts/caflisch_scriptw_web.woff
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

 /branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/css/florileges.css
 New file
 ,0 → 1,281
+@CHARSET "UTF-8";
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Polices d'écriture*/
+@font-face {
+        font-family: florileges;
+        src: url(fonts/caflisch_scriptw_web.ttf) format('ttf'),
+                url(fonts/caflisch_scriptw_web.woff) format('woff');
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Balises */
+body {
+        background: url("../img/background/noise.png") repeat scroll 0 0, none repeat scroll 0 0 #524C47;
+}
+footer p{
+        color:white;
+        text-align:center;
+}
+button img {
+        display:block;
+}
+h1, h2 {
+        font-size: 40px;
+        font-family:florileges;
+        font-weight: normal;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Générique */
+.discretion {
+        color:white;
+        font-family:arial;
+        font-size:11px;
+        line-height: 13px;
+}
+.droite {
+        text-align:right;
+}
+.centre {
+        text-align:center;
+}
+.modal-fenetre {
+        position:fixed;
+        z-index:1000;
+        top:0;
+        left:0;
+        height:100%;
+        width:100%;
+        background:#777;
+        background:rgba(90,86,93,0.7);
+        text-align:center;
+}
+.modal-contenu {
+        position:relative;
+        width:30%;
+        margin:0 auto;
+        top:30%;
+}
+.nom-sci {
+        font-style: italic;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Gestion des photos */
+.miniature{
+        float: left;
+        height: 130px;
+        padding-left: 15px;
+        padding-right: 15px;
+}
+.miniature-img {
+        height: 100px;
+}
+.miniature img {
+        display: block;
+}
+.miniature-chargement {
+        height:100px;
+        width: 100px;
+}
+.defilement-miniatures-gauche, .defilement-miniatures-droite {
+        float: left;
+        font-size: 1.2em;
+        font-weight: bold;
+        height: 62px;
+        margin: 5px;
+        padding-top: 30px;
+        width: 12px;
+}
+.defilement-miniatures {
+        width: 210px;
+}
+.defilement-miniatures-cache {
+        visibility: hidden;
+}
+.miniature-cachee {
+        display: none;
+}
+.miniature-selectionnee {
+        display: block;
+        width: 90px;
+}
+#fichier {
+        display: none;
+}
+#photos-conteneur {
+        height: 120px;
+}
+#photo-placeholder {
+        background: url("../img/icones/icone-photo.png");
+        background-size: 89px;
+        cursor: pointer;
+        margin-bottom: 15px;
+        margin-right: 15px;
+        float:left;
+        border: 5px dashed #CCCCCC;
+        border-radius: 8px 8px 8px 8px;
+        height: 100px;
+        margin: 2px 0 2px 2px;
+        text-align: center;
+        width: 98px;
+        box-sizing:border-box;
+        -moz-box-sizing:border-box;
+        -webkit-box-sizing:border-box;
+}
+#photo-placeholder:hover {
+        background: url("../img/icones/icone-photo-hover.png");
+        background-size: 89px;
+        border: 5px dashed #111;
+        border-radius: 8px;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Correction style CSS Bootstrap */
+.well {
+        margin-bottom: 5px;
+        padding: 4px;
+        background: url("../img/background/noise.png") repeat scroll 0 0 white;
+}
+@media (min-width: 575px) and (max-width: 767px){
+        .forcer-colonne [class*="span"] {
+                float: left;
+                margin-left: 2.12766%;
+        }
+        .forcer-colonne .span4 {
+                width: 31.6239%;
+        }
+        .forcer-colonne .span6 {
+                width: 48.9362%;
+        }
+        .forcer-colonne .span8 {
+                width: 65.9574%;
+        }
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* Spécifique Florilèges */
+.page-header .intro {
+        background: url("../img/background/noise.png") repeat scroll 0 0, radial-gradient(ellipse farthest-corner at center center , #A1C886 0%, #689E4B 100%) repeat scroll 0 0 transparent;
+        color: white;
+        padding:5px;
+}
+.page-header .intro a {
+        color: #524C47;
+}
+/* Géolocalisation */
+#map-canvas {
+        height: 240px;
+        margin-bottom:5px;
+}
+.coordonnees-geo, .lat-lon-info {
+        font-size: 10px;
+}
+#info-commune {
+        text-align:right;
+        font-size:10px;
+}
+.afficher-coord {
+        font-size:10px;
+}
+/* Observations */
+#obs-titre {
+        margin-right: 20px;
+}
+#form-date {
+        margin: 10px 0;
+        line-height: 40px;
+}
+.ns-retenu {
+        font-weight:bold;
+}
+.nn{
+        color:#3B9D3B;
+}
+.obs .nom-sci{
+        font-size:1.5em;
+        font-weight:bold;
+}
+.commune, .date{
+        font-size:1.3em;
+        font-weight:bold;
+}
+.obs-action{
+        opacity:1;
+}
+/* Validation du formulaire */
+label.valid {
+        display: inline-block;
+        text-indent: -9999px;
+        color: #468847;
+}
+label.error {
+        font-weight: bold;
+        color: #B94A48;
+        padding: 2px 8px;
+        margin-top: 2px;
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+/* SLIDERs */
+.slider-on {
+        display: none;
+}
+.slider-holder {
+        height: 65px;
+        margin-left: -20px;
+        margin-right: 20px;
+        padding-left: 40px;
+        padding-top: 30px;
+}
+.ui-widget-header {
+        background: url("../img/background/noise.png") #A1C886;
+}
+.horizontal-slider {
+        margin: 0 3%;
+        height: 9px !important;
+        width: 90%;
+}
+.horizontal-slider.ui-slider-horizontal .ui-slider-range-min {
+        border-radius: 5px 0 0 5px;
+}
+.slider-holder p {
+        float: left;
+        font-size: 10px;
+        text-align: center;
+        top: 10px;
+}
+.slider-holder p + p {
+        line-height: 1.5em;
+}
+.slider-holder .slider-legend {
+        margin: 0 3%;
+}
+.slider-holder .slider-legend p {
+        padding-top:5px;
+        overflow: hidden;
+}
+.horizontal-slider a.ui-slider-handle {
+        background: url("../img/icones/selecteur.png") no-repeat scroll 23px 20px transparent;
+        border: medium none;
+        border-radius: 0;
+        display: block;
+        font-size: 14px;
+        font-weight: bold;
+        height: 60px;
+        margin: 5px 5px 5px -35px;
+        padding: 0;
+        position: relative;
+        text-align: center;
+        text-decoration: none;
+        top: -40px;
+        width: 70px;
+        white-space: nowrap;
+}
+.ui-slider .ui-slider-handle {
+        font-size: 12px;
+}
+.ui-datepicker {
+        z-index: 2;
+}

 /branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/florileges.tpl.html
 New file
 ,0 → 1,932
+<!DOCTYPE html>
+<html lang="fr">
+        <head>
+                <title>Florilèges</title>
+                <meta charset="utf-8">
+                <meta name="author" content="Jean-Pascal MILCENT, Aurélien PERONNET" />
+                <meta name="keywords" content="Florilege, Tela Botanica, CEL" />
+                <meta name="description" content="Widget de saisie du projet Florilege" />
+                <!-- Viewport Mobile -->
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <!-- Favicones -->
+                <link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/florileges/img/favicon.ico" />
+                <!-- Javascript : bibliothèques -->
+                <!-- Google Map v3 -->
+                <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
+                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
+                <!-- Jquery -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.9.1/jquery-1.9.1.js"></script>
+                <!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/js/jquery-ui-1.10.2.custom.min.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/js/jquery.ui.datepicker-fr.min.js"></script>
+                <!-- Jquery Plugins -->
+                <!-- Jquery Validate : nécessaire pour la validation des formulaires -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/jquery.validate.min.js"></script>
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/messages_fr.js"></script>
+                <!-- Jquery Form :nécessaire pour l'upload des images -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/3.32/jquery.form.min.js"></script>
+                <!-- Bootstrap -->
+                <script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.3.1/js/bootstrap.min.js"></script>
+                <!-- Javascript : appli saisie -->
+                <script src="<?=$url_base?>saisie?projet=sauvages&amp;service=taxons" type="text/javascript"></script>
+                <script type="text/javascript">
+                //<![CDATA[
+                        // La présence du parametre 'debug' dans l'URL enclenche le dégogage
+                        var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
+                        // La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
+                        var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
+                        // Mot-clé du widget/projet
+                        var TAG_PROJET = "WidgetFlorileges";
+                        // Mots-clés à ajouter aux images
+                        var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
+                        TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."'" : 'TAG_IMG' ?>;
+                        // Mots-clés à ajouter aux observations
+                        var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
+                        TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."'" : 'TAG_OBS' ?>;
+                        // URL du web service réalisant l'insertion des données dans la base du CEL.
+                        var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
+                        // Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
+                        var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
+                        // Nom du référentiel utilisé pour les nom scientifiques.
+                        var NOM_SCI_PROJET = "<?=$ns_projet?>";
+                        // Code de la version du référentiel utilisé pour les nom scientifiques.
+                        var NOM_SCI_VERSION = "<?=$ns_version?>";
+                        // Indication de la présence d'une espèce imposée
+                        var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
+                        // Tableau d'informations sur l'espèce imposée
+                        var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
+                        // Nombre d'élément dans les listes d'auto-complétion
+                        var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
+                        // Indication de la présence d'un référentiel imposé
+                        var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
+                        // Indication des version utilisées de chaque référentiel
+                        var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
+                        // URL du web service permettant l'auto-complétion des noms scientifiques.
+                        var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
+                                        "masque={masque}&"+
+                                        "recherche=etendue&"+
+                                        "retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
+                                        //"version.projet="+NOM_SCI_VERSION+"&"+
+                                        "ns.structure=au"+"&"+
+                                        "navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
+                        // URL du web service permettant l'auto-complétion des noms scientifiques.
+                        var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
+                                        "masque={masque}&"+
+                                        "recherche=etendue&"+
+                                        "retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
+                                        //"version.projet="+NOM_SCI_VERSION+"&"+
+                                        "ns.structure=au"+"&"+
+                                        "navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
+                        // Nombre d'observations max autorisé avant transmission
+                        var OBS_MAX_NBRE = 10;
+                        // Durée d'affichage en milliseconde des messages d'informations
+                        var DUREE_MESSAGE = 15000;
+                        // Squelette d'URL du web service de l'annuaire.
+                        var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
+                        // Squelette d'URL du web service d'eFlore fournissant les noms de communes.
+                        var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
+                        // Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
+                        var SERVICE_NOM_COMMUNE_URL_ALT = "http://www.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
+                        // URL du marqueur à utiliser dans la carte Google Map
+                        var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/epingle.png";
+                        // URL de l'icône du chargement en cours
+                        var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement.gif";
+                        // URL de l'icône du chargement en cours d'une image
+                        var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement-image.gif";
+                        // URL de l'icône du calendrier
+                        var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/calendrier.png";
+                        // URL de l'icône du calendrier
+                        var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/pas_de_photo.png";
+                //]]>
+                </script>
+                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/florileges/js/florileges.js"></script>
+                <!-- CSS -->
+                <link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" media="screen" />
+                <link href="http://www.tela-botanica.org/commun/bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
+                <link href="http://www.tela-botanica.org/commun/bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
+                <link href="<?=$url_base?>modules/saisie/squelettes/florileges/css/<?=isset($_GET['style']) ? $_GET['style'] : 'florileges'?>.css" rel="stylesheet" type="text/css" media="screen" />
+        </head>
+        <body data-spy="scroll">
+                <div class="container">
+                        <div class="row-fluid page-header">
+                                <div class="span7">
+                                        <div class="well intro">
+                                                <h1>Florilèges</h1>
+                                                <p>
+                                                        Bienvenue sur l'interface de saisie en ligne des données
+                                                        "Florilèges"-RUES. Cette interface vous permet d'enregistrer vos
+                                                        observations de terrain et de les partager simplement
+                                                        (sous <a href="http://creativecommons.org/licenses/by-sa/2.0/fr/">licence CC-BY-SA</a>)
+                                                        avec <a href="http://www.plante-et-cite.fr">Plante & Cité</a>,
+                                                        <a href="http://www.tela-botanica.org/site:accueil">le réseau Tela Botanica</a>
+                                                        et <a href="http://sauvagesdemarue.mnhn.fr">le programme Sauvage de ma Rue</a>.
+                                                </p>
+                                                <p>
+                                                        En vous identifiant, vous pourrez retrouver et consulter l'ensemble de
+                                                        vos observations dans <a href="http://www.tela-botanica.org/appli:cel">le Carnet en ligne</a>.<br />
+                                                        Renseignez tout d'abord les caractéristiques et l'itinéraire technique mis en place
+                                                        sur le site des relevés, puis détaillez ensuite les espèces observées sur ce site.
+                                                        Ajoutez chaque observation à la liste à transmettre à l'aide du bouton
+                                                        «&nbsp;Créer&nbsp;».
+                                                </p>
+                                                <p>
+                                                        L'interface de saisie vous permet de renseigner jusqu'à 10 observations à des dates
+                                                        différentes pour un même site.
+                                                        Partagez-les avec le bouton «&nbsp;Transmettre&nbsp;».
+                                                        Elles apparaissent immédiatement sur
+                                                        <a href="http://www.tela-botanica.org/site:botanique?langue=fr">la carte</a> et
+                                                        <a href="http://www.tela-botanica.org/site:botanique?langue=fr">la galerie photos</a>
+                                                        du projet.
+                                                </p>
+                                                <p>
+                                                        Pour toute question, <a href="mailto:contact@florileges.info">contactez les animateurs du programme Florilèges</a>.
+                                                </p>
+                                                <p class="discretion">
+                                                        Un aide intéractive est à votre disposition sur l'interface.
+                                                        Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
+                                                        <button id="btn-aide" class="btn btn-mini btn-success">
+                                                                <span class="icon-question-sign icon-white"></span>
+                                                                <span id="btn-aide-txt" >Désactiver l'aide</span>
+                                                        </button>
+                                                </p>
+                                        </div>
+                                </div>
+                                <div class="span5">
+                                        <div class="well forcer-colonne">
+                                                <h2>Observateur</h2>
+                                                <form id="form-observateur" action="#" class="" autocomplete="on">
+                                                        <div class="row-fluid">
+                                                                <div class="span6 control-group" rel="tooltip" data-placement="bottom"
+                                                                        title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
+                                                                                Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
+                                                                                ultérieurement. Des informations complémentaires vont vous être
+                                                                                demandées : prénom et nom.">
+                                                                                <label class="control-label" for="courriel">
+                                                                                        <strong class="obligatoire">*</strong>
+                                                                                        Courriel
+                                                                                </label>
+                                                                                <div class="controls">
+                                                                                        <div class="input-prepend">
+                                                                                                <span class="add-on">
+                                                                                                        <i class="icon-envelope"></i>
+                                                                                                </span>
+                                                                                                <input id="courriel" name="courriel" class="span11" type="text"/>
+                                                                                                <input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
+                                                                                        </div>
+                                                                                </div>
+                                                                </div>
+                                                                <div id="zone-courriel-confirmation" class="span6 hidden control-group">
+                                                                        <label class="control-label" for="courriel_confirmation">
+                                                                                <strong class="obligatoire">*</strong>
+                                                                                Courriel (confirmation)
+                                                                        </label>
+                                                                        <div class="controls">
+                                                                                <div class="input-prepend">
+                                                                                        <span class="add-on">
+                                                                                                <i class="icon-envelope"></i>
+                                                                                        </span>
+                                                                                        <input id="courriel_confirmation" name="courriel_confirmation"
+                                                                                                class="span11" type="text"/>
+                                                                                </div>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                        <div id="zone-prenom-nom" class="row-fluid hidden">
+                                                                <div class="span6">
+                                                                        <label for="prenom">
+                                                                                Prénom
+                                                                        </label>
+                                                                        <input id="prenom" name="prenom" class="span12" type="text"/>
+                                                                </div>
+                                                                <div class="span6">
+                                                                        <label for="nom">
+                                                                                Nom
+                                                                        </label>
+                                                                        <input id="nom" name="nom"  class="span12" type="text"/>
+                                                                </div>
+                                                        </div>
+                                                        <div id="zone-personne-complement" class="forcer-colonne">
+                                                                <div class="row-fluid">
+                                                                        <div class="span6">
+                                                                                <label for="structure">
+                                                                                        Structure
+                                                                                </label>
+                                                                                <input id="structure" name="personneStructure" class="span12 " type="text"/>
+                                                                        </div>
+                                                                        <div class="span6">
+                                                                                <label for="service">
+                                                                                        Service
+                                                                                </label>
+                                                                                <input id="service" name="personneService" class="span12" type="text"/>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12">
+                                                                                <label for="fonction">
+                                                                                        Fonction
+                                                                                </label>
+                                                                                <input id="fonction" name="personneFonction" class="span12" type="text"/>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                </form>
+                                        </div>
+                                </div>
+                        </div>
+                        <!-- Messages d'erreur du formulaire-->
+                        <div class="row-fluid">
+                                <div class="zone-alerte span6 offset3">
+                                        <div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
+                                                <a class="close">×</a>
+                                                <h4 class="alert-heading">Information : copier/coller</h4>
+                                                <p>
+                                                        Merci de ne pas copier/coller votre courriel.<br/>
+                                                        La double saisie permet de vérifier l'absence d'erreurs.
+                                                </p>
+                                        </div>
+                                        <div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
+                                                <a class="close">×</a>
+                                                <h4 class="alert-heading">Information : courriel introuvable</h4>
+                                                <p>
+                                                        Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
+                                                        Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
+                                                        Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
+                                                        il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
+                                                </p>
+                                        </div>
+                                </div>
+                        </div>
+                        <div class="row-fluid">
+                                <div class="span12">
+                                        <div class="well">
+                                                <div class="row-fluid">
+                                                        <div class="span4">
+                                                                <div class="row-fluid">
+                                                                        <div class="span12">
+                                                                                <h2>Site</h2>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12" rel="tooltip"
+                                                                                title="Nom du site." >
+                                                                                <label for="station">Nom</label>
+                                                                                <div>
+                                                                                        <input type="text" id="station" class="span12" name="station"/>
+                                                                                </div>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="forcer-colonne well">
+                                                                        <div class="row-fluid">
+                                                                                <div class="span4">
+                                                                                        <label for="map_canvas" title="Veuillez localiser l'observation">
+                                                                                                Géolocalisation
+                                                                                        </label>
+                                                                                </div>
+                                                                                <div class="span8 droite">
+                                                                                        <form id="form-carte-recherche" class="form-search form-horizontal">
+                                                                                                <div class="control-group">
+                                                                                                        <input id="carte-recherche" class="search-query" type="text" value=""
+                                                                                                                rel="tooltip"
+                                                                                                                title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
+                                                                                                                placeholder="Centrer la carte sur un lieu..."/>
+                                                                                                </div>
+                                                                                        </form>
+                                                                                </div>
+                                                                        </div>
+                                                                        <div class="row-fluid">
+                                                                                <div class="span12">
+                                                                                        <div id="map-canvas" rel="tooltip"
+                                                                                                title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
+                                                                                                        représentant votre station ou bien le glisser-déposer sur
+                                                                                                        le lieu souhaité."></div>
+                                                                                </div>
+                                                                        </div>
+                                                                        <div id="coordonnees-geo-affichage" class="row-fluid">
+                                                                                <label for="coordonnees-geo" class="span6">
+                                                                                        <a class="afficher-coord btn">
+                                                                                                <span class="afficher-coord-action">Afficher</span>
+                                                                                                <span class="afficher-coord-action" style="display:none;">Cacher</span>
+                                                                                                coordonnées
+                                                                                                <span id="lat-lon-info" class="info"
+                                                                                                        rel="tooltip"
+                                                                                                        title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
+                                                                                                        (WGS84)
+                                                                                                </span>
+                                                                                        </a>
+                                                                                </label>
+                                                                                <div id="info-commune" class="span6">
+                                                                                        <span for="marqueur-commune">Commune : </span>
+                                                                                        <span id="marqueur-commune">
+                                                                                                <span id="commune-nom" class="commune-info"></span>
+                                                                                                (<span id="commune-code-insee" class="commune-info"
+                                                                                                        rel="tooltip"
+                                                                                                        title="Code INSEE de la commune"></span>)
+                                                                                        </span>
+                                                                                </div>
+                                                                        </div>
+                                                                        <div id="coordonnees-geo" class="row-fluid" style="display:none;">
+                                                                                <form id="form-station" class="control-group form-inline">
+                                                                                        <div id="coord-lat" class="span4">
+                                                                                                <label>
+                                                                                                        Latitude
+                                                                                                        <input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
+                                                                                                </label>
+                                                                                        </div>
+                                                                                        <div id="coord-lng" class="span4">
+                                                                                                <label>
+                                                                                                        Longitude
+                                                                                                        <input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
+                                                                                                </label>
+                                                                                        </div>
+                                                                                        <div class="span4">
+                                                                                                <button id="geolocaliser" class="btn"
+                                                                                                        rel="tooltip"
+                                                                                                        title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
+                                                                                                        Voir sur la carte
+                                                                                                </button>
+                                                                                        </div>
+                                                                                </form>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                        <div class="span4">
+                                                                <div class="row-fluid">
+                                                                        <div class="span12">
+                                                                                <h2>Typologie du site</h2>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12" rel="tooltip"
+                                                                                title="Typologie du site. Vous pouvez en cliquant dans la zone de saisie puis en appuyant sur la touche «flêche bas», ouvrir la liste des choix disponibles." >
+                                                                                <label>
+                                                                                        Typologie
+                                                                                        <select id="typo-urbaine" class="span12" name="typoUrbaine">
+                                                                                                <option>centre ville</option>
+                                                                                                <option>faubourg</option>
+                                                                                                <option>quartier résidentiel</option>
+                                                                                                <option>zone commerciale</option>
+                                                                                                <option>zone d'activités</option>
+                                                                                        </select>
+                                                                                </label>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12" rel="tooltip"
+                                                                                title="Type de revêtement de sol." >
+                                                                                <label>
+                                                                                        Revêtement de sol
+                                                                                        <select id="revetement-sol" class="span12" name="revetementSol">
+                                                                                                <option>asphalte et enrobés</option>
+                                                                                                <option>pavés</option>
+                                                                                                <option>stabilisés, aires sablées</option>
+                                                                                                <option>graviers</option>
+                                                                                                <option>terre</option>
+                                                                                        </select>
+                                                                                </label>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12" rel="tooltip"
+                                                                                title="Présence de zones végétalisés autour du site (haie, aménagement paysager, parcs et jardins, ...)." >
+                                                                                <label>
+                                                                                        Présence de zones végétalisés
+                                                                                        <select id="presence-zone-vegetalise">
+                                                                                                <option>nulle</option>
+                                                                                                <option>faible</option>
+                                                                                                <option>moyenne</option>
+                                                                                                <option>importante</option>
+                                                                                        </select>
+                                                                                </label>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12" rel="tooltip"
+                                                                                title="Hauteur des bâtiments avoisinants (en étages)." >
+                                                                                <label>
+                                                                                        Hauteur des bâtiments
+                                                                                        <select id="hauteur-batiment-avoisinant">
+                                                                                                <option>0</option>
+                                                                                                <option>1</option>
+                                                                                                <option>2</option>
+                                                                                                <option>3</option>
+                                                                                                <option>4</option>
+                                                                                                <option>5 et +</option>
+                                                                                        </select>
+                                                                                </label>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                        <div class="span4">
+                                                                <div class="row-fluid">
+                                                                        <div class="span12">
+                                                                                <h2>Itinéraire technique</h2>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12" rel="tooltip"
+                                                                                title="Intensité de gestion." >
+                                                                                <label>
+                                                                                        Intensité de gestion
+                                                                                        <select id="intensite-gestion" class="span12">
+                                                                                                <option>extensive</option>
+                                                                                                <option>intermédiaire</option>
+                                                                                                <option>intensive</option>
+                                                                                        </select>
+                                                                                </label>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12">
+                                                                                <div class="row-fluid">
+                                                                                        <div class="span12" rel="tooltip"
+                                                                                                title="Utilisation de produits phytosanitaires sur le site." >
+                                                                                                <label>
+                                                                                                        Utilisation de produits phytosanitaires
+                                                                                                        <select id="periodicite-traitement-phyto">
+                                                                                                                <option value="régulière">régulière</option>
+                                                                                                                <option value="occasionnelle">occasionnelle</option>
+                                                                                                                <option value="rare">rare</option>
+                                                                                                                <option value="jamais">jamais</option>
+                                                                                                        </select>
+                                                                                                </label>
+                                                                                        </div>
+                                                                                </div>
+                                                                                <div id="datp-zone" class="row-fluid hidden">
+                                                                                        <div class="span12" rel="tooltip"
+                                                                                                        title="Date approximative de l'arrêt des traitements.
+                                                                                                        Vous pouvez cliquer sur l'icône de calendrier pour
+                                                                                                        sélectionner une date dans un calendrier.">
+                                                                                                <label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
+                                                                                                        Date d'arrêt des traitements
+                                                                                                        <div class="input-prepend">
+                                                                                                                <span id="date-arret-traitement-phyto-icone" class="add-on"></span>
+                                                                                                                <input id="date-arret-traitement-phyto" class="input-small"
+                                                                                                                        name="date-arret-traitement-phyto" type="text"
+                                                                                                                        placeholder="jj/mm/aaaa" />
+                                                                                                        </div>
+                                                                                                </label>
+                                                                                        </div>
+                                                                                </div>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12" rel="tooltip"
+                                                                                title="Description de l'itinéraire de gestion (type de traitement, matériel utilisé, fréquence de passage, ...)." >
+                                                                                <label>
+                                                                                        Description de l'itinéraire de gestion
+                                                                                        <textarea id="itineraire-gestion" class="span12" rows="7" name="itineraireGestion"></textarea>
+                                                                                </label>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                </div>
+                                        </div>
+                                </div>
+                        </div>
+                        <div class="row-fluid">
+                                <div class="span12 well">
+                                        <div class="row-fluid">
+                                                <div class="span4">
+                                                        <h2 id="obs-titre">Observations</h2>
+                                                </div>
+                                                <div class="span8">
+                                                        <form id="form-date" class="form-inline">
+                                                                <div class="span6" rel="tooltip"
+                                                                        title="Vous pouvez cliquer sur l'icône de calendrier pour
+                                                                        sélectionner une date dans un calendrier.">
+                                                                        <label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
+                                                                                Date du relevé
+                                                                                <div class="input-prepend">
+                                                                                        <span id="date-icone" class="add-on"></span>
+                                                                                        <input id="date" class="input-small" name="date" type="text"
+                                                                                                placeholder="jj/mm/aaaa" />
+                                                                                </div>
+                                                                        </label>
+                                                                </div>
+                                                                <div class="span6" rel="tooltip"
+                                                                        title="Date approximative de la dernière intervention." >
+                                                                        <label>
+                                                                                Dernière intervention
+                                                                                <select id="date-derniere-intervention">
+                                                                                        <option value="inconnue">ne sais pas</option>
+                                                                                        <option>plus de 3 ans</option>
+                                                                                        <option>entre 1 et 3 ans</option>
+                                                                                        <option>moins d'1 an</option>
+                                                                                        <option>au cours du dernier semestre</option>
+                                                                                        <option>au cours du dernier trimestre</option>
+                                                                                        <option>au cours des 30 derniers jours</option>
+                                                                                        <option>au cours des 7 derniers jours</option>
+                                                                                </select>
+                                                                        </label>
+                                                                </div>
+                                                        </form>
+                                                </div>
+                                        </div>
+                                        <form id="form-obs" autocomplete="on">
+                                                <div class="row-fluid">
+                                                        <div class="well span6">
+                                                                <div class="row-fluid">
+                                                                        <div class="span12">
+                                                                                <div id="taxon-liste-input-groupe" class="control-group" rel="tooltip"
+                                                                                        title="Sélectionnez une espèce dans la liste déroulante par son nom latin
+                                                                                        ou commun. Si une espèce est abscente, sélectionner «Autre espèce»." >
+                                                                                        <label class="control-label" for="taxon-liste" title="Choisissez l'espèce rencontrée.">
+                                                                                                <strong class="obligatoire">*</strong>
+                                                                                                Espèces les plus communes
+                                                                                        </label>
+                                                                                        <div class="controls">
+                                                                                                <div class="input-prepend ">
+                                                                                                        <span class="add-on">
+                                                                                                                <i class="icon-leaf"></i>
+                                                                                                        </span>
+                                                                                                        <select id="taxon-liste" class="span12" name="taxon-liste">
+                                                                                                                <option value="" selected>Sélectionner une espèce</option>
+                                                                                                                <option value="?">Autre espèce</option>
+                                                                                                                <?php foreach ($taxons as $taxon) :?>
+                                                                                                                        <option
+                                                                                                                                class="<?=($taxon['nom_ret'] == $taxon['nom_fr']) ? 'nom-sci' : 'nom-fr' ?>"
+                                                                                                                                value="<?=$taxon['num_nom_sel']?>"
+                                                                                                                                title="<?=$taxon['nom_ret'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>"
+                                                                                                                                >
+                                                                                                                                <?=$taxon['nom_fr']?>
+                                                                                                                        </option>
+                                                                                                                <?php endforeach; ?>
+                                                                                                        </select>
+                                                                                                </div>
+                                                                                        </div>
+                                                                                </div>
+                                                                        </div>
+                                                                </div>
+                                                                <div id="taxon-input-groupe" class="row-fluid hidden">
+                                                                        <div class="span12">
+                                                                                <div class="control-group" rel="tooltip"
+                                                                                        title="Sélectionnez une espèce dans la liste déroulante pour lier
+                                                                                                votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir
+                                                                                                un nom absent du référentiel (Ex. : 'fleur violette' ou 'viola sinensis???')." >
+                                                                                        <label class="control-label" for="taxon" title="Choisissez l'espèce rencontrée.">
+                                                                                                Autre espèce
+                                                                                        </label>
+                                                                                        <div class="controls">
+                                                                                                <input id="taxon" name="taxon" type="text" class="span12"
+                                                                                                        placeholder="Autre espèce (ou indication sur la plante)"
+                                                                                                        value="<?= $nom_sci_espece_defaut; ?>" />
+                                                                                        </div>
+                                                                                </div>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12" rel="tooltip"
+                                                                                title="Sélectionner un ou plusieurs milieux dans lesquels l'espèce est présente sur le site.">
+                                                                                <label class="span2">
+                                                                                        Milieux
+                                                                                </label>
+                                                                                <div class="input-prepend">
+                                                                                        <div class="btn-group">
+                                                                                                <button class="btn dropdown-toggle" data-toggle="dropdown">
+                                                                                                        <i class="icon-globe"></i>
+                                                                                                        Sélectionner un ou plusieurs milieux
+                                                                                                        <span class="caret"></span>
+                                                                                                </button>
+                                                                                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                                                                                                        <li>
+                                                                                                                <label class="checkbox">
+                                                                                                                        <input name="milieux" type="checkbox" value="chemin"/>
+                                                                                                                        chemin
+                                                                                                                </label>
+                                                                                                        </li>
+                                                                                                        <li>
+                                                                                                                <label class="checkbox">
+                                                                                                                        <input name="milieux" type="checkbox" value="fissures"/>
+                                                                                                                        fissures
+                                                                                                                </label>
+                                                                                                        </li>
+                                                                                                        <li>
+                                                                                                                <label class="checkbox">
+                                                                                                                        <input name="milieux" type="checkbox" value="haie"/>
+                                                                                                                        haie
+                                                                                                                </label>
+                                                                                                        </li>
+                                                                                                        <li>
+                                                                                                                <label class="checkbox">
+                                                                                                                        <input name="milieux" type="checkbox" value="mur"/>
+                                                                                                                        mur
+                                                                                                                </label>
+                                                                                                        </li>
+                                                                                                        <li>
+                                                                                                                <label class="checkbox">
+                                                                                                                        <input name="milieux" type="checkbox" value="pelouse"/>
+                                                                                                                        pelouse
+                                                                                                                </label>
+                                                                                                        </li>
+                                                                                                        <li>
+                                                                                                                <label class="checkbox">
+                                                                                                                        <input name="milieux" type="checkbox" value="pied d'arbre"/>
+                                                                                                                        pied d'arbre
+                                                                                                                </label>
+                                                                                                        </li>
+                                                                                                        <li>
+                                                                                                                <label class="checkbox">
+                                                                                                                        <input name="milieux" type="checkbox" value="plate bande"/>
+                                                                                                                        plate bande
+                                                                                                                </label>
+                                                                                                        </li>
+                                                                                                </ul>
+                                                                                        </div>
+                                                                                </div>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12" rel="tooltip"
+                                                                                title="Hauteur maximum en centimètre de la plante sur le site.">
+                                                                                <label >
+                                                                                        Hauteux max. (en cm) de la plante
+                                                                                        <input id="hauteur-plante" class="span2" name="hauteurPlante"
+                                                                                                type="number" min="0" step="1" />
+                                                                                </label>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="row-fluid">
+                                                                        <div class="span12">
+                                                                                <label for="notes">Commentaires</label>
+                                                                                <div>
+                                                                                        <textarea id="notes" class="span12" rows="7" name="notes"
+                                                                                                placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
+                                                                                </div>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                        <div class="span6">
+                                                                <div class="well">
+                                                                        <div class="row-fluid">
+                                                                                <div class="span12" rel="tooltip"
+                                                                                        title="Résistance/Résilience face aux traitements utilisés." >
+                                                                                        <label>
+                                                                                                Résistance/Résilience
+                                                                                                <select id="resistance-traitement-phyto" name="resistanceTraitementPhyto">
+                                                                                                        <option>Pas de traitement</option>
+                                                                                                        <option>faible</option>
+                                                                                                        <option>intermédiaire</option>
+                                                                                                        <option>forte</option>
+                                                                                                        <option>très forte</option>
+                                                                                                </select>
+                                                                                        </label>
+                                                                                </div>
+                                                                        </div>
+                                                                        <div class="row-fluid">
+                                                                                <div class="span12" rel="tooltip"
+                                                                                        title="Vitesse de croissance sur site." >
+                                                                                        <label>
+                                                                                                Croissance
+                                                                                                <select id="vitesse-croissance" name="vitesseCroissance">
+                                                                                                        <option>nulle</option>
+                                                                                                        <option>lente</option>
+                                                                                                        <option>moyenne</option>
+                                                                                                        <option>rapide</option>
+                                                                                                        <option>trop rapide</option>
+                                                                                                </select>
+                                                                                        </label>
+                                                                                </div>
+                                                                        </div>
+                                                                </div>
+                                                                <div class="well">
+                                                                        <div class="row-fluid">
+                                                                                <div class="span12" rel="tooltip"
+                                                                                        title="Perception globale de l'espèce par l'équipe technique.">
+                                                                                        <label class="span4">
+                                                                                                Perceptions par l'équipe
+                                                                                        </label>
+                                                                                        <div class="input-prepend">
+                                                                                                <div class="btn-group">
+                                                                                                        <button class="btn dropdown-toggle" data-toggle="dropdown">
+                                                                                                                <i class="icon-eye-open"></i>
+                                                                                                                Sélectionner une ou plusieurs perceptions
+                                                                                                                <span class="caret"></span>
+                                                                                                        </button>
+                                                                                                        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                                                                                                                <li>
+                                                                                                                        <label class="checkbox">
+                                                                                                                                <input name="milieux" type="checkbox" value="ne connaissais pas la plante avant l'étude"/>
+                                                                                                                                ne connaissais pas la plante avant l'étude
+                                                                                                                        </label>
+                                                                                                                </li>
+                                                                                                                <li>
+                                                                                                                        <label class="checkbox">
+                                                                                                                                <input name="milieux" type="checkbox" value="discrète ne pose pas de problème"/>
+                                                                                                                                discrète ne pose pas de problème
+                                                                                                                        </label>
+                                                                                                                </li>
+                                                                                                                <li>
+                                                                                                                        <label class="checkbox">
+                                                                                                                                <input name="milieux" type="checkbox" value="visible et esthétique"/>
+                                                                                                                                visible et esthétique
+                                                                                                                        </label>
+                                                                                                                </li>
+                                                                                                                <li>
+                                                                                                                        <label class="checkbox">
+                                                                                                                                <input name="milieux" type="checkbox" value="gênante, difficile à gérer"/>
+                                                                                                                                gênante, difficile à gérer
+                                                                                                                        </label>
+                                                                                                                </li>
+                                                                                                                <li>
+                                                                                                                        <label class="checkbox">
+                                                                                                                                <input name="milieux" type="checkbox" value="envahissante, cause des dégâts"/>
+                                                                                                                                envahissante, cause des dégâts
+                                                                                                                        </label>
+                                                                                                                </li>
+                                                                                                        </ul>
+                                                                                                </div>
+                                                                                        </div>
+                                                                                </div>
+                                                                        </div>
+                                                                        <div class="row-fluid">
+                                                                                <div class="span12" rel="tooltip"
+                                                                                        title="Mauvaise perception de la plante par les riverains." >
+                                                                                        <label>
+                                                                                                Mauvaise perception par les riverains ?
+                                                                                                <select id="perception-riverain" name="perceptionRiverain">
+                                                                                                        <option>inconnue</option>
+                                                                                                        <option>oui</option>
+                                                                                                        <option>non</option>
+                                                                                                </select>
+                                                                                        </label>
+                                                                                </div>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                </div>
+                                                </form>
+                                                <form id="form-upload" class="form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
+                                                        method="post" enctype="multipart/form-data">
+                                                        <div class="row-fluid">
+                                                                <div class="span12 well">
+                                                                        <strong>Cliquez sur l'icone pour ajouter une image</strong>
+                                                                        <p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
+                                                                        <div id ="photos-conteneur">
+                                                                                <div id="photo-placeholder" rel="tooltip"
+                                                                                title="Cliquez pour ajouter une photo de votre observation. Elle doit être au
+                                                                                        format JPEG et ne doit pas excéder 5Mo."></div>
+                                                                                <input type="file" id="fichier" name="fichier" accept="image/jpeg" />
+                                                                                <input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
+                                                                                <div id="miniatures">
+                                                                                </div>
+                                                                                <p class="miniature-msg" class="span12">&nbsp;</p>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                </form>
+                                                <div class="row-fluid">
+                                                        <div class="span12 centre" rel="tooltip"
+                                                                title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
+                                                                        ajouter votre observation à la liste à transmettre.">
+                                                                <button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
+                                                                        Créer
+                                                                </button>
+                                                        </div>
+                                                </div>
+                                        </div>
+                                </div>
+                                <!-- Messages d'erreur du formulaire-->
+                                <div class="row-fluid">
+                                        <div class="zone-alerte span6 offset3">
+                                                <div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
+                                                        <a class="close">×</a>
+                                                        <h4 class="alert-heading">Information : 10 observations maximum</h4>
+                                                        <p>
+                                                                Vous venez d'ajouter votre 10ème observation.<br/>
+                                                                Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
+                                                        </p>
+                                                </div>
+                                        </div>
+                                        <div class="zone-alerte span6 offset3">
+                                                <div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
+                                                        <a class="close">×</a>
+                                                        <h4 class="alert-heading">Information : champs en erreur</h4>
+                                                        <p>
+                                                                Certains champs du formulaire sont mal remplis.<br/>
+                                                                Veuillez vérifier vos données.
+                                                        </p>
+                                                </div>
+                                        </div>
+                                </div>
+                                <!-- Affiche le tableau récapitualif des observations ajoutées -->
+                                <div id="zone-liste-obs" class="row-fluid">
+                                        <div class="span12">
+                                                <div class="well">
+                                                        <div class="row-fluid">
+                                                                <div class="span8">
+                                                                        <h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
+                                                                </div>
+                                                                <div class="span4 droite">
+                                                                        <button id="transmettre-obs" class="btn btn-primary btn-large"
+                                                                                type="button" disabled="disabled" rel="tooltip"
+                                                                                title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
+                                                                                Transmettre
+                                                                        </button>
+                                                                </div>
+                                                        </div>
+                                                        <div id="liste-obs" ></div>
+                                                        <div class="row">
+                                                                <div class="zone-alerte span6 offset3">
+                                                                        <div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
+                                                                                <a class="close">×</a>
+                                                                                <h4 class="alert-heading">Attention : aucune observation</h4>
+                                                                                <p>Veuillez saisir des observations pour les transmettres.</p>
+                                                                        </div>
+                                                                        <div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
+                                                                                <a class="close">×</a>
+                                                                                <h4 class="alert-heading">Information : transmission des observations</h4>
+                                                                                <div class="alert-txt"></div>
+                                                                        </div>
+                                                                        <div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
+                                                                                <a class="close">×</a>
+                                                                                <h4 class="alert-heading">Erreur : transmission des observations</h4>
+                                                                                <div class="alert-txt"></div>
+                                                                        </div>
+                                                                </div>
+                                                        </div>
+                                                </div>
+                                        </div>
+                                </div>
+                                <footer class="row-fluid">
+                                        <p class="span12">&copy; Tela Botanica 2013</p>
+                                </footer>
+                        </div>
+                        <!-- Fenêtres modales -->
+                        <div id="chargement" class="modal-fenetre" style="display:none;">
+                                <div id="chargement-centrage" class="modal-contenu">
+                                        <img id="chargement-img"
+                                                src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif"
+                                                alt="Transfert en cours..."/>
+                                        <p id="chargement-txt" style="color:white;font-size:1.5em;">
+                                                Transfert des observations en cours...<br />
+                                                Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
+                                                d'observations à transférer.
+                                        </p>
+                                </div>
+                        </div>
+                        <!-- Templates HTML -->
+                        <div id="tpl-transmission-ok" style="display:none;">
+                                <p class="msg">
+                                        Vos observations ont bien été transmises.<br />
+                                        Elles sont désormais consultables à travers les différents outils de visualisation
+                                        du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
+                                        <a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
+                                        <a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
+                                        <a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
+                                        Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
+                                        connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
+                                        N'oubliez pas qu'il est nécessaire de
+                                        <a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
+                                        au préalable, si ce n'est pas déjà fait.
+                                </p>
+                        </div>
+                        <div id="tpl-transmission-ko" style="display:none;">
+                                <p class="msg">
+                                        Une erreur est survenue lors de la transmission de vos observations.<br />
+                                        Vous pouvez signaler le dysfonctionnement à
+                                        <a class="courriel-erreur" href="mailto:">cel_remarques@tela-botanica.org</a>.
+                                </p>
+                        </div>
+                        <!-- Stats : Google Analytics-->
+                        <script type="text/javascript">
+                                //<![CDATA[
+                                var _gaq = _gaq || [];
+                                _gaq.push(['_setAccount', 'UA-20092557-1']);
+                                _gaq.push(['_trackPageview']);
+                                (function() {
+                                  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                                  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+                                  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+                                })();
+                                //]]>
+                        </script>
+                </div>
+        </body>
+</html>

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/favicon.ico
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/favicon.ico
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/background/noise.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/background/noise.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/epingle.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/epingle.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/pas_de_photo.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/pas_de_photo.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/calendrier.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/calendrier.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/selecteur.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/selecteur.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/chargement-image.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/chargement-image.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/chargement.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

/branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/img/icones/chargement.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property

 /branches/v1.6-croc/widget/modules/saisie/squelettes/florileges/js/florileges.js
 New file
 ,0 → 1,1089
+//+---------------------------------------------------------------------------------------------------------+
+// GÉNÉRAL
+$(document).ready(function() {
+        if (DEBUG == false) {
+                $(window).on('beforeunload', function(event) {
+                        return 'Êtes vous sûr de vouloir quiter la page?\nLes observations saisies mais non transmises seront perdues.';
+                });
+        }
+});
+//+----------------------------------------------------------------------------------------------------------+
+// FONCTIONS GÉNÉRIQUES
+/**
+ * Stope l'évènement courrant quand on clique sur un lien.
+ * Utile pour Chrome, Safari...
+ * @param evenement
+ * @return
+ */
+function arreter(evenement) {
+        if (evenement.stopPropagation) {
+                evenement.stopPropagation();
+        }
+        if (evenement.preventDefault) {
+                evenement.preventDefault();
+        }
+        return false;
+}
+function extraireEnteteDebug(jqXHR) {
+        var msgDebug = '';
+        if (jqXHR.getResponseHeader('X-DebugJrest-Data') != '') {
+                var debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader('X-DebugJrest-Data'));
+                if (debugInfos != null) {
+                        $.each(debugInfos, function (cle, valeur) {
+                                msgDebug += valeur + "\n";
+                        });
+                }
+        }
+        return msgDebug;
+}
+function afficherPanneau(selecteur) {
+        $(selecteur).fadeIn('slow').delay(DUREE_MESSAGE).fadeOut('slow');
+}
+//+----------------------------------------------------------------------------------------------------------+
+//UPLOAD PHOTO : Traitement de l'image
+$(document).ready(function() {
+        $('.effacer-miniature').click(function () {
+                supprimerMiniatures($(this));
+        });
+        $('#photo-placeholder').click(function(event) {
+                $('#fichier').click();
+        });
+        $('#fichier').bind('change', function (e) {
+                arreter(e);
+                var options = {
+                        success: afficherMiniature, // post-submit callback
+                        dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type)
+                        resetForm: true // reset the form after successful submit
+                };
+                $('#miniature').append(
+                        '<img id="miniature-chargement" class="miniature" alt="chargement" src="'+CHARGEMENT_IMAGE_URL+'"/>');
+                $('#ajouter-obs').attr('disabled', 'disabled');
+                if(verifierFormat($('#fichier').val())) {
+                        $('#form-upload').ajaxSubmit(options);
+                } else {
+                        window.alert("Le format de fichier n'est pas supporté, les formats acceptés sont "+   $('#fichier').attr('accept'));
+                }
+                return false;
+        });
+        $('.effacer-miniature').on('click', function() {
+                $(this).parent().remove();
+        });
+});
+function verifierFormat(nom) {
+        var parts = nom.split('.');
+        extension = parts[parts.length - 1];
+        return (extension.toLowerCase() == 'jpeg' || extension.toLowerCase() == 'jpg');
+}
+function afficherMiniature(reponse) {
+        if (DEBUG) {
+                var debogage = $('debogage', reponse).text();
+                console.log('Débogage upload : ' + debogage);
+        }
+        var message = $('message', reponse).text();
+        if (message != '') {
+                $('#miniature-msg').append(message);
+        } else {
+                $('#miniatures').append(creerWidgetMiniature(reponse));
+        }
+        $('#ajouter-obs').removeAttr('disabled');
+}
+function creerWidgetMiniature(reponse) {
+        var miniatureUrl = $('miniature-url', reponse).text(),
+                imgNom = $('image-nom', reponse).text(),
+                html =
+                        '<div class="miniature">'+
+                                '<img class="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'+
+                                '<button class="effacer-miniature" type="button">Effacer</button>'+
+                        '</div>'
+        return html;
+}
+function supprimerMiniatures() {
+        $('#miniatures').empty();
+        $('#miniature-msg').empty();
+}
+//+----------------------------------------------------------------------------------------------------------+
+// GOOGLE MAP
+var map,
+        marker,
+        latLng,
+        geocoder;
+$(document).ready(function() {
+        initialiserGoogleMap();
+        // Autocompletion du champ adresse
+        $('#carte-recherche').on('focus', function() {
+                $(this).select();
+        });
+        $('#carte-recherche').on('mouseup', function(event) {// Pour Safari...
+                event.preventDefault();
+        });
+        $('#carte-recherche').keypress(function(e) {
+                if (e.which == 13) {
+                        e.preventDefault();
+                }
+        });
+        $('#carte-recherche').autocomplete({
+                //Cette partie utilise geocoder pour extraire des valeurs d'adresse
+                source: function(request, response) {
+                        geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, function(results, status) {
+                                if (status == google.maps.GeocoderStatus.OK) {
+                                        response($.map(results, function(item) {
+                                                var retour = {
+                                                        label: item.formatted_address,
+                                                        value: item.formatted_address,
+                                                        latitude: item.geometry.location.lat(),
+                                                        longitude: item.geometry.location.lng()
+                                                };
+                                                return retour;
+                                        }));
+                                } else {
+                                        afficherErreurGoogleMap(status);
+                                }
+                        });
+                },
+                // Cette partie est executee a la selection d'une adresse
+                select: function(event, ui) {
+                        var latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
+                        deplacerMarker(latLng);
+                }
+        });
+        $('#geolocaliser').on('click', geolocaliser);
+        google.maps.event.addListener(marker, 'dragend', surDeplacementMarker);
+        google.maps.event.addListener(map, 'click', surClickDansCarte);
+});
+function initialiserGoogleMap(){
+        // Carte
+        var latLng = new google.maps.LatLng(46.30871, 2.54395),// Centre de la France
+                zoomDefaut = 5;
+                options = {
+                        zoom: zoomDefaut,
+                        center: latLng,
+                        mapTypeId: google.maps.MapTypeId.HYBRID,
+                        mapTypeControlOptions: {
+                                mapTypeIds: ['OSM',
+                                        google.maps.MapTypeId.ROADMAP,
+                                        google.maps.MapTypeId.HYBRID,
+                                        google.maps.MapTypeId.SATELLITE,
+                                        google.maps.MapTypeId.TERRAIN]}
+                };
+        // Ajout de la couche OSM à la carte
+        osmMapType = new google.maps.ImageMapType({
+                getTileUrl: function(coord, zoom) {
+                        return 'http://tile.openstreetmap.org/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
+                },
+                tileSize: new google.maps.Size(256, 256),
+                isPng: true,
+                alt: 'OpenStreetMap',
+                name: 'OSM',
+                maxZoom: 19
+        });
+        // Création de la carte Google
+        map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas
+        map.mapTypes.set('OSM', osmMapType);
+        // Création du Geocoder
+        geocoder = new google.maps.Geocoder();
+        // Marqueur google draggable
+        marker = new google.maps.Marker({
+                map: map,
+                draggable: true,
+                title: 'Ma station',
+                icon: GOOGLE_MAP_MARQUEUR_URL,
+                position: latLng
+        });
+        initialiserMarker(latLng);
+        // Tentative de geocalisation
+        if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(function(position) {
+                        var latitude = position.coords.latitude,
+                                longitude = position.coords.longitude;
+                        latLng = new google.maps.LatLng(latitude, longitude);
+                        deplacerMarker(latLng);
+                });
+        }
+}
+function surDeplacementMarker() {
+        trouverCommune(marker.getPosition());
+        mettreAJourMarkerPosition(marker.getPosition());
+}
+function surClickDansCarte(event) {
+        deplacerMarker(event.latLng);
+}
+function geolocaliser(event) {
+        var latitude = $('#latitude').val(),
+                longitude = $('#longitude').val();
+        latLng = new google.maps.LatLng(latitude, longitude);
+        deplacerMarker(latLng);
+        arreter(event);
+}
+function initialiserMarker(latLng) {
+        if (marker != undefined) {
+                marker.setPosition(latLng);
+                map.setCenter(latLng);
+                mettreAJourMarkerPosition(latLng);
+                trouverCommune(latLng);
+        }
+}
+function deplacerMarker(latLng) {
+        if (marker != undefined) {
+                marker.setPosition(latLng);
+                map.setCenter(latLng);
+                mettreAJourMarkerPosition(latLng);
+                trouverCommune(latLng);
+        }
+}
+function mettreAJourMarkerPosition(latLng) {
+        var lat = latLng.lat().toFixed(5),
+                lng = latLng.lng().toFixed(5);
+        remplirChampLatitude(lat);
+        remplirChampLongitude(lng);
+}
+function remplirChampLatitude(latDecimale) {
+        var lat = Math.round(latDecimale * 100000) / 100000;
+        $('#latitude').val(lat);
+}
+function remplirChampLongitude(lngDecimale) {
+        var lng = Math.round(lngDecimale * 100000) / 100000;
+        $('#longitude').val(lng);
+}
+function trouverCommune(pos) {
+        $(function() {
+                var url_service = SERVICE_NOM_COMMUNE_URL,
+                        urlNomCommuneFormatee = url_service.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
+                $.ajax({
+                        url: urlNomCommuneFormatee,
+                        type: 'GET',
+                        dataType: 'jsonp',
+                        beforeSend: function() {
+                                $('.commune-info').empty();
+                                $('#dialogue-erreur .alert-txt').empty();
+                        },
+                        success: function(data, textStatus, jqXHR) {
+                                $('.commune-info').empty();
+                                $('#commune-nom').append(data.nom);
+                                $('#commune-code-insee').append(data.codeINSEE);
+                                $('#marqueur-commune').data('commune', {'nom' : data.nom, 'codeInsee' : data.codeINSEE});
+                        },
+                        statusCode: {
+: function(jqXHR, textStatus, errorThrown) {
+                                        if (DEBUG) {
+                                                $('#dialogue-erreur .alert-txt').append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');
+                                                reponse = jQuery.parseJSON(jqXHR.responseText);
+                                                var erreurMsg = "";
+                                                if (reponse != null) {
+                                                        $.each(reponse, function (cle, valeur) {
+                                                                erreurMsg += valeur + '<br />';
+                                                        });
+                                                }
+                                                $('#dialogue-erreur .alert-txt').append(
+                                                        '<p class="msg-erreur">Erreur 500 : '+errorThrown+'<br />'+erreurMsg+'</p>');
+                                        }
+                                }
+                        },
+                        error: function(jqXHR, textStatus, errorThrown) {
+                                if (DEBUG) {
+                                        $('#dialogue-erreur .alert-txt').append(
+                                                '<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>');
+                                        reponse = jQuery.parseJSON(jqXHR.responseText);
+                                        var erreurMsg = '';
+                                        if (reponse != null) {
+                                                $.each(reponse, function (cle, valeur) {
+                                                        erreurMsg += valeur + '<br />';
+                                                });
+                                        }
+                                        $('#dialogue-erreur .alert-txt').append(
+                                                '<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
+                                }
+                        },
+                        complete: function(jqXHR, textStatus) {
+                                var debugMsg = extraireEnteteDebug(jqXHR);
+                                if (debugMsg != '') {
+                                        if (DEBUG) {
+                                                $("#dialogue-erreur .alert-txt").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
+                                        }
+                                }
+                                if ($("#dialogue-erreur .msg").length > 0) {
+                                        $("#dialogue-erreur").show();
+                                }
+                        }
+                });
+        });
+}
+//+---------------------------------------------------------------------------------------------------------+
+// IDENTITÉ
+$(document).ready(function() {
+        $('#courriel').on('blur', requeterIdentite);
+        $('#courriel').on('keypress', testerLancementRequeteIdentite);
+});
+function testerLancementRequeteIdentite(event) {
+        if (event.which == 13) {
+                requeterIdentite();
+                event.preventDefault();
+                event.stopPropagation();
+        }
+}
+function requeterIdentite() {
+        var courriel = $('#courriel').val();
+        //TODO: mettre ceci en paramètre de config
+        var urlAnnuaire = SERVICE_ANNUAIRE_ID_URL + courriel;
+        $.ajax({
+                url: urlAnnuaire,
+                type: 'GET',
+                success: function(data, textStatus, jqXHR) {
+                        console.log('SUCCESS:'+textStatus);
+                        if (data != undefined && data[courriel] != undefined) {
+                                var infos = data[courriel];
+                                $('#id_utilisateur').val(infos.id);
+                                $('#prenom').val(infos.prenom);
+                                $('#nom').val(infos.nom);
+                                $('#courriel_confirmation').val(courriel);
+                                $('#prenom, #nom, #courriel_confirmation').attr('disabled', 'disabled');
+                                $('#date').focus();
+                        } else {
+                                surErreurCompletionCourriel();
+                        }
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                        console.log('ERREUR :'+textStatus);
+                        surErreurCompletionCourriel();
+                },
+                complete: function(jqXHR, textStatus) {
+                        console.log('COMPLETE :'+textStatus);
+                        $('#zone-prenom-nom').removeClass('hidden');
+                        $('#zone-courriel-confirmation').removeClass('hidden');
+                }
+        });
+}
+function surErreurCompletionCourriel() {
+        $('#prenom, #nom, #courriel_confirmation').val('');
+        $('#prenom, #nom, #courriel_confirmation').removeAttr('disabled');
+        afficherPanneau('#dialogue-courriel-introuvable');
+}
+//+---------------------------------------------------------------------------------------------------------+
+// FORMULAIRE
+var obsNbre = 0;
+$(document).ready(function() {
+        // Sliders
+        transformerEnSlider('#presence-zone-vegetalise');
+        transformerEnSlider('#hauteur-batiment-avoisinant');
+        transformerEnSlider('#periodicite-traitement-phyto');
+        transformerEnSlider('#resistance-traitement-phyto');
+        transformerEnSlider('#vitesse-croissance');
+        // Afficher/Cacher champs cachés par défaut
+        $('#periodicite-traitement-phyto').on('change', function() {
+                if ($(this).val() === 'jamais') {
+                        $('#datp-zone').removeClass('hidden');
+                } else {
+                        $('#datp-zone').addClass('hidden');
+                }
+        });
+        $('#taxon-liste').on('change', function() {
+                if ($(this).val() === '?') {
+                        $('#taxon-input-groupe').removeClass('hidden');
+                } else {
+                        $('#taxon-input-groupe').addClass('hidden');
+                }
+        });
+        $('.alert .close').on('click', fermerPanneauAlert);
+        $('[rel=tooltip]').tooltip('enable');
+        $('#btn-aide').on('click', basculerAffichageAide);
+        $('#prenom').on('change', formaterPrenom);
+        $('#nom').on('change', formaterNom);
+        configurerDatePicker('#date');
+        configurerDatePicker('#date-arret-traitement-phyto');
+        ajouterAutocompletionNoms();
+        configurerFormValidator();
+        definirReglesFormValidator();
+        $('#courriel_confirmation').on('paste', bloquerCopierCollerCourriel);
+        $('a.afficher-coord').on('click', basculerAffichageCoord);
+        $('#ajouter-obs').on('click', ajouterObs);
+        $('.obs-nbre').on('changement', surChangementNbreObs);
+        $('body').on('click', '.supprimer-obs', supprimerObs);
+        $('#transmettre-obs').on('click', transmettreObs);
+        $('body').on('click', '.defilement-miniatures-gauche', function(event) {
+                event.preventDefault();
+                defilerMiniatures($(this));
+        });
+        $('body').on('click', '.defilement-miniatures-droite', function(event) {
+                event.preventDefault();
+                defilerMiniatures($(this));
+        });
+        $('.dropdown-menu input, .dropdown-menu label').on('click', function(event) {
+                event.stopPropagation();
+        });
+        $('input#hauteur-plante').on('blur', function() {
+                // if there's a bad value
+                var valeur = $(this).val();
+                console.log(valeur);
+                if (! valeur.match(/^[0-9]+$/)) {
+                        // replace it with nothing
+                        var nouvelleValeur = valeur.replace(/[^0-9]/g, '');
+                        $(this).val(nouvelleValeur);
+                }
+        });
+});
+function transformerEnSlider(selector) {
+        $(selector).each(function(index, el) {
+                // hide the element
+                $(el).addClass('slider-on');
+                // add the slider to each element
+                var slider = $( '<div class="slider-holder"><div class="horizontal-slider"></div></div>' ).
+                        insertAfter( el ).find('.horizontal-slider').slider({
+                                min: 1,
+                                max: el.options.length,
+                                range: 'min',
+                                value: el.selectedIndex + 1,
+                                slide: function( event, ui ) {
+                                        el.selectedIndex = ui.value - 1;
+                                        slider.find('a').text(el.options[el.selectedIndex].text);
+                                },
+                                stop: function() {
+                                        $(el).change();
+                                }
+                        });
+                slider.find('a').text(el.options[el.selectedIndex].text);
+                // Create a legend under the slider so we can see the options
+                var options = [];
+                for (var option in $(el).children()) {
+                        if (!isNaN(parseInt(option))) {
+                                options.push(el.options[option].text);
+                        }
+                }
+                // the width of each legend/option
+                var width = (slider.width() / (options.length - 1));
+                // Add the legend. Half the width of the first and last options for display consistency.
+                slider.after('<div class="slider-legend"><p style="width:' + (width / 2) + 'px;text-align:left;">' +
+                        options.join('</p><p style="width:' + width + 'px;">') +'</p></div>')
+                        .parent().find('.slider-legend p:last-child').css('width', width / 2)
+                        .css('text-align', 'right');
+                // if there are too many options so that the text is wider than the width, then hide the text
+                var lastChild = slider.parent().find('.slider-legend p:last-child');
+                if (lastChild[0].clientWidth < lastChild[0].scrollWidth) {
+                        slider.parent().find('.slider-legend p').css('text-indent', '200%');
+                }
+        });
+}
+function configurerFormValidator() {
+        $.validator.addMethod(
+                'dateCel',
+                function (value, element) {
+                        return value == '' || (/^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{4}$/.test(value));
+                },
+                'Format : jj/mm/aaaa. Date incomplète, utiliser 0, exemple : 00/12/2011.');
+        $.extend($.validator.defaults, {
+                highlight: function(element) {
+                        $(element).closest('.control-group').removeClass('success').addClass('error');
+                },
+                success: function(element) {
+                        element.text('OK!').addClass('valid')
+                                .closest('.control-group').removeClass('error').addClass('success');
+                        if (element.attr('id') == 'taxon' && $('#taxon').val() != '') {
+                                // Si le taxon n'est pas lié au référentiel, on vide le data associé
+                                if ($('#taxon').data('value') != $('#taxon').val()) {
+                                        $('#taxon').data('numNomSel', '');
+                                        $('#taxon').data('nomRet', '');
+                                        $('#taxon').data('numNomRet', '');
+                                        $('#taxon').data('nt', '');
+                                        $('#taxon').data('famille', '');
+                                }
+                        }
+                }
+        });
+}
+function definirReglesFormValidator() {
+        $('#form-observateur').validate({
+                rules: {
+                        courriel: {
+                                required: true,
+                                email: true},
+                        courriel_confirmation: {
+                                required: true,
+                                equalTo: '#courriel'}
+                }
+        });
+        $('#form-station').validate({
+                rules: {
+                        latitude : {
+                                range: [-90, 90]},
+                        longitude: {
+                                range: [-180, 180]}
+                }
+        });
+        $('#form-obs').validate({
+                rules: {
+                        date: 'dateCel',
+                        'taxon-liste': 'required'
+                }
+        });
+}
+function configurerDatePicker(selector) {
+        $.datepicker.setDefaults($.datepicker.regional['fr']);
+        $(selector).datepicker({
+                dateFormat: 'dd/mm/yy',
+                showOn: 'button',
+                buttonImageOnly: true,
+                buttonImage: CALENDRIER_ICONE_URL,
+                buttonText: 'Afficher le calendrier pour saisir la date.',
+                showButtonPanel: true
+        });
+        $(selector + ' + img.ui-datepicker-trigger').appendTo(selector + '-icone.add-on');
+}
+function fermerPanneauAlert() {
+        $(this).parentsUntil('.zone-alerte', '.alert').hide();
+}
+function formaterNom() {
+        $(this).val($(this).val().toUpperCase());
+}
+function formaterPrenom() {
+        var prenom = new Array(),
+                mots = $(this).val().split(' ');
+        for (var i = 0; i < mots.length; i++) {
+                var mot = mots[i];
+                if (mot.indexOf('-') >= 0) {
+                        var prenomCompose = new Array(),
+                                motsComposes = mot.split('-');
+                        for (var j = 0; j < motsComposes.length; j++) {
+                                var motSimple = motsComposes[j],
+                                        motMajuscule = motSimple.charAt(0).toUpperCase() + motSimple.slice(1);
+                                prenomCompose.push(motMajuscule);
+                        }
+                        prenom.push(prenomCompose.join('-'));
+                } else {
+                        var motMajuscule = mot.charAt(0).toUpperCase() + mot.slice(1);
+                        prenom.push(motMajuscule);
+                }
+        }
+        $(this).val(prenom.join(' '));
+}
+function basculerAffichageAide()  {
+        if ($(this).hasClass('btn-warning')) {
+                $('[rel=tooltip]').tooltip('enable');
+                $(this).removeClass('btn-warning').addClass('btn-success');
+                $('#btn-aide-txt', this).text("Désactiver l'aide");
+        } else {
+                $('[rel=tooltip]').tooltip('disable');
+                $(this).removeClass('btn-success').addClass('btn-warning');
+                $('#btn-aide-txt', this).text("Activer l'aide");
+        }
+}
+function bloquerCopierCollerCourriel() {
+        afficherPanneau('#dialogue-bloquer-copier-coller');
+        return false;
+}
+function basculerAffichageCoord() {
+        $('.afficher-coord-action').toggle();
+        $('#coordonnees-geo').toggle('slow');
+        //valeur false pour que le lien ne soit pas suivi
+        return false;
+}
+function ajouterObs() {
+        if (validerFormulaire() == true) {
+                obsNbre = obsNbre + 1;
+                $('.obs-nbre').text(obsNbre);
+                $('.obs-nbre').triggerHandler('changement');
+                afficherObs();
+                stockerObsData();
+                supprimerMiniatures();
+                $('#taxon').val('').data('numNomSel', undefined).removeClass('ns-retenu');
+        } else {
+                afficherPanneau('#dialogue-form-invalide');
+        }
+}
+function afficherObs() {
+        var numNomSel = ($('#taxon-liste').val() == '?') ? $('#taxon').data('numNomSel') : $('#taxon-liste').val(),
+                taxon = ($('#taxon-liste').val() == '?') ? $('#taxon').val() : taxons[numNomSel]['nom_sel'],
+                referentiel = (numNomSel == undefined) ? '' : '['+NOM_SCI_PROJET+']',
+                commune = $('#commune-nom').text(),
+                codeInsee = $('#commune-code-insee').text(),
+                lat = $('input[name="latitude"]').val(),
+                lng = $('input[name="longitude"]').val(),
+                date = $('#date').val(),
+                site = $('#station').val(),
+                milieux = getMilieux(),
+                notes = $('#notes').val();
+        $('#liste-obs').prepend(
+                '<div id="obs'+obsNbre+'" class="row-fluid obs obs'+obsNbre+'">'+
+                        '<div class="span12">'+
+                                '<div class="well">'+
+                                        '<div class="obs-action pull-right" rel="tooltip" data-placement="bottom" '+
+                                                'title="Supprimer cette observation de la liste à transmettre">'+
+                                                '<button class="btn btn-danger supprimer-obs" value="'+obsNbre+'" title="'+obsNbre+'">'+
+                                                        '<i class="icon-trash icon-white"></i>'+
+                                                '</button>'+
+                                        '</div> '+
+                                        '<div class="row-fluid">'+
+                                                '<div class="thumbnail span2">'+
+                                                        ajouterImgMiniatureAuTransfert()+
+                                                '</div>'+
+                                                '<div class="span9">'+
+                                                        '<ul class="unstyled">'+
+                                                                '<li>'+
+                                                                        '<span class="nom-sci">' + taxon + '</span> ' +
+                                                                        formaterNumNomSel(numNomSel)+
+                                                                        '<span class="referentiel-obs">' + referentiel + '</span>' +
+                                                                        ' observé à ' +
+                                                                        '<span class="commune">' + commune + '</span> ' +
+                                                                        '(' + codeInsee + ') [' + lat +' / ' + lng + ']' +
+                                                                        ' le ' +
+                                                                        '<span class="date">' + date + '</span>' +
+                                                                '</li>' +
+                                                                '<li>' +
+                                                                        '<span>Site :</span> ' + site + ' ' +
+                                                                        '<span>Milieu :</span> ' + milieux + ' ' +
+                                                                '</li>' +
+                                                                '<li>' +
+                                                                        'Commentaires : <span class="discretion">' + notes + '</span>'+
+                                                                '</li>'+
+                                                        '</ul>'+
+                                                '</div>'+
+                                        '</div>'+
+                                '</div>'+
+                        '</div>'+
+                '</div>');
+}
+function getMilieux() {
+        var milieuxStr = '',
+                milieux = [];
+        $('input:checkbox[name="milieux"]:checked').each(function() {
+                milieux.push($(this).val());
+        });
+        milieuxStr = Array.prototype.slice.call(milieux).join(', ');
+        return milieuxStr;
+}
+function ajouterImgMiniatureAuTransfert() {
+        var html = '',
+                miniatures = '',
+                premiere = true;
+        if ($('#miniatures img').length >= 1) {
+                $('#miniatures img').each(function() {
+                        var visible = premiere ? 'miniature-selectionnee' : 'miniature-cachee',
+                                css = $(this).hasClass('b64') ? 'miniature b64' : 'miniature',
+                                src = $(this).attr('src'),
+                                alt = $(this).attr('alt');
+                        premiere = false;
+                        miniature = '<img class="'+css+' '+visible+'"  alt="'+alt+'"src="'+src+'" />';
+                        miniatures += miniature;
+                });
+                visible = ($('#miniatures img').length > 1) ? '' : 'defilement-miniatures-cache';
+                var html =
+                        '<div class="defilement-miniatures">'+
+                                '<a href="#" class="defilement-miniatures-gauche '+visible+'">&#60;</a>'+
+                                miniatures+
+                                '<a href="#" class="defilement-miniatures-droite '+visible+'">&#62;</a>'+
+                        '</div>';
+        } else {
+                html = '<img class="miniature" alt="Aucune photo"src="'+PAS_DE_PHOTO_ICONE_URL+'" />';
+        }
+        return html;
+}
+function formaterNumNomSel(numNomSel) {
+        var nn = '';
+        if (numNomSel == undefined) {
+                nn = '<span class="alert-error">[non lié au référentiel]</span>';
+        } else {
+                nn = '<span class="nn">[nn'+numNomSel+']</span>';
+        }
+        return nn;
+}
+function stockerObsData() {
+        $('#liste-obs').data('obsId'+obsNbre, {
+                'date' : $('#date').val(),
+                'notes' : $('#notes').val(),
+                'nom_sel' : $('#taxon').val(),
+                'num_nom_sel' : $('#taxon').data('numNomSel'),
+                'nom_ret' : $('#taxon').data('nomRet'),
+                'num_nom_ret' : $('#taxon').data('numNomRet'),
+                'num_taxon' : $('#taxon').data('nt'),
+                'famille' : $('#taxon').data('famille'),
+                'referentiel' : ($('#taxon').data('numNomSel') == undefined ? '' : NOM_SCI_REFERENTIEL),
+                'latitude' : $('#latitude').val(),
+                'longitude' : $('#longitude').val(),
+                'commune_nom' : $('#commune-nom').text(),
+                'commune_code_insee' : $('#commune-code-insee').text(),
+                'lieudit' : $('#lieudit').val(),
+                'station' : $('#station').val(),
+                'milieu' : $('#milieu').val(),
+                //Ajout des champs images
+                'image_nom' : getNomsImgsOriginales(),
+                'image_b64' : getB64ImgsOriginales()
+        });
+}
+function surChangementReferentiel() {
+        NOM_SCI_PROJET = $('#referentiel').val();
+        NOM_SCI_REFERENTIEL = NOM_SCI_PROJET+':'+PROJETS_VERSIONS[NOM_SCI_PROJET];
+        $('#taxon').val('');
+}
+function surChangementNbreObs() {
+        if (obsNbre == 0) {
+                $('#transmettre-obs').attr('disabled', 'disabled');
+                $('#ajouter-obs').removeAttr('disabled');
+        } else if (obsNbre > 0 && obsNbre < OBS_MAX_NBRE) {
+                $('#transmettre-obs').removeAttr('disabled');
+                $('#ajouter-obs').removeAttr('disabled');
+        } else if (obsNbre >= OBS_MAX_NBRE) {
+                $('#ajouter-obs').attr('disabled', 'disabled');
+                afficherPanneau('#dialogue-bloquer-creer-obs');
+        }
+}
+function transmettreObs() {
+        var observations = $('#liste-obs').data();
+        console.log(observations);
+        if (observations == undefined || jQuery.isEmptyObject(observations)) {
+                afficherPanneau('#dialogue-zero-obs');
+        } else {
+                observations['projet'] = TAG_PROJET;
+                observations['tag-obs'] = TAG_OBS;
+                observations['tag-img'] = TAG_IMG;
+                var utilisateur = new Object();
+                utilisateur.id_utilisateur = $('#id_utilisateur').val();
+                utilisateur.prenom = $('#prenom').val();
+                utilisateur.nom = $('#nom').val();
+                utilisateur.courriel = $('#courriel').val();
+                observations['utilisateur'] = utilisateur;
+                envoyerObsAuCel(observations);
+        }
+        return false;
+}
+function envoyerObsAuCel(observations) {
+        var erreurMsg = '';
+        $.ajax({
+                url: SERVICE_SAISIE_URL,
+                type: 'POST',
+                data: observations,
+                dataType: 'json',
+                beforeSend: function() {
+                        $('#dialogue-obs-transaction-ko').hide();
+                        $('#dialogue-obs-transaction-ok').hide();
+                        $('.alert-txt .msg').remove();
+                        $('.alert-txt .msg-erreur').remove();
+                        $('.alert-txt .msg-debug').remove();
+                        $('#chargement').show();
+                },
+                success: function(data, textStatus, jqXHR) {
+                        $('#dialogue-obs-transaction-ok .alert-txt').append($('#tpl-transmission-ok').clone().html());
+                        supprimerMiniatures();
+                },
+                statusCode: {
+: function(jqXHR, textStatus, errorThrown) {
+                                erreurMsg += "Erreur 500 :\ntype : " + textStatus + ' ' + errorThrown + "\n";
+                        }
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                        erreurMsg += "Erreur Ajax :\ntype : " + textStatus + ' ' + errorThrown + "\n";
+                        try {
+                                reponse = jQuery.parseJSON(jqXHR.responseText);
+                                if (reponse != null) {
+                                        $.each(reponse, function (cle, valeur) {
+                                                erreurMsg += valeur + "\n";
+                                        });
+                                }
+                        } catch(e) {
+                                erreurMsg += "L'erreur n'était pas en JSON.";
+                        }
+                },
+                complete: function(jqXHR, textStatus) {
+                        $('#chargement').hide();
+                        var debugMsg = extraireEnteteDebug(jqXHR);
+                        if (erreurMsg != '') {
+                                if (DEBUG) {
+                                        $('#dialogue-obs-transaction-ko .alert-txt').append('<pre class="msg-erreur">' + erreurMsg + '</pre>');
+                                        $('#dialogue-obs-transaction-ko .alert-txt').append('<pre class="msg-debug">Débogage : ' + debugMsg + '</pre>');
+                                }
+                                var hrefCourriel = 'mailto:cel@tela-botanica.org?' +
+                                        'subject=Disfonctionnement du widget de saisie ' + TAG_PROJET +
+                                        '&body=' + erreurMsg + "\nDébogage :\n" + debugMsg;
+                                $('#dialogue-obs-transaction-ko .alert-txt').append($('#tpl-transmission-ko').clone()
+                                        .find('.courriel-erreur')
+                                        .attr('href', hrefCourriel)
+                                        .end()
+                                        .html());
+                                $('#dialogue-obs-transaction-ko').show();
+                        } else {
+                                if (DEBUG) {
+                                        $('#dialogue-obs-transaction-ok .alert-txt').append('<pre class="msg-debug">Débogage : ' + debugMsg + '</pre>');
+                                }
+                                $('#dialogue-obs-transaction-ok').show();
+                        }
+                        initialiserObs();
+                }
+        });
+}
+function validerFormulaire() {
+        $observateur = $('#form-observateur').valid();
+        $station = $('#form-station').valid();
+        $obs = $('#form-obs').valid();
+        return ($observateur == true && $station == true && $obs == true) ? true : false;
+}
+function getNomsImgsOriginales() {
+        var noms = new Array();
+        $('.miniature-img').each(function() {
+                noms.push($(this).attr('alt'));
+        });
+        return noms;
+}
+function getB64ImgsOriginales() {
+        var b64 = new Array();
+        $('.miniature-img').each(function() {
+                if ($(this).hasClass('b64')) {
+                        b64.push($(this).attr('src'));
+                } else if ($(this).hasClass('b64-canvas')) {
+                        b64.push($(this).data('b64'));
+                }
+        });
+        return b64;
+}
+function supprimerObs() {
+        var obsId = $(this).val();
+        // Problème avec IE 6 et 7
+        if (obsId == 'Supprimer') {
+                obsId = $(this).attr('title');
+        }
+        obsNbre = obsNbre - 1;
+        $('.obs-nbre').text(obsNbre);
+        $('.obs-nbre').triggerHandler('changement');
+        $('.obs'+obsId).remove();
+        $('#liste-obs').removeData('obsId' + obsId);
+}
+function initialiserObs() {
+        obsNbre = 0;
+        $('.obs-nbre').text(obsNbre);
+        $('.obs-nbre').triggerHandler('changement');
+        $('#liste-obs').removeData();
+        $('.obs').remove();
+        $('#dialogue-bloquer-creer-obs').hide();
+}
+function defilerMiniatures(element) {
+        var miniatureSelectionne = element.siblings('img.miniature-selectionnee');
+        miniatureSelectionne.removeClass('miniature-selectionnee');
+        miniatureSelectionne.addClass('miniature-cachee');
+        var miniatureAffichee = miniatureSelectionne;
+        if(element.hasClass('defilement-miniatures-gauche')) {
+                if(miniatureSelectionne.prev('.miniature').length != 0) {
+                        miniatureAffichee = miniatureSelectionne.prev('.miniature');
+                } else {
+                        miniatureAffichee = miniatureSelectionne.siblings('.miniature').last();
+                }
+        } else {
+                if(miniatureSelectionne.next('.miniature').length != 0) {
+                        miniatureAffichee = miniatureSelectionne.next('.miniature');
+                } else {
+                        miniatureAffichee = miniatureSelectionne.siblings('.miniature').first();
+                }
+        }
+        miniatureAffichee.addClass('miniature-selectionnee');
+        miniatureAffichee.removeClass('miniature-cachee');
+}
+//+---------------------------------------------------------------------------------------------------------+
+// AUTO-COMPLÉTION Noms Scientifiques
+function ajouterAutocompletionNoms() {
+        $('#taxon').autocomplete({
+                source: function(requete, add){
+                        // la variable de requête doit être vidée car sinon le parametre "term" est ajouté
+                        var url = getUrlAutocompletionNomsSci();
+                        $.getJSON(url, function(data) {
+                                console.log(data);
+                                var suggestions = traiterRetourNomsSci(data);
+                                add(suggestions);
+                        });
+                },
+                html: true
+        });
+        $('#taxon').bind('autocompleteselect', function(event, ui) {
+                $('#taxon').data(ui.item);
+                if (ui.item.retenu == true) {
+                        $('#taxon').addClass('ns-retenu');
+                } else {
+                        $('#taxon').removeClass('ns-retenu');
+                }
+        });
+}
+function getUrlAutocompletionNomsSci() {
+        var mots = $('#taxon').val(),
+                url = SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL.replace('{referentiel}',NOM_SCI_PROJET);
+        url = url.replace('{masque}', mots);
+        return url;
+}
+function traiterRetourNomsSci(data) {
+        var suggestions = [];
+        if (data.resultat != undefined) {
+                $.each(data.resultat, function(i, val) {
+                        val.nn = i;
+                        var nom = {label: '', value: '', nt: '', nomSel: '', nomSelComplet: '', numNomSel: '',
+                                nomRet: '', numNomRet: '', famille: '', retenu: false
+                        };
+                        if (suggestions.length >= AUTOCOMPLETION_ELEMENTS_NBRE) {
+                                nom.label = '...';
+                                nom.value = $('#taxon').val();
+                                suggestions.push(nom);
+                                return false;
+                        } else {
+                                nom.label = val.nom_sci_complet;
+                                nom.value = val.nom_sci_complet;
+                                nom.nt = val.num_taxonomique;
+                                nom.nomSel = val.nom_sci;
+                                nom.nomSelComplet = val.nom_sci_complet;
+                                nom.numNomSel = val.nn;
+                                nom.nomRet = val.nom_retenu_complet;
+                                nom.numNomRet = val['nom_retenu.id'];
+                                nom.famille = val.famille;
+                                nom.retenu = (val.retenu == 'false') ? false : true;
+                                suggestions.push(nom);
+                        }
+                });
+        }
+        return suggestions;
+}
+/*
+ * jQuery UI Autocomplete HTML Extension
+ *
+ * Copyright 2010, Scott González (http://scottgonzalez.com)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * http://github.com/scottgonzalez/jquery-ui-extensions
+ *
+ * Adaptation par Aurélien Peronnet pour la mise en gras des noms de taxons valides
+ */
+(function($) {
+        var proto = $.ui.autocomplete.prototype,
+                initSource = proto._initSource;
+        function filter(array, term) {
+                var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), 'i');
+                return $.grep(array, function(value) {
+                        return matcher.test($('<div>').html(value.label || value.value || value).text());
+                });
+        }
+        $.extend(proto, {
+                _initSource: function() {
+                        if (this.options.html && $.isArray(this.options.source)) {
+                                this.source = function( request, response ) {
+                                        response(filter(this.options.source, request.term));
+                                };
+                        } else {
+                                initSource.call(this);
+                        }
+                },
+                _renderItem: function(ul, item) {
+                        if (item.retenu == true) {
+                                item.label = '<strong>'+item.label+'</strong>';
+                        }
+                        return $('<li></li>')
+                                .data('item.autocomplete', item)
+                                .append($('<a></a>')[this.options.html ? 'html' : 'text'](item.label))
+                                .appendTo(ul);
+                }
+        });
+})(jQuery);

Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 1546 → Rev 1547