gritter 0.6.3 → 1.0.0

data/README.md

@@ -1,30 +1,27 @@
 # gritter
 
-    version 0.6.3
+    version 1.0.0
     Robin Brouwer
     Daniël Zwijnenburg
     45north
 
 This Ruby on Rails gem allows you to easily add Growl-like notifications to your application using a jQuery plugin called 'gritter'.
 
-## Installation
-
-You can use this gem by putting the following inside your Gemfile:
+## Note
 
-    gem "gritter", "0.6.2"
+This is a Rails 3.1 gem. Are you using Rails 3.0 or lower? Check out [the 'old' branch on Github](https://github.com/RobinBrouwer/gritter/tree/old). Want support for IE6? 
+Also check out that branch, because the newer version of gritter inside this gem dropped support for it.
 
-You can also install this as a plugin with the following command:
 
-    rails plugin install git://github.com/RobinBrouwer/gritter.git
+## Installation
 
-This is a Rails 3 gem. When you're using Rails 2 you should use version 0.3 (this is a plugin):
+You can use this gem by putting the following inside your Gemfile:
 
-    script/plugin install git://github.com/RobinBrouwer/gritter.git -r 'tag v0.3'
+    gem "gritter", "1.0.0"
 
-## Rails 3.1 installation
+Now generate the locale for gritter:
 
-Gritter now also supports Rails 3.1, thanks to [finist](https://github.com/finist). 
-Adding the JavaScript and CSS files is accomplished in a different way, because of the new 'assets' folder inside /app.
+    rails g gritter:locale
 
 Add the following to `/app/assets/javascripts/application.js`:
 
@@ -34,64 +31,23 @@ And the following to `/app/assets/stylesheets/application.css`:
 
     *= require gritter
 
-And that's it! It now works with Rails 3.1. No need to add `include_gritter` to your layout.
-
-## Rails 3.0 installation
-
-Start your server and you'll see that three folders are added to your /javascripts, /stylesheets and /images folders.
-Now you can use gritter inside your Rails 3.0 application.
-
-Now add the following to your head-tag inside the layout:
-
-    <%= include_gritter %>
-
-If you also want to add jQuery together with gritter (from googleapis.com) you can use the following helper:
-
-    <%= include_gritter_and_jquery %>
-
-You can pass extra arguments to these functions to set the default options for gritter.
-
-    :fade_in_speed => "medium"            # => Allows you to set the fade-in-speed. Can be String or Integer (in ms).
-    :fade_out_speed => 1000               # => Allows you to set the fade-out-speed. Can be String or Integer (in ms).
-    :time => 8000                         # => Allows you to set the time the notification stays. Must be an Integer (in ms).
-
-The :fade_in_speed and :fade_out_speed options accept the following Strings:
-  
-    "slow"
-    "medium"
-    "fast"
-
-Now you can use gritter inside your Rails application.
-You should really check out the gflash helper. It's really handy!
-
+And that's it!
 
 ## Changes
 
-Version 0.6.3 changes:
+Version 1.0.0 changes (17/11/2011):
 
-    - Calling gflash multiple times won't override older messages.
-    - You can set the time, sticky and class_name per gflash message.
-
-Version 0.6.2 changes:
-
-    - Reduced the size of all images;
-    - Also works with Rails 3.1.
-
-Version 0.6 changes:
-
-    - Added locales support for gflash (see README);
-    - README changes.
-
-Version 0.5 changes:
-
-    - Works with Ruby 1.9 now (the Array.to_s was causing problems);
-    - Refactored a lot of code to make everything a bit more logical;
-    - The js helper doesn't add a semicolon (;) after the script anymore;
-    - The js helper accepts several scripts as options;
-    - Changed the way linebreaks (\n) are created;
-    - Added an 'e' variable for all the callbacks;
-    - Added String support for :fade_out_speed;
-    - Changed the README.
+    - Gritter now only works in Rails 3.1. You should check out the 'old' branch for other Rails versions.
+    - Removed everything that isn't needed for Rails 3.1.
+    - Added new version for the gritter jQuery plugin (1.7.1).
+    - Added position option for your gritter messages.
+    - Locale isn't automatically generated. You need to use the gritter:locale generator.
+    - Adding locale-based gflash messages got a bit easier.
+    - You can now use a :gflash option inside the redirect_to method.
+    - Using SCSS image_path instead of ERB image_path inside the CSS.
+    - Added CSS3 support for gritter.
+    - Refactored some parts of the gem.
+    - Changed the README quite a bit.
 
 
 ## Usage
@@ -105,7 +61,8 @@ There are several helpers you can use with gritter. All of them print out Javasc
 To add the script-tags we added another function called `js`. It allows you to easily add script-tags around your javascript.
 It can be used in combination with gritter, but also other Javascript you want to run.
 
-Since version 0.3 we also added a `gflash` helper. This helper supports locales since version 0.6. You can read more about this helper below.
+The most popular feature of this gem is `gflash`. This replaces the regular flash messages in Rails and 
+automatically puts these in gritter boxes. Read further to learn more about gflash.
 
 
 ### add_gritter
@@ -171,8 +128,29 @@ You can also use the `js` helper to add script-tags around this helper.
 
 ### extend_gritter
 
-The `extend_gritter` helper allows you to set the default gritter options, just like you can do with the `include_gritter` helpers. 
-To see what arguments you can pass to this helper just check the `include_gritter` helper.
+The `extend_gritter` helper allows you to set the default gritter options.
+
+    <%= extend_gritter :time => 1000 %>
+
+These are the options you can pass to `extend_gritter`:
+
+    :fade_in_speed => "medium"            # => Allows you to set the fade-in-speed. Can be String or Integer (in ms).
+    :fade_out_speed => 1000               # => Allows you to set the fade-out-speed. Can be String or Integer (in ms).
+    :time => 8000                         # => Allows you to set the time the notification stays. Must be an Integer (in ms).
+    :position => :bottom_left             # => Allows you to set the position for all gritter messages.
+
+The :fade_in_speed and :fade_out_speed options accept the following Strings:
+
+    "slow"
+    "medium"
+    "fast"
+
+The :position option accepts four different Symbols:
+
+    :top_left
+    :top_right      # Default
+    :bottom_left
+    :bottom_right
 
 You can also use the `js` helper to add script-tags around this helper.
 
@@ -189,13 +167,17 @@ It uses a session to remember the flash messages. Add the following inside your
 Now you can add the following to your layout view inside the body-tag:
 
     <%= gflash %>
-  
+
 The flash-message will be shown with 'success.png' as the image and 'Success' as the title.
 To change the title you can add the following to the `gflash` helper inside the layout:
 
     <%= gflash :success => "It has been successful!" %>
-  
-Now the default title will be overwritten. You can use the following gflash options:
+
+Now the default title will be overwritten. You can also use gflash inside `js.erb` files:
+
+    <%= gflash :js => true %>
+
+The :success key isn't the only option supported by gflash. You can use the following gflash options:
 
     :success
     :warning
@@ -231,23 +213,40 @@ Now you can do the following inside your Controller:
       gflash :notice => true
     end
 
-The locales for the `:notice` title and message will now be used. You can still pass a `String` to overwrite a locale.
-
-You can also use gflash inside `js.erb` files:
+The locales for the `:notice` title and message will now be used. You can still pass a `String` to override a locale.
+Since gritter version 1.0 you can also do the following to add the gritter messages:
 
-    <%= gflash :js => true %>
+    def create
+      gflash :notice, :success, :error
+    end
 
-And that's how you add gflash to your Rails application.
-Just remember that you can only set which gflash message you want shown inside the controller.
-The gflash helper inside the views will show the notification and change the title when you pass extra arguments. 
-It will not change the message.
+No need to pass `true` to each key.
 
-Since 0.6.3 you can change the default time, sticky and class_name options for each gflash message.
+You can change the default time, sticky and class_name options for each gritter message.
 This is done inside the Controller and works like this:
 
+    gflash :success => { :time => 2000, :class_name => "my_class", :sticky => true }
     gflash :success => { :value => true, :time => 2000, :class_name => "my_class", :sticky => true }
     gflash :error => { :value => "Custom error", :time => 3000, :class_name => "my_error_class", :sticky => false }
 
+When you don't pass a `:value` it uses the locale. Same goes for when you pass `true` to `:value`.
+
+You can also use gflash directly inside the `redirect_to` method.
+
+    def create
+      redirect_to @post, :gflash => [:notice, :success]
+    end
+    
+    def destroy
+      redirect_to :posts, :gflash => { :warning => "You just deleted something important." }
+    end
+    
+    def logged_in?
+      redirect_to :login, :gflash => { :error => { :value => "You are not logged in!", :sticky => true } }
+    end
+
+And that's how you add gflash to your Rails application!
+
 
 ## Special Thanks
 

data/app/assets/javascripts/gritter.js

@@ -1,19 +1,475 @@
-(function($){$.gritter={};$.gritter.options={fade_in_speed:'medium',fade_out_speed:1000,time:6000}
-$.gritter.add=function(params){try{return Gritter.add(params||{});}catch(e){var err='Gritter Error: '+e;(typeof(console)!='undefined'&&console.error)?console.error(err,params):alert(err);}}
-$.gritter.remove=function(id,params){Gritter.removeSpecific(id,params||{});}
-$.gritter.removeAll=function(params){Gritter.stop(params||{});}
-var Gritter={fade_in_speed:'',fade_out_speed:'',time:'',_custom_timer:0,_item_count:0,_is_setup:0,_tpl_close:'<div class="gritter-close"></div>',_tpl_item:'<div id="gritter-item-[[number]]" class="gritter-item-wrapper [[item_class]]" style="display:none"><div class="gritter-top"></div><div class="gritter-item">[[image]]<div class="[[class_name]]"><span class="gritter-title">[[username]]</span><p>[[text]]</p></div><div style="clear:both"></div></div><div class="gritter-bottom"></div></div>',_tpl_wrap:'<div id="gritter-notice-wrapper"></div>',add:function(params){if(!params.title||!params.text){throw'You need to fill out the first 2 params: "title" and "text"';}
-if(!this._is_setup){this._runSetup();}
-var user=params.title,text=params.text,image=params.image||'',sticky=params.sticky||false,item_class=params.class_name||'',time_alive=params.time||'';this._verifyWrapper();this._item_count++;var number=this._item_count,tmp=this._tpl_item;$(['before_open','after_open','before_close','after_close']).each(function(i,val){Gritter['_'+val+'_'+number]=($.isFunction(params[val]))?params[val]:function(){}});this._custom_timer=0;if(time_alive){this._custom_timer=time_alive;}
-var image_str=(image!='')?'<img src="'+image+'" class="gritter-image" />':'',class_name=(image!='')?'gritter-with-image':'gritter-without-image';tmp=this._str_replace(['[[username]]','[[text]]','[[image]]','[[number]]','[[class_name]]','[[item_class]]'],[user,text,image_str,this._item_count,class_name,item_class],tmp);this['_before_open_'+number]();$('#gritter-notice-wrapper').append(tmp);var item=$('#gritter-item-'+this._item_count);item.fadeIn(this.fade_in_speed,function(){Gritter['_after_open_'+number]($(this));});if(!sticky){this._setFadeTimer(item,number);}
-$(item).bind('mouseenter mouseleave',function(event){if(event.type=='mouseenter'){if(!sticky){Gritter._restoreItemIfFading($(this),number);}}
-else{if(!sticky){Gritter._setFadeTimer($(this),number);}}
-Gritter._hoverState($(this),event.type);});return number;},_countRemoveWrapper:function(unique_id,e){e.remove();this['_after_close_'+unique_id](e);if($('.gritter-item-wrapper').length==0){$('#gritter-notice-wrapper').remove();}},_fade:function(e,unique_id,params,unbind_events){var params=params||{},fade=(typeof(params.fade)!='undefined')?params.fade:true;fade_out_speed=params.speed||this.fade_out_speed;this['_before_close_'+unique_id](e);if(unbind_events){e.unbind('mouseenter mouseleave');}
-if(fade){e.animate({opacity:0},fade_out_speed,function(){e.animate({height:0},300,function(){Gritter._countRemoveWrapper(unique_id,e);})})}
-else{this._countRemoveWrapper(unique_id,e);}},_hoverState:function(e,type){if(type=='mouseenter'){e.addClass('hover');var find_img=e.find('img');(find_img.length)?find_img.before(this._tpl_close):e.find('span').before(this._tpl_close);e.find('.gritter-close').click(function(){var unique_id=e.attr('id').split('-')[2];Gritter.removeSpecific(unique_id,{},e,true);});}
-else{e.removeClass('hover');e.find('.gritter-close').remove();}},removeSpecific:function(unique_id,params,e,unbind_events){if(!e){var e=$('#gritter-item-'+unique_id);}
-this._fade(e,unique_id,params||{},unbind_events);},_restoreItemIfFading:function(e,unique_id){clearTimeout(this['_int_id_'+unique_id]);e.stop().css({opacity:''});},_runSetup:function(){for(opt in $.gritter.options){this[opt]=$.gritter.options[opt];}
-this._is_setup=1;},_setFadeTimer:function(e,unique_id){var timer_str=(this._custom_timer)?this._custom_timer:this.time;this['_int_id_'+unique_id]=setTimeout(function(){Gritter._fade(e,unique_id);},timer_str);},stop:function(params){var before_close=($.isFunction(params.before_close))?params.before_close:function(){};var after_close=($.isFunction(params.after_close))?params.after_close:function(){};var wrap=$('#gritter-notice-wrapper');before_close(wrap);wrap.fadeOut(function(){$(this).remove();after_close();});},_str_replace:function(search,replace,subject,count){var i=0,j=0,temp='',repl='',sl=0,fl=0,f=[].concat(search),r=[].concat(replace),s=subject,ra=r instanceof Array,sa=s instanceof Array;s=[].concat(s);if(count){this.window[count]=0;}
-for(i=0,sl=s.length;i<sl;i++){if(s[i]===''){continue;}
-for(j=0,fl=f.length;j<fl;j++){temp=s[i]+'';repl=ra?(r[j]!==undefined?r[j]:''):r[0];s[i]=(temp).split(f[j]).join(repl);if(count&&s[i]!==temp){this.window[count]+=(temp.length-s[i].length)/f[j].length;}}}
-return sa?s:s[0];},_verifyWrapper:function(){if($('#gritter-notice-wrapper').length==0){$('body').append(this._tpl_wrap);}}}})(jQuery);
+/*
+ * Gritter for jQuery
+ * http://www.boedesign.com/
+ *
+ * Copyright (c) 2011 Jordan Boesch
+ * Dual licensed under the MIT and GPL licenses.
+ *
+ * Date: March 29, 2011
+ * Version: 1.7.1
+ */
+
+// Modernizr for CSS3 support check.
+window.Modernizr = function (a, b, c) {
+   function A(a, b) {
+       var c = a.charAt(0).toUpperCase() + a.substr(1),
+           d = (a + " " + m.join(c + " ") + c).split(" ");
+       return z(d, b)
+   }
+   function z(a, b) {
+       for (var d in a) if (j[a[d]] !== c) return b == "pfx" ? a[d] : !0;
+       return !1
+   }
+   function y(a, b) {
+       return !!~ ("" + a).indexOf(b)
+   }
+   function x(a, b) {
+       return typeof a === b
+   }
+   function w(a, b) {
+       return v(prefixes.join(a + ";") + (b || ""))
+   }
+   function v(a) {
+       j.cssText = a
+   }
+   var d = "2.0.6",
+       e = {},
+       f = b.documentElement,
+       g = b.head || b.getElementsByTagName("head")[0],
+       h = "modernizr",
+       i = b.createElement(h),
+       j = i.style,
+       k, l = Object.prototype.toString,
+       m = "Webkit Moz O ms Khtml".split(" "),
+       n = {},
+       o = {},
+       p = {},
+       q = [],
+       r = function (a, c, d, e) {
+           var g, i, j, k = b.createElement("div");
+           if (parseInt(d, 10)) while (d--) j = b.createElement("div"), j.id = e ? e[d] : h + (d + 1), k.appendChild(j);
+           g = ["&shy;", "<style>", a, "</style>"].join(""), k.id = h, k.innerHTML += g, f.appendChild(k), i = c(k, a), k.parentNode.removeChild(k);
+           return !!i
+       },
+       s, t = {}.hasOwnProperty,
+       u;
+   !x(t, c) && !x(t.call, c) ? u = function (a, b) {
+       return t.call(a, b)
+   } : u = function (a, b) {
+       return b in a && x(a.constructor.prototype[b], c)
+   }, n.rgba = function () {
+       v("background-color:rgba(150,255,150,.5)");
+       return y(j.backgroundColor, "rgba")
+   }, n.borderradius = function () {
+       return A("borderRadius")
+   };
+   for (var B in n) u(n, B) && (s = B.toLowerCase(), e[s] = n[B](), q.push((e[s] ? "" : "no-") + s));
+   v(""), i = k = null, e._version = d, e._domPrefixes = m, e.testProp = function (a) {
+       return z([a])
+   }, e.testAllProps = A, e.testStyles = r;
+   return e
+}(this, this.document);
+
+(function($){
+  
+  /**
+  * Set it up as an object under the jQuery namespace
+  */
+  $.gritter = {};
+  
+  /**
+  * Set up global options that the user can over-ride
+  */
+  $.gritter.options = {
+    position: '',
+    fade_in_speed: 'medium', // how fast notifications fade in
+    fade_out_speed: 1000, // how fast the notices fade out
+    time: 6000 // hang on the screen for...
+  }
+  
+  /**
+  * Add a gritter notification to the screen
+  * @see Gritter#add();
+  */
+  $.gritter.add = function(params){
+
+    try {
+      return Gritter.add(params || {});
+    } catch(e) {
+    
+      var err = 'Gritter Error: ' + e;
+      (typeof(console) != 'undefined' && console.error) ? 
+        console.error(err, params) : 
+        alert(err);
+        
+    }
+    
+  }
+  
+  /**
+  * Remove a gritter notification from the screen
+  * @see Gritter#removeSpecific();
+  */
+  $.gritter.remove = function(id, params){
+    Gritter.removeSpecific(id, params || {});
+  }
+  
+  /**
+  * Remove all notifications
+  * @see Gritter#stop();
+  */
+  $.gritter.removeAll = function(params){
+    Gritter.stop(params || {});
+  }
+  
+  /**
+  * CSS3 check
+  */
+  var gritter_item;
+  var gritter_content = '[[close]][[image]]<div class="[[class_name]]"><span class="gritter-title">[[username]]</span><p>[[text]]</p></div><div style="clear:both"></div>';
+  if(Modernizr.borderradius && Modernizr.rgba) {
+    gritter_item = '<div class="gritter-item gritter-css3">'+ gritter_content +'</div>';
+  } else {
+    gritter_item = '<div class="gritter-top"></div><div class="gritter-item gritter-css2">'+ gritter_content +'</div><div class="gritter-bottom"></div>';    
+  }
+  
+  /**
+  * Big fat Gritter object
+  * @constructor (not really since it's object literal)
+  */
+  var Gritter = {
+      
+    // Public - options to over-ride with $.gritter.options in "add"
+    position: '',
+    fade_in_speed: '',
+    fade_out_speed: '',
+    time: '',
+      
+    // Private - no touchy the private parts
+    _custom_timer: 0,
+    _item_count: 0,
+    _is_setup: 0,
+    _tpl_close: '<div class="gritter-close"></div>',
+    _tpl_item: '<div id="gritter-item-[[number]]" class="gritter-item-wrapper [[item_class]]" style="display:none">'+ gritter_item +'</div>',
+    _tpl_wrap: '<div id="gritter-notice-wrapper"></div>',
+      
+    /**
+    * Add a gritter notification to the screen
+    * @param {Object} params The object that contains all the options for drawing the notification
+    * @return {Integer} The specific numeric id to that gritter notification
+    */
+    add: function(params){
+      
+      // We might have some issues if we don't have a title or text!
+      if(!params.title || !params.text){
+        throw 'You need to fill out the first 2 params: "title" and "text"'; 
+      }
+      
+      // Check the options and set them once
+      if(!this._is_setup){
+        this._runSetup();
+      }
+      
+      // Basics
+      var user = params.title, 
+        text = params.text,
+        image = params.image || '',
+        sticky = params.sticky || false,
+        item_class = params.class_name || '',
+        position = $.gritter.options.position,
+        time_alive = params.time || '';
+      
+      this._verifyWrapper();
+      
+      this._item_count++;
+      var number = this._item_count, 
+        tmp = this._tpl_item;
+      
+      // Assign callbacks
+      $(['before_open', 'after_open', 'before_close', 'after_close']).each(function(i, val){
+        Gritter['_' + val + '_' + number] = ($.isFunction(params[val])) ? params[val] : function(){}
+      });
+
+      // Reset
+      this._custom_timer = 0;
+      
+      // A custom fade time set
+      if(time_alive){
+        this._custom_timer = time_alive;
+      }
+      
+      var image_str = (image != '') ? '<img src="' + image + '" class="gritter-image" />' : '',
+        class_name = (image != '') ? 'gritter-with-image' : 'gritter-without-image';
+      
+      // String replacements on the template
+      tmp = this._str_replace(
+        ['[[username]]', '[[text]]', '[[close]]', '[[image]]', '[[number]]', '[[class_name]]', '[[item_class]]'],
+        [user, text, this._tpl_close, image_str, this._item_count, class_name, item_class], tmp
+      );
+          
+      this['_before_open_' + number]();
+      $('#gritter-notice-wrapper').addClass(position).append(tmp);
+      
+      var item = $('#gritter-item-' + this._item_count);
+      
+      item.fadeIn(this.fade_in_speed, function(){
+        Gritter['_after_open_' + number]($(this));
+      });
+          
+      if(!sticky){
+        this._setFadeTimer(item, number);
+      }
+      
+      // Bind the hover/unhover states
+      $(item).bind('mouseenter mouseleave', function(event){
+        if(event.type == 'mouseenter'){
+          if(!sticky){ 
+            Gritter._restoreItemIfFading($(this), number);
+          }
+        }
+        else {
+          if(!sticky){
+            Gritter._setFadeTimer($(this), number);
+          }
+        }
+        Gritter._hoverState($(this), event.type);
+      });
+      
+      return number;
+      
+    },
+    
+    /**
+    * If we don't have any more gritter notifications, get rid of the wrapper using this check
+    * @private
+    * @param {Integer} unique_id The ID of the element that was just deleted, use it for a callback
+    * @param {Object} e The jQuery element that we're going to perform the remove() action on
+    * @param {Boolean} manual_close Did we close the gritter dialog with the (X) button
+        */
+    _countRemoveWrapper: function(unique_id, e, manual_close){
+        
+      // Remove it then run the callback function
+      e.remove();
+      this['_after_close_' + unique_id](e, manual_close);
+      
+      // Check if the wrapper is empty, if it is.. remove the wrapper
+      if($('.gritter-item-wrapper').length == 0){
+        $('#gritter-notice-wrapper').remove();
+      }
+    
+    },
+    
+    /**
+    * Fade out an element after it's been on the screen for x amount of time
+    * @private
+    * @param {Object} e The jQuery element to get rid of
+    * @param {Integer} unique_id The id of the element to remove
+    * @param {Object} params An optional list of params to set fade speeds etc.
+    * @param {Boolean} unbind_events Unbind the mouseenter/mouseleave events if they click (X)
+    */
+    _fade: function(e, unique_id, params, unbind_events){
+
+      var params = params || {},
+        fade = (typeof(params.fade) != 'undefined') ? params.fade : true;
+        fade_out_speed = params.speed || this.fade_out_speed,
+                manual_close = unbind_events;
+      
+      this['_before_close_' + unique_id](e, manual_close);
+      
+      // If this is true, then we are coming from clicking the (X)
+      if(unbind_events){
+        e.unbind('mouseenter mouseleave');
+      }
+      
+      // Fade it out or remove it
+      if(fade){
+        
+        e.fadeOut(fade_out_speed, function(){
+          e.animate({ height: 0 }, 300, function(){
+            Gritter._countRemoveWrapper(unique_id, e, manual_close);
+          })
+        })
+        
+      }
+      else {
+        
+        this._countRemoveWrapper(unique_id, e);
+        
+      }
+    
+    },
+    
+    /**
+    * Perform actions based on the type of bind (mouseenter, mouseleave) 
+    * @private
+    * @param {Object} e The jQuery element
+    * @param {String} type The type of action we're performing: mouseenter or mouseleave
+    */
+    _hoverState: function(e, type){
+      
+      // Change the border styles and add the (X) close button when you hover
+      if(type == 'mouseenter'){
+          
+        e.addClass('hover');
+        
+        // Show close button
+        e.find('.gritter-close').show();
+        
+        // Clicking (X) makes the perdy thing close
+        e.find('.gritter-close').click(function(){
+        
+          var unique_id = e.attr('id').split('-')[2];
+          Gritter.removeSpecific(unique_id, {}, e, true);
+          
+        });
+      
+      }
+      // Remove the border styles and hide (X) close button when you mouse out
+      else {
+        
+        e.removeClass('hover');
+        
+        // Hide close button
+        e.find('.gritter-close').hide();
+        
+      }
+        
+    },
+    
+    /**
+    * Remove a specific notification based on an ID
+    * @param {Integer} unique_id The ID used to delete a specific notification
+    * @param {Object} params A set of options passed in to determine how to get rid of it
+    * @param {Object} e The jQuery element that we're "fading" then removing
+    * @param {Boolean} unbind_events If we clicked on the (X) we set this to true to unbind mouseenter/mouseleave
+    */
+    removeSpecific: function(unique_id, params, e, unbind_events){
+      
+      if(!e){
+        var e = $('#gritter-item-' + unique_id);
+      }
+
+      // We set the fourth param to let the _fade function know to 
+      // unbind the "mouseleave" event.  Once you click (X) there's no going back!
+      this._fade(e, unique_id, params || {}, unbind_events);
+      
+    },
+    
+    /**
+    * If the item is fading out and we hover over it, restore it!
+    * @private
+    * @param {Object} e The HTML element to remove
+    * @param {Integer} unique_id The ID of the element
+    */
+    _restoreItemIfFading: function(e, unique_id){
+      
+      clearTimeout(this['_int_id_' + unique_id]);
+      e.stop().css({ opacity: '' });
+        
+    },
+    
+    /**
+    * Setup the global options - only once
+    * @private
+    */
+    _runSetup: function(){
+    
+      for(opt in $.gritter.options){
+        this[opt] = $.gritter.options[opt];
+      }
+      this._is_setup = 1;
+        
+    },
+    
+    /**
+    * Set the notification to fade out after a certain amount of time
+    * @private
+    * @param {Object} item The HTML element we're dealing with
+    * @param {Integer} unique_id The ID of the element
+    */
+    _setFadeTimer: function(e, unique_id){
+      
+      var timer_str = (this._custom_timer) ? this._custom_timer : this.time;
+      this['_int_id_' + unique_id] = setTimeout(function(){ 
+        Gritter._fade(e, unique_id); 
+      }, timer_str);
+    
+    },
+    
+    /**
+    * Bring everything to a halt
+    * @param {Object} params A list of callback functions to pass when all notifications are removed
+    */  
+    stop: function(params){
+      
+      // callbacks (if passed)
+      var before_close = ($.isFunction(params.before_close)) ? params.before_close : function(){};
+      var after_close = ($.isFunction(params.after_close)) ? params.after_close : function(){};
+      
+      var wrap = $('#gritter-notice-wrapper');
+      before_close(wrap);
+      wrap.fadeOut(function(){
+        $(this).remove();
+        after_close();
+      });
+    
+    },
+    
+    /**
+    * An extremely handy PHP function ported to JS, works well for templating
+    * @private
+    * @param {String/Array} search A list of things to search for
+    * @param {String/Array} replace A list of things to replace the searches with
+    * @return {String} sa The output
+    */  
+    _str_replace: function(search, replace, subject, count){
+    
+      var i = 0, j = 0, temp = '', repl = '', sl = 0, fl = 0,
+        f = [].concat(search),
+        r = [].concat(replace),
+        s = subject,
+        ra = r instanceof Array, sa = s instanceof Array;
+      s = [].concat(s);
+      
+      if(count){
+        this.window[count] = 0;
+      }
+    
+      for(i = 0, sl = s.length; i < sl; i++){
+        
+        if(s[i] === ''){
+          continue;
+        }
+        
+            for (j = 0, fl = f.length; j < fl; j++){
+          
+          temp = s[i] + '';
+          repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0];
+          s[i] = (temp).split(f[j]).join(repl);
+          
+          if(count && s[i] !== temp){
+            this.window[count] += (temp.length-s[i].length) / f[j].length;
+          }
+          
+        }
+      }
+      
+      return sa ? s : s[0];
+        
+    },
+    
+    /**
+    * A check to make sure we have something to wrap our notices with
+    * @private
+    */  
+    _verifyWrapper: function(){
+      
+      if($('#gritter-notice-wrapper').length == 0){
+        $('body').append(this._tpl_wrap);
+      }
+    
+    }
+      
+  }
+  
+})(jQuery);