buildSubcats = function() {	
	//var dd_open = false;

  // all 3 dropdowns, show boxes on click
  $$('.catchooser_dd').each(function(s, index) {
	
	s.observe('click', function(event){
	
		var box = "";
	
		var targ = getEventTarg(event, 'tg');
		

		if($('catdropdown_menu')){
			$('catdropdown_menu').remove();	
		}	
		
		var data = s.getAttribute('dd_object');
		//alert(data);
		var json = data.evalJSON();
		
		// data = getData(index) index = 0||1||2 --- use of a getdata fct
		//var jsonObject = Object.toJSON(data);
		//var json = jsonObject.evalJSON();
		
		var category = json.category;
		var catLen = category.length;
		
		//generate the box html code
		category.each(function(c, index) {
			box += showCatBox(cat_makeCategoryObject(c),index, catLen, s);
		});
		box = '<div id="catdropdown_menu">' + box + '</div>';

		//new Insertion.After(s, box);
		new Insertion.After($('website_container'), box);
		
		var left = dd_left + $$('.catchooser_dd')[index].getWidth()*index;
		if (index > 0) var left = dd_left + $$('.catchooser_dd')[index].getWidth()*index +(((dd_left*2)+5)*index);
		
		var dd_top = s.getHeight()+s.cumulativeOffset().top;
		if(navigator.userAgent.indexOf('MSIE')>=0) dd_top+=1;
		var dd_left = s.cumulativeOffset().left-4;
		if(navigator.userAgent.indexOf('MSIE')>=0) dd_left+=1;
		
		$('catdropdown_menu').setStyle({
			position: 'absolute',
			display: 'none',
			top: dd_top+'px',
			left: dd_left+'px'
		});			
		
		Effect.BlindDown('catdropdown_menu', { duration: 0.2 });
			
  
	});
	
	s.observe('mouseover', function(){ this.className = 'catchooser_dd active'; });
	
	s.observe('mouseout', function(){ this.className = 'catchooser_dd'; });

  
  });

	// on click outside the box --> hide it
	document.observe('click', function(event){
		var targ = getEventTarg(event, 'tg');
		if(targ.parentNode.id == 'catdropdown_menu' /*|| targ.tagName == 'A'*/ ){
		} else {
			try{$('catdropdown_menu').hide();}catch(e){}
		}
	
	});
  
};


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


function cat_catTemplate(index, catLen, s){

	// template of the box
	var content = "";
	if(index < (catLen-1))	var content = '<p><a href="#{link}" rel="#{rel}" onclick="SWFAddress.setValue(this.rel);return false;this.blur();">#{title}</a></p>';
	else content+= '<p class="bottom"><a href="#{link}" rel="#{rel}" onclick="SWFAddress.setValue(this.rel);return false;this.blur();">#{title}</a></p>';		
	var template = new Template(content);
	
	return template;

};


function showCatBox(media, index, catLen, s){

	var template = cat_catTemplate(index, catLen, s);
	var box = template.evaluate(media);
	
	return box;


};


function cat_makeCategoryObject(c){


	var category = {
	
		title: unescape(c.title),
		link: c.link,
		rel: c.rel
				
	};

	return category;

};