(function($, undefined) {
  
  var configure = $("#configure-form"),
      id = $("#id"),
      blocks = $("#blocks"),
      widgetwell_left = $("#widgetwell-left"),      
      widgetwell_right = $("#widgetwell-right"),
      widgetwell_empty = $("#widgetwell-empty");
  
  var suggest = $("#suggest")
    .suggest({soft:true,category:'instance',type:'/common/topic'})
    .bind("fb-select", function(e, data) {
      var form = $("#suggest-form");
      $("input[name=id]", form).val(data.id);
      form.submit();
    })
    .click(function() {
      this.select();
    });
    
  $("#html").click(function() {
    this.select();
  });
  
  
  if (!configure.length) {
    configure = false;
    return;
  }


  function get_default_submit_options(callback) {
    return {    
      dataType: "json",
      beforeSubmit: function(data, jqform, options) {
        if (!id.val()) {
          return false;
        }      
        // encode data with window.location.hash (in rison :)
        var hash = {};
        $.each(data, function(i,n) {
          if (n.value !== undefined) {
            hash[n.name] = n.value;
          }
        });                
        window.location.hash = "#" + $.param(hash);
      },
      success: function(data) {
        $("#embed-widget .widget").html(data.result.preview);
        $("#html").val($.trim(data.result.embed));
        if (callback) {
           callback();
        }
      }
    };
  };

    $(".box-option").mouseover(function() {
    $(this).css('border-color', '#1c5');
    $('#pointer').css('border-right-color', '#1c5');
  });
  
  $(".box-option").mouseout(function() {
    resetcolors(this);
  });
  
  function resetcolors(thisbox) {
    $(thisbox).css('border-color', '#c7c9dd');
    $('#pointer').css('border-right-color', '#c7c9dd');

  }  

  
  $(".widgetwell-remove a", widgetwell_right).click(function() {
    var b = JSON.parse(blocks.val());    
    blocks.val(JSON.stringify([b[0]]));
    configure.ajaxSubmit(get_default_submit_options(function() {
      widgetwell_right.hide();
      widgetwell_empty.show();
    }));
    return false;
  });
        
  configure.ajaxForm(get_default_submit_options());  
  
  $(".widget-drag").draggable({
    appendTo: "body",
    helper: "clone",
    scope: "topic-box",
    iframeFix: ".fb-widget-iframe",
    zIndex: 1000    
  });
  
  $("#widgetwell-left").droppable({
    activeClass: "widget-drag-active",
    hoverClass: "widget-drag-hover",
    scope: "topic-box",
    drop: function(e, ui) {      
      var b = JSON.parse(blocks.val());
      b[0] = {block: ui.draggable.attr("pane")};
      blocks.val(JSON.stringify(b));
      configure.submit();
    }
  });
  $("#widgetwell-right").droppable({
    activeClass: "widget-drag-active",
    hoverClass: "widget-drag-hover",
    scope: "topic-box",
    drop: function(e, ui) {
      var b = JSON.parse(blocks.val());
      b[1] = {block: ui.draggable.attr("pane")};
      blocks.val(JSON.stringify(b));
      configure.submit();
    }
  });  
  $("#widgetwell-empty").droppable({
    activeClass: "widget-drag-active",
    hoverClass: "widget-drag-hover",
    scope: "topic-box",
    drop: function(e, ui) {
      var b = JSON.parse(blocks.val());
      b[1] = {block: ui.draggable.attr("pane")};
      blocks.val(JSON.stringify(b));
      configure.ajaxSubmit(get_default_submit_options(function() {
        widgetwell_empty.hide();
        widgetwell_right.show();
      }));
    }
  });    
  
  
  // blogin buttons
  if ($.postMessage) {
    $("#blogin-button-insert").click(function() {
      $.postMessage({
        type: "topicblock",
        data: {
          html: $("#html").val(),
          id: id.val(),
          name: suggest.val()
        }
      });
      return false;
    });  
    
    $("#blogin-button-cancel").click(function() {
      $.postMessage({
        type: "window.close"
      });
      return false;
    });    
  }
  
 
 })(jQuery);