/**
 * This class provides utilities for dragging and dropping video lists on frontpage.
 * Copyright (c) TV 2 Net 2008
 *
 * @author Bojan Popadic <bopo@tv2.dk>
 */

(function() {

var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;

YAHOO.example.DDApp = {
    init: function() {
        var cols = 3;
        
        var initializeDragDrop = function() {
            // Drag & Drop init
            //var c = new Array();
            for (var i = 1; i < cols+1; i++) {
                new YAHOO.util.DDTarget("col-4-"+i);
            }
            //var counter = 0;
            for (var i = 1; i < cols+1; i++) {
                var childNodes = YAHOO.util.Dom.getElementsByClassName('col-4 video-category', 'li', 'col-4-'+i);
                var rows = childNodes.length;
                for (var j = 0; j < rows; j++) {
                    var tmp = new YAHOO.example.DDList(childNodes[j].id);
                    //c[counter++] = tmp;
                }
            }
            // Enable column lists
            document.getElementById('col-container').style.display = 'block';
            
            // Set boundaries for drag elements
            /*var region = Dom.getRegion('col-container');
            for (var i = 0; i < c.length; i++) {
                var xy = Dom.getXY(c[i].getEl());
                var width = parseInt(Dom.getStyle(c[i].getEl(), 'width'), 10);
                var left = xy[0] - region.left;
                var right = region.right - xy[0] - width;
                c[i].setXConstraint(left, right);
            }*/
        };

        // Restore order and expand
        if (TV2_Video.userLoggedIn()) {
            TV2_Video.page.restoreOrderFromUser(initializeDragDrop);
            TV2_Video.window.restoreUserExpand();
        } else {
            TV2_Video.page.restoreOrderFromCookie();
            TV2_Video.window.restoreCookieExpand();
            initializeDragDrop();
        }
    }
};

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

    this.logger = this.logger || YAHOO;
    var el = this.getDragEl();

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

YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
    startDrag: function(x, y) {
        this.logger.log(this.id + " startDrag");

        // make the proxy look like the source element
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
        Dom.setStyle(clickEl, "opacity", 0.20);

        dragEl.innerHTML = '<div class="dragTop"></div>'+clickEl.innerHTML+'<div class="dragBottom"></div>';

        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();

        // Show the proxy element and animate it to the src element's location
        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;

        // Hide the proxy and show the source element when finished with the animation
        a.onComplete.subscribe(function() {
                Dom.setStyle(proxyid, "visibility", "hidden");
                Dom.setStyle(thisid, "visibility", "");
                proxy.innerHTML = '';
                Dom.setStyle(srcEl, "opacity", 1.0);
                TV2_Video.page.saveOrder();
            });
        a.animate();
    },

    onDragDrop: function(e, id) {
        // If there is one drop interaction, the li was dropped either on the list,
        // or it was dropped on the current location of the source element.
        if (DDM.interactionInfo.drop.length === 1) {

            // The position of the cursor at the time of the drop (YAHOO.util.Point)
            var pt = DDM.interactionInfo.point; 

            // The region occupied by the source element at the time of the drop
            var region = DDM.interactionInfo.sourceRegion; 

            // Check to see if we are over the source element's location.  We will
            // append to the bottom of the list once we are sure it was a drop in
            // the negative space (the area of the list without any list items)
            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) {
        // Keep track of the direction of the drag for use during onDragOver
        var y = Event.getPageY(e);

        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);

        // We are only concerned with list items, we ignore the dragover
        // notifications for the list.
        if (destEl.nodeName.toLowerCase() == "li") {
            var orig_p = srcEl.parentNode;
            var p = destEl.parentNode;

            if (this.goingUp) {
                p.insertBefore(srcEl, destEl); // insert above
            } else {
                p.insertBefore(srcEl, destEl.nextSibling); // insert below
            }

            DDM.refreshCache();
        }
    }
});

//Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
Event.on(window, 'load', YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);

})();