jQuery( document ).ready( function() {
	// Enable the delete buttons
	enableAdd();
	enableDelete();
	enableFields();
	// Show the first element editor box
	showFieldEditor( '0' );
} );

function showFieldEditor( fieldID ) {
	jQuery( '#formFields div.form-field' ).hide().removeClass( 'active' );
	jQuery( '#formFields #formField_' + fieldID ).show().removeClass( 'hidden' );
	jQuery( '#formFields div.field-display a' ).removeClass( 'selected' );
	jQuery( '#formFields #fieldDisplay_' + fieldID + ' a' ).addClass( 'selected' );
}

function enableAdd() {
	// When the #addFormField button is clicked
	jQuery( 'input.addFieldButton' ).unbind();
	jQuery( 'input.addFieldButton' ).click( function() {
		console.log( 'run once' );
		// Get the ID of the last field that currently exists
		var lastFieldID = jQuery( '#formFields' ).children( 'div.form-field:last' ).attr( 'id' );
		// Strip out the formField_ part of the ID to return just the number
		lastFieldID = lastFieldID.replace( /formField\_/, '' );
		// Add 1 to the last ID number
		var newID = parseInt( lastFieldID ) + 1;
		// Clone the div.form-field template, append it to the #formFields div and fade it in
		jQuery( '#formFields' ).append( jQuery( '#newFormField' ).html() );
		jQuery( '#formFields' ).children( 'div.form-field:last' ).attr( 'id', 'formField_' + newID );
		jQuery( '#formFields' ).children( 'div.field-display:last' ).attr( 'id', 'fieldDisplay_' + newID );
		// Assign the new fields jQuery object to the newfield var
		var newfield = jQuery( '#formField_' + newID );
		var newdisplay = jQuery( '#fieldDisplay_' + newID );
		// Get the html contents of our new field in to the newhtml var
		var newfieldhtml = newfield.html();
		var newdisplayhtml = newdisplay.html();
		// Replace any _x's with our new ID (e.g. _2 )
		newfield.html( newfieldhtml.replace( /\_x/g, '_' + newID ) );
		newdisplay.html( newdisplayhtml.replace( /\_x/g, '_' + newID ) );
		showFieldEditor( newID );
		// Set the default display order of this field
		jQuery( '#iwacf_displayorder_' + newID ).val( newID+1 );
		// Enable the delete button for this field
		enableAdd();
		enableDelete();
		enableFields();
	} );
}

function enableFields() {
	jQuery( '#formFields div.field-display' ).click( function() {
		var fieldID = jQuery( this ).attr( 'id' ).replace( /fieldDisplay\_/, '' );
		showFieldEditor( fieldID );
		return false;
	} );
	jQuery( '#formFields input.field-title' ).keyup( function() {
		var fieldID = jQuery( this ).attr( 'id' );
		var fieldID = fieldID.replace( /iwacf\_fieldname\_/, '' );
		if ( jQuery( this ).val() != '' ) {
			jQuery( '#formFields #fieldDisplay_' + fieldID + ' a' ).html( '» ' + jQuery( this ).val() );
		}
		else {
			jQuery( '#formFields #fieldDisplay_' + fieldID + ' a' ).html( '» Field ' + fieldID );
		}
	} );
}

function enableDelete() {
	// When a delete button is clicked
	jQuery( '.deleteFieldButton' ).click( function() {
		// Get the ID of this delete button
		var deleteID = jQuery( this ).attr( 'id' )
		// Get the ID number of the form field this remove button belongs to
		var fieldSequence = deleteID.replace( /removeField\_/, '' );
		// Find this form field, fade it out and when thats finished, remove it from the page
		jQuery( '#formFields > #fieldDisplay_' + fieldSequence ).remove();
		jQuery( '#formFields > #formField_' + fieldSequence ).remove();
		jQuery( '#formFields div.form-field:first' ).show().removeClass( 'hidden' ).addClass( 'active' );
	} );
}