$.toast('Here you can put the text of the toast')

$.toast({
heading: 'Information',
text: 'Now you can add icons to generate different kinds of toasts',
showHideTransition: 'slide',
icon: 'info'
})

$.toast({
heading: 'Error',
text: 'Report any <a href="https://github.com/kamranahmedse/jquery-toast-plugin/issues">issues</a>',
showHideTransition: 'fade',
icon: 'error'
})

$.toast({
heading: 'Warning',
text: 'It is going to be supper easy for you to use ;)',
showHideTransition: 'plain',
icon: 'warning'
})

$.toast({
heading: 'Success',
text: 'And these were just the basic demos! Scroll down to check further details on how to customize the output.',
showHideTransition: 'slide',
icon: 'success'
})

$.toast({
text: 'This will become the toast message'
})

$.toast({
heading: 'How to contribute?!',
text: [
	'Fork the repository', 
	'Improve/extend the functionality', 
	'Create a pull request'
],
icon: 'info'
})

$.toast({
heading: 'Can I add <em>icons</em>?',
text: 'Yes! check this <a href="https://github.com/kamranahmedse/jquery-toast-plugin/commits/master">update</a>.',
hideAfter: false,
icon: 'success'
})

$.toast({
heading: 'Headings',
text: 'You can use the `heading` property to specify the heading of the toast message.',
})

$.toast({
text: 'Set the `hideAfter` property to false and the toast will become sticky.',
hideAfter: false
})

$.toast({
text: 'Set the `hideAfter` property to milliseconds and the toast will hide after the specified milli seconds.',
hideAfter: 5000   // in milli seconds
})

$.toast({
text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
heading: 'Slide transition',
showHideTransition: 'slide'
})

$.toast({
text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
heading: 'Fade transition',
showHideTransition: 'fade'
})

$.toast({
text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
heading: 'Plain transition',
showHideTransition: 'plain'
})

$.toast({
heading: 'Closeable Toast',
text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not',
allowToastClose: true
})

$.toast({
heading: 'Non closeable Toast',
text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not',
allowToastClose: false
})

$.toast({
heading: 'Stack',
text: 'If set to a number, it will show that number of toasts at max at a time',
stack: 4
})

$.toast({
heading: 'No stacking',
text: 'If set to false, there will be only one toast at once.',
stack: false
})

$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Specify the custom position object or use one of the predefined ones',
position: 'bottom-left',
stack: false
})

$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Specify the custom position object or use one of the predefined ones',
position: 'bottom-right',
stack: false
})

$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom object',
position: 'bottom-center',
stack: false
})

$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom object',
position: 'top-left',
stack: false
})

$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'top-right',
stack: false
})

$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'top-center',
stack: false
})

$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'mid-center',
stack: false
})

$.toast().reset('all');$.toast({
heading: 'Positioning',
text: 'Use the predefined ones, or specify a custom position object.',
position: {
	left: 120,
	top: 120
},
stack: false
})

$.toast().reset('all');

$.toast({
heading: 'Warning',
text: 'Now you can seemlessly generate warnings using the icon property in the options',
icon: 'warning'
})

$.toast({
heading: 'Success',
text: 'Here is some kind of success message with a success icon that you can notice at the left side.',
icon: 'success'
})

$.toast({
heading: 'Error',
text: 'An unexpected error occured while trying to show you the toast! ..Just kidding, it is just a message, toast is right in front of you.',
icon: 'error'
})

$.toast({
heading: 'Information',
text: 'Now you can add icons to the toasts as well.',
icon: 'info'
})

$.toast({
heading: 'Colors',
text: 'Colors are specified using `bgColor` and `textColor` properties.',
bgColor: '#FF1356',
textColor: 'white'
})

$.toast({
text: 'Processing! Please wait..',
textAlign: 'center'
})

$.toast({
text: 'Triggers the events',

beforeShow: function () {
	alert('The toast is about to appear');
},

afterShown: function () {
	alert('Toast has appeared.');
},

beforeHide: function () {
	alert('Toast is about to hide.');
},

afterHidden: function () {
	alert('Toast has been hidden.');
}
})

var myToast = $.toast({
heading: 'Information',
text: 'Here is some information that will be later on turned to an error',
icon: 'info',
hideAfter: false
});

// Update the toast after three seconds.
window.setTimeout(function(){
myToast.update({
	heading: 'Error',
	text: 'Here is an information that changed to error',
	icon: 'error',
	hideAfter: false
});    
}, 3000)

var myToast = $.toast('Some toast that needs to be removed.');
myToast.reset(); // remove the toast "Some toast that needs to be removed"

$.toast().reset('all');