goog.require('DD.fx.DragDropHelper');
goog.require('goog.style');

window.onload = function()
{
	var source = document.getElementById('example-container-1'),
	    alphaCoords = {},
	    marginItem = 10,
	    lastzIndex = 1,
	    style;

	var DragDropHelper = new DD.fx.DragDropHelper(
	{
		'source'            : [source],
		'target'            : [source],
		'allowClassNames'   : 'item',
		'onCreateImage'     : customImage,
		'onDragDrop'        : putInContainer,
		'onGetDragSource'   : storeStyle
	});

	function storeStyle (event)
	{
		style = event.dragSource.style;
	};

	function putInContainer (event)
	{
		var dropArea = event.dropArea,
				dropAreaOffset = goog.style.getPageOffset(dropArea),
				dragItemSize = goog.style.getSize(event.dragSource),
				x = event.coords.x - dropAreaOffset.x - (dragItemSize.width / 2),
				y = event.coords.y - dropAreaOffset.y - (dragItemSize.height / 2);

		if (x < 0 || y < 0 || y > source.offsetHeight || x > source.offsetWidth)
			event.dragSource.style = style;
		else
		{
			goog.style.setPosition(event.dragSource, x - marginItem, y - marginItem);
			event.dragSource.style.zIndex = lastzIndex++;
		}
	};

	function customImage(event)
	{
		this.setCustomDragImage(event.target.getDragObject().cloneNode(true));
	};
};

var source = document.getElementById('example-container-2');
var DragDropHelper = new DD.fx.DragDropHelper(
{
	'source'            : [source],
	'allowClassNames'   : 'item'
});

var source = document.getElementById('example-container-3');
var DragDropHelper = new DD.fx.DragDropHelper(
{
	'source'            : [source],
	'allowClassNames'   : 'item',
	'onCreateImage'     : customImage
});

function customImage()
{
	var this_ = this,
			item = this.getCopy(),
			img = new Image();
	img.src = item.children[0].src;

	img.onload = function ()
	{
			this_.setCustomDragImage(img);
		 
			goog.style.setStyle(this_.DragSource.getDragObject().image_, 
			{ 
				'box-shadow' : '0 0 0 2px #fff, 0 0 10px 2px #000'
			});
			
			var dragimg = this_.getItemImage();
			dragimg.style.visibility = 'visible';
			dragimg.style.opacity = 1;
			this_.DragSource.getDragObject().style.display = 'none';
			item.style.display = '';
	};
};

var source = document.getElementById('example-container-4');
var DragDropHelper = new DD.fx.DragDropHelper(
{
	'source'            : [source],
	'allowClassNames'   : 'item',
	'pixelThreshold'    : {desktop: 20, sensor: 20}
});

var source = document.getElementById('example-container-5');
var DragDropHelper = new DD.fx.DragDropHelper(
{
	'source'            : [source],
	'allowClassNames'   : 'item',
	'lapseThreshold'    : {desktop: 500, sensor: 500}
});

var source = document.getElementById('oexample-container-6');
var DragDropHelper = new DD.fx.DragDropHelper(
	{
		'source'            : [source, source],
		'target'            : [source, source],
		'allowClassNames'   : 'item',
		'grid'              : [[source, source]],
		'gridGutter'        : 20,
		'onDragDrop'        : isEmptyContainer
	});

function isEmptyContainer(event)
{
	if (event.dropArea == source && source.children.length == 0)
		source.appendChild(event.dragSource);
	else if (event.dropArea == clone && clone.children.length == 0)
		clone.appendChild(event.dragSource);
};

var source = document.getElementById('original-container-5');
var DragDropHelper = new DD.fx.DragDropHelper(
{
	'source'            : [source],
	'target'            : [source],
	'allowClassNames'   : 'item',
	'grid'              : [[source, source]],
	'gridGutter'        : 20,
	'scroll'            : [source],
	'showScrollArea'    : true
});