window.addEvent('domready', function() {
	
	var virtual = new Virtual.HTML({
		enable: {
			arrows: true,
			closeButton: true,
			caption: true
		},
		effect: 'slide:vertical',
		style: true,
		leftArrowText: '',
		rightArrowText: '',
		closeButtonText: '',
		captionOpacity: 0.6,
		contents: [
			'<p style="text-align:center;"><b>Moocha into the Virtual.HTML</b></p><p style="text-align:center;"><img src="/examples/1.3.1/virtual_html/images/moo.rd_mucca_big.jpg" alt="" /></p>',
			'<p style="text-align:center;"><b>Merge moo.rd and MooTools into one amazing script</b></p><p style="text-align:center;"><img src="/examples/1.3.1/virtual_html/images/moo.rd-mootools-package-1.jpg" alt="" /></p>'
		]
	});
	
	/* Choose the mode */
	var fix = $('fix');
	var open = $('open');
	var slideV = $('slideV');
	var slideH = $('slideH');
	var fold = $('fold');
	
	var types = $$(fix, open, slideV, slideH, fold);
	
	fix.addEvent('click', function() {					   
		types.removeClass('mode_selected');	
		fix.addClass('mode_selected');	
		virtual.setEffect('fix');
	});
	
	open.addEvent('click', function() {					   
		types.removeClass('mode_selected');		
		open.addClass('mode_selected');	
		virtual.setEffect('open');
	});
	
	slideV.addEvent('click', function() {					   
		types.removeClass('mode_selected');		
		slideV.addClass('mode_selected');	
		virtual.setEffect('slide');
	});
	
	slideH.addEvent('click', function() {					   
		types.removeClass('mode_selected');		
		slideH.addClass('mode_selected');	
		virtual.setEffect('slide:horizontal');
	});
	
	fold.addEvent('click', function() {					   
		types.removeClass('mode_selected');	
		fold.addClass('mode_selected');	
		virtual.setEffect('fold');
	});
});