<?php
$vhoogte = '80';
$vbreedte = '80';

$plaatje = 'Oh_Indeed.jpg';


$extentie = mime_content_type($plaatje);
	
if($extentie == 'image/jpeg' || $extentie == 'image/gif' || $extentie == 'image/png')
{
	$oke = TRUE;
	switch($extentie)
	{
		case "image/jpeg" : $src = imagecreatefromjpeg($plaatje); break;
		case "image/gif" : $src = imagecreatefromgif($plaatje); break;
		case "image/png" : $src = imagecreatefrompng($plaatje); break;
	}
}else{
	$error = $plaatje.' is geen geldig plaatje! ('.$extentie.')';
	$oke = FALSE;
}

list($width, $height) = getimagesize($plaatje);

if(isset($_POST['maakplaatje']) and $oke == TRUE)
{
	// Create image instances

	$dest = imagecreatetruecolor($vbreedte, $vhoogte);

	// Copy
	imagecopy($dest, $src, 0, 0, $_POST['form_x'], $_POST['form_y'], $width, $height);

	// Output and free from memory
	header('Content-Type: image/png');
	imagepng($dest, NULL, 0, 'PNG_NO_FILTER');

	imagedestroy($dest);
	imagedestroy($src);
}


if(isset($error))
{
	echo $error;
}
if($oke == TRUE AND !isset($_POST['maakplaatje']))
{
	echo '
	<script language="JavaScript">
	function point_it(event){
		pos_x = event.scrollLeft?(event.scrollLeft):event.pageX-document.getElementById("pointer_div").offsetLeft;
		pos_y = event.scrollTop?(event.scrollTop):event.pageY-document.getElementById("pointer_div").offsetTop;
		if(pos_x<'.($vbreedte/2).')
		{
			pos_x = '.($vbreedte/2).';
		}
		if(pos_y<'.($vhoogte/2).')
		{
			pos_y = '.($vhoogte/2).';
		}
		if(pos_x>('.($width).'-'.($vbreedte/2).'))
		{
			pos_x = ('.($width).'-'.($vbreedte/2).');
		}
		if(pos_y>('.($height).'-'.($vhoogte/2).'))
		{
			pos_y = ('.($height).'-'.($vhoogte/2).');
		}
		document.getElementById("linkervlak").style.width = (pos_x-'.($vbreedte/2).') ;
		document.getElementById("ondervlak").style.height = ('.$height.'-pos_y-'.($vhoogte/2).');
		document.getElementById("bovenvlak").style.height = (pos_y-'.($vhoogte/2).') ;
		document.getElementById("rechtervlak").style.width = ('.$width.'-pos_x-'.($vbreedte/2).') ;
		
		document.getElementById("linkervlak").style.visibility = "visible" ;
		document.getElementById("bovenvlak").style.visibility = "visible" ;
		document.getElementById("ondervlak").style.visibility = "visible" ;
		document.getElementById("rechtervlak").style.visibility = "visible" ;
		document.pointform.form_x.value = (pos_x-'.($vbreedte/2).');
		document.pointform.form_y.value = (pos_y-'.($vhoogte/2).');
	}
	</script>

	<form name="pointform" method="post" >
		<div id="pointer_div" onclick="point_it(event)" style="border: 1px solid #000; background-image:url('.$plaatje.'); width:'.$width.'px; height:'.$height.'px;">
			<div id="bovenvlak"  style="width: 100%; background-color: #000; z-index: 2; visibility:hidden; filter:alpha(opacity=66); -moz-opacity:.66;	opacity:.66;"></div>
			<div id="linkervlak" style="height: '.$vhoogte.'px; background-color: #000; float: left; z-index: 2; visibility:hidden; filter:alpha(opacity=66); -moz-opacity:.66; opacity:.66;"></div>
			<div id="rechtervlak" style="height: '.$vhoogte.'px; background-color: #000; float: right; z-index: 2; visibility:hidden; filter:alpha(opacity=66); -moz-opacity:.66; opacity:.66;"></div>
			<div id="ondervlak" style="width: 100%; background-color: #000; clear: both; z-index: 2; visibility:hidden; filter:alpha(opacity=66); -moz-opacity:.66; opacity:.66;"></div>
		</div>
		<input type="text" name="form_x" size="4" />
		<input type="text" name="form_y" size="4" />
		<input name="maakplaatje" type="submit" value="Maak plaatje"/>
	</form>
	';
}
?>