var rectangleBorderWidth = 2;	// Used to set correct size of the rectangle with red dashed border
var useRectangle = true;
var autoScrollSpeed = 4;	// Autoscroll speed	- Higher = faster
var enderecoSite = 'http://www.cvdonline.com.br/web/page/';

var dragableElementsParentBox;
var opera = navigator.appVersion.indexOf('Opera')>=0?true:false;
	
var rectangleDiv = false;
var insertionMarkerDiv = false;
var mouse_x;
var mouse_y;

var el_x;
var el_y;
	
var dragDropTimer = -1;	// -1 = no drag, 0-9 = initialization in progress, 10 = dragging
var dragObject = false;
var dragObjectNextObj = false;
var dragableObjectArray = new Array();
var destinationObj = false;	
var currentDest = false;
var allowRectangleMove = true;
var insertionMarkerLine;
var dragDropMoveLayer;
var autoScrollActive = false;
var documentHeight = false;
var documentScrollHeight = false;
var dragableAreaWidth = false;

function getTopPos(inputObj)
{		
  var returnValue = inputObj.offsetTop;
  while((inputObj = inputObj.offsetParent) != null){
  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
  }
  return returnValue;
}

function getLeftPos(inputObj)
{
  var returnValue = inputObj.offsetLeft;
  while((inputObj = inputObj.offsetParent) != null){
  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
  }
  return returnValue;
}
	
function cancelSelectionEvent()
{
	if(dragDropTimer>=0)return false;
	return true;
}

function getObjectFromPosition(x,y)
{
	var height = dragObject.offsetHeight;
	var width = dragObject.offsetWidth;
	var indexCurrentDragObject=-5;
	for(var no=0;no<dragableObjectArray.length;no++){			
		ref = dragableObjectArray[no];			
		if(ref['obj']==dragObject)indexCurrentDragObject=no;
		if(no<dragableObjectArray.length-1 && dragableObjectArray[no+1]['obj']==dragObject)indexCurrentDragObject=no+1;
		if(ref['obj']==dragObject && useRectangle)continue;	
		if(x > ref['left'] && y>ref['top'] && x<(ref['left'] + (ref['width']/2)) && y<(ref['top'] + ref['height'])){
			if(!useRectangle && dragableObjectArray[no]['obj']==dragObject)return 'self';
			if(indexCurrentDragObject==(no-1))return 'self';
			return Array(dragableObjectArray[no],no);
		}
		
		if(x > (ref['left'] + (ref['width']/2)) && y>ref['top'] && x<(ref['left'] + ref['width']) && y<(ref['top'] + ref['height'])){
			if(no<dragableObjectArray.length-1){
				if(no==indexCurrentDragObject || (no==indexCurrentDragObject-1)){
					return 'self';
				}
				if(dragableObjectArray[no]['obj']!=dragObject){
					return Array(dragableObjectArray[no+1],no+1);
				}else{
					if(!useRectangle)return 'self';
					if(no<dragableObjectArray.length-2)return Array(dragableObjectArray[no+2],no+2);
				}
			}else{
				if(dragableObjectArray[dragableObjectArray.length-1]['obj']!=dragObject)return 'append';	
				
			}
		}
		if(no<dragableObjectArray.length-1){
			if(x > (ref['left'] + ref['width']) && y>ref['top'] && y<(ref['top'] + ref['height']) && y<dragableObjectArray[no+1]['top']){
				return Array(dragableObjectArray[no+1],no+1);
			}
		}
	}	
	if(x>ref['left'] && y>(ref['top'] + ref['height']))return 'append';				
	return false;	
}
	
function initDrag(e){
	if(document.all)e = event;
	mouse_x = e.clientX;
	mouse_y = e.clientY;
	
	criaEventAndThis(e);
	//alert(source.parentNode.parentNode.id!='');
	if(source.parentNode.parentNode.id!=''){
		dragObject = source.parentNode.parentNode.id.replace("header", "").replace("div", "");//this
		dragObject = document.getElementById("div"+dragObject);
	
		if(!documentScrollHeight)documentScrollHeight = document.documentElement.scrollHeight + 100;
		el_x = getLeftPos(dragObject)/1;
		el_y = getTopPos(dragObject)/1;
		
		if(useRectangle){
			rectangleDiv.style.width = dragObject.clientWidth - (rectangleBorderWidth*2)-10 +'px';
			rectangleDiv.style.height = dragObject.clientHeight - (rectangleBorderWidth*2)-10 +'px';
			rectangleDiv.className = dragObject.className;
		}else{
			insertionMarkerLine.style.width = '6px';
		}
		
		dragDropTimer = 0;
		dragObjectNextObj = false;
		if(dragObject.nextSibling){
			dragObjectNextObj = dragObject.nextSibling;
			if(!dragObjectNextObj.tagName)dragObjectNextObj = dragObjectNextObj.nextSibling;
		}
		//
		initDragTimer();
	}
	return false;
}

function initDragTimer(){
	if(dragDropTimer>=0 && dragDropTimer<10){
		dragDropTimer++;
		setTimeout('initDragTimer()',5);
		return;
	}
	if(dragDropTimer==10){
		
		if(useRectangle){
			dragObject.style.opacity = 0.5;
			dragObject.style.filter = 'alpha(opacity=50)';
			dragObject.style.cursor = 'default';
		}else{
			var newObject = dragObject.cloneNode(true);
			dragDropMoveLayer.appendChild(newObject);
		}
	}
}


function autoScroll(direction,yPos){
	//
}

function moveDragableElement(e){
	if(document.all)e = event;
		if(dragDropTimer<10)return;
	if(!allowRectangleMove)return false;
	
	if(e.clientY<50 || e.clientY>(documentHeight-50)){
		if(e.clientY<50 && !autoScrollActive){
			autoScrollActive = true;
			autoScroll((autoScrollSpeed*-1),e.clientY);
		}
		
		if(e.clientY>(documentHeight-50) && document.documentElement.scrollHeight<=documentScrollHeight && !autoScrollActive){
			autoScrollActive = true;
			autoScroll(autoScrollSpeed,e.clientY);
		}
	}else{
		autoScrollActive = false;
	}
	if(useRectangle){			
		if(dragObject.style.position!='absolute'){
			dragObject.style.position = 'absolute';
			setTimeout('repositionDragObjectArray()',50);
		}
	}		
	if(useRectangle){
		rectangleDiv.style.display='block';
	}else{
		insertionMarkerDiv.style.display='block';	
		dragDropMoveLayer.style.display='block';	
	}
	if(useRectangle){
		dragObject.style.left = (el_x - mouse_x + e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)) + 'px';
		dragObject.style.top = (el_y - mouse_y + e.clientY) + 'px';
	}else{
		dragDropMoveLayer.style.left = (el_x - mouse_x + e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)) + 'px';
		dragDropMoveLayer.style.top = (el_y - mouse_y + e.clientY) + 'px';
	}
	dest = getObjectFromPosition(e.clientX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft),e.clientY+Math.max(document.body.scrollTop,document.documentElement.scrollTop));
		
	if(dest!==false && dest!='append' && dest!='self'){
		destinationObj = dest[0]; 
		
		if(currentDest!==destinationObj){
			currentDest = destinationObj;
			if(useRectangle){
				destinationObj['obj'].parentNode.insertBefore(rectangleDiv,destinationObj['obj']);
				repositionDragObjectArray();
			}else{
				if(dest[1]>0 && (dragableObjectArray[dest[1]-1]['obj'].offsetLeft + dragableObjectArray[dest[1]-1]['width'] + dragObject.offsetWidth) < dragableAreaWidth){
					insertionMarkerDiv.style.left = (getLeftPos(dragableObjectArray[dest[1]-1]['obj']) + dragableObjectArray[dest[1]-1]['width'] + 2) + 'px';
					insertionMarkerDiv.style.top = (getTopPos(dragableObjectArray[dest[1]-1]['obj']) - 2) + 'px';
					insertionMarkerLine.style.height = dragableObjectArray[dest[1]-1]['height'] + 'px';
				}else{					
					insertionMarkerDiv.style.left = (getLeftPos(destinationObj['obj']) - 8) + 'px';
					insertionMarkerDiv.style.top = (getTopPos(destinationObj['obj']) - 2) + 'px';
					insertionMarkerLine.style.height = destinationObj['height'] + 'px';
				}

			}
		}
	}
		
	if(dest=='self' || !dest){
		insertionMarkerDiv.style.display='none';
		destinationObj = dest;	
	}
	
	if(dest=='append'){
		if(useRectangle){
			dragableElementsParentBox.appendChild(rectangleDiv);
			dragableElementsParentBox.appendChild(document.getElementById('clear'));
		}else{
			var tmpRef = dragableObjectArray[dragableObjectArray.length-1];
			insertionMarkerDiv.style.left = (getLeftPos(tmpRef['obj']) + 2) + tmpRef['width'] + 'px';
			insertionMarkerDiv.style.top = (getTopPos(tmpRef['obj']) - 2) + 'px';
			insertionMarkerLine.style.height = tmpRef['height'] + 'px';	
		}
		destinationObj = dest;
		repositionDragObjectArray();
	}	
	
	if(useRectangle && !dest){
		destinationObj = currentDest;
		}
	
	allowRectangleMove = false;
	setTimeout('allowRectangleMove=true',50);
}

function stop_dragDropElement()
{
	dragDropTimer = -1;
	habilitaSalvar();
	if(destinationObj && destinationObj!='append' && destinationObj!='self'){
		destinationObj['obj'].parentNode.insertBefore(dragObject,destinationObj['obj']);
	}
	if(destinationObj=='append'){
		dragableElementsParentBox.appendChild(dragObject);
		dragableElementsParentBox.appendChild(document.getElementById('clear'));
	}

	if(dragObject && useRectangle){
		dragObject.style.opacity = 1;
		dragObject.style.filter = 'alpha(opacity=100)';
		dragObject.style.cursor = 'default';//move
		dragObject.style.position='static';
	}
	rectangleDiv.style.display='none';
	insertionMarkerDiv.style.display='none';
	dragObject = false;
	currentDest = false;
	resetObjectArray();
	destinationObj = false;
	if(dragDropMoveLayer){
		dragDropMoveLayer.style.display='none';
		dragDropMoveLayer.innerHTML='';
	}
	autoScrollActive = false;
	documentScrollHeight = document.documentElement.scrollHeight + 100;
}

function cancelEvent(){
	return false;
}

function repositionDragObjectArray(){
	for(var no=0;no<dragableObjectArray.length;no++){
		ref = dragableObjectArray[no];
		ref['left'] = getLeftPos(ref['obj']);
		ref['top'] = getTopPos(ref['obj']);			
	}	
	documentScrollHeight = document.documentElement.scrollHeight + 100;
	documentHeight = document.documentElement.clientHeight;
}

function resetObjectArray(){
	dragableObjectArray.length=0;
	var subDivs = dragableElementsParentBox.getElementsByTagName('*');
	var countEl = 0;
		for(var no=0;no<subDivs.length;no++){
		var attr = subDivs[no].getAttribute('dragableBox');
		if(opera)attr = subDivs[no].dragableBox;
		if(attr=='true'){
			var index = dragableObjectArray.length;
			dragableObjectArray[index] = new Array();
			ref = dragableObjectArray[index];
			ref['obj'] = subDivs[no];
			ref['width'] = subDivs[no].offsetWidth;
			ref['height'] = subDivs[no].offsetHeight;
			ref['left'] = getLeftPos(subDivs[no]);
			ref['top'] = getTopPos(subDivs[no]);
			ref['index'] = countEl;
			countEl++;
		}
	}	
}
function saveData(url){
	var saveString = "";
	if(dragableObjectArray){
		for(var no=0;no<dragableObjectArray.length;no++){
			if(saveString.length>0)saveString = saveString + ';';
			ref = dragableObjectArray[no];
			saveString = saveString + ref['obj'].id;
		}
	}

	var saveStringLateral = "";
	for(var no=0;no<lat_dragableObjectArray.length;no++){
		if(saveStringLateral.length>0)saveStringLateral = saveStringLateral + ';';
		lat_ref = lat_dragableObjectArray[no];
		saveStringLateral = saveStringLateral + lat_ref['obj'].id;
	}
	
	xmlhttp = inicializaXmlHttp();
	xmlhttp.open("POST", enderecoSite+url, true);
	vars = '?string1='+saveString+'&string2='+saveStringLateral;
	xmlhttp.onreadystatechange = function(){
		if (xmlhttp.readyState==4){
			t = xmlhttp.responseText;
			t = unescape(t.replace(/\+/g," "));
			document.getElementById('divSalvar').innerHTML=t;
		}
		else
			document.getElementById('divSalvar').innerHTML = "<img src='../images/carregando_pequeno.gif' width='16' height='16'/>";
	}
	
	xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xmlhttp.send(vars);
}

function initdragableElements(){
	if(document.getElementById('dragableElementsParentBox')){
		dragableElementsParentBox = document.getElementById('dragableElementsParentBox');
		insertionMarkerDiv = document.getElementById('insertionMarker');
		insertionMarkerLine = document.getElementById('insertionMarkerLine');
		dragableAreaWidth = dragableElementsParentBox.offsetWidth;
		
		if(!useRectangle){
			dragDropMoveLayer = document.createElement('DIV');
			dragDropMoveLayer.id = 'dragDropMoveLayer';		
			document.body.appendChild(dragDropMoveLayer);	
		}
		
		var subDivs = dragableElementsParentBox.getElementsByTagName('*');
		var countEl = 0;
		for(var no=0;no<subDivs.length;no++){
			var attr = subDivs[no].getAttribute('dragableBox');
			if(opera)attr = subDivs[no].dragableBox;
			if(attr=='true'){
				//subDivs[no].style.cursor='default';	//move
				subDivs[no].onmousedown = initDrag;
				var index = dragableObjectArray.length;
				dragableObjectArray[index] = new Array();
				ref = dragableObjectArray[index];
				ref['obj'] = subDivs[no];
				ref['width'] = subDivs[no].offsetWidth;
				ref['height'] = subDivs[no].offsetHeight;
				ref['left'] = getLeftPos(subDivs[no]);
				ref['top'] = getTopPos(subDivs[no]);
				ref['index'] = countEl;
				countEl++;
			}
		}
		
		/* Creating rectangel indicating where item will be dropped */
		rectangleDiv = document.createElement('DIV');
		rectangleDiv.id='rectangle';
		rectangleDiv.style.display='none';
		dragableElementsParentBox.appendChild(rectangleDiv);
		dragableElementsParentBox.onmousemove = moveDragableElement;
		dragableElementsParentBox.onmouseup = stop_dragDropElement;
		dragableElementsParentBox.onselectstart = cancelSelectionEvent;
		dragableElementsParentBox.ondragstart = cancelEvent;
		dragableElementsParentBox.onresize = repositionDragObjectArray; 
		
		documentHeight = document.documentElement.clientHeight;
	}
	if(document.getElementById('dragableElementsLateralBox')){
		dragableElementsLateralBox = document.getElementById('dragableElementsLateralBox');
		lat_insertionMarkerDiv = document.getElementById('insertionMarkerLateral');
		lat_insertionMarkerLine = document.getElementById('lat_insertionMarkerLine');
		lat_dragableAreaWidth = dragableElementsLateralBox.offsetWidth;
		
		if(!lat_uselat_rectangle){
			lat_dragDropMoveLayer = document.createElement('DIV');
			lat_dragDropMoveLayer.id = 'lat_dragDropMoveLayer';		
			document.body.appendChild(lat_dragDropMoveLayer);	
		}
		
		var lat_subDivs = dragableElementsLateralBox.getElementsByTagName('*');
		var lat_countEl = 0;
		for(var no=0;no<lat_subDivs.length;no++){
			var attr = lat_subDivs[no].getAttribute('dragableBox');
			if(lat_opera)attr = lat_subDivs[no].dragableBox;
			if(attr=='true'){
				lat_subDivs[no].style.cursor='default';	//move
				//lat_subDivs[no].onmousedown = lat_initDrag;
				
				var index = lat_dragableObjectArray.length;
				lat_dragableObjectArray[index] = new Array();
				lat_ref = lat_dragableObjectArray[index];
				lat_ref['obj'] = lat_subDivs[no];
				lat_ref['width'] = lat_subDivs[no].offsetWidth;
				lat_ref['height'] = lat_subDivs[no].offsetHeight;
				lat_ref['left'] = lat_getLeftPos(lat_subDivs[no]);
				lat_ref['top'] = lat_getTopPos(lat_subDivs[no]);
				lat_ref['index'] = lat_countEl;
				lat_countEl++;
			}
		}
		
		/* Creating rectangel indicating where item will be dropped */
		lat_rectangleDiv = document.createElement('DIV');
		lat_rectangleDiv.id='lat_rectangle';
		lat_rectangleDiv.style.display='none';
		dragableElementsLateralBox.appendChild(lat_rectangleDiv);
		dragableElementsLateralBox.onmousemove = lat_moveDragableElement;
		dragableElementsLateralBox.onmouseup = lat_stop_dragDropElement;
		dragableElementsLateralBox.onselectstart = lat_cancelSelectionEvent;
		dragableElementsLateralBox.ondragstart = lat_cancelEvent;
		dragableElementsLateralBox.onresize = lat_repositionlat_dragObjectArray; 
		
		lat_documentHeight = document.documentElement.clientHeight;
	}
}

function habilitaSalvar(){
	//arrumar isso aqui
	if(document.getElementById("divSalvar")){
		document.getElementById("divSalvar").innerHTML="<table border='0' align='center' cellpadding='2' cellspacing='0'><tr><td height='30'>Voc&ecirc; alterou sua p&aacute;gina. Deseja salv&aacute;-la? </td><td height='30'> &nbsp; <input name='cmdSalvar' type='button' class='btn' id='cmdSalvar' value='Salvar p&aacute;gina' onClick='saveData(\""+document.getElementById('pagina').value+"\");'></td></tr></table>";
		document.getElementById("divSalvar").style.display='';
	}
}

window.onload = initdragableElements;