// JavaScript Document

$(document).ready(function() {
	
	$("#select_year").css('display', 'none');
	
	$("#select_event_hidden").hide();
	
	$("#select_event_show").hide();
	
	$("#select_subevent_show").hide();
	
	// make the current year the default - this calls select_year_change by default when page loads
	var date = new Date();
	var year = date.getFullYear();
	year = (year + 'a');
	year = year.substring(2,4);
	
	var select_year_id= "#select_year";
	var select_year_options = $('option', select_year_id);
	

	select_year_options.each(function(index){ 
	
		var select_year_value = $(this).val();
		
		if(select_year_value == parseInt(year))
		{
			$("#select_year").val(select_year_value).attr('selected', 'selected');
			$("#select_year").show('slow', function(){ select_year_change(); });
			
		}
	});
	
	// this hides all the div's which end with _all 
	var hide_all_divs = function() {
		
		$("div").each(function(index, element) {
						
			var show_links_div_id = $(this).attr('id');
			
			show_links_div_id_all = show_links_div_id.substring(show_links_div_id.length-4); // getting the _all part of those divs which end in _all
			
			if(show_links_div_id_all == "_all")
			{
				
				$("#" + show_links_div_id).removeClass('show').addClass('hide');
			}
			else
			{
				
				//$("#" + show_links_div_id).removeClass('show').removeClass('hide').addClass('show'); // adding even if you are a 
			}
				
				
		}); // end of show_links each
	}

	hide_all_divs();
	
	// when the dropdown for the year is changed, select_year_change is called
	$("#select_year").change(function() { select_year_change(); $("#select_subevent_show").css('display', 'none'); hide_all_divs(); });
	
	// this function is called when the year is changed in the dropdown
	var select_year_change = function() { 
		
		// get the year from the select_year dropdown
		var year_selected = $("#select_year").val();
		
		if(year_selected == 0)
		{
			// if no year is selected, then clear all options from the select_event dropdown and then hide it
			$("#select_event_show").children().remove();
			$("#select_event_show").hide();
		}
		else // if a year has been selected
		{
			// clear all current options from the select_event dropdown
			$("#select_event_show").children().remove();
			
			// add the Select Event option to the dropdown
			var tmp_string_option = '<option id="select_event_show_option" value="0">Select Event</option>';
			$("#select_event_show").append(tmp_string_option);
			
			// then show it (since it was hidden before).
			$("#select_event_show").show();
			
			// to loop through all the select event options in the hidden dropdown
			var select_event_hidden_id = "#select_event_hidden";
			var select_event_hidden_options = $('option', select_event_hidden_id);
			
			//this keeps count of how many events are in that year. Because if its 0, then we don't need to show that dropdown at all
			var select_element_counter = 0;
			
			// looping through all the select event options in the hidden dropdown
			select_event_hidden_options.each(function(index) { 
		
					// building an id to loop through the show_links div section
					// it pulls up the select_event value for eg: musicals
					// then makes it into 09_musicals_all and searches if there is a 09_musicals_all div in the show_links div
					var select_event_value_string = (year_selected + "_" + $(this).val() + "_all");
					
					// this gets the text of that dropdown option
					var option_text_string = $(this).text();
					
					// looping through all of show_links div
					$("div").each(function(index, element) {
						
						// getting the id of that div element
						var show_links_div_id = $(this).attr('id');
						
						// if the two div id's match
						if(show_links_div_id == select_event_value_string)
						{
							// creating a temp id of show_09_musicals_all to put in the select event dropdown (the not hidden one)
							var tmp_id = ("show_" + select_event_value_string);
							
							tmp_id = '<option id="' + tmp_id + '" value="' + tmp_id + '">' + option_text_string + '</option>';
							
							$("#select_event_show").append(tmp_id);
							
							select_element_counter++;
						}
						
						
					}); // end of looping through each of show_links div
				
				
			
			}); // end of select_event_hidden_options.each
			
			// showing the select event option only if there are events in it
			if(select_element_counter==0)
			{
				$("#select_event_show").children().remove();
				$("#select_event_show").hide();
			}
			
		} // end of if(year_selected == 0)
		
		
	} // end of select_year change function

	// this hides or shows all the subevent div's
	var change_all_subevents = function(s1, s2) {
	
		// gets the parent div that needs to be hidden or shown
		var parent_id = $("#select_event_show").val();
		parent_id = parent_id.substring(5, parent_id.length-4);
		
		// loop through all div's to find matching pattern in the id's
		$("div").each(function(index) {
						
			var show_links_div_id = $(this).attr('id');
			
			if(show_links_div_id.indexOf(parent_id) != -1)
			{
					
				$("#" + show_links_div_id).addClass('show').removeClass(s2).addClass(s1);
				
				
				
			}
					
		}); // end of show_links each
		
		return 0;
	}
	
	//YET TO WRITE THIS
	// when a subevent dropdown is selected, this shows/hides the subevents
	$("#select_subevent_show").change(function(){ 
	
		var subevent_selected = $(this).val();
		
		if(subevent_selected == 0)
		{
			var tmp = change_all_subevents('show', 'hide');	
		}
		else
		{
			change_all_subevents('hide', 'show');
			
			// slightly convoluted but this way we can make sure one function gets executed after the other
			show_div_specific_to_subevent(change_all_subevents('hide', 'show'), subevent_selected);
			
		}
		
	});
	
	// this function is called only when a specific div for a specific subevent needs to be shown
	var show_div_specific_to_subevent = function(tmp, subevent_selected)
	{
		// it needs to show the parent div
		var parent_id = $("#select_event_show").val();
		parent_id = parent_id.substring(5);
		$("#" + parent_id).removeClass('hide').addClass('show');
		
		// and the individual div for that subevent
		subevent_selected = subevent_selected.substring(9);
		
		$("#"+subevent_selected).removeClass('hide').addClass('show');	
		
	}
	
	
	// this hides the subevent dropdown
	var hide_subevent_select = function() {
	
		$("#select_subevent_show").hide();
	}
	
	// how is the subevent dropdown populated? This bit does it
	// the id parameter passed is that of the main event
	var show_subevent_select = function(id) {
		
		// it gets the id of the main event its supposed to show the subevents for
		var original_id = id;
		id = id.substring(0, id.length-4); // this removes the _all from the id
		
		// this clears anything from an existing subevent dropdown
		$("#select_subevent_show").children().remove();
		$("#select_subevent_show").hide();
		
		// populates the first option of the subevent dropdown - All
		var tmp_string_option = '<option id="select_subevent_all_show_option" value="0">All</option>';
		$("#select_subevent_show").append(tmp_string_option);
		
		// this counter counts if an event has any subevents at all then to show it only if it has subevents
		var counter =0;
		// looping through divs to find out the subevents related to the main event
		$("div").each(function(index, element) {
			
			// getting the id of each div			
			var show_links_div_id = $(this).attr('id');
			// and the title
			var show_links_div_title = $(this).attr('title');
			
			// this checks if the div id (reached by looping) has the same pattern as the id passed as parameter to the function
			if(show_links_div_id.indexOf(id) != -1)
			{
				// if it does, and they are equal then it means its the main event div
				if( show_links_div_id == original_id)
				{
					// then do nothing because its the main event div	
				}
				else
				{
					// then add them to the subevent select 
					
					var title_id = ("subevent_" + id + "_" + show_links_div_title.replace(" ",""));
					var tmp_string_option = ('<option id="' + title_id + '" value="'  + title_id + '" name="' + show_links_div_title + '">' + show_links_div_title + '</option'); 
					
					$("#select_subevent_show").append(tmp_string_option);	
					
					counter++;
					
				}
			}
				
				
		}); // end of show_links each
		
		if(counter>0)
		{
			// show subevent dropdown only if there are subevents to show
			$("#select_subevent_show").show();	
		}
	}
	
	// depending on what event is selected, that div _all is shown
	var show_specific_div = function(id){
		
		var tmp_id = "#" + id;
		$(tmp_id).removeClass('hide').addClass('show');
		
		tmp_id = tmp_id.substring(1, tmp_id.length - 4); // removes the _all part of it
		
		// we also need to loop through all the div's and addClass('show') to the subevent divs
		// loop through all div's to find matching pattern in the id's
		$("div").each(function(index) {
						
			var show_links_div_id = $(this).attr('id');
			
			if(show_links_div_id.indexOf(tmp_id) != -1)
			{
				if( show_links_div_id != tmp_id)
				{
					// that means its not the main div	
					$("#" + show_links_div_id).removeClass('hide').addClass('show');
					
				}
				
				
			}
					
		}); // end of show_links each
		
		show_subevent_select(id); // this function populates the the subevent dropdown
	}

	
	// when the event dropdown is selected/changed
	$("#select_event_show").change(function(){
	
		// the value and id are both the same for the drop down
		// its show_#### so thats why we need to remove the first 5 characters
		var event_selected = $("#select_event_show").val();
		var div_selected_id = event_selected.substring(5);
		
		// all the divs are added the class=hide 
		hide_all_divs();
		
		// if Select Event is not selected, then show that div
		if( event_selected != 0)
		{
			show_specific_div(div_selected_id);	
		}
		else // hide the subevent dropdown
		{
			hide_subevent_select();	
		}
		
	});
	
	
});