window.addEvent('domready', function() {
	//alert('-1');
	var teaserText = $('teaser_text');
	var teaserImage = $('teaser_image');
	//alert('0');	
	// We are setting the opacity of the element to 0.5 and adding two events
	teaserText.set('opacity', '0');
	//teaserText.set('display', 'block');
	teaserText.set('visibility', 'visible');
	//alert('1');
	
	var teaserFrame = $('active_teaser_frame');
	
	teaserFrame.addEvents({
		'mouseenter': function(){
			teaserText.morph({
			  opacity: 0.9
		  });
			teaserImage.morph({
				opacity: 0.6
			});
		},
		'mouseleave': function() {
			teaserText.morph({
			  opacity: 0
		  });
			teaserImage.morph({
				opacity: 1
			});
		}
	});

	/*teaserFrame.addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			$('teaser_text').morph({
				'opacity': 0.9
			});
			$('teaser_image').morph({
				'opacity': 0.6
			});
		},

		mouseleave: function(){
			// Morphes back to the original style
			$('teaser_text').morph({
				opacity: 0,
			});
			$('teaser_image').morph({
				'opacity': 1.0
			});
		}
	});*/
});