--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/css/egonomy.css	Fri Jan 18 18:27:32 2013 +0100
@@ -0,0 +1,265 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.clear{
+    clear: both;
+}
+
+input::-moz-focus-inner {
+    border: 0 none;
+    padding: 0;
+}
+
+/* END RESET.CSS */
+
+html {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+    background: #FFFFFF;
+}
+
+a {
+    text-decoration: none; color: inherit;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.fullwidth {
+    width: 100%; float: left; clear: both;
+}
+
+header, .main {
+    width: 968px; margin: 0 auto;
+}
+
+.header-wrap {
+    background: #666666; /* Old browsers */
+    background: -moz-linear-gradient(top,  #666666 20%, #333333 80%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#666666), color-stop(80%,#333333)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #666666 20%,#333333 80%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #666666 20%,#333333 80%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #666666 20%,#333333 80%); /* IE10+ */
+    background: linear-gradient(to bottom,  #666666 20%,#333333 80%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
+}
+
+header {
+    height: 40px; 
+}
+
+
+h1 {
+    font-weight: bold;
+    font-size: 24px;
+    text-shadow: 1px 1px 1px #000; color: #f0f0f0;
+}
+
+nav {
+    text-align: right; color: #ffffff; font-size: 13px; margin: 5px 0;
+}
+
+h2 {
+    font-size: 18px; font-weight: bold; color: #003366;
+    margin: 10px 0 5px; padding-bottom: 5px; border-bottom: 1px solid #666;
+}
+
+h3 {
+    font-size: 13px; font-weight: bold; color: #555555; margin: 4px 0;
+}
+
+h4 {
+    font-size: 12px; font-style: italic; margin: 4px 0;
+}
+
+p {
+    font-size: 11px; margin: 4px 0;
+}
+
+strong {
+    font-weight: bold;
+}
+
+.main-wrap {
+    background: #ffffff; /* Old browsers */
+    background: -moz-linear-gradient(top,  #f0f0f0 20%, #ffffff 80%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#f0f0f0), color-stop(80%,#ffffff)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #f0f0f0 20%,#ffffff 80%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #f0f0f0 20%,#ffffff 80%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #f0f0f0 20%,#ffffff 80%); /* IE10+ */
+    background: linear-gradient(to bottom,  #f0f0f0 20%,#ffffff 80%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
+}
+
+footer {
+    margin: 40px 0 20px; padding: 10px 0 0; border-top: 1px solid #666;
+}
+
+.footer-list li {
+    float: right; margin-left: 10px;
+}
+
+.search-field {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    width: 100%; border: none; background: #d0e0FF;
+    padding: 2px; margin: 3px 0; height: 20px;
+    font-size: 13px;
+}
+
+.placeholder {
+    background: #d0e0FF;
+}
+
+.column {
+    float: left; margin: 6px 0 6px 16px;
+}
+
+.subcol {
+    float: left; margin: 2px 0 4px 12px;
+}
+
+.column-third {
+    float: left; width: 312px;
+}
+
+.column-third:nth-child(3n+1) {
+    margin-left: 0;
+}
+
+.subcol-third-third {
+    width: 96px; 
+}
+
+.subcol-third-third:nth-child(3n+1) {
+    margin-left: 0;
+}
+
+.img-ninth {
+    width: 96px; height: 72px;
+}
+
+.column-half {
+    width: 476px;
+}
+
+.column-half:nth-child(2n+1) {
+    margin-left: 0;
+}
+
+.subcol-half-fourth {
+    width: 110px;
+}
+
+.img-eighth {
+    width: 110px; height: 82px;
+}
+
+.subcol-half-fourth:nth-child(4n+1) {
+    margin-left: 0;
+}
+
+/* STYLES SPECIFIQUES A home.html */
+
+.homeviz {
+    float: left; width: 968px; height: 400px; margin: 2px 0 4px;
+}
+
+/* STYLES SPECIFIQUES A image.html */
+
+.fullphoto {
+    width: 476px; height: 350px;
+}
+
+.image-metadata {
+    width: 100%; margin: 30px 0 0; font-size: 14px;
+}
+
+.image-metadata th {
+    font-weight: bold; width: 152px; text-align: left; padding: 4px 10px 4px 0;
+}
+
+.image-metadata td {
+    width: 314px; padding: 4px 0;
+}
+
+.image-keywords {
+    width: 100%; margin: 10px 0 0;
+}
+
+.image-keywords th {
+    font-size: 14px; font-weight: bold; text-align: left; padding: 4px 0 4px 0; width: 33%;
+}
+
+.image-keywords tbody tr:nth-child(odd) {
+    background: #e0e0e0;
+}
+
+.image-keywords td {
+    font-size: 13px; text-align: left; padding: 4px 4px 4px 0;
+}
+
+.add-button {
+    background: #D0E0FF; margin: 5px 0; padding: 6px; border-radius: 4px; color: #003366;
+    font-weight: bold; font-size: 13px; float: left;
+}
+
+.big-button {
+    background: #D0E0FF; margin: 10px 0 10px 16px; padding: 8px; border-radius: 4px; color: #003366;
+    font-weight: bold; font-size: 15px; width: 214px; text-align: center; float: left;
+}
+
+.big-button:first-child {
+    margin-left: 0;
+}
+

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/home.html	Fri Jan 18 18:27:32 2013 +0100
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>eGonomy &raquo; Accueil</title>
+        
+        <link rel="stylesheet" type="text/css" href="css/egonomy.css" />
+    </head>
+
+    <body>
+        <div class="header-wrap fullwidth">
+            <header>
+                <h1 class="column column-third">TagItAll by eGonomy</h1>
+                <form class="column column-third">
+                    <input class="search-field" type="search" placeholder="Rechercher" />
+                </form>
+                <nav class="column column-third">
+                    <a href="#">Se connecter</a>
+                </nav>
+            </header>
+        </div>
+        <div class="main-wrap fullwidth">
+
+            <div class="main">
+                <div class="fullwidth">
+                    <h2>Contenus à annoter</h2>
+                    <div class="homeviz placeholder">
+                        Visualisation des contenus en souffrance
+                    </div>
+                </div>
+                <div class="fullwidth">
+                    <div class="column column-third">
+                        <h2>Dernières images annotées</h2>
+                        <div class="fullwidth">
+                            <div class="subcol subcol-third-third">
+                                <div class="img-ninth placeholder"></div>
+                                <h3>Titre de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-third-third">
+                                <div class="img-ninth placeholder"></div>
+                                <h3>Titre de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-third-third">
+                                <div class="img-ninth placeholder"></div>
+                                <h3>Titre de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column column-third">
+                        <h2>Derniers fragments annotés</h2>
+                        <div class="fullwidth">
+                            <div class="subcol subcol-third-third">
+                                <div class="img-ninth placeholder"></div>
+                                <h3>Titre du fragment</h3>
+                                <h4>Fragment de Titre de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-third-third">
+                                <div class="img-ninth placeholder"></div>
+                                <h3>Titre du fragment</h3>
+                                <h4>Fragment de Titre de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-third-third">
+                                <div class="img-ninth placeholder"></div>
+                                <h3>Titre du fragment</h3>
+                                <h4>Fragment de Titre de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column column-third">
+                        <h2>Derniers renkans créés</h2>
+                        <div class="fullwidth">
+                            <div class="subcol subcol-third-third">
+                                <div class="img-ninth placeholder"></div>
+                                <h3>Titre du Renkan</h3>
+                                <p>Créé par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-third-third">
+                                <div class="img-ninth placeholder"></div>
+                                <h3>Titre du Renkan</h3>
+                                <p>Créé par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-third-third">
+                                <div class="img-ninth placeholder"></div>
+                                <h3>Titre du Renkan</h3>
+                                <p>Créé par <strong>Julien75</strong></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <footer class="fullwidth">
+                    <ul class="footer-list">
+                        <li>&copy; IRI 2013</li>
+                    </ul>
+                </footer>
+            
+            </div>
+
+        </div>
+    </body>
+</html>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/image.html	Fri Jan 18 18:27:32 2013 +0100
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>eGonomy &raquo; Image</title>
+        
+        <link rel="stylesheet" type="text/css" href="css/egonomy.css" />
+    </head>
+
+    <body>
+        <div class="header-wrap fullwidth">
+            <header>
+                <h1 class="column column-third">TagItAll by eGonomy</h1>
+                <form class="column column-third">
+                    <input class="search-field" type="search" placeholder="Rechercher" />
+                </form>
+                <nav class="column column-third">
+                    <a href="#">Se connecter</a>
+                </nav>
+            </header>
+        </div>
+        <div class="main-wrap fullwidth">
+
+            <div class="main">
+                <div class="fullwidth">
+                    <div class="column column-half">
+                        <h2>Titre de l'image</h2>
+                        <div class="fullphoto placeholder">
+                            Photo à annoter
+                        </div>
+                    </div>
+                    <div class="column column-half">
+                        <table class="image-metadata">
+                            <tr>
+                                <th>Description&nbsp;:</th>
+                                <td>Lorem Ipsum, Ceci est la description de l'&oelig;uvre représentée dans l'image.</td>
+                            </tr>
+                            <tr>
+                                <th>Localisation&nbsp;:</th>
+                                <td>Musée du Louvre, Paris.</td>
+                            </tr>
+                        </table>
+                        <h2>Mots-clés</h2>
+                        <table class="image-keywords">
+                            <thead>
+                                <tr>
+                                    <th>Mot-clé</th>
+                                    <th>Relation à l'image</th>
+                                    <th>Source / Annoté par</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>Louis XV</td>
+                                    <td>est représenté(e)</td>
+                                    <td>Import Base RMN</td>
+                                </tr>
+                                <tr>
+                                    <td>Marcel Duchamp</td>
+                                    <td>est l'auteur</td>
+                                    <td>Import Base RMN</td>
+                                </tr>
+                                <tr>
+                                    <td>Paris</td>
+                                    <td>est représenté(e)</td>
+                                    <td>Enrichissement Pertimm</td>
+                                </tr>
+                                <tr>
+                                    <td>Liberté</td>
+                                    <td>est symbolisé(e)</td>
+                                    <td>Julien75</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <div class="fullwidth">
+                            <a href="#" class="add-button">+ Ajouter un mot-clé</a>
+                        </div>
+                        <div class="fullwidth">
+                            <a href="#" class="big-button">Créer un fragment</a>
+                            <a href="#" class="big-button">Créer un Renkan</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="fullwidth">
+                    <div class="column column-half">
+                        <h2>Fragments de cette image</h2>
+                        <div class="fullwidth">
+                            <div class="subcol subcol-half-fourth">
+                                <div class="img-eighth placeholder"></div>
+                                <h3>Titre du fragment</h3>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-half-fourth">
+                                <div class="img-eighth placeholder"></div>
+                                <h3>Titre du fragment</h3>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-half-fourth">
+                                <div class="img-eighth placeholder"></div>
+                                <h3>Titre du fragment</h3>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-half-fourth">
+                                <div class="img-eighth placeholder"></div>
+                                <h3>Titre du fragment</h3>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="column column-half">
+                        <h2>Renkans utilisant cette image</h2>
+                        <div class="fullwidth">
+                            <div class="subcol subcol-half-fourth">
+                                <div class="img-eighth placeholder"></div>
+                                <h3>Titre du Renkan</h3>
+                                <p>Créé par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-half-fourth">
+                                <div class="img-eighth placeholder"></div>
+                                <h3>Titre du Renkan</h3>
+                                <p>Créé par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-half-fourth">
+                                <div class="img-eighth placeholder"></div>
+                                <h3>Titre du Renkan</h3>
+                                <p>Créé par <strong>Julien75</strong></p>
+                            </div>
+                            <div class="subcol subcol-half-fourth">
+                                <div class="img-eighth placeholder"></div>
+                                <h3>Titre du Renkan</h3>
+                                <p>Créé par <strong>Julien75</strong></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <footer class="fullwidth">
+                    <ul class="footer-list">
+                        <li>&copy; IRI 2013</li>
+                    </ul>
+                </footer>
+            
+            </div>
+
+        </div>
+    </body>
+</html>