.page
  .prev_slide
    <
  .next_slide
    >
  .content  

    %h1 Puzzle
  
    -width = 533
    -height = 600
    
    
    
    .puzzle.puzzle_insectes{:style => "position:relative;", :data => {:width => width.to_s+"px", :height => height.to_s+"px"}}
      .success{:style => "margin:1em;display:none;width:460px;right:-10px;top:10px;position:absolute;"}
        %h3 Bravo, tu as réussi à reconstituer le puzzle.

        %center
          .btn.reset
            Rejouer
      =image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :id => "puzzle-insectes", :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/fourmi-puzzle.jpg", :style => ""  
        .piece{:data => {:rep => 2}, :style => "top:390px; left:706px;-webkit-transform:rotate(3deg)"}
          =image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "left:-#{width/3}px;"  
        .piece{:data => {:rep => 3}, :style => "left: 754px; top: 153px;-webkit-transform:rotate(-4deg)"}
          =image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "left:-#{width/3*2}px;"
    
        .piece{:data => {:rep => 4}, :style => "top:280px;left:700px;-webkit-transform:rotate(-5deg)"}
          =image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "top:-#{height/3}px;"
        .piece{:data => {:rep => 5}, :style => "top:30px;left:710px;-webkit-transform:rotate(7deg)"}
          =image_tag "/assets/plaquettes/fourmi-puzzle.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/fourmi-puzzle.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/fourmi-puzzle.jpg", :style => "top:-#{height/3*2}px;"
        .piece{:data => {:rep => 8}, :style => "left: 755px; top: 74px;-webkit-transform:rotate(-6deg)"}
          =image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "top:-#{height/3*2}px;left:-#{width/3}px;"
        .piece{:data => {:rep => 9}, :style => "top:440px; left:700px;-webkit-transform:rotate(2deg)"}
          =image_tag "/assets/plaquettes/fourmi-puzzle.jpg", :style => "top:-#{height/3*2}px;left:-#{width/3*2}px;"
      
      
      
      <style>
      =".puzzle_insectes .piece_place, .puzzle_insectes .piece{"
      ="  width:#{width/3}px;height:#{height/3}px;"
      ="}"
      =".puzzle_insectes .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;
        }