/**
 * The Notification class can be used to display Growl like notifications to the user.
 * These notifications can be used to inform the user that an entry has been saved, a new comment
 * has been posted, etc. Note that this class only inserts/animates the HTML, you'll have to
 * style the notifications yourself (more on that later on).
 *
 * ## Basic Usage
 *
 * Creating a new notification is fairly easy. The most basic notification only requires some content
 * and a title.
 *
 *     notification = new Zen.Notification(
 *     {
 *         title:   'My title',
 *         content: 'Hello, world!'
 *     });
 *
 * This will show a new notification without a title and an image, just the text "Hello, world!".
 * You're not limited to plain text so feel free to use Comic Sans MS, pink colors and other funky
 * elements.
 *
 * ## Configuring Notifications
 *
 * Obviously just a message isn't enough and you might want to add an image or a title. When creating
 * a new notification you can use the following configuration options:
 *
 * * title: the title for the notification
 * * content: the text or HTML to display in the message
 * * image: a custom image to show in the notification
 * * sticky: boolean that indicates that the message can't be hidden by clicking on it
 * * duration: the time (in miliseconds) after which the notification should be removed
 * 
 * ## Styling Notifications
 *
 * The HTML generated by the Notification class is fairly straightforward. There
 * are 2 important elements. The notification container and the notification itself.
 * The container will, how unexpected it may sound, contain all notifications. It's
 * HTML looks like the following:
 *
 *     <div id="notification_container">
 *
 *     </div>
 *
 * The HTML for a notification is slightly more complicated and looks like the following:
 *
 *     <div class="notification">
 *         <div class="close"></div>
 *         <div class="image">
 *             <img src="..." />
 *         </div>
 *         <div class="title">
 *             Notification Title
 *         </div>
 *         <div class="content">
 *             Content goes here
 *         </div>
 *     </div>
 *
 * As you can see it uses quite a few div elements but it's nothing ground breaking.
 * The image and title div elements will only be displayed if a title and/or image has been
 * specified. The close and content div will always be displayed.
 * 
 * @author   Yorick Peterse
 * @link     http://yorickpeterse.com/ Yorick Peterse's Website
 * @link     http://zen-cms.com/ Zen Website
 * @license  http://code.yorickpeterse.com/license.txt The MIT license
 * @since    0.1
 */
Zen.Notification = new Class(
{
    Implements: Options,

   /**
    * JSON object containing all default and user defined options.
    * The following options are available:
    *
    * * title: the title for the notification
    * * content: the text or HTML to display in the message
    * * image: a custom image to show in the notification
    * * sticky: boolean that indicates that the message can't be hidden by clicking on it
    * * duration: the time (in miliseconds) after which the notification should be removed
    *
    * @author Yorick Peterse
    * @since  0.1
    * @var    {object}
    */
    options:
    {
        title:    '',
        content:  '',
        image:    '',
        sticky:   false,
        duration: 3000
    },

   /**
    * Creates a new instance of the notification class
    * and shows the notification based on the specified options.
    *
    * @author Yorick Peterse
    * @since  0.1
    * @param  {object} options An object containing all custom configuration parameters.
    * @return {void}
    */
    initialize: function(options)
    {
        this.setOptions(options);
        this.generateContainer();
        this.generateNotification();
    },

   /**
    * Generates a new notification container in case it doesn't already exist.
    *
    * @author Yorick Peterse
    * @since  0.1
    * @return {void}
    */
    generateContainer: function()
    {
        // The container only has to be created once
        if ( $('notification_container') !== null )
        {
            return;
        }

        container = new Element('div', {id: 'notification_container'});
        container.inject(document.body);
    },

   /**
    * Generates a new notification and inserts it into the notification
    * container.
    *
    * @author Yorick Peterse
    * @since  0.1
    * @return {void}
    */
    generateNotification: function()
    {
        var self         = this;
        var notification = new Element('div', 
        {
            'class':  'notification',
            styles :  {
                visibility: 'hidden'
            }
        });

        notification.adopt(new Element('div', {'class': 'close'}));

        // We'll only add the title and the image if they've been set
        if ( this.options.image !== '' )
        {
            var image_div = new Element('div', {'class': 'image'});
            var image_tag = new Element('img', {src: this.options.image});
          
            notification.adopt(image_div.adopt(image_tag));
        }

        var title_div = new Element('div', 
        {
            'class': 'title', 
            html   : this.options.title  
        });

        var content_div = new Element('div',
        {
            'class' : 'content', 
            html    : this.options.content
        });

        notification.adopt(title_div, content_div).inject($('notification_container'));

        // Add a new event listener so we can close our event
        notification.addEvent('click', function()
        {
            self.removeNotification(notification); 
        });

        notification.tween('opacity', 0, 1);

        // Automatically remove the notification after 3 seconds if "sticky" is set to false
        if ( this.options.sticky !== true )
        {
            this.removeNotification.delay(this.options.duration, this, [notification]);
        }
    },

   /**
    * Removes the specified notification by fading it out and them removing the DOM element.
    *
    * @author Yorick peterse
    * @since  0.1
    * @param  {object} notification The notification to remove.
    * @return {void}
    */
    removeNotification: function(notification)
    {
        // Fade the notification along with a callback so we can remove the element
        // once the animation is finished
        effect = new Fx.Tween(notification);

        effect.addEvent('complete', function()
        {
            notification.destroy();
        });

        effect.start('opacity', 1, 0);
    }
});