var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;
          
          
var origin, destination;       

var GROUP = "groupContainer";
var USER = "userContainer";

var manageXmlGroup = function(url, req) {
    var xhr = getXhr();
    xhr.onreadystatechange = function() {
	if (xhr.readyState == 4 && xhr.status == 200) {
            var list = xhr.responseXML.getElementsByTagName("op");
            var value = parseInt(list[0].getAttribute("value"));
            var action = list[0].getAttribute("type");
            var toAlert = false;
            var msg = "";
            if (value > 0) {
                if (action == "delete") {
                    toAlert = true;
                    msg = "User removed";
                }
                else if (action == "insert") {
                    toAlert = true;
                    msg = "User added";
                }
                if (toAlert) {
                    alert(msg);
                }
            }
            window.location.reload();
        }
    }
    xhr.open("POST", url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(req);
}


var deleteUserGroup = function(ugid) {
    var action = "delete";
    var url = "../../usergroups/" + action + "/" + ugid;
    manageXmlGroup(url, '');
}

var insertUserGroup = function(uid, gid) {    
    var action = "insert";
    var url = "../../usergroups/" + action + "/" + gid + "/" + uid;
    manageXmlGroup(url, '');
}


DDApp = {
    init: function(s, t) {
        var src = s;
        var tgt = t;

        new YAHOO.util.DDTarget( src );
        new YAHOO.util.DDTarget( tgt );
        var srcChild = Dom.getChildren(src);
        var tgtChild = Dom.getChildren(tgt);
                    
        for (var i = 0; i < srcChild.length; i++) 
            new DDList( srcChild[i] );
                    
        for (i = 0; i < tgtChild.length; i++) 
            new DDList( tgtChild[i] );
                    

        /*Event.on("showButton", "click", this.showOrder);
                    Event.on("switchButton", "click", this.switchStyles);*/
    }/*,

                showOrder: function() {
                    var parseList = function(ul, title) {
                        var items = ul.getElementsByTagName("li");
                        var out = title + ": ";
                        for (i=0;i<items.length;i=i+1) {
                            out += items[i].id + " ";
                        }
                        return out;
                    };

                    var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");
                    alert(parseList(ul1, "List 1") + "\n" + parseList(ul2, "List 2"));

                }*//*,

                switchStyles: function() {
                    Dom.get("ul1").className = "draglist_alt";
                    Dom.get("ul2").className = "draglist_alt";
                }*/
};

//////////////////////////////////////////////////////////////////////////////
// custom drag and drop implementation
//////////////////////////////////////////////////////////////////////////////

DDList = function(id, sGroup, config) {

    DDList.superclass.constructor.call(this, id, sGroup, config);

    this.logger = this.logger || YAHOO;
    var el = this.getDragEl();
    Dom.setStyle(el, "opacity", 0.67); // le proxy est legerement transparent

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

/** La classe DDList etend la classe DDProxy */
YAHOO.extend(DDList, YAHOO.util.DDProxy, {
    
    cannotDrop : function() {      // style ne peut pas deposer              
        Dom.removeClass( this.getDragEl(), "right-look" );
        Dom.addClass( this.getDragEl(), "wrong-look" );
    },
                
    canDrop : function() {         // style peut deposer
        Dom.removeClass( this.getDragEl(), "wrong-look" );
        Dom.addClass( this.getDragEl(), "right-look" );
    },
            
    processWhenComplete: function(t) { // ce qu'on fait quand l'objet atterrit
        var li = Dom.get(t);
        alert("id = " + li.innerHTML + "\nlist = " + li.parentNode.id);
    },
                
    startDrag: function(x, y) {
        /* le proxy doit ressembler a l'element source */
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
                    
        /* masque l'element, 
         * seul le proxy est visible */
        Dom.setStyle(clickEl, "visibility", "hidden");
        
        origin = Dom.get(this.id).parentNode.id;
        
        dragEl.innerHTML = clickEl.innerHTML;

        Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
        Dom.setStyle(dragEl, "border", "2px solid gray");
    },

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

        /* Affiche l'element proxy et 
         * anime son mouvement jusqu'a son emplacement cible */
        Dom.setStyle(proxy, "visibility", "");
        var a = new YAHOO.util.Motion( 
        proxy, { 
            points: { 
                to: Dom.getXY(srcEl)
            }
        }, 
        0.2, 
        YAHOO.util.Easing.easeOut 
    )
        var proxyid = proxy.id;
        var thisid = this.id;
                
        /* Masque le proxy et 
         * affiche l'element source une fois l'animation terminee */
        a.onComplete.subscribe(function() {
            Dom.setStyle(proxyid, "visibility", "hidden");
            Dom.setStyle(thisid, "visibility", "");
            
            /* on traite ici l'action apres deplacement */
            var li = Dom.get(thisid);
            
            destination = li.parentNode.id;
            
            /* On retire un utilisateur d'un groupe */
            if (origin == GROUP && destination == USER) {
                var ar = li.id.split(/_/g);
                deleteUserGroup(ar[1]);
            }        
            /* On ajoute un utilisateur à un groupe */
            else if (origin == USER && destination == GROUP) {
                var ar = li.getAttribute("rel").split(/\|/g);
                var gid = ar[1];
                var uid = ar[0];
                insertUserGroup(uid, gid);
            }
            
        });
        a.animate();
    },

    onDragDrop: function(e, id) {
        /* s'il y a un drop, l'element li a ete lache soit au dessus de la liste,
         * soit ailleurs -> retour a l'emplacement initial de l'element */
        if (DDM.interactionInfo.drop.length === 1) {
            /* position du curseur au moment du drop (YAHOO.util.Point) */
            var pt = DDM.interactionInfo.point; 
            /* La region survolee par l'element source au moment du drop */
            var region = DDM.interactionInfo.sourceRegion; 

            /* Verifie si on est au dessus de l'element source. On ajoute en fin de liste
             * seulement si le drop intervient dans la fin de liste (zone de la liste sans elements) */
            if (!region.intersect( pt )) {
                var destEl = Dom.get(id);
                var destDD = DDM.getDDById(id);
                destEl.appendChild(this.getEl());
                destDD.isEmpty = false;
                DDM.refreshCache();
            }
        }
    },

    onDrag: function(e) {
        /* traque les mouvements du drag pour utilisation a l'evenement onDragOver */
        var y = Event.getPageY(e);
                    
        /* Style wrong-look: "can not drop" */
        this.cannotDrop();
                    
        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }

        this.lastY = y;
    },

    onDragOver: function(e, id) {
    
        var srcEl = this.getEl();
        var destEl = Dom.get(id);
                    
        /* Style right-look: "can drop" */
        this.canDrop();
                    
        /* on cree le comportement d'insertion au survol de la liste
         * -> Seuls les elements de type li nous interesse
         *  */
        if (destEl.nodeName.toLowerCase() == "li") {
            var p = destEl.parentNode;
                        
            if (this.goingUp) 
                p.insertBefore(srcEl, destEl); // insere au dessus
            else 
                p.insertBefore(srcEl, destEl.nextSibling); // insere en dessous
                    
            DDM.refreshCache();
        }
    }
});