var selectedYear = 0;
var selectedBrand = 0;
var selectedModel = 0;
var selectedCategory = 0;

function indicateyear(year)
{
	my_getbyid('indicator_year').innerHTML = year;
}

function indicateyearout()
{
	if(selectedYear == 0)
		my_getbyid('indicator_year').innerHTML = 'Select a year...';
}

function indicatebrand(brand)
{
	my_getbyid('indicator_brand').innerHTML = brand;
}

function indicatebrandout()
{
	if(selectedBrand == 0)
		my_getbyid('indicator_brand').innerHTML = 'Choose a car brand..';
}

function indicatemodel(model)
{
	my_getbyid('indicator_model').innerHTML = model;
}

function indicatemodelout()
{
	if(selectedModel == 0)
		my_getbyid('indicator_model').innerHTML = 'Select a model..';
}

function showyear()
{
	my_hide_div(my_getbyid('selectarea_category'));
	my_hide_div(my_getbyid('selectarea_model'));
	my_hide_div(my_getbyid('selectarea_brand'));
	my_show_div(my_getbyid('selectarea_year'));
	my_getbyid('indicator_year').innerHTML = 'Select a year...';
	selectedYear = 0;
	selectedBrand = 0;
	selectedModel = 0;
	selectedCategory = 0;
}

function loadbrand(year)
{
	my_hide_div(my_getbyid('selectarea_model'));
	my_hide_div(my_getbyid('selectarea_category'));
	selectedBrand = 0;
	selectedModel = 0;
	selectedCategory = 0;
	
	selectedYear = parseInt(year);
	my_getbyid('indicator_year').innerHTML = '<a href="#" onclick="showyear();return false">YEAR:</a> ' + year + ' ..<span id="indicator_brand" style="font-weight:bold;font-size:16px;color:#eeeeee;">Choose a car brand..</span>';
	my_hide_div(my_getbyid('selectarea_year'));
	
	//load brand
	var brand = my_getbyid('selectarea_brand');
	brand.innerHTML = '<img src="images/loadingbar.gif" />';
	my_show_div(brand);
	 $.ajax({
    url: base_dir + "loadmodel/brand/year/" + selectedYear ,
    type: 'GET',
    dataType: 'text',
    timeout: 5000,
    error: function(){
        //alert('Error loading model');
    },
    success: function(html){
		//alert('load ok');
			
		brand.innerHTML = html;
    }
});
}


function loadmodel(brand)
{
	selectedBrand = parseInt(brand);
	my_getbyid('indicator_year').innerHTML = '<a href="#" onclick="showyear();return false">YEAR:</a> <a href="#" onclick="loadbrand('+selectedYear+');return false;" style="text-decoration:none;">' + selectedYear + '</a><span id="indicator_brand" style="font-weight:bold;font-size:16px;color:#eeeeee;">..'+my_getbyid('brand' + brand).innerHTML+'</span>..<span id="indicator_model" style="font-weight:bold;font-size:14px;color:#eeeeee;">Select a model..</span>';
	my_hide_div(my_getbyid('selectarea_brand'));
	
	//load model
	var model = my_getbyid('selectarea_model');
	model.innerHTML = '<img src="images/loadingbar.gif" />';
	my_show_div(model);
	 $.ajax({
    url: base_dir + "loadmodel/model/year/" + selectedYear + "/brand/" + selectedBrand ,
    type: 'GET',
    dataType: 'text',
    timeout: 5000,
    error: function(){
        //alert('Error loading model');
    },
    success: function(html){
		//alert('load ok');
			
		model.innerHTML = html;
    }
});
}

function loadcategory(model)
{
	selectedModel = parseInt(model);
	my_getbyid('indicator_year').innerHTML = '<a href="#" onclick="showyear();return false">YEAR:</a> <a href="#" onclick="loadbrand('+selectedYear+');return false;" style="text-decoration:none;">' + selectedYear + '</a><span id="indicator_brand" style="font-weight:bold;font-size:16px;color:#eeeeee;">..'+my_getbyid('brand' + selectedBrand).innerHTML+'</span>..<span id="indicator_model" style="font-weight:bold;font-size:16px;color:#eeeeee;">..'+my_getbyid('model' + model).innerHTML+'</span>..<span id="indicator_category" style="font-weight:bold;font-size:14px;color:#eeeeee;">Select a category..</span>';
	my_hide_div(my_getbyid('selectarea_model'));
	
	//load model
	var category = my_getbyid('selectarea_category');
	category.innerHTML = '<img src="images/loadingbar.gif" />';
	my_show_div(category);
	 $.ajax({
    url: base_dir + "loadmodel/category/year/" + selectedYear + "/model/" + selectedModel ,
    type: 'GET',
    dataType: 'text',
    timeout: 5000,
    error: function(){
        //alert('Error loading model');
    },
    success: function(html){
		//alert('load ok');
			
		category.innerHTML = html;
    }
});
}

function loadsubcategory(mycategory)
{
	selectedCategory = parseInt(mycategory);
	my_getbyid('indicator_year').innerHTML = '<a href="#" onclick="showyear();return false">YEAR:</a> <a href="#" onclick="loadbrand('+selectedYear+');return false;" style="text-decoration:none;">' + selectedYear + '</a><span id="indicator_brand" style="font-weight:bold;font-size:16px;color:#eeeeee;">..'+my_getbyid('brand' + selectedBrand).innerHTML+'</span>..<span id="indicator_model" style="font-weight:bold;font-size:16px;color:#eeeeee;">..'+my_getbyid('model' + selectedModel).innerHTML+'</span>..<span id="indicator_category" style="font-weight:bold;font-size:14px;color:#eeeeee;">Select a sub-category..</span>';
	my_hide_div(my_getbyid('selectarea_model'));
	
	//load model
	var category = my_getbyid('selectarea_category');
	category.innerHTML = '<img src="images/loadingbar.gif" />';
	my_show_div(category);
	 $.ajax({
    url: base_dir + "loadmodel/subcategory/year/" + selectedYear + "/model/" + selectedModel + "/category/" + selectedCategory ,
    type: 'GET',
    dataType: 'text',
    timeout: 5000,
    error: function(){
        //alert('Error loading model');
    },
    success: function(html){
		//alert('load ok');
			
		category.innerHTML = html;
    }
});
}