/*
	Advanced Thumbnail Creator
	(c) Andrew Zhupanenko (research@zhupanenko.com)
	http://research.zhupanenko.com/atc/
	2007
*/


// top left and bottom right coordinates of selection area (x1,y1 - top left(TL); x2,y2 - bottom right(BR))
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;

//indicates whether area is selected or not
var ptype = false;

//initialization
function init()
{
	document.getElementById("image").onclick=mouseHandler;
	document.getElementById("image").onmousemove=mouseHandler;
	document.getElementById('th_w').value=thumbWidth;
	document.getElementById('th_h').value=thumbHeight;
}

//mouse handler function
function mouseHandler(mouseEvent)
{
	if (!mouseEvent) mouseEvent = window.event;
	if (mouseEvent.button == 2) return;
	var element = (mouseEvent.target)?mouseEvent.target:mouseEvent.srcElement;

	if (mouseEvent.type=="click")
	{
		var x = mouseEvent.clientX - document.getElementById("image").offsetLeft;
		var y = mouseEvent.clientY - document.getElementById("image").offsetTop;
		pointSet(x,y);
		rectangleDraw('area');
	};

	if (mouseEvent.type=="mousemove")
	{
		x2=mouseEvent.clientX - document.getElementById("image").offsetLeft + document.body.scrollLeft;
		y2=mouseEvent.clientY - document.getElementById("image").offsetTop + document.body.scrollTop;   

		document.getElementById("image").title="("+x2+","+y2+")";

		if (ptype)
		{
			if ((x2<=document.getElementById("image").offsetWidth) && (y2<=document.getElementById("image").offsetHeight) && (x2>0) && (y2>0))
			{
				inputUpdate();
				rectangleDraw('area'); 
			}
			else
			{
				if (x2>document.getElementById("image").offsetWidth)
					x2=document.getElementById("image").offsetWidth + document.body.scrollLeft;
                                                         
				if (y2>document.getElementById("image").offsetHeight)
					y2=document.getElementById("image").offsetHeight + document.body.scrollTop;

				if (x2<0)
					x2=0;

				if (y2<0)
					y2=0;
			};
		}
	}
}

//create TL or BR point
function pointSet(x,y)
{
	if (!ptype)
	{
		x1=x+document.body.scrollLeft;
		y1=y+document.body.scrollTop;
		rectangleHide('area');
		inputUpdate();
	}
	else
	{
		x2=x+document.body.scrollLeft;
		y2=y+document.body.scrollTop;
		pointCorrect();
		inputUpdate();
	}
	ptype = !ptype;
}

//correcting TL and BR points if they are changed
function pointCorrect(x1c,y1c,x2c,y2c)
{
	if (x1c && y1c && x2c && y2c)
	{
		if (x1c>x2c)
		{
			temp=x1c;
			x1c=x2c;
			x2c=temp;
		}

		if (y1c>y2c)
		{
			temp=y1c;
			y1c=y2c;
			y2c=temp;
		}

		var arrReturn = new Array (x1c,y1c,x2c,y2c);

		return arrReturn;
	}
	else
	{
		if (x1>x2)
		{
			temp=x1;
			x1=x2;
			x2=temp;
		}
		if (y1>y2)
		{
			temp=y1;
			y1=y2;
			y2=temp;
		}
	}  
}

//draw rectangle area
function rectangleDraw(rectId)
{
	var coords = new Array (4);
	coords=pointCorrect(x1,y1,x2,y2);
	var rect = document.getElementById(rectId);
	rect.style.border='dashed 2px #EEEEEE';
	rect.style.position='relative';
	rect.style.fontSize='0';
	rect.style.left=coords[0];
	rect.style.top=coords[1];
	rect.style.width=coords[2]-coords[0];
	rect.style.height=coords[3]-coords[1];
}

//draw rectangle area
function rectangleDrawInput(rectId)
{
	var coords = new Array (4);
	coords=pointCorrect(document.getElementById('x1_inp').value,document.getElementById('y1_inp').value,document.getElementById('x2_inp').value,document.getElementById('y2_inp').value);
	var rect = document.getElementById(rectId);
	rect.style.border='dashed 2px #EEEEEE';
	rect.style.position='relative';
	rect.style.fontSize='0';
	rect.style.left=coords[0];
	rect.style.top=coords[1];
	rect.style.width=coords[2]-coords[0];
	rect.style.height=coords[3]-coords[1];
}

//hide rectangle area
function rectangleHide(rectId)
{
	var rect = document.getElementById(rectId);
	rect.style.border='0px';
	rect.style.fontSize='0';
	rect.style.left='0';
	rect.style.top='0';
	rect.style.width='0';
	rect.style.height='0';
}

//update input fields
function inputUpdate()
{
	document.getElementById('x1_inp').value=x1;
	document.getElementById('y1_inp').value=y1;
	document.getElementById('x2_inp').value=x2;
	document.getElementById('y2_inp').value=y2;

	document.getElementById('th_width').value=Math.abs(x2-x1);
	document.getElementById('th_height').value=Math.abs(y2-y1);

	if (thumbWidth==0)
		document.getElementById('th_w').value=Math.abs(x2-x1);

	if (thumbHeight==0)
		document.getElementById('th_h').value=Math.abs(y2-y1);
}

function inputWidthUpdate()
{
	document.getElementById('x2_inp').value=parseInt(document.getElementById('x1_inp').value)+parseInt(document.getElementById('th_width').value);
	if (thumbWidth==0) document.getElementById('th_w').value=document.getElementById('th_width').value;
	rectangleDrawInput('area');
};

function inputHeightUpdate()
{
	document.getElementById('y2_inp').value=parseInt(document.getElementById('y1_inp').value)+parseInt(document.getElementById('th_height').value);
	if (thumbHeight==0) document.getElementById('th_h').value=document.getElementById('th_height').value;
	rectangleDrawInput('area');
};

function inputXYUpdate()
{
	document.getElementById('th_width').value=parseInt(document.getElementById('x2_inp').value)-parseInt(document.getElementById('x1_inp').value);
	if (thumbWidth==0) document.getElementById('th_w').value=document.getElementById('th_width').value;

	document.getElementById('th_height').value=parseInt(document.getElementById('y2_inp').value)-parseInt(document.getElementById('y1_inp').value);
	if (thumbHeight==0) document.getElementById('th_h').value=document.getElementById('th_height').value;
	
	rectangleDrawInput('area');
};

//generate image thumbnail
function generateImageThumb()
{
	var previewclass='preview';
	var previewimage='/preview.gif';		

	var links=document.getElementsByTagName('a');
	var prevlinks=new Array();
	var c=0;
	
	var previewTest = new RegExp("(^|\\s)" + previewclass + "(\\s|$)");

	for(i=0; i<links.length; i++)
	{
		if (previewTest.test(links[i].className))
		{
			prevlinks[c]=links[i];			
			c++;
		}
	}
		
	for(i=0; i<prevlinks.length; i++)
	{
		var newa=document.createElement('a');
		newa.style.textDecoration="none";

		var newbutton=document.createElement('input');
		newbutton.type="button";
		newbutton.value="Generate Thumbnail"

		newa.appendChild(newbutton);
		newa.href="#";

		var newbr=document.createElement('br');
		newa.appendChild(newbr);

		newa.onclick=function()
		{
			if(this.getElementsByTagName('img')[0])
				this.removeChild(this.getElementsByTagName('img')[0]);

			var newimg=document.createElement('img');
			newimg.style.border="0";
			newimg.vspace="10";
			this.appendChild(newimg);

			var rand=parseInt(1000*Math.random());
			newimg.src="?action=generate&r="+rand+"&x1="+document.getElementById('x1_inp').value+"&y1="+document.getElementById('y1_inp').value+"&x2="+document.getElementById('x2_inp').value+"&y2="+document.getElementById('y2_inp').value+"&w="+document.getElementById('th_w').value+"&h="+document.getElementById('th_h').value+"&fn="+document.getElementById('fileName').value;

			return false;
		}

		prevlinks[i].parentNode.insertBefore(newa,prevlinks[i].nextSibling);
	}

}	

//initialization
window.onload=function()
{
	init();
	generateImageThumb();
}