var iwac_sort_array = '';

jQuery( document ).ready( function() {
	// Check to make sure this page contains an edit form section
	if ( jQuery( '#formFields div.form-field' ).length > 0 ) {
		// Do some initialisation stuff
		enableAdd();
		enableDelete();
		enableFields();
		updateIcons();
		// Show the first element editor box
		showFieldEditor( '0', false );
		jQuery( '#iwacf_shortcode' ).click( function() {
			jQuery( this ).select();
		} );
		jQuery( "#fieldDisplays" ).sortable( {
			axis: "y",
			cursor: "move",
			placeholder: 'placeholder',
			forcePlaceholderSize: true,
			update: function() {
				updateDisplayOrder();
			}
		} );
		jQuery( "#fieldDisplays" ).disableSelection();
	}
} );

function updateDisplayOrder() {
	iwac_sort_array = jQuery( "#fieldDisplays" ).sortable( "toArray" );
	for ( i = 0; i < iwac_sort_array.length; i++ ) {
		var fieldID = parseInt( iwac_sort_array[i].replace( /fieldDisplay\_/, '' ) );
		jQuery( '#iwacf_displayorder_' + fieldID ).val( i + 1 );
	}
}

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

function enableAdd() {
	// When the #addFormField button is clicked
	jQuery( 'input.addFieldButton' ).unbind();
	jQuery( 'input.addFieldButton' ).click( function() {
		// 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' ).find( 'li.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();
		// Replace any _x's with our new ID (e.g. _2 )
		newfield.html( newfieldhtml.replace( /\_x/g, '_' + newID ) );
		jQuery( '#fieldDisplays' ).append( '<li id="fieldDisplay_' + newID + '" class="field-display">' + newdisplay.html().replace( /\_x/g, '_' + newID ) + '</li>' );
		newdisplay.remove();
		showFieldEditor( newID, true );
		// 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();
		updateDisplayOrder();
	} );
}

function enableFields() {
	jQuery( '#formFields li.field-display a' ).unbind();
	jQuery( '#formFields li.field-display a' ).click( function() {
		var fieldID = jQuery( this ).parent().attr( 'id' ).replace( /fieldDisplay\_/, '' );
		showFieldEditor( fieldID, true );
		return false;
	} );
	jQuery( '#formFields input.field-title' ).unbind();
	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 );
		}
	} );
	jQuery( '#formFields .field-type, #formFields .field-validation' ).unbind();
	jQuery( '#formFields .field-type, #formFields .field-validation' ).change( function() {
		updateIcons();
	} );
}

function updateIcons() {
	jQuery( '#formFields .field-type, #formFields .field-validation' ).each( function() {
		if ( jQuery( this ).hasClass( 'field-validation' ) ) {
			if ( jQuery( this ).val() != 'none' ) {
				var newicon = 'icon-' + jQuery( this ).val();
				var fieldID = jQuery( this ).attr( 'id' ).replace( /iwacf\_fieldvalidation\_/, '' );
				changeIcon( fieldID, newicon );
			}
		}
		else {
			var newicon = 'icon-' + jQuery( this ).val();
			var fieldID = jQuery( this ).attr( 'id' ).replace( /iwacf\_fieldtype\_/, '' );
			changeIcon( fieldID, newicon );
		}
	} );
}

function changeIcon( fieldID, icon ) {
	jQuery( '#fieldDisplays #fieldDisplay_' + fieldID ).removeClass( 'icon-input icon-password icon-radio icon-checkbox icon-selectbox icon-multiselect icon-textarea icon-email icon-h1 icon-h2 icon-h3 icon-h4' ).addClass( icon ) ;
}

function enableDelete() {
	// When a delete button is clicked
	if ( jQuery( '.deleteFieldButton' ).length == 2 )
		jQuery( '.deleteFieldButton:first' ).attr( 'disabled', 'disabled' ).addClass( 'disabled' );
	else if ( jQuery( '.deleteFieldButton' ).length == 3 )
		jQuery( '.deleteFieldButton:first' ).removeAttr( 'disabled' ).removeClass( 'disabled' );
	jQuery( '.deleteFieldButton' ).unbind();
	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 > #fieldDisplays > #fieldDisplay_' + fieldSequence ).remove();
		jQuery( '#formFields > #formField_' + fieldSequence ).remove();
		showFieldEditor( jQuery( '#formFields div.form-field:first' ).attr( 'id' ).replace( /formField\_/, '' ), true );
		enableDelete();
		updateDisplayOrder();
	} );
}