Event.observe(window, "load", function(){

	$('show_modal').observe('click', function(){modal.show();});
	$('show_notify').observe('click', function(){notify.show();});
	$('show_confirm').observe('click', function(){confirm.show();});
	$('show_image').observe('click', function(){image.show();});
	
	$("chaining").observe('click', function(){
		modal.setTitle('Chaining').update('<p>This is an example of chaining function calls</p>\
		<p>var mymodal = new myModal({title: "This is a title"}).update("And add some content").show();</p>\
		<p>This will return the modal itself</p>').center("top").show();
	});
	
	var modal = new Modal({
		id: 'modal',
		title: 'Hello, Modal!',
		effectDuration: 0.4,
		overlayID: 'modal_overlay',
		height: '230px',
		width: '400px'
	});
	
	modal.update("<p>it's really just a normal\ <a href=\"#change_color\" id=\"change_color\">modal</a> window</p>\
	 			<p>Input <input type=\"text\" value=\"Hello, Modal!\" name=\"inputText\" id=\"titlerer\"/></p>");

	var notify = new Modal.Notify({
		id: 'notify',
		overlayID: 'notify_overlay',
		overlayColor: '#8f0000',
		title: 'Wooow there!',
		effectDuration: 0.3,
		overlayOpacity: 0.9,
		width: '400px',
		okText: 'OK!',
		iconURL: 'images/dialog-warning.png',
		notification: 'Something didn\'t go through properly.. Try repeating the action.. or something..'
	});
	
	var confirm = new Modal.Confirm({
		id: 'confirm',
		overlayID: 'confirm_overlay',
		overlayColor: '#e64f4f',
		closeOnOverlay: false,
		title: 'Kill this modal?',
		effect: 'none',
		confirmText: 'This action can not be undone, are you sure you want\'t to go thru with it?',
		yesTitle: 'I know what I\'m doing',
		noTitle: 'I\'ve made a terrible mistake',
		onYes: function(){
			confirm.kill();
		},
		onNo: function(){
			confirm.hide();
		}
	});
	
	var image = new Modal.Image({
		id: 'imageModal',
		wrapAround: false,
		overlayID: 'image_overlay',
		imageList: $A($$('img[rel=modalImage]'))
	});
	
	$('change_color').observe('click', function(){
		$('modal_overlay').morph('background: #85e5e9');
		modal.options.vertical = "top";
		modal.center("top", true);
	});
	$('titlerer').observe('keyup', function(){
		modal.setTitle("Setting vertical alignment to: "+$F("titlerer"));
		if($F('titlerer') == "top" || $F('titlerer') == "center" || $F('titlerer') == "bottom"){
			modal.center($F('titlerer'), true);
		}
	});
});