jQuery.dashboard = {
  init: function() {
    /* The first thing we do is setup our .columns to be sortable.
    You can look up these individual options on the jquery docs site.
    http://docs.jquery.com/UI/Sortable/sortable#options */
    $("#dashboardContainer .column").sortable({
      connectWith: ['#dashboardContainer .column'],
      revert: true,
      tolerance: "pointer",
      forcePlaceholderSize: true,
      handle: 'div.widgetTitle',
      placeholder: 'w-placeholder',
      start: function() {
        /* This gets called when sorting starts, we equalize
        the column heights so that you can drag a widget from
        a tall column onto a shorter one by just draggin sideways
        instead of dragging it to the top of the column */
        jQuery.dashboard.equalizeColumns();
        $("#dashboardContainer .column").sortable("refresh");
      },
      stop: function() {
        /* This function gets called when the sorting stops. We 
        need to get the current height of the dashboard area and
        the height that it will be at after the elements move.  
        We set a specified height during the start event, and in
        this event we smoothly transition into an automatic height.
        The following smoothly animates this height change. */
        $("#dashboardContainer .column").each(function(){
          var oh = $(this).height();
          $(this).height('');
          var nh = $(this).height();
          $(this).height(oh);
          $(this).animate({
            height: nh
          }, 200, function() {
            $(this).height('');
          });
        });
        saveDashboard();
      }
    });
 
    /* Hide/show */
    $("#dashboardContainer .closeEl").live("click", function(){
		var targetContent = $('div.widgetContent', this.parentNode.parentNode.parentNode);
		if (targetContent.css('display') == 'none') {
			targetContent.slideDown(300, function(){ 
				saveDashboard();
			});
			$(this).html('<img src="/img/icons-png-18/navigate_close.png" alt="Minimise" />');
		} else {
			targetContent.slideUp(300, function(){
				saveDashboard();
			});
			$(this).html('<img src="/img/icons-png-18/navigate_open.png" alt="Maximise" />');
		}    	
    });
    
    /* Remove */
    $("#dashboardContainer .removeEl").live("click", function(){
		if(confirm('Are you sure want to remove this dashboard widget?'))
		{
			var targetContent = $(this.parentNode.parentNode.parentNode);
			targetContent.remove();
		}
		saveDashboard();    	   	
    });     
  }, 
  /* This function gets the largest height of all the columns and
  then sets the remaining columns to that height. */
  equalizeColumns: function() {
    jQuery.dashboard.colHeight = 0;
    $("#dashboardContainer .column").each(function(){
      if ($(this).height() > jQuery.dashboard.colHeight) {
        jQuery.dashboard.colHeight = $(this).height();
      }
    });
    $("#dashboardContainer .column").each(function(){
      if ($(this).height() < jQuery.dashboard.colHeight) {
        $(this).height(jQuery.dashboard.colHeight);
      }
    });
  }
};

function saveDashboard() {		
	var returnData = '';	
	var j = 0;
	$("#dashboardContainer .column").each(function(){
		var columnId = this.id;
		var widgets = $('#'+columnId).sortable('toArray');

		returnData += columnId+'=';

		for (var i=0, len=widgets.length; i<len; ++i ){
			var widgetId = widgets[i];					
			var targetContent = $('div.widgetContent', '#'+widgetId);
			var widgetStatus = targetContent.css('display');			
			returnData += widgetId+':'+widgetStatus					
			if (i+1 < len) { returnData += ','; }
		}	
		
		if (j+1 < $("#dashboardContainer .column").length) { returnData += '&'; }
		j++;
	});
		
	$.ajax({
		url: '/saveDashboard/'+dashboardId,
		type: 'POST',
		data: returnData
	});
};
 
$(function() {
  jQuery.dashboard.init();
});