/**
*   settings = { usePost : true, before:function() {}, after: function() {}, default: null, parameters : { parameter1 : 'value1', parameter2 : 'value2'} }	
*   if usePost is true, then the form will use POST to pass the parameters to the target, otherwise will use GET
*   "before" function is called before the ajax request and "after" function is called after the ajax request.
*   If defaultValue is not null then the specified option will be selected.
*   You can specify additional parameters to be sent to the the server in settings.parameters.
*
*/
jQuery.fn.chainSelect = function( target, url, settings ) 
{
  return this.each( function()
  {
	$(this).change( function( ) 
	{
		settings = jQuery.extend(
		{
			after : null,
			before : null,
			usePost : false,
			defaultValue : null,
			parameters : {'_id' : $(this).attr('id'), '_name' : $(this).attr('name')}
        } , settings);

		settings.parameters._value =  $(this).val();

		if (settings.before != null) 
		{
			settings.before( target );
		}

		ajaxCallback = function(data, textStatus) 
		{
			$(target).html("");//clear old options
			data = eval(data);//get json array

	
			for (i = 0; i < data.length; i++)//iterate over all options
			{
			  for ( key in data[i] )//get key => value
			  {	
					$(target).get(0).add(new Option(data[i][key],[key]), document.all ? i : null);
              }
			}

			if (settings.defaultValue != null)
			{
				$(target).val(settings.defaultValue);//select default value
			} else
			{
				$("option:first", target).attr( "selected", "selected" );//select first option
			}

			if (settings.after != null) 
			{
				settings.after(target);
			}
			
			
						
			$(target).change();//call next chain
			
			
			
			
			
		};

		if (settings.usePost == true)
		{
			$.post( url, settings.parameters, ajaxCallback );
		} else
		{
			$.get( url, settings.parameters, ajaxCallback );
		}
	});
  });
};



////////////////////////////////////////////////////////////////////////


$(function()
{
	$('#cat1').chainSelect('#cat2','/aj/cs.php',
	{ 
		before:function (target) //before request hide the target combobox and display the loading message
		{ 
			$(target).css("display","none");
			//$('#cat3').css("display","none");
			//$('#cat4').css("display","none");
		},
		after:function (target) //after request show the target combobox and hide the loading message
		{ 



           if($("#cat2:last").text()!="" ) {
			$(target).css("display","inline");
                 } 
                   else { $(target).css("display","none"); }

		}
	});
	$('#cat2').chainSelect('#cat3','/aj/cs.php',
	{ 
		before:function (target) 
		{ 
			$(target).css("display","none");
			//$('#cat4').css("display","none");

		},
		after:function (target) 
		{ 

           if($("#cat3:last").text()!="" ) {
			$(target).css("display","inline");
                 } 
                   else { $(target).css("display","none"); }

		}
	});

	$('#cat3').chainSelect('#cat4','/aj/cs.php',
	{ 
		before:function (target) 
		{ 
			$(target).css("display","none");
		},
		after:function (target) 
		{ 

           if($("#cat4:last").text()!="" ) {
			$(target).css("display","inline");
                 } 
                   else { $(target).css("display","none"); }

		}
	});

});