Ext.ux.ddButton = Ext.extend(Ext.dd.DDProxy, {
	startDrag: function(x, y){
		var dragEl = Ext.get(this.getDragEl());
		var el = Ext.get(this.getEl());

		this.constrainTo(el.dom.parentNode.parentNode.parentNode);
		
		this.marker = new Ext.Element(document.createElement('div'));
		this.marker.applyStyles({
			'position': 'absolute',
			'background-color': '#AAA',
			'border': '2px dotted #888',
			'width': '4',
			'height': el.getHeight() - 4,
			'top': el.getTop(),
			'z-index': '2000',
			'display': 'none'
		});
		this.marker.addClass('x-panel-ghost');
		Ext.getBody().appendChild(this.marker);

		return;		
		dragEl.applyStyles({
			// border: '',
			'z-index': 2000
		});
		// dragEl.update(el.dom.innerHTML);
		dragEl.addClass(el.dom.className + ' dd-proxy');
	},
	onDrag: function(e){
		var target = this.lastTarget;
		if (target) {
			var xy = e.getXY();
			var x = xy[0];
			var left;
			
			var target_center = target.getLeft() + target.getWidth() / 2;
			if (x < target_center) {
				this.lastPosition = 'over';
				left = target.getLeft();
			}
			else {
				this.lastPosition = 'after';
				left = target.getLeft() + target.getWidth();
			}
			
			this.marker.applyStyles({
				left: left - 5,
				display: 'block'
			});
		}
	},
	onDragOver: function(e, targetId){
		this.lastTarget = Ext.get(targetId);
	},
	onDragOut: function(e, targetId){
	},
	endDrag: function(){
		var dragEl = Ext.get(this.getDragEl());
		var el = Ext.get(this.getEl());
		if (this.lastTarget) {
			var target = this.lastTarget;
			if (this.lastPosition == 'over') {
				el.insertBefore(target);
			}
			else if (this.lastPosition == 'after') {
				el.insertAfter(target);
			}
			
			Ext.Ajax.request({
				url: HOME_URL + CONT_POSITION,
				params: {
					uid: USER_ID,
					container: el.dd.parentId,
					position: this.lastPosition,
					target: target.dd.parentId
				},
				method: 'GET',
				success: function(result, request){
					// provedeno
				},
				failure: function(result, request){
					// chyba
				}
			});
			
			el.applyStyles({
				position: '',
				width: ''
			});
		}
		this.marker.remove();
	}
	
});