var genreNum = 1;
var genreMaxNum = 13;
var genreList = [];

var bandNum = 1;

function addGenreFromInput() {
	var genre = $("#genresAutocomplete").val();
	if (genre != "") {
		addGenre(genre, genre);
	}
}

function addGenre(label, value) {
	// reset to empty string
	$("#genresAutocomplete").val("");
	
	// a new genre is created -> no id yet, value equals label
	if (label == value) {
		label = value = value.replace(/,/g, "");	
	}
	
	// update data model
	var genres = $("#genres").val().split(",");
	if (genres.indexOf(value) != -1) {
		return;
	}
	genres.push(value);
	$("#genres").val(genres.join(","));
	
	// update gui
	var genre = '<li class="genre" id="genre-item-' + value + '">';
	genre += '<div class="icon-remove" onclick="removeGenre(\'' + value + '\');" title="Genre entfernen"></div>';
	genre += '<img src="img/tags/' + genreNum + '.png" title="' + label + '" /><br />';
	genre += label;
	genre += '</li>';
	$(".selected-genres ul").append(genre);
	
	genreNum++;
	if (genreNum > genreMaxNum) {
		genreNum = 1;	
	}
}

function removeGenre(id) {
	// update data model
	var genres = $("#genres").val().split(",");
	var i = genres.indexOf(id);
	if (i == -1) {
		console.log("not found");
		return;
	}
	genres.splice(i, 1);
	$("#genres").val(genres.join(","));
	
	// update gui
	$("#genre-item-" + id).remove();
}

function getGenreFromList(label) {
	var lowerLabel = label.toLowerCase();
	for (var i = 0; i < genreList.length; ++i) {
		if (genreList[i].label.toLowerCase() == lowerLabel) {
			return genreList[i];
		}
	}
	return null;
}

function addInstrument(id) {
	// update data model
	var instr = $("#instruments").val().split(",");
	instr.push(id);
	$("#instruments").val(instr.join(","));
}

function removeInstrument(id) {
	// update data model
	var instr = $("#instruments").val().split(",");
	var i = instr.indexOf(id);
	if (i == -1) {
		return;
	}
	instr.splice(i, 1);
	$("#instruments").val(instr.join(","));
}

function assignUserInstruments(ids) {
	var instr = ids.split(",");
	if (instr.length < 1 || instr[0] == "") {
		return;	
	}
	
	for (var i = 0; i < instr.length; i++) {
		var data = $("#instr" + instr[i]).remove();	
		$(".selected-instruments ul").append(data);
	}
	
	$("#instruments").val(ids);
	
	return false;
}

function addBand() {
	// update data model
	var bands = $("#bands").val().split(",");
	bands.push(bandNum);
	$("#bands").val(bands.join(","));
	
	// update gui
	var year = buildYearOptions(-25);
	var month = buildMonthOptions();
	var html = '<div class="band" id="band' + bandNum + '">';
	html += '<label for="bandname' + bandNum + '">Bandname</label>';
	html += '<input type="text" name="bandname' + bandNum + '" class="required" />';
    html += '<br clear="all" /><br clear="all" />';
	
	html += '<label for="bandwebsite' + bandNum + '">Website</label>';
	html += '<input type="text" name="bandwebsite' + bandNum + '"/>';
    html += '<br clear="all" /><br clear="all" />';
	
	html += '<label for="bandfrom' + bandNum + '">Mitglied von</label>';
	html += '<select name="bandfrommonth' + bandNum + '" class="month required">';
	html += '<option value=""></option>';
	html += month;
    html += '</select>';
	html += '<select name="bandfromyear' + bandNum + '" class="year required">';
	html += '<option value=""></option>';
	html += year;
    html += '</select>';
   
    html += '<label for="bandtill' + bandNum + '" class="band-till">bis</label>';
	html += '<select name="bandtillmonth' + bandNum + '" class="month">';
	html += '<option value="00"></option>';
	html += month;
    html += '</select>';
	html += '<select name="bandtillyear' + bandNum + '" class="year">';
	html += '<option value="0000">noch aktiv</option>';
	html += year;
	html += '</select>';
	html += '<br clear="all" /><br clear="all" />';
	
	html += '<label for="bandinstruments' + bandNum + '">Instrumente</label>';
	html += '<div class="band-instruments">';
	html += buildInstrumentCheckboxes();
	html += '</div>';
	html += '<br clear="all" />';
	
	html += '<div class="icon-remove" onclick="removeBand(\'' + bandNum + '\');" title="Bandeintrag entfernen"></div>';		
	html += '<input type="hidden" name="bandid' + bandNum + '" value="0" />';
	html += '</div> ';
			
	$("#bands-container").append(html);
	bandNum++;
}

function removeBand(num) {
	// update data model
	var bands = $("#bands").val().split(",");
	var i = bands.indexOf(num);
	if (i == -1) {
		return;
	}
	bands.splice(i, 1);
	$("#bands").val(bands.join(","));
	
	// update gui
	$("#band" + num).remove();
}

function buildYearOptions(offset) {
	var opt = '';
	var date = new Date();
	var year = date.getFullYear();
	for (var i = year; i >= year + offset; i--) {
		opt += '<option value="' + i + '">' + i + '</option>';	
	}
	return opt;
}

function buildMonthOptions() {
	var opt = '';
	for (var i = 1; i<= 12 ; i++) {
		opt += '<option value="' + i + '">' + i + '</option>';	
	}
	return opt;
}

function buildInstrumentCheckboxes() {
	var instr = $("#instruments").val().split(",");
	
	var checkboxes = "";
	for (var i = 0; i < instr.length; ++i) {
		if (instr[i] != "") {
			var obj = $("#instr" + instr[i]);
			var instrId = obj.attr("id").substr(5);
			var instrName = obj.attr("title");
			checkboxes += '<input type="checkbox" value="' + instrId + '" name="bandinstruments' + bandNum + '[]" checked="checked" />';
			checkboxes += instrName + '<br />';
		}
	}
	return checkboxes;
}

function removePhoto() {
	// update data model
	$("#photodelete").val("1");
	
	// update gui
	$("#photo").remove();
	$("#remove-photo").remove();
}

function confirmDeleteAccount() {
	return confirm("Bist du dir wirklich sicher, dass du deine Mitgliedschaft beenden willst? Also so richtig, ganz, ganz sicher?");	
}

function validateThreadExtraFields() {
	var valid = true;	
	$("p.error").remove();
	
	var loc = $("#location").val();
	if (loc == "") {
		$("#location").after('<p class="error">Bitte gib Ort und Umkreis an!</p>');
		valid = false;
	}
	
	var instr = $("#instruments").val();
	if (instr== "") {
		$("#instruments").after('<p class="error">Bitte w&auml;hle mindestens ein Instrument!</p>');
		valid = false;
	}

	return valid;
}

$.datepicker.setDefaults({
   changeMonth: true,
   changeYear: true,
   dateFormat: "dd.mm.yy",
   dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
   monthNamesShort: ['Jan', 'Feb', 'M&auml;r', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
   nextText: 'vor',
   prevText: 'zur&uuml;ck',
   yearRange: '-100:-10',
   firstDay: 1
});

$(document).ready(function() {
	
	$(".datepicker").datepicker();
	
	$(".available-instruments ul" ).sortable({
		connectWith: ".selected-instruments ul",
		revert: true,
		start: function() {
			$(".selected-instruments").addClass("highlight");	
		},
		stop: function() {
			$(".selected-instruments").removeClass("highlight");	
		},
		receive: function(event, ui) {
			removeInstrument(ui.item.attr("id").substr(5));
		}
	});
	
	$(".selected-instruments ul" ).sortable({
		connectWith: ".available-instruments ul",
		revert: true,
		receive: function(event, ui) {
			addInstrument(ui.item.attr("id").substr(5));
		}
	});
	
	$("#genresAutocomplete").autocomplete({
		source: function(request, response) {
			$.ajax({
				url: "ajax.php?action=genre",
				dataType: "json",
				data: {
					term: request.term
				},
				success: function( data ) {
					genreList = data;
					response(data);
				}
			});
		},
		minLength: 3,
		focus: function(event, ui) {
			return false;
		},
		select: function(event, ui) {
			addGenre(ui.item.label, ui.item.value);
			return false;
		}
	});
		
	$("#genresAutocomplete").keydown(function(event) {
		// pressed enter
		if (event.which == 13) {
			event.preventDefault();
			var label = $(this).val();			
			// genre name must be at least 2 characters
			if (label.length > 2) {
				$("#genresAutocomplete").autocomplete("close");				
				// check if this genre is in our list -> reuse the value from the list instead creating a new one
				var obj = getGenreFromList(label);
				if (obj != null) {
					addGenre(obj.label, obj.value);					
					return;
				}				
				// add this as a new genre
				addGenre(label, label);	
			}
		}
	});
	
	genreNum = $(".selected-genres .genre").size() + 1;
	
	$("#add-band").click(function() {
		addBand();							  
	});
	
	bandNum = $("#bands-container .band").size() + 1;
	
	$("#remove-photo").click(function() {
		removePhoto();								  
	});
	
	$("#threadReply").click(function() {
		$("#replyButtonContainer").hide();
		$("#replyFormContainer").fadeIn();		
	});
	
	$("#threadReply2").click(function() {
		$("#replyButtonContainer2").hide();
		$("#replyFormContainer2").fadeIn();		
	});
	
	$("#profileForm").validate ({
		focusInvalid: true,
		rules: {
			introduction: {
				maxlength: 1000	
			}
		},
		messages: {
			introduction: {
				maxlength: "Bitte halte dich kurz und knapp: Der Text ist auf 1000 Zeichen beschr&auml;nkt!"	
			}
		}
	}); 
	
	$("#contactForm").validate ({
		focusInvalid: true,
		messages: {
			subject: {
				required: "Bitte gib einen Betreff ein!"
			},
			message: {
				required: "Ohne eine Nachricht macht das Kontaktformular aber wenig Sinn, hm?"
			}
		}
	});
	
	$("#settingsForm").validate({
		focusInvalid: true,
		rules: {
			username: {
				required: true,
				remote: "ajax.php?action=username"
			},
			email: {
				required: true,
				email: true,
				remote: "ajax.php?action=email"
			},
			password: {
				minlength: function() { return $('#password').val().length > 0 ? 5 : 0; }
			},
			password2: {
				equalTo: "#password"	
			}
		},
		messages: {
			username: {
				required: "Bitte gib einen Benutzernamen an!",
				remote: "Dieser Benutzername ist leider bereits vergeben!"
			},
			email: {
				required: "Bitte gib eine E-Mail Adresse an!",
				email: "Bitte gib eine g&uuml;ltige E-Mail Adresse an!",
				remote: "Diese E-Mail Adresse ist bereits mit einem anderen Benutzerkonto verkn&uuml;pft!"
			},
			password: {				
				minlength: "Das Passwort muss mindestens 5 Zeichen lang sein!"	
			},
			password2: {
				equalTo: "Die Wiederholung stimmt nicht mit dem Passwort &uuml;berein!"	
			}
		}
	});
	
	$("#registerForm").validate({
		focusInvalid: true,
		rules: {
			username: {
				required: true,
				remote: "ajax.php?action=username"
			},
			email: {
				required: true,
				email: true,
				remote: "ajax.php?action=email"
			},
			password: {
				required: true,
				minlength: 5
			},
			password2: {
				required: true,
				equalTo: "#password"	
			},
			termsofuse: {
				required: true	
			},
			instrument: {
				required: true
			}
		},
		messages: {
			username: {
				required: "Bitte gib einen Benutzernamen an!",
				remote: "Dieser Benutzername ist leider bereits vergeben!"
			},
			email: {
				required: "Bitte gib eine E-Mail Adresse an!",
				email: "Bitte gib eine g&uuml;ltige E-Mail Adresse an!",
				remote: "Diese E-Mail Adresse ist bereits mit einem anderen Benutzerkonto verkn&uuml;pft!"
			},
			password: {				
				minlength: "Das Passwort muss mindestens 5 Zeichen lang sein!"	
			},
			password2: {
				equalTo: "Die Wiederholung stimmt nicht mit dem Passwort &uuml;berein!"	
			},
			termsofuse: {
				required: "Bitte lies dir die Nutzungsbedingungen durch und akzeptiere sie!"
			},
			instrument: {
				required: "Bitte beantworte die Sicherheitsfrage!"
			}
		}
	});
	
	
	$("#threadForm").submit(validateThreadExtraFields);
	
	$("#threadForm").validate({
		focusInvalid: true
	});

});



jQuery.extend(jQuery.validator.messages, {
    required: "Bitte f&uuml;lle dieses Feld aus!"
});