var DragLayerManager = {
	layerList : [], 
	mousedragLayer : null, 
	mousedownLayer : null, 
	add : function(layer, animation, ease, time) {
		var dragLayer = new DragLayer(layer, animation, ease, time);
		layer = $(layer);
		layer.onmouseover = '';
		if(dragLayer.container) this.layerList[dragLayer.container.id] = dragLayer;
	}, 
	get : function(id) {
		return this.layerList[id];
	}, 
	close : function(layer) {
		$(layer).setStyle({
			top : '-1000px', 
			left : '-1000px'
		});
	}, 
	open : function(event, layer) {
		$(layer).setStyle({
			top : Event.pointerY(event) + 'px', 
			left : Event.pointerX(event) + 'px'
		});
	}, 
	mousemove : function(event) {
		if(this.mousedownLayer) this.mousedownLayer.onmousemove(event);
	}, 
	mouseup : function(event) {
		if(this.mousedragLayer) this.mousedragLayer.onmouseup(event);
	}
}

var DragLayer = Class.create();
DragLayer.prototype = {
	layer : null, 
	clone : null, 
	container : null, 
	animation : 0, 
	ease : 'easeOutQuart', 
	time : 0, 
	moving : false, 
	stop : false, 
	mousedownX : 0, 
	mousedownY : 0, 
	mousedown : false, 
	mousedrag : false, 
	dragMousedownX : 0, 
	dragMousedownY : 0, 
	ondragstartOld : null, 
	onselectstartOld : null, 
	initialize : function(layer, animation, ease, time) {
		this.layer = $(layer);
		if(animation) this.animation = animation;
		if(ease) this.ease = ease;
		if(time) this.time = time;
		if(!this.time) {
			if(this.animation==2) this.time = 200;
			else this.time = 400;
		}

		this.layer.style.cursor = 'pointer';
		this.layer.ondragstart = function() { return false; };
		this.layer.onselectstart = function() { return false; };

		var container = this.layer.getAttribute('container');
		if(container) this.container = $(container) || this.layer;
		else this.container = this.layer;

		this.clone = document.createElement('div');
		$(this.clone).setStyle({
			position : 'absolute', 
			left : 0, 
			top : 0, 
			zIndex : 5000, 
			width : Element.getWidth(this.container)+'px', 
			height : Element.getHeight(this.container)+'px', 
			border : '1px dashed #000', 
			visibility : 'hidden'
		});

		var inner = document.createElement('div');
		$(inner).setStyle({
			position : 'relative', 
			zIndex : 1000, 
			width : '100%', 
			height : '100%', 
			border : '1px dashed #ff0'
		});
		this.clone.appendChild(inner);
		document.body.appendChild(this.clone);

		this.layer.onmousedown = this.onmousedown.bindAsEventListener(this);
		this.layer.onmouseup = this.onmouseup.bindAsEventListener(this);
	}, 

	onmousedown : function(event) {
		if(this.moving) return;
		if(this.stop) return;

		$(this.clone).setStyle({
			width : Element.getWidth(this.container)+'px', 
			height : Element.getHeight(this.container)+'px'
		});
		this.dragMousedownX = Event.pointerX(event) - this.container.offsetLeft;
		this.dragMousedownY = Event.pointerY(event) - this.container.offsetTop;
		this.mousedownX = Event.pointerX(event);
		this.mousedownY = Event.pointerY(event);
		this.mousedown = true;
		DragLayerManager.mousedownLayer = this;
		this.ondragstartOld = document.body.ondragstart;
		this.onselectstartOld = document.body.onselectstart;
		document.body.ondragstart = function() { return false; };
		document.body.onselectstart = function() { return false; };
		try {
			this.layer.setCapture();
		}catch(e) {}

		GlobalEvent.addEvent('mousemove', 'draglayer', DragLayerManager.mousemove.bindAsEventListener(DragLayerManager));
		GlobalEvent.addEvent('mouseup', 'draglayer', DragLayerManager.mouseup.bindAsEventListener(DragLayerManager));
	}, 

	onmouseup : function(event) {
		if(this.moving) return;
		if(!this.mousedown) return;

		var finishLeft = Event.pointerX(event) - this.dragMousedownX;
		var finishTop = Event.pointerY(event) - this.dragMousedownY;

		this.mousedown = false;
		this.mousedrag = false;
		DragLayerManager.mousedownLayer = null;
		DragLayerManager.mousedragLayer = null;
		this.clone.style.cursor = 'default';
		this.clone.style.visibility = 'hidden';
		switch(this.animation) {
			case 0:
				this.container.style.left = finishLeft + 'px';
				this.container.style.top = finishTop + 'px';
				break;
			case 1:
				Animation.add({
					object : this.container,
					effect : 'move',
					ease : this.ease,
					spendTime : this.time,
					initA : this.mousedownX - this.dragMousedownX,
					markA : finishLeft,
					initB : this.mousedownY - this.dragMousedownY, 
					markB : finishTop,
					callback : function(item) {
						this.moving = false;
					}.bind(this)
				}).start();

				this.moving = true;
				break;
			case 2:
				var changeLeft = (finishLeft - (this.mousedownX - this.dragMousedownX)) / 7;
				var changeTop = (finishTop - (this.mousedownY - this.dragMousedownY)) / 7;

				Animation.add({
					object : this.container, 
					effect : 'move', 
					ease : this.ease, 
					spendTime : this.time,
					initA : finishLeft - changeLeft,
					markA : finishLeft,
					initB : finishTop - changeTop, 
					markB : finishTop,
					callback : function(item) {
						this.moving = false;
					}.bind(this)
				}).start();

				this.moving = true;
				break;
		}
		document.body.ondragstart = this.ondragstartOld;
		document.body.onselectstart = this.onselectstartOld;
		this.ondragstartOld = null;
		this.onselectstartOld = null;
		try {
			document.releaseCapture();
		}catch(e) {}
		GlobalEvent.removeEvent('mousemove', 'dragLayer');
		GlobalEvent.removeEvent('mouseup', 'dragLayer');
	}, 

	onmousemove : function(event) {
		if(this.moving) return;
		if(this.mousedown && !this.mousedrag) this.mousedrag = true;

		if(this.mousedrag) {
			DragLayerManager.mousedragLayer = this;
			this.clone.style.left = Event.pointerX(event) - this.dragMousedownX + 'px';
			this.clone.style.top = Event.pointerY(event) - this.dragMousedownY + 'px';
			if(this.clone.style.cursor!='move') this.clone.style.cursor = 'move';
			if(this.clone.style.visibility=='hidden') this.clone.style.visibility = 'visible';
		}
	}
}