How to implement a singleton per element?
<p><strong>Overview</strong></p>

<p>Here is my Message Object.  I only want one object allowed per element.  The element noted in the comments.  </p>

<p>As the user sees it, there should be only one message per element.  If the user keeps clicking a button for example I don't want to re-instantiate more messages.  Only one is needed. </p>

<p>One thing I could have done is disabled buttons until the message is finished being displayed...but that is just not the way I want to go.</p>

<p>The Effects.fade() function fades out the message after about 4 seconds.</p>

<p><strong>Question?</strong></p>

<p>How do I modify this so it only allows one instance of itself per element?</p>

<p><strong>The Object</strong></p>

<pre><code>/**
 *    Message
 */

var Message = function( element ) 
{
    // need only single instance per element..so a singleton pattern per element
    this.element = element;  // This is element where the message is sent
};

Message.prototype.messages = 
{ 
    name:       'Please enter a valid name',
    email:      'Please enter a valid email',
    pass:       'Please enter passoword, 6-40 characters',
    url:        'Please enter a valid url',
    title:      'Please enter a valid title',
    tweet:      'Please enter a valid tweet',
    empty:      'Please complete all fields',
    same:       'Please make emails equal',
    taken:      'Sorry, that email is taken',
    validate:   'Please contact &lt;a class="d" href="mailto:me@host.com"&gt;support&lt;/a&gt; to reset your password',
};

Message.prototype.display = function( type ) 
{
    Control.send( this.element, this.messages[ type ] );
    var EffectsObject = new Effects( this.element );
    EffectsObject.fade( 'down', 4000);
};
</code></pre>

<p><strong>Use of Object</strong></p>

<pre><code>this.message_object = new Message( this.response_element );
this.message_object.display( 'empty' );
</code></pre>
