var LAYER_ID 			= 0;
var LAYER_PROJECTID		= 1;
var LAYER_CSSID 		= 2;
var LAYER_LEFT			= 3;
var LAYER_TOP			= 4;
var LAYER_WIDTH			= 5;
var LAYER_HEIGHT		= 6;
var LAYER_Z				= 7;
var LAYER_IMG			= 8;
var LAYER_ISINDEX		= 9;
var LAYER_ORGWIDTH		= 10;
var LAYER_ORGHEIGHT		= 11;


var PROPERTYCOUNT		= 12;


var zArr;
var previousZArr;
var rasterVisible = false;
var isClick;

var startDragX;
var startDragY;
var startDragZ;
var startDragW;
var startDragH;	
var currentHandle;
var nowScaling = false;
var nowDragging = false;
var clickDragTolerance = 4;
var marge = 32;
var workareaDimensionsX = 1200;
var workareaDimensionsY = 3000;
var showingMeta = false;
var hoveringAddress = false;

// === events ================ ////////////////////////////////////////////////////////////

function onMouseOverDragLayer(over, sender) {
	if (finishedLoading) {
		if (!nowScaling && !nowDragging) {
			if (over) {
				if (currentHandle != null) {
					currentHandle.hide();
				}
				currentHandle = dd.elements[sender].dragHandle;
				updateDragHandle(currentHandle);
			} 
			if(!rasterVisible) {
				if (over) {
					setProjectCaption(sender);
					
				} else {
					clearProjectCaption();
				}
			}
		}
	}
}

function my_PickFunc() {

	//if (finishedLoading) {
	//	if (!hoveringAddress && !showingMeta) {
			
			if (!dd.obj.isHandle) {// het is een normale layer
				startDragX = dd.obj.x;
				startDragY = dd.obj.y;
				startDragW = dd.obj.w;
				startDragH = dd.obj.h;
				startDragZ = dd.obj.z;
			//	$(dd.obj.name).className = "itemLayerNoBG";
				nowDragging  = true;
			} else { // het is een scale handle
				raiseLayer(dd.obj.parentElement.name);
				nowScaling = true;
				//$(dd.obj.parentElement.name).className = "itemLayerNoBG";
				
			}
		/*} else {
			showMeta(true);
		}*/
	//}
}

function my_DragFunc() {
	if (finishedLoading) {

		if (dd.obj.isHandle) {	
			
			var dragHandle = dd.obj;
			var layer = dragHandle.parentElement;
	
			var ratio = dragHandle.ratio;
			
			var x =  dragHandle.x - layer.x + dragHandle.w + 5;
	
			var resizeToX = Math.max(Math.min(x,layer.maxw+dragHandle.w - 16),48);
			var resizeToY = Math.max(Math.min(x,layer.maxw+dragHandle.w - 16),48)/ratio;
			if (allowedScale(layer.x, layer.y, resizeToX, resizeToY)) {
				layer.resizeTo(
					resizeToX, 
					resizeToY
				);
			}
			updateDragHandle(dragHandle,resizeToX,resizeToY);

		} else {
			updateDragBoundaries(dd.obj);
			dd.obj.dragHandle.hide();
		}
		if (showingMeta) {
			showMeta(false);
		}
	}
}

function my_DropFunc() {
//xx	if (finishedLoading) {
//			$("defaultInfoSpan").innerHTML += showingMeta;
//		if (!hoveringAddress && !showingMeta) {
		if (!showingMeta) {
			if (!dd.obj.isHandle) { //release normal layer
				isClick = (
					Math.abs(dd.obj.x - startDragX) < clickDragTolerance && 
					Math.abs(dd.obj.y - startDragY) < clickDragTolerance && 
					dd.obj.w == startDragW && 
					dd.obj.h == startDragH
				);
			
				raiseLayer(dd.obj.name);
				if(isClick) {
					handleClick();
				}
				updateDragBoundaries(dd.obj);
				updateLayerArr();
				saveAllLayersAjax();
				nowDragging  = false;
				updateDragHandle(dd.obj.dragHandle);
			//	alert("release normal layer");
				
			} else { //release on scale handle
		//		dd.obj.maximizeZ();
				updateDragHandle(dd.obj);
				updateDragBoundaries(dd.obj.parentElement);
	
				// $(dd.obj.parentElement.name).className = "itemLayer";
		
				//dd.obj.parentElement.className = "itemLayer";
		
				nowScaling = false;
				//alert("release drag layer");
	
			}
		/*} else {
			showMeta(false);
		}*/
	}
}


function updateDragBoundaries(layerObj) {
	layerObj.maxoffl = layerObj.defx+layerObj.w-marge;
	layerObj.maxoffr = workareaDimensionsX-layerObj.defx-layerObj.w;
	layerObj.maxofft = layerObj.defy+layerObj.h-marge;
	layerObj.maxoffb = workareaDimensionsY-layerObj.defy-layerObj.h;
}

function allowedScale(x,y, w, h) {
	//$("defaultInfoSpan").innerHTML = Math.round(y + h - marge);
	if (y + h - marge > 0 && x + w - marge > 0) {
		return true;
	}
	return false;
}

	
	
function onClickRaster() {

	if (finishedLoading) {
	
		if (!adminMode || (adminMode && !editing)) {
			hideRaster();
			showMeta(false);
		}
	}
}
////////////////////////////////////////////////////////////////////////////////////////////////


function hoverAddress(hover) {
	if (hover) {
		hoveringAddress = true;
		$("defaultInfoSpan").style.backgroundColor = "white";
	} else {
		hoveringAddress = false;
		$("defaultInfoSpan").style.backgroundColor = "";
	}
}

function showMeta(yes) {

	if (yes == null) {
	
		if ($("metaContent").style.display == "inline" ){ 
			$("metaContent").style.display = "none"
			$("defaultInfoSpan").className = "normal";
			showingMeta = false;			
		} else {
			$("metaContent").style.display = "inline"						
			showingMeta = true;
			$("defaultInfoSpan").className = "active";
		}
	} else {
		if (yes) {
			$("metaContent").style.display = "inline";
			showingMeta = true;
			$("defaultInfoSpan").className = "active";
		} else {
			$("metaContent").style.display = "none";
			$("defaultInfoSpan").className = "normal";
			showingMeta = false;			
		}
	}

}

function getArrCopy(arr) {
	if (isArray(arr)) {
		var result = new Array();
		for (var i=0;i < arr.length;i++) {
			result.push(getArrCopy(arr[i]));
		}
		return result;
	} else {
		return arr;
	}
}

function hideRaster() {
	enableAllLayers();
	$("rasterLayer").style.visibility = "hidden";
	if (adminMode) {
		$("adminFormProjectID").value = "-1";
	}
	clearProjectDetails();
	
	rasterVisible = false
	hideChildLayers();
}

function initZArr() {
	zArr = new Array();
	for (var i=0;i< dd.elements.length;i++) {
		if (!dd.elements[i].isHandle) {
			var tupel = new Array(parseInt(dd.elements[i].z), dd.elements[i].name);
			zArr.push(tupel);
		}
	}
	previousZArr = getArrCopy(zArr)
}


function zArrIndex(name, arr) {
	if (arr == undefined) {
		arr= zArr;
	}
	for (var i=0;i < arr.length;i++) {
		if (arr[i][1] == name) {
			return i;
		}
	}
	return null;
}


function sortNumericFirstIndexDescending(a, b) {
	var arrA = String(a).split(",");
	var arrB = String(b).split(",");		
	
	return parseInt(arrB[0])-parseInt(arrA[0]);
}

function raiseLayer(layerName) {
	var clickedLayerName = layerName;
	zArr.sort(sortNumericFirstIndexDescending);
	
	var clickedIndex = zArrIndex(clickedLayerName);
	if (clickedIndex != null) {
		var highestZ = zArr[0][0];
		
		for (var i=0;i < clickedIndex;i++) {
			zArr[i][0] = zArr[i+1][0];
		}
		
		zArr[clickedIndex][0] = highestZ;
	
		updateLayerZIndex();	
		setLayersZ();
	}
}

function getIDFromLayerName(layerName) {
	return layerName.substring(4,layerName.length);
}

function makeLayerName(id) {
	return "item" + id;
}

function isArray(a) {
	return isObject(a) && a.constructor == Array;
}

function isObject(a) {
	return (a && typeof a == 'object') || isFunction(a);
}

function isFunction(a) {
	return typeof a == 'function';
}

function updateLayerZIndex() {
	var xmlString = "<layers>";
	for (var i=0;i < zArr.length;i++) {
		var layerName 		= zArr[i][1];
		var layerID 		= getIDFromLayerName(layerName);
		var zArrZ 			= zArr[				zArrIndex(layerName)				][0];
		var zArrZPrevious 	= previousZArr[		zArrIndex(layerName, previousZArr)	][0];

		if (zArrZ != zArrZPrevious) {
			xmlString += "<layer id='" + layerID + "' z='" + zArrZ + "' was='" + zArrZPrevious + "'/>";
		}
	}
	xmlString += "</layer>";
	previousZArr = getArrCopy(zArr);

}

function setLayersZ() {
	for (var i=0;i < zArr.length;i++) {
		var layerName = zArr[i][1];

		var zIndex = zArr[i][0];
		dd.elements[layerName].setZ(zIndex);

		dd.elements[makeHandleName(layerName)].setZ(zIndex+1);

		if (layerName == dd.obj.name && isIndexLayer(dd.obj.name) && isClick) {
			rasterVisible = true;
			$("rasterLayer").style.zIndex = zIndex-1;
			$("rasterLayer").style.visibility = "visible";
			
		}
	}
}


function getZIndexFromArr(layerName) {
	for (var i=0;i<zArr.length;i++) {
		if (layerName == zArr[i][1]) {
			return zArr[i][0];
		}
	}
}


	
function updateLayerArr() {
//	if (layerArr.length != dd.elements.length) {alert("Error layerArr.length != dd.elements.length");}

	for (var i=0;i < dd.elements.length;i++) {
		if (!dd.elements[i].isHandle) {
			var arrIndex = getLayerArrIndex(LAYER_CSSID, dd.elements[i].name);
			layerArr[arrIndex][LAYER_Z] 	= dd.elements[i].z;
			layerArr[arrIndex][LAYER_LEFT] 	= dd.elements[i].x-25;
			layerArr[arrIndex][LAYER_TOP] 	= dd.elements[i].y;			
	
			layerArr[arrIndex][LAYER_WIDTH] = dd.elements[i].w;
			layerArr[arrIndex][LAYER_HEIGHT] = dd.elements[i].h;
			if (dd.elements[i].maxw == null) {
				dd.elements[i].maxw = dd.elements[i].w;
				dd.elements[i].maxw = dd.elements[i].h;

			}
		}
	}
}

function getLayerArrIndex(arrIndex,value) {
	for (var i=0;i < layerArr.length;i++) {
		if (layerArr[i][arrIndex] == value) {
			return i;
		}
	}
	return null;
}

function handleClick() {


	if (!adminMode || (adminMode && !editing)) {
		if (isIndexLayer(dd.obj.name) && !showingMeta) {
			showChildLayers(getIDFromLayerName(dd.obj.name),true);
			disableOtherParentLayers(dd.obj.name)
			setProjectDetails(true, dd.obj.name);
			
			if (adminMode) {
				handleAdminClickLayer();
			}
		} 
	}
}



function enableAllLayers() {
	for (var i = 0; i <  dd.elements.length; i++) {
		if (!dd.elements[i].isHandle) {
			dd.elements[i].setDraggable(true);
		}
	}		
}

function makeLayerID(layerName) {
	return parseInt(layerName.substring(4,layerName.length));
}


function isIndexLayer(layerName) {
	var layerID = getIDFromLayerName(layerName);
	return layerArr[getIndex(LAYER_ID, layerID)][LAYER_ISINDEX];
}

function disableOtherParentLayers(exceptThisLayerName) {
	for (var i=0;i < dd.elements.length;i++) {
		if (!dd.elements[i].isHandle) {
			var layerName = dd.elements[i].name;
			if (exceptThisLayerName != layerName && isIndexLayer(layerName)) {
				dd.elements[i].setDraggable(false);
			}
		}
	}	
}



function hideChildLayers() {
	for (var i=0;i < layerArr.length;i++) {
		if (!layerArr[i][LAYER_ISINDEX]) {
			var layerName = makeLayerName(layerArr[i][LAYER_ID]);
			dd.elements[layerName].hide();
		}
	}
}	

function showChildLayers(id) {
	//alert("showChildLayers: " + id);
	var thisProjectID = layerArr[getIndex(LAYER_ID, id)][LAYER_PROJECTID];
	
	for (var i=0;i < layerArr.length;i++) {
		if (layerArr[i][LAYER_PROJECTID] == thisProjectID) {
			var layerName = makeLayerName(layerArr[i][LAYER_ID]);
			var imgID = "image" + layerArr[i][LAYER_ID];
			if (
					$(imgID).src.indexOf(layerArr[i][LAYER_IMG]) == -1
			) {
				$(imgID).src = layerArr[i][LAYER_IMG];
			}
			
			dd.elements[layerName].show();
			raiseLayer(layerName);
		}/* else {
			dd.elements[makeLayerName(layerArr[i][LAYER_ID])].hide();
		}*/

	}
}


function initDragDrop() {	
	SET_DHTML(CURSOR_MOVE, NO_ALT, SCROLL,RESET_Z);
	/*for (var i=0; i < layerArr.length;i++) {
		var layerName = layerArr[i][LAYER_CSSID];

		ADD_DHTML(layerName);
		dd.elements[layerName].minw = 16;
		dd.elements[layerName].minh = 16;
		//alert(layerArr[i][LAYER_ORGWIDTH]);
		dd.elements[layerName].maxw = layerArr[i][LAYER_ORGWIDTH];
		dd.elements[layerName].maxh = layerArr[i][LAYER_ORGHEIGHT];
		dd.elements[layerName].isHandle = false;
		
	}
	hideChildLayers();*/
}



/*
function createLayers() {
	for (var i=0;i < layerArr.length;i++) {
		$("docBody").appendChild(createLayer(layerArr[i]));
	}
}

function createLayer(arr) {
	var newDiv = document.createElement("div");
	newDiv.setAttribute("id", arr[LAYER_CSSID]);
	newDiv.setAttribute("class", "itemLayer");	
	newDiv.setAttribute("onmouseover","onMouseOverDragLayer(true,'"+arr[LAYER_CSSID]+"');");
	newDiv.setAttribute("onmouseout","onMouseOverDragLayer(false,'"+arr[LAYER_CSSID]+"');");


	newDiv.style.left 		= arr[LAYER_LEFT] + "px";
	newDiv.style.top 		= arr[LAYER_TOP] + "px";
	var width 	= arr[LAYER_WIDTH];
	var height 	= arr[LAYER_HEIGHT];
	var z		= arr[LAYER_Z];
	if (width != 0) {
		newDiv.style.width 	=  width + "px";
	}

	if (height != 0) {
		newDiv.style.height 	=  height + "px";
	}

	if (z == 0) {
		z = arr[LAYER_Z] * 10;
	}
	newDiv.style.zIndex		= z;
	
	var newIMG = document.createElement("img");
	newIMG.setAttribute("src", contentWebPath + arr[LAYER_IMG]);
	newIMG.style.width = "100%";
	newIMG.style.height = "100%";
	
	newDiv.appendChild(newIMG);

	if (adminMode) {
		appendLayerOptions(newDiv, arr[LAYER_ID], arr[LAYER_PROJECTID]);
	}
	
	alert(arr[LAYER_CSSID]);
	return newDiv;
}
*/

function createScaleHandles() {
	for (var i=0; i < layerArr.length;i++) {
		createScaleHandle(layerArr[i]);
	}
}

function makeHandleName(layerID) {
	return layerID + "_ScaleHandle";
}

function createScaleHandle(arr) {
	var scaleDiv = document.createElement("div");
	var scaleImg = document.createElement("img");
	scaleDiv.appendChild(scaleImg);

	var handleName = makeHandleName(arr[LAYER_CSSID]);
	scaleDiv.setAttribute("class", "scalehandle");
	scaleDiv.setAttribute("name", handleName);
	scaleDiv.setAttribute("id", handleName);
	scaleDiv.className = "scalehandle";
	if (isIE) {
		var imgurl = "img/marker_rect.gif";
	} else {
		var imgurl = "img/marker_rect.png";
	}
	
	scaleImg.setAttribute("src", imgurl);	
	
	var parentElement = dd.elements[arr[LAYER_CSSID]];


	$("docBody").appendChild(scaleDiv);
	
	ADD_DHTML(handleName+CURSOR_SE_RESIZE);

	var dragHandle = dd.elements[handleName];
	dragHandle.ratio = parentElement.w / parentElement.h;

	dragHandle.isHandle = true;
	dragHandle.parentElement = parentElement;
	parentElement.dragHandle = dragHandle;
	dragHandle.hide();
		
	
}






function hideScaleHandle() {
	if (!nowScaling && currentHandle != null && !nowDragging) {
		currentHandle.hide();
	}
}

function updateDragHandle(dragHandle) {

	var p = dragHandle.parentElement;
	var d = dragHandle;
	
	var dragx = p.x + p.w - d.w - 5;
	var dragy = p.y + p.h - d.h - 5;

	
	dragHandle.moveTo(
		dragx, 
		dragy
	);
	dragHandle.show();
	dragHandle.setZ(dragHandle.parentElement.z+1);
}