(function($) {
	$(function() {

		var textarea = $('textarea[id="comment"]');
		var showText = 'Preview';
		var hideText = 'Hide preview';
		var comment = '';
		var smiles = {"D:":"e%20(8).gif",";P":"e%20(15).gif",":whyohwhy:":"e%20(1).gif",":thumbup:":"e%20(29).gif",":teary:":"e%20(10).gif",":sweatdrop:":"e%20(14).gif",":sweatdrop2:":"e%20(26).gif",":stressed:":"e%20(21).gif",":stars:":"e%20(35).gif",":sparkling:":"e(40).gif",":shock:":"e%20(25).gif",":shiawase:":"e%20(16).gif",":satisfied:":"e%20(22).gif",":reading:":"e%20(31).gif",":rainy:":"e%20(37).gif",":rabu:":"e%20(12).gif",":present:":"e(39).gif",":peace:":"e(41).gif",":notamused:":"e%20(19).gif",":music:":"e%20(20).gif",":music2:":"e%20(2).gif",":mukatsuku:":"e%20(18).gif",":mail:":"e(38).gif",":luvit:":"e%20(5).gif",":kyah:":"e%20(6).gif",":hum:":"e%20(24).gif",":huh:":"e%20(32).gif",":hihi:":"e%20(23).gif",":hearts:":"e%20(34).gif",":heart:":"e%20(11).gif",":happy:":"e%20(4).gif",":fan:":"e%20(30).gif",":ehno:":"e%20(7).gif",":ehehe:":"e%20(28).gif",":disappointed:":"e%20(36).gif",":chu:":"e%20(33).gif",":camera:":"e%20(3).gif",":bleh:":"e%20(27).gif",":bah:":"e%20(13).gif",":D":"e%20(17).gif",":(":"e%20(9).gif"}
		var smilesDir = 'http://zoomingjapan.com/wp-includes/images/smilies/';

		textarea.wrap('<div id="jcpWrap"></div>');
		textarea.before('<div id="jcpToolbar"></div>');
		$('#jcpToolbar').prepend('<div id="previewTab">'+ showText +'</div>');

		$('#previewTab').toggle(
			function() {
				comment = textarea.val();
				if (comment != '') comment = comment + '\n\n';
				previewText = comment.replace(/(<\/?)script/g,'$1noscript')
				.replace(/ (http:\/\/\S+)/gi, ' <a href="$1">$1</a>')
				.replace(/\n(http:\/\/\S+)/gi, '\n<a href="$1">$1</a>')
				.replace(/(<blockquote[^>]*>)/g, '\n$1')
				.replace(/(<\/blockquote[^>]*>)/g, '$1\n')
				.replace(/\r\n/g, '\n')
				.replace(/\r/g, '\n')
				.replace(/\n\n+/g, '\n\n')
				.replace(/\n?(.+?)(?:\n\s*\n)/g, '<p>$1</p>')
				.replace(/<p>\s*?<\/p>/g, '')
				.replace(/<p>\s*(<\/?blockquote[^>]*>)\s*<\/p>/g, '$1')
				.replace(/<p><blockquote([^>]*)>/ig, '<blockquote$1><p>')
				.replace(/<\/blockquote><\/p>/ig, '</p></blockquote>')
				.replace(/<p>\s*<blockquote([^>]*)>/ig, '<blockquote$1>')
				.replace(/<\/blockquote>\s*<\/p>/ig, '</blockquote>')
				.replace(/\s*\n\s*/g, '<br />');

				var email = $('#email').val();
				if(!email) email = '';
				var md5 = MD5(email);
				var avatar = '<img src="http://www.gravatar.com/avatar/' + md5 + '?s=40" alt="" class="avatar" />';
				var author = $('#author').val();
				var url = $('#url').val();
				if(!$('#url').length) url = '';
				if(!$('#author').length) author = '';
				if(url != '') author = '<a href="'+ url +'">'+ author +'</a>';
				var date = 'October 19, 2014 at 11:55 pm';
				var previewHTML = ''+ avatar +'<div class="comment-author vcard"><cite class="fn">'+ author +'</cite> says:</div><div class="comment-meta commentmetadata">'+ date +'</div>'+ previewText +'';
				var preview = $('<div id="jQueryCommentPreview"></div>');
				$.each(smiles, function(key, value) {
					function str_replace(search, replace, subject) {
						var temp = subject.split(search);
						return temp.join(replace);
					}
					previewHTML = str_replace(key, '<img src="' + smilesDir + value + '" />', previewHTML);
				})
				preview.html(previewHTML);
				textarea.after(preview).hide();
				$(this).text(hideText);
				$('#htmlEditor a').hide();
			},
			function() {
				$('#jQueryCommentPreview').remove();
				$('#htmlEditor a').show();
				$(this).text(showText);
				textarea.show().focus();
			}
		)


		var htmlEditor = '<div id="htmlEditor"><a href="#" tag="strong" id="ed_strong">B</a><a href="#" tag="em" id="ed_em">I</a><a href="#" tag="del" id="ed_del">S</a><a href="#" tag="big" id="ed_big">BIG</a><a href="#" tag="small" id="ed_small">small</a><a href="#" tag="a" id="ed_a">link[href=""]</a><a href="#" tag="blockquote">b-quote</a><a href="#" tag="code">code</a></div>';

		$('#jcpToolbar').prepend(htmlEditor);

		function insert(start, end, mid) {
			var midText = '';
			element = document.getElementById(textarea.attr('id'));
			if (document.selection) {
				element.focus();
				sel = document.selection.createRange();
				if (sel.text == '') midText = mid;
				sel.text = start + sel.text + midText + end;
			} else if (element.selectionStart || element.selectionStart == '0') {
				element.focus();
				var startPos = element.selectionStart;
				var endPos = element.selectionEnd;
				var selText = element.value.substring(startPos, endPos);
				if (selText == '') midText = mid;
				element.value = element.value.substring(0, startPos) + start + selText + midText + end + element.value.substring(endPos, element.value.length);
			} else {
				element.value += start + end;
			}
		}

		$('#htmlEditor a').each(function() {
			var text = $(this).html().replace(/\[(.*)\]/, '<b> $1</b>');
			$(this).html(text);
		})

		$('#htmlEditor a').click(function() {
			var mid = '';
			var tag = $(this).attr('tag');
			var attribs = $(this).find('b').text();
			if (tag == 'a') {
				var URL = prompt('Enter the URL', 'http://');
				if (URL) {
					var blank = '';
					if (URL.indexOf(window.location.hostname) == -1) blank = ' target="_blank"';
					attribs = attribs.replace('href=""', 'href="' + URL + '"' + blank);
					var start = '<' + tag + attribs + '>';
					var mid = URL;
					var end = '</' + tag + '>';
				} else {
					var start = end = '';
				}
			} else if (tag == 'img') {
				var image = prompt('Enter the URL of the image', 'http://');
				if (image) {
					var imageAlt = prompt('Enter a description of the image', '');
					attribs = attribs.replace('src=""', 'src="' + image + '"');
					if (imageAlt) attribs = attribs.replace('alt=""', 'alt="' + imageAlt + '"');
					var start = '';
					var end = '<' + tag + attribs + ' />';
				} else {
					var start = end = '';
				}
			} else {
				var start = '<' + tag + attribs + '>';
				var end = '</' + tag + '>';
			}
			insert(start, end, mid);
			return false;
		})
		$('#htmlEditor').append('<a id="jcpSmiles" href="#"><img src="' + smilesDir + 'e (17).gif" alt="" /><span></span></a>');
		$.each(smiles, function(key, value) {
			$('#jcpSmiles span').append('<img src="' + smilesDir + value + '" alt="' + key + '" />');
		})
		$('#jcpSmiles').click(function() { return false; })
		$('#jcpSmiles img').click(function() {
			var mid = '';
			insert('', ' ' + $(this).attr('alt') + ' ', mid);
			return false;
		})
		

	}) 
})(jQuery)