$(function(){
  /*$('.dragbox')
  .each(function(){
    $(this).hover(function(){
      $(this).find('h2').addClass('collapse');
    }, function(){
    $(this).find('h2').removeClass('collapse');
    })
    .find('h2').hover(function(){
      $(this).find('.configure').css('visibility', 'visible');
    }, function(){
      $(this).find('.configure').css('visibility', 'hidden');
    })
    .click(function(){
      $(this).siblings('.dragbox-content').toggle();
      //Save state on change of collapse state of panel
      updateWidgetData();
    })
    .end()
    .find('.configure').css('visibility', 'hidden');
  });*/
  $('.cms_element .cms_admin').prepend("<a class=\"drag handle\"><span>Drag Me!</span></a> ");
  $('.cms_section.editable').sortable({
    connectWith: '.cms_section',
    handle: '.handle',
    cursor: 'move',
    placeholder: 'placeholder',
    forcePlaceholderSize: true,
    forceHelperSize: true,
    opacity: 0.4,
    start: function(event, ui){
      //alert("start");
      //Firefox, Safari/Chrome fire click event after drag is complete, fix for that
      //if($.browser.mozilla || $.browser.safari)
      //  $(ui.item).find('.dragbox-content').toggle();
    },
    stop: function(event, ui){
      //ui.item.css({'top':'0','left':'0'}); //Opera fix
      //alert("stop");
      //if(!$.browser.mozilla && !$.browser.safari)
        updateWidgetData();
    }
  })
  .disableSelection();
});

function updateWidgetData(){
  var items=[];
  $('.cms_section').each(function(){
    var columnId=$(this).attr('data-section_id');
    $('.cms_element', this).each(function(i){
      //Create Item object for current panel
      var item={
        id: $(this).attr('data-element_id'),
        order : i,
        column: columnId
      };
      //Push item object into items array
      items.push(item);
    });
  });
  //Assign items array to sortorder JSON variable
  var sortorder={ items: items };

  //Pass sortorder variable to server using ajax to save state
  $.post(pageBase+'/admin/componentinstances/reorder','data='+ $.toJSON(sortorder) , function(response){
    if(response=="success")
      $("body").prepend('<div class="success">Saved</div>').hide().fadeIn(1000);
    setTimeout(function(){
      $('body div.success').fadeOut(1000);
    }, 2000);
  });
}