window.addEvent('domready', function(){
// Set the cursor to pointer for all li in #linklist to show that entire block will be clickable
	$$('#linklist li').setStyle('cursor','pointer');
// put in a list all a element in li element in #linklist
	var list = $$('#linklist li a');
// for each item
    list.each(function(element) {
// We change the default 'link' property to 'cancel' for the morph effect
// (for the same reason as in the previous example)
	element.set('morph', {link : 'cancel'});
// in element we have the  "a href" ... but the element which must be clickable
// is the entire li so we add the event click to the element's parent (wich is the li)
// onclick we retrieve the href from the link and go to it
	element.getParent().addEvent('click', function(){
		window.location = element.get('href');
	});
// same thing for the effect, we set an effect to the li (changing background color)
// when mouse enter the li
	oldcolor=element.getParent().getStyle('background-color');
	element.getParent().addEvent('mouseenter', function(){
		element.getParent().morph({
			'background-color': '#edbe1c'
		});
	});
// here we reset the element to his previous state when mouse leave the li
	element.getParent().addEvent('mouseleave', function(){
		element.getParent().morph({
			'background-color': '#eaeaea'
		});
	});
	});
});