2025-12-12 07:40:26 -08:00 · 2014-12-19 11:06:45 +00:00
parent 50625c1ce9
commit d5e6596279
69 changed files with 13978 additions and 0 deletions
--- a/website/css/style-new.css
+++ b/website/css/style-new.css
@@ -0,0 +1,126 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}
+
+
+.left {  
+  display: table-cell;
+  text-align:center;
+  background:  #F0F3F7;
+}  
+.central {  
+    display: table-cell;
+    width: 100%;
+}  
+.right {  
+  display: table-cell;
+  width: 150px;  
+}  
+.container {
+    margin-top: 10px;
+    max-width: 1200px;
+    margin-left: 20px;
+    margin-right: 20px;
+    font-family: 'Open Sans', sans-serif;
+}
+
+
+.surveyDiv {
+    vertical-align:top;
+    text-align: center;
+    height: 500px;
+    overflow: auto;
+}
+
+
+.surveys-list {
+    margin-top: 8px;
+}
+
+.survey {
+    position: relative;
+    background: #333;
+    height: 50px;
+    overflow: hidden;
+}
+
+.survey-label {
+    position: absolute;
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
+    border-radius: 0 8px 8px 0;
+    bottom: 10%;
+    padding: 6px 16px 6px 14px;
+    color: white;
+    /*width: 65%;*/
+    z-index: 3;
+    font-weight: bold;
+    pointer-events: none;
+}
+
+.survey-preview {
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    transition: width 0.6s, height 0.6s, opacity 0.2s, transform 0.3s;
+}
+
+.survey-selected {
+    position: absolute;
+    opacity: 0.8;
+    right: 10px;
+    top: 12px;
+    z-index: 3;
+    pointer-events: none;
+}
+
+.survey-selected-img {
+    width: 24px;
+    height: 24px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB94MEQ4kC6URHyAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACzElEQVRIibWWsWrbUBSG//9eiYQUajlLSUmxl06FNiDiznb2vkKeoFOXOg+Q9HGapdAhzu4iyCNE1NR0SeRCQ4x09XewZBTFckNJ7yIwnO8/9z/n3GNKQvVwMmUv+hjk5sm228i/UWxjzRF1bedm3+S/r8bhp0S7O3eArApwMmV4cdyRn41EBRQDACxZopJF0P3fKSZMvUG0dxRXRZYCFfg5gE4BKIMFYCbHAwCg1RmAlihWxAQgZur1qyKUtAqOMis5Hpjczay71Tj8lABAL/oYOLvJ3NgWrc4qt0VdhPj+4x4cQCzHgZ/+Tlb5Wq9X6j8JaDWqxpci7H1+38420whAd1UG6wq8onbVJC+9Wz80ucm2RQWL2imR471CNUHfnh62354etgEg2juK5TgoGoGigtxk26ZoxWBhOxM/9RotqWecbW5F2eZWFF4cdwDAT72EYlKwAreRfzNFn5fZH4zDYVJC3nx93+JkylXwwo4ugK787Dy8OO48+3n5S44H5S0ots0yUJTJ3Uy7OyohHhaBpUhDKxNAR342+vms+9Tkbla0NQDAK74CMLNuQzXIiyK7/rsv8ffweedFDX7vWLehzE9nANoAaLAwbGlPLzoJ5Gdly9kiu/NJ9/nrBng5YINxOEzG4TCp2ASDvx8C6FBcB29sa1P4H9DqrBedBONwmDD1BgDiAlCKtB4C70UnAa3Oysk2VYCzc2p3R7WeXnUaM3d2fieZpUWiFm/LZErt7qja0w+FczJlbmxL1PKmRtR1wV/aBAANVq31vGaPRF0bOzf71fFO/SwobxHtHcVMvT6ASwBXAC6b4JxMmfpZUH127NzsG5N7V9XxptWoHK5SxLu9CZnmL73bm7AJHl4cd2g1qj47Jveu/v9z/agLxwC0Jrap7Y9fDRcL5zFXJi1j67b641cf7q7Mupf/tPTJhPM1S7/u62P9bfkDFzapYZCyhUcAAAAASUVORK5CYII=);
+    background-repeat:  no-repeat;
+    background-position:center center;
+
+}
+
+.survey-preview:hover {
+    cursor: pointer;
+    opacity: 0.6;
+    width: 120%;
+}
+}
+
+.title {
+    margin-top: 5px;
+    font-weight:bold;
+    text-align: center;
+}
+.targetDiv {
+    width: 220px;
+    margin-top: 5px;
+    vertical-align:center; 
+}
+#target {
+    font-size: 13pt;
+    padding: 6px;
+    margin: 8px 0;
+    width: 80%;
+}
+.bottom    { text-align:center;font-style:italic;font-size:12px;}
+
+#aladin-lite-div .aladin-zoomControl { position: absolute; top: 70px; right: 5px; }
+#aladin-lite-div .aladin-zoomControl a {
+          width: 25px; height: 25px; line-height: 25px; 
+          display: block; margin: 0 0 3px 0; }
+
+.developerInfo {
+    margin: 10px 0 20px 20px;
+}
+
+.aladin-container {
+    border: 0 !important;
+}
--- a/website/css/style-new.css.chrome
+++ b/website/css/style-new.css.chrome
@@ -0,0 +1,131 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}
+
+
+.left {  
+  display: table-cell;
+  text-align:center;
+  background:  #F0F3F7;
+}  
+.central {  
+    display: table-cell;
+    width: 100%;
+    /*height: 100%;*/
+    height: 580px;
+} 
+#aladin-lite-div {
+    width: 100%;
+} 
+.right {  
+  display: table-cell;
+  width: 150px;  
+}  
+.container {
+    margin-top: 10px;
+    max-width: 1200px;
+    margin-left: 20px;
+    margin-right: 20px;
+    font-family: 'Open Sans', sans-serif;
+}
+
+
+.surveyDiv {
+    vertical-align:top;
+    text-align: center;
+    height: 500px;
+    overflow: auto;
+}
+
+
+.surveys-list {
+    margin-top: 8px;
+}
+
+.survey {
+    position: relative;
+    background: #333;
+    height: 50px;
+    overflow: hidden;
+}
+
+.survey-label {
+    position: absolute;
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
+    border-radius: 0 8px 8px 0;
+    bottom: 10%;
+    padding: 6px 16px 6px 14px;
+    color: white;
+    /*width: 65%;*/
+    z-index: 3;
+    font-weight: bold;
+    pointer-events: none;
+}
+
+.survey-preview {
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    transition: width 0.6s, height 0.6s, opacity 0.2s, transform 0.3s;
+}
+
+.survey-selected {
+    position: absolute;
+    opacity: 0.8;
+    right: 10px;
+    top: 12px;
+    z-index: 3;
+    pointer-events: none;
+}
+
+.survey-selected-img {
+    width: 24px;
+    height: 24px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB94MEQ4kC6URHyAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACzElEQVRIibWWsWrbUBSG//9eiYQUajlLSUmxl06FNiDiznb2vkKeoFOXOg+Q9HGapdAhzu4iyCNE1NR0SeRCQ4x09XewZBTFckNJ7yIwnO8/9z/n3GNKQvVwMmUv+hjk5sm228i/UWxjzRF1bedm3+S/r8bhp0S7O3eArApwMmV4cdyRn41EBRQDACxZopJF0P3fKSZMvUG0dxRXRZYCFfg5gE4BKIMFYCbHAwCg1RmAlihWxAQgZur1qyKUtAqOMis5Hpjczay71Tj8lABAL/oYOLvJ3NgWrc4qt0VdhPj+4x4cQCzHgZ/+Tlb5Wq9X6j8JaDWqxpci7H1+38420whAd1UG6wq8onbVJC+9Wz80ucm2RQWL2imR471CNUHfnh62354etgEg2juK5TgoGoGigtxk26ZoxWBhOxM/9RotqWecbW5F2eZWFF4cdwDAT72EYlKwAreRfzNFn5fZH4zDYVJC3nx93+JkylXwwo4ugK787Dy8OO48+3n5S44H5S0ots0yUJTJ3Uy7OyohHhaBpUhDKxNAR342+vms+9Tkbla0NQDAK74CMLNuQzXIiyK7/rsv8ffweedFDX7vWLehzE9nANoAaLAwbGlPLzoJ5Gdly9kiu/NJ9/nrBng5YINxOEzG4TCp2ASDvx8C6FBcB29sa1P4H9DqrBedBONwmDD1BgDiAlCKtB4C70UnAa3Oysk2VYCzc2p3R7WeXnUaM3d2fieZpUWiFm/LZErt7qja0w+FczJlbmxL1PKmRtR1wV/aBAANVq31vGaPRF0bOzf71fFO/SwobxHtHcVMvT6ASwBXAC6b4JxMmfpZUH127NzsG5N7V9XxptWoHK5SxLu9CZnmL73bm7AJHl4cd2g1qj47Jveu/v9z/agLxwC0Jrap7Y9fDRcL5zFXJi1j67b641cf7q7Mupf/tPTJhPM1S7/u62P9bfkDFzapYZCyhUcAAAAASUVORK5CYII=);
+    background-repeat:  no-repeat;
+    background-position:center center;
+
+}
+
+.survey-preview:hover {
+    cursor: pointer;
+    opacity: 0.6;
+    width: 120%;
+}
+}
+
+.title {
+    margin-top: 5px;
+    font-weight:bold;
+    text-align: center;
+}
+.targetDiv {
+    width: 220px;
+    margin-top: 5px;
+    vertical-align:center; 
+}
+#target {
+    font-size: 13pt;
+    padding: 6px;
+    margin: 8px 0;
+    width: 80%;
+}
+.bottom    { text-align:center;font-style:italic;font-size:12px;}
+
+#aladin-lite-div .aladin-zoomControl { position: absolute; top: 70px; right: 5px; }
+#aladin-lite-div .aladin-zoomControl a {
+          width: 25px; height: 25px; line-height: 25px; 
+          display: block; margin: 0 0 3px 0; }
+
+.developerInfo {
+    margin: 10px 0 20px 20px;
+}
+
+.aladin-container {
+    border: 0 !important;
+}
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -0,0 +1,126 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}
+
+
+.left {  
+  display: table-cell;
+  text-align:center;
+  background:  #F0F3F7;
+}  
+.central {  
+    display: table-cell;
+    width: 100%;
+}  
+.right {  
+  display: table-cell;
+  width: 150px;  
+}  
+.container {
+    margin-top: 10px;
+    max-width: 1200px;
+    margin-left: 20px;
+    margin-right: 20px;
+    font-family: 'Open Sans', sans-serif;
+}
+
+
+.surveyDiv {
+    vertical-align:top;
+    text-align: center;
+    height: 500px;
+    overflow: auto;
+}
+
+
+.surveys-list {
+    margin-top: 8px;
+}
+
+.survey {
+    position: relative;
+    background: #333;
+    height: 50px;
+    overflow: hidden;
+}
+
+.survey-label {
+    position: absolute;
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
+    border-radius: 0 8px 8px 0;
+    bottom: 10%;
+    padding: 6px 16px 6px 14px;
+    color: white;
+    /*width: 65%;*/
+    z-index: 3;
+    font-weight: bold;
+    pointer-events: none;
+}
+
+.survey-preview {
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    transition: width 0.6s, height 0.6s, opacity 0.2s, transform 0.3s;
+}
+
+.survey-selected {
+    position: absolute;
+    opacity: 0.8;
+    right: 10px;
+    top: 12px;
+    z-index: 3;
+    pointer-events: none;
+}
+
+.survey-selected-img {
+    width: 24px;
+    height: 24px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB94MEQ4kC6URHyAAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACzElEQVRIibWWsWrbUBSG//9eiYQUajlLSUmxl06FNiDiznb2vkKeoFOXOg+Q9HGapdAhzu4iyCNE1NR0SeRCQ4x09XewZBTFckNJ7yIwnO8/9z/n3GNKQvVwMmUv+hjk5sm228i/UWxjzRF1bedm3+S/r8bhp0S7O3eArApwMmV4cdyRn41EBRQDACxZopJF0P3fKSZMvUG0dxRXRZYCFfg5gE4BKIMFYCbHAwCg1RmAlihWxAQgZur1qyKUtAqOMis5Hpjczay71Tj8lABAL/oYOLvJ3NgWrc4qt0VdhPj+4x4cQCzHgZ/+Tlb5Wq9X6j8JaDWqxpci7H1+38420whAd1UG6wq8onbVJC+9Wz80ucm2RQWL2imR471CNUHfnh62354etgEg2juK5TgoGoGigtxk26ZoxWBhOxM/9RotqWecbW5F2eZWFF4cdwDAT72EYlKwAreRfzNFn5fZH4zDYVJC3nx93+JkylXwwo4ugK787Dy8OO48+3n5S44H5S0ots0yUJTJ3Uy7OyohHhaBpUhDKxNAR342+vms+9Tkbla0NQDAK74CMLNuQzXIiyK7/rsv8ffweedFDX7vWLehzE9nANoAaLAwbGlPLzoJ5Gdly9kiu/NJ9/nrBng5YINxOEzG4TCp2ASDvx8C6FBcB29sa1P4H9DqrBedBONwmDD1BgDiAlCKtB4C70UnAa3Oysk2VYCzc2p3R7WeXnUaM3d2fieZpUWiFm/LZErt7qja0w+FczJlbmxL1PKmRtR1wV/aBAANVq31vGaPRF0bOzf71fFO/SwobxHtHcVMvT6ASwBXAC6b4JxMmfpZUH127NzsG5N7V9XxptWoHK5SxLu9CZnmL73bm7AJHl4cd2g1qj47Jveu/v9z/agLxwC0Jrap7Y9fDRcL5zFXJi1j67b641cf7q7Mupf/tPTJhPM1S7/u62P9bfkDFzapYZCyhUcAAAAASUVORK5CYII=);
+    background-repeat:  no-repeat;
+    background-position:center center;
+
+}
+
+.survey-preview:hover {
+    cursor: pointer;
+    opacity: 0.6;
+    width: 120%;
+}
+}
+
+.title {
+    margin-top: 5px;
+    font-weight:bold;
+    text-align: center;
+}
+.targetDiv {
+    width: 220px;
+    margin-top: 5px;
+    vertical-align:center; 
+}
+#target {
+    font-size: 13pt;
+    padding: 6px;
+    margin: 8px 0;
+    width: 80%;
+}
+.bottom    { text-align:center;font-style:italic;font-size:12px;}
+
+#aladin-lite-div .aladin-zoomControl { position: absolute; top: 70px; right: 5px; }
+#aladin-lite-div .aladin-zoomControl a {
+          width: 25px; height: 25px; line-height: 25px; 
+          display: block; margin: 0 0 3px 0; }
+
+.developerInfo {
+    margin: 10px 0 20px 20px;
+}
+
+.aladin-container {
+    border: 0 !important;
+}
--- a/website/css/tooltipster.css
+++ b/website/css/tooltipster.css
@@ -0,0 +1,274 @@
+/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
+.tooltipster-default {
+	border-radius: 5px; 
+	border: 2px solid #000;
+	background: #4c4c4c;
+	color: #fff;
+}
+
+/* Use this next selector to style things like font-size and line-height: */
+.tooltipster-default .tooltipster-content {
+	font-family: Arial, sans-serif;
+	font-size: 14px;
+	line-height: 16px;
+	padding: 8px 10px;
+	overflow: hidden;
+}
+
+/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
+.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
+	/* border-color: ... !important; */
+}
+
+
+/* If you're using the icon option, use this next selector to style them */
+.tooltipster-icon {
+	cursor: help;
+	margin-left: 4px;
+}
+
+
+
+
+
+
+
+
+/* This is the base styling required to make all Tooltipsters work */
+.tooltipster-base {
+	padding: 0;
+	font-size: 0;
+	line-height: 0;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 9999999;
+	pointer-events: none;
+	width: auto;
+	overflow: visible;
+}
+.tooltipster-base .tooltipster-content {
+	overflow: hidden;
+}
+
+
+/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
+.tooltipster-arrow {
+	display: block;
+	text-align: center;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+}
+.tooltipster-arrow span, .tooltipster-arrow-border {
+	display: block;
+	width: 0; 
+	height: 0;
+	position: absolute;
+}
+.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
+	border-left: 8px solid transparent !important;
+	border-right: 8px solid transparent !important;
+	border-top: 8px solid;
+	bottom: -7px;
+}
+.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {
+	border-left: 9px solid transparent !important;
+	border-right: 9px solid transparent !important;
+	border-top: 9px solid;
+	bottom: -7px;
+}
+
+.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
+	border-left: 8px solid transparent !important;
+	border-right: 8px solid transparent !important;
+	border-bottom: 8px solid;
+	top: -7px;
+}
+.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
+	border-left: 9px solid transparent !important;
+	border-right: 9px solid transparent !important;
+	border-bottom: 9px solid;
+	top: -7px;
+}
+.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {
+	left: 0;
+	right: 0;
+	margin: 0 auto;
+}
+.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {
+	left: 6px;
+}
+.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {
+	left: 5px;
+}
+.tooltipster-arrow-top-right span,  .tooltipster-arrow-bottom-right span {
+	right: 6px;
+}
+.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {
+	right: 5px;
+}
+.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {
+	border-top: 8px solid transparent !important;
+	border-bottom: 8px solid transparent !important; 
+	border-left: 8px solid;
+	top: 50%;
+	margin-top: -7px;
+	right: -7px;
+}
+.tooltipster-arrow-left .tooltipster-arrow-border {
+	border-top: 9px solid transparent !important;
+	border-bottom: 9px solid transparent !important; 
+	border-left: 9px solid;
+	margin-top: -8px;
+}
+.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {
+	border-top: 8px solid transparent !important;
+	border-bottom: 8px solid transparent !important; 
+	border-right: 8px solid;
+	top: 50%;
+	margin-top: -7px;
+	left: -7px;
+}
+.tooltipster-arrow-right .tooltipster-arrow-border {
+	border-top: 9px solid transparent !important;
+	border-bottom: 9px solid transparent !important; 
+	border-right: 9px solid;
+	margin-top: -8px;
+}
+
+
+/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
+
+.tooltipster-fade {
+	opacity: 0;
+	-webkit-transition-property: opacity;
+	-moz-transition-property: opacity;
+	-o-transition-property: opacity;
+	-ms-transition-property: opacity;
+	transition-property: opacity;
+}
+.tooltipster-fade-show {
+	opacity: 1;
+}
+
+.tooltipster-grow {
+	-webkit-transform: scale(0,0);
+	-moz-transform: scale(0,0);
+	-o-transform: scale(0,0);
+	-ms-transform: scale(0,0);
+	transform: scale(0,0);
+	-webkit-transition-property: -webkit-transform;
+	-moz-transition-property: -moz-transform;
+	-o-transition-property: -o-transform;
+	-ms-transition-property: -ms-transform;
+	transition-property: transform;
+	-webkit-backface-visibility: hidden;
+}
+.tooltipster-grow-show {
+	-webkit-transform: scale(1,1);
+	-moz-transform: scale(1,1);
+	-o-transform: scale(1,1);
+	-ms-transform: scale(1,1);
+	transform: scale(1,1);
+	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+}
+
+.tooltipster-swing {
+	opacity: 0;
+	-webkit-transform: rotateZ(4deg);
+	-moz-transform: rotateZ(4deg);
+	-o-transform: rotateZ(4deg);
+	-ms-transform: rotateZ(4deg);
+	transform: rotateZ(4deg);
+	-webkit-transition-property: -webkit-transform, opacity;
+	-moz-transition-property: -moz-transform;
+	-o-transition-property: -o-transform;
+	-ms-transition-property: -ms-transform;
+	transition-property: transform;
+}
+.tooltipster-swing-show {
+	opacity: 1;
+	-webkit-transform: rotateZ(0deg);
+	-moz-transform: rotateZ(0deg);
+	-o-transform: rotateZ(0deg);
+	-ms-transform: rotateZ(0deg);
+	transform: rotateZ(0deg);
+	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
+	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
+	-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
+	-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
+	-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 
+	transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
+}
+
+.tooltipster-fall {
+	top: 0;
+	-webkit-transition-property: top;
+	-moz-transition-property: top;
+	-o-transition-property: top;
+	-ms-transition-property: top;
+	transition-property: top;
+	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+}
+.tooltipster-fall-show {
+}
+.tooltipster-fall.tooltipster-dying {
+	-webkit-transition-property: all;
+	-moz-transition-property: all;
+	-o-transition-property: all;
+	-ms-transition-property: all;
+	transition-property: all;
+	top: 0px !important;
+	opacity: 0;
+}
+
+.tooltipster-slide {
+	left: -40px;
+	-webkit-transition-property: left;
+	-moz-transition-property: left;
+	-o-transition-property: left;
+	-ms-transition-property: left;
+	transition-property: left;
+	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 
+	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
+}
+.tooltipster-slide.tooltipster-slide-show {
+}
+.tooltipster-slide.tooltipster-dying {
+	-webkit-transition-property: all;
+	-moz-transition-property: all;
+	-o-transition-property: all;
+	-ms-transition-property: all;
+	transition-property: all;
+	left: 0px !important;
+	opacity: 0;
+}
+
+
+/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
+.tooltipster-content-changing {
+	opacity: 0.5;
+	-webkit-transform: scale(1.1, 1.1);
+	-moz-transform: scale(1.1, 1.1);
+	-o-transform: scale(1.1, 1.1);
+	-ms-transform: scale(1.1, 1.1);
+	transform: scale(1.1, 1.1);
+}
--- a/website/doc/API/examples/AAS225/index.gml
+++ b/website/doc/API/examples/AAS225/index.gml
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/javascript.js"></script>
+    <script type="text/javascript" src="../js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API example</h1>
+        <p class="title"></p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../../">API</a><span class="divider">/</span></li>
+      <li><a href="../">Examples</a><span class="divider">/</span></li>
+      <li class="active title"><li>
+    </ul>
+   
+    <p class="explain"></p>
+    <div id="binContainer"></div>
+
+    
+    
+
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript" src="../js/example-initialization.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        init('../configs/AAS225.json', '#binContainer');
+    });
+  </script>
+</body>
+</html>
--- a/website/doc/API/examples/AL-in-responsive-div/index.gml
+++ b/website/doc/API/examples/AL-in-responsive-div/index.gml
@@ -0,0 +1,49 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/javascript.js"></script>
+    <script type="text/javascript" src="../js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API example</h1>
+        <p class="title"></p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../../">API</a><span class="divider">/</span></li>
+      <li><a href="../">Examples</a><span class="divider">/</span></li>
+      <li class="active title"><li>
+    </ul>
+    
+    <p class="explain"></p>
+    <div id="binContainer"></div>
+
+    
+    
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript" src="../js/example-initialization.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        init('../configs/responsive-div.json', '#binContainer');
+    });
+  </script>
+</body>
+</html>
--- a/website/doc/API/examples/AL-init-custom-options/index.gml
+++ b/website/doc/API/examples/AL-init-custom-options/index.gml
@@ -0,0 +1,49 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/javascript.js"></script>
+    <script type="text/javascript" src="../js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API example</h1>
+        <p class="title"></p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../../">API</a><span class="divider">/</span></li>
+      <li><a href="../">Examples</a><span class="divider">/</span></li>
+      <li class="active title"><li>
+    </ul>
+   
+    <p class="explain"></p>
+    <div id="binContainer"></div>
+
+    
+
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript" src="../js/example-initialization.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        init('../configs/init-custom-options.json', '#binContainer');
+    });
+  </script>
+</body>
+</html>
--- a/website/doc/API/examples/all-examples.json
+++ b/website/doc/API/examples/all-examples.json
@@ -0,0 +1,10 @@
+[
+    {"title": "Aladin Lite initialization in responsive div", "url": "AL-in-responsive-div/"},
+    {"title": "Aladin Lite created with initial options", "url": "AL-init-custom-options/"},
+    {"title": "Set an image layer by name", "url": "image-layer-by-name/"},
+    {"title": "Overlay an image layer on a base image layer", "url": "overlay-image-layer/"},
+    {"title": "Set the color map of an image layer", "url": "color-map/"},
+    {"title": "Load a table from a VOTable URL", "url": "load-votable/"},
+    {"title": "Add some footprints overlays", "url": "footprints/"},
+    {"title": "Demo page for AAS 225", "url": "AAS225/"}
+]
--- a/website/doc/API/examples/color-map/index.gml
+++ b/website/doc/API/examples/color-map/index.gml
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/javascript.js"></script>
+    <script type="text/javascript" src="../js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API example</h1>
+        <p class="title"></p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../../">API</a><span class="divider">/</span></li>
+      <li><a href="../">Examples</a><span class="divider">/</span></li>
+      <li class="active title"><li>
+    </ul>
+   
+    <p class="explain"></p>
+    <div id="binContainer"></div>
+
+    
+    
+
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript" src="../js/example-initialization.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        init('../configs/color-map.json', '#binContainer');
+    });
+  </script>
+</body>
+</html>
--- a/website/doc/API/examples/configs/AAS225.json
+++ b/website/doc/API/examples/configs/AAS225.json
@@ -0,0 +1,6 @@
+{
+    "title": "AAS225 demonstration",
+    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 600;height: 400px;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
+    "js": "var aladin = A.aladin('#aladin-lite-div', {fov:0.15, target: 'Arp 240', showReticle: false});\naladin.setBaseImageLayer(aladin.createImageSurvey('SDSS-DR9 r', 'SDSS-DR9 r', 'http://alasky.u-strasbg.fr/SDSS/DR9/band-r', 'equatorial', 10));\naladin.getBaseImageLayer().getColorMap().update('rainbow');\nvar simbad = A.catalog({name: 'Simbad', sourceSize: 16, color: '#4050F0'});\naladin.addCatalog(simbad);\nsimbad.addSources([A.marker(204.97010833333336, 0.8400166666666667, {popupTitle: 'NGC 5257', popupDesc: '<em>Object type:</em> HII galaxy<br/><em>Morphological type:</em> Sbc<br/><br/>More info <a href=\"http://simbad.u-strasbg.fr/simbad/sim-id?Ident=NGC+5257\">in Simbad</a>'}), A.marker(204.9903125, 0.8309694444444445,  {popupTitle: 'NGC 5258', popupDesc: '<em>Object type:</em>  Galaxy in Pair of Galaxies <br/><em>Morphological type:</em> Sb<br/><br/>More info <a href=\"http://simbad.u-strasbg.fr/simbad/sim-id?Ident=NGC+5258\">in Simbad</a>'})]);\n\n var overlay = A.graphicOverlay({color: '#aa2222', lineWidth: 4});\n aladin.addOverlay(overlay);\n\n overlay.addFootprints(A.polygon([[204.970214, 0.81206], [204.97110047, 0.80993368], [204.978723, 0.79165], [204.999152, 0.800162], [204.99482125, 0.81055582], [205.002941, 0.813851], [204.99986816, 0.82141125], [205.010312, 0.825578], [205.002112, 0.846123], [204.981546, 0.837916], [204.98157771, 0.83783654], [204.962977, 0.830202], [204.9703941, 0.81213504]]));\n\naladin.displayJPG('http://images.ipac.caltech.edu/stsci/stsci-prc-2008-16-bu/stsci_stsci-prc-2008-16-bu_3614.jpg');",
+    "explain": "SDSS DR9 band r image of APG 240 pair of galaxies, with an overlaid HST image and a WFPC2 footprint."
+}
--- a/website/doc/API/examples/configs/color-map.json
+++ b/website/doc/API/examples/configs/color-map.json
@@ -0,0 +1,6 @@
+{
+    "title": "Set the color map of an image layer",
+    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
+    "js": "var aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', target: 'galactic center', survey: 'P/Finkbeiner'});\n// possible values are 'native', 'grayscale', 'eosb' and 'rainbow'\naladin.getBaseImageLayer().getColorMap().update('rainbow');",
+    "explain": "Aladin Lite will be able to modify the color map if and only if the HTTP server hosting the image HiPS supports <a href='http://enable-cors.org/'>CORS (Cross-Origin Resource Sharing)</a>"
+}
--- a/website/doc/API/examples/configs/footprints.json
+++ b/website/doc/API/examples/configs/footprints.json
@@ -0,0 +1,6 @@
+{
+    "title": "Display footprints",
+    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
+    "js": "var aladin = A.aladin('#aladin-lite-div', {target: 'M 1', fov: 0.2});\n\nvar overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});\naladin.addOverlay(overlay);\noverlay.addFootprints([A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]]), A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]])]);\noverlay.add(A.circle(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees",
+    "explain": ""
+}
--- a/website/doc/API/examples/configs/image-layer-by-name.json
+++ b/website/doc/API/examples/configs/image-layer-by-name.json
@@ -0,0 +1,6 @@
+{
+    "title": "Setting an image layer by name",
+    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 400px;height:400px;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
+    "js": "var aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});\naladin.setImageSurvey('P/allWISE/color');",
+    "explain": ""
+}
--- a/website/doc/API/examples/configs/init-custom-options.json
+++ b/website/doc/API/examples/configs/init-custom-options.json
@@ -0,0 +1,6 @@
+{
+    "title": "Custom options at initialization",
+    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 500px; height:500px;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
+    "js": "var aladin = A.aladin('#aladin-lite-div',\n                  {\n                    survey: 'P/allWISE/color', // set initial image survey\n                    fov: 1.5, // initial field of view in degrees\n                    target: 'NGC 2175', // initial target\n                    cooFrame: 'galactic', // set galactic frame\n                    reticleColor: '#ff89ff', // change reticle color\n                    reticleSize: 64 // change reticle size\n});",
+    "explain": "Aladin Lite created with multiple custom options (initial FoV size, initial target, initial survey, etc)"
+}
--- a/website/doc/API/examples/configs/load-votable.json
+++ b/website/doc/API/examples/configs/load-votable.json
@@ -0,0 +1,6 @@
+{
+    "title": "Load a VOTable by URL",
+    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
+    "js": "var aladin = A.aladin('#aladin-lite-div', {survey: 'P/DSS2/red', target: 'LMC', fov: 5});\naladin.addCatalog(A.catalogFromURL('http://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));",
+    "explain": ""
+}
--- a/website/doc/API/examples/configs/overlay-image-layer.json
+++ b/website/doc/API/examples/configs/overlay-image-layer.json
@@ -0,0 +1,6 @@
+{
+    "title": "Overlay an image layer on the base image layer",
+    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 700px;height: 500px;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
+    "js": "var aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', target: 'galactic center'});\naladin.setBaseImageLayer('P/Mellinger/color');\naladin.setOverlayImageLayer(aladin.createImageSurvey('VTSS', 'VTSS', 'http://alasky.u-strasbg.fr/VTSS/Ha', 'equatorial', 4, {imgFormat: 'png'}));\naladin.getOverlayImageLayer().setAlpha(1.0);",
+    "explain": ""
+}
--- a/website/doc/API/examples/configs/responsive-div.json
+++ b/website/doc/API/examples/configs/responsive-div.json
@@ -0,0 +1,6 @@
+{
+    "title": "Aladin Lite in responsive container",
+    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 100%; height:98%;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
+    "js": "var aladin = A.aladin('#aladin-lite-div', {fov:1, target: 'M81'});",
+    "explain": "Resize your window, and see how Aladin Lite adapts to the size of its parent div."
+}
--- a/website/doc/API/examples/configs/test-config.json
+++ b/website/doc/API/examples/configs/test-config.json
@@ -0,0 +1,6 @@
+{
+    "title": "Mon super titre",
+    "html": "<link rel='stylesheet' href='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css' />\n<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js' charset='utf-8'></script>\n\n<div id='aladin-lite-div' style='width: 500px;height: 500px;'></div>\n<script type='text/javascript' src='http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js' charset='utf-8'></script>\n",
+    "js": "var aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', target: 'galactic center'});",
+    "explain": ""
+}
--- a/website/doc/API/examples/css/codemirror.css
+++ b/website/doc/API/examples/css/codemirror.css
@@ -0,0 +1,309 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+}
+.CodeMirror-scroll {
+  /* Set scrolling behaviour here */
+  overflow: auto;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror div.CodeMirror-cursor {
+  border-left: 1px solid black;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+  width: auto;
+  border: 0;
+  background: #7e7;
+}
+.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+@-moz-keyframes blink {
+  0% { background: #7e7; }
+  50% { background: none; }
+  100% { background: #7e7; }
+}
+@-webkit-keyframes blink {
+  0% { background: #7e7; }
+  50% { background: none; }
+  100% { background: #7e7; }
+}
+@keyframes blink {
+  0% { background: #7e7; }
+  50% { background: none; }
+  100% { background: #7e7; }
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+div.CodeMirror-overwrite div.CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  line-height: 1;
+  position: relative;
+  overflow: hidden;
+  background: white;
+  color: black;
+}
+
+.CodeMirror-scroll {
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actuall scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  padding-bottom: 30px;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  padding-bottom: 30px;
+  margin-bottom: -32px;
+  display: inline-block;
+  /* Hack to make IE7 behave */
+  *zoom:1;
+  *display:inline;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+.CodeMirror-measure pre { position: static; }
+
+.CodeMirror div.CodeMirror-cursor {
+  position: absolute;
+  border-right: none;
+  width: 0;
+}
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* IE7 hack to prevent it from returning funny offsetTops on the spans */
+.CodeMirror span { *vertical-align: text-bottom; }
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
--- a/website/doc/API/examples/css/style.css
+++ b/website/doc/API/examples/css/style.css
@@ -0,0 +1,40 @@
+.halfWidth {
+    position: relative;
+    width: 50%;
+    float: left;
+}
+
+.bordered {
+    border: 1px solid #ddd;
+    margin-right: 30px;
+    margin-bottom: 10px;
+}
+
+.parent {
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
+.explain {
+    padding-left: 30px;
+    font-size: 20px;
+
+}
+
+#js {
+    height: 400px;
+    font-size: 14px;
+}
+
+#html {
+    height: 180px;
+    font-size: 14px;
+}
+
+#result {
+    border: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.
--- a/website/doc/API/examples/example-template/index.gml
+++ b/website/doc/API/examples/example-template/index.gml
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/javascript.js"></script>
+    <script type="text/javascript" src="../js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API example</h1>
+        <p class="title"></p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../../">API</a><span class="divider">/</span></li>
+      <li><a href="../">Examples</a><span class="divider">/</span></li>
+      <li class="active title"><li>
+    </ul>
+   
+    <p class="explain"></p>
+    <div id="binContainer"></div>
+
+    
+    
+
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript" src="../js/example-initialization.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        init('../configs/test-config.json', '#binContainer');
+    });
+  </script>
+</body>
+</html>
--- a/website/doc/API/examples/footprints/index.gml
+++ b/website/doc/API/examples/footprints/index.gml
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/javascript.js"></script>
+    <script type="text/javascript" src="../js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API example</h1>
+        <p class="title"></p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../../">API</a><span class="divider">/</span></li>
+      <li><a href="../">Examples</a><span class="divider">/</span></li>
+      <li class="active title"><li>
+    </ul>
+   
+    <p class="explain"></p>
+    <div id="binContainer"></div>
+
+    
+    
+
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript" src="../js/example-initialization.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        init('../configs/footprints.json', '#binContainer');
+    });
+  </script>
+</body>
+</html>
--- a/website/doc/API/examples/image-layer-by-name/index.gml
+++ b/website/doc/API/examples/image-layer-by-name/index.gml
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/javascript.js"></script>
+    <script type="text/javascript" src="../js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API example</h1>
+        <p class="title"></p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../../">API</a><span class="divider">/</span></li>
+      <li><a href="../">Examples</a><span class="divider">/</span></li>
+      <li class="active title"><li>
+    </ul>
+   
+    <p class="explain"></p>
+    <div id="binContainer"></div>
+
+    
+    
+
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript" src="../js/example-initialization.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        init('../configs/image-layer-by-name.json', '#binContainer');
+    });
+  </script>
+</body>
+</html>
--- a/website/doc/API/examples/index.gml
+++ b/website/doc/API/examples/index.gml
@@ -0,0 +1,57 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="css/codemirror.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="js/codemirror.js"></script>
+    <script type="text/javascript" src="js/javascript.js"></script>
+    <script type="text/javascript" src="js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API examples list</h1>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../">API</a><span class="divider">/</span></li>
+      <li class="active title">Examples<li>
+    </ul>
+
+    <div class="container content">
+        <div class="row">
+            <ul id="examples-list">
+            </ul>
+        </div>
+    </div>
+    
+    
+
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript">
+    $.ajax({
+       url: 'all-examples.json',
+    }).done(function(items) {
+        for (var k=0; k<items.length; k++) {
+            var title = items[k].title;
+            var url = items[k].url;
+            $('#examples-list').append('<li><a href="' + url + '">' + title + '</a></li>');
+        }
+    });
+  </script>
+
+</body>
+</html>
--- a/website/doc/API/examples/js/codemirror.js
+++ b/website/doc/API/examples/js/codemirror.js
--- a/website/doc/API/examples/js/codemirror.min.js
+++ b/website/doc/API/examples/js/codemirror.min.js
--- a/website/doc/API/examples/js/example-initialization.js
+++ b/website/doc/API/examples/js/example-initialization.js
@@ -0,0 +1,73 @@
+var init = function(configFile, parentDivSelector) {
+    var div = $(parentDivSelector);
+    $('  <div class="parent" >\n' +
+      '  <div class="halfWidth">\n' +
+      '  <h3>Javascript</h3><div class="bordered" id="js"></div>\n' +
+      '  <h3>HTML</h3><div class="bordered" id="html"></div>\n' +
+      '  </div>\n' +
+      '  <div class="halfWidth">\n' +
+      '  <h3>Result</h3>\n' +
+      '  <iframe id="result" frameBorder="0"></iframe>\n' +
+      '  </div>\n' +
+      '<div style="clear: both;"></div>\n' +
+      '\n' +
+      '\n' 
+      )
+      .appendTo(div);
+
+   $.ajax({
+       url: configFile,
+   }).done(function(data) {
+        if (data.title) {
+            $('.title').html(data.title);
+        }
+        if (data.explain) {
+            $('.explain').html(data.explain);
+        }
+
+        var jsMirror = CodeMirror(document.getElementById('js'), {
+            value: data.js,
+            mode:  "javascript"
+        });
+        var htmlMirror = CodeMirror(document.getElementById('html'), {
+            value: data.html,
+            mode: "xml"
+        });
+        htmlMirror.setSize(null, "180");
+
+        var update = function() {
+            var js = jsMirror.getValue();
+            var html = htmlMirror.getValue();
+
+            updateIFrame('result', html, js);
+        }
+
+        update();
+
+        jsMirror.on('change', function(e) {
+            update();
+        });
+        htmlMirror.on('change', function(e) {
+            update();
+        });
+   });
+
+}
+
+var updateIFrame = function(iframeId, html, js) {
+    var iframe = $('#' + iframeId)[0];
+    if (iframe.contentDocument) {
+        doc = iframe.contentDocument;
+    }
+    else if (iframe.contentWindow) {
+        doc = iframe.contentWindow.document;
+    }
+    else {
+        doc = iframe.document;
+    }
+
+    var content = '<html><head></head><body>' + html +  '<script type="text/javascript">' + js + '</script></body></html>';
+    doc.open();
+    doc.writeln(content);
+    doc.close();
+}
--- a/website/doc/API/examples/js/htmlmixed.js
+++ b/website/doc/API/examples/js/htmlmixed.js
@@ -0,0 +1,121 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"), require("../xml/xml"), require("../javascript/javascript"), require("../css/css"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror", "../xml/xml", "../javascript/javascript", "../css/css"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
+  var htmlMode = CodeMirror.getMode(config, {name: "xml",
+                                             htmlMode: true,
+                                             multilineTagIndentFactor: parserConfig.multilineTagIndentFactor,
+                                             multilineTagIndentPastTag: parserConfig.multilineTagIndentPastTag});
+  var cssMode = CodeMirror.getMode(config, "css");
+
+  var scriptTypes = [], scriptTypesConf = parserConfig && parserConfig.scriptTypes;
+  scriptTypes.push({matches: /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^$/i,
+                    mode: CodeMirror.getMode(config, "javascript")});
+  if (scriptTypesConf) for (var i = 0; i < scriptTypesConf.length; ++i) {
+    var conf = scriptTypesConf[i];
+    scriptTypes.push({matches: conf.matches, mode: conf.mode && CodeMirror.getMode(config, conf.mode)});
+  }
+  scriptTypes.push({matches: /./,
+                    mode: CodeMirror.getMode(config, "text/plain")});
+
+  function html(stream, state) {
+    var tagName = state.htmlState.tagName;
+    if (tagName) tagName = tagName.toLowerCase();
+    var style = htmlMode.token(stream, state.htmlState);
+    if (tagName == "script" && /\btag\b/.test(style) && stream.current() == ">") {
+      // Script block: mode to change to depends on type attribute
+      var scriptType = stream.string.slice(Math.max(0, stream.pos - 100), stream.pos).match(/\btype\s*=\s*("[^"]+"|'[^']+'|\S+)[^<]*$/i);
+      scriptType = scriptType ? scriptType[1] : "";
+      if (scriptType && /[\"\']/.test(scriptType.charAt(0))) scriptType = scriptType.slice(1, scriptType.length - 1);
+      for (var i = 0; i < scriptTypes.length; ++i) {
+        var tp = scriptTypes[i];
+        if (typeof tp.matches == "string" ? scriptType == tp.matches : tp.matches.test(scriptType)) {
+          if (tp.mode) {
+            state.token = script;
+            state.localMode = tp.mode;
+            state.localState = tp.mode.startState && tp.mode.startState(htmlMode.indent(state.htmlState, ""));
+          }
+          break;
+        }
+      }
+    } else if (tagName == "style" && /\btag\b/.test(style) && stream.current() == ">") {
+      state.token = css;
+      state.localMode = cssMode;
+      state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
+    }
+    return style;
+  }
+  function maybeBackup(stream, pat, style) {
+    var cur = stream.current();
+    var close = cur.search(pat), m;
+    if (close > -1) stream.backUp(cur.length - close);
+    else if (m = cur.match(/<\/?$/)) {
+      stream.backUp(cur.length);
+      if (!stream.match(pat, false)) stream.match(cur);
+    }
+    return style;
+  }
+  function script(stream, state) {
+    if (stream.match(/^<\/\s*script\s*>/i, false)) {
+      state.token = html;
+      state.localState = state.localMode = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*script\s*>/,
+                       state.localMode.token(stream, state.localState));
+  }
+  function css(stream, state) {
+    if (stream.match(/^<\/\s*style\s*>/i, false)) {
+      state.token = html;
+      state.localState = state.localMode = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*style\s*>/,
+                       cssMode.token(stream, state.localState));
+  }
+
+  return {
+    startState: function() {
+      var state = htmlMode.startState();
+      return {token: html, localMode: null, localState: null, htmlState: state};
+    },
+
+    copyState: function(state) {
+      if (state.localState)
+        var local = CodeMirror.copyState(state.localMode, state.localState);
+      return {token: state.token, localMode: state.localMode, localState: local,
+              htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+    },
+
+    token: function(stream, state) {
+      return state.token(stream, state);
+    },
+
+    indent: function(state, textAfter) {
+      if (!state.localMode || /^\s*<\//.test(textAfter))
+        return htmlMode.indent(state.htmlState, textAfter);
+      else if (state.localMode.indent)
+        return state.localMode.indent(state.localState, textAfter);
+      else
+        return CodeMirror.Pass;
+    },
+
+    innerMode: function(state) {
+      return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode};
+    }
+  };
+}, "xml", "javascript", "css");
+
+CodeMirror.defineMIME("text/html", "htmlmixed");
+
+});
--- a/website/doc/API/examples/js/javascript.js
+++ b/website/doc/API/examples/js/javascript.js
@@ -0,0 +1,684 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+// TODO actually recognize syntax of TypeScript constructs
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.defineMode("javascript", function(config, parserConfig) {
+  var indentUnit = config.indentUnit;
+  var statementIndent = parserConfig.statementIndent;
+  var jsonldMode = parserConfig.jsonld;
+  var jsonMode = parserConfig.json || jsonldMode;
+  var isTS = parserConfig.typescript;
+  var wordRE = parserConfig.wordCharacters || /[\w$\xa1-\uffff]/;
+
+  // Tokenizer
+
+  var keywords = function(){
+    function kw(type) {return {type: type, style: "keyword"};}
+    var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
+    var operator = kw("operator"), atom = {type: "atom", style: "atom"};
+
+    var jsKeywords = {
+      "if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
+      "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C, "debugger": C,
+      "var": kw("var"), "const": kw("var"), "let": kw("var"),
+      "function": kw("function"), "catch": kw("catch"),
+      "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
+      "in": operator, "typeof": operator, "instanceof": operator,
+      "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom,
+      "this": kw("this"), "module": kw("module"), "class": kw("class"), "super": kw("atom"),
+      "yield": C, "export": kw("export"), "import": kw("import"), "extends": C
+    };
+
+    // Extend the 'normal' keywords with the TypeScript language extensions
+    if (isTS) {
+      var type = {type: "variable", style: "variable-3"};
+      var tsKeywords = {
+        // object-like things
+        "interface": kw("interface"),
+        "extends": kw("extends"),
+        "constructor": kw("constructor"),
+
+        // scope modifiers
+        "public": kw("public"),
+        "private": kw("private"),
+        "protected": kw("protected"),
+        "static": kw("static"),
+
+        // types
+        "string": type, "number": type, "bool": type, "any": type
+      };
+
+      for (var attr in tsKeywords) {
+        jsKeywords[attr] = tsKeywords[attr];
+      }
+    }
+
+    return jsKeywords;
+  }();
+
+  var isOperatorChar = /[+\-*&%=<>!?|~^]/;
+  var isJsonldKeyword = /^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;
+
+  function readRegexp(stream) {
+    var escaped = false, next, inSet = false;
+    while ((next = stream.next()) != null) {
+      if (!escaped) {
+        if (next == "/" && !inSet) return;
+        if (next == "[") inSet = true;
+        else if (inSet && next == "]") inSet = false;
+      }
+      escaped = !escaped && next == "\\";
+    }
+  }
+
+  // Used as scratch variables to communicate multiple values without
+  // consing up tons of objects.
+  var type, content;
+  function ret(tp, style, cont) {
+    type = tp; content = cont;
+    return style;
+  }
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+    if (ch == '"' || ch == "'") {
+      state.tokenize = tokenString(ch);
+      return state.tokenize(stream, state);
+    } else if (ch == "." && stream.match(/^\d+(?:[eE][+\-]?\d+)?/)) {
+      return ret("number", "number");
+    } else if (ch == "." && stream.match("..")) {
+      return ret("spread", "meta");
+    } else if (/[\[\]{}\(\),;\:\.]/.test(ch)) {
+      return ret(ch);
+    } else if (ch == "=" && stream.eat(">")) {
+      return ret("=>", "operator");
+    } else if (ch == "0" && stream.eat(/x/i)) {
+      stream.eatWhile(/[\da-f]/i);
+      return ret("number", "number");
+    } else if (/\d/.test(ch)) {
+      stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
+      return ret("number", "number");
+    } else if (ch == "/") {
+      if (stream.eat("*")) {
+        state.tokenize = tokenComment;
+        return tokenComment(stream, state);
+      } else if (stream.eat("/")) {
+        stream.skipToEnd();
+        return ret("comment", "comment");
+      } else if (state.lastType == "operator" || state.lastType == "keyword c" ||
+               state.lastType == "sof" || /^[\[{}\(,;:]$/.test(state.lastType)) {
+        readRegexp(stream);
+        stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
+        return ret("regexp", "string-2");
+      } else {
+        stream.eatWhile(isOperatorChar);
+        return ret("operator", "operator", stream.current());
+      }
+    } else if (ch == "`") {
+      state.tokenize = tokenQuasi;
+      return tokenQuasi(stream, state);
+    } else if (ch == "#") {
+      stream.skipToEnd();
+      return ret("error", "error");
+    } else if (isOperatorChar.test(ch)) {
+      stream.eatWhile(isOperatorChar);
+      return ret("operator", "operator", stream.current());
+    } else if (wordRE.test(ch)) {
+      stream.eatWhile(wordRE);
+      var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
+      return (known && state.lastType != ".") ? ret(known.type, known.style, word) :
+                     ret("variable", "variable", word);
+    }
+  }
+
+  function tokenString(quote) {
+    return function(stream, state) {
+      var escaped = false, next;
+      if (jsonldMode && stream.peek() == "@" && stream.match(isJsonldKeyword)){
+        state.tokenize = tokenBase;
+        return ret("jsonld-keyword", "meta");
+      }
+      while ((next = stream.next()) != null) {
+        if (next == quote && !escaped) break;
+        escaped = !escaped && next == "\\";
+      }
+      if (!escaped) state.tokenize = tokenBase;
+      return ret("string", "string");
+    };
+  }
+
+  function tokenComment(stream, state) {
+    var maybeEnd = false, ch;
+    while (ch = stream.next()) {
+      if (ch == "/" && maybeEnd) {
+        state.tokenize = tokenBase;
+        break;
+      }
+      maybeEnd = (ch == "*");
+    }
+    return ret("comment", "comment");
+  }
+
+  function tokenQuasi(stream, state) {
+    var escaped = false, next;
+    while ((next = stream.next()) != null) {
+      if (!escaped && (next == "`" || next == "$" && stream.eat("{"))) {
+        state.tokenize = tokenBase;
+        break;
+      }
+      escaped = !escaped && next == "\\";
+    }
+    return ret("quasi", "string-2", stream.current());
+  }
+
+  var brackets = "([{}])";
+  // This is a crude lookahead trick to try and notice that we're
+  // parsing the argument patterns for a fat-arrow function before we
+  // actually hit the arrow token. It only works if the arrow is on
+  // the same line as the arguments and there's no strange noise
+  // (comments) in between. Fallback is to only notice when we hit the
+  // arrow, and not declare the arguments as locals for the arrow
+  // body.
+  function findFatArrow(stream, state) {
+    if (state.fatArrowAt) state.fatArrowAt = null;
+    var arrow = stream.string.indexOf("=>", stream.start);
+    if (arrow < 0) return;
+
+    var depth = 0, sawSomething = false;
+    for (var pos = arrow - 1; pos >= 0; --pos) {
+      var ch = stream.string.charAt(pos);
+      var bracket = brackets.indexOf(ch);
+      if (bracket >= 0 && bracket < 3) {
+        if (!depth) { ++pos; break; }
+        if (--depth == 0) break;
+      } else if (bracket >= 3 && bracket < 6) {
+        ++depth;
+      } else if (wordRE.test(ch)) {
+        sawSomething = true;
+      } else if (sawSomething && !depth) {
+        ++pos;
+        break;
+      }
+    }
+    if (sawSomething && !depth) state.fatArrowAt = pos;
+  }
+
+  // Parser
+
+  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true, "jsonld-keyword": true};
+
+  function JSLexical(indented, column, type, align, prev, info) {
+    this.indented = indented;
+    this.column = column;
+    this.type = type;
+    this.prev = prev;
+    this.info = info;
+    if (align != null) this.align = align;
+  }
+
+  function inScope(state, varname) {
+    for (var v = state.localVars; v; v = v.next)
+      if (v.name == varname) return true;
+    for (var cx = state.context; cx; cx = cx.prev) {
+      for (var v = cx.vars; v; v = v.next)
+        if (v.name == varname) return true;
+    }
+  }
+
+  function parseJS(state, style, type, content, stream) {
+    var cc = state.cc;
+    // Communicate our context to the combinators.
+    // (Less wasteful than consing up a hundred closures on every call.)
+    cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc; cx.style = style;
+
+    if (!state.lexical.hasOwnProperty("align"))
+      state.lexical.align = true;
+
+    while(true) {
+      var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
+      if (combinator(type, content)) {
+        while(cc.length && cc[cc.length - 1].lex)
+          cc.pop()();
+        if (cx.marked) return cx.marked;
+        if (type == "variable" && inScope(state, content)) return "variable-2";
+        return style;
+      }
+    }
+  }
+
+  // Combinator utils
+
+  var cx = {state: null, column: null, marked: null, cc: null};
+  function pass() {
+    for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
+  }
+  function cont() {
+    pass.apply(null, arguments);
+    return true;
+  }
+  function register(varname) {
+    function inList(list) {
+      for (var v = list; v; v = v.next)
+        if (v.name == varname) return true;
+      return false;
+    }
+    var state = cx.state;
+    if (state.context) {
+      cx.marked = "def";
+      if (inList(state.localVars)) return;
+      state.localVars = {name: varname, next: state.localVars};
+    } else {
+      if (inList(state.globalVars)) return;
+      if (parserConfig.globalVars)
+        state.globalVars = {name: varname, next: state.globalVars};
+    }
+  }
+
+  // Combinators
+
+  var defaultVars = {name: "this", next: {name: "arguments"}};
+  function pushcontext() {
+    cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
+    cx.state.localVars = defaultVars;
+  }
+  function popcontext() {
+    cx.state.localVars = cx.state.context.vars;
+    cx.state.context = cx.state.context.prev;
+  }
+  function pushlex(type, info) {
+    var result = function() {
+      var state = cx.state, indent = state.indented;
+      if (state.lexical.type == "stat") indent = state.lexical.indented;
+      else for (var outer = state.lexical; outer && outer.type == ")" && outer.align; outer = outer.prev)
+        indent = outer.indented;
+      state.lexical = new JSLexical(indent, cx.stream.column(), type, null, state.lexical, info);
+    };
+    result.lex = true;
+    return result;
+  }
+  function poplex() {
+    var state = cx.state;
+    if (state.lexical.prev) {
+      if (state.lexical.type == ")")
+        state.indented = state.lexical.indented;
+      state.lexical = state.lexical.prev;
+    }
+  }
+  poplex.lex = true;
+
+  function expect(wanted) {
+    function exp(type) {
+      if (type == wanted) return cont();
+      else if (wanted == ";") return pass();
+      else return cont(exp);
+    };
+    return exp;
+  }
+
+  function statement(type, value) {
+    if (type == "var") return cont(pushlex("vardef", value.length), vardef, expect(";"), poplex);
+    if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
+    if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
+    if (type == "{") return cont(pushlex("}"), block, poplex);
+    if (type == ";") return cont();
+    if (type == "if") {
+      if (cx.state.lexical.info == "else" && cx.state.cc[cx.state.cc.length - 1] == poplex)
+        cx.state.cc.pop()();
+      return cont(pushlex("form"), expression, statement, poplex, maybeelse);
+    }
+    if (type == "function") return cont(functiondef);
+    if (type == "for") return cont(pushlex("form"), forspec, statement, poplex);
+    if (type == "variable") return cont(pushlex("stat"), maybelabel);
+    if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
+                                      block, poplex, poplex);
+    if (type == "case") return cont(expression, expect(":"));
+    if (type == "default") return cont(expect(":"));
+    if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
+                                     statement, poplex, popcontext);
+    if (type == "module") return cont(pushlex("form"), pushcontext, afterModule, popcontext, poplex);
+    if (type == "class") return cont(pushlex("form"), className, poplex);
+    if (type == "export") return cont(pushlex("form"), afterExport, poplex);
+    if (type == "import") return cont(pushlex("form"), afterImport, poplex);
+    return pass(pushlex("stat"), expression, expect(";"), poplex);
+  }
+  function expression(type) {
+    return expressionInner(type, false);
+  }
+  function expressionNoComma(type) {
+    return expressionInner(type, true);
+  }
+  function expressionInner(type, noComma) {
+    if (cx.state.fatArrowAt == cx.stream.start) {
+      var body = noComma ? arrowBodyNoComma : arrowBody;
+      if (type == "(") return cont(pushcontext, pushlex(")"), commasep(pattern, ")"), poplex, expect("=>"), body, popcontext);
+      else if (type == "variable") return pass(pushcontext, pattern, expect("=>"), body, popcontext);
+    }
+
+    var maybeop = noComma ? maybeoperatorNoComma : maybeoperatorComma;
+    if (atomicTypes.hasOwnProperty(type)) return cont(maybeop);
+    if (type == "function") return cont(functiondef, maybeop);
+    if (type == "keyword c") return cont(noComma ? maybeexpressionNoComma : maybeexpression);
+    if (type == "(") return cont(pushlex(")"), maybeexpression, comprehension, expect(")"), poplex, maybeop);
+    if (type == "operator" || type == "spread") return cont(noComma ? expressionNoComma : expression);
+    if (type == "[") return cont(pushlex("]"), arrayLiteral, poplex, maybeop);
+    if (type == "{") return contCommasep(objprop, "}", null, maybeop);
+    if (type == "quasi") { return pass(quasi, maybeop); }
+    return cont();
+  }
+  function maybeexpression(type) {
+    if (type.match(/[;\}\)\],]/)) return pass();
+    return pass(expression);
+  }
+  function maybeexpressionNoComma(type) {
+    if (type.match(/[;\}\)\],]/)) return pass();
+    return pass(expressionNoComma);
+  }
+
+  function maybeoperatorComma(type, value) {
+    if (type == ",") return cont(expression);
+    return maybeoperatorNoComma(type, value, false);
+  }
+  function maybeoperatorNoComma(type, value, noComma) {
+    var me = noComma == false ? maybeoperatorComma : maybeoperatorNoComma;
+    var expr = noComma == false ? expression : expressionNoComma;
+    if (type == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
+    if (type == "operator") {
+      if (/\+\+|--/.test(value)) return cont(me);
+      if (value == "?") return cont(expression, expect(":"), expr);
+      return cont(expr);
+    }
+    if (type == "quasi") { return pass(quasi, me); }
+    if (type == ";") return;
+    if (type == "(") return contCommasep(expressionNoComma, ")", "call", me);
+    if (type == ".") return cont(property, me);
+    if (type == "[") return cont(pushlex("]"), maybeexpression, expect("]"), poplex, me);
+  }
+  function quasi(type, value) {
+    if (type != "quasi") return pass();
+    if (value.slice(value.length - 2) != "${") return cont(quasi);
+    return cont(expression, continueQuasi);
+  }
+  function continueQuasi(type) {
+    if (type == "}") {
+      cx.marked = "string-2";
+      cx.state.tokenize = tokenQuasi;
+      return cont(quasi);
+    }
+  }
+  function arrowBody(type) {
+    findFatArrow(cx.stream, cx.state);
+    return pass(type == "{" ? statement : expression);
+  }
+  function arrowBodyNoComma(type) {
+    findFatArrow(cx.stream, cx.state);
+    return pass(type == "{" ? statement : expressionNoComma);
+  }
+  function maybelabel(type) {
+    if (type == ":") return cont(poplex, statement);
+    return pass(maybeoperatorComma, expect(";"), poplex);
+  }
+  function property(type) {
+    if (type == "variable") {cx.marked = "property"; return cont();}
+  }
+  function objprop(type, value) {
+    if (type == "variable" || cx.style == "keyword") {
+      cx.marked = "property";
+      if (value == "get" || value == "set") return cont(getterSetter);
+      return cont(afterprop);
+    } else if (type == "number" || type == "string") {
+      cx.marked = jsonldMode ? "property" : (cx.style + " property");
+      return cont(afterprop);
+    } else if (type == "jsonld-keyword") {
+      return cont(afterprop);
+    } else if (type == "[") {
+      return cont(expression, expect("]"), afterprop);
+    }
+  }
+  function getterSetter(type) {
+    if (type != "variable") return pass(afterprop);
+    cx.marked = "property";
+    return cont(functiondef);
+  }
+  function afterprop(type) {
+    if (type == ":") return cont(expressionNoComma);
+    if (type == "(") return pass(functiondef);
+  }
+  function commasep(what, end) {
+    function proceed(type) {
+      if (type == ",") {
+        var lex = cx.state.lexical;
+        if (lex.info == "call") lex.pos = (lex.pos || 0) + 1;
+        return cont(what, proceed);
+      }
+      if (type == end) return cont();
+      return cont(expect(end));
+    }
+    return function(type) {
+      if (type == end) return cont();
+      return pass(what, proceed);
+    };
+  }
+  function contCommasep(what, end, info) {
+    for (var i = 3; i < arguments.length; i++)
+      cx.cc.push(arguments[i]);
+    return cont(pushlex(end, info), commasep(what, end), poplex);
+  }
+  function block(type) {
+    if (type == "}") return cont();
+    return pass(statement, block);
+  }
+  function maybetype(type) {
+    if (isTS && type == ":") return cont(typedef);
+  }
+  function typedef(type) {
+    if (type == "variable"){cx.marked = "variable-3"; return cont();}
+  }
+  function vardef() {
+    return pass(pattern, maybetype, maybeAssign, vardefCont);
+  }
+  function pattern(type, value) {
+    if (type == "variable") { register(value); return cont(); }
+    if (type == "[") return contCommasep(pattern, "]");
+    if (type == "{") return contCommasep(proppattern, "}");
+  }
+  function proppattern(type, value) {
+    if (type == "variable" && !cx.stream.match(/^\s*:/, false)) {
+      register(value);
+      return cont(maybeAssign);
+    }
+    if (type == "variable") cx.marked = "property";
+    return cont(expect(":"), pattern, maybeAssign);
+  }
+  function maybeAssign(_type, value) {
+    if (value == "=") return cont(expressionNoComma);
+  }
+  function vardefCont(type) {
+    if (type == ",") return cont(vardef);
+  }
+  function maybeelse(type, value) {
+    if (type == "keyword b" && value == "else") return cont(pushlex("form", "else"), statement, poplex);
+  }
+  function forspec(type) {
+    if (type == "(") return cont(pushlex(")"), forspec1, expect(")"), poplex);
+  }
+  function forspec1(type) {
+    if (type == "var") return cont(vardef, expect(";"), forspec2);
+    if (type == ";") return cont(forspec2);
+    if (type == "variable") return cont(formaybeinof);
+    return pass(expression, expect(";"), forspec2);
+  }
+  function formaybeinof(_type, value) {
+    if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
+    return cont(maybeoperatorComma, forspec2);
+  }
+  function forspec2(type, value) {
+    if (type == ";") return cont(forspec3);
+    if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
+    return pass(expression, expect(";"), forspec3);
+  }
+  function forspec3(type) {
+    if (type != ")") cont(expression);
+  }
+  function functiondef(type, value) {
+    if (value == "*") {cx.marked = "keyword"; return cont(functiondef);}
+    if (type == "variable") {register(value); return cont(functiondef);}
+    if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, statement, popcontext);
+  }
+  function funarg(type) {
+    if (type == "spread") return cont(funarg);
+    return pass(pattern, maybetype);
+  }
+  function className(type, value) {
+    if (type == "variable") {register(value); return cont(classNameAfter);}
+  }
+  function classNameAfter(type, value) {
+    if (value == "extends") return cont(expression, classNameAfter);
+    if (type == "{") return cont(pushlex("}"), classBody, poplex);
+  }
+  function classBody(type, value) {
+    if (type == "variable" || cx.style == "keyword") {
+      cx.marked = "property";
+      if (value == "get" || value == "set") return cont(classGetterSetter, functiondef, classBody);
+      return cont(functiondef, classBody);
+    }
+    if (value == "*") {
+      cx.marked = "keyword";
+      return cont(classBody);
+    }
+    if (type == ";") return cont(classBody);
+    if (type == "}") return cont();
+  }
+  function classGetterSetter(type) {
+    if (type != "variable") return pass();
+    cx.marked = "property";
+    return cont();
+  }
+  function afterModule(type, value) {
+    if (type == "string") return cont(statement);
+    if (type == "variable") { register(value); return cont(maybeFrom); }
+  }
+  function afterExport(_type, value) {
+    if (value == "*") { cx.marked = "keyword"; return cont(maybeFrom, expect(";")); }
+    if (value == "default") { cx.marked = "keyword"; return cont(expression, expect(";")); }
+    return pass(statement);
+  }
+  function afterImport(type) {
+    if (type == "string") return cont();
+    return pass(importSpec, maybeFrom);
+  }
+  function importSpec(type, value) {
+    if (type == "{") return contCommasep(importSpec, "}");
+    if (type == "variable") register(value);
+    return cont();
+  }
+  function maybeFrom(_type, value) {
+    if (value == "from") { cx.marked = "keyword"; return cont(expression); }
+  }
+  function arrayLiteral(type) {
+    if (type == "]") return cont();
+    return pass(expressionNoComma, maybeArrayComprehension);
+  }
+  function maybeArrayComprehension(type) {
+    if (type == "for") return pass(comprehension, expect("]"));
+    if (type == ",") return cont(commasep(maybeexpressionNoComma, "]"));
+    return pass(commasep(expressionNoComma, "]"));
+  }
+  function comprehension(type) {
+    if (type == "for") return cont(forspec, comprehension);
+    if (type == "if") return cont(expression, comprehension);
+  }
+
+  // Interface
+
+  return {
+    startState: function(basecolumn) {
+      var state = {
+        tokenize: tokenBase,
+        lastType: "sof",
+        cc: [],
+        lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
+        localVars: parserConfig.localVars,
+        context: parserConfig.localVars && {vars: parserConfig.localVars},
+        indented: 0
+      };
+      if (parserConfig.globalVars && typeof parserConfig.globalVars == "object")
+        state.globalVars = parserConfig.globalVars;
+      return state;
+    },
+
+    token: function(stream, state) {
+      if (stream.sol()) {
+        if (!state.lexical.hasOwnProperty("align"))
+          state.lexical.align = false;
+        state.indented = stream.indentation();
+        findFatArrow(stream, state);
+      }
+      if (state.tokenize != tokenComment && stream.eatSpace()) return null;
+      var style = state.tokenize(stream, state);
+      if (type == "comment") return style;
+      state.lastType = type == "operator" && (content == "++" || content == "--") ? "incdec" : type;
+      return parseJS(state, style, type, content, stream);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.tokenize == tokenComment) return CodeMirror.Pass;
+      if (state.tokenize != tokenBase) return 0;
+      var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical;
+      // Kludge to prevent 'maybelse' from blocking lexical scope pops
+      if (!/^\s*else\b/.test(textAfter)) for (var i = state.cc.length - 1; i >= 0; --i) {
+        var c = state.cc[i];
+        if (c == poplex) lexical = lexical.prev;
+        else if (c != maybeelse) break;
+      }
+      if (lexical.type == "stat" && firstChar == "}") lexical = lexical.prev;
+      if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
+        lexical = lexical.prev;
+      var type = lexical.type, closing = firstChar == type;
+
+      if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? lexical.info + 1 : 0);
+      else if (type == "form" && firstChar == "{") return lexical.indented;
+      else if (type == "form") return lexical.indented + indentUnit;
+      else if (type == "stat")
+        return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? statementIndent || indentUnit : 0);
+      else if (lexical.info == "switch" && !closing && parserConfig.doubleIndentSwitch != false)
+        return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
+      else if (lexical.align) return lexical.column + (closing ? 0 : 1);
+      else return lexical.indented + (closing ? 0 : indentUnit);
+    },
+
+    electricInput: /^\s*(?:case .*?:|default:|\{|\})$/,
+    blockCommentStart: jsonMode ? null : "/*",
+    blockCommentEnd: jsonMode ? null : "*/",
+    lineComment: jsonMode ? null : "//",
+    fold: "brace",
+
+    helperType: jsonMode ? "json" : "javascript",
+    jsonldMode: jsonldMode,
+    jsonMode: jsonMode
+  };
+});
+
+CodeMirror.registerHelper("wordChars", "javascript", /[\w$]/);
+
+CodeMirror.defineMIME("text/javascript", "javascript");
+CodeMirror.defineMIME("text/ecmascript", "javascript");
+CodeMirror.defineMIME("application/javascript", "javascript");
+CodeMirror.defineMIME("application/x-javascript", "javascript");
+CodeMirror.defineMIME("application/ecmascript", "javascript");
+CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
+CodeMirror.defineMIME("application/x-json", {name: "javascript", json: true});
+CodeMirror.defineMIME("application/ld+json", {name: "javascript", jsonld: true});
+CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
+CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
+
+});
--- a/website/doc/API/examples/js/xml.js
+++ b/website/doc/API/examples/js/xml.js
@@ -0,0 +1,384 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.defineMode("xml", function(config, parserConfig) {
+  var indentUnit = config.indentUnit;
+  var multilineTagIndentFactor = parserConfig.multilineTagIndentFactor || 1;
+  var multilineTagIndentPastTag = parserConfig.multilineTagIndentPastTag;
+  if (multilineTagIndentPastTag == null) multilineTagIndentPastTag = true;
+
+  var Kludges = parserConfig.htmlMode ? {
+    autoSelfClosers: {'area': true, 'base': true, 'br': true, 'col': true, 'command': true,
+                      'embed': true, 'frame': true, 'hr': true, 'img': true, 'input': true,
+                      'keygen': true, 'link': true, 'meta': true, 'param': true, 'source': true,
+                      'track': true, 'wbr': true, 'menuitem': true},
+    implicitlyClosed: {'dd': true, 'li': true, 'optgroup': true, 'option': true, 'p': true,
+                       'rp': true, 'rt': true, 'tbody': true, 'td': true, 'tfoot': true,
+                       'th': true, 'tr': true},
+    contextGrabbers: {
+      'dd': {'dd': true, 'dt': true},
+      'dt': {'dd': true, 'dt': true},
+      'li': {'li': true},
+      'option': {'option': true, 'optgroup': true},
+      'optgroup': {'optgroup': true},
+      'p': {'address': true, 'article': true, 'aside': true, 'blockquote': true, 'dir': true,
+            'div': true, 'dl': true, 'fieldset': true, 'footer': true, 'form': true,
+            'h1': true, 'h2': true, 'h3': true, 'h4': true, 'h5': true, 'h6': true,
+            'header': true, 'hgroup': true, 'hr': true, 'menu': true, 'nav': true, 'ol': true,
+            'p': true, 'pre': true, 'section': true, 'table': true, 'ul': true},
+      'rp': {'rp': true, 'rt': true},
+      'rt': {'rp': true, 'rt': true},
+      'tbody': {'tbody': true, 'tfoot': true},
+      'td': {'td': true, 'th': true},
+      'tfoot': {'tbody': true},
+      'th': {'td': true, 'th': true},
+      'thead': {'tbody': true, 'tfoot': true},
+      'tr': {'tr': true}
+    },
+    doNotIndent: {"pre": true},
+    allowUnquoted: true,
+    allowMissing: true,
+    caseFold: true
+  } : {
+    autoSelfClosers: {},
+    implicitlyClosed: {},
+    contextGrabbers: {},
+    doNotIndent: {},
+    allowUnquoted: false,
+    allowMissing: false,
+    caseFold: false
+  };
+  var alignCDATA = parserConfig.alignCDATA;
+
+  // Return variables for tokenizers
+  var type, setStyle;
+
+  function inText(stream, state) {
+    function chain(parser) {
+      state.tokenize = parser;
+      return parser(stream, state);
+    }
+
+    var ch = stream.next();
+    if (ch == "<") {
+      if (stream.eat("!")) {
+        if (stream.eat("[")) {
+          if (stream.match("CDATA[")) return chain(inBlock("atom", "]]>"));
+          else return null;
+        } else if (stream.match("--")) {
+          return chain(inBlock("comment", "-->"));
+        } else if (stream.match("DOCTYPE", true, true)) {
+          stream.eatWhile(/[\w\._\-]/);
+          return chain(doctype(1));
+        } else {
+          return null;
+        }
+      } else if (stream.eat("?")) {
+        stream.eatWhile(/[\w\._\-]/);
+        state.tokenize = inBlock("meta", "?>");
+        return "meta";
+      } else {
+        type = stream.eat("/") ? "closeTag" : "openTag";
+        state.tokenize = inTag;
+        return "tag bracket";
+      }
+    } else if (ch == "&") {
+      var ok;
+      if (stream.eat("#")) {
+        if (stream.eat("x")) {
+          ok = stream.eatWhile(/[a-fA-F\d]/) && stream.eat(";");
+        } else {
+          ok = stream.eatWhile(/[\d]/) && stream.eat(";");
+        }
+      } else {
+        ok = stream.eatWhile(/[\w\.\-:]/) && stream.eat(";");
+      }
+      return ok ? "atom" : "error";
+    } else {
+      stream.eatWhile(/[^&<]/);
+      return null;
+    }
+  }
+
+  function inTag(stream, state) {
+    var ch = stream.next();
+    if (ch == ">" || (ch == "/" && stream.eat(">"))) {
+      state.tokenize = inText;
+      type = ch == ">" ? "endTag" : "selfcloseTag";
+      return "tag bracket";
+    } else if (ch == "=") {
+      type = "equals";
+      return null;
+    } else if (ch == "<") {
+      state.tokenize = inText;
+      state.state = baseState;
+      state.tagName = state.tagStart = null;
+      var next = state.tokenize(stream, state);
+      return next ? next + " tag error" : "tag error";
+    } else if (/[\'\"]/.test(ch)) {
+      state.tokenize = inAttribute(ch);
+      state.stringStartCol = stream.column();
+      return state.tokenize(stream, state);
+    } else {
+      stream.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/);
+      return "word";
+    }
+  }
+
+  function inAttribute(quote) {
+    var closure = function(stream, state) {
+      while (!stream.eol()) {
+        if (stream.next() == quote) {
+          state.tokenize = inTag;
+          break;
+        }
+      }
+      return "string";
+    };
+    closure.isInAttribute = true;
+    return closure;
+  }
+
+  function inBlock(style, terminator) {
+    return function(stream, state) {
+      while (!stream.eol()) {
+        if (stream.match(terminator)) {
+          state.tokenize = inText;
+          break;
+        }
+        stream.next();
+      }
+      return style;
+    };
+  }
+  function doctype(depth) {
+    return function(stream, state) {
+      var ch;
+      while ((ch = stream.next()) != null) {
+        if (ch == "<") {
+          state.tokenize = doctype(depth + 1);
+          return state.tokenize(stream, state);
+        } else if (ch == ">") {
+          if (depth == 1) {
+            state.tokenize = inText;
+            break;
+          } else {
+            state.tokenize = doctype(depth - 1);
+            return state.tokenize(stream, state);
+          }
+        }
+      }
+      return "meta";
+    };
+  }
+
+  function Context(state, tagName, startOfLine) {
+    this.prev = state.context;
+    this.tagName = tagName;
+    this.indent = state.indented;
+    this.startOfLine = startOfLine;
+    if (Kludges.doNotIndent.hasOwnProperty(tagName) || (state.context && state.context.noIndent))
+      this.noIndent = true;
+  }
+  function popContext(state) {
+    if (state.context) state.context = state.context.prev;
+  }
+  function maybePopContext(state, nextTagName) {
+    var parentTagName;
+    while (true) {
+      if (!state.context) {
+        return;
+      }
+      parentTagName = state.context.tagName;
+      if (!Kludges.contextGrabbers.hasOwnProperty(parentTagName) ||
+          !Kludges.contextGrabbers[parentTagName].hasOwnProperty(nextTagName)) {
+        return;
+      }
+      popContext(state);
+    }
+  }
+
+  function baseState(type, stream, state) {
+    if (type == "openTag") {
+      state.tagStart = stream.column();
+      return tagNameState;
+    } else if (type == "closeTag") {
+      return closeTagNameState;
+    } else {
+      return baseState;
+    }
+  }
+  function tagNameState(type, stream, state) {
+    if (type == "word") {
+      state.tagName = stream.current();
+      setStyle = "tag";
+      return attrState;
+    } else {
+      setStyle = "error";
+      return tagNameState;
+    }
+  }
+  function closeTagNameState(type, stream, state) {
+    if (type == "word") {
+      var tagName = stream.current();
+      if (state.context && state.context.tagName != tagName &&
+          Kludges.implicitlyClosed.hasOwnProperty(state.context.tagName))
+        popContext(state);
+      if (state.context && state.context.tagName == tagName) {
+        setStyle = "tag";
+        return closeState;
+      } else {
+        setStyle = "tag error";
+        return closeStateErr;
+      }
+    } else {
+      setStyle = "error";
+      return closeStateErr;
+    }
+  }
+
+  function closeState(type, _stream, state) {
+    if (type != "endTag") {
+      setStyle = "error";
+      return closeState;
+    }
+    popContext(state);
+    return baseState;
+  }
+  function closeStateErr(type, stream, state) {
+    setStyle = "error";
+    return closeState(type, stream, state);
+  }
+
+  function attrState(type, _stream, state) {
+    if (type == "word") {
+      setStyle = "attribute";
+      return attrEqState;
+    } else if (type == "endTag" || type == "selfcloseTag") {
+      var tagName = state.tagName, tagStart = state.tagStart;
+      state.tagName = state.tagStart = null;
+      if (type == "selfcloseTag" ||
+          Kludges.autoSelfClosers.hasOwnProperty(tagName)) {
+        maybePopContext(state, tagName);
+      } else {
+        maybePopContext(state, tagName);
+        state.context = new Context(state, tagName, tagStart == state.indented);
+      }
+      return baseState;
+    }
+    setStyle = "error";
+    return attrState;
+  }
+  function attrEqState(type, stream, state) {
+    if (type == "equals") return attrValueState;
+    if (!Kludges.allowMissing) setStyle = "error";
+    return attrState(type, stream, state);
+  }
+  function attrValueState(type, stream, state) {
+    if (type == "string") return attrContinuedState;
+    if (type == "word" && Kludges.allowUnquoted) {setStyle = "string"; return attrState;}
+    setStyle = "error";
+    return attrState(type, stream, state);
+  }
+  function attrContinuedState(type, stream, state) {
+    if (type == "string") return attrContinuedState;
+    return attrState(type, stream, state);
+  }
+
+  return {
+    startState: function() {
+      return {tokenize: inText,
+              state: baseState,
+              indented: 0,
+              tagName: null, tagStart: null,
+              context: null};
+    },
+
+    token: function(stream, state) {
+      if (!state.tagName && stream.sol())
+        state.indented = stream.indentation();
+
+      if (stream.eatSpace()) return null;
+      type = null;
+      var style = state.tokenize(stream, state);
+      if ((style || type) && style != "comment") {
+        setStyle = null;
+        state.state = state.state(type || style, stream, state);
+        if (setStyle)
+          style = setStyle == "error" ? style + " error" : setStyle;
+      }
+      return style;
+    },
+
+    indent: function(state, textAfter, fullLine) {
+      var context = state.context;
+      // Indent multi-line strings (e.g. css).
+      if (state.tokenize.isInAttribute) {
+        if (state.tagStart == state.indented)
+          return state.stringStartCol + 1;
+        else
+          return state.indented + indentUnit;
+      }
+      if (context && context.noIndent) return CodeMirror.Pass;
+      if (state.tokenize != inTag && state.tokenize != inText)
+        return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
+      // Indent the starts of attribute names.
+      if (state.tagName) {
+        if (multilineTagIndentPastTag)
+          return state.tagStart + state.tagName.length + 2;
+        else
+          return state.tagStart + indentUnit * multilineTagIndentFactor;
+      }
+      if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
+      var tagAfter = textAfter && /^<(\/)?([\w_:\.-]*)/.exec(textAfter);
+      if (tagAfter && tagAfter[1]) { // Closing tag spotted
+        while (context) {
+          if (context.tagName == tagAfter[2]) {
+            context = context.prev;
+            break;
+          } else if (Kludges.implicitlyClosed.hasOwnProperty(context.tagName)) {
+            context = context.prev;
+          } else {
+            break;
+          }
+        }
+      } else if (tagAfter) { // Opening tag spotted
+        while (context) {
+          var grabbers = Kludges.contextGrabbers[context.tagName];
+          if (grabbers && grabbers.hasOwnProperty(tagAfter[2]))
+            context = context.prev;
+          else
+            break;
+        }
+      }
+      while (context && !context.startOfLine)
+        context = context.prev;
+      if (context) return context.indent + indentUnit;
+      else return 0;
+    },
+
+    electricInput: /<\/[\s\w:]+>$/,
+    blockCommentStart: "<!--",
+    blockCommentEnd: "-->",
+
+    configuration: parserConfig.htmlMode ? "html" : "xml",
+    helperType: parserConfig.htmlMode ? "html" : "xml"
+  };
+});
+
+CodeMirror.defineMIME("text/xml", "xml");
+CodeMirror.defineMIME("application/xml", "xml");
+if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
+  CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
+
+});
--- a/website/doc/API/examples/load-votable/index.gml
+++ b/website/doc/API/examples/load-votable/index.gml
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/javascript.js"></script>
+    <script type="text/javascript" src="../js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API example</h1>
+        <p class="title"></p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../../">API</a><span class="divider">/</span></li>
+      <li><a href="../">Examples</a><span class="divider">/</span></li>
+      <li class="active title"><li>
+    </ul>
+   
+    <p class="explain"></p>
+    <div id="binContainer"></div>
+
+    
+    
+
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript" src="../js/example-initialization.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        init('../configs/load-votable.json', '#binContainer');
+    });
+  </script>
+</body>
+</html>
--- a/website/doc/API/examples/overlay-image-layer/index.gml
+++ b/website/doc/API/examples/overlay-image-layer/index.gml
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    <link href="../css/codemirror.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+
+    <script type="text/javascript" src="<&CDS.jquery1.10.1,u>"></script>
+    <script type="text/javascript" src="../js/codemirror.js"></script>
+    <script type="text/javascript" src="../js/javascript.js"></script>
+    <script type="text/javascript" src="../js/xml.js"></script>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API example</h1>
+        <p class="title"></p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../../../../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../../../">Documentation</a> <span class="divider">/</span></li>
+      <li><a href="../../">API</a><span class="divider">/</span></li>
+      <li><a href="../">Examples</a><span class="divider">/</span></li>
+      <li class="active title"><li>
+    </ul>
+   
+    <p class="explain"></p>
+    <div id="binContainer"></div>
+
+    
+    
+
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <&CDS.piwikStats "aladin">
+
+  <script type="text/javascript" src="../js/example-initialization.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        init('../configs/overlay-image-layer.json', '#binContainer');
+    });
+  </script>
+</body>
+</html>
--- a/website/doc/API/index.gml
+++ b/website/doc/API/index.gml
@@ -0,0 +1,208 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    
+    
+    <style>
+    #imageSurveysList {font-size: 13px;}
+    
+    #imageSurveysList tr > td:first-child {font-weight: bold;}
+    </style>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite API reference</h1>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li><a href="../doc/">Documentation</a> <span class="divider">/</span></li>
+      <li class="active">API</li>
+    </ul>
+    
+    <div class="container content">
+    
+      <!-- Navigation bar -->
+      <div class="row">
+        <div class="span3">
+          <ul class="nav nav-tabs nav-stacked aladinlite-sidenav" data-spy="affix" data-offset-top="210">
+            <li><a href="#init">Initializing Aladin Lite</a></li>
+            <li><a href="#view">Managing the view</a></li>
+            <li><a href="#image-layers">Image layers</a></li>
+            <li><a href="#catalogue-layers">Catalogue layers</a></li>
+            <li><a href="#overlay-layers">Overlay layers</a></li>
+            <li><a href="#listeners">Listeners</a></li>
+            <li><a href="#misc">Misc</a></li>
+            <li><a href="#examples-list">API examples</a></li>
+          </ul>
+        </div>
+        
+        <div class="span9">
+        
+        <!-------------------------------------------------------------------->
+        <!-- Initializing Aladin Lite -->
+        <a name="init"></a>
+        <div class="page-header">
+          <h1>Initializing Aladin Lite</h1>
+        </div>
+        <h3>Aladin Lite creation</h3>
+        <p><b>A.aladin(&lt;container-div-selector&gt;, &lt;options&gt;?)</b></p>
+        <p>Creating an Aladin Lite instance is quite easy: after having inserted the <a href="http://aladin.u-strasbg.fr/AladinLite/doc/#embedding">embedding code</a> in your page, 
+        just call <code>var aladin = A.aladin('#aladin-lite-div');</code>. The variable <code>aladin</code> is a reference to the Aladin lite instance.
+        </p>
+        <p>Note that Aladin Lite view will automatically adapt if the container div is resized, as shown <a href="examples/AL-in-responsive-div/">in this example</a>.</p>
+        <h3>Initialization options</h3>
+        <p>The method takes an optional second argument which gives the initialization options as a key-value object. Possible options are:
+        <table class="table table-striped">
+            <thead>
+              <tr><th>Key name</th><th>Description</th><th>Default value</th></tr>
+            </thead>
+            <tbody>
+                <tr><td>target</td><td>Initial target, as a position or an object name resolved by Sesame</td><td>0 +0</td></tr>
+                <tr><td>cooFrame</td><td>Coordinate system: "ICRS" or "galactic"</td><td>"ICRS"</td></tr>
+                <tr><td>survey</td><td>Identifier of the initial image survey. See <a href="#image-layers">this section</a> for more details.</td><td>"P/DSS2/color"</td></tr>
+                <tr><td>fov</td><td>Initial value of the visible field of view, in decimal degrees</td><td>60</td></tr>
+                <tr><td>showReticle</td><td>If <code>true</code>, the reticle will be displayed</td><td>true</td></tr>
+                <tr><td>showZoomControl</td><td>If <code>true</code>, the zoom control GUI is displayed (plus/minus buttons)</td><td>true</td></tr>
+                <tr><td>showFullscreenControl</td><td>If <code>true</code>, the button to pass in full screen mode (at the top right of the interface) is displayed</td><td>true</td></tr>
+                <tr><td>showLayersControl</td><td>If <code>true</code>, the icon to open the layers controls is displayed</td><td>true</td></tr>
+                <tr><td>showGotoControl</td><td>If <code>true</code>, the icon to easily jump to a new position/object is displayed</td><td>true</td></tr>
+                <tr><td>showFrame</td><td>If <code>true</code>, coordinate are displayed (at the top left of the interface)</td><td>true</tr>
+                <tr><td>fullScreen</td><td>If <code>true</code>, Aladin Lite starts in "full screen" mode</td><td>false</td></tr>
+                <tr><td>reticleColor</td><td>Color of the reticle</td><td>"rgb(178, 50, 178)"</td></tr>
+                <tr><td>reticleSize</td><td>Size in pixels of the reticle</td><td>22</td></tr>
+            </tbody>
+          </table>
+        </p>
+        <p><a href="examples/AL-init-custom-options/">Example of Aladin Lite initialization with custom options</a></p>
+
+        <h3>Customizing location of GUI elements</h3>
+        <p>If you want to customize the location of the GUI elements (full screen icon, zoom controller, goto controller, layers controller), the easiest way is to 
+        override the CSS properties of the corresponding class (respectively .aladin-fullscreen, .aladin-zoomControl, .aladin-gotoControl, .aladin-layersControl).
+        </p>
+
+        <!-------------------------------------------------------------------->
+        <!-- Managing the view -->
+        <a name="view"></a>
+        <div class="page-header">
+          <h1>Managing the view</h1>
+        </div>
+
+        <h3>Getting information about the view</h3>
+        <p><code>aladin.getSize()</code> will return an array with the current dimension (width, height) of Aladin Lite view in pixels.</p>
+        <p><code>aladin.getFov()</code> returns an array with the current dimension on the sky (size in X, size in Y) of the view in decimal degrees.</p>
+        <p></p>
+
+        <h3>Updating view properties</h3>
+        <b>Setting the size of the FoV</b>
+        <p>Use <code>aladin.setFov()</code>
+        <p></p>
+
+        <b>Setting the current position of the center of the view</b>
+        <p>There are several methods to update the current position:</p>
+        
+
+
+
+        <!-------------------------------------------------------------------->
+        <!-- Image layers -->
+        <a name="image-layers"></a>
+        <div class="page-header">
+          <h1>Image layers</h1>
+        </div>
+
+        <h3>Retrieving the base image layer</h3>
+        <p>Calling <code>aladin.getBaseImageLayer()</code> will return an ImageLayer object corresponding to the base image layer.</p>
+
+        <h3>Updating the color map</h3>
+        <p>Call <code>getColorMap()</code> on an ImageLayer object to retrieve its color map.<br/>
+        Once retrieved, call <code>update(&lt;color-map-name&gt;)</code> to set a new color map. Recognized values are:
+        <ul>
+            <li><i>grayscale</i></li>
+            <li><i>eosb</i></li>
+            <li><i>rainbow</i></li>
+            <li><i>native</i> to go back to the original image color map</li>
+        </ul>
+        </p>
+        
+        <p>Example: <a href="examples/color-map/">setting a rainbow color map</a></p>
+
+        <!-------------------------------------------------------------------->
+        <!-- Catalogue layers -->
+        <a name="catalogue-layers"></a>
+        <div class="page-header">
+          <h1>Catalogue layers</h1>
+        </div>
+
+        <h3>Loading a VOTable</h3>
+        <p>Calling <code>A.catalogFromURL(&lt;votable-URL&gt;, &lt;options&gt;?)</code> will return a Catalog object which can then be added</p>
+
+        <p>Example: <a href="examples/load-votable/">loading a VOTable from VizieR</a></p>
+
+        <!-------------------------------------------------------------------->
+        <!-- Overlay layers -->
+        <a name="overlay-layers"></a>
+        <div class="page-header">
+          <h1>Overlay layers</h1>
+        </div>
+        <p></p>
+
+        <!-------------------------------------------------------------------->
+        <!-- Listeners -->
+        <a name="listeners"></a>
+        <div class="page-header">
+          <h1>Listeners</h1>
+        </div>
+        <p></p>
+
+        <!-------------------------------------------------------------------->
+        <!-- Misc -->
+        <a name="misc"></a>
+        <div class="page-header">
+          <h1>Misc</h1>
+        </div>
+        <p></p>
+        
+        <!-------------------------------------------------------------------->
+        <!-- Full list of examples -->
+        <a name="examples-list"></a>
+        <div class="page-header">
+          <h1>Full list of examples</h1>
+        </div>
+        <p><a href="examples/">Click here</a> to access to the full list of examples illustrating Aladin Lite API.</p>
+        
+        </div> <!-- /span3 -->
+      </div> <!-- /row -->
+    
+    </div>
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+  
+  <script src="/assets/js/bootstrap-affix.js"></script>
+  <script type="text/javascript">
+  $(document).ready(function() {
+      $.ajax({
+        url: "http://aladin.u-strasbg.fr/java/nph-aladin.pl",
+        data: {"frame": "aladinLiteDic"},
+        method: 'GET',
+        dataType: 'jsonp',
+        success: function(surveys) {
+            surveys = surveys.sort(function(a, b) {return a.order > b.order ? 1 : -1;});
+            var content = "";
+            for (var k=0, len=surveys.length; k<len; k++) {
+                content += '<tr><td>' + surveys[k].id + '</td><td>' + surveys[k].name + '</td></tr>';
+            }
+            $('#imageSurveysList tbody').append(content); 
+        }
+      });
+  });
+  </script>
+  <&CDS.piwikStats "aladin">
+</body>
+</html>
--- a/website/doc/API/js/jquery-1.8.3.min.js
+++ b/website/doc/API/js/jquery-1.8.3.min.js
--- a/website/doc/API/js/jquery.snippet.min.js
+++ b/website/doc/API/js/jquery.snippet.min.js
--- a/website/doc/css/bootstrap.min.css
+++ b/website/doc/css/bootstrap.min.css
--- a/website/doc/css/img/alu.png
+++ b/website/doc/css/img/alu.png
--- a/website/doc/css/img/px.png
+++ b/website/doc/css/img/px.png
--- a/website/doc/css/img/random_grey.png
+++ b/website/doc/css/img/random_grey.png
--- a/website/doc/css/jquery.snippet-peachpuff.css
+++ b/website/doc/css/jquery.snippet-peachpuff.css
@@ -0,0 +1,42 @@
+/*---------- peachpuff Styles ---------*/
+.sh_peachpuff{background:none; padding:0; margin:0; border:0 none;}.sh_peachpuff .sh_sourceCode{background-color:#ffefe1;color:#000;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_keyword{color:#a52a2a;font-weight:bold;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_type{color:#2e8b57;font-weight:bold;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_string{color:#c00058;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_regexp{color:#c00058;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_specialchar{color:#6a5acd;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_comment{color:#406090;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_number{color:#c00058;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_preproc{color:#cd00cd;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_function{color:#521cc7;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_url{color:#c00058;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_date{color:#a52a2a;font-weight:bold;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_time{color:#a52a2a;font-weight:bold;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_file{color:#a52a2a;font-weight:bold;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_ip{color:#c00058;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_name{color:#c00058;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_variable{color:#275fec;font-weight:bold;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_oldfile{color:#6a5acd;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_newfile{color:#c00058;font-weight:normal;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_difflines{color:#a52a2a;font-weight:bold;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_selector{color:#275fec;font-weight:bold;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_property{color:#a52a2a;font-weight:bold;font-style:normal;}.sh_peachpuff .sh_sourceCode .sh_value{color:#c00058;font-weight:normal;font-style:normal;}
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:10px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:10px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:25px;}
+* html .snippet-wrap .snippet-hide {bottom:25px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:0; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:0 5px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1em;line-height:1.8em;overflow:auto;position:relative;
+-moz-border-radius:15px;
+-webkit-border-radius:15px;
+border-radius:15px;
+box-shadow: 2px 2px 5px #000;
+-moz-box-shadow: 2px 2px 5px #000;
+-webkit-box-shadow: 2px 2px 5px #000;}
+.snippet-wrap pre.snippet-textonly {padding:2em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
+* html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
+.snippet-reveal pre.sh_sourceCode {padding:.5em 1em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:1.5em;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:.6em 1em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:3em;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:-3em; padding-left:6px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
+.snippet-wrap li.box-top {border-width:1px 1px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 1px 1px !important;}
+.snippet-wrap li.box-mid {border-width:0 1px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:18px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:27px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:27px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
--- a/website/doc/embedding.html
+++ b/website/doc/embedding.html
@@ -0,0 +1,316 @@
+<html>
+
+<head>
+  <link href="css/bootstrap.min.css" rel="stylesheet">
+  <link href="css/jquery.snippet-peachpuff.css" rel="stylesheet">
+  
+  <style>
+    #options {border: #000 solid 1px;padding: 10px;}
+    #availableSurveysSelect {width: 350px;}
+    .dimension {width: 80px;}
+    .form-horizontal .control-group {margin-bottom: 5px;}
+    .form-horizontal .control-label {padding-top: 5px;}
+    body {margin: 15px;}
+    input[type="number"], input[type="text"] {height: initial;}
+    #embedding-code pre {height: 360px;font-size: 12px;}
+  </style>
+
+<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
+<script type="text/javascript" src="js/jquery.snippet.min.js"></script>
+    
+</head>
+
+<body>
+    Choose options:
+    <form id="options" class="form-horizontal">
+
+     <div class="control-group">
+        <label class="control-label" for="width">Width</label>
+          <div class="controls">
+            <input id="width" class="dimension" type="number" value="400" pattern="\d*"> px
+          </div>
+      </div>
+     <div class="control-group">
+        <label class="control-label" for="height">Height</label>
+          <div class="controls">
+            <input id="height" class="dimension" type="number" value="400" pattern="\d*"> px
+          </div>
+      </div>
+      <div class="control-group">
+        <label class="control-label" for="availableSurveysSelect">Image survey</label>
+          <div class="controls">
+            <select id="availableSurveysSelect">
+
+            </select>
+          </div>
+      </div>
+      <div class="control-group">
+        <label class="control-label" for="target">Initial location</label>
+          <div class="controls">
+            <input id="target" type="text" placeholder="Position or object name">
+          </div>
+      </div>
+      <div class="control-group">
+        <label class="control-label" for="zoom">Initial FoV</label>
+          <div class="controls">
+            <input id="zoom" class="dimension" type="text" value="60" > degrees
+          </div>
+      </div>
+      <!--
+      <div class="control-group">
+        <div class="controls">
+          <label class="checkbox">
+            <input id="loadVOTable" type="checkbox"> Load VOTable
+          </label>
+        </div>
+      <div class="control-group">
+        <div class="controls">
+          <label class="checkbox">
+            <input id="loadVOTable" type="text" value="http://">
+          </label>
+        </div>
+      </div>
+      -->
+    </form>
+    
+    Then copy/paste the following code in your page:
+    <div id="embedding-code">
+      <pre></pre>
+    </div>
+</body>
+
+<script>
+$(document).ready(function() {
+
+    var availableSurveys;
+
+    var generateEmbeddedCode = function() {
+        var w, h;
+        w = parseInt($('#width').val());
+        h = parseInt($('#height').val());
+        if (isNaN(w)) {
+            w = 400;
+        }
+        if (isNaN(h)) {
+            h = 400;
+        }
+        
+        var zoom = parseFloat($('#zoom').val());
+        var target = $('#target').val();
+        
+
+        var surveyId = $('#availableSurveysSelect').find(':selected').val();
+        
+        var options = '{survey: "' + surveyId + '"'
+        if (!isNaN(zoom)) {
+            options += ', fov:' + zoom;
+        }            
+        if (target.length!="") {
+            options += ', target: "' + target + '"';
+        }
+        options += '}';
+        
+        var code = "&lt;!-- include Aladin Lite CSS file in the head section of your page --&gt;\n" +
+                   "&lt;link rel=\"stylesheet\" href=\"http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css\" /&gt;\n&nbsp;\n" +
+                   "&lt;!-- you can skip the following line if your page already integrates the jQuery library --&gt;\n" + 
+                   "&lt;script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-1.9.1.min.js\" charset=\"utf-8\"&gt;&lt;/sc" + "ript&gt;\n&nbsp;\n" +
+                   "&lt;!-- insert this snippet where you want Aladin Lite viewer to appear and after the loading of jQuery --&gt;\n\n" +
+                   "&lt;div id=\"aladin-lite-div\" style=\"width:" + w + "px;height:" + h + "px;\"&gt;&lt;/div&gt;\n" +
+                   "&lt;script type=\"text/javascript\" src=\"http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js\" charset=\"utf-8\"&gt;&lt;/sc" + "ript&gt;\n" +
+                   "&lt;script type=\"text/javascript\"&gt;\n" +
+                   "    var aladin = A.aladin('#aladin-lite-div', " + options + ");\n" +
+                   "&lt;/sc" + "ript&gt;";
+        $("#embedding-code").empty();          
+        $("#embedding-code").html("<pre>" + code.replace("<", "&lt;").replace(">", "&gt;") + "</pre>");
+        $("#embedding-code pre").snippet("html", {style: "peachpuff", menu: false, showNum: false});
+
+
+    };
+    
+    var getSurveyFromId = function(id) {
+        for (var k=0, len=availableSurveys.length; k<len; k++) {
+            if (id==surveys[k].id) {
+                return surveys[k];
+            }
+        }
+        
+        return null;
+    }
+    
+    var fillAvailableSurveysDropdown = function(surveys) {
+        surveys = surveys.sort(function(a, b) {return a.order > b.order ? 1 : -1;});
+        var str = "";
+        var s;
+        for (var k=0, len=surveys.length; k<len; k++) {
+            s = surveys[k];
+            var selected = "";
+            if (s.id=="P/DSS2/color") {
+                selected = "selected";
+            }
+            
+            str += "<option value='" + s.id + "' " + selected + " >" + s.name + "</option>\n";
+        }
+        $('#availableSurveysSelect').append(str);
+    }
+    
+    var callbackFunctionSuccess = function(data) {
+        availableSurveys = data;
+        
+        fillAvailableSurveysDropdown(availableSurveys);
+        generateEmbeddedCode();
+    };
+    
+    var callbackFunctionError = function() {
+        // default list of surveys
+        availableSurveys = [
+                            {
+                                "id": "P/2MASS/color",
+                                "description": "2MASS colored",
+                                "url": "http://alasky.u-strasbg.fr/2MASS/Color",
+                                "copyright": "from IPAC/NASA - healpixed by CDS",
+                                "copyrightUrl": "http://www.ipac.caltech.edu/2mass/",
+                                "name": "2MASS colored",
+                                "treePath": "Image/Infrared/2MASS",
+                                "maxOrder": 9,
+                                "frame": "galactic",
+                                "order": "04-04-00"
+                             },
+                             {
+                                "id": "P/DSS2/color",
+                                "description": "DSS2 optical HEALPix survey, color",
+                                "url": "http://alaskybis.u-strasbg.fr/DssColor",
+                                "copyright": "Digitized Sky Survey - STScI/NASA, Healpixed by CDS",
+                                "copyrightUrl": "http://archive.stsci.edu/dss/acknowledging.html",
+                                "name": "DSS colored",
+                                "order": "00",
+                                "treePath": "Image/Optical/DSS",
+                                "maxOrder": 9,
+                                "frame": "galactic"
+                             },
+                             {
+                                "id": "P/DSS2/red",
+                                "description": "DSS2-F North and DSS2-R South merged survey (Red)",
+                                "url": "http://alaskybis.u-strasbg.fr/DSS/DSS2Merged",
+                                "copyright": "Digitized Sky Survey - STScI/NASA, Healpixed by CDS",
+                                "copyrightUrl": "http://archive.stsci.edu/dss/acknowledging.html",
+                                "name": "DSS2 Red (F+R)",
+                                "treePath": "Image/Optical/DSS",
+                                "maxOrder": 9,
+                                "frame": "galactic",
+                                "order": "03-01-02"
+                             },
+                             {
+                                "id": "P/Finkbeiner",
+                                "description": "Finkbeiner Halpha composite survey",
+                                "url": "http://alasky.u-strasbg.fr/FinkbeinerHalpha",
+                                "copyright": "Composite map by Douglas Finkbeiner (2004).",
+                                "maxOrder": 3,
+                                "frame": "galactic",
+                                "treePath": "Image/Line/Halpha",
+                                "name": "Halpha",
+                                "order": "06-03-G0"
+                             },
+                             {
+                                "id": "P/GALEXGR6AIS/color",
+                                "description": "GALEX GR6 AIS - vsn02 - Color composition",
+                                "url": "http://alasky.u-strasbg.fr/GALEX/GR6-02-Color",
+                                "copyright": "from STScI (NASA) - healpixed by CDS",
+                                "treePath": "Image/UV/GALEX-AIS",
+                                "copyrightUrl": "http://galex.stsci.edu/GR6/",
+                                "name": "GALEX AIS Colored",
+                                "maxOrder": 8,
+                                "frame": "galactic",
+                                "order": "02-01-03"
+                             },
+                             {
+                                "id": "P/IRAC/color",
+                                "description": "IRAC color survey in Healpix",
+                                "url": "http://alasky.u-strasbg.fr/SpitzerI1I2I4color",
+                                "copyright": "Spitzer mission - JPL/NASA",
+                                "name": "IRAC color I1,I2,I4 - (GLIMPSE, SAGE, SAGE-SMC, SINGS)",
+                                "order": "04-03-00",
+                                "treePath": "Image/Infrared/Spitzer",
+                                "maxOrder": 3,
+                                "frame": "galactic"
+                             },
+                             {
+                                "id": "P/IRIS/color",
+                                "description": "IRAS-IRIS colored",
+                                "url": "http://alasky.u-strasbg.fr/IRISColor",
+                                "name": "IRAS-IRIS colored",
+                                "treePath": "Image/Infrared/IRAS",
+                                "maxOrder": 3,
+                                "frame": "galactic",
+                                "order": "04-02-01"
+                             },
+                             {
+                                "id": "P/Mellinger/color",
+                                "description": "Mellinger optical survey, color",
+                                "url": "http://alaskybis.u-strasbg.fr/MellingerRGB",
+                                "copyright": "(c) Axel Mellinger. Permission is granted for use in research and personal,non-commercial use. Please contact Axel Mellinger for permission for other use",
+                                "name": "Mellinger colored",
+                                "treePath": "Image/Optical",
+                                "maxOrder": 4,
+                                "frame": "galactic",
+                                "order": "03-03"
+                             },
+                             {
+                                "id": "P/SDSS7/color",
+                                "description": "SDSS 7 color",
+                                "url": "http://alaskybis.u-strasbg.fr/SDSS/Color",
+                                "copyright": "SLOAN Digitized Sky Survey - Healpixed by CDS",
+                                "copyrightUrl": "http://www.sdss.org/",
+                                "name": "SDSS colored",
+                                "order": "03-02",
+                                "treePath": "Image/Optical",
+                                "maxOrder": 10,
+                                "frame": "galactic"
+                             },
+                             {
+                                "id": "P/XMM/EPIC",
+                                "description": "XMM-Newton stacked EPIC images (no phot. normalization)",
+                                "url": "http://saada.u-strasbg.fr/xmmallsky",
+                                "copyright": "SSC/XMM-Newton",
+                                "name": "XMM-Newton stacked EPIC images (no phot. normalization)",
+                                "treePath": "Image/X",
+                                "maxOrder": 3,
+                                "frame": "galactic",
+                                "order": "01-01"
+                             },
+                          ];
+        
+        fillAvailableSurveysDropdown(availableSurveys);
+        generateEmbeddedCode();
+    };
+    
+    // retrieve available surveys
+    $.ajax({
+        url: "http://aladin.u-strasbg.fr/java/nph-aladin.pl",
+        data: {"frame": "aladinLiteDic"},
+        method: 'GET',
+        dataType: 'jsonp',
+        success: callbackFunctionSuccess,
+        error: callbackFunctionError
+    });
+    
+    // various listeners
+    $('#width').on("change keyup", function() {
+        generateEmbeddedCode();
+    });
+    $('#height').on("change keyup", function() {
+        generateEmbeddedCode();
+    });
+    $('#zoom').on("change keyup", function() {
+        generateEmbeddedCode();
+    });
+    $('#target').on("change keyup", function() {
+        generateEmbeddedCode();
+    });
+    $('#availableSurveysSelect').change(function() {
+        generateEmbeddedCode();
+    });
+    
+});
+</script>
+
+</html>
--- a/website/doc/examples/footprints.html
+++ b/website/doc/examples/footprints.html
@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+<head>
+<style type="text/css">
+#footprintTable tr:hover {
+    cursor: pointer;
+    background: #dddddd;
+}
+</style>
+<link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+</head>
+
+<body>
+
+
+<script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v1/jquery-1.9.1.min.js" charset="utf-8"></script>
+
+Footprints extracted from <a href="http://cxc.harvard.edu/cda/footprint/cdaview_help.html">Chandra Footprint service</a> (in red) and <a href="http://hla.stsci.edu/">HLA</a> SIAP service (in blue).
+<br/>
+Hover one of the row of the table to highlight the corresponding footprint.
+<br/><br/>
+<div>
+  <!-- insert this snippet where you want Aladin Lite viewer to appear and after the loading of jQuery -->
+  <div style="position:fixed">
+    <div id="aladin-lite-div" style="width:500px;height:400px;"></div>
+  </div>
+  <div style="margin-left: 510px;">
+    <table id="footprintTable">
+      <thead>
+        <tr><th></th><th>Origin</th><th>RA</th><th>Dec</th><th>Image access</th></tr>
+      </thead>
+      <tbody>
+        <tr><td><input type="checkbox" checked></td><td>Chandra</td><td>180.47375</td><td>-18.8765277777778</td><td><a href="http://cxc.harvard.edu/cgi-gen/cda/get_image.pl?obsid=315&imagetype=fits&resole>ution=low">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>Chandra</td><td>12:01:53.70</td><td>-18:52:35.5</td><td><a href="http://cxc.harvard.edu/cgi-gen/cda/get_image.pl?obsid=315&imagetype=fits&resolution=low">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>Chandra</td><td>12:01:53.70</td><td>-18:52:35.5</td><td><a href="http://cxc.harvard.edu/cgi-gen/cda/get_image.pl?obsid=315&imagetype=fits&resolution=low">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>Chandra</td><td>12:01:53.70</td><td>-18:52:35.5</td><td><a href="http://cxc.harvard.edu/cgi-gen/cda/get_image.pl?obsid=3040&imagetype=fits&resolution=low">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>Chandra</td><td>12:01:53.70</td><td>-18:52:35.5</td><td><a href="http://cxc.harvard.edu/cgi-gen/cda/get_image.pl?obsid=3040&imagetype=fits&resolution=low">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>Chandra</td><td>12:01:53.70</td><td>-18:52:35.5</td><td><a href="http://cxc.harvard.edu/cgi-gen/cda/get_image.pl?obsid=3040&imagetype=fits&resolution=low">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>HLA</td><td>12:02:06.37</td><td>-18:51:57.8</td><td><a href="http://hla.stsci.edu/cgi-bin/getdata.cgi?dataset=HST_10187_03_ACS_WFC_total">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>HLA</td><td>12:01:50.72</td><td>-18:53:15.2</td><td><a href="http://hla.stsci.edu/cgi-bin/getdata.cgi?dataset=HST_10188_10_ACS_WFC_F435W">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>HLA</td><td>12:01:43.03</td><td>-19:00:06.9</td><td><a href="http://hla.stsci.edu/cgi-bin/getdata.cgi?dataset=HST_10188_21_ACS_WFC_F550M">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>HLA</td><td>12:01:32.23</td><td>-19:00:59.3</td><td><a href="http://hla.stsci.edu/cgi-bin/getdata.cgi?dataset=HST_10188_30_ACS_WFC_F550M">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>HLA</td><td>12:01:58.97</td><td>-18:47:04.3</td><td><a href="http://hla.stsci.edu/cgi-bin/getdata.cgi?dataset=hst_07553_0y_wfpc2_total_wf">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>HLA</td><td>12:01:34.29</td><td>-18:48:41.2</td><td><a href="http://hla.stsci.edu/cgi-bin/getdata.cgi?dataset=hst_08027_01_wfpc2_total_wf">URL</a></td></tr>
+        <tr><td><input type="checkbox" checked></td><td>HLA</td><td>12:01:51.39</td><td>-18:52:33.7</td><td><a href="http://hla.stsci.edu/cgi-bin/getdata.cgi?dataset=hst_11962_11_wfpc2_total_wf">URL</a></td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+<script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
+<script type="text/javascript">
+    var aladin = $.aladin('#aladin-lite-div', {survey: "P/DSS2/color", target: "12 01 53.170 -18 52 37.92", zoom: 0.5});
+
+    var stcsArrayChandra = ['Polygon J2000 180.74436 -18.90167 180.75044 -18.90167 180.78824 -18.76744 180.78823 -18.76191 180.78822 -18.76185 180.64612 -18.72635 180.64003 -18.72635 180.60216 -18.86057 180.60216 -18.86059 180.60216 -18.86613', 'Polygon J2000 180.52285 -18.96682 180.52893 -18.96682 180.52896 -18.96682 180.56694 -18.83220 180.56694 -18.82666 180.56694 -18.82665 180.42501 -18.79073 180.41892 -18.79073 180.41892 -18.79074 180.38081 -18.92533 180.38081 -18.93087 180.38083 -18.93089', 'Polygon J2000 180.49008 -19.10418 180.49014 -19.10418 180.52818 -18.96956 180.52818 -18.96402 180.38612 -18.92807 180.38004 -18.92807 180.34185 -19.06265 180.34185 -19.06819 180.34190 -19.06822 180.48400 -19.10418', 'Polygon J2000 180.72458 -18.97053 180.73117 -18.97053 180.79180 -18.84372 180.79179 -18.83775 180.79179 -18.83773 180.65769 -18.78069 180.65110 -18.78069 180.59040 -18.90748 180.59040 -18.90749 180.59040 -18.91346', 'Polygon J2000 180.66231 -19.10061 180.66890 -19.10061 180.66891 -19.10060 180.72957 -18.97379 180.72958 -18.97378 180.72957 -18.96781 180.59570 -18.91010 180.58911 -18.91010 180.52833 -19.03689 180.52834 -19.04286', 'Polygon J2000 180.55712 -18.87059 180.56371 -18.87059 180.62437 -18.74362 180.62437 -18.73766 180.62436 -18.73765 180.49033 -18.68021 180.49032 -18.68021 180.48373 -18.68021 180.42300 -18.80714 180.42300 -18.81311'];
+    var stcsArrayHLA = ['Polygon J2000 180.50217550 -18.83468380 180.49063840 -18.89034230 180.52065280 -18.89390640 180.53218020 -18.83824610 Polygon J2000  180.55014260 -18.89687470 180.56230260 -18.84201220 180.53327000 -18.83878300 180.52110060 -18.89364360', 'Polygon J2000 180.42780530 -18.89193710 180.45438210 -18.90557680 180.45442265 -18.90551638 180.45519270 -18.90591150 180.45533181 -18.90570425 180.48071410 -18.91848920 180.48075191 -18.91843448 180.48152580 -18.91882420 180.51393380 -18.87191050 180.48813680 -18.85891900 180.48809779 -18.85897547 180.48732500 -18.85858620 180.47425057 -18.87751178 180.48731400 -18.85803820 180.46074110 -18.84440270 180.46069943 -18.84446480 180.45993060 -18.84407020 180.42784589 -18.89187664', 'Polygon J2000 180.41895388 -19.02839061 180.41888520 -19.02856220 180.44787380 -19.03682620 180.44794243 -19.03665467 180.46909480 -18.98376910 180.46890989 -18.98371641 180.46897870 -18.98354430 180.43999800 -18.97528350 180.41876870 -19.02833780 Polygon J2000  180.38970430 -19.01984470 180.38989272 -19.01989699 180.38982100 -19.02006910 180.41790410 -19.02786030 180.41797619 -19.02768818 180.43962560 -18.97569710 180.43943709 -18.97564483 180.43950920 -18.97547160 180.41143360 -18.96768360', 'Polygon J2000 180.36880709 -19.04023812 180.39881270 -18.99209170 180.39864047 -18.99201452 180.39873630 -18.99186070 180.37229610 -18.98000890 180.34218910 -19.02830480 180.34236160 -19.02838215 180.34226610 -19.02853530 180.36871160 -19.04039130 Polygon J2000  180.36956410 -19.04122990 180.39682600 -19.05368700 180.39691847 -19.05353399 180.42658270 -19.00443120 180.42641381 -19.00435405 180.42650660 -19.00420040 180.39925030 -18.99174740 180.36948740 -19.04099940 180.36965667 -19.04107677', 'Polygon J2000 180.48079483 -18.78685179 180.46896000 -18.78591000 180.46700500 -18.80795300 180.49031000 -18.80980500 180.49031749 -18.80972062 180.51149700 -18.81120600 180.51302110 -18.79172967 180.51322600 -18.79174300 180.51482700 -18.76968300 180.51474632 -18.76967775 180.49399237 -18.76832698 180.49304103 -18.76826501 180.49150600 -18.76816500 180.49068930 -18.77939744 180.48146300 -18.77871500', 'Polygon J2000 180.41471600 -18.79492900 180.39886100 -18.77867800 180.38167900 -18.79370000 180.38174044 -18.79376300 180.36627800 -18.80754800 180.38042392 -18.82176483 180.38027500 -18.82189900 180.38195047 -18.82356490 180.39638300 -18.83791300 180.41331600 -18.82265500 180.40511520 -18.81449956 180.41187800 -18.80851700 180.40599014 -18.80255660', 'Polygon J2000 180.45583700 -18.90148800 180.45590483 -18.90145843 180.45593517 -18.90152071 180.45596600 -18.90158400 180.45610049 -18.90152537 180.45613100 -18.90158800 180.47738100 -18.89232000 180.47734301 -18.89224199 180.49655200 -18.88364900 180.48772929 -18.86599325 180.48791500 -18.86590900 180.47781200 -18.84597000 180.47774665 -18.84599964 180.47768300 -18.84587400 180.47755129 -18.84593374 180.47751900 -18.84587000 180.45881261 -18.85435501 180.45868019 -18.85441507 180.45642900 -18.85543600 180.46157136 -18.86559001 180.45318500 -18.86930300 180.45684402 -18.87669376 180.44618607 -18.88134055 180.44605200 -18.88139900'];
+    var footprintsArrayChandra = [];
+    var footprintsArrayHLA = [];
+
+    var curFp = null;
+
+    for (var k=0, len=stcsArrayChandra.length; k<len; k++) {
+        footprintsArrayChandra.push(aladin.createFootprintsFromSTCS(stcsArrayChandra[k]));
+    }
+    var chandraOverlay = aladin.createOverlay();
+    aladin.addOverlay(chandraOverlay);
+    for (var k=0, len=footprintsArrayChandra.length; k<len; k++) {
+        chandraOverlay.addFootprints(footprintsArrayChandra[k]);
+    }
+
+    for (var k=0, len=stcsArrayHLA.length; k<len; k++) {
+        footprintsArrayHLA.push(aladin.createFootprintsFromSTCS(stcsArrayHLA[k]));
+    }
+    var hlaOverlay = aladin.createOverlay({color: '#4484ff'});
+    aladin.addOverlay(hlaOverlay);
+    for (var k=0, len=footprintsArrayHLA.length; k<len; k++) {
+        hlaOverlay.addFootprints(footprintsArrayHLA[k]);
+    }
+
+    $('#footprintTable tbody tr').mouseenter(function() {
+        //console.log($('#dataTable tr').index(this));
+        var idx = $('#footprintTable tbody tr').index(this)
+        if (curFp) {
+            for (var k=0, len=curFp.length; k<len; k++) {
+                curFp[k].deselect();
+            }
+        }
+        var fp = null;
+        if (idx<footprintsArrayChandra.length) {
+            fp = footprintsArrayChandra[idx];
+        }
+        else {
+            idx = idx - footprintsArrayChandra.length;
+            fp = footprintsArrayHLA[idx];
+        }
+        if (fp) {
+            for (var k=0, len=fp.length; k<len; k++) {
+                fp[k].select();
+            }
+            curFp = fp;
+        }
+    });
+    $('#footprintTable tbody tr').mouseleave(function() {
+       if (curFp) {
+            for (var k=0, len=curFp.length; k<len; k++) {
+                curFp[k].deselect();
+            }
+       } 
+    });
+
+    // listener on checkboxes
+    var cbs = $('#footprintTable tbody tr td input');
+    for (var i=0; i<cbs.length; i++) {
+        $(cbs[i]).change(function () {
+           var idx = $('#footprintTable tbody tr td input').index(this)
+
+           var isChecked = $(this).is(':checked');
+           if (idx<footprintsArrayChandra.length) {
+               fp = footprintsArrayChandra[idx];
+           }
+           else {
+               idx = idx - footprintsArrayChandra.length;
+               fp = footprintsArrayHLA[idx];
+           }
+           if (isChecked) {
+            for (var k=0, len=fp.length; k<len; k++) {
+                fp[k].show();
+            }
+           }
+        else {
+            for (var k=0, len=fp.length; k<len; k++) {
+                fp[k].hide();
+            }
+        }
+        });
+    }
+
+</script>
+
+</body>
+</html>
--- a/website/doc/examples/full-screen.html
+++ b/website/doc/examples/full-screen.html
@@ -0,0 +1,32 @@
+<!doctype html>
+
+<html>
+
+  <head>
+    <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+    
+    html, body, #aladin-lite-div {
+        height: 100%;
+    }
+    </style>
+    
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+  </head>
+  
+  <body>
+  <script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v1/jquery-1.9.1.min.js" charset="utf-8"></script>
+  <!-- insert this snippet where you want Aladin Lite viewer to appear and after the loading of jQuery -->
+  <div id="aladin-lite-div"></div>
+  <script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
+  <script type="text/javascript">
+  var aladin = $.aladin('#aladin-lite-div', {survey: "P/DSS2/red", zoom: 1, target: "21 35 23.50 +57 28 10"});
+  </script>
+  </body>
+
+</html>
--- a/website/doc/examples/selection-demo.html
+++ b/website/doc/examples/selection-demo.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Aladin Lite selection demo</title>
+<link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+  </head>
+  
+  <body>
+    <div>
+      <div  id="aladinDiv" style="width:500px;height:500px;float: left;margin-right: 20px;"></div>
+    
+      <div style="overflow: hidden;">
+        <button id="selectBtn">Start selection</button>
+        <div id="explain"></div>
+      </div>
+    </div>
+    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+
+    <script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
+
+    <script>
+    // Aladin Lite initialization
+    var aladin = $.aladin('#aladinDiv', {target: 'M41', zoom: 0.4, cooFrame: 'J2000', showControl: true, survey: 'P/DSS2/color'});
+    // load and add SIMBAD tabular data
+    var cat = aladin.createCatalogFromVOTable('http://cdsxmatch.u-strasbg.fr/QueryCat/QueryCat?catName=SIMBAD&mode=cone&pos=M41&r=12arcmin&format=votable&limit=1000');
+    aladin.addCatalog(cat);
+    // what we do when objects are selected
+    aladin.on('select', function(sources) {
+        var html = '<pre>Selected objects:\n';
+        var s;
+        for (var k=0; k<sources.length; k++) {
+            s = sources[k];
+            s.select();
+            if (s.data && s.data['main_id']) {
+                html += '\n' + s.data['main_id'];
+            }
+            else {
+                html += '\nUnknown';
+            }
+        }
+        html += '</pre>';
+        $('#explain').html(html);
+    });
+    
+    // bind selectBtn
+    $(document).ready(function() {
+        $('#selectBtn').click(function() {
+             cat.deselectAll();
+             $('#explain').html("Drag a rectangle in Aladin Lite view to select some objects");
+             // start selection
+             aladin.select();
+        });
+       
+    });
+    </script>
+
+
+  </body>
+</html>
--- a/website/doc/examples/sources-overlaid.html
+++ b/website/doc/examples/sources-overlaid.html
@@ -0,0 +1,224 @@
+<!doctype html>
+<html><head><meta http-equiv="Content-Type" content="text/html; >
+<title>VizieR</title>
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<link href="http://cdsweb.u-strasbg.fr/cds-navbar-resources/css/cdshead.min.css" rel="stylesheet">
+<script type="text/javascript" src="http://cdsweb.u-strasbg.fr/cds-navbar-resources/js/jquery-1.7.1.min.js"></script>
+<script type="text/javascript">var jqMenu = jQuery.noConflict();</script>
+<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+
+<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
+
+<script type="text/javascript" src="http://cdsweb.u-strasbg.fr/cds-navbar-resources/js/cdsmenu.min.js"></script>
+<meta name="robots" content="index,nofollow"><link rel="stylesheet" type="text/css" href="http://vizier.u-strasbg.fr/vizier/lib/sortable/tablesort.css"><link rel="stylesheet" type="text/css" href="http://vizier.u-strasbg.fr/vizier/vizier.css">
+<link rel="stylesheet" type="text/css" href="http://vizier.u-strasbg.fr/vizier/VizieR/navigbar/naviginfo.css">
+<meta name="description" content="VizieR database (astronomical catalogues and large surveys from CDS)">
+<meta rev="made" href="mailto:francois@astro.u-strasbg.fr">
+<link type="application/rss+xml" rel="alternate" href="http://cdsweb.u-strasbg.fr/news/rss.php?fn_category=4" title="VizieR CDS news">
+<link rel="stylesheet" type="text/css" href="http://vizier.u-strasbg.fr/vizier/CDS/CDShead.css">
+<script type="text/javascript" src="http://vizier.u-strasbg.fr/vizier/CDS/CDSmenu.js"></script>
+<link type="application/rss+xml" rel="alternate" href="http://cds.u-strasbg.fr/news/rss.php" title="all CDS news">
+<meta name="keywords" content="CDS, astronomy data center, centre de donnees astronomiques, astronomie, Strasbourg">
+
+<style type="text/css">
+#dataTable tr:hover {
+    cursor: pointer;
+    background: #dddddd;
+}
+</style>
+<link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+
+</head>
+<body>
+<div style="display:none;">
+<h1>VizieR</h1>
+<a href="http://vizier.cfa.harvard.edu/vizier/">CfA VizieR</a> .
+<a href="http://vizier.nao.ac.jp/vizier/">ADAC VizieR</a> .
+<a href="http://vizier.hia.nrc.ca/vizier/"> CADC VizieR</a> .
+<a href="http://archive.ast.cam.ac.uk/vizier/"> Cambridge (UK) VizieR</a> .
+<a href="http://vizier.iucaa.ernet.in/vizier/">IUCAA VizieR</a> .
+<a href="http://vizier.inasan.ru/vizier/">INASAN VizieR</a> .
+<a href="http://data.bao.ac.cn/vizier/">Beijing (Ch) VizieR</a> .
+<a href="http://www.ukirt.jach.hawaii.edu/vizier/">Hawai VizieR</a>
+</div>
+<div class="navbar navbar-top">
+<div class="navbar-inner vizier">
+<div class="container-fluid minwidth920">
+<a class="brand" title="CDS home" href="http://cds.u-strasbg.fr/"><img src="http://cdsweb.u-strasbg.fr/cds-navbar-resources/img/cds_small.png" alt="CDS"></a>
+<div class="nav-collapse">
+<ul class="nav">
+<li id="portalNavbarItem"><a href="http://cdsportal.u-strasbg.fr/">Portal</a></li>
+<li id="simbadNavbarItem"><a href="http://simbad.u-strasbg.fr/simbad">Simbad</a></li>
+<li id="vizierNavbarItem" class="active"><a href="http://vizier.u-strasbg.fr/viz-bin/VizieR">VizieR</a></li>
+<li id="aladinNavbarItem"><a href="http://aladin.u-strasbg.fr/aladin.gml">Aladin</a></li>
+<li id="xmatchNavbarItem"><a href="http://cdsxmatch.u-strasbg.fr/">X-Match</a></li>
+<li class="dropdown">
+<a href="http://vizier.u-strasbg.fr/viz-bin/VizieR-4#" class="dropdown-toggle" data-toggle="dropdown">Other<b class="caret"></b></a>
+<ul class="dropdown-menu">
+<li><a href="http://cds.u-strasbg.fr/cgi-bin/Sesame">Sesame name resolver</a></li>
+<li><a href="http://vizier.u-strasbg.fr/viz-bin/Cat">Catalogue collection</a></li>
+<li><a href="http://tapvizier.u-strasbg.fr/adql/" alt="TAP VizieR">TAP VizieR</a></li>
+<li><a href="http://cds.u-strasbg.fr/cgi-bin/Dic-Simbad">Dictionary of nomenclature</a></li>
+<li><a href="http://cdsweb.u-strasbg.fr/SimPlay">SimPlay</a></li>
+<li><a href="http://cdsbib.u-strasbg.fr/cgi-bin/cdsbib">Bibliography</a></li>
+<li class="divider"></li>
+<li><a href="mailto:cds-question@unistra.fr">Contact us</a></li>
+</ul>
+</li>
+<li class="divider"></li>
+<li><a href="http://cdsweb.u-strasbg.fr/help">Help</a></li>
+</ul>
+<div class="nav pull-right serviceLogo vizier">
+</div>
+</div><!--/.nav-collapse -->
+</div>
+</div>
+</div>
+<script type="text/javascript">setMenuItem("vizier");</script>
+<div class="cdsPageTitle"><h1>VizieR Result Page</h1></div>
+<div id="CDSmain">
+
+<link href="http://vizier.u-strasbg.fr/vizier/lib/jquery.simpledialog.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="http://vizier.u-strasbg.fr/vizier/lib/jquery.simpledialog.js"></script><div id="VizieR-4">
+<noscript>
+&lt;TABLE WIDTH="100%" BORDER=0 bgcolor="#FF0000"&gt;&lt;TR VALIGN=BASELINE&gt;&lt;TD&gt;&lt;FONT SIZE='+1'&gt;&lt;B&gt;&lt;FONT COLOR='Cyan'&gt;&amp;#160;&amp;#160;JavaScript is used, and should be enabled to get full functionality.&lt;/FONT&gt;&lt;/B&gt;&lt;/FONT&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt;
+</noscript>
+<script language="JavaScript" src="http://vizier.u-strasbg.fr/vizier/lib/sortable/tablesort.js"></script>
+<script language="JavaScript" src="http://vizier.u-strasbg.fr/vizier/lib/viz2.js"></script><div id="xplain" style="position: absolute; left: 216px; top: 305px; z-index: 2; background-color: rgb(255, 255, 224); background-position: initial initial; background-repeat: initial initial;"></div>
+
+<script language="JavaScript">
+document.bgcolor="FFFF00"
+setMozilla(5.0);
+envVOPlot="http://vizier.u-strasbg.fr/viz-bin/loadjvt.pl";
+envHTTP_USER_AGENT="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Ubuntu Chromium/25.0.1364.160 Chrome/25.0.1364.160 Safari/537.22";
+</script>
+<script language="JavaScript">window.focus();</script>
+<a name="Aform0"></a>
+<input type="hidden" name="-ref" value="VIZ516418c81bd2">
+<input type="hidden" name="-to" value="4">
+<input type="hidden" name="-from" value="-3">
+<input type="hidden" name="-this" value="-4">
+
+<p>
+<b>Hover over the table to highlight the corresponding row in Aladin Lite.</b><br/>
+<b>Deselect/select one of the checkbox to hide/show the corresponding source.</b>
+</p>
+<div>
+    <div style="position:fixed"><div id="aladinDiv" style="width: 300px; height: 300px;border: solid 1px"></div>
+    
+
+    </div>
+    <div style="margin-left: 310px;">
+		<TABLE class='sort' BORDER=1 cellspacing=0 id='dataTable'>
+		<TR class='tuple-1'><TH class='sort-colheader'><EM> <A HREF="javascript:alert('This column provides a link to a detailed full record')" onMouseOver="lay('This column provides a link to a detailed full record')" onMouseOut="laz()"><FONT COLOR='#CD5B45'>Full</FONT></A></EM><br><FONT SIZE=-1><br></FONT>
+		<DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><EM> <A HREF="javascript:alert('Distance from center (056.70904167+24.03719444)[FK5/J2000], at Epoch=J1991.25')" onMouseOver="lay('Distance from center (056.70904167+24.03719444)[FK5/J2000], at Epoch=J1991.25')" onMouseOut="laz()"><FONT COLOR='#CD5B45'>_r</FONT></A></EM><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('deg')" onMouseOver="lay('degree')" onMouseOut="laz()">deg</A></FONT><DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><EM> <A HREF="javascript:alert('Right ascension (FK5, Equinox=J2000.0) at Epoch=J2000, proper motions taken into account  (computed by VizieR, not part of the original data)')" onMouseOver="lay('Right ascension (FK5, Equinox=J2000.0) at Epoch=J2000, proper motions taken into account  (computed by VizieR, not part of the original data)')" onMouseOut="laz()"><FONT COLOR='#CD5B45'>_RAJ2000</FONT></A></EM><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('&quot;h:m:s&quot;')" onMouseOver="lay('hour minutes seconds (sexagesimal time from hours)')" onMouseOut="laz()">"h:m:s"</A></FONT><DIV class='sort-down string'> </DIV></TH><TH class='sort-colheader'><EM> <A HREF="javascript:alert('Declination (FK5, Equinox=J2000.0) at Epoch=J2000, proper motions taken into account  (computed by VizieR, not part of the original data)')" onMouseOver="lay('Declination (FK5, Equinox=J2000.0) at Epoch=J2000, proper motions taken into account  (computed by VizieR, not part of the original data)')" onMouseOut="laz()"><FONT COLOR='#CD5B45'>_DEJ2000</FONT></A></EM><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('&quot;d:m:s&quot;')" onMouseOver="lay('degree arcminute arcsecond (sexagesimal angle from degree)')" onMouseOut="laz()">"d:m:s"</A></FONT><DIV class='sort-down string'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=1')" onMouseOver="lay('Hipparcos identifier')" onMouseOut="laz()">HIP</A><br><FONT SIZE=-1><br></FONT>
+		<DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=2')" onMouseOver="lay('&lt;FONT COLOR=\&apos;#CD5B45\&apos;>Existence of a note in the first version of Hipparcos catalog on &lt;B&gt;D</B>uplicity, &lt;B&gt;P</B>hotometry or a &lt;B&gt;General</B> note; letters W, X, Y, Z indicate notes on several topics (field H70 of the 1997 edition, Cat. I/239)</FONT>')" onMouseOut="laz()"><FONT COLOR='#CD5B45'>n_</FONT></A><br><FONT SIZE=-1><br></FONT>
+		<DIV class='sort-down string'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=3')" onMouseOver="lay('Solution type new reduction (1)')" onMouseOut="laz()">Sn</A><br><FONT SIZE=-1><br></FONT>
+		<DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=4')" onMouseOver="lay('Solution type old reduction (2)')" onMouseOut="laz()">So</A><br><FONT SIZE=-1><br></FONT>
+		<DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=6')" onMouseOver="lay('Right Ascension in ICRS, Ep=1991.25')" onMouseOut="laz()">RArad</A><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('deg')" onMouseOver="lay('degree')" onMouseOut="laz()">deg</A></FONT><DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=8')" onMouseOver="lay('Declination in ICRS, Ep=1991.25')" onMouseOut="laz()">DErad</A><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('deg')" onMouseOver="lay('degree')" onMouseOut="laz()">deg</A></FONT><DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=10')" onMouseOver="lay('Parallax')" onMouseOut="laz()">Plx</A><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('mas')" onMouseOver="lay('milli-second of arc')" onMouseOut="laz()">mas</A></FONT><DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=11')" onMouseOver="lay('Formal error on Plx')" onMouseOut="laz()">e_</A><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('mas')" onMouseOver="lay('milli-second of arc')" onMouseOut="laz()">mas</A></FONT><DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=12')" onMouseOver="lay('Proper motion in Right Ascension')" onMouseOut="laz()">pmRA</A><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('mas/yr')" onMouseOver="lay('milli-second of arc per year')" onMouseOut="laz()">mas/yr</A></FONT><DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=14')" onMouseOver="lay('Proper motion in Declination')" onMouseOut="laz()">pmDE</A><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('mas/yr')" onMouseOver="lay('milli-second of arc per year')" onMouseOut="laz()">mas/yr</A></FONT><DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=20')" onMouseOver="lay('Hipparcos magnitude')" onMouseOut="laz()">Hpmag</A><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('mag')" onMouseOver="lay('magnitude')" onMouseOut="laz()">mag</A></FONT><DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=24')" onMouseOver="lay('Colour index')" onMouseOut="laz()">B-V</A><br>
+		<FONT SIZE=-1><A HREF="javascript:Unit('mag')" onMouseOver="lay('magnitude')" onMouseOut="laz()">mag</A></FONT><DIV class='sort-down dec'> </DIV></TH><TH class='sort-colheader'><A HREF="javascript:vNote('//%2a&-5N&&lt;&quot;Label&quot;&catid=1311&tabid=1&colid=27')" onMouseOver="lay('&lt;FONT COLOR=\&apos;#CD5B45\&apos;>Data from the first edition of the Hipparcos Catalog (1997, Cat. I/239)</FONT>')" onMouseOut="laz()"><FONT COLOR='#CD5B45'>HIP1</FONT></A><br><FONT SIZE=-1><br></FONT>
+		<DIV class='sort-down string'> </DIV></TH></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17565"><EM>1</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.146460</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 46 19.574</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 56 54.08</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17608</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.58150148</TD><TD ALIGN=RIGHT NOWRAP>+23.94846199</TD>   <TD ALIGN=RIGHT NOWRAP>8.58</TD>  <TD ALIGN=RIGHT NOWRAP>0.37</TD>   <TD ALIGN=RIGHT NOWRAP>21.13</TD>  <TD ALIGN=RIGHT NOWRAP>-43.65</TD> <TD ALIGN=RIGHT NOWRAP>4.1534</TD><TD ALIGN=RIGHT NOWRAP>-0.051</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17608">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17659"><EM>2</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.162863</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 47 29.077</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 06 18.49</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17702</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.87110081</TD><TD ALIGN=RIGHT NOWRAP>+24.10524179</TD>   <TD ALIGN=RIGHT NOWRAP>8.09</TD>  <TD ALIGN=RIGHT NOWRAP>0.42</TD>   <TD ALIGN=RIGHT NOWRAP>19.34</TD>  <TD ALIGN=RIGHT NOWRAP>-43.67</TD> <TD ALIGN=RIGHT NOWRAP>2.8480</TD><TD ALIGN=RIGHT NOWRAP>-0.086</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17702">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17649"><EM>3</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.261504</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 47 20.969</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 48 12.05</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17692</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.83731961</TD><TD ALIGN=RIGHT NOWRAP>+23.80345385</TD>   <TD ALIGN=RIGHT NOWRAP>8.90</TD>  <TD ALIGN=RIGHT NOWRAP>0.77</TD>   <TD ALIGN=RIGHT NOWRAP>18.56</TD>  <TD ALIGN=RIGHT NOWRAP>-44.31</TD> <TD ALIGN=RIGHT NOWRAP>7.0227</TD> <TD ALIGN=RIGHT NOWRAP>0.030</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17692">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17661"><EM>4</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.292267</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 47 29.454</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 17 18.04</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17704</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.87267468</TD><TD ALIGN=RIGHT NOWRAP>+24.28845290</TD>   <TD ALIGN=RIGHT NOWRAP>9.42</TD>  <TD ALIGN=RIGHT NOWRAP>0.75</TD>   <TD ALIGN=RIGHT NOWRAP>18.33</TD>  <TD ALIGN=RIGHT NOWRAP>-44.69</TD> <TD ALIGN=RIGHT NOWRAP>6.8592</TD> <TD ALIGN=RIGHT NOWRAP>0.066</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17704">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17641"><EM>5</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.326977</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 47 17.142</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 43 36.30</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17684</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.82151786</TD><TD ALIGN=RIGHT NOWRAP>+23.72681305</TD>  <TD ALIGN=RIGHT NOWRAP>15.52</TD>  <TD ALIGN=RIGHT NOWRAP>0.73</TD>  <TD ALIGN=RIGHT NOWRAP>-34.94</TD>  <TD ALIGN=RIGHT NOWRAP>-25.54</TD> <TD ALIGN=RIGHT NOWRAP>7.0983</TD> <TD ALIGN=RIGHT NOWRAP>0.542</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17684">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17530"><EM>6</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.402912</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 45 49.607</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 22 03.89</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17573</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.45663811</TD><TD ALIGN=RIGHT NOWRAP>+24.36785797</TD>   <TD ALIGN=RIGHT NOWRAP>8.51</TD>  <TD ALIGN=RIGHT NOWRAP>0.28</TD>   <TD ALIGN=RIGHT NOWRAP>20.95</TD>  <TD ALIGN=RIGHT NOWRAP>-45.98</TD> <TD ALIGN=RIGHT NOWRAP>3.8591</TD><TD ALIGN=RIGHT NOWRAP>-0.063</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17573">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17456"><EM>7</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.454001</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 44 52.537</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 06 48.01</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17499</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.21884818</TD><TD ALIGN=RIGHT NOWRAP>+24.11344840</TD>   <TD ALIGN=RIGHT NOWRAP>8.06</TD>  <TD ALIGN=RIGHT NOWRAP>0.25</TD>   <TD ALIGN=RIGHT NOWRAP>20.84</TD>  <TD ALIGN=RIGHT NOWRAP>-46.06</TD> <TD ALIGN=RIGHT NOWRAP>3.6857</TD><TD ALIGN=RIGHT NOWRAP>-0.105</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17499">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17621"><EM>8</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.484306</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 46 59.398</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 31 12.45</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17664</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.74743147</TD><TD ALIGN=RIGHT NOWRAP>+24.52023406</TD>   <TD ALIGN=RIGHT NOWRAP>7.66</TD>  <TD ALIGN=RIGHT NOWRAP>0.66</TD>   <TD ALIGN=RIGHT NOWRAP>22.73</TD>  <TD ALIGN=RIGHT NOWRAP>-45.00</TD> <TD ALIGN=RIGHT NOWRAP>6.8487</TD> <TD ALIGN=RIGHT NOWRAP>0.021</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17664">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17748"><EM>9</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.489225</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 48 30.095</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 20 43.89</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17791</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>057.12535040</TD><TD ALIGN=RIGHT NOWRAP>+24.34562943</TD>   <TD ALIGN=RIGHT NOWRAP>7.87</TD>  <TD ALIGN=RIGHT NOWRAP>1.32</TD>   <TD ALIGN=RIGHT NOWRAP>17.68</TD>  <TD ALIGN=RIGHT NOWRAP>-43.28</TD> <TD ALIGN=RIGHT NOWRAP>7.0038</TD> <TD ALIGN=RIGHT NOWRAP>0.128</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17791">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17789"><EM>10</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.515076</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 48 56.941</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 51 25.68</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17832</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>057.23713023</TD><TD ALIGN=RIGHT NOWRAP>+23.85727235</TD>  <TD ALIGN=RIGHT NOWRAP>13.22</TD>  <TD ALIGN=RIGHT NOWRAP>0.52</TD>   <TD ALIGN=RIGHT NOWRAP>46.63</TD>  <TD ALIGN=RIGHT NOWRAP>-56.75</TD> <TD ALIGN=RIGHT NOWRAP>6.5595</TD> <TD ALIGN=RIGHT NOWRAP>0.377</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17832">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17545"><EM>11</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.522632</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 46 02.900</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 31 40.43</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17588</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.51203202</TD><TD ALIGN=RIGHT NOWRAP>+24.52800593</TD>   <TD ALIGN=RIGHT NOWRAP>8.58</TD>  <TD ALIGN=RIGHT NOWRAP>0.56</TD>   <TD ALIGN=RIGHT NOWRAP>19.88</TD>  <TD ALIGN=RIGHT NOWRAP>-44.37</TD> <TD ALIGN=RIGHT NOWRAP>6.4389</TD><TD ALIGN=RIGHT NOWRAP>-0.020</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17588">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17446"><EM>12</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.527909</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 44 48.215</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 17 22.09</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17489</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.20084225</TD><TD ALIGN=RIGHT NOWRAP>+24.28957701</TD>   <TD ALIGN=RIGHT NOWRAP>8.65</TD>  <TD ALIGN=RIGHT NOWRAP>0.36</TD>   <TD ALIGN=RIGHT NOWRAP>20.38</TD>  <TD ALIGN=RIGHT NOWRAP>-44.81</TD> <TD ALIGN=RIGHT NOWRAP>5.4507</TD><TD ALIGN=RIGHT NOWRAP>-0.034</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17489">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17804"><EM>13</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.531295</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 49 09.743</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 03 12.30</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17847</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&75')"> 75</A></TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:vNote('//%2a&&lt;&quot;Note&quot;&amp;catid=1311&amp;notid=3&amp;-out.emph=4')">4</A></TD><TD ALIGN=RIGHT NOWRAP>057.29054699</TD><TD ALIGN=RIGHT NOWRAP>+24.05352413</TD>   <TD ALIGN=RIGHT NOWRAP>8.53</TD>  <TD ALIGN=RIGHT NOWRAP>0.39</TD>   <TD ALIGN=RIGHT NOWRAP>17.70</TD>  <TD ALIGN=RIGHT NOWRAP>-44.18</TD> <TD ALIGN=RIGHT NOWRAP>3.6084</TD><TD ALIGN=RIGHT NOWRAP>-0.070</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17847">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17808"><EM>14</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.545647</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 49 11.216</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 08 12.16</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17851</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>057.29668416</TD><TD ALIGN=RIGHT NOWRAP>+24.13682556</TD>   <TD ALIGN=RIGHT NOWRAP>8.54</TD>  <TD ALIGN=RIGHT NOWRAP>0.31</TD>   <TD ALIGN=RIGHT NOWRAP>18.07</TD>  <TD ALIGN=RIGHT NOWRAP>-47.20</TD> <TD ALIGN=RIGHT NOWRAP>5.0295</TD><TD ALIGN=RIGHT NOWRAP>-0.082</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17851">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17536"><EM>15</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.559003</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 45 54.477</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 33 16.24</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17579</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.47693310</TD><TD ALIGN=RIGHT NOWRAP>+24.55462133</TD>   <TD ALIGN=RIGHT NOWRAP>8.77</TD>  <TD ALIGN=RIGHT NOWRAP>0.54</TD>   <TD ALIGN=RIGHT NOWRAP>20.18</TD>  <TD ALIGN=RIGHT NOWRAP>-44.87</TD> <TD ALIGN=RIGHT NOWRAP>5.7675</TD><TD ALIGN=RIGHT NOWRAP>-0.036</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17579">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17488"><EM>16</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.568138</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 45 12.496</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 28 02.21</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17531</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.30200903</TD><TD ALIGN=RIGHT NOWRAP>+24.46737906</TD>   <TD ALIGN=RIGHT NOWRAP>7.97</TD>  <TD ALIGN=RIGHT NOWRAP>0.33</TD>   <TD ALIGN=RIGHT NOWRAP>21.24</TD>  <TD ALIGN=RIGHT NOWRAP>-40.56</TD> <TD ALIGN=RIGHT NOWRAP>4.2724</TD><TD ALIGN=RIGHT NOWRAP>-0.110</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17531">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17819"><EM>17</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.670830</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 49 21.749</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 22 51.43</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17862</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>057.34057535</TD><TD ALIGN=RIGHT NOWRAP>+24.38106398</TD>   <TD ALIGN=RIGHT NOWRAP>8.18</TD>  <TD ALIGN=RIGHT NOWRAP>0.59</TD>   <TD ALIGN=RIGHT NOWRAP>17.42</TD>  <TD ALIGN=RIGHT NOWRAP>-45.38</TD> <TD ALIGN=RIGHT NOWRAP>6.6115</TD><TD ALIGN=RIGHT NOWRAP>-0.027</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17862">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17733"><EM>18</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.706233</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 48 20.816</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 25 16.50</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17776</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>057.08668458</TD><TD ALIGN=RIGHT NOWRAP>+23.42136364</TD>   <TD ALIGN=RIGHT NOWRAP>8.45</TD>  <TD ALIGN=RIGHT NOWRAP>0.39</TD>   <TD ALIGN=RIGHT NOWRAP>17.99</TD>  <TD ALIGN=RIGHT NOWRAP>-46.57</TD> <TD ALIGN=RIGHT NOWRAP>5.4355</TD><TD ALIGN=RIGHT NOWRAP>-0.067</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17776">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17857"><EM>19</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.736218</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 49 43.531</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 42 42.68</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17900</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>057.43133303</TD><TD ALIGN=RIGHT NOWRAP>+23.71196321</TD>   <TD ALIGN=RIGHT NOWRAP>8.72</TD>  <TD ALIGN=RIGHT NOWRAP>0.60</TD>   <TD ALIGN=RIGHT NOWRAP>16.73</TD>  <TD ALIGN=RIGHT NOWRAP>-44.82</TD> <TD ALIGN=RIGHT NOWRAP>6.1646</TD><TD ALIGN=RIGHT NOWRAP>-0.046</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17900">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17880"><EM>20</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.739830</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 49 58.054</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 50 55.30</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17923</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="javascript:vNote('//%2a&-source=1239/*notes&amp;HIP=17923')">G</A></FONT></TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&15')"> 15</A></TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:vNote('//%2a&&lt;&quot;Note&quot;&amp;catid=1311&amp;notid=3&amp;-out.emph=3')">3</A></TD><TD ALIGN=RIGHT NOWRAP>057.49184621</TD><TD ALIGN=RIGHT NOWRAP>+23.84880345</TD>   <TD ALIGN=RIGHT NOWRAP>6.81</TD>  <TD ALIGN=RIGHT NOWRAP>0.72</TD>   <TD ALIGN=RIGHT NOWRAP>16.81</TD>  <TD ALIGN=RIGHT NOWRAP>-44.88</TD> <TD ALIGN=RIGHT NOWRAP>6.7608</TD> <TD ALIGN=RIGHT NOWRAP>0.063</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17923">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17358"><EM>21</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.816932</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 43 41.534</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 38 56.93</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17401</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>055.92300723</TD><TD ALIGN=RIGHT NOWRAP>+23.64925995</TD>   <TD ALIGN=RIGHT NOWRAP>7.58</TD>  <TD ALIGN=RIGHT NOWRAP>0.90</TD>   <TD ALIGN=RIGHT NOWRAP>18.77</TD>  <TD ALIGN=RIGHT NOWRAP>-46.36</TD> <TD ALIGN=RIGHT NOWRAP>8.0169</TD> <TD ALIGN=RIGHT NOWRAP>0.347</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17401">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17484"><EM>22</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.888066</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 45 09.740</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 50 21.34</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17527</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.29052848</TD><TD ALIGN=RIGHT NOWRAP>+24.83937328</TD>   <TD ALIGN=RIGHT NOWRAP>7.97</TD>  <TD ALIGN=RIGHT NOWRAP>0.37</TD>   <TD ALIGN=RIGHT NOWRAP>20.36</TD>  <TD ALIGN=RIGHT NOWRAP>-46.52</TD> <TD ALIGN=RIGHT NOWRAP>5.6447</TD><TD ALIGN=RIGHT NOWRAP>-0.064</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17527">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17454"><EM>23</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.892283</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 44 51.236</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 16 08.13</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17497</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>056.21342697</TD><TD ALIGN=RIGHT NOWRAP>+23.26902901</TD>   <TD ALIGN=RIGHT NOWRAP>8.33</TD>  <TD ALIGN=RIGHT NOWRAP>1.22</TD>   <TD ALIGN=RIGHT NOWRAP>21.87</TD>  <TD ALIGN=RIGHT NOWRAP>-43.18</TD> <TD ALIGN=RIGHT NOWRAP>9.0747</TD> <TD ALIGN=RIGHT NOWRAP>0.403</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17497">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17529"><EM>24</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.920270</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 45 48.815</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 08 49.74</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17572</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&15')"> 15</A></TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:vNote('//%2a&&lt;&quot;Note&quot;&amp;catid=1311&amp;notid=3&amp;-out.emph=3')">3</A></TD><TD ALIGN=RIGHT NOWRAP>056.45334199</TD><TD ALIGN=RIGHT NOWRAP>+23.14725707</TD>   <TD ALIGN=RIGHT NOWRAP>8.24</TD>  <TD ALIGN=RIGHT NOWRAP>0.75</TD>   <TD ALIGN=RIGHT NOWRAP>20.50</TD>  <TD ALIGN=RIGHT NOWRAP>-44.55</TD> <TD ALIGN=RIGHT NOWRAP>6.8756</TD> <TD ALIGN=RIGHT NOWRAP>0.060</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17572">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17956"><EM>25</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.925194</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 50 52.429</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 57 41.31</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17999</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>057.71840206</TD><TD ALIGN=RIGHT NOWRAP>+23.96158076</TD>   <TD ALIGN=RIGHT NOWRAP>9.93</TD>  <TD ALIGN=RIGHT NOWRAP>0.75</TD>   <TD ALIGN=RIGHT NOWRAP>18.86</TD>  <TD ALIGN=RIGHT NOWRAP>-43.51</TD> <TD ALIGN=RIGHT NOWRAP>6.9844</TD> <TD ALIGN=RIGHT NOWRAP>0.078</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17999">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17975"><EM>26</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.971870</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 51 03.112</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+23 54 13.14</FONT></TD><TD ALIGN=RIGHT NOWRAP> 18018</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:vNote('//%2a&&lt;&quot;Note&quot;&amp;catid=1311&amp;notid=3&amp;-out.emph=2')">2</A></TD><TD ALIGN=RIGHT NOWRAP>057.76257394</TD><TD ALIGN=RIGHT NOWRAP>+23.90376788</TD>  <TD ALIGN=RIGHT NOWRAP>28.27</TD>  <TD ALIGN=RIGHT NOWRAP>2.57</TD>  <TD ALIGN=RIGHT NOWRAP>148.00</TD>  <TD ALIGN=RIGHT NOWRAP>-48.50</TD><TD ALIGN=RIGHT NOWRAP>10.3326</TD> <TD ALIGN=RIGHT NOWRAP>1.160</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=18018">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17716"><EM>27</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>0.994393</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 48 06.541</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 59 18.30</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17759</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>057.02732727</TD><TD ALIGN=RIGHT NOWRAP>+24.98848492</TD>   <TD ALIGN=RIGHT NOWRAP>6.03</TD>  <TD ALIGN=RIGHT NOWRAP>0.70</TD>  <TD ALIGN=RIGHT NOWRAP>-28.00</TD>  <TD ALIGN=RIGHT NOWRAP>-28.00</TD> <TD ALIGN=RIGHT NOWRAP>6.5461</TD> <TD ALIGN=RIGHT NOWRAP>1.701</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17759">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17651"><EM>28</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>1.121950</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 47 22.898</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+22 55 19.64</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17694</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&75')"> 75</A></TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:vNote('//%2a&&lt;&quot;Note&quot;&amp;catid=1311&amp;notid=3&amp;-out.emph=4')">4</A></TD><TD ALIGN=RIGHT NOWRAP>056.84535265</TD><TD ALIGN=RIGHT NOWRAP>+22.92223155</TD>   <TD ALIGN=RIGHT NOWRAP>8.62</TD>  <TD ALIGN=RIGHT NOWRAP>0.84</TD>   <TD ALIGN=RIGHT NOWRAP>20.91</TD>  <TD ALIGN=RIGHT NOWRAP>-44.88</TD> <TD ALIGN=RIGHT NOWRAP>8.2381</TD> <TD ALIGN=RIGHT NOWRAP>0.255</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17694">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-2'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=18006"><EM>29</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>1.157171</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 51 27.216</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+24 31 07.14</FONT></TD><TD ALIGN=RIGHT NOWRAP> 18050</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>057.86334066</TD><TD ALIGN=RIGHT NOWRAP>+24.51876077</TD>   <TD ALIGN=RIGHT NOWRAP>7.65</TD>  <TD ALIGN=RIGHT NOWRAP>1.34</TD>   <TD ALIGN=RIGHT NOWRAP>21.84</TD>  <TD ALIGN=RIGHT NOWRAP>-45.50</TD> <TD ALIGN=RIGHT NOWRAP>8.9468</TD> <TD ALIGN=RIGHT NOWRAP>0.380</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=18050">HIP1</A></FONT></TD></TR>
+		<TR class='tuple-1'><TD  NOWRAP><input type="checkbox" class="displaySource" checked="checked" /><A HREF="VizieR-5?-ref=VIZ516662fc6d3e&amp;-out.add=.&amp;-source=I/311/hip2&amp;recno=17360"><EM>30</EM></A></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>1.261478</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>03 43 43.197</FONT></TD><TD ALIGN=RIGHT NOWRAP><FONT COLOR='#CD5B45'>+25 04 50.54</FONT></TD><TD ALIGN=RIGHT NOWRAP> 17403</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'> </FONT>&nbsp;</TD><TD ALIGN=RIGHT NOWRAP><A HREF="javascript:aW('wNote','vizExec/w/.getSn?-plus=-+&amp;I/311&5')">  5</A></TD><TD ALIGN=RIGHT NOWRAP>0</TD><TD ALIGN=RIGHT NOWRAP>055.92992842</TD><TD ALIGN=RIGHT NOWRAP>+25.08083883</TD>   <TD ALIGN=RIGHT NOWRAP>7.93</TD>  <TD ALIGN=RIGHT NOWRAP>0.60</TD>   <TD ALIGN=RIGHT NOWRAP>22.38</TD>  <TD ALIGN=RIGHT NOWRAP>-55.13</TD> <TD ALIGN=RIGHT NOWRAP>7.5779</TD> <TD ALIGN=RIGHT NOWRAP>0.141</TD><TD ALIGN=LEFT NOWRAP><FONT COLOR='#CD5B45'><A HREF="VizieR-5?-out.add=.&amp;-source=1239/hip_main&amp;HIP=17403">HIP1</A></FONT></TD></TR>
+		</TABLE>
+	</div>
+</div>
+
+
+
+<script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
+<script>
+var aladin = $.aladin('#aladinDiv', {target: 'M45', zoom: 2.4, cooFrame: 'J2000', showControl: true, survey: 'P/DSS2/color', showReticle: false});
+$(document).ready(function() {
+
+    var catalog = aladin.createCatalog();
+    aladin.addCatalog(catalog);
+    
+    // first, retrieve all sources
+    sources = [];
+    var trs = $('#dataTable tr');
+    for (var i=1; i<trs.length; i++) {
+        var ra = trs.eq(i).find('td').eq(8).html();
+        var dec = trs.eq(i).find('td').eq(9).html();
+        sources.push(aladin.createSource(ra, dec));
+    }
+    catalog.addSources(sources);
+    
+    // listener on checkboxes
+    var cbs = $('#dataTable tr td .displaySource');
+    for (var i=0; i<cbs.length; i++) {
+        $(cbs[i]).change(function () {
+            
+           var idx = parseInt($(this).parent().find('a em').html());
+           var isChecked = $(this).is(':checked');
+           var source = catalog.getSource(idx-1);
+           if (isChecked) {
+               source.show();
+           }
+           else {
+               source.hide();
+           }
+        });
+    }
+    
+    var curSource;
+    $('#dataTable tr').mouseenter(function() {
+        //console.log($('#dataTable tr').index(this));
+        var idx = parseInt($(this).find('td').eq(0).find('a em').html());
+        if (idx>0) {
+            idx = idx -1;
+            if (curSource) {
+                curSource.deselect();
+            }
+            var source = catalog.getSource(idx);
+            source.select();
+            curSource = source;
+        }
+    });
+    $('#dataTable tr').mouseleave(function() {
+       if (curSource) {
+           curSource.deselect();
+       } 
+    });
+});
+</script>
+
+
+</body></html>
--- a/website/doc/examples/thumbnails.html
+++ b/website/doc/examples/thumbnails.html
--- a/website/doc/index.gml
+++ b/website/doc/index.gml
@@ -0,0 +1,227 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <&CDS.headStuff2>
+    <link href="/assets/css/aladin.css" rel="stylesheet">
+    
+    <link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+    
+    <style>
+    #imageSurveysList {font-size: 13px;}
+    
+    #imageSurveysList tr > td:first-child {font-weight: bold;}
+    </style>
+
+    <title>Aladin Lite documentation</title>
+    
+  </head>
+<body>
+  <&CDS.headArea2 '' 'aladin'>
+    <header class="subhead">
+      <div class="container">
+        <h1>Aladin Lite</h1>
+        <p>A lightweight sky atlas running in the browser</p>
+      </div>
+    </header>
+
+    <ul class="breadcrumb">
+      <li><a href="../">Aladin Lite</a> <span class="divider">/</span></li>
+      <li class="active">Documentation</li>
+    </ul>
+    
+    <div class="container content">
+    
+      <!-- Navigation bar -->
+      <div class="row">
+        <div class="span3">
+          <ul class="nav nav-tabs nav-stacked aladinlite-sidenav" data-spy="affix" data-offset-top="210">
+            <li><a href="#overview">Overview</a></li>
+            <!-- <li><a href="#features">Features</a></li> -->
+            <!-- <li><a href="#requirements">Requirements and limitations</a></li> -->
+            <li><a href="#embedding">Embedding in a web page</a></li>
+            <li><a href="#API">Javascript API</a></li>
+            <li><a href="#features">Features</a></li>
+            <li><a href="#usage">Usage</a></li>
+            <li><a href="#source-code">Source code</a></li>
+            <li><a href="#plugins">Plugins</a></li>
+            <li><a href="#release-notes">Release notes</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </div>
+        
+        <div class="span9">
+        
+        <!-------------------------------------------------------------------->
+        <!-- OVERVIEW -->
+        <a name="overview"></a>
+        <div class="page-header">
+          <h1>Overview</h1>
+        </div>
+        
+        <div class="row">
+          <div class="span5">
+            <p class="lead">
+            Aladin lite is a lightweight version of the <a href="<&Ala.home,u>" title="Aladin home page">Aladin Sky Atlas</a>, running in the browser and geared towards simple visualization of a sky region.
+            </p>
+            <p>It allows one to visualize image surveys (JPEG multi-resolution HEALPix all-sky surveys)
+            and superimpose tabular (VOTable) and footprints (STC-S) data.</p>
+            <p>Aladin lite is powered by the HTML5 canvas technology, currently supported by any modern browser</p>
+            <p>Aladin lite is <a href="#embedding">easily embeddable on any web page</a> and can also be
+            controlled through a <a href="#API">Javacript API</a>.</p>
+            <p>It is dedicated to replace the Aladin Java applet technology in the medium term.</p>
+            <br/>
+            <p>The panel on the right hand is not a regular image. It is actually Aladin Lite running as an embedded widget. 
+            You might try to zoom in and out using your mouse wheel, or pan the view to move around.</p>
+          </div>
+          <div class="span3">
+              <div id="aladin-lite-div" style="width:300px;height:300px;"></div>
+              <script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
+              <script type="text/javascript">
+                var aladin = $.aladin('#aladin-lite-div', {showControl: false, fov: 0.5, target: "20 45 38.0 +30 42 30", cooFrame: "J2000", survey: "P/DSS2/color", showFullscreenControl: false, showFrame: false, showGotoControl: false});
+              </script>
+              
+              <script>
+              </script>
+          </div>
+        </div>
+
+        <!-------------------------------------------------------------------->
+        <!-- Embedding -->
+        <a name="embedding"></a>
+        <div class="page-header">
+          <h1>Embedding in a web page</h1>
+        </div>
+        <iframe style="width: 100%; height: 100%;" marginheight="0" marginwidth="0" src="embedding.html" width="100%" height="600px" frameborder="0" scrolling="no"></iframe>
+        
+        
+        <!-------------------------------------------------------------------->
+        <!-- Javascript API -->
+        <a name="API"></a>
+        <div class="page-header">
+          <h1>Javascript API</h1>
+        </div>
+        <p>Aladin Lite comes with a <a href="API/">full-featured API</a> allowing one to customize its interface, control the view, change the image survey to display, create catalogues and overlay layers, 
+           develop powerful interactions between a web page and Aladin Lite.
+        </p>
+        <p>
+        The Aladin Lite API is described on a <a href="API/">dedicated page</a>.
+        </p>
+
+        <!-------------------------------------------------------------------->
+        <!-- Features -->
+        <a name="features"></a>
+        <div class="page-header">
+          <h1>Features</h1>
+        </div>
+        <p>
+        To give you an overview of how Aladin Lite can be used, have a look at the <a href="API/examples/">list of examples</a>.
+        </p>
+
+        <!-------------------------------------------------------------------->
+        <!-- Usage -->
+        <a name="usage"></a>
+        <div class="page-header">
+          <h1>Aladin Lite usage</h1>
+        </div>
+        <p>Aladin Lite has been integrated in the main CDS services:
+        <ul>
+            <li>On the SIMBAD page for an individual object, it provides an interactive preview image (see <a href="http://simbad.u-strasbg.fr/simbad/sim-id?Ident=M1">example for <em>Messier 1</em></a>).</li>
+            <li>The VizieR results page features a <em>start Aladin Lite</em> button to visualize the positions of listed sources (see <a href="http://vizier.u-strasbg.fr/viz-bin/VizieR-4?-source=I/259/tyc2&-c=M45&-c.rm=30">example</a>) </li>
+        </ul>
+        </p>
+        <p>Outside CDS, Aladin Lite is used in several projects:
+            <ul>
+                <li><a href="http://www.spitzer.caltech.edu/glimpse360/aladin" title="GLIMPSE 360 data visualized by Aladin Lite">GLIMPSE 360</a></li>
+                <li><a href="http://cade.irap.omp.eu/">CADE</a> (<em>Centre d'Analyse de Données Etendues</em>) uses Aladin Lite to provide previews of the HEALPix maps they publish (<a href="http://cade.irap.omp.eu/dokuwiki/doku.php?id=cgps">Example for CGPS data</a>) </li>
+                <li><a href="http://www.adsass.org/aladin/">ADS All-Sky Survey</a> makes use of Aladin Lite to display heatmaps of SIMBAD objects cited in the literature.</li>
+            </ul>
+        </p>
+        <p>If your project is using Aladin Lite, we would be happy to have it listed here. <a href="#contact">Drop us a line !</a></p>
+
+        <!-------------------------------------------------------------------->
+        <!-- Source code -->
+        <a name="source-code"></a>
+        <div class="page-header">
+          <h1>Source code</h1>
+        </div>
+        <p>Aladin Lite source code will be available in the coming weeks under GPL3 licence.
+        </p>
+
+        <!-------------------------------------------------------------------->
+        <!-- Plugins -->
+        <a name="plugins"></a>
+        <div class="page-header">
+          <h1>Plugins</h1>
+        </div>
+        <p>
+            <ul>
+                <li><b>Region editor</b></li>
+            </ul>
+        </p>
+
+        <!-------------------------------------------------------------------->
+        <!-- RELEASE NOTES -->
+        <a name="release-notes"></a>
+        <div class="page-header">
+          <h1>Release notes</h1>
+        </div>
+
+        <h4>October 2014</h4>
+        <p>Various bug fixes</p>
+
+        <h4>April 2014</h4>
+        <p>New API methods: getSize, getFov, world2pix, pix2world, getFovCorners</p>
+
+        <h4>November 2013</h4>
+        <p>New features: progressive catalogues, color maps, fullScreen option at startup, PNG export</p>
+        <p>New API methods: setFOVRange, listeners on objectClicked, objectHovered</p>
+        <p>Bug fix: support for Firefox < 4</p>
+
+        <h4>July 2013</h4>
+        <p>Added zoom control to the UI</p>
+        <p>Added method to trigger object selection</p>
+        
+        <h4>May 2013</h4>
+        <p>First public beta release</p>
+        
+        <!-------------------------------------------------------------------->
+        <!-- Contact -->
+        <a name="contact"></a>
+        <div class="page-header">
+          <h1>Author</h1>
+        </div>
+        <p>Aladin Lite is developed and maintained by Thomas Boch.</p>
+        <p>Send your feedback, comments, feature requests and bug reports <a href="<&Question,u 'Aladin Lite'>">to this email address</a>.</p>
+        
+                
+        
+        </div> <!-- /span3 -->
+      </div> <!-- /row -->
+    
+    </div>
+  <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+
+  
+  <script src="/assets/js/bootstrap-affix.js"></script>
+  <script type="text/javascript">
+  $(document).ready(function() {
+      $.ajax({
+        url: "http://aladin.u-strasbg.fr/java/nph-aladin.pl",
+        data: {"frame": "aladinLiteDic"},
+        method: 'GET',
+        dataType: 'jsonp',
+        success: function(surveys) {
+            surveys = surveys.sort(function(a, b) {return a.order > b.order ? 1 : -1;});
+            var content = "";
+            for (var k=0, len=surveys.length; k<len; k++) {
+                content += '<tr><td>' + surveys[k].id + '</td><td>' + surveys[k].name + '</td></tr>';
+            }
+            $('#imageSurveysList tbody').append(content); 
+        }
+      });
+  });
+  </script>
+  <&CDS.piwikStats "aladin">
+</body>
+</html>
--- a/website/doc/js/jquery-1.8.3.min.js
+++ b/website/doc/js/jquery-1.8.3.min.js
--- a/website/doc/js/jquery.snippet.min.js
+++ b/website/doc/js/jquery.snippet.min.js
--- a/website/index-new.gml
+++ b/website/index-new.gml
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+<&CDS.headStuff2>
+
+    <link href="css/style-new.css" rel="stylesheet" />
+    <link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+    <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
+
+    <title>Aladin Lite</title>
+
+    <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
+</head>
+
+<body>
+    <&CDS.headArea2 'Aladin Lite' 'aladin'>
+
+    <div class="container">
+       <div class="left"> 
+           <div class="targetDiv"><div class="title">Target:</div> <input id="target"></div>
+           <div class="surveyDiv"><div class="title">Surveys:</div><div id="surveys"></div> </div>
+       </div>
+      <div class="central"><div id="aladin-lite-div"></div></div>
+      <div class="right"></div> 
+    <div class="bottom" id="content" ></div>
+    </div>
+    <br/>
+    <div class="developerInfo">Are you a developer interested in integrating Aladin Lite in your project ? Have a look at the <a href="doc/">dedicated documentation.</a></div>
+    <br/><br/>
+    
+    <script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="js/app-new.js"></script>
+
+    <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+
+</body>
+</html>
--- a/website/index.gml
+++ b/website/index.gml
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+<&CDS.headStuff2>
+
+    <link href="css/style.css" rel="stylesheet" />
+    <link rel="stylesheet" href="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
+    <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
+
+    <title>Aladin Lite</title>
+
+    <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
+</head>
+
+<body>
+    <&CDS.headArea2 'Aladin Lite' 'aladin'>
+
+    <div class="container">
+       <div class="left"> 
+           <div class="targetDiv"><div class="title">Target:</div> <input id="target"></div>
+           <div class="surveyDiv"><div class="title">Surveys:</div><div id="surveys"></div> </div>
+       </div>
+      <div class="central" id="aladin-lite-div"></div> 
+      <div class="right"></div> 
+    <div class="bottom" id="content" ></div>
+    </div>
+    <br/>
+    <div class="developerInfo">Are you a developer interested in integrating Aladin Lite in your project ? Have a look at the <a href="doc/">dedicated documentation.</a> and <a href="doc/API/">API</a>.</div>
+    <br/><br/>
+    
+    <script type="text/javascript" src="http://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="js/app.js"></script>
+
+    <&CDS.tailArea2 'Aladin Lite' '&rarr;  Thanks for <a href="/aladin.gml#Acknowledgement">acknowledging Aladin Sky Atlas</a>' 'aladin'>
+
+</body>
+</html>
--- a/website/js/app-new.js
+++ b/website/js/app-new.js
@@ -0,0 +1,124 @@
+    function getURLParam(name, queryString){
+        if (queryString===undefined) {
+            queryString = location.search;
+        }
+        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(queryString)||[,""])[1].replace(/\+/g, '%20'))||null;
+    };
+
+    var surveys = {};
+
+    var curSurveyId = null;
+    var survey = getURLParam('survey') || "P/DSS2/color";
+    var fov = getURLParam('fov') || 3;
+    if (isNaN(fov)) {
+        fov = 3;
+    }
+    var defaultTarget = 'NGC 2024';
+    var target = getURLParam('target') || 'NGC 2024';
+    var aladin = A.aladin('#aladin-lite-div', {survey: survey, fov: fov, target: target, showGotoControl:false, showFullscreenControl: false});
+    curSurveyId = survey;
+
+    if (target!=defaultTarget) {
+        $('#target').val(target);
+    }
+    $('#target').focus();
+
+    $("#target").keypress(function(event) {
+        if (event.which == 13) {
+            goto();
+        }
+    });
+    function goto() {
+       var newTarget = $("#target").val();
+       aladin.gotoObject(newTarget);
+       // TODO : ne mettre à jour que si le gotoObject est successful
+       updateHistory();
+    }
+
+    function updateHistory() {
+        if (history && history.replaceState) {
+            var target = $('#target').val();
+            var fov = aladin.getFov()[0].toFixed(2);
+            history.replaceState(null, null, "?target=" + encodeURIComponent(target) + "&fov=" + fov + "&survey=" + encodeURIComponent(curSurveyId));
+        }
+    }
+
+    function find(s) {
+        for (var k=0; k<surveys.length; k++) {
+            if (surveys[k].id == s) {
+                return surveys[k];
+            }
+        }
+        return null;
+    }
+
+    function setInfo(s) {
+        var s1 = find(s);
+        if (!s1) {
+            return;
+        }
+        $('#content').html(s1.description+" - <a href=\""+s1.copyrightUrl+"\">"+s1.copyright+"</a>");
+    }
+
+    function setSurvey(s) {
+        aladin.setImageSurvey(s);
+        setInfo(s);
+     }
+    
+    $.ajax({
+         url: "http://aladin.u-strasbg.fr/java/nph-aladin.pl",
+         data: {"frame": "aladinLiteDic"},
+         method: 'GET',
+         dataType: 'jsonp',
+         success: function(data) {
+             var tooltipDescriptions = {};
+             var res = '<div class="surveys-list">';
+             data.sort(function(a,b) { return a.order == b.order ? 0 : a.order < b.order ? -1 : 1; });
+             surveys = data;
+             for (var k=0; k<data.length; k++) {
+                  var id = data[k].id;
+                  var w = /^\w+\/(\w+)/.exec(data[k].treePath)[1];
+                  var s1 = id.substring(2).replace("/color","");
+                  var imgPath = 'survey-previews/' + id.replace(/\//g, "_") + '.jpg';
+                  res += '<div class="survey" data-surveyId="' + id + '"><div class="survey-label">' + s1 + '</div><img class="survey-preview" src="' + imgPath + '" /><div class="survey-selected" style="display: none;"><div class="survey-selected-img"></div></div></div>';
+                  tooltipDescriptions[id] = '<div>Band: ' + w + '</div><div>' + data[k].description + '</div>';
+                  /*
+                  var check = s == survey ? " checked=\"checked\"" : "";
+                  res = res + "<div style=\"display:block;height:20px\">"
+                            + "<input type=\"radio\" id=\""+s+"\" name=\"survey\""+check
+                            +   " onChange=\"setSurvey('"+s+"');\" title=\""+d+"\"/>"
+                            +  "<label for=\""+s+"\" title=\"Band: "+d+"\">"+s1+"</label>"
+                            + "</div>\n";
+                  */
+             }
+             res += '</div>';
+             $('#surveys').html(res);
+
+             $('.survey').each(function() {
+                 $(this).tooltipster({
+                     content: $(tooltipDescriptions[$(this).attr('data-surveyId')]),
+                     delay: 800,
+                     position: 'right'
+                 });
+             });
+             $('.survey').click(function() {
+                curSurveyId = $(this).attr('data-surveyId');
+                setSurvey(curSurveyId);
+                updateHistory();
+                $('.survey-selected').hide();
+                $(this).find('.survey-selected').show();
+             });
+
+             // once the info about surveys retrieved, we can set the info about the current one :)
+             setInfo(curSurveyId);
+             var currentSurveyDiv = $('.survey[data-surveyId="' + curSurveyId + '"]');
+             currentSurveyDiv.find('.survey-selected').show();
+             // scroll to current survey if needed
+             var shiftY = currentSurveyDiv.position().top - $('.surveyDiv').position().top;
+             if (shiftY>400) {
+                $('.surveyDiv').animate({scrollTop: shiftY});
+             }
+         },
+         error: function() { $('#surveys').html("Error: "+url); }
+     });
+
--- a/website/js/app.js
+++ b/website/js/app.js
@@ -0,0 +1,124 @@
+    function getURLParam(name, queryString){
+        if (queryString===undefined) {
+            queryString = location.search;
+        }
+        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(queryString)||[,""])[1].replace(/\+/g, '%20'))||null;
+    };
+
+    var surveys = {};
+
+    var curSurveyId = null;
+    var survey = getURLParam('survey') || "P/DSS2/color";
+    var fov = getURLParam('fov') || 3;
+    if (isNaN(fov)) {
+        fov = 3;
+    }
+    var defaultTarget = 'NGC 2024';
+    var target = getURLParam('target') || 'NGC 2024';
+    var aladin = A.aladin('#aladin-lite-div', {survey: survey, fov: fov, target: target, showGotoControl:false, showFullscreenControl: false});
+    curSurveyId = survey;
+
+    if (target!=defaultTarget) {
+        $('#target').val(target);
+    }
+    $('#target').focus();
+
+    $("#target").keypress(function(event) {
+        if (event.which == 13) {
+            goto();
+        }
+    });
+    function goto() {
+       var newTarget = $("#target").val();
+       aladin.gotoObject(newTarget);
+       // TODO : ne mettre à jour que si le gotoObject est successful
+       updateHistory();
+    }
+
+    function updateHistory() {
+        if (history && history.replaceState) {
+            var target = $('#target').val();
+            var fov = aladin.getFov()[0].toFixed(2);
+            history.replaceState(null, null, "?target=" + encodeURIComponent(target) + "&fov=" + fov + "&survey=" + encodeURIComponent(curSurveyId));
+        }
+    }
+
+    function find(s) {
+        for (var k=0; k<surveys.length; k++) {
+            if (surveys[k].id == s) {
+                return surveys[k];
+            }
+        }
+        return null;
+    }
+
+    function setInfo(s) {
+        var s1 = find(s);
+        if (!s1) {
+            return;
+        }
+        $('#content').html(s1.description+" - <a href=\""+s1.copyrightUrl+"\">"+s1.copyright+"</a>");
+    }
+
+    function setSurvey(s) {
+        aladin.setImageSurvey(s);
+        setInfo(s);
+     }
+    
+    $.ajax({
+         url: "http://aladin.u-strasbg.fr/java/nph-aladin.pl",
+         data: {"frame": "aladinLiteDic"},
+         method: 'GET',
+         dataType: 'jsonp',
+         success: function(data) {
+             var tooltipDescriptions = {};
+             var res = '<div class="surveys-list">';
+             data.sort(function(a,b) { return a.order == b.order ? 0 : a.order < b.order ? -1 : 1; });
+             surveys = data;
+             for (var k=0; k<data.length; k++) {
+                  var id = data[k].id;
+                  var w = /^\w+\/(\w+)/.exec(data[k].treePath)[1];
+                  var s1 = id.substring(2).replace("/color","");
+                  var imgPath = 'survey-previews/' + id.replace(/\//g, "_") + '.jpg';
+                  res += '<div class="survey" data-surveyId="' + id + '"><div class="survey-label">' + s1 + '</div><img class="survey-preview" src="' + imgPath + '" /><div class="survey-selected" style="display: none;"><div class="survey-selected-img"></div></div></div>';
+                  tooltipDescriptions[id] = '<div>Band: ' + w + '</div><div>' + data[k].description + '</div>';
+                  /*
+                  var check = s == survey ? " checked=\"checked\"" : "";
+                  res = res + "<div style=\"display:block;height:20px\">"
+                            + "<input type=\"radio\" id=\""+s+"\" name=\"survey\""+check
+                            +   " onChange=\"setSurvey('"+s+"');\" title=\""+d+"\"/>"
+                            +  "<label for=\""+s+"\" title=\"Band: "+d+"\">"+s1+"</label>"
+                            + "</div>\n";
+                  */
+             }
+             res += '</div>';
+             $('#surveys').html(res);
+
+             $('.survey').each(function() {
+                 $(this).tooltipster({
+                     content: $(tooltipDescriptions[$(this).attr('data-surveyId')]),
+                     delay: 800,
+                     position: 'right'
+                 });
+             });
+             $('.survey').click(function() {
+                curSurveyId = $(this).attr('data-surveyId');
+                setSurvey(curSurveyId);
+                updateHistory();
+                $('.survey-selected').hide();
+                $(this).find('.survey-selected').show();
+             });
+
+             // once the info about surveys retrieved, we can set the info about the current one :)
+             setInfo(curSurveyId);
+             var currentSurveyDiv = $('.survey[data-surveyId="' + curSurveyId + '"]');
+             currentSurveyDiv.find('.survey-selected').show();
+             // scroll to current survey if needed
+             var shiftY = currentSurveyDiv.position().top - $('.surveyDiv').position().top;
+             if (shiftY>400) {
+                $('.surveyDiv').animate({scrollTop: shiftY});
+             }
+         },
+         error: function() { $('#surveys').html("Error: "+url); }
+     });
+
--- a/website/js/jquery.tooltipster.min.js
+++ b/website/js/jquery.tooltipster.min.js
--- a/website/survey-previews/P_2MASS_color.jpg
+++ b/website/survey-previews/P_2MASS_color.jpg
--- a/website/survey-previews/P_DSS2_color.jpg
+++ b/website/survey-previews/P_DSS2_color.jpg
--- a/website/survey-previews/P_DSS2_red.jpg
+++ b/website/survey-previews/P_DSS2_red.jpg
--- a/website/survey-previews/P_Fermi_color.jpg
+++ b/website/survey-previews/P_Fermi_color.jpg
--- a/website/survey-previews/P_Finkbeiner.jpg
+++ b/website/survey-previews/P_Finkbeiner.jpg
--- a/website/survey-previews/P_GALEXGR6_AIS_color.jpg
+++ b/website/survey-previews/P_GALEXGR6_AIS_color.jpg
--- a/website/survey-previews/P_GLIMPSE360.jpg
+++ b/website/survey-previews/P_GLIMPSE360.jpg
--- a/website/survey-previews/P_IRIS_color.jpg
+++ b/website/survey-previews/P_IRIS_color.jpg
--- a/website/survey-previews/P_Mellinger_color.jpg
+++ b/website/survey-previews/P_Mellinger_color.jpg
--- a/website/survey-previews/P_SDSS9_color.jpg
+++ b/website/survey-previews/P_SDSS9_color.jpg
--- a/website/survey-previews/P_SPITZER_color.jpg
+++ b/website/survey-previews/P_SPITZER_color.jpg
--- a/website/survey-previews/P_VTSS_Ha.jpg
+++ b/website/survey-previews/P_VTSS_Ha.jpg
--- a/website/survey-previews/P_XMM_EPIC.jpg
+++ b/website/survey-previews/P_XMM_EPIC.jpg
--- a/website/survey-previews/P_XMM_PN_color.jpg
+++ b/website/survey-previews/P_XMM_PN_color.jpg
--- a/website/survey-previews/P_allWISE_color.jpg
+++ b/website/survey-previews/P_allWISE_color.jpg