Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
importStylesheet('User:Equazcion/TeahouseRespond.css');
if ( mw.config.get('wgPageName') == 'Wikipedia:Teahouse/Questions' ) {
//<nowiki>
(function($,mw) {
 
	$(function() {
		mw.loader.using( ['jquery.ui', 'mediawiki.api'], function() {
		
		function addResponse( section, headline, text ) {
			var wikitext = '\n\n:' + text;
 
			$('.wp-teahouse-respond-form').hide();
 
			$('.wp-teahouse-respond')
				.find('.selflink')
				.empty()
				.addClass('mw-ajax-loader');
 
			var api = new mw.Api();
 
			api.get( {
				'action' : 'query',
				'titles' : 'Wikipedia:Teahouse/Questions',
				'prop'   : 'revisions|info',
				'intoken' : 'edit',
				'rvprop' : 'content',
				'indexpageids' : 1
			}, {
				'ok' : function(result) {
					result = result.query;
					var page = result.pages[result.pageids[0]];
 
					api.post(
						{
							'action' : 'edit',
							'section' : section,
							'title' : 'Wikipedia:Teahouse/Questions',
							'appendtext' : wikitext,
							'summary' : '/* ' + headline + ' */' + ' response',
							'token' : page.edittoken
						},
						{
							'ok' : function() {window.location.reload();}
						}
					);
				}
			});
		}

			var headers = $('h2:gt(0)').find('.editsection'); 
			var k;
			var header;        
			headers.each(function(k) {
				
				$(this).prepend("<span style='font-size: 2em;color:#3fb6ff;text-shadow: #444 0.1em 0.1em 0.1em;'>«</span>&nbsp;&nbsp;&nbsp;<a style='font-weight:bold;cursor:pointer; color:#7d7b75;' href='#' class='wp-teahouse-respond' id='wp-teahouse-respond-" + k + "'>Respond to this discussion</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");

				var formCode = 	'<div class="wp-teahouse-respond-form" id="wp-teahouse-respond-form-' + k + '"><p>You can type your response below.</p><textarea rows="10" cols="20" id="wp-th-respond-text-' + k + '"></textarea><p><span class="wp-th-sign-hint">On Wikipedia, you should sign all of your posts by ending them with four tildes (~~~~)</span><a href="#" class="wp-th-respond" id="wp-th-respond-' + k + '">Add my response</a></p></div>';

				var rLink = $('#wp-teahouse-respond-' + k);
				rLink.after(formCode); 
				
				var rForm = $('#wp-teahouse-respond-form-' + k);
				var rText = $('#wp-th-respond-text-' + k);
				var rButton = $('#wp-th-respond-' + k);
				var headline = $(this).parents('h2').find('span.mw-headline').html();
						
				// Prevent flash
				rForm.css( 'left', '-10000px' );
 
				// Set up position
				setTimeout( function() {
					var pos = rLink.position();
					var hCenter = ( $(window).width() / 2 );
					rForm.css( 'top', pos.top + 20 + 'px' );
					rForm.css( 'left', (hCenter - (rForm.width()) /2) + 'px' );
					rForm.hide();
				}, 0);
				
				rButton.button({disabled : true}).click( function(e) {
					e.preventDefault();
 
					var text = rText.val();
						addResponse( k+1, headline, text );
				}).end()
				
				rText.keypress( function(e) {
						var $textbox = $(this);
						setTimeout( function() {
							if ( (/~~~~\s*$/).test($textbox.val()) ) {
								rButton.button( 'option','disabled', false );
							} else {
								rButton.button( 'option','disabled', true );
							}
						}, 0 );
					} );
 
				rLink.click(function(e) {
					rForm.toggle('fast');
					e.cancelBubble = true; // for IE
					if (e.stopPropagation) {
						e.stopPropagation();
						e.preventDefault();
					}
				});
	 
			$(document).click( function(e) {
				var $target = $(e.target);
				if ( ! $target.is('.wp-teahouse-respond-form *') &&
					! $target.is('.wp-teahouse-respond *')
				) {
					$('.wp-teahouse-respond-form').fadeOut();
				}
			} );
	 
				$(document).keydown( function(e) {
					if ( e.keyCode == 27 ) {// ESC
						rForm.fadeOut();
					}
				});   //after loop
			}); 
		});
	} );
} )(jQuery,mediaWiki);
//</nowiki>
}