$(document).ready(function() {	
	
	// in Sanskrit alphabet
	// By hovering over ids, add an highlight CSS class to the corresponding spans
	var ids = ["vowel", "consonant", "short", "long", "visarga", "guttural", "palatal", "cerebral", "dental", "labial", "first", "second", "third", "fourth", "fifth", "hard", "soft", "aspirated", "nasal", "semivowel", "sibilant"];
	for (var i = 0; i < ids.length; i++) {
	  $("#" + ids[i]).hover(function() {
			$(this).addClass("highlight").css({'cursor' : 'default'});
	    $("." + $(this).attr('id')).addClass("highlight");
	  }, function() {
			$(this).removeClass("highlight");
	    $("." + $(this).attr('id')).removeClass("highlight");
	  });
	}
	
	// By hovering over any letter the corresponding characteriistics are being highlighted.
	$('.letter').hover(function() {
		$(this).addClass("highlight").css({'cursor' : 'default'});
		var classList = $(this).attr('class').split(' ');
		$.each( classList, function(index, item) {
			$("#" + item).addClass("highlight");
		});
	}, function() {
		$(this).removeClass("highlight");
		var classList = $(this).attr('class').split(' ');
		$.each( classList, function(index, item) {
				$("#" + item).removeClass("highlight");
			});
	});
	
});