window.addEvent('domready', function() {
 
	// APPLE ALERT
	var ca1 = new Custom.Alert('', '<b>JavaScript</b> <br /><br /> <span class="little">An Apple Alert</span>', {
			content: 'html',
			text: {
				confirmButtonText: '',
				closeButtonText: ''
			},
			opacify:false,
			draggable: true,
			zones: {
				box: 'box1',
				head: 'head1',
				body: 'body1',
				buttonBox: 'buttonBox1'
			},
			buttons: {
				closeButton: 'cancelButton1',
				confirmButton: 'confirmButton1'
			},
			overlay: false
	});
 
	// WINDOWS ALERT
	var ca2 = new Custom.Alert('<span><b>XP Alert</b></span>', '<b>JavaScript</b> <br /><br /> <span class="little">A Windows Alert</span>', {
			content: 'html',
			text: {
				confirmButtonText: '',
				closeButtonText: ''
			},
			opacify:false,
			draggable: true,
			dragOpacity: true,
			zones: {
				box: 'box2',
				head: 'head2',
				body: 'body2',
				buttonBox: 'buttonBox2'
			},
			buttons: {
				closeButton: 'cancelButton2',
				confirmButton: 'confirmButton2'
			},
			overlay: 'darken'
	});
 
 
	// VISTA ALERT
	var ca3 = new Custom.Alert('<span>Vista Alert</span>', '<b>JavaScript</b> <br /><br /> <span class="little">A Vista Alert</span>', {
			content: 'html',
			text: {
				confirmButtonText: '',
				closeButtonText: ''
			},
			opacify:false,
			draggable: true,
			zones: {
				box: 'box3',
				head: 'head3',
				body: 'body3',
				buttonBox: 'buttonBox3'
			},
			buttons: {
				closeButton: 'cancelButton3',
				confirmButton: 'confirmButton3'
			},
			overlay: 'lighten'
	});
 
 
	// MOO.RD ALERT
	var ca4 = new Custom.Alert('<span>moo.rd Alert</span>', '<b>JavaScript</b> <br /><br /> <span class="little">A moo.rd Alert</span>', {
			content: 'html',
			text: {
				confirmButtonText: '',
				closeButtonText: ''
			},
			opacify:true,
			draggable: false,
			zones: {
				box: 'box4',
				head: 'head4',
				body: 'body4',
				buttonBox: 'buttonBox4'
			},
			buttons: {
				closeButton: 'cancelButton4',
				confirmButton: 'confirmButton4'
			},
			overlay: '#EEABA8'
	});
 
	// EVENTS
	$('ok').addEvent('click', function(event) {
		event.preventDefault();
		ca1.setText('<b>JavaScript</b> <br /><br /> <span class="little">New Text</span>');
		ca1.setTitle('<span style="padding-left:10px;">A New Title</span><a id="customAlertCloseButton" class="cancelButton1" href="#"/>');
		ca4.setLight(false);
		$('change').set('html', '<p><b>Changed title and text of the first alert. Changed the light of the fourth alert</b></p>');
	});
 
	$('ok2').addEvent('click', function(event) {
		event.preventDefault();
		ca1.create();
	});
 
	$('ok3').addEvent('click', function(event) {
		event.preventDefault();
		ca2.create();
	});
 
	$('ok4').addEvent('click', function(event) {
		event.preventDefault();
		ca3.create();
	});
 
	$('ok5').addEvent('click', function(event) {
		event.preventDefault();
		ca4.create();
	});
 
});