/**
 * @author Yasar
 */


$(function(){
	var ic_collapse = '/images/icon-collapse.gif';
	var ic_expand = '/images/icon-expand.gif';
	
	$ic = $('<img src="'+ic_collapse+'" />').toggle(
		function(){
			$(this).attr('src',ic_expand);
			$(this).siblings('ul').show();
		},
		function(){
			$(this).attr('src',ic_collapse);
			$(this).siblings('ul').hide();
		}
	);
	
	$ic_blank = $('<img src="/images/icon-blank.gif" />');
	
	// find the first-level category holder
	$ul = $('.store-list > ul');
	
	// hide all sub-level category holders
	$ul.find('ul').hide();
	
	// loop through each li and determine if there is sub-level
	// and place in the appropriate icon, 
	// then assign the events to make it a tree view
	$ul.find('li').each(function(){
		// get a reference to current li element
		$li = $(this);
		
		// if there is a sub level, add the collapse icon
		if ($li.children('ul').size() > 0){
			if ($li.children('ul').find('li').size() > 0) {
				$li.prepend($ic.clone(true));
			}
			else {
				$li.prepend($ic_blank.clone());
			}
		}
	});
	
	// check if there is a default category_id is set..
	// if so, find the li element with the category_id and its ancestors
	if (typeof store_category_id !== 'undefined'){
		$li = $ul.find('[rel='+store_category_id+']');
		$li.addClass('on').parents('ul').not('.root').toggle();
		$li.find('img').click();
		
	}
});