Ext.namespace('Homefront');
		
Homefront.DD = function() {
	var listItemEls = [], ddEls = [];
	var listContainer1, listContainer2, dlg;
	
	return {
	    init: function() {
	    	
	    	//create and insert elements for each item in the items list
	    	
			for (i=0; i < items.length; i++)
			{
				Ext.DomHelper.append('listContainer1', {
						tag:'div',
						cls: 'block',
						id:'listItem_' + i
					});
				listItemEls[i] = Ext.get('listItem_' + i);
				listItemEls[i].update('<p>' + items[i] + '<input type="hidden" class="listItemValue" id="listItemId_' + i + '" value="' + i + '" /></p>');
			}
	    	listContainer1 = Ext.get('listContainer1');
	    	listContainer2 = Ext.get('listContainer2');
	    	
	    	//force the containers to remain at initial size
	    	targetHeight = listContainer1.getHeight();
			listContainer1.setHeight(targetHeight);
			listContainer2.setHeight(targetHeight);
	    	
	        var dropEls = Ext.get('mainPage').query('.slot');
	        for(var i = 0; i < dropEls.length; i++) {
	            new Ext.dd.DDTarget(dropEls[i]);
	        }
	
	        var dragEls = Ext.get('mainPage').query('.block');
	        for(var i = 0; i < dragEls.length; i++) {
	            new Homefront.DDList(dragEls[i]);
	        }
	        
	        
	        
	        /*******
	        * here's what happens when we click the go button
	        *******/
	      /*  Ext.get('readyButton').on('click', function() {
	        	if(!dlg)
	        	{
					dlg = new Ext.BasicDialog("readyDialog", {
					    height: 200,
					    width: 300,
					    minHeight: 200,
					    minWidth: 300,
					    modal: true,
					    proxyDrag: true,
					    shadow: true,
					    animateTarget:Ext.get('readyButton')
					});
					dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
					dlg.addButton('OK', dlg.hide, dlg);    // Could call a save function instead of hiding
					dlg.addButton('Print', Homefront.DD.printList, dlg);
				}
				dlg.show();
			});*/



	    }, //end init
	    
	    
	    printList : function() {
			valueString = '';
			//get contents of user-created todo list
			var values = listContainer2.query('.listItemValue');
	        for(var i = 0; i < values.length; i++) {
	        	//el = new Ext.fly(values)
				valueString += Ext.fly(values[i]).getValue();
				if (i < (values.length - 1)) valueString += ',';
	        }
	        var url = 'print.php?list=';
	        window.open(url + valueString,'print','height=480,width=640');
		}
	    
	    
	} //end return
}(); //end Homefront.DD

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

    // The proxy is slightly transparent
    //Ext.get(this.getDragEl()).setStyle('opacity', 0.67);
	
	Ext.get(this.getDragEl()).applyStyles({
		'opacity':'0.67',
		'font-family':'verdana,arial,sans-serif',
		'font-size':'12px',
		'padding':'3px'
	});

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

Ext.extend(Homefront.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(this.getEl());
        clickEl.setStyle('visibility', 'hidden');

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

        dragEl.dom.innerHTML = '<div style="padding:' + padding + '">' + clickEl.dom.innerHTML + '</div>';
        dragEl.setStyle(clickEl.getStyles('background-color', 'color', 'padding'));
        dragEl.setStyle('border', '1px dashed gray');
    },

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

        // 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 DDM = Ext.dd.DragDropMgr;
        var pt = e.getPoint();
        var region = DDM.getLocation(DDM.getDDById(id));

        if(e.browserEvent.type == 'mousedown') 
		{
            // 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 = Ext.get(id);
                var srcEl = Ext.get(this.getEl());
                var destDD = DDM.getDDById(id);

                if(destEl.is('div.block')) 
				{
                    if (this.goingUp) 
					{
                        srcEl.insertBefore(destEl);
                    } 
					else 
					{
                        srcEl.insertAfter(destEl);
                    }
                } 
				else 
				{
                    destEl.appendChild(srcEl);
                }

                destDD.isEmpty = false;
                DDM.refreshCache();
            }
        }
    },

    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 DDM = Ext.dd.DragDropMgr;
        var srcEl = Ext.get(this.getEl());
        var destEl = Ext.get(id);

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

            DDM.refreshCache();
        } 
		else if (destEl.is('div.slot')) 
		{
            destEl.appendChild(srcEl);
            DDM.refreshCache();
        }
    }
});

Ext.onReady(Homefront.DD.init, Homefront.DD, true);