<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Gritter demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">* { font-family: 'IBM Plex Sans',arial,sans-serif; }</style>
	<script src="../../jquery.js"></script>
	<link rel="stylesheet" type="text/css" href="../jquery.gritter.css">
	<script type="text/javascript" src="../jquery.gritter.js"></script>
	<style type="text/css">
		body {
			background: #ffffff;
			color: #000000;
			font
		}
		#container {
			width:600px;
			padding:10px;
			background: #333333;
			color: #ffffff;
		}
		#container * {
			background: #333333;
			color: #ffffff;
		}
	</style>
</head>
<body>
<div id="container">
	<h1>Gritter Demo</h1>
	<p>
		The super awesome background is just to show you that all notifications are transparent!
		<em>Tested in: FF 3+, Opera 9, IE7, IE8, Safari 4+</em>
	</p>
	<ul>
		<li>
			<a href="javascript:void(0)" id="add-regular">Add regular notification (dark)</a>: Fades out after a certain amount of time, can be set for each notification.
		</li>
		<li>
			<a href="javascript:void(0)" id="add-regular2">Add regular notification (green)</a>: Fades out after a certain amount of time, can be set for each notification.
		</li>
		<li>
			<a href="javascript:void(0)" id="add-regular3">Add regular notification (red)</a>: Fades out after a certain amount of time, can be set for each notification.
		</li>
		<li>
			<a href="javascript:void(0)" id="add-sticky">Add sticky notification (default)</a>: Doesn't run on a fade timer.  Just sits there until the user manually removes it by clicking on the (X).
		</li>
		<li>
			<a href="javascript:void(0)" id="add-without-image-w">Add notification without image (neutral)</a>
		</li>
		<li>
			<a href="javascript:void(0)" id="add-without-image-n">Add notification without image (white)</a>
		</li>
		<li>
			<a href="javascript:void(0)" id="add-gritter-light">Add notification (light)</a>
		</li>
		<li>
			<a href="javascript:void(0)" id="add-with-callbacks">Add notification with callbacks (pink)</a>
		</li>
		<li>
			<a href="javascript:void(0)" id="add-sticky-with-callbacks">Add a sticky notification with callbacks (yellow)</a>
		</li>
		<li>
			<a href="javascript:void(0)" id="add-max">Add notification with max of 3 (blue)</a>: If there are 3 messages already on screen, it won't show another one.
		</li>
		<hr>
		<li>
			<a href="javascript:void(0)" id="remove-all">Remove all notifications</a>
		</li>
		<li>
			<a href="javascript:void(0)" id="remove-all-with-callbacks">Remove all notifications (with callbacks)</a>
		</li>
	</ul>
</div>

<script type="text/javascript">
$(function(){

	// v.1.7.4.8

	// global setting override
	/*
	$.extend($.gritter.options, {
		class_name: 'gritter-light', // for light notifications (can be added directly to $.gritter.add too)
		position: 'bottom-left', // possibilities: bottom-left, bottom-right, top-left, top-right
		fade_in_speed: 100, // how fast notifications fade in (string or int)
		fade_out_speed: 100, // how fast the notices fade out
		time: 3000 // hang on the screen for...
	});
	*/

	$('#add-sticky').click(function(){
		var unique_id = $.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a sticky notice!',
			// (string | mandatory) the text inside the notification
			text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="javascript:void(0)">magnis dis parturient</a> montes, nascetur ridiculus mus.',
			// (string | optional) the image to display on the left
			image: '../../../../framework/img/sign-warn.svg',
			// (bool | optional) if you want it to fade out on its own or just sit there
			sticky: true,
			// (int | optional) the time you want it to be alive for before fading out
			time: '',
			// (string | optional) the class name you want to apply to that specific message
			class_name: ''
		});
		/*
		setTimeout(function(){ // if have a return unique id, this can be used to manually remove it later using
			$.gritter.remove(unique_id, {
				fade: true,
				speed: 'slow'
			});
		}, 6000)
		*/
		return false;
	});

	$('#add-regular').click(function(){
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a regular notice!',
			// (string | mandatory) the text inside the notification
			text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="javascript:void(0)">magnis dis parturient</a> montes, nascetur ridiculus mus.',
			// (string | optional) the image to display on the left
			image: '../../../../../lib/framework/img/sign-done.svg',
			// (bool | optional) if you want it to fade out on its own or just sit there
			sticky: false,
			// (int | optional) the time you want it to be alive for before fading out
			time: '',
			class_name: 'gritter-dark'
		});
		return false;
	});

	$('#add-regular2').click(function(){
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a regular notice!',
			// (string | mandatory) the text inside the notification
			text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="javascript:void(0)">magnis dis parturient</a> montes, nascetur ridiculus mus.',
			// (string | optional) the image to display on the left
			image: '../../../../../lib/framework/img/sign-ok.svg',
			// (bool | optional) if you want it to fade out on its own or just sit there
			sticky: false,
			// (int | optional) the time you want it to be alive for before fading out
			time: '',
			class_name: 'gritter-green'
		});
		return false;
	});

	$('#add-regular3').click(function(){
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a regular notice!',
			// (string | mandatory) the text inside the notification
			text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="javascript:void(0)">magnis dis parturient</a> montes, nascetur ridiculus mus.',
			// (string | optional) the image to display on the left
			image: '../../../../../lib/framework/img/sign-crit-warn.svg',
			// (bool | optional) if you want it to fade out on its own or just sit there
			sticky: false,
			// (int | optional) the time you want it to be alive for before fading out
			time: '',
			class_name: 'gritter-red'
		});
		return false;
	});

	$('#add-max').click(function(){
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a notice with a max of 3 on screen at one time!',
			// (string | mandatory) the text inside the notification
			text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="javascript:void(0)">magnis dis parturient</a> montes, nascetur ridiculus mus.',
			// (string | optional) the image to display on the left
			image: '../../../../../lib/framework/img/sign-important.svg',
			// (bool | optional) if you want it to fade out on its own or just sit there
			sticky: false,
			class_name: 'gritter-blue',
			// (function) before the gritter notice is opened
			before_open: function(){
				if($('.gritter-item-wrapper').length == 3)
				{
					// Returning false prevents a new gritter from opening
					return false;
				}
			}
		});
		return false;
	});

	$('#add-without-image-n').click(function(){
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a notice without an image!',
			// (string | mandatory) the text inside the notification
			text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="javascript:void(0)">magnis dis parturient</a> montes, nascetur ridiculus mus.',
			class_name: 'gritter-neutral'
		});
		return false;
	});

	$('#add-without-image-w').click(function(){
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a notice without an image!',
			// (string | mandatory) the text inside the notification
			text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="javascript:void(0)">magnis dis parturient</a> montes, nascetur ridiculus mus.',
			class_name: 'gritter-white'
		});
		return false;
	});

	$('#add-gritter-light').click(function(){
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a light notification',
			// (string | mandatory) the text inside the notification
			text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
			class_name: 'gritter-light'
		});
		return false;
	});

	$('#add-with-callbacks').click(function(){
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a notice with callbacks!',
			// (string | mandatory) the text inside the notification
			text: 'The callback is...',
			// (function | optional) function called before it opens
			before_open: function(){
				console.log('I am called before it opens');
			},
			// (function | optional) function called after it opens
			after_open: function(e){
				console.log("I am called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
			},
			// (function | optional) function called before it closes
			before_close: function(e, manual_close){
				var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
				console.log("I am called before it closes: I am passed the jQuery object for the Gritter element... \n" + manually);
			},
			// (function | optional) function called after it closes
			after_close: function(e, manual_close){
				var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
				console.log('I am called after it closes. ' + manually);
			},
			class_name: 'gritter-pink'
		});
		return false;
	});

	$('#add-sticky-with-callbacks').click(function(){
		$.gritter.add({
			// (string | mandatory) the heading of the notification
			title: 'This is a sticky notice with callbacks!',
			// (string | mandatory) the text inside the notification
			text: 'Sticky sticky notice.. sticky sticky notice...',
			// Stickeh!
			sticky: true,
			// (function | optional) function called before it opens
			before_open: function(){
				console.log('I am a sticky called before it opens');
			},
			// (function | optional) function called after it opens
			after_open: function(e){
				console.log("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
			},
			// (function | optional) function called before it closes
			before_close: function(e){
				console.log("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
			},
			// (function | optional) function called after it closes
			after_close: function(){
				console.log('I am a sticky called after it closes');
			},
			class_name: 'gritter-yellow'
		});
		return false;
	});

	$("#remove-all").click(function(){
		$.gritter.removeAll();
		return false;
	});

	$("#remove-all-with-callbacks").click(function(){
		$.gritter.removeAll({
			before_close: function(e){
				console.log("I am called before all notifications are closed.  I am passed the jQuery object containing all  of Gritter notifications.\n" + e);
			},
			after_close: function(){
				console.log('I am called after everything has been closed.');
			}
		});
		return false;
	});

});
</script>
</body>
</html>