mercury-rails 0.6.0 → 0.7.0

data/app/views/mercury/modals/table.html

@@ -1,84 +1,90 @@
-<form id="mercury_table" class="mercury-form" style="width:700px">
+<form id="mercury_table" class="form-horizontal" style="width:700px">
 
-  <div class="mercury-display-pane-container">
-    <div class="mercury-display-pane">
+  <div class="form-inputs mercury-display-pane-container">
 
-      <div id="table_display">
-        <table border="1" cellspacing="0">
-          <tr>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-          </tr>
-          <tr>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-            <td>&nbsp;</td>
-          </tr>
-        </table>
+    <fieldset id="table_display">
+      <div class="control-group optional">
+        <div class="controls">
+          <table border="1" cellspacing="0">
+            <tr>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+            </tr>
+            <tr>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+              <td>&nbsp;</td>
+            </tr>
+          </table>
+        </div>
       </div>
+    </fieldset>
 
-      <div id="table_options">
-        <fieldset class="inputs">
-          <ol>
-            <li id="table_rows_input" class="select input optional">
-              <label for="table_rows">Rows</label>
-              <input type="button" class="action" value="Add Before" name="insertRowBefore"/>
-              <input type="button" class="action" value="Add After" name="insertRowAfter"/>
-              <input type="button" class="action" value="Remove" name="deleteRow"/>
-            </li>
-            <li id="table_columns_input" class="select input optional">
-              <label for="table_columns">Columns</label>
-              <input type="button" class="action" value="Add Before" name="insertColumnBefore"/>
-              <input type="button" class="action" value="Add After" name="insertColumnAfter"/>
-              <input type="button" class="action" value="Remove" name="deleteColumn"/>
-            </li>
-            <hr/>
-            <li id="table_row_adjust_input" class="select input optional">
-              <label for="table_row_adjust">Row Span</label>
-              <input type="button" class="action" value="+" name="increaseRowspan"/>
-              <input type="button" class="action" value="-" name="decreaseRowspan"/>
-            </li>
-            <li id="table_column_adjust_input" class="select input optional">
-              <label for="table_column_adjust">Column Span</label>
-              <input type="button" class="action" value="+" name="increaseColspan"/>
-              <input type="button" class="action" value="-" name="decreaseColspan"/>
-            </li>
-          </ol>
-        </fieldset>
+    <fieldset>
+      <div class="control-group buttons optional">
+        <label class="buttons optional control-label">Rows</label>
+        <div class="controls btn-group">
+          <button class="btn" data-action="addRowBefore">Add Before</button>
+          <button class="btn" data-action="addRowAfter">Add After</button>
+          <button class="btn" data-action="removeRow">Remove</button>
+        </div>
+      </div>
+      <div class="control-group buttons optional">
+        <label class="buttons optional control-label">Columns</label>
+        <div class="controls btn-group">
+          <button class="btn" data-action="addColumnBefore">Add Before</button>
+          <button class="btn" data-action="addColumnAfter">Add After</button>
+          <button class="btn" data-action="removeColumn">Remove</button>
+        </div>
+      </div>
+      <hr/>
+      <div class="control-group buttons optional">
+        <label class="buttons optional control-label">Row Span</label>
+        <div class="controls btn-group">
+          <button class="btn" data-action="increaseRowspan">+</button>
+          <button class="btn" data-action="decreaseRowspan">-</button>
+        </div>
+      </div>
+      <div class="control-group buttons optional">
+        <label class="buttons optional control-label">Column Span</label>
+        <div class="controls btn-group">
+          <button class="btn" data-action="increaseColspan">+</button>
+          <button class="btn" data-action="decreaseColspan">-</button>
+        </div>
+      </div>
+    </fieldset>
 
-        <fieldset class="inputs">
-          <legend><span>Options</span></legend>
-          <ol>
-            <li id="table_alignment_input" class="select input optional">
-              <label class="label" for="table_alignment">Alignment</label>
-              <select id="table_alignment" name="table[alignment]">
-                <option value="">None</option>
-                <option value="left">Left</option>
-                <option value="right">Right</option>
-              </select>
-            </li>
-            <li id="table_border_input" class="string input optional stringish">
-              <label class="label" for="table_border">Border</label>
-              <input id="table_border" name="table[border]" type="text" value="1"/>
-            </li>
-            <li id="table_spacing_input" class="string input optional stringish">
-              <label class="label" for="table_spacing">Spacing</label>
-              <input id="table_spacing" name="table[spacing]" type="text" value="0"/>
-            </li>
-          </ol>
-        </fieldset>
+    <fieldset>
+      <legend>Options</legend>
+      <div class="control-group select optional">
+        <label class="select optional control-label" for="table_alignment">Alignment</label>
+        <div class="controls">
+          <select class="select optional" id="table_alignment" name="table[alignment]">
+            <option value="">None</option>
+            <option value="right">Right</option>
+            <option value="left">Left</option>
+          </select>
+        </div>
+      </div>
+      <div class="control-group number optional">
+        <label class="number optional control-label" for="table_border">Border</label>
+        <div class="controls">
+          <input class="span1 number optional" id="table_border" name="table[border]" size="50" type="number" value="1">
+        </div>
+      </div>
+      <div class="control-group number optional">
+        <label class="number optional control-label" for="table_spacing">Spacing</label>
+        <div class="controls">
+          <input class="span1 number optional" id="table_spacing" name="table[spacing]" size="50" type="number" value="0">
+        </div>
       </div>
+    </fieldset>
 
-    </div>
   </div>
 
-  <div class="mercury-display-controls">
-    <fieldset class="buttons">
-      <ol>
-        <li class="commit button"><input class="submit" name="commit" type="submit" value="Insert Table" /></li>
-      </ol>
-    </fieldset>
+  <div class="form-actions mercury-display-controls">
+    <input class="btn btn-primary" name="commit" type="submit" value="Insert Table"/>
   </div>
 
-</form>
+</form>

data/app/views/mercury/snippets/example/options.html.erb

@@ -1,34 +1,15 @@
-<%= form_for 'options', { :html => { :class => 'mercury-form', :style => 'width:600px' } } do |f| %>
-
-  <div class="mercury-display-pane-container">
-    <div class="mercury-display-pane">
-      <fieldset class="inputs">
-        <ol>
-          <li class="string input optional stringish" id="options_first_name_input">
-            <label class="label" for="options_first_name">First Name</label>
-            <input id="options_first_name" name="options[first_name]" type="text" value="<%= @options[:first_name] %>"/>
-          </li>
-        </ol>
-      </fieldset>
-
-      <fieldset class="inputs">
-        <legend><span>Options</span></legend>
-        <ol>
-          <li class="string input optional stringish" id="options_favorite_beer_input">
-            <label class="label" for="options_favorite_beer">Favorite Beer</label>
-            <input id="options_favorite_beer" name="options[favorite_beer]" type="text" value="<%= @options[:favorite_beer] %>"/>
-          </li>
-        </ol>
-      </fieldset>
-    </div>
-  </div>
-
-  <div class="mercury-display-controls">
-    <fieldset class="buttons">
-      <ol>
-        <li class="commit button"><input class="submit" name="commit" type="submit" value="Insert Snippet"/></li>
-      </ol>
+<%= form_for 'options', {html: {class: 'form-horizontal', style: 'width:600px'}} do |f| %>
+  <div class="form-inputs">
+    <label for="options_first_name">First Name</label>
+    <input id="options_first_name" name="options[first_name]" type="text" value="<%= @options[:first_name] %>"/>
+    <fieldset>
+      <legend>Options</legend>
+      <label class="label" for="options_favorite_beer">Favorite Beer</label>
+      <input id="options_favorite_beer" name="options[favorite_beer]" type="text" value="<%= @options[:favorite_beer] %>"/>
     </fieldset>
   </div>
 
+  <div class="form-actions">
+    <input name="commit" type="submit" value="Insert Snippet"/>
+  </div>
 <% end %>

data/features/loading/loading.feature

@@ -21,5 +21,5 @@ Feature:
   # Latest selenium webdriver seems to consider the lightview hidden
   @use_hidden_elements
   Scenario: A user can expect to see the status bar
-    Then I should see "Mercury Editor v0.6.0" within the statusbar
+    Then I should see "Mercury Editor v0.7.0" within the statusbar
 

data/features/regions/full/inserting_links.feature

@@ -11,7 +11,7 @@ Feature:
   # Scenario: A user can expect all this!
 
 
- Scenario: A user can insert and edit a link to an external site
+  Scenario: A user can insert and edit a link to an external site
     Given the content of the full region is simple content
     And I make a selection
 
@@ -32,7 +32,7 @@ Feature:
     Then the contents of the full region should be "this is <a href='http://cnn.com'>simple</a> <b>content</b>"
 
 
- Scenario: A user can insert and edit a link with a target set
+  Scenario: A user can insert and edit a link with a target set
     Given the content of the full region is simple content
     And I make a selection
 
@@ -48,7 +48,7 @@ Feature:
     Then the contents of the full region should be "this is <a target='_top' href='http://google.com'>simple</a> <b>content</b>"
 
 
- Scenario: A user can insert a link to an external site and open it in a popup
+  Scenario: A user can insert a link to an external site and open it in a popup
     Given the content of the full region is simple content
     And I make a selection
 
@@ -65,7 +65,7 @@ Feature:
     And the "Popup Height" field should contain "200"
 
 
- Scenario: A user can insert a bookmark and then link to it
+  Scenario: A user can insert a bookmark and then link to it
     Given the content of the full region is simple content
     And I make a selection
 

data/features/regions/full/inserting_media.feature

@@ -69,8 +69,8 @@ Feature:
     And I make a selection
 
     When I click on the "Insert Media" button
-    And choose "YouTube Share URL"
-    And fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eII"
+    And choose "YouTube URL"
+    And fill in "YouTube URL" with "http://youtu.be/Pny4hoN8eII"
     And fill in "Width" with "400"
     And fill in "Height" with "200"
     And press "Insert Media"
@@ -80,7 +80,7 @@ Feature:
     And click on the "Insert Media" button
     Then the "media_youtube_url" field should contain "http://youtu.be/Pny4hoN8eII"
 
-    When I fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eI"
+    When I fill in "YouTube URL" with "http://youtu.be/Pny4hoN8eI"
     And fill in "Width" with "500"
     And fill in "Height" with "300"
     And press "Insert Media"

data/features/step_definitions/mercury_steps.rb

@@ -176,18 +176,18 @@ end
 #------------------------------------------------------------------------------
 # in the modal window
 When /^(?:|I )(?:add|insert) a (row|column) (before|after)(?: it)?$/ do |row_or_column, before_or_after|
-  name = "insert_#{row_or_column}_#{before_or_after}".camelcase(:lower)
-  step(%Q{I click on ".mercury-modal-content input[name=#{name}]"})
+  name = "add_#{row_or_column}_#{before_or_after}".camelcase(:lower)
+  step(%Q{I click on ".mercury-modal-content button[data-action='#{name}']"})
 end
 
 When /^(?:|I )delete the(?: current)? (row|column)$/ do |row_or_column|
-  name = "delete_#{row_or_column}".camelcase(:lower)
-  step(%Q{I click on ".mercury-modal-content input[name=#{name}]"})
+  name = "remove_#{row_or_column}".camelcase(:lower)
+  step(%Q{I click on ".mercury-modal-content button[data-action='#{name}']"})
 end
 
 When /^(?:|I )(increase|decrease) the (rowspan|colspan)$/ do |increase_or_decrease, rowspan_or_colspan|
   name = "#{increase_or_decrease}_#{rowspan_or_colspan}".camelcase(:lower)
-  step(%Q{I click on ".mercury-modal-content input[name=#{name}]"})
+  step(%Q{I click on ".mercury-modal-content button[data-action=#{name}]"})
 end
 
 Then /^the selected cell should be (.*?)$/ do |locator|

data/features/support/env.rb

@@ -6,7 +6,7 @@
 
 ENV["RAILS_ROOT"] = File.expand_path('../../../spec/dummy', __FILE__)
 require 'cucumber/rails'
-# require 'capybara/firebug'
+require 'capybara/firebug'
 require 'aruba/cucumber'
 
 # You can enable firebug in your tests by tagging them @firebug.

data/lib/mercury/version.rb

@@ -1,3 +1,3 @@
 module Mercury
-  VERSION = '0.6.0'
+  VERSION = '0.7.0'
 end

data/spec/javascripts/mercury/lightview_spec.js.coffee

@@ -11,8 +11,7 @@ describe "Mercury.lightview", ->
 
   afterEach ->
     Mercury.config.localization.enabled = false
-    Mercury.lightview.initialized = false
-    Mercury.lightview.visible = false
+    Mercury.lightview.instance = null
     $(window).unbind('mercury:refresh')
     $(window).unbind('mercury:resize')
     $(document).unbind('keydown')
@@ -20,122 +19,127 @@ describe "Mercury.lightview", ->
   describe "singleton method", ->
 
     beforeEach ->
-      @showSpy = spyOn(Mercury.lightview, 'show').andCallFake(=>)
+      @showSpy = spyOn(Mercury.Lightview.prototype, 'show').andCallFake(=>)
 
     it "calls show", ->
       Mercury.lightview('/foo')
       expect(@showSpy.callCount).toEqual(1)
 
-    it "returns the function object", ->
+    it "returns an instance", ->
       ret = Mercury.lightview('/foo')
-      expect(ret).toEqual(Mercury.lightview)
+      expect(ret).toEqual(Mercury.lightview.instance)
+      expect(ret).toEqual(new Mercury.Lightview('/foo'))
 
 
   describe "#show", ->
 
     beforeEach ->
-      @initializeSpy = spyOn(Mercury.lightview, 'initialize').andCallFake(=>)
-      @updateSpy = spyOn(Mercury.lightview, 'update').andCallFake(=>)
-      @appearSpy = spyOn(Mercury.lightview, 'appear').andCallFake(=>)
+      @initializeSpy = spyOn(Mercury.Lightview.prototype, 'initializeLightview').andCallFake(=>)
+      @updateSpy = spyOn(Mercury.Lightview.prototype, 'update').andCallFake(=>)
+      @appearSpy = spyOn(Mercury.Lightview.prototype, 'appear').andCallFake(=>)
 
     it "triggers the focus:window event", ->
       spy = spyOn(Mercury, 'trigger').andCallFake(=>)
-      Mercury.lightview.show()
+      new Mercury.Lightview().show()
       expect(spy.callCount).toEqual(1)
       expect(spy.argsForCall[0]).toEqual(['focus:window'])
 
     it "calls initialize", ->
-      Mercury.lightview.show()
+      new Mercury.Lightview().show()
       expect(@initializeSpy.callCount).toEqual(1)
 
     describe "if already visible", ->
 
       it "calls update", ->
-        Mercury.lightview.visible = true
-        Mercury.lightview.show()
+        lightview = new Mercury.Lightview()
+        lightview.visible = true
+        lightview.show()
         expect(@updateSpy.callCount).toEqual(1)
 
     describe "if not visible", ->
 
       it "calls appear", ->
-        Mercury.lightview.show()
+        lightview = new Mercury.Lightview()
+        lightview.visible = false
+        lightview.show()
         expect(@appearSpy.callCount).toEqual(1)
 
 
-  describe "#initialize", ->
+  describe "#initializeLightview", ->
 
     beforeEach ->
-      @buildSpy = spyOn(Mercury.lightview, 'build').andCallFake(=>)
-      @bindEventsSpy = spyOn(Mercury.lightview, 'bindEvents').andCallFake(=>)
+      @buildSpy = spyOn(Mercury.Lightview.prototype, 'build').andCallFake(=>)
+      @bindEventsSpy = spyOn(Mercury.Lightview.prototype, 'bindEvents').andCallFake(=>)
+      @lightview = new Mercury.Lightview()
 
     it "calls build", ->
-      Mercury.lightview.initialize()
+      @lightview.initializeLightview()
       expect(@buildSpy.callCount).toEqual(1)
 
     it "calls bindEvents", ->
-      Mercury.lightview.initialize()
+      @lightview.initializeLightview()
       expect(@bindEventsSpy.callCount).toEqual(1)
 
     it "does nothing if already initialized", ->
-      Mercury.lightview.initialized = true
-      Mercury.lightview.initialize()
+      @lightview.initialized = true
+      @lightview.initializeLightview()
       expect(@buildSpy.callCount).toEqual(0)
 
     it "sets initialized to true", ->
-      Mercury.lightview.initialize()
-      expect(Mercury.lightview.initialized).toEqual(true)
+      @lightview.initializeLightview()
+      expect(@lightview.initialized).toEqual(true)
 
 
   describe "#build", ->
 
     beforeEach ->
-      Mercury.lightview.options = {appendTo: $('#test')}
+      @lightview = new Mercury.Lightview('', {appendTo: $('#test')})
 
     it "builds an element", ->
-      Mercury.lightview.build()
+      @lightview.build()
       expect($('#test .mercury-lightview').length).toEqual(1)
 
     it "builds an overlay element", ->
-      Mercury.lightview.build()
+      @lightview.build()
       expect($('#test .mercury-lightview-overlay').length).toEqual(1)
 
     it "creates a titleElement", ->
-      Mercury.lightview.build()
+      @lightview.build()
       expect($('#test .mercury-lightview-title').length).toEqual(1)
       expect($('#test .mercury-lightview-title').html()).toEqual("<span><\/span>")
-      expect(Mercury.lightview.titleElement).toBeDefined()
+      expect(@lightview.titleElement).toBeDefined()
 
     it "creates a contentElement", ->
-      Mercury.lightview.build()
+      @lightview.build()
       expect($('#test .mercury-lightview-content').length).toEqual(1)
-      expect(Mercury.lightview.contentElement).toBeDefined()
+      expect(@lightview.contentElement).toBeDefined()
 
     it "appends to any element", ->
-      Mercury.lightview.options = {appendTo: $('#lightview_container')}
-      Mercury.lightview.build()
+      @lightview.options = {appendTo: $('#lightview_container')}
+      @lightview.build()
       expect($('#lightview_container .mercury-lightview').length).toEqual(1)
       expect($('#lightview_container .mercury-lightview-overlay').length).toEqual(1)
 
     it "creates a close button if asked to in the options", ->
-      Mercury.lightview.options.closeButton = true
-      Mercury.lightview.build()
+      @lightview.options.closeButton = true
+      @lightview.build()
       expect($('#test .mercury-lightview-close').length).toEqual(1)
 
 
   describe "observed events", ->
 
     beforeEach ->
-      spyOn(Mercury.lightview, 'appear').andCallFake(=>)
+      spyOn(Mercury.Lightview.prototype, 'appear').andCallFake(=>)
 
     describe "without a close button", ->
 
       beforeEach ->
-        Mercury.lightview('/foo', {appendTo: $('#test')})
+        @lightview = Mercury.lightview('/foo', {appendTo: $('#test')})
 
       describe "custom event: refresh", ->
 
         it "calls resize telling it stay visible", ->
-          spy = spyOn(Mercury.lightview, 'resize').andCallFake(=>)
+          spy = spyOn(@lightview, 'resize').andCallFake(=>)
           Mercury.trigger('refresh')
           expect(spy.callCount).toEqual(1)
           expect(spy.argsForCall[0]).toEqual([true])
@@ -143,46 +147,46 @@ describe "Mercury.lightview", ->
       describe "custom event: resize", ->
 
         beforeEach ->
-          Mercury.lightview.visible = true
+          @lightview.visible = true
 
         it "calls position", ->
-          spy = spyOn(Mercury.lightview, 'position').andCallFake(=>)
+          spy = spyOn(@lightview, 'position').andCallFake(=>)
           Mercury.trigger('resize')
           expect(spy.callCount).toEqual(1)
 
       describe "clicking on the overlay", ->
 
         it "calls hide", ->
-          spy = spyOn(Mercury.lightview, 'hide').andCallFake(=>)
+          spy = spyOn(@lightview, 'hide').andCallFake(=>)
           jasmine.simulate.click($('.mercury-lightview-overlay').get(0))
           expect(spy.callCount).toEqual(1)
 
       describe "pressing esc on document", ->
 
         beforeEach ->
-          Mercury.lightview.visible = true
+          @lightview.visible = true
 
         it "calls hide", ->
-          spy = spyOn(Mercury.lightview, 'hide').andCallFake(=>)
+          spy = spyOn(@lightview, 'hide').andCallFake(=>)
           jasmine.simulate.keydown(document, {keyCode: 27})
           expect(spy.callCount).toEqual(1)
 
     describe "with a close button", ->
 
       beforeEach ->
-        Mercury.lightview('/foo', {appendTo: $('#test'), closeButton: true})
+        @lightview = Mercury.lightview('/foo', {appendTo: $('#test'), closeButton: true})
 
       describe "clicking on the close button", ->
 
         it "calls hide", ->
-          spy = spyOn(Mercury.lightview, 'hide').andCallFake(=>)
+          spy = spyOn(@lightview, 'hide').andCallFake(=>)
           jasmine.simulate.click($('.mercury-lightview-close').get(0))
           expect(spy.callCount).toEqual(1)
 
       describe "clicking on the overlay", ->
 
         it "doesn't call hide", ->
-          spy = spyOn(Mercury.lightview, 'hide').andCallFake(=>)
+          spy = spyOn(@lightview, 'hide').andCallFake(=>)
           jasmine.simulate.click($('.mercury-lightview-overlay').get(0))
           expect(spy.callCount).toEqual(0)
 
@@ -190,8 +194,8 @@ describe "Mercury.lightview", ->
 
         it "sets a success that will load the contents of the response", ->
           options = {}
-          spy = spyOn(Mercury.lightview, 'loadContent').andCallFake(=>)
-          Mercury.lightview.element.trigger('ajax:beforeSend', [null, options])
+          spy = spyOn(@lightview, 'loadContent').andCallFake(=>)
+          @lightview.element.trigger('ajax:beforeSend', [null, options])
           expect(options.success).toBeDefined()
           options.success('new content')
           expect(spy.callCount).toEqual(1)
@@ -201,74 +205,76 @@ describe "Mercury.lightview", ->
   describe "#appear", ->
 
     beforeEach ->
-      Mercury.lightview.visible = true
-      spyOn(Mercury.lightview, 'update').andCallFake(=>)
-      @loadSpy = spyOn(Mercury.lightview, 'load').andCallFake(=>)
-      @positionSpy = spyOn(Mercury.lightview, 'position').andCallFake(=>)
-      Mercury.lightview('/blank.html', {appendTo: $('#test')})
+      @lightview = new Mercury.Lightview('/blank.html', {appendTo: $('#test')})
+      @lightview.visible = true
+      spyOn(@lightview, 'update').andCallFake(=>)
+      @loadSpy = spyOn(@lightview, 'load').andCallFake(=>)
+      @positionSpy = spyOn(@lightview, 'position').andCallFake(=>)
+      @lightview.show()
 
     it "calls position", ->
-      Mercury.lightview.appear()
+      @lightview.appear()
       expect(@positionSpy.callCount).toEqual(1)
 
     it "shows the overlay", ->
       expect($('.mercury-lightview-overlay').css('display')).toEqual('none')
-      Mercury.lightview.appear()
+      @lightview.appear()
       expect($('.mercury-lightview-overlay').css('display')).toEqual('block')
 
     it "animates the overlay to full opacity", ->
       expect($('.mercury-lightview-overlay').css('opacity')).toEqual('0')
-      Mercury.lightview.appear()
+      @lightview.appear()
       expect($('.mercury-lightview-overlay').css('opacity')).toEqual('1')
 
     it "calls setTitle", ->
-      spy = spyOn(Mercury.lightview, 'setTitle').andCallFake(=>)
-      Mercury.lightview.appear()
+      spy = spyOn(@lightview, 'setTitle').andCallFake(=>)
+      @lightview.appear()
       expect(spy.callCount).toEqual(1)
 
     it "shows the element", ->
       expect($('.mercury-lightview').css('display')).toEqual('none')
-      Mercury.lightview.appear()
+      @lightview.appear()
       expect($('.mercury-lightview').css('display')).toEqual('block')
 
     it "animates the element opacity", ->
       expect($('.mercury-lightview').css('opacity')).toEqual('0')
-      Mercury.lightview.appear()
+      @lightview.appear()
       expect($('.mercury-lightview').css('opacity')).toEqual('1')
 
     it "sets visible to true", ->
-      Mercury.lightview.visible = false
-      Mercury.lightview.appear()
-      expect(Mercury.lightview.visible).toEqual(true)
+      @lightview.visible = false
+      @lightview.appear()
+      expect(@lightview.visible).toEqual(true)
 
     it "calls load", ->
-      Mercury.lightview.appear()
+      @lightview.appear()
       expect(@loadSpy.callCount).toEqual(1)
 
 
   describe "#resize", ->
 
     beforeEach ->
-      spyOn(Mercury.lightview, 'appear').andCallFake(=>)
-      Mercury.lightview('/blank.html', {appendTo: $('#test')})
-      Mercury.lightview.contentPane = $()
+      @lightview = new Mercury.Lightview('/blank.html', {appendTo: $('#test')})
+      spyOn(@lightview, 'appear').andCallFake(=>)
+      @lightview.show()
+      @lightview.contentPane = $()
 
     it "will keep the content element visible if asked to do so", ->
       $('.mercury-lightview-content').css('visibility', 'visible')
-      Mercury.lightview.resize(true)
+      @lightview.resize(true)
       expect($('.mercury-lightview-content').css('visibility')).toEqual('visible')
 
     it "resizes the element and adjusts it's position when empty", ->
       $('.mercury-lightview').css({display: 'block', visibility: 'visible', top: 0})
-      Mercury.lightview.resize()
+      @lightview.resize()
       expect($('.mercury-lightview').width()).toEqual(300)
       expect($('.mercury-lightview').offset()).toEqual({top: 35, left: 350})
       expect($('.mercury-lightview').height()).toEqual(150)
 
     it "resizes the element and adjusts it's position when it has content", ->
-      Mercury.lightview.loadContent('<div style="width:600px;height:400px"></div>')
+      @lightview.loadContent('<div style="width:600px;height:400px"></div>')
       $('.mercury-lightview').css({display: 'block', visibility: 'visible', top: 0})
-      Mercury.lightview.resize()
+      @lightview.resize()
       expect($('.mercury-lightview').width()).toEqual(300)
       expect($('.mercury-lightview').offset()).toEqual({top: 20, left: 350})
       expect($('.mercury-lightview').height()).toEqual(180)
@@ -277,7 +283,7 @@ describe "Mercury.lightview", ->
   describe "#position", ->
 
     beforeEach ->
-      spyOn(Mercury.lightview, 'appear').andCallFake(=>)
+      spyOn(Mercury.Lightview.prototype, 'appear').andCallFake(=>)
 
     # todo: test this
     it "positions the element", ->
@@ -286,10 +292,11 @@ describe "Mercury.lightview", ->
   describe "#update", ->
 
     beforeEach ->
-      @resetSpy = spyOn(Mercury.lightview, 'reset').andCallFake(=>)
-      @resizeSpy = spyOn(Mercury.lightview, 'resize').andCallFake(=>)
-      @loadSpy = spyOn(Mercury.lightview, 'load').andCallFake(=>)
-      Mercury.lightview.update()
+      @lightview = new Mercury.Lightview()
+      @resetSpy = spyOn(@lightview, 'reset').andCallFake(=>)
+      @resizeSpy = spyOn(@lightview, 'resize').andCallFake(=>)
+      @loadSpy = spyOn(@lightview, 'load').andCallFake(=>)
+      @lightview.update()
 
     it "calls reset", ->
       expect(@resetSpy.callCount).toEqual(1)
@@ -304,23 +311,23 @@ describe "Mercury.lightview", ->
   describe "#load", ->
 
     beforeEach ->
-      spyOn(Mercury.lightview, 'appear').andCallFake(=>)
+      spyOn(Mercury.Lightview.prototype, 'appear').andCallFake(=>)
       @ajaxSpy = spyOn($, 'ajax')
-      Mercury.lightview('/blank.html', {appendTo: $('#test')})
+      @lightview = Mercury.lightview('/blank.html', {appendTo: $('#test')})
 
     it "does nothing if there's no url", ->
-      Mercury.lightview.url = null
+      @lightview.url = null
       $('.mercury-lightview').removeClass('loading')
-      Mercury.lightview.load()
+      @lightview.load()
       expect($('.mercury-lightview').hasClass('loading')).toEqual(false)
 
     it "sets the loading class on the element", ->
-      Mercury.lightview.load()
+      @lightview.load()
       expect($('.mercury-lightview').hasClass('loading')).toEqual(true)
 
     it "calls setTitle", ->
-      spy = spyOn(Mercury.lightview, 'setTitle').andCallFake(=>)
-      Mercury.lightview.load()
+      spy = spyOn(@lightview, 'setTitle').andCallFake(=>)
+      @lightview.load()
       expect(spy.callCount).toEqual(1)
 
     describe "on a preloaded view", ->
@@ -333,8 +340,8 @@ describe "Mercury.lightview", ->
         Mercury.preloadedViews = {}
 
       it "calls loadContent with the content in the preloaded view", ->
-        spy = spyOn(Mercury.lightview, 'loadContent').andCallFake(=>)
-        Mercury.lightview.load()
+        spy = spyOn(@lightview, 'loadContent').andCallFake(=>)
+        @lightview.load()
         expect(@setTimeoutSpy.callCount).toEqual(1)
         expect(spy.callCount).toEqual(1)
 
@@ -343,7 +350,7 @@ describe "Mercury.lightview", ->
       it "makes an ajax request", ->
         @ajaxSpy.andCallFake(=>)
         spyOn(Mercury, 'ajaxHeaders').andCallFake(=> {'X-CSRFToken': 'f00'})
-        Mercury.lightview.load()
+        @lightview.load()
         expect(@ajaxSpy.callCount).toEqual(1)
         expect(@ajaxSpy.argsForCall[0][1]['headers']).toEqual({'X-CSRFToken': 'f00'})
 
@@ -353,8 +360,8 @@ describe "Mercury.lightview", ->
           @ajaxSpy.andCallFake((url, options) => options.success('return value'))
 
         it "calls loadContent and passes the returned data", ->
-          spy = spyOn(Mercury.lightview, 'loadContent').andCallFake(=>)
-          Mercury.lightview.load()
+          spy = spyOn(@lightview, 'loadContent').andCallFake(=>)
+          @lightview.load()
           expect(spy.callCount).toEqual(1)
           expect(spy.argsForCall[0]).toEqual(['return value'])
 
@@ -365,14 +372,14 @@ describe "Mercury.lightview", ->
 
         it "calls hide", ->
           spyOn(window, 'alert').andCallFake(=>)
-          spy = spyOn(Mercury.lightview, 'hide').andCallFake(=>)
-          Mercury.lightview.load()
+          spy = spyOn(@lightview, 'hide').andCallFake(=>)
+          @lightview.load()
           expect(spy.callCount).toEqual(1)
 
         it "alerts an error message", ->
-          spyOn(Mercury.lightview, 'hide').andCallFake(=>)
+          spyOn(@lightview, 'hide').andCallFake(=>)
           spy = spyOn(window, 'alert').andCallFake(=>)
-          Mercury.lightview.load()
+          @lightview.load()
           expect(spy.callCount).toEqual(1)
           expect(spy.argsForCall[0]).toEqual(['Mercury was unable to load /blank.html for the lightview.'])
 
@@ -380,86 +387,86 @@ describe "Mercury.lightview", ->
   describe "#loadContent", ->
 
     beforeEach ->
-      spyOn(Mercury.lightview, 'appear').andCallFake(=>)
-      @resizeSpy = spyOn(Mercury.lightview, 'resize').andCallFake(=>)
-      Mercury.lightview('/blank.html', {appendTo: $('#test'), title: 'title'})
+      spyOn(Mercury.Lightview.prototype, 'appear').andCallFake(=>)
+      @resizeSpy = spyOn(Mercury.Lightview.prototype, 'resize').andCallFake(=>)
+      @lightview = Mercury.lightview('/blank.html', {appendTo: $('#test'), title: 'title'})
 
     it "accepts options and sets them to the instance options", ->
-      Mercury.lightview.loadContent('content', {title: 'title'})
-      expect(Mercury.lightview.options).toEqual({title: 'title'})
+      @lightview.loadContent('content', {title: 'title'})
+      expect(@lightview.options).toEqual({title: 'title'})
 
-    it "calls initialize", ->
-      spy = spyOn(Mercury.lightview, 'initialize').andCallFake(=>)
-      Mercury.lightview.loadContent('content')
+    it "calls initializeLightview", ->
+      spy = spyOn(@lightview, 'initializeLightview').andCallFake(=>)
+      @lightview.loadContent('content')
       expect(spy.callCount).toEqual(1)
 
     it "calls setTitle", ->
-      spy = spyOn(Mercury.lightview, 'setTitle').andCallFake(=>)
-      Mercury.lightview.loadContent('content')
+      spy = spyOn(@lightview, 'setTitle').andCallFake(=>)
+      @lightview.loadContent('content')
       expect(spy.callCount).toEqual(1)
 
     it "sets loaded to true", ->
-      Mercury.lightview.loaded = false
-      Mercury.lightview.loadContent('content')
-      expect(Mercury.lightview.loaded).toEqual(true)
+      @lightview.loaded = false
+      @lightview.loadContent('content')
+      expect(@lightview.loaded).toEqual(true)
 
     it "removes the loading class", ->
       $('.mercury-lightview').addClass('loading')
-      Mercury.lightview.loadContent('content')
+      @lightview.loadContent('content')
       expect($('.mercury-lightview').hasClass('loading')).toEqual(false)
 
     it "sets the content elements html to whatever was passed", ->
-      Mercury.lightview.loadContent('<span>content</span>')
+      @lightview.loadContent('<span>content</span>')
       expect($('.mercury-lightview-content').html()).toEqual('<span>content</span>')
 
     it "hides the contentElement", ->
       $('.mercury-lightview-content').css('display', 'block')
-      Mercury.lightview.loadContent('content')
+      @lightview.loadContent('content')
       expect($('.mercury-lightview-content').css('display')).toEqual('none')
       expect($('.mercury-lightview-content').css('visibility')).toEqual('hidden')
 
     it "calls an afterLoad callback (if provided in options)", ->
       callCount = 0
-      Mercury.lightview.loadContent('content', {afterLoad: => callCount += 1})
+      @lightview.loadContent('content', {afterLoad: => callCount += 1})
       expect(callCount).toEqual(1)
 
     it "calls a handler method if one is set in lightviewHandlers", ->
       callCount = 0
       Mercury.lightviewHandlers['foo'] = => callCount += 1
-      Mercury.lightview.loadContent('content', {handler: 'foo'})
+      @lightview.loadContent('content', {handler: 'foo'})
       expect(callCount).toEqual(1)
 
     it "translates the content if configured", ->
       Mercury.config.localization.enabled = true
-      Mercury.lightview.loadContent('<span>foo</span>')
+      @lightview.loadContent('<span>foo</span>')
       expect($('.mercury-lightview-content').html()).toEqual('<span>Bork!</span>')
 
     it "calls resize", ->
-      Mercury.lightview.loadContent('content')
+      @lightview.loadContent('content')
       expect(@resizeSpy.callCount).toEqual(1)
 
 
   describe "#setTitle", ->
 
     beforeEach ->
-      spyOn(Mercury.lightview, 'appear').andCallFake(=>)
-      Mercury.lightview('/blank.html', {appendTo: $('#test'), title: 'title'})
+      spyOn(Mercury.Lightview.prototype, 'appear').andCallFake(=>)
+      @lightview = Mercury.lightview('/blank.html', {appendTo: $('#test'), title: 'title'})
 
     it "sets the the title contents to what was provided in the options", ->
-      Mercury.lightview.options = {title: 'new title'}
-      Mercury.lightview.setTitle()
+      @lightview.options = {title: 'new title'}
+      @lightview.setTitle()
       expect($('.mercury-lightview-title span').html()).toEqual('new title')
 
 
   describe "#reset", ->
 
     beforeEach ->
-      spyOn(Mercury.lightview, 'appear').andCallFake(=>)
-      Mercury.lightview('/blank.html', {appendTo: $('#test'), title: 'title'})
+      spyOn(Mercury.Lightview.prototype, 'appear').andCallFake(=>)
+      @lightview = Mercury.lightview('/blank.html', {appendTo: $('#test'), title: 'title'})
 
     it "clears the title and content elements", ->
       $('.mercury-lightview-content').html('content')
-      Mercury.lightview.reset()
+      @lightview.reset()
       expect($('.mercury-lightview-content').html()).toEqual('')
       expect($('.mercury-lightview-title span').html()).toEqual('')
 
@@ -467,31 +474,31 @@ describe "Mercury.lightview", ->
   describe "#hide", ->
 
     beforeEach ->
-      spyOn(Mercury.lightview, 'appear').andCallFake(=>)
-      Mercury.lightview('/blank.html', {appendTo: $('#test')})
+      spyOn(Mercury.Lightview.prototype, 'appear').andCallFake(=>)
+      @lightview = Mercury.lightview('/blank.html', {appendTo: $('#test')})
 
     it "triggers the focus:frame event", ->
       spy = spyOn(Mercury, 'trigger').andCallFake(=>)
-      Mercury.lightview.hide()
+      @lightview.hide()
       expect(spy.callCount).toEqual(1)
       expect(spy.argsForCall[0]).toEqual(['focus:frame'])
 
     it "hides the element", ->
-      Mercury.lightview.element.css('display:block')
-      Mercury.lightview.hide()
+      @lightview.element.css('display:block')
+      @lightview.hide()
       expect($('.mercury-lightview').css('display')).toEqual('none')
 
     it "hides the overlay element", ->
-      Mercury.lightview.overlay.css('display:block')
-      Mercury.lightview.hide()
+      @lightview.overlay.css('display:block')
+      @lightview.hide()
       expect($('.mercury-lightview-overlay').css('display')).toEqual('none')
 
     it "calls reset", ->
-      spy = spyOn(Mercury.lightview, 'reset').andCallFake(=>)
-      Mercury.lightview.hide()
+      spy = spyOn(@lightview, 'reset').andCallFake(=>)
+      @lightview.hide()
       expect(spy.callCount).toEqual(1)
 
     it "sets visible to false", ->
-      Mercury.lightview.visible = true
-      Mercury.lightview.hide()
-      expect(Mercury.lightview.visible).toEqual(false)
+      @lightview.visible = true
+      @lightview.hide()
+      expect(@lightview.visible).toEqual(false)