// ==UserScript==
// @name           Reddit Comment Live Preview
// @namespace      http://arantius.com/misc/greasemonkey/
// @description    Provide a live preview of comments at reddit.com.
// @include        http://www.reddit.com/*/comments/
// @require        http://arantius.com/misc/greasemonkey/imports/showdown.js
// ==/UserScript==

var converter=new Showdown.converter();

function findForms(parent) {
	if (!parent.getElementsByTagName) return;

	var forms=parent.getElementsByTagName('form');
	for (var i=0, form=null; form=forms[i]; i++) {
		if (form.getAttribute('id') && 
			form.getAttribute('id').match(/^commentform_./)
		) {
			addPreviewToForm(form);
		}
	}
}

function addPreviewToForm(form) {
	var set=document.createElement('fieldset');
	set.setAttribute('class', 'liveComment');

	var legend=document.createElement('legend');
	legend.textContent='Live Preview';

	var preview=document.createElement('div');
	preview.setAttribute('class', 'md');

	set.appendChild(legend);
	set.appendChild(preview);
	
	form.appendChild(set);

	hookupPreview(form, preview);
}

function hookupPreview(form, preview) {
	var area=form.getElementsByTagName('textarea');
	if (!area[0]) return;
	area=area[0];

	var timer=null;
	area.addEventListener('keyup', function() {
		if (timer) clearTimeout(timer);
		timer=setTimeout(function() {
			preview.innerHTML=converter.makeHtml(area.value);
		}, 100);
	}, false);
}

// Make the stuff we add look pretty!
GM_addStyle(
	'fieldset.liveComment, fieldset.liveComment legend { border: 1px solid black; -moz-border-radius: 1em; }'+
	'fieldset.liveComment { padding: 1ex; margin: 1em 0; }'+
	'fieldset.liveComment legend { padding: 0 1ex; background-color: #E9E9E9; }'
);

// Bootstrap with the top-level comment always in the page.
findForms(document.body);

// Watch for any future 'reply' forms.
document.body.addEventListener('DOMNodeInserted', function(event) {
	findForms(event.target);
}, false);