$(function(){
	$("#demoForm").formwizard({
	 	formPluginEnabled: true,
	 	validationEnabled: true,
	 	inDuration:1,
	 	outDuration:1,
	 	focusFirstInput : true,
	 	formOptions :{
			success: function(data){$("#status").show(function(){ $(this).html('<div class="alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Success!</strong><br>Your request has been submitted.</div>')})
			,$("#demoForm").hide("slow")},
			//beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
			//dataType: 'json',
			type: 'POST',
			resetForm: true
	 	},
	 	validationOptions : {
errorPlacement: function(error, element) {
error.html('Required');
if(element.closest('.form_field').find('label.error').length == 0){
error.insertBefore( element.closest('.form_field').find('.error_message_holder') );
}
} ,
	 		rules: {
				Email: {
					required: true,
					email: true
				}
			},
			messages: {
				Email: {
					required: "Please specify your email",
					email: "Please use the format example@domain.com"
				},

			}
	 	}
	 }
	);
	// function for appending step visualization
	function addVisualization(id){
		$("#step_visualization").append(id)
	}
	// initial call to addVisualization (for visualizing the first step)
	addVisualization($("#demoForm").formwizard("state").currentStep);

	// bind a callback to the step_shown event
	$("#demoForm").bind("step_shown", function(event, data){
		$("#step_visualization").html("");

		$.each(data.activatedSteps, function(){
			addVisualization(this)
		});});
});

function nextStep() {
$("#demoForm").formwizard("next");
}
$("#demoForm").formwizard("state");



$("#demoForm").validate({
    rules: {
       thefield: { digits:true, required: true }
    },
    tooltip_options: {placement: 'left' }
 });