Reorganize README for better understanding

Author: Foxandxss

README.md

@@ -37,8 +37,6 @@ $ bower install angular-toastr
 
 ## Usage
 
-### Basic usage
-
 Toastr usage is very simple, by default it comes with four types of notification messages:
 
 Success:
@@ -109,35 +107,57 @@ A toast has a `isOpened` flag to see whether it is opened or not.
 
 ### Toastr customization
 
-You can customize the entire library like:
+This library has two parts, a `container` and the `toasts` you put in it.
+
+To configure the `container` you need to modify the `toastrConfig`, for example:
 
 ```javascript
 app.config(function(toastrConfig) {
   angular.extend(toastrConfig, {
-    allowHtml: false,
     autoDismiss: false,
+    containerId: 'toast-container',
+    maxOpened: 0,    
+    newestOnTop: true,
+    positionClass: 'toast-top-right',
+    preventDuplicates: false,
+    preventOpenDuplicates: false,
+    target: 'body'
+  });
+});
+```
+
+Those are the default values, you can pick what you need from it and override with your values.
+
+* **autoDismiss** If set, show only the most recent `maxOpened` toast(s)
+* **containerId**: The name of the container where you want to append your toasts (the container will be created for you).
+* **maxOpened**: Maximum number of toasts displayed at once.
+* **newestOnTop**: Add new toasts on top of the old one. Put on false to put them on the bottom.
+* **positionClass**: The position where the toasts are added.
+* **preventDuplicates**: Prevent duplicates of the last toast.
+* **preventOpenDuplicates**: Prevent duplicates of open toasts.
+* **target**: The element to put the toastr container.
+
+To customize a `toast` you have two options. First, you can set a default option to be applied globally to all `toasts` in the same way you modified the `container`:
+
+```javascript
+app.config(function(toastrConfig) {
+  angular.extend(toastrConfig, {
+    allowHtml: false,
     closeButton: false,
     closeHtml: '<button>&times;</button>',
-    containerId: 'toast-container',
     extendedTimeOut: 1000,
     iconClasses: {
       error: 'toast-error',
       info: 'toast-info',
       success: 'toast-success',
       warning: 'toast-warning'
-    },
-    maxOpened: 0,    
+    },  
     messageClass: 'toast-message',
-    newestOnTop: true,
     onHidden: null,
     onShown: null,
     onTap: null,
-    positionClass: 'toast-top-right',
-    preventDuplicates: false,
-    preventOpenDuplicates: false,
     progressBar: false,
     tapToDismiss: true,
-    target: 'body',
     templates: {
 	  toast: 'directives/toast/toast.html',
 	  progressbar: 'directives/progressbar/progressbar.html'
@@ -149,42 +169,30 @@ app.config(function(toastrConfig) {
 });
 ```
 
-Those are the default values, you can pick what you need from it and override with your values.
-
 * **allowHtml**: Your toast can use custom HTML here (See [Issue 3](https://github.com/Foxandxss/angular-toastr/issues/3))
-* **autoDismiss** If set, show only the most recent `maxOpened` toast(s)
 * **closeButton**: Whether to display an "X" close button on the toast.
 * **closeHtml**: Html element to be used as a close button.
-* **containerId**: The name of the container where you want to append your toasts (the container will be created for you).
 * **extendedTimeOut**: The timeout after you hover a toast.
 * **extraData**: If you override the template, you can pass global extra data to your toasts.
 * **iconClasses**: The default type classes for the different toasts.
-* **maxOpened**: Maximum number of toasts displayed at once.
 * **messageClass**: The class for the toast's message.
-* **newestOnTop**: Add new toasts on top of the old one. Put on false to put them on the bottom.
 * **onHidden**: A callback function called when a toast gets hidden. It receives a boolean parameter to see whether it was closed via click or not.
 * **onShown**: A callback function called when a toast is shown.
 * **onTap**: A callback function called when it is clicked.
-* **positionClass**: The position where the toasts are added.
-* **preventDuplicates**: Prevent duplicates of the last toast.
-* **preventOpenDuplicates**: Prevent duplicates of open toasts.
 * **progressBar**: A progress bar to see the timeout in real time.
 * **tapToDismiss**: Whether the toast should be dismissed when it is clicked.
-* **target**: The element to put the toastr container.
 * **templates**: To override the default path of the templates.
 * **timeOut**: The timeout before the toasts disappear.
 * **titleClass**: The class for the toast's title.
 * **toastClass**: Base class for toasts.
 
-You can also override options per toast, for example:
+The second option is to pass a third parameter (or second if you don't need a **title**). Let see some examples:
 
 Toast with custom HTML (available in both title and message):
 
 ```javascript
-app.controller('foo', function($scope, toastr) {
-  toastr.info('<input type="checkbox" checked> Success!', 'With HTML', {
-    allowHtml: true
-  });
+toastr.info('<input type="checkbox" checked> Success!', 'With HTML', {
+  allowHtml: true
 });
 ```
 
@@ -214,10 +222,8 @@ toastr.info('What a nice apple button', 'Button spree', {
 A pinky custom style (you can also create here new types with `$decorate`):
 
 ```javascript
-app.controller('foo', function($scope, toastr) {
-  toastr.info('I am totally custom!', 'Happy toast', {
-    iconClass: 'toast-pink'
-  });
+toastr.info('I am totally custom!', 'Happy toast', {
+  iconClass: 'toast-pink'
 });
 ```
 
@@ -232,26 +238,6 @@ app.controller('foo', function($scope, toastr) {
 
 ![Pink image](http://i.imgur.com/jur31Zd.png)
 
-See how we passed a third parameter to the `toast`.
-
-There you can override:
-
-* **allowHtml**: Whether to allow HTML or not in a concrete toast.
-* **closeButton**: Putting a close button on the toast.
-* **closeHtml**: If you need to override how the close button looks like.
-* **extendedTimeOut**: The timeout after you hover it.
-* **extraData**: If you override the template, you can pass concrete extra data per toast.
-* **iconClass**: For the type class you want to use for the toast.
-* **messageClass**: If you want to modify the message look.
-* **onHidden**: Function to call when the toast gets hidden. It receives a boolean parameter to see whether it was closed via click or not.
-* **onShown**: Function to call when the toast is shown.
-* **onTap**: A callback function called when it is clicked.
-* **progressBar** Show a progress bar for the toast.
-* **tapToDismiss**: If you want a concrete toast to toggle the close on click.
-* **timeOut**: For that concrete toast timeout.
-* **titleClass**: To override the title class of the toast.
-* **toastClass**: For the main toast class.
-
 ### Toast template
 
 If you want to use the built-in template, you can use the `angular-toastr.tpls.js` file.