document.observe("dom:loaded", function() {
  //init JavaScript interacitons
  var anchors = $$('a');
  
  for(var i = 0; i < anchors.length; i++) {
 
    var anchor = anchors[i];
 
    if(anchor.readAttribute("rel").substr(0, 3) == "nav") {
      anchor.onclick = function(e) {
        //action on click, in the httpRequest function an ajax request will be sent to the server
        $(this).blur();
        //return false;
      }
      
      anchor.onmouseover = function(e) {
      	var relArray = $(this).readAttribute('rel').split("-");
      	
      	new Effect.Morph('img-'+relArray[1], { 
      		style: 'margin-top: 0px',
      		transition: Effect.Transitions.sinoidal, 
      		duration: 0.15
      	});
      	
      	// new Effect.Morph('sdw-'+relArray[1], { 
      	//       		style: 'bottom: 10px', 
      	//       		transition: Effect.Transitions.sinoidal, 
      	//       		duration: 0.15
      	//       	});
      	
      	new Effect.Opacity('sdw-'+relArray[1], { from: 1.0, to: 0.5, duration: 0.15 });

      }
      
      anchor.onmouseout = function(e) {
      	var relArray = $(this).readAttribute('rel').split("-");
      	
      	new Effect.Morph('img-'+relArray[1], { 
      		style: 'margin-top: 20px', 
      		transition: Effect.Transitions.sinoidal,
      		duration: 0.15
      	});
      	
      	// new Effect.Morph('sdw-'+relArray[1], { 
      	//       		style: 'bottom: 20px', 
      	//       		transition: Effect.Transitions.sinoidal,
      	//       		duration: 0.15
      	//       	});
      	
      	new Effect.Opacity('sdw-'+relArray[1], { from: 0.5, to: 1.0, duration: 0.15 });
      }
    }
  }

});