//var upload_range = 0;

// file add/remove indexes
var add_file_index = 0;
var remove_file_index = 0;
var max_upload_slots = 10;
// partner school/organisation add/remove indexes
var partnerschools_added = 0;
var partnerschools_removed = 0;
var partnerorgs_added = 0;
var partnerorgs_removed = 0;

var add_DP_partner_index = 1;
var add_PL_partner_index = 0;
var add_DPR_activiteit_index = 0;
var add_DPR_kost_index = 1;

/*
function setFormField(type, id) {
	if(type == 'required')
}
*/

function clearCal() {
	$(".tooltip").tipsy({html:true, gravity:'w'});												 	
	$(".tipsy").remove();									 
}

function changeCal(timestamp, topic_id) {
	$("#month-calendar").load("/calendar.php?month_select="+timestamp+"&topic_id="+topic_id, false, clearCal);
}

function add_PL_partner_slot() {
	add_PL_partner_index++;
	$("#add-PL-partner").before('\
	<tr>\
		<td class="label-3"><i>partner</i> naam</td>\
		<td> <input class="input-250" name="PL_partner[add]['+add_PL_partner_index+'][PL_partner_naam]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">straat en nummer</td>\
		<td> <input class="input-250" name="PL_partner[add]['+add_PL_partner_index+'][PL_partner_straat_nr]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">postcode en gemeente</td>\
		<td> <input class="input-250" name="PL_partner[add]['+add_PL_partner_index+'][PL_partner_postcode_gemeente]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">telefoonnummer</td>\
		<td> <input class="input-250" name="PL_partner[add]['+add_PL_partner_index+'][PL_partner_telefoon]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">gsm-nummer</td>\
		<td> <input class="input-250" name="PL_partner[add]['+add_PL_partner_index+'][PL_partner_gsm]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">e-mail</td>\
		<td> <input class="input-250" name="PL_partner[add]['+add_PL_partner_index+'][PL_partner_e_mail]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">verantwoordelijkheid</td>\
		<td> <input class="input-250" name="PL_partner[add]['+add_PL_partner_index+'][PL_partner_verantwoordelijkheid]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td colspan="2">&nbsp;</td>\
	</tr>\
	');	
}

function add_DP_partner_now_slot() {
	add_DP_partner_index++;
	$("#add-DP-partner-now").before('\
	<tr>\
		<td class="label-3">naam</td>\
		<td> <input class="input-250" name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_naam]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">telefoonnummer</td>\
		<td> <input class="input-250" name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_telefoon]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">e-mail</td>\
		<td> <input class="input-250" name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_e_mail]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">website</td>\
		<td> <input class="input-250" name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_website]" type="text" value="" /></td>\
	</tr>\
	<input name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_toekomst]" type="hidden" value="0" />\
	<tr>\
		<td colspan="2">&nbsp;</td>\
	</tr>\
	');	
}

function add_DP_partner_future_slot() {
	add_DP_partner_index++;
	$("#add-DP-partner-future").before('\
	<tr>\
		<td class="label-3">naam</td>\
		<td> <input class="input-250" name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_naam]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">telefoonnummer</td>\
		<td> <input class="input-250" name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_telefoon]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">e-mail</td>\
		<td> <input class="input-250" name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_e_mail]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">website</td>\
		<td> <input class="input-250" name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_website]" type="text" value="" /></td>\
	</tr>\
	<input name="DP_partner[add]['+add_DP_partner_index+'][DP_partner_toekomst]" type="hidden" value="1" />\
	<tr>\
		<td colspan="2">&nbsp;</td>\
	</tr>\
	');	
}

function add_DPR_kost_uit_slot() {
	add_DPR_kost_index++;
	$("#add-DPR-kost-uit").before('\
	<tr>\
		<td class="label-3">Uitgave</td>\
		<td><input class="input-150" name="DPR_kost[add]['+add_DPR_kost_index+'][DPR_kost_wat]" type="text" value="" />&nbsp;&nbsp;<input class="input-50" name="DPR_kost[add]['+add_DPR_kost_index+'][DPR_kost_bedrag]" type="text" value="" /> €</td>\
	</tr>\
	<input class="form_field" name="DPR_kost[add]['+add_DPR_kost_index+'][DPR_kost_in]" type="hidden" value="0" />\
	');	
}

function add_DPR_kost_in_slot() {
	add_DPR_kost_index++;
	$("#add-DPR-kost-in").before('\
	<tr>\
		<td class="label-3">Inkomst</td>\
		<td><input class="input-150" name="DPR_kost[add]['+add_DPR_kost_index+'][DPR_kost_wat]" type="text" value="" />&nbsp;&nbsp;<input class="input-50" name="DPR_kost[add]['+add_DPR_kost_index+'][DPR_kost_bedrag]" type="text" value="" /> €</td>\
	</tr>\
	<input class="form_field" name="DPR_kost[add]['+add_DPR_kost_index+'][DPR_kost_in]" type="hidden" value="1" />\
	');	
}

function add_DPR_activiteit_slot() {
	add_DPR_activiteit_index++;
	$("#add-DPR-activiteit").before('\
	<tr>\
		<td class="label-3">Projectactiviteit</td>\
		<td> <input class="input-250" name="DPR_activiteit[add]['+add_DPR_activiteit_index+'][DPR_activiteit_naam]" type="text" value="" maxlength="200" /></td>\
	</tr>\
	<tr>\
		<td class="label-3">Datum</td>\
		<td> <input class="add_date" id="date_add_'+add_DPR_activiteit_index+'" name="DPR_activiteit[add]['+add_DPR_activiteit_index+'][DPR_activiteit_datum]" type="text" value="" /></td>\
	</tr>\
	<tr>\
		<td colspan="2">&nbsp;</td>\
	</tr>\
	');
	$(".add_date").datepicker($.extend({}, 
	$.datepicker.regional["nl"], { 
			duration: "",
			dateFormat: "dd/mm/yy", 
			changeMonth: false, 
			changeYear: false, 
			showOn: "both", 
			buttonImage: "/img/calendar.gif", 
			buttonImageOnly: true 
	})); 
}



//var schools_added = 0;
//var max_add_ws_slots = 10;

// SB: nakijken
// TS: mag weg (want validator), maar php-check toevoegen
function GARBAGE_checkAllowFileExtension(file_path, file_type, id){
	var file_type_string = ["afbeelding", "filmpje", "geluidsbestand", "document"];
	var file_name = file_path.substr(file_path.lastIndexOf("\\")+1);  //is dit okee voor unix URIs???  .lastIndexOf("\\") en .lastIndexOf("/") ???
	var to_check = file_name.toLowerCase();
	if(file_type == 1 || file_type == 2) { var valid_ext = to_check.match(allow_extensions_img); }
	if(file_type == 3) { var valid_ext = to_check.match(allow_extensions_aud); }
	if(file_type == 4) { var valid_ext = to_check.match(allow_extensions_doc); }
	if(!valid_ext){
		var file_extension = file_name.slice(file_name.indexOf(".")).toLowerCase();
		return false;
	}
	else {
		if(file_type == 1 || file_type == 2) { 
			var n_radios = $('#watnog :radio').length;
			if (n_radios == 0) {
				$('#file_' + id + ' > .bestand_info').append('<input type="radio" name="front_bestand" value="new_'+id+'" checked="checked">&nbsp;Tonen in lijst<br />');
			}
			else {
				var n_radios2 = $('#watnog #file_' + id + ' > .bestand_info :radio').length;
				if (n_radios2 == 0)
					$('#file_' + id + ' > .bestand_info').append('<input type="radio" name="front_bestand" value="new_'+id+'">&nbsp;Tonen in lijst<br />');
			}
		}
		return true;
	}
}

function postRemoveFile(index, id) {
	// Animation > fade
	$("#bestand_" + index + " > .upload-edit").fadeTo(0, 0.33);
	// Radio button hide for 'Tonen in lijst'
	$("#bestand_" + index + " :radio").hide();
	// Toggle buttons
	$("#bestand_" + index + " > .upload-header > .upload-delete").hide();
	$("#bestand_" + index + " > .upload-header > .upload-restore").show();
	// Add hidden input > remove_bestand (SB: kan dat met een array?)
	$("#bestand_" + index).append('<input type="hidden" class="remove_bestand" name="remove[bestand][]"  value="' + id + '">');
	//
	remove_file_index++;
	// If 'Tonen in lijst' is set for this file
	if($('#bestand_'+index+' input[name="front_bestand"]').attr("checked")) {
		var to_check = -1;
		$(".step :radio").each(function()	{
			if( $(this).css("display") != "none" && !$(this).attr("checked")) {
				if(to_check == -1)
					to_check = $(".step :radio").index(this);
				/* SB
				n_displayed++;
				if(first_displayed == -1)
					first_displayed = $('.step :radio').index(this);
				SB */
			}
		});
		// Check first 'Tonen in lijst' from top
		if(to_check != -1) {
			$(".step :radio").eq(to_check).attr("checked", "checked");
		}
	}
}

function postRestoreFile(file_name, index) {
	// Animation > fade
	$("#bestand_" + index + " > .upload-edit").fadeTo(0, 1);
	// Radio button show for 'Tonen in lijst'
	$("#bestand_" + index + " :radio").show();
	// Toggle buttons
	$("#bestand_" + index + " > .upload-header > .upload-delete").show();
	$("#bestand_" + index + " > .upload-header > .upload-restore").hide();
	// Remove hidden input
	$("#bestand_" + index).children(".remove_bestand").remove();
	//
	remove_file_index--;
	// Get how many files are shown
	var nm_shown = 0;
	var to_check = -1;
	$('.step :radio').each(function()	{
		if( $(this).css("display") != "none" ) {
			nm_shown++;
			if(to_check == -1)
				to_check = $('.step :radio').index(this);
		}
	});	
	// If only one file is 'shown', set 'Tonen in lijst'
	if(nm_shown == 1)
		$('.step :radio').eq(to_check).attr("checked", "checked");
}

// Add one upload slot
function addUploadSlot(file_type){
	if(add_file_index < max_upload_slots){
		$('#upload_slots_' + file_type + ' > .upload-new').before('\
				<div class="upload-header">\
					<div class="upload-delete">\
						<a href="javascript:void(0)" onclick="removeUploadSlot(' + add_file_index +')">verwijder</a>\
					</div>\
					<span>Nieuw bestand</span>\
				</div>\
				<div id="file_' + add_file_index + '" style="margin: 0 0 10px 0">\
					<div class="upload-edit">\
						<strong>Kies een bestand:</strong><br />\
						<input type="file" class="check_ext" name="upload_'+add_file_index+'" size="40" onKeypress="return handleKey(event)"><br /><br />\
						<strong>Bijschrift:</strong><br /><input class="form_field2" type="text" name="upload['+add_file_index+'][bijschrift]" size="56"><br />\
					</div>\
				</div>');
		add_file_index++;
	}
}

function removeUploadSlot(id){
	// Clear / Remove upload slot
	$('#file_' + id).empty();
	$('#file_' + id).prev().remove();
	$('#file_' + id).remove();
	//
	add_file_index--;
	// If 'Tonen in lijst' is set for this file
	if($('#file_'+id+' input[name="front_bestand"]').attr("checked")) {
		var to_check = -1;
		$('.step :radio').each(function()	{
			if( $(this).css("display") != "none" && !$(this).attr("checked") ) {
				if(to_check == -1)
					to_check = $('.step :radio').index(this);
			}
		});
		// Check first 'Tonen in lijst' from top
		if(to_check != -1)
			$('.step :radio').eq(to_check).attr("checked", "checked");
	}
}

// SB: nakijken
function postRemoveLink(index, id) {
	$("#link_" + index).children(".link_edit").hide();
	$("#link_" + index).children(".link_del").hide();
	$("#link_" + index).children(".link_title").show();
	$("#link_" + index).children(".link_res").show();
	$("#link_" + index).append('<input type="hidden" class="remove_link" name="remove_link_' + remove_link_index + '"  value="' + id + '">');
	remove_link_index++;
}

// SB: nakijken
function postRestoreLink(index) {
	$("#link_" + index).children(".link_title").hide();
	$("#link_" + index).children(".link_res").hide();
	$("#link_" + index).children(".link_edit").show();
	$("#link_" + index).children(".link_del").show();
	$("#link_" + index).children(".remove_link").remove();
	remove_link_index--;
}


// verwijder partner school
function removePartnerSchool(el, school_id) {
	$(el).append("<input type='hidden' name='partnerschool[remove]["+partnerschools_removed+"]' value='"+school_id+"'>");
	$(el).parent().parent().hide();
	partnerschools_removed++;
}

// Verwijder pas toegevoegde partner school
function removeAddedPartnerSchool(el) {
	$(el).parent().parent().remove();
	partnerschools_added--;
}

// Verwijder profiel school
function removeSchool(el, school_id) {
	$(el).append("<input type='hidden' name='schools[remove]["+partnerschools_removed+"]' value='"+school_id+"'>");
	$(el).parent().parent().hide();
	partnerschools_removed++;
}

// verwijder partner organisatie
function removePartnerOrg(el, org_id) {
	$(el).append("<input type='hidden' name='partnerorganisatie[remove]["+partnerorgs_removed+"]' value='"+org_id+"'>");
	$(el).parent().parent().hide();
	partnerorgs_removed++;
}

// Verwijder pas toegevoegde partner organisation
function removeAddedPartnerOrganisation(el) {
	$(el).parent().parent().remove();
	partnerorgs_added--;
}

$(document).ready(function() {
													 
	$("ul, li").filter(":not(#navigation ul, #navigation li)").addClass("not_jd_menu");	
	
													 
	$("body").click(
		function() {
			$(".tooltip").tipsy({html:true, gravity:'w'});												 	
			$(".tipsy").remove();									 
		}
	);
									
													 
	$(".tooltip").tipsy({html:true, gravity:'w'});												 	

	$("#dynamo3_plan").validate();
	
	$("#dynamo3_opweg").validate();
	/*	
	$("#dynamo3_opweg").validate({
		rules: {
			DOW_contact_e_mail_2: {
				equalTo: "#DOW_contact_e_mail"
			}
		}
		messages: {
			DOW_contact_e_mail_2: {
				equalTo: "Gelieve 2 maal hetzelfde paswoord in te voeren<br />"
			}
		}
	});
	*/
	
	$("#dynamo3_project").validate();
	
	/* reportage */
	$("#toggle_report_button").toggle(
      function () {
				$("#report").show();
				$(this).hide();
      },
      function () {
				$("#report").hide();
      }
    );
													 
	/* login */
	$(".login_button").toggle(
		function () {
			$("#forgot").hide();
			$("#login").show();
		},
		function () {
			$("#login").hide();
		}
	);
	
	/* login */
	$(".login_button_school").toggle(
		function () {
			$("#login_school").show();
		},
		function () {
			$("#login_school").hide();
		}
	);
	
	/* forgot password */
	$(".forgot_button").click(
		function () {
			$("#login").hide();
			$("#forgot").show();
		}
	);
												 
	/* datepicker */
	$(".date").datepicker($.extend({}, 
	$.datepicker.regional["nl"], { 
			duration: "",
			dateFormat: "dd/mm/yy", 
			changeMonth: false, 
			changeYear: false,
			showOn: "both", 
			buttonImage: "/img/calendar.gif", 
			buttonImageOnly: true 
	})); 
		
													 
	// show "add_school" velden bij klikken op optie "Andere" in school select
	$("#select_add_school").change(
		function() {
			var selected = $("#select_add_school option:selected").val();
			if(selected == "add") {
				$(".add-school").show();
			}
			else {
				$(".add-school").hide();
			}
		}
	);
	
	// Partner scholen
	$(".button-add-school").bind("click", function() {
		var displayed = $(".add-partner-school").css("display");
		if($(".add-partner-school").css("display") == "none") {
			$(".add-partner-school").find("input[type=text]").val("");
			$(".add-partner-school").show();
			// hide button
			$(this).hide();
		}
		else {
			// get city
			var city = $(".partner-city").val();
			city = city.slice(0, city.indexOf(" - "));
			// get name of school
			var name = $(".partner-school").val();
			// get id of school
			var id = $(".partner-school-id").val();
			// insert HTML
			//$(this).parents("tr").contents().find(".linked_school:last").append('\
			$(".linked-school").append('\
				<tbody>\
				<tr>\
					<td valign="top">\
						<strong>'+name+'</strong><br />\
						<em>'+city+'</em>\
						<input type="hidden" name="partnerschool[add][]" value="'+id+'">\
					</td>\
					<td>\
						<a onclick="removeAddedPartnerSchool(this)" href="javascript:void(0)">verwijder</a>\
					</td>\
				</tr>\
				</tbody>');
			// display linked schools
			$(".no-linked-schools").remove();
			$(".linked-school").show();
			// hide button
			$(".add-partner-school").hide();
			// show button
			$(this).show();
			// SB: nakijken
			/*
			var add_input_fields = $(".add-partner-school").children().eq(1).children("input[type=text]");
			for (i = 0; i < add_input_fields.length; i++) {
				add_input_fields.eq(i).val("");
				partnerschools_added++;
			}
			*/
		}
		// hide button
		//$(this).hide();
	});
	
	// Partner organisaties
	$(".button-add-organisation").bind("click", function() {
		var displayed = $(".add-organisation").css("display");
		if($(".add-organisation").css("display") == "none") {
			$(".add-organisation").find("input[type=text]").val("");
			$(".add-organisation").show();
			// hide button
			$(this).hide();
		}
		else {
			// get name of organisation
			var name = $(".partner-organisation").val();
			// get id of organisation
			var id = $(".partner-organisation-id").val();
			// insert HTML
			//$(this).parents("tr").contents().find(".linked_organisation:last").append('\
			$(".linked-organisation").append('\
				<tbody>\
				<tr>\
					<td>\
						<strong>'+name+'</strong><br />\
						<input name="partnerorganisatie[add][]" type="hidden" value="'+id+'"/>\
					</td>\
					<td><a href="javascript:void(0)" onclick="removeAddedPartnerOrganisation(this)">verwijder</a></td>\
				</tr>\
				</tbody>');
			// display linked schools
			$(".no-linked-organisations").remove();
			$(".linked-organisation").show();
			// hide button
			$(".add-organisation").hide();
			// hide button
			$(this).show();
			// SB: nakijken
			/*
			var add_input_fields = $(".add_org:last").children().eq(1).children("input[type=text]");
			for (i = 0; i < add_input_fields.length; i++) {
				add_input_fields.eq(i).val("");
				partnerorgs_added++;
			}
			*/
		}
		// hide button
		//$(this).hide();
	});
			
	// Profiel scholen
	$(".button-add-school-profile").bind("click", function() {
		var displayed = $(".add-profile-school").css("display");
		if($(".add-profile-school").css("display") == "none") {
			$(".add-profile-school").find("input[type=text]").val("");
			$(".add-profile-school").show();
			// hide button
			$(this).hide();
		}
		else {
			// get city
			var city = $(".profile-city").val();
			city = city.slice(0, city.indexOf(" - "));
			// get name of school
			var name = $(".profile-school").val();
			// get id of school
			var id = $(".profile-school-id").val();
			// insert HTML
			//$(this).parents("tr").contents().find(".linked_school:last").append('\
			$(".linked-school").append('\
				<tbody>\
				<tr>\
					<td valign="top">\
						<strong>'+name+'</strong><br />\
						<em>'+city+'</em>\
						<input type="hidden" name="schools[add][]" value="'+id+'">\
					</td>\
					<td>\
						<a onclick="removeAddedPartnerSchool(this)" href="javascript:void(0)">verwijder</a>\
					</td>\
				</tr>\
				</tbody>');
			// display linked schools
			$(".no-linked-schools").remove();
			$(".linked-school").show();
			// hide button
			$(".add-profile-school").hide();
			// show button
			$(this).show();
			// SB: nakijken
			/*
			var add_input_fields = $(".add-partner-school").children().eq(1).children("input[type=text]");
			for (i = 0; i < add_input_fields.length; i++) {
				add_input_fields.eq(i).val("");
				partnerschools_added++;
			}
			*/
		}
		// hide button
		//$(this).hide();
	});
			
	// cluster checkboxes samenstellen op basis van doelgroep
	$('.doelgroep').click(
		function() { 
			var n_checked = $('.doelgroep:checked').length;
			if(n_checked > 0) {
				for(i = 0; i < n_checked; i++) {
					if(i == 0) {
						var doelgroep = $('.doelgroep:checked').eq(i).val();
						var id_arr = String(doelgroep);
					}
					else {
						doelgroep = $('.doelgroep:checked').eq(i).val();
						id_arr += "/"+String(doelgroep);
					}
				}
				var item_id = $('#item_id_for_ajax').val();
				var is_search = $("#cluster_select").parents(".search").length;
				$.ajax({ 
					method: "get", url: "/ajax.php", data: "func=get_cluster_checkboxes&item_id="+item_id+"&id_arr="+id_arr+"&is_search="+is_search, 
					success: function(html){ 
						if(html) {
							$("#cluster_select").html(html);
							$("#cluster_select").parent().show();
						}
						else {
							$("#cluster_select").empty();
							$("#cluster_select").parent().hide();
						}
					} 
				}); 
			}
			else {
				$("#cluster_select").empty();
				$("#cluster_select").parent().hide();
			}
		}
	); 
	
	// categorie select bij inschrijving evenement
	$("#categorie_select").change(
		function () {
			var selected = $("#categorie_select").val();
			$(".inst_fields").hide();
			//$(".inst_fields input").addClass("ignore_validate");
			$(".inst_fields input").attr("disabled","disabled");
			$(".inst_fields select").attr("disabled","disabled");
			if(selected == "onderwijs" || selected == "cultuur") {
				$(".inst_fields").show();
				//$(".inst_fields input").removeClass("ignore_validate");
				$(".inst_fields input").removeAttr("disabled");
				$(".inst_fields select").removeAttr("disabled");
			}
			if(selected == "cultuur") {
				$(".onderwijsniveau").hide();
				//$(".onderwijsniveau input").addClass("ignore_validate");
				$(".onderwijsniveau input").attr("disabled","disabled");
				$(".onderwijsniveau select").attr("disabled","disabled");
			}
			if(selected == "andere") {		// "andere" geselecteerd
				//do nothing
			}
		}
	);
	
	$(".workshop_checkbox").click(
		function () {
			var n_checked = $(".workshop_checkbox:checked").length;
			if(n_checked > 0)
				$("#submit-button").removeAttr("disabled");
			else
				$("#submit-button").attr("disabled","disabled");
		}
	);
	
	if($(".workshop_excl").length > 0) {
		$("#submit-button").before('<input type="hidden" id="workshop_excl_select" name="workshop_excl_select" value=""  />');
		$("#workshop_excl_select").rules("add", {
			required: true,
			messages: {
				required: "gelieve één van de drie praktijkmarktsessies te kiezen."
			}
		});
		if($(".workshop_excl:checked").length > 0) {
			$("#workshop_excl_select").val("1");
		}
	}
	
	$(".workshop_excl").click(function() {
		$("#subscr_form").validate();																		
		if($(".workshop_excl:checked").length > 0) {
			$("#workshop_excl_select").val("1");
		}
		else {
			$("#workshop_excl_select").val("");
		}
	});
	
	
	
});
	
function limitText(element, len) {
	br = $('<br />');
	
	counter = $('<span />');
	counter.attr('id', element + '_counter');
	
	$(element).after(br);
	$(element).after(counter);

	counter.text('0/' + len)
	
	$(element).bind('keyup', function() {
				var current_length = $(element).val().length;
				var characters_left = len - current_length;
				$(counter).text(current_length + '/' + len);
				
				if(characters_left <= 0) {
					$(element).val($(element).val().substring(0,len));
				}
				
	});
}

function buttonTagClicked(buttonvalue) {
	document.getElementById('submitbuttonpressedvalue').value=buttonvalue;
}