$(document).ready(function()
	{

		var parent_element	= '#parent';	// identifier of parent element
		var item_element	= '#items';		// identifier of items element
		var post_file		= 'post.php';	// Post Handler

		var wait_note 	= '<option>Loading counties...</option>'; // wait message
		var zero_note	= "Sorry, No items match the options";	// no item message

		// 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);

		// load items based on selected parent
		function load_items(parent)
			{
				$(item_element).html(wait_note);
				var svc_t = $('input[name=svc_type]:checked').val();
				$.post(post_file, { a: 'item', p: parent, s: svc_t },
					function(data)
						{
							var opt = "";
							if(data.length)
							{
								for(i=0;i<data.length;i++) {
//									var style = ' style="background-color:'+((i % 2 ==0)?'#f4f4f4':'#fff')+';color:'+((i % 2 ==0)?'#555':'#999')+'"';
									var style = ' style="background-color: #f4f4f4;color: #000" '; 
//									opt += '<option value="' + data[i].code + '"'+style+'>' + data[i].code + " => " + data[i].name + '</option>';
									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);
//				var svc_t = $('#svc_type option:checked').text();
				var svc_t = $('input[name=svc_type]:checked').val();
				$.post(post_file, { a: 'parent', s: svc_t },
					function(data)
					   	{
							var opt = "";
							if(data.length)
							{

								opt += '<option value="0" style="background-color:#fff;color:#999">...</option>';

								for(i=0;i<data.length;i++)
									{
									//	var style = ' style="background-color:'+((i % 2 ==0)?'#f4f4f4':'#fff')+';color:'+((i % 2 ==0)?'#555':'#999')+'"';
										//var style = ' style="background-color: #f4f4f4; color: #555" '; 
										var style = ' style="background-color: #f4f4f4; color: #000" '; 
										opt += '<option value="' + data[i] + '"'+style+'>' + data[i] + '</option>';
									}
							}
							else
							{
								opt ='<option>'+zero_note+'</option>';
							}
							$(parent_element).html(opt);
						}
					,'json');
			}

	});