$(document).ready(function() {
	var formString="Client:text:required;Date of Order:text:date,required;Campaign Name:text:required;Start Date:text:date,required;End Date:text:date,required;Campaign Budget:text:;Campaign Type:select:required:values[Choose One|,Display,Video,Both];Geographic Targeting:select:required:values[Choose One|,Pre-defined Client Territory,Zip Codes,Cities, Counties, States];Demographic Targeting:select:required:values[18-24,25-34,35-44,45-64,65+,unknown];Gender:select:required:values[Male,Female,Unknown];Parental Status:select:required:values[Parent,Non-Parent,Unknown];";

	formBuilder(formString,$("#result"));
});



formBuilder = function(str,putIn) {
	var fields = str.split(";");
	var htmlString = "";
	var templates={
		input:'<div class="block fm-line"> \
          <label for="{safename}">{name}</label> \
          <input name="{safename}" type="{safename}" id="{safename}" class="{classes}" value="{value}" /> \
          <div class="fm-help"></div> \
    </div>',
	    select: '<div class="block fm-line"> \
          <label for="{safename}">{name}</label> \
          <select name="{safename}" id="{safename}" class="{classes}">{value}</select> \
          <div class="fm-help"></div> \
    </div>',
	    textarea: '<div class="block fm-line"> \
          <label for="{safename}">{name}</label> \
          <textarea name="{safename}" id="{safename}" class="{classes}">{value}</textarea> \
          <div class="fm-help"></div> \
    </div>',
 	   option: '<option value="{value}" {selected}>{name}</option>'
    };


	var allFields = storeFields(str);
	var html = buildHTML(allFields);


	//console.log("all the fields:",allFields)
	console.log("html:",html);

	putIn.html(html);


	function storeFields() {
		allFields = [];
		for (i in fields) {
			if (fields[i] == "") {console.warn("Empty input. Exiting!"); continue;};
			var field = {
				name: "",
				safename: "",
				type: "text",
				classes: "",
				options: [],
				value: ""
			};
			var attributes = fields[i].split(":");
			//console.log("attributes:",attributes);
			for (attr in attributes) {//console.log("item:",item==0,"attriutes:",attributes)
				switch(attr) {
					case "0"://field name always first!
						field.name		= attributes[attr];
						field.safename	= attributes[attr].trim().replace(/[^a-z0-9]/gi,"-");
					break;
					case "1": //field type goes next!
						field.type		= attributes[attr];
					break;
					case "2": //required/validation classes next!
					//classes should be space-denoted in HTML, but we like the formbuilder input string to be comma-seperated.
						field.classes= attributes[attr].replace(","," ").replace("required","req");//also note we use the .req class for validation, not .required

						if (field.classes !== "") {
							field.classes += " validate";//add the validation class so our JS will validate it. The other classes denote the TYPE of validation to do, but this class actually denotes to DO IT.
						}
					break;
					case "3"://input value, if not left blank.
						if (attributes[attr].indexOf("values[") !== "") {
							var optionList = attributes[attr].replace("values[",'').replace(']','').split(",");;//clean up and split into multiple options
							for (n in optionList) {//loop through each option
								var option = optionList[n].split("|");//split into name/value pairs.
								var thisOpt = {
									name: option[0],
									value: ''
								};
								if (typeof option[1] !== "undefined") {
									//then use specified value
									thisOpt.value = option[1].trim().replace(/[^a-z0-9]/gi,"-")
								} else {
									//else use option name.
									thisOpt.value = option[0].trim().replace(/[^a-z0-9]/gi,"-")
								}
								//This can be a list of values for a select box.
								field.options.push(thisOpt)
							}
						} else {
							//else is probably standard input or textarea value.
							field.value		= attributes[attr];
						}
					break;
				}//switch
			}//end inner loop
			allFields.push(field);
		}//end outer loop

		return allFields;
	}//storeFields()

	function buildHTML(fieldList) {
		/**
			* this function uses the input template and select/option template to generate the HTML for each form element.
		*/
		for (i in fieldList) {
			var curField = fieldList[i];
			console.log(curField,curField.type)
			switch(curField.type) {
				case "select"://then use <select> tag HTML.
					var curFieldHTML = templates.select;
					//generate options list.
					for (n in curField.options) {
						//generate HTML, put in the {value} field.
						var optionHTML = templates.option;
						optionHTML = optionHTML.replace(/\{value\}/gi,curField.options[n].value);
						optionHTML = optionHTML.replace(/\{name\}/gi,curField.options[n].name);
						optionHTML = optionHTML.replace(/\{selected\}/gi,'');//unused for now
						curField.value += optionHTML;//add it to the object so that it'll be grabbed by our generic {value} line down below.
					}
				break;
				case "textarea"://then use textarea tag HTML
					var curFieldHTML = templates.textarea;
				default: //default is <input> tag
					var curFieldHTML = templates.input;
				break;
			}

			//generic - classes, field name, label, value, etc.
			curFieldHTML = curFieldHTML.replace(/\{safename\}/gi,curField.safename);//escaped input name
			curFieldHTML = curFieldHTML.replace(/\{classes\}/gi,curField.classes);//text in label
			curFieldHTML = curFieldHTML.replace(/\{value\}/gi,curField.value);//input value OR list of <option> tags.
			curFieldHTML = curFieldHTML.replace(/\{name\}/gi,curField.name);//validation classes
			htmlString += curFieldHTML;


		}
		return htmlString;
	}
};//formBuilder func