title: Javascript library extended prototype function
body: <p>I am writing a javascript library. Here is the basic code:</p>
  
  <pre><code>(function(){
          var int,
              method,
              versrionInfo = {
                  release : "0.2.1",
                  date : "10/22/2013",
                  releaseNotes : "Jist has been modified to handle lists of elements."
              },
              Jist = function(s){
                  return new Jist.fn.init(s);
              };
          Jist.fn = Jist.prototype ={
              init : function(s){
                  if(!s){
                      return this;
                  }
                  else{
                      this.length = 1;
                      if (typeof s === "object"){
                          this[0] = s;
                      }
                      else if(typeof s === "string"){
                          var obj;
                          obj = document.querySelectorAll(s);
                          this[0] = obj;
                          this.elem = this[0];
                      }
                      return this;
                  }
              },
          }
          Jist.fn.init.prototype = Jist.fn;
          Jist.fn.init.prototype = {
              print : function(txt){
                  for(var i=0; i&lt;this.elem.length; i++) {
                      this.elem[i].innerHTML = txt;
                  }
              },
              click : function(callback){
                  for(var i=0; i&lt;this.elem.length; i++) {
                      this.elem[i].addEventListener("click",callback,false);
                  }
              },
              hide : function(){
                  for(var i=0; i&lt;elem.length; i++) {
                      elem[i].style.display = 'none';
                  }
              },
              show : function(){
                  for(var i=0; i&lt;elem.length; i++) {
                      elem[i].style.display = ''; 
                  }
              },
              fadeOut : function(ms) {
                  var elem = this.elem;
                  var opacity = 1,
                      interval = 50,
                      gap = interval / ms;
                  function func() { 
                      opacity -= gap;
                      for(var i=0; i&lt;elem.length; i++) {
                          elem[i].style.opacity = opacity;
                      }
                      if(opacity &lt;= 0) {
                          window.clearInterval(fading); 
                          for(var i=0; i&lt;elem.length; i++){
                              elem[i].style.display = 'none';
                          }
                      }
                  }
                  var fading = window.setInterval(func, interval);
              }
          };
          window.Jist = window.jist = window.Jis = window.jis = window.Jit = window.jit = window._ = Jist;
  })();
  </code></pre>
  
  <p>Here is what I have in my body section to test it out:</p>
  
  <pre><code>&lt;div id="fader"&gt;&lt;/div&gt;
  &lt;input type="button" id="inpt" value="click"&gt;&lt;/input&gt;
  &lt;script&gt;
  jist("#inpt").click(function(){
      jist("#fader").fadeOut(1000);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This works fine but I would like to be able to extend the functions like jQuery so I would be able to do this:</p>
  
  <pre><code>&lt;div id="fader"&gt;&lt;/div&gt;
  &lt;input type="button" id="inpt" value="click"&gt;&lt;/input&gt;
  &lt;script&gt;
  jist("#inpt").click(function(){
      jist("#fader").print("hi").fadeOut(1000);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>So that the text "Hi" appears in the div, and then the div fades out.</p>
  
  <p>Does anyone know how I could do this?</p>
  
  <p>Thank you so much!</p>