/***************************************
**	Populate Dropdown item using ajax + Jquery
**	Js Parts
**	programmer@chazzuka.com
**	http://www.chazzuka.com
***************************************/

$(document).ready(function()
	{
		
		var base_url = 'http://www.mathsciencesuccess.org/';
		
		var dropdown_element = '#dropdownSpan'; // identifier of span to contain form
		var parent_element	= '#parent';	// identifier of parent element
		var item_element	= '#items';		// identifier of items element
		var post_file		= 'wp-content/themes/math-science-success/dropdown-submit.php';	// Post Handler
		
		var wait_note 	= '<option>Loading...</option>'; // wait message
		var zero_note	= "Sorry, No items match the options";	// no item message
		
		// clear values for non-javascript version
		clear_options();
		// parent element onchange handler
		$(parent_element).change(function(){
			var parent = new Array();$(parent_element+" option:selected").each(function(){parent.push($(this).val());});
			load_items(parent.toString());
		});
		
		// load at the first time
		load_parent();
		load_items(0);
		
		goToPage();
		
		// Clears the HTML link to the Find page
		function clear_options(){
			// Set up form on lower level pages
			$('p#find').remove();
			$(dropdown_element).html('<form id="dropdownMenu"><select name="parent[]" id="parent"></select><select name="items[]" id="items" ></select></form>');
			
			// Set up form on home page
			$('p#home_find').remove();
			$('#home_dropdownSpan').html('<p class="floatLeft">Find math and science support in your area:</p><form id="form1" name="form1" method="post" action=""><div class="selectContainer"><label for="state">State</label><select name="parent[]" id="parent"></select></div><div class="selectContainer"><label for="District">Area</label><select name="items[]" id="items" ></select></div></form>');
			
			
		}
		
		// load items based on selected parent
		function load_items(parent)
			{
				$(item_element).html(wait_note);
				$.post(post_file, { a: 'item', p: parent },
					function(data)
						{
							var opt = "";
							if(data.length)
							{
								opt += '<option value="0" style="background-color:#fff;color:#999">Choose area</option>';									

								
								for(i=0;i<data.length;i++) {
									var style = ' style="background-color:'+((i % 2 ==0)?'#f4f4f4':'#fff')+';color:'+((i % 2 ==0)?'#555':'#999')+'"';
									opt += '<option value="' + data[i].code + '"'+style+'>' + data[i].name + '</option>';
								}
							}
							else
							{
								opt ='<option value="">'+zero_note+'</option>';
							}
							$(item_element).html(opt);
						}
					,'json');				
			}
		
		// load all parent
		function load_parent() 
			{
				$(parent_element).html(wait_note);
				$.post(post_file, { a: 'parent' },
					function(data) 
					   	{
							var opt = "";
							if(data.length)
							{
									
								opt += '<option value="0" style="background-color:#fff;color:#999">Choose state</option>';									
								
								for(i=0;i<data.length;i++)
									{
										var style = ' style="background-color:'+((i % 2 ==0)?'#f4f4f4':'#fff')+';color:'+((i % 2 ==0)?'#555':'#999')+'"';
										opt += '<option value="' + data[i] + '"'+style+'>' + data[i] + '</option>';
									}
							}
							else
							{
								opt ='<option>'+zero_note+'</option>';
							}
							$(parent_element).html(opt);
						}
					,'json');
			}
		
		
		function goToPage(){
			 $("select#items").change(function () {
			  var str = "";
			  $("select#items option:selected").each(function () {
					str = $(this).val();
					str = str.toLowerCase();
					thisUrl = base_url + str;
					opt = '<option value="0" style="background-color:#fff;color:#999">Loading...</option>';									
					
					$('#items').html(opt);
					
					window.location.replace(thisUrl);

					
					
				  });
			});
		}

		
		
	});