(function() {
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;

YAHOO.social.DDApp = {
    init: function() {
        var cols=3;
        for (var i=0;i<cols;i++) {
            new YAHOO.util.DDTarget("ul"+i);                        
        }

		var elList = document.getElementsByTagName('li');
        for (var i=0; i < elList.length; i++) {
			var elId = elList[i].id;
			var className = elList[i].className;
			if(className == 'dragitem'){
				dd = new YAHOO.social.DDList(elId);
				dd.setHandleElId("buttonMove");
			}
        }
    }
};

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

YAHOO.social.DDList = function(id, sGroup, config) {

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

    var el = this.getDragEl();
    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent

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

YAHOO.extend(YAHOO.social.DDList, YAHOO.util.DDProxy, {
    startDrag: function(x, y) {
        // make the proxy look like the source element
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
        Dom.setStyle(clickEl, "visibility", "hidden");

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

        // 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", "");
            });
        a.animate();

        updateFeatures(getFeatures());
    },

    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" && destEl.className == 'dragitem') {

            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();
            
            //updateFeatures(getFeatures());
        }
    }
});

Event.onDOMReady(YAHOO.social.DDApp.init, YAHOO.social.DDApp, true);
})();

function getFeatures(){

	var container = "";
	var cols=3;
	for (var i=0;i<cols;i++) {
		var elUl = document.getElementById("ul"+i);
		if(elUl.className == 'draglist'){
			var elLis = elUl.getElementsByTagName('li');

			var lis = '';
			for(var j=0; j < elLis.length; j++){
				var elLi = elLis[j];
				if(elLi.id.indexOf('Feature_') > -1){
					var featureId = elLi.id.replace('Feature_','');
					if(lis == ''){
						lis = featureId;
					}else{
						lis+= ',' + featureId;
					}
				}
			}
			container+= '[' + lis + ']'			
			
			var emptyDiv =  document.getElementById("emptyDiv" + i);
			if(emptyDiv != null){
				if(lis == ''){
					emptyDiv.style.display="inline";
				}
				else{
					emptyDiv.style.display="none";
				}
			}
		}
	}	
	
	return container;
}

function updateFeatures(features){
	var objXMLHttp=null
	if (window.XMLHttpRequest){
		objXMLHttp=new XMLHttpRequest()
	} else if (window.ActiveXObject) {
		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	if (objXMLHttp!=null){
		objXMLHttp.open("POST",'/social/builder.do?method=homeFeaturesMove', true);
		objXMLHttp.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );		
		objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");			
		objXMLHttp.send('containers='+features);			
	}
	
}

	function funFeatureSetting(featureId){

		var strRef = "/social/builder.do?method=homeFeatureSetting";
		
		var objXMLHttp=null
		
		if (window.XMLHttpRequest){
			objXMLHttp=new XMLHttpRequest()
		} else if (window.ActiveXObject) {
			objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
	  	if (objXMLHttp!=null){
			objXMLHttp.open("POST",strRef, true);
			objXMLHttp.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );		
			objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			objXMLHttp.onreadystatechange = function()
			  {
			    if (objXMLHttp.readyState == 4 && objXMLHttp.status == 200)
			    {
			      if (objXMLHttp.responseText)
			      {
			          callbackFunctionFeature(featureId,objXMLHttp.responseText);
			      }
			    }
			  };
			objXMLHttp.send('featureId='+featureId);			
			
		}
	}

	function callbackFunctionFeature(featureId,textBack){		
		var divId = "buttonEdit" + featureId;
  	  document.getElementById(divId).innerHTML=textBack;
  	  
  	  document.getElementById(divId).style.display="inline";
	}
	function closeFeatureSet(featureId){
		var divId = "buttonEdit" + featureId
		document.getElementById(divId).style.display="none";
	}

function funAdvCssSetting(featureId){
	var el = document.getElementById('Box_'+featureId);
	
	xmlHttp = GetXmlHttpObject(el, true);
	if(xmlHttp != null){
		xmlHttp.onreadystatechange=stateChanged;
		xmlHttp.open("GET",'/social/builder.do?method=setAdvCss&featureId='+featureId, true);
		xmlHttp.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );		
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");			
		xmlHttp.send(null);
	}	
}

function showdiv(id) {
    var signID = id + "_sign";
    obj = document.getElementById(id);
    if (obj.style.display == 'inline') {
       obj.style.display='none';
        if (document.getElementById(signID)) {
              document.images[signID].src='/location/social/images/open.png';
          }
     }
     else {
       obj.style.display='inline';
        if (document.getElementById(signID)) {
           document.images[signID].src='/location/social/images/close.png';
         }
     }
}