Ext.namespace('Sortable');
var DDM = Ext.dd.DragDropMgr;
var IDcontainer;
var ClasseSousContainer;
var ClasseItem;
var Tableau;
var DeplacementOK;
Sortable.DD = {

    init: function(IDcontainer, ClasseSousContainer, ClasseItem, Tableau) {
    		parent.IDcontainer = IDcontainer;
    		parent.ClasseSousContainer = ClasseSousContainer;
    		parent.ClasseItem = ClasseItem;
    		parent.Tableau = Tableau;

        var dropEls = Ext.get(parent.IDcontainer).query('.'+parent.ClasseSousContainer);
        for(var i = 0; i < dropEls.length; i++) {
            new Ext.dd.DDTarget(dropEls[i]);
        }

        var dragEls = Ext.get(parent.IDcontainer).query('.'+parent.ClasseItem);
        for(var i = 0; i < dragEls.length; i++) {
            new Sortable.DDList(dragEls[i]);
        }
    }
};

Sortable.DDList = function(id, sGroup, config) {
    Sortable.DDList.superclass.constructor.call(this, id, sGroup, config);

    // The proxy is slightly transparent
    Ext.get(this.getDragEl()).setStyle('opacity', 0.67);

    this.goingUp = false;
    this.lastY = 0;
};

Ext.extend(Sortable.DDList, Ext.dd.DDProxy, {
    startDrag: function(x, y) {
        // make the proxy look like the source element

        var dragEl = Ext.get(this.getDragEl());
      	var clickEl = Ext.get(document.getElementById(this.getEl().id));

      	if(document.getElementById(this.getEl().id).className.indexOf("_Drag") != -1)
      	{

					clickEl.setStyle('visibility', 'hidden');
					//document.getElementById(document.getElementById(clickEl.id).parentNode.parentNode.parentNode.id).className="";

					//dragEl.dom.innerHTML = clickEl.dom.innerHTML;
					var padding = clickEl.getPadding('t') + 'px '
							+ clickEl.getPadding('r') + 'px '
							+ clickEl.getPadding('b') + 'px '
							+ clickEl.getPadding('l') + 'px';

					//alert(clickEl.dom.innerHTML);
					if(parent.Tableau = true)
					{
						dragEl.dom.innerHTML = '<div><table>' + clickEl.dom.innerHTML + '</table></div>';
					}
					else
					{
						dragEl.dom.innerHTML = '<div style="padding:' + padding + '">' + clickEl.dom.innerHTML + '</div>';
					}

					dragEl.setStyle(clickEl.getStyles('background-color', 'color', 'padding'));
					//dragEl.setStyle('border', '1px solid gray');
					parent.DeplacementOK = true;
				}
				else
				{
					dragEl.setStyle('display', 'none');
					parent.DeplacementOK = false;
				}
    },

    endDrag: function(e) {
        var srcEl = Ext.get(this.getEl());
        var proxy = Ext.get(this.getDragEl());

				if(parent.DeplacementOK==true)
				{
	        // Hide the proxy and show the source element when finished with the animation
	        var onComplete = function() {
	            proxy.setStyle('visibility', 'hidden');
	            srcEl.setStyle('visibility', '');
	        };

	        // Show the proxy element and animate it to the src element's location
	        proxy.setStyle('visibility', '');
	        proxy.shift({
	            x: srcEl.getX(),
	            y: srcEl.getY(),
	            easing: 'easeOut',
	            duration: .2,
	            callback: onComplete,
	            scope: this
	        });
	     }
    },

    onDragDrop: function(e, id) {
       // var pt = e.getPoint();

    },

    onDrag: function(e) {
        // Keep track of the direction of the drag for use during onDragOver
        var y = e.getPageY();

        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }

        this.lastY = y;
    },

    onDragOver: function(e, id) {
        var srcEl = Ext.get(this.getEl());
        var destEl = Ext.get(id);

				if(document.getElementById(srcEl.id).className.indexOf('_Drag')!=-1)
				{

					// We are only concerned with list items, we ignore the dragover
					// notifications for the list.
					if (destEl.is('div.'+parent.ClasseItem)) {
							if (this.goingUp) {
									// insert above
									srcEl.insertBefore(destEl);
							} else {
									// insert below
									srcEl.insertAfter(destEl);
							}

							//DDM.refreshCache();
					} else if (destEl.is('div.'+parent.ClasseSousContainer)) {
							destEl.appendChild(srcEl);
						 // DDM.refreshCache();
					}
				}
    }
});