window.addEvent('domready', function() {
	// APPLE Confirm
	var cc1 = new Custom.Confirm('', '<b>JavaScript</b> <br /><br /> <span class="little">An Apple Confirm</span>', {
			content: 'html',
			draggable: true,
			text: {
				buttonText: '',
				closeButtonText: '',
				cancelButtonText: ''
			},
			opacify:false,
			zones: {
				confirmbox: 'box1',
				confirmhead: 'head1',
				confirmbody: 'body1',
				buttonBox: 'buttonBox1'
			},
			buttons: {
				closeButton: 'closeButton1',
				confirmButton: 'confirmButton1',
				cancelButton: 'cancelButton1'
			},
			overlay: '#D3D3D3',
			onConfirm: function() {
				$('confirm1').set('html', '<b>You typed OK with the first confirm</b>');
			},
			onCancel: function() {
				$('confirm1').set('html', '<b>You typed Cancel with the first confirm</b>');	
			},
			initialize: function() {
				this.theclose = new Element('div', { 'styles': {'clear': 'both'} });
				this.theclose.injectInside(this.closebox);
			}
	});
	
	// WINDOWS Confirm
	var cc2 = new Custom.Confirm('<span><b>XP Confirm</b></span>', '<b>JavaScript</b> <br /><br /> <span class="little">A Windows Confirm</span>', {
			content: 'html',
			text: {
				buttonText: '',
				closeButtonText: '',
				cancelButtonText: ''
			},
			opacify:false,
			draggable: false,
			zones: {
				confirmbox: 'box2',
				confirmhead: 'head2',
				confirmbody: 'body2',
				buttonBox: 'buttonBox2'
			},
			buttons: {
				closeButton: 'closeButton2',
				confirmButton: 'confirmButton2',
				cancelButton: 'cancelButton2'
			},
			overlay: 'darken',
			onConfirm: function() {
				$('confirm2').set('html', '<b>You typed OK with the second confirm</b>');
			},
			onCancel: function() {
				$('confirm2').set('html', '<b>You typed Cancel with the second confirm</b>');	
			},
			initialize: function() {
				this.theclose = new Element('div', { 'styles': {'clear': 'both'} });
				this.theclose.injectInside(this.closebox);
			}
	});
	
	// VISTA Confirm
	var cc3 = new Custom.Confirm('<span>Vista Confirm</span>', '<b>JavaScript</b> <br /><br /> <span class="little">A Vista Confirm</span>', {
			content: 'html',
			text: {
				buttonText: '',
				closeButtonText: '',
				cancelButtonText: ''
			},
			opacify:false,
			draggable:false,
			zones: {
				confirmbox: 'box3',
				confirmhead: 'head3',
				confirmbody: 'body3',
				buttonBox: 'buttonBox3'
			},
			buttons: {
				closeButton: 'closeButton3',
				confirmButton: 'confirmButton3',
				cancelButton: 'cancelButton3'
			},
			overlay: 'lighten',
			onConfirm: function() {
				$('confirm3').set('html', '<b>You typed OK with the third confirm</b>');
			},
			onCancel: function() {
				$('confirm3').set('html', '<b>You typed Cancel with the third confirm</b>');	
			},
			initialize: function() {
				this.theclose = new Element('div', { 'styles': {'clear': 'both'} });
				this.theclose.injectInside(this.closebox);
			}
	});
	
	// MOO.RD Confirm
	var cc4 = new Custom.Confirm('<span>moo.rd Confirm</span>', '<b>JavaScript</b> <br /><br /> <span class="little">A moo.rd Confirm</span>', {
			content: 'html',
			text: {
				buttonText: '',
				closeButtonText: '',
				cancelButtonText: ''
			},
			opacify:true,
			zones: {
				confirmbox: 'box4',
				confirmhead: 'head4',
				confirmbody: 'body4',
				buttonBox: 'buttonBox4'
			},
			buttons: {
				closeButton: 'closeButton4',
				confirmButton: 'confirmButton4',
				cancelButton: 'cancelButton4'
			},
			overlay: 'darken',
			onConfirm: function() {
				$('confirm4').set('html', '<b>You typed OK with the fourth confirm</b>');
			},
			onCancel: function() {
				$('confirm4').set('html', '<b>You typed Cancel with the fourth confirm</b>');	
			},
			initialize: function() {
				this.theclose = new Element('div', { 'styles': {'clear': 'both'} });
				this.theclose.injectInside(this.closebox);
			}
	});
	
	// EVENTS
		$('ok').addEvent('click', function(event) {
		event.preventDefault();
		cc1.setText('<b>Javascript</b> <br />  <br /> <span class="little">Same Confirm with new text</span>');
		cc1.setLight('lighten');
		$('change').set('html', '<b>Changed text and light of the first confirm</b>');
	});
	
	$('ok2').addEvent('click', function(event) {
		event.preventDefault();
		cc1.create();
	});
	
	$('ok3').addEvent('click', function(event) {
		event.preventDefault();
		cc2.create();
	});
	
	$('ok4').addEvent('click', function(event) {
		event.preventDefault();
		cc3.create();
	});
	
	$('ok5').addEvent('click', function(event) {
		event.preventDefault();
		cc4.create();
	});

});