gistfile1.js

var MoreForms = new Class({
	
	Implements: [Options,Events],

	options: {
		clone: '.clone_form',
		trigger: '.clone_trigger',
		destroy_trigger: 'destroy_trigger',
		startArray : ''
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.attachEvents();
		var newArray = this.options.startArray.split(" ");
		if(this.options.startArray == ''){
			this.cloneArray = new Array();
		} else{
			this.cloneArray = newArray;
		}
		this.attachDestroy();
	},
	
	attachEvents : function(){
		$$(this.options.trigger).addEvent('click', function(){
			this.cloneElement();
			return false;
		}.bind(this));
	},
	
	attachDestroy: function(){
		var globalHandle = this;
		if(this.cloneArray.length >= 4){
			$('clone_control').setStyle('display','none');
		}else{
			$('clone_control').setStyle('display','block');
		}
		$$('.' + this.options.destroy_trigger).removeEvents();
		$$('.' + this.options.destroy_trigger).addEvent('click', function(event){
			var targetClasses = this.get('class').split(" ");
			globalHandle.destroyElement(targetClasses.getLast());
		});
	},
	
	cloneElement: function() {
		var clone = $('clone_form').clone(true, true);
		var newClone = this.incrementID(clone);
		var newCloneID = newClone.get('id');
		
		this.cloneArray.push(newCloneID); //Array controlling which one has remove option
		
		newClone.setStyle('opacity', '0');
		newClone.inject('clone_container');
		
		var fxer = new Fx.Tween(newClone);
		fxer.start('opacity', 1);
		
		$$('#' + newCloneID + ' .first_name_field').set('value', '');
		$$('#' + newCloneID + ' .last_name_field').set('value', '');
		$$('#' + newCloneID + ' .email_field').set('value', '');
		
		
		this.resetDestroy();		
		this.attachDestroy();
	},
	
	destroyElement: function(destroyTarget){
		$(destroyTarget).destroy();
		this.cloneArray.erase(destroyTarget);
		this.resetDestroy();
	},
	
	resetDestroy: function(){
		this.cloneArray.each(function(item, index){
			var newindex = index + 1;
			
			$(item).set('id', 'clone_form_' + newindex);
			$$('#clone_form_' + newindex + ' .presenter_first').set('html', ' - ' + newindex + ' - <a href="#" class="destroy_trigger"><img src="images/cross.png" /></a>');
			$$('#clone_form_' + newindex + ' .presenter_last').set('html', ' - ' + newindex);
			$$('#clone_form_' + newindex + ' .email').set('html', '-' + newindex);
		
			$$('#clone_form_' + newindex + ' .destroy_trigger').addClass('clone_form_' + newindex); // Add specific destroy keys.
		
			$$('#clone_form_' + newindex + ' .first_name_field').set('name', 'first_name_' + newindex);
			$$('#clone_form_' + newindex + ' .last_name_field').set('name', 'last_name_' + newindex);
			$$('#clone_form_' + newindex + ' .email_field').set('name', 'email_' + newindex);
			
			this.cloneArray[index] = "clone_form_" + newindex;
			
		}.bind(this));
		
		this.attachDestroy();
	},
	
	incrementID: function(element){
		var length = this.cloneArray.length + 1;
		element.set('id', 'clone_form_' + length);
		return element;
	}
});