// JavaScript Document
var Dragable={
	makeDragable:function(){
		this.style.cursor='move';
		var o=panino.getO(this.parentNode);
		var pos=getElementPositionRelativeTo.call(o,o.parentNode);
		o.style.position='absolute';
		o.style.top=pos.top+'px';
		o.style.left=pos.left+'px';
		this.addEvent('mousedown',
				 function(e){
					$('tip').style.top='-15000px';//funcionalidad particular
					panino.act=this;
					if($('widgetFanPage').prot){
						$('widgetFanPage').removeChild($('widgetFanPage').prot);
						o.fp=$('widgetFanPage').prot=0;
					}
					if($('widgetMap').prot){
						$('widgetMap').removeChild($('widgetMap').prot);
						o.fp2=$('widgetMap').prot=0;
					}
					if(o.protec){
						o.removeChild(o.protec);
						o.protec=0
					}
					//widgetMap
					if(o.id!='widgetMap'){
						o.fp2=document.createElement('div');
						$('widgetMap').prot=o.fp2;
						o.fp2.style.position='absolute';
						o.fp2.style.background='#CCC';
						o.fp2.className='transparente';
						o.fp2.style.width=$('widgetMap').offsetWidth+'px';
						o.fp2.style.height=$('widgetMap').offsetHeight+'px';
						o.fp2.style.zIndex=++panino.maxZindex;
						o.fp2.style.top=0;
						$('widgetMap').appendChild(o.fp2);
					}
					if(o.id!='widgetFanPage'){
						o.fp=document.createElement('div');
						$('widgetFanPage').prot=o.fp;
						o.fp.style.position='absolute';
						o.fp.style.background='#CCC';
						o.fp.className='transparente';
						o.fp.style.width=$('widgetFanPage').offsetWidth+'px';
						o.fp.style.height=$('widgetFanPage').offsetHeight+'px';
						o.fp.style.zIndex=++panino.maxZindex;
						o.fp.style.top=0;
						$('widgetFanPage').appendChild(o.fp);
					}
					o.protec=document.createElement('div');
					o.protec.style.position='absolute';
					o.protec.style.background='#CCC';
					o.protec.className='transparente';
					o.protec.style.width=o.offsetWidth+'px';
					o.protec.style.height=(o.offsetHeight-panino.act.offsetHeight)+'px';
					o.style.zIndex=++panino.maxZindex;
					o.protec.style.zIndex=++panino.maxZindex;
					o.protec.style.top=panino.act.offsetHeight+'px';
					o.appendChild(o.protec);
					
					this.crearEspacio();
					clearSelection();
					var pos=getElementPositionRelativeTo.call(o,o.parentNode);
					o.style.top=pos.top-1+'px';
					o.style.left=pos.left+10+'px';
					e=e || window.event; 
        			cancelEvent(e); 
        			stopEvent(e); 
					
        			this.cx0=e.clientX; 
        			this.cy0=e.clientY; 
        			this.ox=parseInt(o.style.left) || 0; 
        			this.oy=parseInt(o.style.top) || 0;
					panino.getO(document).addEvent('mousemove',function(e){if(panino.act)panino.act.arrastrar(e);});
					panino.getO(document).addEvent('mouseup',function(e){if(panino.act)panino.act.soltar(e);});
				 }
		);
		return this;
	},
	arrastrar:function(e){
		e=e || window.event;
		clearSelection();
		var o=panino.getO(this.parentNode);
        cancelEvent(e); 
        stopEvent(e); 
        o.style.left=this.ox-this.cx0+e.clientX+'px'; 
        o.style.top=this.oy-this.cy0+e.clientY+'px'; 
		this.hitTest();
		return this;
	},
	soltar:function(e){
		var o=panino.getO(this.parentNode);
		if(o.protec){
			o.removeChild(o.protec);
			o.protec=0
		}
		if(o.id!='widgetFanPage' && o.fp){
			$('widgetFanPage').removeChild(o.fp);
			o.fp=$('widgetFanPage').prot=0;
		}
		if(o.id!='widgetMap' && o.fp2){
			$('widgetMap').removeChild(o.fp2);
			o.fp2=$('widgetMap').prot=0;
		}
		if($('widgetFanPage').prot){
				$('widgetFanPage').removeChild($('widgetFanPage').prot);
				o.fp=$('widgetFanPage').prot=0;
		}
		if($('widgetMap').prot){
				$('widgetMap').removeChild($('widgetMap').prot);
				o.fp2=$('widgetMap').prot=0;
		}
		if($('espacio')){
			pos=getElementPositionRelativeTo.call($('espacio'),$('espacio').parentNode);
			o.style.left=pos.left+'px';
			o.style.top=pos.top+'px';
			$('espacio').parentNode.removeChild($('espacio'));
		}
		e=e || window.event; 
        cancelEvent(e); 
        stopEvent(e); 
       	panino.getO(document).removeEvent('mousemove',function(e){if(panino.act)panino.act.arrastrar(e);});
		panino.getO(document).removeEvent('mouseup',function(e){if(panino.act)panino.act.soltar(e);});
		panino.act=null;
		return this;
	},
	crearEspacio:function(){
		var o=panino.getO(this.parentNode);
		this.savePosition();
		var pos=getElementPositionRelativeTo.call(o,o.parentNode);
		var destino=panino.getO(o.parentNode);
		if(!$('espacio')){
			var espacio=document.createElement('div');
			espacio.style.width=o.offsetWidth-4+'px';
			espacio.style.height=o.offsetHeight-4+'px';
			espacio.style.borderColor='white';
			espacio.style.borderWidth='1px';
			espacio.style.borderStyle='dashed';
			espacio.style.position='absolute';
			espacio.style.left=pos.left+'px';
			espacio.style.top=pos.top+'px';
			espacio.id="espacio";
			destino.appendChild(espacio);
		}
		return this;
	},
	swap:function(elem){
		if(!$('espacio'))return null;
		var t=getElementPositionRelativeTo.call($('espacio'),$('espacio').parentNode);
		var spx=t.left;
		var spy=t.top;
		var t2=getElementPositionRelativeTo.call(elem,elem.parentNode);
		$('espacio').style.left=t2.left+'px';
		$('espacio').style.top=t2.top+'px';
		elem.style.left=spx+'px';
		elem.style.top=spy+'px';
		
		
		this.savePosition();
	},
	savePosition:function(){
		var arrPosTop=[];
		var arrOrdenado=[];
		for(var i=0,l=panino.dragables[0].length;i<l;i++){
			var o=panino.getO($(panino.dragables[0][i]).parentNode);
			var pos=getElementPositionRelativeTo.call(o,o.parentNode);
			arrPosTop.push(pos.top);
		}
		arrPosTop.sort(function(a,b){return a - b});
		for(var ii=0,ll=arrPosTop.length;ii<ll;ii++){
			for(var j=0;j<ll;j++){
				var o2=panino.getO($(panino.dragables[0][j]).parentNode);
				var pos2=getElementPositionRelativeTo.call(o2,o2.parentNode);
				if(pos2.top==arrPosTop[ii]){
					arrOrdenado.push(panino.dragables[0][j]);
					break;
				}
			}
		}
		panino.dragables=[];
		panino.dragables=[arrOrdenado,arrPosTop];
		/*equilibramos*/
		var ini=0;
		for(var z=0,lz=panino.dragables[0].length;z<lz;z++){
			if($(panino.dragables[0][z])!=this)
				panino.getO($(panino.dragables[0][z]).parentNode).style.top=ini+'px';
			else if($('espacio'))
				$('espacio').style.top=ini+'px';
			ini+=panino.getO($(panino.dragables[0][z]).parentNode).offsetHeight;
		}
		for(var i=0,l=panino.dragables[0].length;i<l;i++){
				var o=panino.getO($(panino.dragables[0][i]).parentNode);
				if(panino.dragables[0][i]==this.id){
					panino.touchPoint=[];
					var p1=false,p2=false,p3=false,p4=false;
					if(panino.dragables[0][i-1]){
						p1=	getElementPositionRelativeTo.call(panino.getO($(panino.dragables[0][i-1]).parentNode),panino.getO($(panino.dragables[0][i-1]).parentNode).parentNode).top+panino.getO($(panino.dragables[0][i-1]).parentNode).offsetHeight/2;
						p2=panino.getO($(panino.dragables[0][i-1]).parentNode);
					}
					panino.touchPoint.push(p1);
					panino.touchPoint.push(p2);
					if(panino.dragables[0][i+1]){
						p3=	getElementPositionRelativeTo.call(panino.getO($(panino.dragables[0][i+1]).parentNode),panino.getO($(panino.dragables[0][i+1]).parentNode).parentNode).top+panino.getO($(panino.dragables[0][i+1]).parentNode).offsetHeight/2;
						p4=panino.getO($(panino.dragables[0][i+1]).parentNode);
					}
					panino.touchPoint.push(p3);
					panino.touchPoint.push(p4)
					
				}
		}
		
	},
	hitTest:function(){
		if(panino.touchPoint[0]){
			if(parseInt(this.parentNode.style.top)<=panino.touchPoint[0])
				return this.swap(panino.touchPoint[1]);
		}
		if(panino.touchPoint[2]){
			
			if(parseInt(this.parentNode.style.top)+this.parentNode.offsetHeight>=panino.touchPoint[2])
				return this.swap(panino.touchPoint[3]);
		}
	}
	
}
panino.add(Dragable);
function makeGrupoDragable(arrIds){
		var arrPosTop=[];
		var arrOrdenado=[];
		for(var i=0,l=arrIds.length;i<l;i++){
			var o=panino.getO($(arrIds[i]).parentNode);
			o.hover(function(){this.style.border='1px dashed #FFF';},function(){this.style.border='none';});
			var pos=getElementPosition.call(o,o.parentNode);
			arrPosTop.push(pos.top);
		}
		arrPosTop.sort(function(a,b){return a - b});
		for(var ii=0,ll=arrPosTop.length;ii<ll;ii++){
			for(var j=0;j<ll;j++){
				var o2=panino.getO($(arrIds[j]).parentNode);
				var pos2=getElementPosition.call(o2,o2.parentNode);
				if(pos2.top==arrPosTop[ii]){
					arrOrdenado.push(arrIds[j]);
					break;
				}
			}
		}
		panino.dragables=[arrOrdenado,arrPosTop];
		for(var iii=ll-1;iii>-1;iii--){
			$(arrOrdenado[iii]).makeDragable();
		}
}
function getElementPositionRelativeTo(contenedor) {
		var offsetTrail = this;
		var offsetLeft = 0;
		var offsetTop = 0;
		while (offsetTrail && offsetTrail!=contenedor) {
			offsetLeft += offsetTrail.offsetLeft;
			offsetTop += offsetTrail.offsetTop;
			offsetTrail = offsetTrail.offsetParent;
		}
		return {left:offsetLeft, top:offsetTop};
}
addLoadEvent(function(){
	$('lateralIzquierdo').style.width=$('lateralIzquierdo').offsetWidth+'px';
	$('lateralIzquierdo').style.height=$('lateralIzquierdo').offsetHeight+'px';
	makeGrupoDragable(['widgetBlogTop','widgetVideosTop','widgetFanPageTop','widgetFotosTop','widgetMapTop','draggerTwiter']);
	panino.maxZindex=50;
});