var FRAME_WIDTH = 100;
var FRAME_HEIGHT = 100;

var FRAME_MIN_WIDTH = 15;
var FRAME_MIN_HEIGHT = 15;
var FRAME_BORDER = 1;
var FRAME_RESIZER_WIDTH = 9;

var LOCK_RATIO = true;

var PREVIEW_DIV_PADDING = 20;

// pozycja startowa ramki
var iStartX;
var iStartY;

// pozycja startowa kursora
var iDownX;
var iDownY;

// aktualne polozenie kursora
var iMoveX;
var iMoveY;

// wspolrzedne bazowe 
var iBaseX;
var iBaseY;

// rozmiar bazowy
var iBaseWidth;
var iBaseHeight;

var iImageWidth;
var iImageHeight;

// flaga - czy przycisk jest wcisniety
var bPressed;
var bPressedR;

// obiekt ramki
var oFrame;
var oFrameCore;

// obiekt resizera
var oResizer;

// obiekt edytowanego obrazu
var oPreview

// ukryte pola
var oHiddenX;
var oHiddenY;
var oHiddenWidth;
var oHiddenHeight;


function activateImgEditor(sFileName, iImageWidthParam, iImageHeightParam, iFrameX, iFrameY, iFrameWidth, iFrameHeight, iAdditionalSpace) {
	if(!sFileName) {
		fitIframe(70)
		return;
	}
	
	iImageWidth = Number(iImageWidthParam) + PREVIEW_DIV_PADDING;
	iImageHeight = Number(iImageHeightParam) + PREVIEW_DIV_PADDING;

	oFrame = document.getElementById("frame");
	oFrameCore = document.getElementById("frameCore");
	oResizer = document.getElementById("resizer");
	oPreview = document.getElementById("preview");
	
	// ukryte pola przechowujace koordynaty
	oHiddenX = document.getElementById("imageX");
	oHiddenY = document.getElementById("imageY");
	oHiddenWidth = document.getElementById("imageWidth");
	oHiddenHeight = document.getElementById("imageHeight");

	// ustaw rozmiar i pozcyje ramki
	if(iFrameWidth)
		FRAME_WIDTH = Number(iFrameWidth);
	if(iFrameHeight)
		FRAME_HEIGHT = Number(iFrameHeight);
	FRAME_WIDTH	-= 2*FRAME_BORDER;
	FRAME_HEIGHT -= 2*FRAME_BORDER;
	oFrame.style.width = FRAME_WIDTH;
	oFrame.style.height = FRAME_HEIGHT;

	// ustal pozycje poczatkowa ramki
	if(iFrameX || iFrameX === 0)
		iStartX = Number(iFrameX) + PREVIEW_DIV_PADDING;
	else	
		iStartX = Math.floor( (iImageWidth + PREVIEW_DIV_PADDING - FRAME_WIDTH) / 2);//PREVIEW_DIV_PADDING +

	if(iFrameY || iFrameY === 0)
		iStartY = Number(iFrameY) + PREVIEW_DIV_PADDING;
	else			
		iStartY = Math.floor( (iImageHeight + PREVIEW_DIV_PADDING - FRAME_HEIGHT) / 2); // PREVIEW_DIV_PADDING +
	
	oFrame.style.left = iStartX + 'px';
	oFrame.style.top = iStartY + 'px';
	
//		var oCursor = document.getElementById("cursor");
//		oCursor.innerHTML = "aaa: " + iStartX + " - " + iStartY + " == " + FRAME_WIDTH + " - " + FRAME_HEIGHT + " *** " + iFrameWidth + " - " + iFrameHeight;
	
	// obsluga zdarzen dot. ramki
	addEventHandler(oFrameCore, "mousedown", startDragging);
	addEventHandler(oPreview, "mouseup", stopDragging);
	addEventHandler(oFrameCore, "mouseup", stopDragging);
	
	addEventHandler(oResizer, "mousedown", startResizing);
	addEventHandler(oPreview, "mousemove", resizeFrame);
	addEventHandler(oResizer, "mouseup", stopResizing);
	addEventHandler(oPreview, "mouseup", stopResizing);

	if(typeof(iAdditionalSpace) == "undefined")
		iAdditionalSpace = 90;
	fitIframe(iImageHeight + iAdditionalSpace);
	rememberFrameInfo();
}


function fitIframe(iHeight) {
	var oIframe = window.parent.document.getElementById("imgEditorIframe");	
	oIframe.style.height = iHeight +'px';
	document.body.style.height = iHeight +'px';
}

function setFrameParams(iFrameWidth, iFrameHeight, iImageWidth, iImageHeight) {
	var oIframe = document.getElementById("imgEditorIframe");	
	oIframe.contentWindow.location.href = "imgEditor.php?frameWidth=" + iFrameWidth + "&frameHeight=" + iFrameHeight + "&imageWidth=" + iImageWidth + "&imageHeight=" + iImageHeight;
}

function startDragging(oEvent) {
	addEventHandler(oPreview, "mousemove", dragFrame);
	addEventHandler(oFrameCore, "mousemove", dragFrame);

	iDownX = Math.floor(oEvent.clientX);
	iDownY = Math.floor(oEvent.clientY);
	
	iBaseX = iStartX;
	iBaseY = iStartY;
	
	oPreview.style.cursor = "move";
	bPressed = true;

//	var oCursor = document.getElementById("cursor");
//	oCursor.innerHTML = "start dragging: " + iDownX + " - " + iDownY;
}

function stopDragging(oEvent) {
	removeEventHandler(oPreview, "mousemove", dragFrame);
	removeEventHandler(oFrameCore, "mousemove", dragFrame);
	
	oPreview.style.cursor = null;
	bPressed = false;
	
//	var oCursor = document.getElementById("cursor");
//	oCursor.innerHTML = "stop dragging";

	rememberFrameInfo();
}



function dragFrame(oEvent) {
	if(!bPressed)
		return;

	iMoveX = Math.floor(oEvent.clientX);
	iMoveY = Math.floor(oEvent.clientY);

	var iNewX = iBaseX + (iMoveX - iDownX);
	var iNewY = iBaseY + (iMoveY - iDownY);
//var oCursor = document.getElementById("cursor");

	if( iNewX >= PREVIEW_DIV_PADDING && (iNewX + FRAME_WIDTH) <= iImageWidth - FRAME_BORDER*2 && iNewY >= PREVIEW_DIV_PADDING && (iNewY + FRAME_HEIGHT) <= iImageHeight - FRAME_BORDER*2) {
		iStartX = iNewX;
		iStartY = iNewY;
		oFrame.style.left = iStartX + 'px';
		oFrame.style.top = iStartY + 'px';
///		var oCursor = document.getElementById("cursor");
//		oCursor.innerHTML = "i'm dragging: " + iStartX + " - " + iStartY;
	}

}


function startResizing(oEvent) {
	addEventHandler(oPreview, "mousemove", resizeFrame);
	addEventHandler(oFrameCore, "mousemove", resizeFrame);
	
	iDownX = oEvent.clientX;
	iDownY = oEvent.clientY;
	
	oPreview.style.cursor = "nw-resize";
	bPressedR = true;
	
	iBaseWidth = FRAME_WIDTH;
	iBaseHeight = FRAME_HEIGHT;
	
//	var oCursor = document.getElementById("cursor");
//	oCursor.innerHTML = "start resizing";
//	oCursor.innerHTML = "<br>" + FRAME_WIDTH + " = " + FRAME_HEIGHT;;
}

function stopResizing(oEvent) {
	removeEventHandler(oPreview, "mousemove", resizeFrame);
	removeEventHandler(oFrameCore, "mousemove", resizeFrame);
	
	oPreview.style.cursor = null;
	bPressedR = false;

//	var oCursor = document.getElementById("cursor");
//	oCursor.innerHTML = "stop resizing - " + FRAME_WIDTH + " = " + FRAME_HEIGHT;
	
	rememberFrameInfo();
}



function resizeFrame(oEvent) {
	if(!bPressedR)
		return;

	iMoveX = oEvent.clientX;
	iMoveY = oEvent.clientY;

	var iDiffX = iMoveX - iDownX;
	var iDiffY = iMoveY - iDownY;
		
	if(LOCK_RATIO) {
		if(iDiffY == iDiffX) {
			iDiffY > iDiffX
		}
		else {
			iDiffY = iDiffX * FRAME_HEIGHT / FRAME_WIDTH;
		}
	}

	NEW_FRAME_WIDTH = iBaseWidth + iDiffX;
	NEW_FRAME_HEIGHT = iBaseHeight + iDiffY;

	var iLimitWidth = iImageWidth - FRAME_BORDER*2; 
	var iLimitHeight = iImageHeight - FRAME_BORDER*2; 
	if( iStartX + NEW_FRAME_WIDTH <= iLimitWidth && iStartY + NEW_FRAME_HEIGHT <= iLimitHeight
	   && NEW_FRAME_WIDTH >= FRAME_MIN_WIDTH && NEW_FRAME_HEIGHT >= FRAME_MIN_HEIGHT) {

		FRAME_WIDTH = NEW_FRAME_WIDTH;
		FRAME_HEIGHT = NEW_FRAME_HEIGHT;
		
		oFrame.style.width = FRAME_WIDTH + 'px';
		oFrame.style.height = FRAME_HEIGHT + 'px';
		
//		var oCursor = document.getElementById("cursor");
//		oCursor.innerHTML = "i'm resizing - " + (iStartX + NEW_FRAME_WIDTH) + " = " + (iStartY + NEW_FRAME_HEIGHT);
	}
}

function rememberFrameInfo() {
	oHiddenX.value = iStartX - PREVIEW_DIV_PADDING;
	oHiddenY.value = iStartY - PREVIEW_DIV_PADDING;
	oHiddenWidth.value = FRAME_WIDTH;
	oHiddenHeight.value = FRAME_HEIGHT;
}

function getSelectedFrame() {
	var oIframe = document.getElementById('imgEditorIframe');
	var oIframeDoc = oIframe.contentWindow.document;
	oHiddenX = oIframeDoc.getElementById("imageX");
	oHiddenY = oIframeDoc.getElementById("imageY");
	oHiddenWidth = oIframeDoc.getElementById("imageWidth");
	oHiddenHeight = oIframeDoc.getElementById("imageHeight");
	var oFileName = oIframeDoc.getElementById("imageName");

	if(oFileName)
		return new Array(oFileName.value, oHiddenX.value, oHiddenY.value, oHiddenWidth.value, oHiddenHeight.value);
	else
		return Array('','','','','');
}