(function($){
	var dragSelector = '.dragable';
	var dropSelector = '.dropable';

	var loc = window.location;
	var ajaxUrl = loc.protocol+'//'+loc.hostname+'/?type=7777';

	// Settings for Drag Elements
	var dragSettings = {
			revert: "invalid",
			revert:function(drop){
				if(!drop)
				{
					$(this).css('opacity',1);
					return true;
				}
				return false;
			},
			start:function(event, ui){				
				$(this).css('opacity',0.5);			
				$(this).data('dragParent',$(this).parents(dropSelector+':first'));
			}
	};

	// Handling for Content reload
	var reloadContent = function(ev){
			var drop = $(this);
			var drag = drop.find(dragSelector+':first');
			var dragId = $(drag).attr('id');

			//var dropBox = drop.attr("id").replace(/nfcfrontpage-box-/, "");
			var dropBoxId = $(this).attr("id").match(/\d+/)[0];
			var params = {
				action:'rc'
			};
			if(dragId){
				drop.empty().append('<div class="loading">..loading</div>');
				params['cid'] = dragId;
				params['layout'] =  drop.hasClass('large') ? 'large':'small';
				params['box'] = dropBoxId;

				$.ajax({
					url: ajaxUrl,
					data : params,
					dataType:'json',
					success:function(result, status, xhrObj){						
						if(result.payload){
							var content = buildContent(dragId,$(result.payload).find('h1:first').text(),$(result.payload));
							$(content).hide();
							drop.empty().append(content);
							drop.find(dragSelector+':first .drag-content h1').remove(); //can only remove after appending into dom ;(
							drop.find(dragSelector+':first').draggable(dragSettings);							
							$(result.payload).width(drop.width());
							$(result.payload).height(drop.height());
							$(content).fadeIn();
							//trigger event to dragable
							$(drop).children(dragSelector+':first').trigger('contentReloaded');
						}						
					},
					error:function(xhrObj,status,errorObj){
						drop.empty().append('<div class="placeholder"><a>&nbsp;</a></div>');
					}
				});
			}
			else
			{
				drop.empty().append('<div class="placeholder"><a>&nbsp;</a></div>');
			}
	};

	// Build Content
	var buildContent = function(dragId,title,content){
		var content = $(content);
		var dragHandle = $('<div class="drag-handle"><div class="more drag-more">+</div><div class="close drag-close">x</div></div>').prepend($('<span class="drag-title">'+title+'</span>'));
		var innerContent = $('<div class="drag-content"></div>').append(content);
		var result = $('<div id="' + dragId + '" class="'+dragSelector.substr(1)+'" ></div>').empty().append(dragHandle).append(innerContent);
		return result;
	}

	var getSetupData = function()
	{
			var setupData = {};
			$(dropSelector).each(function(index) {
					var dropBoxId = $(this).attr("id").match(/\d+/);
					var contentId = [];
					if($(this).find(dragSelector+':first') && $(this).find(dragSelector+':first').attr("id"))
					{
						contentId = $(this).find(dragSelector+':first').attr("id").match(/\d+/);
					}
					if(dropBoxId.length > 0 && contentId.length > 0)
					{
						dropBoxId = dropBoxId[0];
						contentId = contentId[0];
						setupData[dropBoxId] = contentId;
					}
			});
		return setupData;
	}
	
	var saveSetup = function(callback)
	{
		var setup = getSetupData();
		var params = {action:'saveconf', conf:setup};
		$.ajax({
			url: ajaxUrl,
			data : params,
			success:function(result, status, xhrObj){
				if(typeof(callback) == 'function')
				{
					callback();
				}
			}
		});
	}

	var showMore = function(ev)
	{
		ev.stopPropagation();
		var dialog = $( "#nfcfrontpage-dialog" );
		var drop = $(this).parents(dropSelector+':first');
		var setup = getSetupData();
		var params = {action:'gace',uc:setup};
				
		$.ajax({
			url: ajaxUrl,
			data : params,
			success:function(result, status, xhrObj){
					if(result.payload){
						if(result.boxTitle)
						{
							dialog.dialog( "option", "title", result.boxTitle);
						}
						//fill dialog and open bind callback to select
						dialog.empty().append($(result.payload)).dialog('open').find('select:first').bind('change',function(){
							if($(this).val() > 0)
							{
								drop.empty().append('<div id="cid-'+$(this).val()+'" class="'+dragSelector.substr(1)+'">&nbsp;</div>');
								dialog.dialog('close');								
								//allways save before trigger content reload 
								saveSetup(); //eventually give save setup callback for triggering content reload if saveSetup duration is to long...
								drop.trigger('reloadcontent');
							}
						});
					}
					else
					{
						dialog.dialog('close');
					}
			}
		});
	}
  
	var closeDrag = function()
	{
		var drop = $(this).parents(dropSelector+':first');
		drop.empty();
		drop.append('<div class="placeholder"><a>&nbsp;</a></div>');
		saveSetup();
	}

	// Generate Drop Zones
	$(document).ready(function(){
		$( "#nfcfrontpage-dialog" ).dialog({
			height: 80,
			width:200,
			modal: true,
			autoOpen: false
		});
		
		$(dropSelector).find('.placeholder a,.more').live('click',showMore);
		$(dragSelector).find('.close').live('click',closeDrag);
		
		$(dragSelector).draggable(dragSettings);
		$(dropSelector).droppable({
			tolerance:'pointer',
			activeClass: "drop-state-active",
			hoverClass: "drop-state-hover",
			drop: function( event, ui ) {				
				var oldDrag = $(this).find(dragSelector+':first');
				if(oldDrag){
					$(oldDrag).css('opacity',0.5);
					var dragParent = $(ui.draggable).data('dragParent');
					$(dragParent).append(oldDrag);
				}
				$(this).append(ui.draggable);
				$(ui.draggable).offset($(this).offset());				
				//allways saveSetup before trigger content reload
				saveSetup();
				//trigger reload of both droped(by drag and drop and moved item(moved to oldParent from dragable item - switch)
				$(this).trigger('reloadcontent');
				if(oldDrag && dragParent){					
					$(dragParent).trigger('reloadcontent');
				}				
			}
		}).bind('reloadcontent',reloadContent).trigger('reloadcontent');
	});
})(jQuery);