Event.observe(window, 'load', function() {
	if($('tabset1')){
		var para = {
			onDisplay: function(elem) { elem.addClassName('active').removeClassName('inactive') },
			onHide: function(elem) { elem.removeClassName('active').addClassName('inactive') }
		}
		$('tabset1').tabset(para);
		$('tab1').df.tabset.activate();
	}

	// add listener to automatically adjust the tabset height for each tab onclick
	$('tabset1').select('dt').each(function(v){
		 v.observe('click', function(e){
			if(e.element().match('#tab1') || e.element().up().match('#tab1')) {
				if((Df.browser()).ie){ 
					$('momsFavorites').setStyle({height: $('tab1').next('dd').scrollHeight + 227 + 'px'});
				} else {
					$('momsFavorites').setStyle({height: $('tab1').next('dd').scrollHeight + 196 + 'px'});
				}
			} else if(e.element().match('#tab2') || e.element().up().match('#tab2')) { 
				$('momsFavorites').setStyle({height: $('tab2').next('dd').scrollHeight + 196 + 'px'});
			} else if(e.element().match('#tab3') || e.element().up().match('#tab3')) {
				$('momsFavorites').setStyle({height: $('tab3').next('dd').scrollHeight + 196 + 'px'});
			}
		 });
	});

	// initialize the height of the tabset according to the content within the first tab
	$('tabset1').setStyle({height: $('tab1').next().scrollHeight + 0 + 'px'});
	$('momsFavorites').setStyle({height: $('tab1').next().scrollHeight + 227 + 'px'});
	$('tab1').next('dd').setStyle({height: $('tab1').next('dd').scrollHeight + 0 + 'px'});
});
