.page
  .prev_slide
    <
  .next_slide
    >
  .content  

    %h1 Puzzle
  
    -width = 760
    -height = 475
    
    
    
    .puzzle{:style => "position:relative;", :data => {:width => width.to_s+"px", :height => height.to_s+"px"}}
      =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :id => "chauve-puzzle", :style => "opacity:0.2;width:#{width}px;height:#{height}px;"

      .piece_place{:style => "top:0px;left:0px;", :data => {:rep => 1}}
      .piece_place{:style => "top:0px; left:#{width/3}px;", :data => {:rep => 2}} 
      .piece_place{:style => "top:0px; left:#{width/3*2}px;", :data => {:rep => 3}}
      .piece_place{:style => "top:#{height/3}px;", :data => {:rep => 4}}
      .piece_place{:style => "top:#{height/3}px;left:#{width/3}px;", :data => {:rep => 5}}
      .piece_place{:style => "top:#{height/3}px;left:#{width/3*2}px;", :data => {:rep => 6}}  
      .piece_place{:style => "top:#{height/3*2}px;", :data => {:rep => 7}, }
      .piece_place{:style => "left:#{width/3}px;top:#{height/3*2}px;", :data => {:rep => 8}}
      .piece_place{:style => "left:#{width/3*2}px;top:#{height/3*2}px;", :data => {:rep => 9}}
      
      .pieces
        .piece{:data => {:rep => 1}, :style => "top:448px;left:453px;-webkit-transform:rotate(2deg)"}
          =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :style => ""  
        .piece{:data => {:rep => 2}, :style => "top:390px; left:706px;-webkit-transform:rotate(3deg)"}
          =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :style => "left:-#{width/3}px;"  
        .piece{:data => {:rep => 3}, :style => "left: 754px; top: 153px;-webkit-transform:rotate(-4deg)"}
          =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :style => "left:-#{width/3*2}px;"
    
        .piece{:data => {:rep => 4}, :style => "top:480px;left:210px;-webkit-transform:rotate(-5deg)"}
          =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :style => "top:-#{height/3}px;"
        .piece{:data => {:rep => 5}, :style => "top:30px;left:710px;-webkit-transform:rotate(7deg)"}
          =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :style => "top:-#{height/3}px;left:-#{width/3}px;"
        .piece{:data => {:rep => 6}, :style => "top: 479px; left: 648px;-webkit-transform:rotate(5deg)"}
          =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :style => "top:-#{height/3}px;left:-#{width/3*2}px;"
  
        .piece{:data => {:rep => 7}, :style => "top: 257px; left: 719px;-webkit-transform:rotate(2deg)"}
          =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :style => "top:-#{height/3*2}px;"
        .piece{:data => {:rep => 8}, :style => "left: 755px; top: 74px;-webkit-transform:rotate(-6deg)"}
          =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :style => "top:-#{height/3*2}px;left:-#{width/3}px;"
        .piece{:data => {:rep => 9}, :style => "top:440px; left:40px;-webkit-transform:rotate(2deg)"}
          =image_tag "/assets/plaquettes/chauve-souri-jeu.jpg", :style => "top:-#{height/3*2}px;left:-#{width/3*2}px;"
      
      .success{:style => "margin:1em;display:none;"}
        
    
        %center
          %h3{:style => "text-align:center;"} Bravo, tu as réussi à reconstituer le puzzle.
          
          .btn.reset
            Rejouer
      
      <style>
      =".piece_place, .piece{"
      ="  width:#{width/3}px;height:#{height/3}px;"
      ="}"
      =".piece img{"
      ="  width:#{width}px;max-width:#{width}px;"
      ="}"
      </style>
      
      :css
        .piece_place{
          overflow:hidden;position:absolute;
        }
        .piece{
          box-shadow:0 0 10px rgba(0,0,0,0.5);
          overflow:hidden;position:absolute;
        }
        .piece img{
          position:absolute;
        }