$(document).ready(function(){


	var createSelectsMakeAndModel = function(){
		$('#select_make li:last').addClass('active');
		$('#select_model li:last').addClass('active');
		var _npp = $('#select_make').find('li').length;
		$('#select_make').append('<li><select name="v_make_['+_npp+']">'+$('#select_make li select:first').html()+'</select></li>');
		$('#select_model').append('<li><select name="v_model_['+_npp+']"><option value="0">select model</option></select></li>');
	}

	var onCangeSelects = function(_this, _index){
		if (!$(_this).parent().hasClass('active')){
			createSelectsMakeAndModel();
			initMakeSelects();
		}
		var select_model;
		$('#select_model li select').each(function(indx, elmnt){
			if (indx == _index){
				select_model = $(elmnt);
			}
		});
		if (typeof select_model != undefined){
			$(select_model).find('option').remove();
			
			
			select_model.load('?ajax=true&make='+$(_this).val());
			/*select_model.append('<option value="0">select model</option>');
			
			if(_action != 'Rv')
			{
				var model;
				if(typeof models != undefined)
				{
					model = models[$(_this).val()];
				}

				if(typeof model == 'object')
				{
					for(var id in model)
					{
						select_model.append('<option value="'+id+'">'+model[id]+'</option>');
					}
				}
			}
			else
			{
				
			}*/
		}
	}
	/**
	 * bind event on change for selects make
	 */
	function initMakeSelects(){
		$('#select_make select').each(function(i, el){
			$(el).unbind('change').bind('change', function(){
				onCangeSelects(this, i);
			});
			$(el).unbind('click').bind('click', function(){
				$(this).parent().addClass('active_color');
			});
		});
	}
	initMakeSelects();
});