Editing with WYSIWYG or HTML alternately.

Update:
This script is now committed in CodeRepos: http://coderepos.org/share/browser/lang/javascript/userscripts/voxeditingwithwysiwygorh.user.js

I wrote a greasemonkey script for editting HTML directly on Vox composing view.

I'm sometimes not able to edit with WYSIWYG smartly. In a case like that, I want to edit HTML directly.

// ==UserScript==
// @name        Vox Editing with WYSIWYG or HTML alternately
// @namespace   http://lowreal.net/
// @include     http://www.vox.com/compose*
// ==/UserScript==

(function () {
	var iframe = $X('//iframe[contains(@src, "editor-content.html")]')[0];
	var textarea = $N('textarea', {
		cols:'30', 
		rows:'10',
		style: <>
			width      : {iframe.offsetWidth + 'px'};
			height     : {iframe.offsetHeight + 'px'};
			display    : none;
			background : #eee;
			z-index     : 500;
		</>.replace(/\n/g, ''),
		}, 'test');
	iframe.parentNode.insertBefore(textarea, iframe);

	var toggle = $N('div', {
		style: <>
			width: 3em;
			text-align: center;
			margin: 0.5em 0 -0.5em 0;
			padding: 0 0.5em;
			background: #000;
			color: #fff;
			z-index: 999;
		</>.replace(/\n/g, '')
	}, 'Toggle');
	toggle.addEventListener('click', function (e) {
		if (iframe.style.display == 'none') {
			iframe.style.display = 'block';
			textarea.style.display = 'none';
			iframe.contentDocument.body.innerHTML = textarea.value;
		} else {
			iframe.style.display = 'none';
			textarea.style.display = 'block';
			textarea.value = iframe.contentDocument.body.innerHTML;
		}
	}, false);
	var area = document.getElementById('compose-entry');
	area.parentNode.insertBefore(toggle, area);


	/* template functions  */
	function log () {
		var c = unsafeWindow.console;
		if (c) c.log.apply(c, arguments);
	}

	function $N(name, attr, childs) {
		var ret = document.createElement(name);
		for (k in attr) {
			if (!attr.hasOwnProperty(k)) continue;
			v = attr[k];
			if (k == "class") {
				ret.className = v;
			} else {
				ret.setAttribute(k, v);
			}
		}
		switch (typeof childs) {
			case "string": {
				ret.appendChild(document.createTextNode(childs));
				break;
			}
			case "object": {
				for (var i = 0, len = childs.length; i < len; i++) {
					var child = childs[i];
					if (typeof child == "string") {
						ret.appendChild(document.createTextNode(child));
					} else {
						ret.appendChild(child);
					}
				}
				break;
			}
		}
		return ret;
	}

	function $X(exp, context) {
		if (!context) context = document;
		var resolver = function (prefix) {
			var o = document.createNSResolver(context)(prefix);
			return o ? o : (document.contentType == "text/html") ? "" : "http://www.w3.org/1999/xhtml";
		}
		var exp = document.createExpression(exp, resolver);

		var result = exp.evaluate(context, XPathResult.ANY_TYPE, null);
		switch (result.resultType) {
			case XPathResult.STRING_TYPE : return result.stringValue;
			case XPathResult.NUMBER_TYPE : return result.numberValue;
			case XPathResult.BOOLEAN_TYPE: return result.booleanValue;
			case XPathResult.UNORDERED_NODE_ITERATOR_TYPE: {
				result = exp.evaluate(context, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
				var ret = [];
				for (var i = 0, len = result.snapshotLength; i < len ; i++) {
					ret.push(result.snapshotItem(i));
				}
				return ret;
			}
		}
		return null;
	}
})();