# HG changeset patch
# User veltr
# Date 1338229041 -7200
# Node ID e69e78a0b5e6fa21e611fe5ad8e5f474eb82ada4
# Parent  53bda0920905548cffc2165386d3a4ee139b16c5
started integration

diff -r 53bda0920905 -r e69e78a0b5e6 .hgignore
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/.hgignore	Mon May 28 20:17:21 2012 +0200
@@ -0,0 +1,3 @@
+
+syntax: regexp
+^\.project$
\ No newline at end of file
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/css/Rabbit_On_The_Moon.ttf
Binary file crea/integration/css/Rabbit_On_The_Moon.ttf has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/css/musitag.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/integration/css/musitag.css	Mon May 28 20:17:21 2012 +0200
@@ -0,0 +1,517 @@
+@font-face
+{
+    font-family: "Rabbit"; src: url(Rabbit_On_The_Moon.ttf);
+}
+
+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;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a img {
+    border: none;
+}
+
+ul, li {
+    list-style: none;
+}
+
+body {
+    font-family: "Rabbit";
+    background: url(../img/wood-background.jpg);
+}
+
+.big-container {
+    width: 980px; margin: 0 auto;
+}
+
+.home-header {
+    background: url(../img/home-header.png);
+    width: 960px; height: 150px; padding: 5px 10px;
+    color: #ffffff;
+}
+
+.home-header h1 {
+    float: left; margin-left: 10px; height: 120px; padding-top: 15px; padding-left: 140px; font-size: 60px;
+    background: url(../img/logo-home.png) left no-repeat;
+}
+
+.home-header h2 {
+    float: right; width: 480px; margin-top: 20px; font-size: 30px; text-align: center;
+}
+
+.home-media {
+    float: left; width: 440px; height: 130px; padding: 25px; background: url(../img/home-media-box.png);
+}
+
+.home-media-image {
+    float: left; margin-top: 5px; width: 135px; height: 120px;
+}
+
+.home-media h3 {
+    font-size: 28px; margin-left: 145px;
+}
+
+.home-media h3 a {
+    color: #000000;
+}
+
+.home-media h4 {
+    font-size: 24px; margin-left: 145px;
+}
+
+.home-media h4 a {
+    color: #000080;
+}
+
+.home-dataviz {
+    width: 140px; margin-left: 10px; float: left;
+}
+
+.home-dataviz li {
+    float: left;
+}
+
+.tag-container-50 {
+    position:relative; width:50px; height:50px; cursor: pointer;
+}
+
+.tag-shadow, .tag-color, .tag-emoticon {
+    position: absolute;
+}
+
+.tag-container-50 .tag-shadow, .tag-container-50 .tag-color, .tag-container-50 .tag-emoticon {
+    width:50px; height:50px; background: url(../img/tags50.png) no-repeat;
+}
+
+.tag-container-50 .tag-shadow {
+    left: 2px; top: 2px; background-position: -200px -50px;
+}
+
+.tag-container-50:hover .tag-shadow {
+    left: 0; top: 0;
+}
+
+.tag-container-50:hover .tag-color, .tag-container-50:hover .tag-emoticon {
+    left: 2px; top: 2px;
+}
+
+.tag-container-50 .tag-yellow {
+    background-position: -50px 0;
+}
+
+.tag-container-50 .tag-green {
+    background-position: -100px 0;
+}
+
+.tag-container-50 .tag-red {
+    background-position: -150px 0;
+}
+
+.tag-container-50 .tag-blue {
+    background-position: -200px 0;
+}
+
+.tag-container-50 .tag-happy {
+    background-position: 0 -50px;
+}
+
+.tag-container-50 .tag-unhappy {
+    background-position: -50px -50px;
+}
+
+.tag-container-50 .tag-laughing {
+    background-position: -100px -50px;
+}
+
+.tag-container-50 .tag-surprised {
+    background-position: -150px -50px;
+}
+
+.tag-container-80 {
+    position:relative; width:80px; height:80px; cursor: pointer;
+}
+
+.tag-container-80 .tag-shadow, .tag-container-80 .tag-color, .tag-container-80 .tag-emoticon {
+    width:80px; height:80px; background: url(../img/tags80.png) no-repeat;
+}
+
+.tag-container-80 .tag-shadow {
+    left: 4px; top: 4px; background-position: -320px -80px;
+}
+
+.tag-container-80:hover .tag-shadow {
+    left: 0; top: 0;
+}
+
+.tag-container-80:hover .tag-color, .tag-container-80:hover .tag-emoticon {
+    left: 4px; top: 4px;
+}
+
+.tag-container-80 .tag-yellow {
+    background-position: -80px 0;
+}
+
+.tag-container-80 .tag-green {
+    background-position: -160px 0;
+}
+
+.tag-container-80 .tag-red {
+    background-position: -240px 0;
+}
+
+.tag-container-80 .tag-blue {
+    background-position: -320px 0;
+}
+
+.tag-container-80 .tag-happy {
+    background-position: 0 -80px;
+}
+
+.tag-container-80 .tag-unhappy {
+    background-position: -80px -80px;
+}
+
+.tag-container-80 .tag-laughing {
+    background-position: -160px -80px;
+}
+
+.tag-container-80 .tag-surprised {
+    background-position: -240px -80px;
+}
+
+.player-header {
+    width: 980px; height: 220px;
+}
+
+.player-topleft {
+    width: 310px; height: 200px; float: left; padding: 10px; background: url(../img/player-topleft.png);
+}
+
+.player-topleft h1 {
+    color: #ffffff; font-size: 45px; text-align: center;
+}
+
+.back-home {
+    background: url(../img/back-home.png); width: 120px; height: 90px;
+    padding: 5px 20px 5px 100px; margin: 10px auto; font-size: 30px; text-align: center;
+}
+
+.back-home a {
+    color: #ffffff;
+}
+
+.player-album {
+    width: 610px; height: 190px; padding: 15px 20px; float: left;
+    background: url(../img/player-album.png); text-align: right;
+}
+
+.player-album img {
+    float: right; margin-left: 10px;
+}
+
+.player-album h2 {
+    font-size: 40px;
+}
+
+.player-album h3 {
+    font-size: 36px; color: #000080;
+}
+
+.player-timeline {
+    width: 930px; height: 50px; padding: 15px 25px; position: relative;
+    background: url(../img/slider-bg.png); z-index: 40;
+}
+
+.player-playpause {
+    float: left; width: 45px; height: 50px; background: url(../img/playpause.png);
+}
+
+.status-play:hover {
+    background-position: 0 -50px;
+}
+
+.status-pause:hover {
+    background-position: -45px 0;
+}
+
+.status-pause:hover {
+    background-position: -45px -50px;
+}
+
+.player-slider {
+    margin: 14px 0 0 60px; border: none; height: 25px; width: 870px; background: url(../img/slider.png);
+}
+
+.player-slider .ui-slider-range {
+    background: url(../img/slider.png) left bottom;
+}
+
+.player-slider .ui-slider-handle {
+    width: 30px; height: 72px; background: url(../img/slider-handle.png);
+    border: none; top: -22px; margin-left: -14px;
+}
+
+.player-belowtl {
+    width: 870px; margin-left: 90px; position: relative;
+}
+
+.player-annotations {
+    position: absolute; top: -15px; left: 0; z-index: 5;
+}
+
+.player-annotation-column {
+    padding: 15px 0 0; margin-right: 8px; width: 50px; float: left;
+    background: url(../img/liane.png) top no-repeat;
+}
+
+.player-tag {
+    margin: 8px 0 0;
+}
+
+.player-tag:first-child {
+    z-index: 20;
+}
+
+.player-tag:nth-child(2) {
+    z-index: 19;
+}
+
+.player-tag:nth-child(3) {
+    z-index: 18;
+}
+
+.player-tag:nth-child(4) {
+    z-index: 17;
+}
+
+.player-tag:nth-child(5) {
+    z-index: 16;
+}
+
+.player-tag:nth-child(6) {
+    z-index: 15;
+}
+
+.player-tag:nth-child(7) {
+    z-index: 14;
+}
+
+.player-tag:nth-child(8) {
+    z-index: 13;
+}
+
+.player-tag:nth-child(9) {
+    z-index: 12;
+}
+
+.player-tag:nth-child(10) {
+    z-index: 11;
+}
+
+.player-tag:first-child:nth-last-child(5) ~ .player-tag {
+    margin: -3px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(6) ~ .player-tag {
+    margin: -12px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(7) ~ .player-tag {
+    margin: -18px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(8) ~ .player-tag {
+    margin: -23px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(9) ~ .player-tag {
+    margin: -26px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(10) ~ .player-tag {
+    margin: -29px 0 0;
+}
+
+.position-bar {
+    width: 40px; background: url(../img/position-bar.png) bottom;
+    position: absolute; top: -10px; left: 0; margin-left: -20px;
+}
+
+.position-bar-player {
+    height: 270px; z-index: 4;
+}
+
+.position-bar-annotation {
+    height: 75px; z-index: 25;
+}
+
+
+.et-toi {
+    position: absolute; top: 250px; left: -90px; cursor: pointer;
+    width: 260px; height: 140px; background: url(../img/et-toi.png); z-index: 30;
+}
+
+.et-toi-tag {
+    margin: 60px 0 0 168px; -moz-transform: rotate(-15deg);
+}
+
+.annotate {
+    position: absolute; top: 50px; left: -90px; width: 800px; height: 280px; padding: 25px 15px;
+    z-index: 30; background: url(../img/annotate-bg.png); display: none;
+}
+
+.annotate-section {
+    float: left; width: 197px;
+}
+
+.annotate-separator {
+    float: left; width: 3px; background: url(../img/annotate-separator.png); height: 100px; margin: 120px 0 0;
+}
+
+.annotate-section h2 {
+    float: left; font-size: 60px; width: 60px; height: 60px; text-align: center;
+}
+
+.annotate-section h3 {
+    font-size: 24px; text-align: center; margin: 0 10px;
+}
+
+.tag-selector {
+    margin: 12px 8px;
+}
+
+.selector-tag {
+    float: left; margin: 5px;
+}
+
+.record {
+    width: 135px; height: 135px; background: url(../img/record.png);
+    margin: 35px 31px;
+}
+
+.record:hover {
+    background-position: 0 -135px;
+}
+
+.note-envoi {
+    width: 160px; height: 218px; background: url(../img/note-envoi.png);
+    margin: 5px 0 0 5px; position: relative;
+}
+
+.envoi-tag {
+    position: absolute; left: 102px; top: 75px; -moz-transform: rotate(-15deg);
+}
+
+/* */
+
+@-webkit-keyframes crossfade {
+    0% {
+        opacity: 0
+    }
+    12% {
+        opacity: 1
+    }
+    25% {
+        opacity: 1
+    }
+    37% {
+        opacity: 0
+    }
+    100% {
+        opacity: 0
+    }
+}
+
+@-moz-keyframes crossfade {
+    0% {
+        opacity: 0
+    }
+    12% {
+        opacity: 1
+    }
+    25% {
+        opacity: 1
+    }
+    37% {
+        opacity: 0
+    }
+    100% {
+        opacity: 0
+    }
+}
+
+.crossfade {
+    -webkit-animation-name: crossfade;  
+    -webkit-animation-iteration-count: infinite;
+    -moz-animation-name: crossfade;  
+    -moz-animation-iteration-count: infinite;
+}
+
+.tag-emoticon.crossfade {
+    opacity: 0;
+}
+
+.anim-6s {
+    -webkit-animation-duration: 6s; 
+    -moz-animation-duration: 6s;  
+}
+
+.anim-6s.cf-1 {
+    -webkit-animation-delay: 1.5s;
+    -moz-animation-delay: 1.5s
+}
+
+.anim-6s.cf-2 {
+    -webkit-animation-delay: 3s;
+    -moz-animation-delay: 3s
+}
+
+.anim-6s.cf-3 {
+    -webkit-animation-delay: 4.5s;
+    -moz-animation-delay: 4.5s
+}
+
+.anim-8s {
+    -webkit-animation-duration: 8s; 
+    -moz-animation-duration: 8s;  
+}
+
+.anim-8s.cf-1 {
+    -webkit-animation-delay: 2s;
+    -moz-animation-delay: 2s
+}
+
+.anim-8s.cf-2 {
+    -webkit-animation-delay: 4s;
+    -moz-animation-delay: 4s
+}
+
+.anim-8s.cf-3 {
+    -webkit-animation-delay: 6s;
+    -moz-animation-delay: 6s
+}
\ No newline at end of file
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/home.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/integration/home.html	Mon May 28 20:17:21 2012 +0200
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>Musitag - Futur en Seine 2012</title>
+        <link rel="stylesheet" type="text/css" href="css/musitag.css" />
+    </head>
+    <body>
+        <div class="big-container">
+            <div class="home-header">
+                <h1>Musitag</h1>
+                <h2>Mets tes couleurs, tes émotions<br />et ta voix sur la musique !</h2>
+            </div>
+            <div class="home-media">
+                <a href="#">
+                    <img class="home-media-image" src="media/wari-120.jpg" />
+                </a>
+                <h3>
+                    <a href="#">Au Clair de la Lune</a>
+                </h3>
+                <h4>
+                    <a href="#">Steve Waring</a>
+                </h4>
+                <ul class="home-dataviz home-dataviz-colors">
+                    <li>
+                        <div class="tag-container-50">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                        </div>
+                    </li>
+                    <li style="width: 40px">
+                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-yellow"></div>
+                        </div>
+                    </li>
+                    <li style="width: 25px">
+                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                        </div>
+                    </li>
+                    <li style="width: 10px">
+                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                        </div>
+                    </li>
+                </ul>
+                <ul class="home-dataviz home-dataviz-emoticon">
+                    <li>
+                        <div class="tag-container-50">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                    </li>
+                    <li style="width: 40px">
+                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
+                            <div class="tag-color"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                    </li>
+                    <li style="width: 25px">
+                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
+                            <div class="tag-color"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                    </li>
+                    <li style="width: 10px">
+                        <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
+                            <div class="tag-color"></div>
+                            <div class="tag-emoticon tag-unhappy"></div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="home-media">
+                <a href="#">
+                    <img class="home-media-image" src="media/wari-120.jpg" />
+                </a>
+                <h3>
+                    <a href="#">Au Clair de la Lune</a>
+                </h3>
+                <h4>
+                    <a href="#">Steve Waring</a>
+                </h4>
+            </div>
+            <div class="home-media">
+                <a href="#">
+                    <img class="home-media-image" src="media/wari-120.jpg" />
+                </a>
+                <h3>
+                    <a href="#">Au Clair de la Lune</a>
+                </h3>
+                <h4>
+                    <a href="#">Steve Waring</a>
+                </h4>
+            </div>
+            <div class="home-media">
+                <a href="#">
+                    <img class="home-media-image" src="media/wari-120.jpg" />
+                </a>
+                <h3>
+                    <a href="#">Au Clair de la Lune</a>
+                </h3>
+                <h4>
+                    <a href="#">Steve Waring</a>
+                </h4>
+            </div>
+            <div class="home-media">
+                <a href="#">
+                    <img class="home-media-image" src="media/wari-120.jpg" />
+                </a>
+                <h3>
+                    <a href="#">Au Clair de la Lune</a>
+                </h3>
+                <h4>
+                    <a href="#">Steve Waring</a>
+                </h4>
+            </div>
+            <div class="home-media">
+                <a href="#">
+                    <img class="home-media-image" src="media/wari-120.jpg" />
+                </a>
+                <h3>
+                    <a href="#">Au Clair de la Lune</a>
+                </h3>
+                <h4>
+                    <a href="#">Steve Waring</a>
+                </h4>
+            </div>
+        </div>
+    </body>
+</html>
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/annotate-bg.png
Binary file crea/integration/img/annotate-bg.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/annotate-separator.png
Binary file crea/integration/img/annotate-separator.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/back-home.png
Binary file crea/integration/img/back-home.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/et-toi.png
Binary file crea/integration/img/et-toi.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/home-header.png
Binary file crea/integration/img/home-header.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/home-media-box.png
Binary file crea/integration/img/home-media-box.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/liane.png
Binary file crea/integration/img/liane.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/logo-home.png
Binary file crea/integration/img/logo-home.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/note-envoi.png
Binary file crea/integration/img/note-envoi.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/player-album.png
Binary file crea/integration/img/player-album.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/player-topleft.png
Binary file crea/integration/img/player-topleft.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/playpause.png
Binary file crea/integration/img/playpause.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/position-bar.png
Binary file crea/integration/img/position-bar.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/record.png
Binary file crea/integration/img/record.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/slider-bg.png
Binary file crea/integration/img/slider-bg.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/slider-handle.png
Binary file crea/integration/img/slider-handle.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/slider.png
Binary file crea/integration/img/slider.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/tags50.png
Binary file crea/integration/img/tags50.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/tags80.png
Binary file crea/integration/img/tags80.png has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/img/wood-background.jpg
Binary file crea/integration/img/wood-background.jpg has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/media/hdes-120.jpg
Binary file crea/integration/media/hdes-120.jpg has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/media/jcde-120.jpg
Binary file crea/integration/media/jcde-120.jpg has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/media/wari-120.jpg
Binary file crea/integration/media/wari-120.jpg has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/media/wari-190.jpg
Binary file crea/integration/media/wari-190.jpg has changed
diff -r 53bda0920905 -r e69e78a0b5e6 crea/integration/player.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/integration/player.html	Mon May 28 20:17:21 2012 +0200
@@ -0,0 +1,404 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>Musitag - Futur en Seine 2012</title>
+        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery.ui.base.css" />
+        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery.ui.theme.css" />
+        <link rel="stylesheet" type="text/css" href="css/musitag.css" />
+        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
+        <script type="text/javascript">
+            $(function() {
+                $('.player-slider').slider({
+                    range: "min",
+                    min: 0,
+                    max: 2000,
+                    change: function(_evt,_ui) {
+                        var _x = $(_ui.handle).position().left;
+                        $(".et-toi").css({
+                            left: Math.max(-90,Math.min(640, _x - 130)) + "px"
+                        });
+                        $(".annotate").css({
+                            left: Math.max(-90,Math.min(70, _x - 400)) + "px"
+                        });
+                        $(".position-bar").css({
+                            left: _x
+                        })
+                    }
+                });
+                $('.et-toi').click(function() {
+                    $('.et-toi').hide();
+                    $('.annotate').show();
+                    $('.position-bar').removeClass('position-bar-player').addClass('position-bar-annotation');
+                });
+            });
+        </script>
+    </head>
+    <body>
+        <div class="big-container">
+            <div class="player-header">
+                <div class="player-topleft">
+                    <h1>Musitag</h1>
+                    <div class="back-home">
+                        <a href="home.html">Liste des chansons</a>
+                    </div>
+                </div>
+                <div class="player-album">
+                    <img src="media/wari-190.jpg" />
+                    <h2>Au Clair de la Lune</h2>
+                    <h3>Steve Waring</h3>
+                </div>
+            </div>
+            
+            <div class="player-timeline">
+                <div class="player-playpause status-play"></div>
+                <div class="player-slider"></div>
+            </div>
+            <div class="player-belowtl">
+                <div class="player-annotations">
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-yellow"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-unhappy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-yellow"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-unhappy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag tag-crowded">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-yellow"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag tag-crowded">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag tag-crowded">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag tag-crowded">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-yellow"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-red"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-yellow"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-yellow"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-yellow"></div>
+                            <div class="tag-emoticon tag-surprised"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-green"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                    </div>
+                    <div class="player-annotation-column">
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-blue"></div>
+                            <div class="tag-emoticon tag-happy"></div>
+                        </div>
+                        <div class="tag-container-50 player-tag">
+                            <div class="tag-shadow"></div>
+                            <div class="tag-color tag-yellow"></div>
+                            <div class="tag-emoticon tag-laughing"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="position-bar position-bar-player"></div>
+                <div class="et-toi">
+                    <div class="tag-container-50 et-toi-tag">
+                        <div class="tag-shadow"></div>
+                        <div class="tag-color tag-green crossfade anim-6s cf-3"></div>
+                        <div class="tag-color tag-yellow crossfade anim-6s cf-2"></div>
+                        <div class="tag-color tag-red crossfade anim-6s cf-1"></div>
+                        <div class="tag-color tag-blue crossfade anim-6s"></div>
+                        <div class="tag-emoticon tag-laughing crossfade anim-8s"></div>
+                        <div class="tag-emoticon tag-happy crossfade anim-8s cf-1"></div>
+                        <div class="tag-emoticon tag-unhappy crossfade anim-8s cf-2"></div>
+                        <div class="tag-emoticon tag-surprised crossfade anim-8s cf-3"></div>
+                    </div>
+                </div>
+                <div class="annotate">
+                    <div class="annotate-section">
+                        <h2>1</h2>
+                        <h3>Choisis<br />une couleur</h3>
+                        <div class="tag-selector">
+                            <div class="tag-container-80 selector-tag">
+                                <div class="tag-shadow"></div>
+                                <div class="tag-color tag-red"></div>
+                            </div>
+                            <div class="tag-container-80 selector-tag">
+                                <div class="tag-shadow"></div>
+                                <div class="tag-color tag-yellow"></div>
+                            </div>
+                            <div class="tag-container-80 selector-tag">
+                                <div class="tag-shadow"></div>
+                                <div class="tag-color tag-green"></div>
+                            </div>
+                            <div class="tag-container-80 selector-tag">
+                                <div class="tag-shadow"></div>
+                                <div class="tag-color tag-blue"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="annotate-separator"></div>
+                    <div class="annotate-section">
+                        <h2>2</h2>
+                        <h3>Choisis<br />une émotion</h3>
+                        <div class="tag-selector">
+                            <div class="tag-container-80 selector-tag">
+                                <div class="tag-shadow"></div>
+                                <div class="tag-color"></div>
+                                <div class="tag-emoticon tag-happy"></div>
+                            </div>
+                            <div class="tag-container-80 selector-tag">
+                                <div class="tag-shadow"></div>
+                                <div class="tag-color"></div>
+                                <div class="tag-emoticon tag-unhappy"></div>
+                            </div>
+                            <div class="tag-container-80 selector-tag">
+                                <div class="tag-shadow"></div>
+                                <div class="tag-color"></div>
+                                <div class="tag-emoticon tag-laughing"></div>
+                            </div>
+                            <div class="tag-container-80 selector-tag">
+                                <div class="tag-shadow"></div>
+                                <div class="tag-color"></div>
+                                <div class="tag-emoticon tag-surprised"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="annotate-separator"></div>
+                    <div class="annotate-section">
+                        <h2>3</h2>
+                        <h3>Enregistre<br />ta voix</h3>
+                        <div class="record"></div>
+                    </div>
+                    <div class="annotate-separator"></div>
+                    <div class="annotate-section">
+                        <h2>4</h2>
+                        <h3>Envoie<br />ton Musitag</h3>
+                        <div class="note-envoi">
+                            <div class="tag-container-80 envoi-tag">
+                                <div class="tag-shadow"></div>
+                                <div class="tag-color"></div>
+                                <div class="tag-emoticon"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+    </body>
+</html>