(function($) {
	$(document).ready(function() {
		// shared options
		var options = {
			handle    : 'div.handle',
			opacity   : 0.6,
			tolerance : 'pointer',
			zIndex    : 999999,
			activate  : function(event, ui) {
				$(this).addClass('hover_col');
			},
			stop      : updateWidgets
		};
		// left and right columns
		$('#right_widget_column, #left_widget_column').sortable($.extend({
			connectWith : '#right_widget_column, #left_widget_column',
			deactivate  : function(event, ui) {
				$(this).removeClass('hover_col');
				toggleEmptyColumns($(this));
			}

		}, options));
		// middle column
		$('#middlecolumn').sortable($.extend({
			deactivate : function(event, ui) {
				$(this).removeClass('hover_col');
			}
		}), options);
		
		
		// update the widgets
		function updateWidgets(event, ui) {
			var payload = '';
			payload += buildPayload('leftcolumn', $('#left_widget_column'));
			payload += buildPayload('middlecolumn', $('#middlecolumn'));
			payload += buildPayload('rightcolumn', $('#right_widget_column'));

			$.ajax({
				url : '/widget/update/',
				type : 'POST',
				data : payload,
				success : function(data){}
			});
		}
		// build the payload for the ajax call
		function buildPayload(column, obj) {
			var ret = '';
			obj.find('div.draggable').each(function(i, e) {
				var widget = $(e).attr('id');
				console.log(widget);
				if (widget)
					ret += '&' + column + '[]=' + widget.replace(/widget_/, '');
			});
			return ret;
		}
		// yes this is a hack, but is needed to get through firefox stupidity
		var userAgent = navigator.userAgent.toLowerCase();
		if(userAgent.match(/firefox/)) {
			$('#middlecolumn, #right_widget_column, #left_widget_column').bind( "sort", function (event, ui) {
        		ui.helper.css({'top' : ui.position.top + $(window).scrollTop() + 'px'});
    		});
		}
		// add/remove placeholder
		function toggleEmptyColumns(columns) {
			columns.each(function(i, e) {
				var column = $(e);
				if (column.find('.widget:visible').length == 0) {
					column.find('.dragBox').first().show();
				} else {
					column.find('.dragBox').first().hide();
				}
			});

		}
		
		toggleEmptyColumns($('#right_widget_column, #left_widget_column'));

	});
})(jQuery);

/*			
document.observe(
        	'dom:loaded',
        	widgetInit
        	);
function serializeDash()
{
	var output = "";
	
	output += Sortable.serialize($('leftcolumn')) + '&';
	output += Sortable.serialize($('middlecolumn')) + '&';
	output += Sortable.serialize($('rightcolumn'));
	
	return output;
}

function toggleEmpty(columns)
{
	$A(columns).each(
		function(singlecolumn)
		{
			if($(singlecolumn).down('.draggable'))
			{
				$(singlecolumn).down('.dragBox').hide();
			}
			else
			{
				$(singlecolumn).down('.dragBox').show();
			}
			
		});
}

function widgetInit(){
				var sortablessmall = document.getElementsByClassName('dash-col-small');
				toggleEmpty(sortablessmall);
				$A(sortablessmall).each(function (sortablecolsmall)
				{
				      Sortable.create(sortablecolsmall, {
				      containment: $A(sortablessmall), 
				      constraint: false,
				      tag: 'div',
				      only: 'draggable',
				      dropOnEmpty: true,
				      handle: 'handle',
				      hoverclass: 'hover_col',
				      onUpdate: function(param){ 
				      			new Ajax.Request('/widget/update/', {method: 'post', postBody: serializeDash()});
				      			toggleEmpty(sortablessmall);
				      		}
				      });
				});
				
				var sortableswide = document.getElementsByClassName('dash-col-wide');
				 
				$A(sortableswide).each(function (sortablecolwide)
				{
				      Sortable.create(sortablecolwide, {
				      containment: $A(sortableswide), 
				      constraint: false,
				      tag: 'div',
				      only: 'draggable',
				      dropOnEmpty: true,
				      handle: 'handle',
				      hoverclass: 'hover_col',
				      onUpdate: function(param){ 
				      			new Ajax.Request('/widget/update/', {method: 'post', postBody: serializeDash()});
				      		}
				      });
				});
			}
			*/