title: Extending bootstrap modal
body: <p>For a project of mine I would like to extend twitter bootstrap modal window capabilities.</p>
  
  <p>I would like my modal window to get the functionality of Java CardLayout.
  For those who don't know, the CardLayout allows a container (in our case, the modal window), to accept multiple card childeren (in our case, div's). Each child gets an index, and container initially displays the child with index '0'. The CardLayout interface contains function as "previous(), next(), first(), last()" wich change the displayed card according to their index.</p>
  
  <p>This is a template of the HTML that I would like to use to generate a "card modal" with 4 "Cards" :</p>
  
  <pre><code>&lt;a class="btn" data-toggle="modal" href="#myModal" &gt;Launch Modal&lt;/a&gt;
  
  &lt;div class="modal hide" id="myModal"&gt;
      &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
          &lt;h3&gt;Modal header&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;div class="modal-card" card-index="0"&gt;
              This is the initial state
          &lt;/div&gt;
          &lt;div class="modal-card" card-index="1"&gt;
              This is the Step 1
          &lt;/div&gt;
          &lt;div class="modal-card" card-index="2"&gt;
              This is the Step 2
          &lt;/div&gt;
          &lt;div class="modal-card" card-index="3"&gt;
              This is the final State
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a href="#" class="btn" card-change="previous"&gt;Previous&lt;/a&gt;
          &lt;a href="#" class="btn" card-change="next"&gt;Next&lt;/a&gt;
          &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Since I am quite new to JS, I would like as an exercise to try to make it as generic and reusable as possible.
  Ideal situation would be to have a card-modal.js file that I could toss in my project JS folder to be able to create one of those anytime I want.</p>
  
  <p>I am hesitating between two directions :
  - Extend the Modal class (using coffeescript "extends" keyword) since after all a CardModal "IS A" Modal.
  - Create a separate class that would only deal with the response to give to those previous/next buttons.</p>
  
  <p>Is there any difference about the initialization for those two options ? (What would the developer have to write to actually start the required objects)</p>
  
  <p>I am just looking for a "How would you do it answer" from a more experienced developer. So extra points awarded for actually showing "why is this solution better than this one".</p>