/*
 * Drag clone
 */

Drag.Clone = new Class({
	Extends: Drag,
	options: {
		snap: 20,
		limit: {x: 200, y: 200}
	},
	initialize: function(element, options) {
	
		//console.log($(getDocument().body));
		//this.options.limit = $(document.body);
		//console.log(this.options.container);
		this.options.container = $(window);
		
		this.widget = $(element);
		this.parent(this.widget, options);
		
		console.log(this);

		//this.options.limit = {x: 200, y: 200};
		//this.setOptions(options);		
		//console.log('limt: ', this.options.limit);
	},
	/*
	start: function(event){
		if (this.container){
			var el = this.element, cont = this.container, ccoo = cont.getCoordinates(el.offsetParent), cps = {}, ems = {};

			['top', 'right', 'bottom', 'left'].each(function(pad){
				cps[pad] = cont.getStyle('padding-' + pad).toInt();
				ems[pad] = el.getStyle('margin-' + pad).toInt();
			}, this);

			var width = el.offsetWidth + ems.left + ems.right, height = el.offsetHeight + ems.top + ems.bottom;
			var x = [ccoo.left + cps.left, ccoo.right - cps.right - width];
			var y = [ccoo.top + cps.top, ccoo.bottom - cps.bottom - height];

			this.options.limit = {x: x, y: y};
		}
		this.parent(event);
	},*/
	start: function(event) {
		
		this.origin = this.element.getPosition();
		this.element = this.element.clone().setOpacity(0.5);
    	this.element.setStyles({
    		'left': this.origin.x,
    		'top': this.origin.y,
    		'position': 'absolute',
    		'z-index': 10,
    		'cursor': 'move'
    	});
    	//}).inject(document.body, 'top');
    	
		this.parent(event);
	},
	check: function(event) {
    	this.modifiers = {
			x: this.mouse.start.x - this.origin.x,
			y: this.mouse.start.y - this.origin.y
		}
		
		if (this.options.preventDefault)
			event.preventDefault();
		
		var distance = 	Math.round(Math.sqrt(Math.pow(event.page.x - this.mouse.start.x, 2) + 
						Math.pow(event.page.y - this.mouse.start.y, 2)));
		
		if (distance > this.options.snap) {
			//console.log('snap');
			this.element.inject(document.body, 'top').removeClass('active');
		
			this.cancel();
			this.document.addEvents({
				mousemove: this.bound.drag,
				mouseup: this.bound.stop
			});
			
			this.fireEvent('start', [this.element, event]).fireEvent('snap', this.element);
		}
		
		//this.parent(event);
	},
	drag: function(event) {
		this.parent(event);
		
		//var y = this.mouse.now.y - this.modifiers.y;
		
    	//if (y <= 0)
    	//	return;
		
		//console.log(y);
    	/*
    	this.element.setStyles({
    		left: this.mouse.now.x - this.modifiers.x,
    		top: this.mouse.now.y - this.modifiers.y
    	});*/
    },
	stop: function(event) {
		this.parent(event);
    	new Fx.Morph(this.element).start({left: this.origin.x, top: this.origin.y}).chain((function() {
    		this.element.dispose();
			this.element = this.widget;
    	}).bind(this));
	}
});

Element.implement({
	makeDragClone: function(options){
		return new Drag.Clone(this, options);
	}
});

/*
Drag.Clone = new Class({
	Extends: Drag,
	//initialize: function(element, options) {
		//this.element = element;
	//	this.parent(element, options);
	//},
	onBeforeStart: function(element) {
    	if (!this.widget)
    		this.widget = this.element;
		this.origin = element.getPosition();
		this.parent();
	},
    onStart: function(element) {
    	this.element = element.clone();
    	this.element.setOpacity(0.5);
    	this.element.setStyles({
    		'left': this.origin.x,
    		'top': this.origin.y,
    		'position': 'absolute',
    		'z-index': 10,
    		'cursor': 'move'
    	});
    	
    	this.element.inject(document.body, 'top');
    	
    	this.modifiers = {
			x: this.mouse.start.x - this.origin.x,
			y: this.mouse.start.y - this.origin.y
		}
	},
    onDrag: function(element) {
    	element.setStyles({
    		left: this.mouse.now.x - this.modifiers.x,
    		top: this.mouse.now.y - this.modifiers.y
    	});
    },
    onComplete: function(element) {
		this.element = this.widget;
    	new Fx.Morph(element).start({left: this.origin.x, top: this.origin.y}).chain(function() {
    		element.dispose();
    	});
	}
});
*/