<?php

$text1 = '';

if (isset($_POST['text1']))
	$text1 = htmlentities($_POST['text1'], ENT_COMPAT, 'UTF-8');

$text2 = '';
if (isset($_POST['text2']))
	$text2 = htmlentities($_POST['text2'], ENT_COMPAT, 'UTF-8');

/*
Paul's Simple Diff Algorithm v 0.1
(C) Paul Butler 2007 <http://www.paulbutler.org/>
May be used and distributed under the zlib/libpng license.
This code is intended for learning purposes; it was written with short
code taking priority over performance. It could be used in a practical
application, but there are a few ways it could be optimized.
Given two arrays, the function diff will return an array of the changes.
I won't describe the format of the array, but it will be obvious
if you use print_r() on the result of a diff on some test data.
htmlDiff is a wrapper for the diff command, it takes two strings and
returns the differences in HTML. The tags used are <ins> and <del>,
which can easily be styled with CSS.
*/

function diff($old, $new){
	$maxlen=0;

	foreach($old as $oindex => $ovalue){
	$nkeys = array_keys($new, $ovalue);
	foreach($nkeys as $nindex){
	$matrix[$oindex][$nindex] = isset($matrix[$oindex - 1][$nindex - 1]) ?
	$matrix[$oindex - 1][$nindex - 1] + 1 : 1;
	if($matrix[$oindex][$nindex] > $maxlen){
	$maxlen = $matrix[$oindex][$nindex];
	$omax = $oindex + 1 - $maxlen;
	$nmax = $nindex + 1 - $maxlen;
	}
	}
	}
	if($maxlen == 0) return array(array('d'=>$old, 'i'=>$new));
	return array_merge(
	diff(array_slice($old, 0, $omax), array_slice($new, 0, $nmax)),
	array_slice($new, $nmax, $maxlen),
	diff(array_slice($old, $omax + $maxlen), array_slice($new, $nmax + $maxlen)));
}

function htmlDiff($old, $new){
	$diff = diff(explode("\n", $old), explode("\n", $new));
	$ret = '';
	foreach($diff as $k){
		if(is_array($k))
			$ret .= (!empty($k['d'])?"<del>".implode(' ',$k['d'])."</del> ":'').(!empty($k['i'])?"<ins>".implode(' ',$k['i'])."</ins> ":'');
		else $ret .= $k . ' ';
	}
	return $ret;
}





?>

<meta http-equiv="Content-Type" CONTENT="text/html; charset=UTF-8">
<style type="text/css">
HTML {
	overflow-y:none;
	background-color:#F0F0F0;
}

.main-panel {
	position:absolute;
	top:16px;
	left:16px;
	bottom:16px;
	right:16px;
}

.top-panel {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:200px;
}

.center-panel {
	position:absolute;
	top:216px;
	left:0;
	right:0;
	bottom:64px;
}

.bottom-panel {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:48px;
	text-align:center;
}

.bottom-panel .button {
	border:solid silver 1px;
	border-radius:4px;
	height:32px;
	margin:0;
	cursor:pointer;
	box-shadow:2px 2px 2px gray;
	vertical-align:-7px;
}

.top-left-panel {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:49.5%;
}

.top-right-panel {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	width:49.5%;
}



.shadow-panel .shadow-title {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:16px;
	overflow:hidden;
	font-size:10px;
}

.shadow-panel .shadow-content {
	position:absolute;
	top:16px;
	left:0;
	right:0;
	bottom:0;
	background-color:white;
	border:solid gray 1px;
	box-shadow:2px 2px 2px silver;
}

#text1, #text2 {
	border:none;
	padding:0;
	margin:0;
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#text3 {
	overflow-y:scroll;
}

#text3 INS {
	color:blue;
	text-decoration:none;
}

#text3 DEL {
	color:silver;
	margin:0;
}
</style>
<form action="" method="post">
	<div class="main-panel">
		<div class="top-panel">
			<div class="top-left-panel shadow-panel">
				<div class="shadow-title">Old code</div>
				<div class="shadow-content">
					<textarea id="text1" name="text1"><?php echo $text1; ?></textarea>
				</div>
			</div>
			<div class="top-right-panel shadow-panel">
				<div class="shadow-title">New code</div>
				<div class="shadow-content">
					<textarea id="text1" name="text2"><?php echo $text2; ?></textarea>
				</div>
			</div>
		</div>
		<div class="center-panel shadow-panel">
				<div class="shadow-title">Differences</div>
				<div class="shadow-content" id="text3">
					<pre><?php print_r(htmlDiff($text1, $text2)); ?></pre>
				</div>
		</div>
		<div class="bottom-panel">
			<button class="button">Get differences</button>
		</div>
	</div>
</form>
