/*
    JavaScript functions used to demonstrate
    Building Web Pages using Scriptaculous and Prototype
    [Extending Scriptaculous and Switching Draggables with Sortables]

*/

var draggableClass;
var droppableClass;
var assetDataClass;
var containerDataClass;
var droppableElementsUseId;

var doRevert = true;
/*
    initDraggableDroppable
    Purpose: To make the tree items draggable and the container items sortable (called after the BODY loads)

*/
function initDraggableDroppable(options) {
    draggableClass = options.draggableClass;
    droppableClass = options.droppableClass;
    assetDataClass = options.assetDataClass;
    containerDataClass = options.containerDataClass;
    droppableElementsUseId = options.droppableElementsUseId;
    createAllDraggables();
    createAllSortables();
}


/*
    dragStart
    
    Purpose: To make all container DIVs droppable.
    This is called after a drag event begins which allows the dragged
    element to be dropped into a container.
*/
function dragStart(element) {
	doRevert = true;
    createAllDroppables();
	
}

/*
    createAllDroppables
    
    Purpose: To make all of the container DIV elements droppable.
*/
function createAllDroppables() {
    var containers = document.getElementsByClassName(droppableClass);
 
	for (var i = 0; i < containers.length; i++) {
		containertje = containers[i];
        Droppables.add(containertje,{hoverclass: 'dropHover',onDrop:function(objectElement, containerElement, objectEvent){ dropObject(objectElement, containerElement, objectEvent);} });
    }
}

function findPosY(obj) 
{ 
    var curtop = 0; 
     
    if (obj.offsetParent) 
    { 
        while (obj.offsetParent) 
        { 
            curtop += obj.offsetTop 
            obj = obj.offsetParent; 
        } 
    } 
    else if (obj.y) 
        curtop += obj.y; 
     
    return curtop; 
}

function getElementsByClassName(oElm, strTagName, oClassNames){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	var arrRegExpClassNames = new Array();
	if(typeof oClassNames == "object"){
		for(var i=0; i<oClassNames.length; i++){
			arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));
		}
	}
	else{
		arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));
	}
	var oElement;
	var bMatchesAll;
	for(var j=0; j<arrElements.length; j++){
		oElement = arrElements[j];
		bMatchesAll = true;
		for(var k=0; k<arrRegExpClassNames.length; k++){
			if(!arrRegExpClassNames[k].test(oElement.className)){
				bMatchesAll = false;
				break;
			}
		}
		if(bMatchesAll){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}







/*
    createAllDraggables
    
    Purpose: To make all of the tree items DIV elements draggable.
*/
function createAllDraggables() {
    var assets = document.getElementsByClassName(draggableClass);
    for (var i = 0; i < assets.length; i++) { 
            asset = assets[i];
	
            new Draggable(asset,{ghosting: true,revert: true,reverteffect:
						  									function(element, top_offset, left_offset){
																
																if ( doRevert ) {
																	new Effect.MoveBy(element, -top_offset, -left_offset, {duration:0.3}); 
																}else{
																	new Effect.MoveBy(element, -top_offset, -left_offset, {duration:0}); 
																}
																
															}
															,dragStart:function(element){dragStart(element)} });
    }
}
/*
    dropObject
    
    Purpose: To add the dropped object data to the top of the list - then make the containers sortable.
*/
function dropObject(objectElement, containerElement, mijnevent) {
  doRevert = false;
  
	var containers = getElementsByClassName(containerElement, "div", containerDataClass ); 
	
	var cursor = {x:0, y:0};
	if (mijnevent.pageX || mijnevent.pageY) {
		cursor.x = mijnevent.pageX;
		cursor.y = mijnevent.pageY;
	} 
	else {
		var de = document.documentElement;
		var b = document.body;
		cursor.x = mijnevent.clientX + 
			(de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
		cursor.y = mijnevent.clientY + 
			(de.scrollTop || b.scrollTop) - (de.clientTop || 0);
	}
	

	voornummer = 0;
  
  	for (var i = 0; i < containers.length; i++) {
		pos = findPosY( containers[i] );
		//alert( pos + " : " + cursor.y + " : " + i + " : " + (pos > cursor.y) );
		if ( pos > cursor.y ){
			voornummer = i;
			break;
		}
//	alert ( pos + " : " + cursor.y);
		 
  }


  if ( voornummer > 0 ){
	  	//alert( voornummer );
	  	//voornummer = voornummer - 1;
	  	addObjectToContainer(objectElement, containerElement,containers[voornummer]);
  }else{
	  //	alert( "raar" );
		if ( containers.length > 0 ){
			addObjectToContainer(objectElement, containerElement,containers[containers.length]);
			
		}else{
			addObjectToContainer(objectElement, containerElement,""); 
		}

	 	// addObjectToContainer(objectElement, containerElement,""); 
  }
  
    
	destroyAllDroppables();
    createAllSortables();
}
/*
    addObjectToContainer
    
    Purpose: To extract the HTML fragment from the dragged element and insert it at the top of the container.
*/
function addObjectToContainer(objectElement, containerElement, beforeElement) {
   var assetDataElementArray = document.getElementsByClassName(assetDataClass,objectElement); // Locate the child div of this object that contains the actual data.
    var objectData = assetDataElementArray[0].innerHTML;

	assetHTML = "<div class=\"" + containerDataClass +"\">" + objectData + "</div>";

 	if (beforeElement )
	{
		new Insertion.Before(beforeElement, assetHTML);
		
	}else{
		new Insertion.Bottom(containerElement, assetHTML);
	}
    
	
}
/*
    destroyAllDroppables
    
    Purpose: To remove that ability to drop into the containers.
*/
function destroyAllDroppables() {
    var containers = document.getElementsByClassName(droppableClass);
   
    for (var i = 0; i < containers.length; i++) {
        sortedObjectList = containers[i].id
        Droppables.remove(sortedObjectList);
    }
}
/*
    createAllSortables
    
    Purpose: To make all of the containers sortable.
*/
function createAllSortables() {
    var containers = document.getElementsByClassName(droppableClass);
    var containerNames = getContainerNames();
    for (var i = 0; i < containers.length; i++) {
        containerId=containers[i].id;
	 
        eval("Sortable.create(containerId, {tag:'div',ghosting:true,revert: true,dropOnEmpty:true, onUpdate:function(sortable){ updateDrop(sortable) }, constraint:false,containment:[" + containerNames + "]});")
 
    }
}
var dragElement;

function startDrag(elementje)
{
 
}

function updateDrop(sortable)
{

	hideEdit(true);
	isBusy = true;
	containers = document.getElementsByClassName("afbeeldingholder", sortable);
    for (var i = 0; i < containers.length; i++) {
       	
		updateImage(containers[i]);
	     	
	}
	isBusy = false;
 

}



function updateImage(imgHolder){
	 i = 0;
	gevonden = false;
	afbeeldingholderwidth = imgHolder.parentNode.attributes["width"].value;

	divtemplateholder = getParentByClassName(imgHolder,"templateholder");
	holderWidth = divtemplateholder.attributes["width"].value;
 
	if ( afbeeldingholderwidth.indexOf('%') > -1 )
	{
		//de grote moet in procenten berekend worden
		procenten = afbeeldingholderwidth.substring(0, afbeeldingholderwidth.indexOf('%'));
		afbeeldingwidth = ( holderWidth / 100 ) * procenten;
	}else{
		//de grote staat vast
		afbeeldingwidth = afbeeldingholderwidth;
	}
	//afstanden van de afbeelding verkleinen met 20 ( voor de paddings etc.)
	afbeeldingwidth = afbeeldingwidth - 2;
	//alert ( holderWidth + ", " + afbeeldingholderwidth + ", " + afbeeldingwidth  );

	//Hoeveel ruimte heeft de contenttemplate voor een image?
	
	//alert( holderWidth );
	afbeeldingwidth = Math.round(afbeeldingwidth);
 
 	strImage = imgHolder.innerHTML;
	
	//we gaan de width wijzigen

	var re = new RegExp("([width=]+[0-9]+[&])");
	
	strImage = strImage.replace(re,"width="+afbeeldingwidth+"&");
	imgHolder.innerHTML = strImage;
//	\bwidth=[0-9]+\b
//				width=123&
				
	// <img src="http://office.it-ernity.nl/erik_test/image.php?width=123&pic=/home/it-ernity/erik_test/userfiles/images/2/Autumn Leaves.jpg" />';

}

/*

    getContainerNames
    
    Purpose: To retrieve a list of all of the container IDs (used to create the sortables).
*/
function getContainerNames() {
    containers = document.getElementsByClassName(droppableClass);
    containerObjectListNames = ""; 
    for (var i = 0; i < containers.length; i++) {
        containerObjectListNames += "\"" + containers[i].id + "\","; 
    }
    containerObjectListNames = containerObjectListNames.substring(0,containerObjectListNames.length-1);
    return containerObjectListNames;
}
/*
    destroyAllSortableLists
    
    Purpose: To remove that ability to sort the containers.
*/
function destroyAllSortableLists() {
    containers = document.getElementsByClassName(droppableClass);
    for (var i = 0; i < containers.length; i++) {
        sortedObjectListId = containers[i].firstChild.id
        Sortable.destroy(sortedObjectListId);
    }
}


function randomUUID(len) {
  var uuid = [], me = arguments.callee, c = me.chars;
  if (!c) c = me.chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(''); 

  if (len) {
    // Compact uuid form
    for (var i = 0; i < len; i++) uuid[i] = c[0 | Math.random()*62];
  } else {
    var ri=0, r;

    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
    uuid[14] = '4';

    for (var i = 0; i < 36; i++) {
      if (uuid[i]) continue;
      r = 0 | Math.random()*16;
      // i==19: set the high bits of clock sequence as per rfc4122, sec. 4.1.5
      uuid[i] = c[(i == 19) ? (r & 0x3) | 0x8 : r & 0xf];
    }
  }

  return uuid.join('');
}