//create a "hide all" function
//create a parameter so you can pass the element
var hideAll = function(){
	var morphElements = $$('.foto');

	morphElements.each(function(el){
		el.setStyles({'display':'none'})
	})
	
	var btnElements = $$('li[id^=mel]');

	btnElements.each(function(el){
		el.setStyles({
				//the pattern to follow is 'property': 'value',
				'text-decoration': 'none',
				'background-position': '0'
			});
	})
}
 //here we create a function for each content element
var showFunction = function(el) {
	
	// first hide all divs
	hideAll();
	
	var id = el.get('id').replace('mel','')

	//now, we create our morph
	var morphObject = new Fx.Morph($('prod'+id));
	 
	//we can also start our morph like we would start a tween
	//except we can now input multiple style properties
	morphObject.set({
		'display': 'none',
		'background-color': '#999'
	});	 
	//we can also start our morph like we would start a tween
	//except we can now input multiple style properties
	morphObject.start({
		'display': 'block',
		'background-color': '#fff'
	});
}
//here we create a function for each content element
var showTab = function(el) {
	el.addEvent('click', function(){
			this.erase('href');
			showFunction(this);
			//this.setStyle('text-decoration', 'underline');
			this.setStyles({
				//the pattern to follow is 'property': 'value',
				'text-decoration': 'underline',
				'background-position': '-76px'
			});
		});
	}