.header
  %h1
    Réalisation
    ="|"
    =@realisation.title
  
.padding
  %p
    =link_to "Ajouter des images", "#", :onclick => "select_realisation_images_from_manager('#{@realisation.id.to_s}');return false;", :class => "btn btn-primary"
  %br
  #realisation_images  
    =render :collection => @realisation.realisation_images.order("position"), :partial => "admin/realisation_images/realisation_image"
    %p{:style => "clear:both;"}
  
  :coffeescript
  
    adjustment = ""
    
    $('#realisation_images').sortable({
      itemSelector:".realisation_image",
      containerSelector :"#realisation_images",
      nested:true,
      placeholder:"<div class='placeholder' style='display:inline-block;width:50px;height:170px;'></div>",
      onDragStart: ($item, container, _super) ->
        $("body").addClass("dragging")
      
        offset = $item.offset()
        pointer = container.rootGroup.pointer
        adjustment = {
          left: pointer.left - offset.left,
          top: pointer.top - offset.top
          }
      onDrag: ($item, position, _super) ->
        
        $item.css({
          
          left: position.left - adjustment.left,
          top: position.top - adjustment.top - $(window).scrollTop()
          
        })
        
      onDrop: ($item, container, _super) ->
      
        $item.removeClass("dragged").removeAttr("style")
        $("body").removeClass("dragging")
      
        result = []
        container.el.find(".realisation_image").each ->
          result.push $(this).data("id")
        
        $.ajax({
          url:"/admin/realisation_images/reorder.js", 
          type: "GET",
          data: { 
            order : result
            } 
    
        })
    });