$(document).ready(function() {

	$('#btn-categories').bind('click', function() {
		$.cookie('menu','category');
		$('#btn-categories').css('background-image','url(/images/nesky/bg-white-30pc.png)');
		$('#btn-brands').css('background-image','none');
		$('#menu-right').load('/ajax/right-menu-categories.asp');
	});


	$('#btn-brands').bind('click', function() {
		$.cookie('menu','brand');
		$('#btn-categories').css('background-image','none');
		$('#btn-brands').css('background-image','url(/images/nesky/bg-white-30pc.png)');
		loadBrandMenu();
	});
	
	if ($.cookie('menu') == 'category') {
		$('#btn-categories').css('background-image','url(/images/nesky/bg-white-30pc.png)');
		$('#btn-brands').css('background-image','none');
		$('#menu-right').load('/ajax/right-menu-categories.asp');
	} else {
		loadBrandMenu();
	}
});

function loadBrandMenu() {
	$('#menu-right').load('/ajax/right-menu-brands.asp', function() {
		// after menu has loaded

		$('.brand').bind('click', function() {
			expandBrand($(this).attr('id'));
			
			$.cookie('brand',$(this).attr('id').replace('brand',''));
		});
		
		if ($.cookie('brand')) {
			expandBrand('brand'+$.cookie('brand'),$.cookie('gender'));	
		}
	});
}

function expandBrand(eb,eg) {
	$('.brand-options').hide();

	$('.brand').bind('click', function() {
		expandBrand($(this).attr('id'));
	});
	
	$('#' + eb).css('height','auto');
	$('#' + eb).unbind('click');
	var brandID = eb.replace('brand','');
	$('#' + eb + ' .brand-options').load('/ajax/brand-options.asp?brand=' + brandID,function() {
		// clear other brand options
		$('.brand-options').not(this).html('');
		// display this brand
		$(this).show();
		// bind clicks on the gender filters
		$('.gender').bind('click', function() {  // gender selected
			$.cookie('gender',$(this).attr('id'));
			expandGender(eb.replace('brand',''),$(this).attr('id'));
		});
		if (eg) {
			expandGender(brandID,eg);			
		}
	});
}

function expandGender(eb,eg) {
	// hide and clear other gender lists
	$('.categories').not('#gender-' + eg).hide();
	$('.categories').not('#gender-' + eg).html('');

	// load category list
	$('#gender-' + eg).load('/ajax/category-options.asp?brand=' + eb + '&gender=' + eg,function() {
		// after category list loaded
		$('#gender-' + eg).show();
	});
}
