// Author: Marcel Wouterse
// Copyright to Author
// Not allowed to be used without written permission of author!

//################################
//#         Drag & Drop          #
//################################
function setWidthFor(element, value){
    if (element.width)
	element.width = value;
    else
	element.style.width = value;
}

function setHeightFor(element, value){
    if (element.height)
	element.height = value;
    else
	element.style.height = value;
}

function getWidthFor(element){
    if (element.width)
	return element.width;
    else
	return element.style.width;
}

function getHeightFor(element){
    if (element.height)
	return element.height;
    else
	return element.style.height;
}


var isIE=document.all;
var isFF=document.getElementById&&!document.all;
var isdrag=false;
var xAtClick;
var yAtClick;
var xPicStart;
var yPicStart;
var yOffset=60;

function deselectForDrag(e){
	isdrag=false;
}

function setReadyToDrag(){
	DeskTop.onmousedown=selectForDrag;
	DeskTop.onmouseup=deselectForDrag;
}

function dragImage(e)
{
  if (isdrag)
  {
    dobj.style.left = isFF ? xPicStart + e.clientX - xAtClick : xPicStart + event.clientX - xAtClick;
    dobj.style.top  = isFF ? yPicStart + e.clientY - yAtClick : yPicStart + event.clientY - yAtClick;
    clipImageToDesktop(dobj);
    return false;
  }
}

function findDraggableElement(e) {
	var fobj       = isFF ? e.target : event.srcElement;
	var topelement = isFF ? "HTML" : "BODY";
	if(!fobj)
		return null;
	while (fobj.tagName != topelement && fobj.className != "draggableElement")
	{
 		fobj = isFF ? fobj.parentNode : fobj.parentElement;
	}
	if (fobj.className=="draggableElement")
		return fobj;
	return null;
}


function selectForDrag(e){
 	var fobj=findDraggableElement(e);
  	if (fobj!=null)
  	{
    	isdrag = true;
    	dobj = fobj;
    	changeSelection(dobj);
    	xPicStart = parseInt(dobj.style.left+0,10);
    	yPicStart = parseInt(dobj.style.top+0,10);
    	xAtClick = isFF ? e.clientX : event.clientX;
    	yAtClick = isFF ? e.clientY : event.clientY;
    	DeskTop.onmousemove=dragImage;
    	return false;
  	}
}


function readStyle(element, property){
	if (element.style[property] !=null) {
		return element.style[property];
	} else if (element.currentStyle) {
		return element.currentStyle[property];
	} else if (document.defaultView && document.defaultView.getComputedStyle) {
		var style = document.defaultView.getComputedStyle(element, null)
		return style.getPropertyValue(property);
	} else {
		return null;
	}
}

function setStyle(element, property, value){
	if (element.style[property] !=null) {
		element.style[property] = value;
	} else if (element.currentStyle) {
		element.currentStyle[property] = value;
	} else if (document.defaultView && document.defaultView.getComputedStyle) {
		var style = document.defaultView.getComputedStyle(element, null)
		style.setPropertyValue(property,value);
	} else {
		return null;
	}

}

function getEvent(event){
	if (!event) event = window.event

	if (event.target) {
		if (event.target.nodeType == 3) event.target = event.target.parentNode
	} else if (event.srcElement) {
		event.target = event.srcElement
	}
		return event
}

function giveInt(pString){
	var lNumber = parseInt(pString,10);
	if(!lNumber)
		return 0;
	return lNumber;
}

//################################
//#      Selection Functions     #
//################################

function initialiseSelect (evt) {
     lSelectedElement = findDraggableElement (evt);
     if (lSelectedElement)
       changeSelection(lSelectedElement);
}

function changeSelection(pSelection){
	// Change the global selectedElement with pSelection and handle it.
	if(pSelection.id=='ExampleText' || pSelection.id=='OverlayImg')
		return;
	lState = State;
	State = "deselect";
	imageDeselected(pSelection);
	selectedElement = pSelection;
	imageSelected(pSelection);
}

function imageDeselected(pSelection){
	if(pSelection==null)
		return;
	setStyle(pSelection,'borderStyle',"none");
	setStyle(pSelection,'left', giveInt(readStyle(pSelection,'left')) + 1);
	setStyle(pSelection,'top', giveInt(readStyle(pSelection,'top')) + 1);
}

function imageSelected(pSelection){
	if(pSelection==null)
		return;
   	setStyle(pSelection,'borderColor','#aaa');
	setStyle(pSelection,'borderWidth', 1);
	setStyle(pSelection,'borderStyle','solid');
	setStyle(pSelection,'left', giveInt(readStyle(pSelection,'left')) - 1);
	setStyle(pSelection,'top', giveInt(readStyle(pSelection,'top')) - 1);
	setDeskTopStatus(pSelection);
}


//#####################################
//#              zIndex               #
//#####################################

function SendBackwards() {
	zIndexSelected = readStyle(selectedElement,'zIndex');
	for (layerIndex=1; layerIndex<LayerArray.length;layerIndex++)
		if(zIndexSelected==((readStyle(LayerArray[layerIndex],'zIndex'))+1)){
			setStyle(selectedElement,'zIndex', readStyle(LayerArray[layerIndex],'zIndex'));
			setStyle(LayerArray[layerIndex],'zIndex',readStyle(selectedElement,'zIndex') + 1);
			break;
		}
    refreshImages();
    return;
}

function SendToBack() {
	zIndexSelected = readStyle(selectedElement,'zIndex');
	for (layerIndex=1; layerIndex<LayerArray.length;layerIndex++)
		if(zIndexSelected >(readStyle(LayerArray[layerIndex],'zIndex'))){
			setStyle(LayerArray[layerIndex],'zIndex', giveInt(readStyle(LayerArray[layerIndex],'zIndex')) + 1);
		}
	setStyle(selectedElement,'zIndex',100);
    refreshImages();
    return;
}

function SendForwards() {
	zIndexSelected = readStyle(selectedElement,'zIndex');
	for (layerIndex=1; layerIndex<LayerArray.length;layerIndex++)
		if(zIndexSelected==((readStyle(LayerArray[layerIndex],'zIndex'))-1)){
			setStyle(selectedElement,'zIndex', readStyle(LayerArray[layerIndex],'zIndex'));
			setStyle(LayerArray[layerIndex],'zIndex', readStyle(selectedElement,'zIndex') - 1);
			break;
		}
    refreshImages();
    return;
}

function SendToFront() {
	zIndexSelected = readStyle(selectedElement,'zIndex');
	for (layerIndex=1; layerIndex<LayerArray.length;layerIndex++)
		if(zIndexSelected <(readStyle(LayerArray[layerIndex],'zIndex'))){
			setStyle(LayerArray[layerIndex],'zIndex',giveInt(readStyle(LayerArray[layerIndex],'zIndex')) - 1);
		}
	setStyle(selectedElement,'zIndex',100+ImageArray.length);
    refreshImages();
    return;
}

function padout(number) { return (number < 10) ? '0' + number : number; }

function getImage(pIndex){
	lIndex = padout(pIndex);
	lImageName = "Image_"+lIndex;
	lImage=document.getElementById(lImageName);
	return lImage;
}

function refreshImages(){
	// For Bug reasons. Gif gets stuck with certain actions.
	for (imageIndex=1; imageIndex<ImageArray.length;imageIndex++){
		lImage = getImage(imageIndex);
		lImage.src = ImageArray[imageIndex].src;
	}
	return;
}

function getSelectedIndex(){
	lLayerId=selectedElement.id;
	lNumber=lLayerId.substring(5,lLayerId.length);
	lNumber=giveInt(lNumber);
	return padout(lNumber)
}

function getLayerFromCurrentImage(pImage){
	// trash
	lImageId=pImage.name;
	lNumber=lLayerId.substring(5,lImageId.length);
	lNumber=giveInt(lNumber);
	lLayerName="Layer"+lNumber;
	return document.getElementById(lLayerName);
}

function getImageFromCurrentLayer(pAlert){
	if(selectedElement==null){
		if(pAlert == true || pAlert ==null)
			alert("Select an Image");
		refreshImages();
		return;
	}
	lNumber=getSelectedIndex()
	lImageName="Image_"+lNumber;
	return document.getElementById(lImageName);
}

function getImageFromLayer(pLayer){
	lImageId=pLayer.id;
	lNumber=lImageId.substring(5,lImageId.length);
	lLayerName="Image_"+lNumber;
	lImage = document.getElementById(lLayerName);
	return lImage
}

function getImagePropertiesFor(pSelectedElement){
	if(selectedElement==null){
		return;
	}
	lNumber=getSelectedIndex()
	lNumber=giveInt(lNumber);
	return PropertyArray[lNumber];
}

//#####################################
//#       Clip Images to Desktop      #
//#####################################

function clipImageToDesktop(pSelectedElement){
	lDeskHeight= giveInt(DeskTop.clientHeight);
	lDeskWidth = giveInt(DeskTop.clientWidth);
	lDeskTop=giveInt(readStyle(DeskTop,'top'));
	lDeskTop = giveInt(readStyle(DeskTop,'top'));
	lDeskLeft = giveInt(readStyle(DeskTop,'left'));
	lCurLeft = giveInt(readStyle(pSelectedElement,'left'));
	lCurTop = giveInt(readStyle(pSelectedElement,'top'));
	lClipRight = lDeskWidth - lCurLeft;
	lClipBottom = lDeskHeight - lCurTop;
	lClipTop = lDeskTop - lCurTop;
	lClipLeft = lDeskLeft - lCurLeft;
	setStyle(pSelectedElement,'clip',"rect("+lClipTop+"px "+ lClipRight +"px "+lClipBottom+"px " +lClipLeft+"px)");
}

//######################################
//#           Zoom Functions           #
//######################################

function Zoomin(){
	lImage = getImageFromCurrentLayer();
	if (lImage==null)
		return;
	lCurWidth= giveInt(getWidthFor(lImage));
	lCurHeight= giveInt(getHeightFor(lImage));
	lNewWidth = lCurWidth*2;
	lNewHeight = lCurHeight*2;
	setWidthFor(lImage,lNewWidth);
	setHeightFor(lImage,lNewHeight);
	clipImageToDesktop(selectedElement);
	refreshImages();
}

function Zoomout(){
	lImage = getImageFromCurrentLayer();
	if (lImage==null)
		return;
	lCurWidth= giveInt(getWidthFor(lImage));
	lCurHeight= giveInt(getHeightFor(lImage));
	lNewWidth = lCurWidth/2;
	lNewHeight = lCurHeight/2;
	setWidthFor(lImage,lNewWidth);
	setHeightFor(lImage,lNewHeight);
	refreshImages();
	ensureOnDesktop(selectedElement);
}

function noZoom(){
	lImage = getImageFromCurrentLayer();
	if (lImage==null)
		return;
	for(i=1;i<ImageArray.length;i++)
		if(lImage.src == ImageArray[i].src)
			{
				setWidthFor(lImage,ImageArray[i].width);
				setHeightFor(lImage,ImageArray[i].height);
			}
	refreshImages();
}

function ensureOnDesktop(pSelection){
	lLeft = giveInt(readStyle(pSelection,'left'));
	lTop = giveInt(readStyle(pSelection,'top'));
	lWidth = giveInt(pSelection.clientWidth);
	lHeight = giveInt(pSelection.clientHeight);
	if (lLeft < 0-(lWidth - 25))
		setStyle(pSelection,'left', 25 - lWidth);
	if (lTop < 0-(lHeight - 25))
		setStyle(pSelection,'top', 25 - lHeight);
	clipImageToDesktop(pSelection);
}

function sendSelectedImage(pForm,pNumber){
	pForm.data.value=pNumber;
	pForm.submit();
	return true;
}

function saveImage(){
    var lImage = getImageFromCurrentLayer();
    var lSrc = getSourcePathFor(lImage);
    if(lSrc=='' || lSrc==null){
    	alert("No image selected!");
    	return false;
    }
	location.href="./index.cfm?fa=download_file&image_path="+lSrc;
}


function apply_action(){
	return sendActionForm();
}


//##################################
//#          Upload Layer          #
//##################################

function showUpload(){
	cancelUploadOrSave();
	setStyle(document.getElementById('UploadLayer'),'visibility','visible');
	setStyle(document.getElementById('UploadLayer'),'zIndex',1000);
	var lDeskTopStatus=document.getElementById("DesktopStatus");
		lDeskTopStatus.style.visibility='hidden';
}

function hideUpload(){
	setStyle(document.getElementById('UploadLayer'),'visibility','hidden');
	var lDeskTopStatus=document.getElementById("DesktopStatus");
	lDeskTopStatus.style.visibility='visible';
	document.getElementById('previewImage').src = "./images/pixel.gif";
}

function changePreviewImage(p_New_source){
	if(isFF)
		return;
    document.getElementById('previewImage').src = p_New_source;
    }

 function setUploadLayer(){
	lUploadLayer=document.getElementById('UploadLayer');

	setStyle(lUploadLayer,'left', giveInt(readStyle(DeskTop,'left')));
	setStyle(lUploadLayer,'top', giveInt(readStyle(DeskTop,'top')));
 }

function prePostForm(){
	setImageValuesForSelection();
	setDeskTopValues();
	return true;
}

//#######################################

function setDeskTopValues(){
	document.getElementById('DeskTopWidth').value = giveInt(DeskTop.clientWidth)-1;

}

 function setImageValuesForSelection(){
	for(i=1;i<ImageArray.length;i++){
			lNumber=padout(i);
			lImg = document.getElementById("Layer"+lNumber);
			document.getElementById('image_x_'+lNumber).value=giveInt(readStyle(lImg,'left'));
			document.getElementById('image_y_'+lNumber).value=giveInt(readStyle(lImg,'top'));
			document.getElementById('image_z_'+lNumber).value=giveInt(readStyle(lImg,'zIndex'));
			//document.all('image_zoom_'+lNumber).value=giveInt(readStyle(lImg,'left'));
			document.getElementById('image_width_'+lNumber).value=lImg.clientWidth;
			document.getElementById('image_height_'+lNumber).value=lImg.clientHeight;
			document.getElementById('image_clip_'+lNumber).value=readStyle(lImg,'clip');
		}
 }

 function setDeskTopStatus(pSelection){
 	lLayer = pSelection;
 	lProps = getImagePropertiesFor(pSelection);
 	if(!lProps)
 		return;
 	lString="";
 	lString += "width:"+lProps['width']+" ";
 	lString += "height:"+lProps['height']+" ";
 	lString += "size:"+lProps['size']+" ";
 	if(lProps['colors'] != "")
 		lString += "colors:"+lProps['colors']+" ";
 	var lDeskTopStatus=document.getElementById("DesktopStatus")
		lDeskTopStatus.innerHTML = lString;
 }

 function getSourcePathFor(pImage){
 	var lProps = getImagePropertiesFor();
 	return lProps['src'];
 }

function deskTopResized(){
	setDeskTopWidth();
	centreImages();
	setDeskTopHeight();
}

function centreImageLayer(pImageLayer){
	centreLayer(lLayer);
}

function centreLayer(pImageLayer){
	lWidth = giveInt(pImageLayer.clientWidth);
	lDeskWidth = giveInt(DeskTop.clientWidth);
	lImage = getImageFromLayer(pImageLayer);
	if(!lImage)
		return;
	lImageWidth = lImage.width;
   	lLeft = (lDeskWidth/2)-(lWidth/2);
   	if(lLeft < 10)
   		lLeft = 10;
	setStyle(pImageLayer,'left', lLeft);
}

function centreImages(){
 	for(i=1;i<ImageArray.length;i++){
		lNumber=padout(i);
		lImgLayer = document.getElementById("Layer"+lNumber);
		centreLayer(lImgLayer);
	}
}


//#####################################
//#            Menu Actions           #
//#####################################

function sendCropFrame(pForm){
	var lBox=document.getElementById('clipBox');
	if (lBox==null)
		return false;

	lBoxLeft = giveInt(readStyle(lBox,'left'));
	lBoxTop = giveInt(readStyle(lBox,'top'));
	lBoxWidth = giveInt(lBox.style.width);
	lBoxHeight = giveInt(lBox.style.height);

	lLeft = giveInt(selectedElement.style.left);
	lTop = giveInt(selectedElement.style.top);
	lWidth = giveInt(selectedElement.clientWidth);
	lHeight = giveInt(selectedElement.clientHeight);

	lLeftOffset = lBoxLeft-lLeft;
	lTopOffset = lBoxTop-lTop;
	lString=lBoxWidth+"x"+lBoxHeight+"+"+lBoxLeft+"+"+lBoxTop;
	pForm.data.value=lString;
	return true;
}

function showParametersDimensions(pContainer,pVisible){
	l_visibility = pVisible ? 'visible' : 'hidden';
	l_element = document.getElementById('infoWidth');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;

	l_element = document.getElementById('infoHeight');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;
}

function showParametersPosition(pContainer,pVisible){
	l_visibility = pVisible ? 'visible' : 'hidden';
	l_element = document.getElementById('infoOffsetX');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;

	l_element = document.getElementById('infoOffsetY');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;
}

function showparamatersAspectRation(pContainer, pVisible){
	l_visibility = pVisible ? 'visible' : 'hidden';
	l_element = document.getElementById('infoAspect');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;
}

function showParametersButtons(pContainer,pVisible){
	l_visibility = pVisible ? 'visible' : 'hidden';
	l_element = document.getElementById('infoBtnApply');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;

	l_element = document.getElementById('infoBtnCancel');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;

	l_element = document.getElementById('infoBtnHelp');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;
}

function showParametersText(pContainer,pVisible){
	l_visibility = pVisible ? 'visible' : 'hidden';
	l_element = document.getElementById('infoText');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;

	l_element = document.getElementById('infoBtnPreview');
		pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;

	l_element = document.getElementById('infoFont');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;

	l_element = document.getElementById('infoSize');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;

	l_element = document.getElementById('infoColor');
	pContainer.appendChild(l_element);
	l_element.style.visibility=l_visibility;
}

function showParametersCropBoxBar(){
	hideParametersBar();
	var l_infoBar = document.getElementById('apply_toolbar');
	l_infoBar.style.visibility='visible';

	showParametersDimensions(l_infoBar,true);
	showParametersPosition(l_infoBar,true);
	showParametersButtons(l_infoBar,true);
}

function showParametersResizeBar(){
	hideParametersBar();
	var l_infoBar = document.getElementById('apply_toolbar');
	l_infoBar.style.visibility='visible';

	showParametersDimensions(l_infoBar,true);
	showparamatersAspectRation(l_infoBar,true);
	showParametersButtons(l_infoBar,true);
}

function showParametersBorderBar(){
	hideParametersBar();
	var l_infoBar = document.getElementById('apply_toolbar');
	l_infoBar.style.visibility='visible';

	l_element = document.getElementById('infoBorderType');
	l_infoBar.appendChild(l_element);
	l_element.style.visibility='visible';

	l_element = document.getElementById('borderWidth');
	l_infoBar.appendChild(l_element);
	l_element.style.visibility='visible';

	l_element = document.getElementById('infoColor');
	l_infoBar.appendChild(l_element);
	l_element.style.visibility='visible';

	l_element = document.getElementById('infoRadius');
	l_infoBar.appendChild(l_element);
	l_element.style.visibility='hidden';

//	l_element = document.getElementById('infoBorderShadow');
//	l_infoBar.appendChild(l_element);
//	l_element.style.visibility='visible';

	showParametersButtons(l_infoBar,true);
}

function showParametersTextBar(){
	hideParametersBar();
	var l_infoBar = document.getElementById('apply_toolbar');
	l_infoBar.style.visibility='visible';

	showParametersText(l_infoBar,true);
	showParametersButtons(l_infoBar,true);

	setReadyToDrag();
}

function showPreviewText(){
    var lText = document.getElementById('ExampleImage');
    lText.style.visibility='visible';
    var lTextLayer = document.getElementById('ExampleText');
    lTextLayer.style.zIndex=999;
    lText.parentNode.style.top = selectedElement.style.top;
    lText.parentNode.style.left = selectedElement.style.left;
}

function cancelCropOrResize(){
	hideParametersBar();
	hideSelectBox();
	resetImages();
	centreImages();
}

function changedFillType(){
	var lForm = document.ActionForm;
	var lField = lForm.filltype;
	var lValue = lField.options[lField.selectedIndex].value;
	if (lValue == 'gradient' || lValue=='plasma')
		lForm.Color2.disabled = false;	
	else
		lForm.Color2.disabled = true;
}


//####################################
//#             TextBox              #
//####################################

function setDefaultsBorder(){
	var lForm = document.ActionForm;
	var lBorderType = lForm.BorderType;
	var lBT = lBorderType.options[lBorderType.selectedIndex].value;
	if (lBT == 'raised')
		lForm.Color.disabled = 'true';
	else if (lBT == 'lowered')
		lForm.Color.disabled = 'true';
	else
		lForm.Color.disabled = false;
	l_element = document.getElementById('infoRadius');
	if(lBT == 'rounded')
		l_element.style.visibility='visible';
	else
		l_element.style.visibility = 'hidden';

}


function textInputPreview(){
	getText();
}

function sendCreateBorder(pForm){
//	var lTextBorder=document.getElementById('borderWidthInput');
	var lForm = document.ActionForm;
	var lString = "";
	var lWidth = lForm.borderWidthInput.value;
	var lTypeSelect = lForm.BorderType;
	var lType = lTypeSelect.options[lTypeSelect.selectedIndex].value;
//	var lShadowSelect = lForm.Shadow;
//	var lShadow = lShadowSelect.options[lShadowSelect.selectedIndex].value;
	var lColorSelect = lForm.Color;
	var lColor = lColorSelect.options[lColorSelect.selectedIndex].value;
	var lRadiusSelect = lForm.Radius;
	var lRadius = lRadiusSelect.options[lRadiusSelect.selectedIndex].value;

	lString += "width=" + lWidth;
	lString += "&" + "type=" + lType;
//	lString += "&" + "shadow=" + lShadow;
	lString += "&" + "color=" + lColor;
	lString += "&" + "radius=" + lRadius;
	pForm.data.value = lString;
	return true;
}



function sendCreateText(pForm){
	// Calculate the offset from the text to the image.
	var lTextImage=document.getElementById('ExampleText');

//	lTextHeight=giveInt(lTextImage.style.height);
//	lTextWidth=giveInt(lTextImage.style.width);

	lTextLeft= giveInt(lTextImage.style.left);
	lTextTop = giveInt(lTextImage.style.top);
	lImageLeft= giveInt(selectedElement.style.left);
	lImageTop= giveInt(selectedElement.style.top);

	lDeltaLeft=lTextLeft-lImageLeft-1; // 1px adjust;
	lDeltaTop=lTextTop-lImageTop-1; // 1px adjust;
	lImageSrc=getImageFromCurrentLayer().src;

	var lForm = document.ActionForm;
	var lString = lForm.text.value;
	if(lString==null || lString==""){
		alert("Enter text!");
		return false;
		}
	lString="text_input="+escape(lString);
	var lFontSelect = lForm.Font;
	var lFont = lFontSelect.options[lFontSelect.selectedIndex].value;
	var lSizeSelect = lForm.Size;
	var lSize = lSizeSelect.options[lSizeSelect.selectedIndex].value;
	var lColorSelect = lForm.Color;
	var lColor = lColorSelect.options[lColorSelect.selectedIndex].value;
	lString+="&font="+lFont;
	lString+="&size="+lSize;
	lString+="&color="+lColor;
	if(lDeltaLeft>=0)
		lString+="&left="+"+"+lDeltaLeft;
	else
		lString+="&left="+lDeltaLeft;
	if(lDeltaTop>=0)
		lString+="&top="+"+"+lDeltaTop;
	else
		lString+="&top="+lDeltaTop;
	lString+="&src="+lImageSrc;
	pForm.data.value=lString;
	return true;
}

function sendDoOverlayImage(pForm){
	// Calculate the offset from the overlay image to the image.
	var lLayer=document.getElementById('OverlayImg');

	lLeft= giveInt(lLayer.style.left);
	lTop = giveInt(lLayer.style.top);
	lImageLeft= giveInt(selectedElement.style.left);
	lImageTop= giveInt(selectedElement.style.top);

	lDeltaLeft=lLeft-lImageLeft-1; // 1px adjust;
	lDeltaTop=lTop-lImageTop-1; // 1px adjust;
	var lImage=document.getElementById('OverlayImage');
	lOverlaySrc=lImage.src;
	lString="";
	if(lDeltaLeft>=0)
		lString+="left="+"+"+lDeltaLeft;
	else
		lString+="left="+lDeltaLeft;
	if(lDeltaTop>=0)
		lString+="&top="+"+"+lDeltaTop;
	else
		lString+="&top="+lDeltaTop;
	lString+="&src="+lOverlaySrc;
	var lOpacity = document.getElementById('OpacityIndex');
	var lIndex = lOpacity.options[lOpacity.selectedIndex].value;
	pForm.data.value=lString + "&opacity="+ lIndex;
	return true;
}



//####################################
//#             CropBox              #
//####################################
var iscrop=false;
var isresize=false;
var maxRight;
var maxBottom;
var keepAspect=true;

function setAspectRatio(pCheckBox){
 keepAspect=pCheckBox.checked;
}

function setToolbarForSelectBox(){
	var l_box = document.getElementById('clipBox');
    selectedElement.appendChild(l_box);
    setHeight(selectedElement);
    cropSetReady();
    l_box.style.visibility='visible';
    showParametersCropBoxBar();
    setTextWidthHeightCropBox(l_box);
}

function hideSelectBox(){
	var l_box = document.getElementById('clipBox');
	l_box.style.visibility='hidden';
    document.body.appendChild(l_box);
}

function cropdeselectmouse(e){
	iscrop=false;
}

function cropSetReady(){
	DeskTop.onmousedown=cropselectmouse;
	DeskTop.onmouseup=cropdeselectmouse;
    DeskTop.onmousemove=notcropmovemouse;
}

function notcropmovemouse(e){
   var fobj=findResizableElement(e);
   if(fobj==null){
      fobj = isFF ? e.target : event.srcElement;
      if(fobj!=null)
        setStyle(fobj,'cursor','default');
   }
}

function cropmovemouse(e)
{
  if (iscrop)
  {
  	lDirection = dobj.id;
  	lClipBox = dobj.parentNode;
        lY = isFF ? yPicStart + e.clientY - yAtClick : yPicStart + event.clientY - yAtClick;
        lX = isFF ? xPicStart + e.clientX - xAtClick : xPicStart + event.clientX - xAtClick;
  	if(lDirection=="n" || lDirection=="nw" || lDirection=="ne"){
                if(lY > 0  || isresize==true){
                   lClipBox.style.top = lY;
		   lClipBox.style.height = boxHeight-lY+yPicStart ;}
                else
                   lClipBox.style.top = 0;
  		}
  	else if(lDirection=="s" || lDirection=="sw" || lDirection=="se"){
                if(lY > maxBottom && isresize!=true)
                   lClipBox.style.height = boxHeight+maxBottom-yPicStart;
                else
		   		   lClipBox.style.height = boxHeight+lY-yPicStart;
  		}
       if(lDirection=="nw" || lDirection=="w" || lDirection=="sw"){
                if(lX > 0 || isresize==true){
                  lClipBox.style.left = lX;
		   		  lClipBox.style.width = boxWidth-lX+xPicStart ;}
                else
                  lClipBox.style.left = 0;
  		}
       else if(lDirection=="ne" || lDirection=="e" || lDirection=="se"){
                if(lX > maxRight && isresize!=true)
                    lClipBox.style.width = boxWidth+maxRight-xPicStart;
                else
		    lClipBox.style.width = boxWidth+lX-xPicStart;
  		}
       if(lDirection=="center"){
               if(lX < maxRight)
                  lClipBox.style.left = lX;
               else
                  lClipBox.style.left = maxRight;
               if(lX <= 0)
                   lClipBox.style.left = 0;
               if(lY < maxBottom)
                  lClipBox.style.top  = lY;
               else
                  lClipBox.style.top  = maxBottom;
               if(lY <= 0)
                  lClipBox.style.top  = 0;
               }
    setTextWidthHeightCropBox(lClipBox);
    return false;
  }
}

function setTextWidthHeightCropBox(pClipBox){
	var lWidth = document.ActionForm.width;
	var lHeight = document.ActionForm.height;
	var lTop = document.ActionForm.offsety;
	var lLeft = document.ActionForm.offsetx;
	lWidth.value = giveInt(pClipBox.style.width);
	lHeight.value = giveInt(pClipBox.style.height);
	if(lTop==null)
		return;
	lTop.value = giveInt(pClipBox.style.top);
	lLeft.value = giveInt(pClipBox.style.left);
}

function findResizableElement(e) {
	var fobj       = isFF ? e.target : event.srcElement;
	var topelement = isFF ? "HTML" : "BODY";
	if(!fobj)
		return null;
	while (fobj.tagName != topelement && fobj.className != "resizableElement")
	{
 		fobj = isFF ? fobj.parentNode : fobj.parentElement;
	}
	if (fobj.className=="resizableElement")
		return fobj;
	return null;
}


function cropselectmouse(e){
    var fobj=findResizableElement(e);
    if (fobj!=null)
    {
        iscrop = true;
        isresize=false;
        dobj = fobj;
        xPicStart = parseInt(dobj.parentNode.style.left+0,10);
        yPicStart = parseInt(dobj.parentNode.style.top+0,10);
        xAtClick = isFF ? e.clientX : event.clientX;
        yAtClick = isFF ? e.clientY : event.clientY;

        boxHeight=giveInt(dobj.parentNode.style.height);
        boxWidth=giveInt(dobj.parentNode.style.width);

        lPic = dobj.parentNode.parentNode
        maxRight=giveInt(lPic.style.width)-boxWidth;
        maxBottom=giveInt(lPic.style.height)-boxHeight;
        DeskTop.onmousemove=cropmovemouse;
        return false;
    }
}

function setHeight(pSelection){
	var l_pic = pSelection;
	var l_box = document.getElementById('clipBox');
	var l_obj = getImageFromCurrentLayer();
	setHeightFor(l_pic,getHeightFor(l_obj));
	setWidthFor(l_pic,getWidthFor(l_obj));

	l_box.style.height=giveInt(l_box.parentNode.style.height)/2;
	l_box.style.width=giveInt(l_box.parentNode.style.width)/2;
	l_box.style.top=giveInt(l_box.parentNode.style.height)/4;
	l_box.style.left=giveInt(l_box.parentNode.style.width)/4;

	setStyle(l_box,'visibility','visible');
}

function dimensionChanged(e,pWhat){
	var lKey = isFF ? e.which : window.event.keyCode;
	if(lKey!=13)
		return;
	setDimensions(pWhat);
}

function setDimensions(pWhat){
	var lForm = document.ActionForm;
	lWhat = lForm.fa.value
	if(lWhat=='crop_frame')
		setCropDimensions(pWhat);
	if(lWhat=='resize')
		setResizeDimensions(pWhat);
}

function setCropDimensions(pWhat){
	var lForm = document.ActionForm;
	var lClipBox = document.getElementById('clipBox');
	var lWidth=giveInt(lForm.width.value);
	var lHeight=giveInt(lForm.height.value);
	var lLeft=giveInt(lForm.offsetx.value);
	var lTop=giveInt(lForm.offsety.value);
	ensureWithinImage(lClipBox,lWidth,lHeight,lLeft,lTop);
}

function ensureWithinImage(pClipBox,pWidth,pHeight,pLeft,pTop){
	var lParent = pClipBox.parentNode;
	var lMaxWidth = lParent.clientWidth;
	var lMaxHeight = lParent.clientHeight;
	var lForm = document.ActionForm;
	if(pWidth < 1){
		lForm.width.value = 1;
		pWidth=1;}
	else if(pWidth > lMaxWidth){
		  lForm.width.value = lMaxWidth;
		  pWidth=lMaxWidth;
		 }
	if(pHeight < 1){
		lForm.height.value = 1;
		pHeight=1;
	}
	else if(pHeight>lMaxHeight){
		lForm.height.value = lMaxHeight;
		pHeight=lMaxHeight;
	}
	if(pLeft < 0){
		pLeft = 0;
		lForm.offsetx.value = 0;
	}
	if(pTop < 0){
		pTop = 0;
		lForm.offsety.value = 0;
	}
	if((pWidth+pLeft) > lMaxWidth){
		pLeft = lMaxWidth-pWidth;
		lForm.offsetx.value = pLeft;
	}
	if((pHeight+pTop) > lMaxHeight){
		pTop = lMaxHeight-pHeight;
		lForm.offsety.value = pTop;
	}
	pClipBox.style.width=pWidth;
	pClipBox.style.height=pHeight;
	pClipBox.style.left=pLeft;
	pClipBox.style.top=pTop;
}

function secureAspect(pWhat){
	if(!keepAspect)
		return;
	var lClipBox = document.getElementById('clipBox');
	var lParent = lClipBox.parentNode;
 	lProps = getImagePropertiesFor(lParent);
 	lAspect = lProps['width']/lProps['height'];
	var lForm = document.ActionForm;
	if(pWhat=='width'){
		lnewWidth = giveInt(lForm.width.value);
		lForm.height.value=giveInt(lnewWidth/lAspect);
		return;
	}
	else if(pWhat=='height'){
		lnewHeight = giveInt(lForm.height.value);
		lForm.width.value=giveInt(lnewHeight*lAspect);
		return;
	}
}

function setResizeDimensions(pWhat){
	secureAspect(pWhat);
	var lForm = document.ActionForm;
	var lClipBox = document.getElementById('clipBox');
	var lWidth=lForm.width.value;
	var lHeight=lForm.height.value;
	lClipBox.style.width=lWidth;
	lClipBox.style.height=lHeight;
	setImageToClipBox();
}

//#####################################
//#            Resize Box             #
//#####################################
function resetImages(){
	for(i=1;i<PropertyArray.length;i++){
			lNumber=padout(i);
			lImg = document.getElementById("Image_"+lNumber);
			lLayer = document.getElementById("Layer"+lNumber);
			setWidthFor(lImg,PropertyArray[i]['width']);
			setHeightFor(lImg,PropertyArray[i]['height']);
			lLayer.style.width = PropertyArray[i]['width'];
			lLayer.style.height = PropertyArray[i]['height'];
	}
}

function setToolbarForResizeBox(){
	var l_box = document.getElementById('clipBox');
    selectedElement.appendChild(l_box);
    setResizeHeight(selectedElement);
    resizeSetReady();
    l_box.style.visibility='visible';
    showParametersResizeBar();
    setTextWidthHeightCropBox(l_box);
}

function setResizeHeight(pSelection){
	var l_pic = pSelection;
	var l_box = document.getElementById('clipBox');
	var l_obj = getImageFromCurrentLayer();
	l_pic.style.height = getHeightFor(l_obj);
	l_pic.style.width = getWidthFor(l_obj);

	l_box.style.height=giveInt(l_box.parentNode.style.height);
	l_box.style.width=giveInt(l_box.parentNode.style.width);
	l_box.style.top=0;
	l_box.style.left=0;

	setStyle(l_box,'visibility','visible');
}

function setToolbarForBorder(){
	showParametersBorderBar();
}

function setToolbarForText(){
	showParametersTextBar();
	showPreviewText();
}

function resizeSetReady(){
	DeskTop.onmousedown=resizeselectmouse;
	DeskTop.onmouseup=cropdeselectmouse;
    DeskTop.onmousemove=notcropmovemouse;
}

function resizeselectmouse(e){
    var fobj=findResizableElement(e);
    if (fobj!=null)
    {
        iscrop = true;
        isresize=true;
        dobj = fobj;
        xPicStart = giveInt(dobj.parentNode.style.left+0);
        yPicStart = giveInt(dobj.parentNode.style.top+0);
        xAtClick = isFF ? e.clientX : event.clientX;
        yAtClick = isFF ? e.clientY : event.clientY;

        boxHeight=giveInt(dobj.parentNode.style.height);
        boxWidth=giveInt(dobj.parentNode.style.width);

        lPic = dobj.parentNode.parentNode
        startPicTop=giveInt(lPic.style.top);
        startPicLeft=giveInt(lPic.style.left);
        maxRight=giveInt(lPic.style.width)-boxWidth;
        maxBottom=giveInt(lPic.style.height)-boxHeight;
        DeskTop.onmousemove=resizemovemouse;
        return false;
    }
}

function sendResizeFrame(pForm){
	var lBox=document.getElementById('clipBox');
	if (lBox==null)
		return false;
	lBoxWidth = giveInt(lBox.style.width);
	lBoxHeight = giveInt(lBox.style.height);

	lString=lBoxWidth+"x"+lBoxHeight;
	pForm.data.value=lString;
	return true;
}


function doresizemovemouse(e)
{
  if (iscrop)
  {
  	lDirection = dobj.id;
  	lClipBox = dobj.parentNode;
  	lTopLayer=lClipBox.parentNode;
    lY = isFF ? yPicStart + e.clientY - yAtClick : yPicStart + event.clientY - yAtClick;
    lX = isFF ? xPicStart + e.clientX - xAtClick : xPicStart + event.clientX - xAtClick;
  	if(lDirection=="n" || lDirection=="nw" || lDirection=="ne"){
           lClipBox.style.top = 0;
           lTopLayer.style.top=lY+startPicTop;
		   lClipBox.style.height = boxHeight-lY+yPicStart ;
  		}
  	else if(lDirection=="s" || lDirection=="sw" || lDirection=="se"){
                   lClipBox.style.height = boxHeight+lY-yPicStart;
  		}
       if(lDirection=="nw" || lDirection=="w" || lDirection=="sw"){
                  lClipBox.style.left = 0;
                  lTopLayer.style.left=lX+startPicLeft;
		   		  lClipBox.style.width = boxWidth-lX+xPicStart ;
  		}
       else if(lDirection=="ne" || lDirection=="e" || lDirection=="se"){
		    lClipBox.style.width = boxWidth+lX-xPicStart;
  		}
    setTextWidthHeightCropBox(lClipBox);
    setResizeDimensions('height');
    return false;
  }
}


function resizemovemouse(e)
{
	doresizemovemouse(e);
	setImageToClipBox();
    return false;
}

function setImageToClipBox(){
	var lClipBox=document.getElementById('clipBox');
	if(lClipBox.style.visibility=='hidden')
		return;
	lImage=getImageFromCurrentLayer();
	lSelection=lClipBox.parentNode;
	setWidthFor(lImage,giveInt(lClipBox.style.width));
	setHeightFor(lImage,giveInt(lClipBox.style.height));
	lSelection.style.width=lClipBox.style.width;
	lSelection.style.height=lClipBox.style.height;
}