kiteditor 1.0.11 → 1.0.12

data/spec/javascripts/fixtures/mercury/modals/insertmedia.html

@@ -0,0 +1,87 @@
+<form>
+
+  <div class="control-group url optional">
+    <label class="url optional control-label" for="media_image_url">
+      <input name="media_type" type="radio" value="image_url" checked="checked"/>URL
+    </label>
+    <div class="controls">
+      <input class="string url optional" id="media_image_url" name="media[image_url]" size="50" type="text">
+    </div>
+  </div>
+
+  <div class="control-group url optional">
+    <label class="url optional control-label" for="media_youtube_url">
+      <input name="media_type" type="radio" value="youtube_url"/>Youtube Share URL
+    </label>
+    <div class="controls">
+      <input class="string url optional" id="media_youtube_url" name="media[youtube_url]" size="50" type="text" placeholder="http://youtu.be/Pny4hoN8eII">
+    </div>
+  </div>
+  <div class="control-group url optional">
+    <label class="url optional control-label" for="media_vimeo_url">
+      <input name="media_type" type="radio" value="vimeo_url"/>Vimeo URL
+    </label>
+    <div class="controls">
+      <input class="string url optional" id="media_vimeo_url" name="media[vimeo_url]" size="50" type="text" placeholder="http://vimeo.com/25708134">
+    </div>
+  </div>
+
+  <div class="media-options" id="image_url_options">
+    <div class="control-group select optional">
+      <label class="select optional control-label" for="media_image_alignment">Alignment</label>
+      <div class="controls">
+        <select class="select optional" id="media_image_alignment" name="media[image_alignment]">
+          <option value="">None</option>
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+          <option value="top">Top</option>
+          <option value="middle">Middle</option>
+          <option value="bottom">Bottom</option>
+          <option value="absmiddle">Absolute Middle</option>
+          <option value="absbottom">Absolute Bottom</option>
+        </select>
+      </div>
+      <label class="select optional control-label" for="media_image_float">Float</label>
+      <div class="controls">
+        <select class="select optional" id="media_image_float" name="media[image_float]">
+          <option value="">None</option>
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+          <option value="none">None</option>
+          <option value="inherit">Inherit</option>
+        </select>
+      </div>
+    </div>
+  </div>
+  <div class="media-options" id="youtube_url_options" style="display:none">
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="media_youtube_width">Width</label>
+      <div class="controls">
+        <input class="number optional" id="media_youtube_width" name="media[youtube_width]" size="50" type="number" value="560">
+      </div>
+    </div>
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="media_youtube_height">Height</label>
+      <div class="controls">
+        <input class="number optional" id="media_youtube_height" name="media[youtube_height]" size="50" type="number" value="349">
+      </div>
+    </div>
+  </div>
+  <div class="media-options" id="vimeo_url_options" style="display:none">
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="media_vimeo_width">Width</label>
+      <div class="controls">
+        <input class="number optional" id="media_vimeo_width" name="media[vimeo_width]" size="50" type="number" value="400">
+      </div>
+    </div>
+    <div class="control-group number optional">
+      <label class="number optional control-label" for="media_vimeo_height">Height</label>
+      <div class="controls">
+        <input class="number optional" id="media_vimeo_height" name="media[vimeo_height]" size="50" type="number" value="225">
+      </div>
+    </div>
+  </div>
+
+  <input class="submit" name="commit" type="submit" value="Insert Media"/>
+
+</form>

data/spec/javascripts/fixtures/mercury/modals/inserttable.html

@@ -0,0 +1,73 @@
+<form>
+
+  <div id="table_display" class="control-group optional">
+    <div class="controls">
+      <table border="1" cellspacing="0">
+        <tr>
+          <td id="cell1">&nbsp;</td>
+        </tr>
+        <tr>
+          <td id="cell2">&nbsp;</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+
+  <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="addRow">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="addColumn">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>
+
+  <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="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="number optional" id="table_spacing" name="table[spacing]" size="50" type="number" value="0">
+    </div>
+  </div>
+
+  <input class="submit" name="commit" type="submit" value="Insert Table"/>
+
+</form>

data/spec/javascripts/{templates → fixtures}/mercury/page_editor.html

@@ -7,9 +7,9 @@
 <meta content="K6JhyfOVKJX8X2ZkiJXSf491fc1fF+k79wzrChHQa0g=" name="csrf-token" />
 
 <div id="page_editor_container"></div>
-<div id="region1" class="custom-region-class" data-type="editable"></div>
-<div id="region2" class="custom-region-class" data-type="editable"></div>
-<div id="region3" class="custom-region-class" data-type="editable">
+<div id="region1" custom-region-attribute="full"></div>
+<div id="region2" custom-region-attribute="full"></div>
+<div id="region3" custom-region-attribute="full">
   <a id="anchor1r" href="#" target="_top">1</a>
   <a id="anchor2r" href="#" target="_blank">2</a>
   <a id="anchor3r" href="#" target="_self">3</a>
@@ -19,7 +19,7 @@
   <form id="form3r" action="" target="_self"></form>
   <form id="form4r" action=""></form>
 </div>
-<div id="region4" class="custom-region-class"></div>
+<div id="region4" custom-region-attribute=""></div>
 
 <a id="anchor1" href="#" target="_top">1</a>
 <a id="anchor2" href="#" target="_blank">2</a>

data/spec/javascripts/fixtures/mercury/region.html

@@ -0,0 +1,6 @@
+<div id="region" data-scope="scope" data-version="1">contents</div>
+<div id="region_with_snippet">contents<div class="example-snippet" data-snippet="snippet_1" data-version="1">snippet</div></div>
+<div id="region_with_javascript_snippet"><div class="example-snippet" data-snippet="snippet_1" data-version="1">
+  <ul id="modifiable-element"></ul>
+  <script>$("#modifiable-element").append("<li />");</script>
+</div></div>

data/spec/javascripts/fixtures/mercury/regions/full.html

@@ -0,0 +1 @@
+<div id="full_region1"></div>

data/spec/javascripts/fixtures/mercury/regions/image.html

@@ -0,0 +1 @@
+<img id="image_region1" src="foo.jpg" />

data/spec/javascripts/fixtures/mercury/regions/markdown.html

@@ -0,0 +1 @@
+<div id="markdown_region1"></div>

data/spec/javascripts/fixtures/mercury/regions/simple.html

@@ -0,0 +1 @@
+<div id="simple_region1"></div>

data/spec/javascripts/fixtures/mercury/regions/snippets.html

@@ -0,0 +1,4 @@
+<div id="snippets_region1" data-mercury="snippets"></div>
+<div id="snippets_region2" data-mercury="snippets">
+  <div class="example-snippet" data-snippet="snippet_1">12</div>
+</div>

data/spec/javascripts/mercury/{dialog_spec.js.coffee → dialog_spec.coffee}

@@ -1,8 +1,7 @@
 describe "Mercury.Dialog", ->
 
-  template 'mercury/dialog.html'
-
   beforeEach ->
+    fixture.load('mercury/dialog.html')
     $.fx.off = true
     Mercury.determinedLocale =
       top: {'hello world!': 'bork! bork!'}
@@ -49,7 +48,7 @@ describe "Mercury.Dialog", ->
       @preloadSpy = spyOn(Mercury.Dialog.prototype, 'preload').andCallFake(=>)
 
     it "builds an element", ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test'})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el})
       html = $('<div>').html(@dialog.element).html()
       expect(html).toContain('class="mercury-dialog mercury-foo-dialog loading"')
       expect(html).toContain('style="display:none"')
@@ -70,18 +69,18 @@ describe "Mercury.Dialog", ->
       @loadSpy = spyOn(Mercury.Dialog.prototype, 'load').andCallFake(=>)
 
     it "calls load if configured", ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test', preload: true})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el, preload: true})
       expect(@loadSpy.callCount).toEqual(1)
 
     it "doesn't call load if configured", ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test', preload: false})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el, preload: false})
       expect(@loadSpy.callCount).toEqual(0)
 
 
   describe "#toggle", ->
 
     beforeEach ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test'})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el})
 
     it "shows or hides", ->
       expect(@dialog.element.css('display')).toEqual('none')
@@ -94,7 +93,7 @@ describe "Mercury.Dialog", ->
   describe "#resize", ->
 
     beforeEach ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test'})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el})
 
     it "calls show", ->
       spy = spyOn(Mercury.Dialog.prototype, 'show').andCallFake(=>)
@@ -105,7 +104,7 @@ describe "Mercury.Dialog", ->
   describe "#show", ->
 
     beforeEach ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test'})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el})
 
     it "triggers a custom event to hide all other dialogs", ->
       spy = spyOn(Mercury, 'trigger').andCallFake(=>)
@@ -157,7 +156,7 @@ describe "Mercury.Dialog", ->
   describe "#appear", ->
 
     beforeEach ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test'})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el})
 
     it "animates the dialog in", ->
       @dialog.appear()
@@ -170,7 +169,7 @@ describe "Mercury.Dialog", ->
   describe "#hide", ->
 
     beforeEach ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test'})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el})
 
     it "hides the dialog", ->
       @dialog.element.css({display: 'block'})
@@ -184,7 +183,7 @@ describe "Mercury.Dialog", ->
     beforeEach ->
       @spyFunction = ->
       Mercury.dialogHandlers.foo = ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test', for: $('#button')})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el, for: $('#button')})
 
     it "does nothing if there's no url", ->
       spy = spyOn($, 'ajax').andCallFake(=>)
@@ -261,7 +260,7 @@ describe "Mercury.Dialog", ->
   describe "#loadContent", ->
 
     beforeEach ->
-      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: '#test'})
+      @dialog = new Mercury.Dialog('/blank.html', 'foo', {appendTo: fixture.el})
 
     it "sets loaded to be true", ->
       @dialog.loadContent()

data/spec/javascripts/mercury/dialogs/backcolor_spec.js.coffee

@@ -1,9 +1,8 @@
 describe "Mercury.dialogHandlers.backColor", ->
 
-  template 'mercury/dialogs/backcolor.html'
-
   beforeEach ->
-    @dialog = {element: $('#test'), button: $('#button')}
+    fixture.load('mercury/dialogs/backcolor.html')
+    @dialog = {element: $(fixture.el), button: $('#button')}
     Mercury.dialogHandlers.backColor.call(@dialog)
 
   describe "when a .picker or .last-picked element is clicked", ->

data/spec/javascripts/mercury/dialogs/forecolor_spec.js.coffee

@@ -1,9 +1,8 @@
 describe "Mercury.dialogHandlers.foreColor", ->
 
-  template 'mercury/dialogs/forecolor.html'
-
   beforeEach ->
-    @dialog = {element: $('#test'), button: $('#button')}
+    fixture.load('mercury/dialogs/forecolor.html')
+    @dialog = {element: $(fixture.el), button: $('#button')}
     Mercury.dialogHandlers.foreColor.call(@dialog)
 
   describe "when a .picker or .last-picked element is clicked", ->
@@ -26,7 +25,7 @@ describe "Mercury.dialogHandlers.foreColor", ->
       spy = spyOn(Mercury, 'trigger').andCallFake(=>)
       jasmine.simulate.click($('#white').get(0))
       expect(spy.callCount).toEqual(1)
-      expect(spy.argsForCall[0]).toEqual(['action', {action: 'foreColor', value: 'rgb(255, 255, 255)'}])
+      expect(spy.argsForCall[0]).toEqual(['action', {action: 'foreColor', value: '#FFFFFF'}])
 
 
   describe "when any other element is clicked", ->

data/spec/javascripts/mercury/dialogs/formatblock_spec.js.coffee

@@ -1,9 +1,8 @@
 describe "Mercury.dialogHandlers.formatblock", ->
 
-  template 'mercury/dialogs/formatblock.html'
-
   beforeEach ->
-    @dialog = {element: $('#test')}
+    fixture.load('mercury/dialogs/formatblock.html')
+    @dialog = {element: $(fixture.el)}
     Mercury.dialogHandlers.formatblock.call(@dialog)
 
   describe "when an element with a data-tag attribute is clicked", ->

data/spec/javascripts/mercury/dialogs/snippetpanel_spec.js.coffee

@@ -1,9 +1,8 @@
 describe "Mercury.dialogHandlers.snippetPanel", ->
 
-  template 'mercury/dialogs/snippetpanel.html'
-
   beforeEach ->
-    @dialog = {element: $('#test'), button: $('#button')}
+    fixture.load('mercury/dialogs/snippetpanel.html')
+    @dialog = {element: $(fixture.el), button: $('#button')}
     Mercury.dialogHandlers.snippetPanel.call(@dialog)
 
   describe "filter", ->

data/spec/javascripts/mercury/dialogs/style_spec.js.coffee

@@ -1,9 +1,8 @@
 describe "Mercury.dialogHandlers.style", ->
 
-  template 'mercury/dialogs/style.html'
-
   beforeEach ->
-    @dialog = {element: $('#test')}
+    fixture.load('mercury/dialogs/style.html')
+    @dialog = {element: $(fixture.el)}
     Mercury.dialogHandlers.style.call(@dialog)
 
   describe "when an element with a data-class attribute is clicked", ->

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

@@ -1,8 +1,7 @@
 describe "Mercury.lightview", ->
 
-  template 'mercury/lightview.html'
-
   beforeEach ->
+    fixture.load('mercury/lightview.html')
     $.fx.off = true
     Mercury.displayRect = {fullHeight: 200, width: 1000}
     Mercury.determinedLocale =
@@ -11,8 +10,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 +18,135 @@ 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.show).toEqual(Mercury.Lightview.prototype.show)
 
 
   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 "sets options.ujsHandling to true unless set to false", ->
+      instance = new Mercury.Lightview()
+      instance.show()
+      expect(instance.options.ujsHandling).toEqual(true)
+      instance = new Mercury.Lightview('', {ujsHandling: false})
+      instance.show()
+      expect(instance.options.ujsHandling).toEqual(false)
 
     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: fixture.el})
 
     it "builds an element", ->
-      Mercury.lightview.build()
-      expect($('#test .mercury-lightview').length).toEqual(1)
+      @lightview.build()
+      expect($('.mercury-lightview', fixture.el).length).toEqual(1)
 
     it "builds an overlay element", ->
-      Mercury.lightview.build()
-      expect($('#test .mercury-lightview-overlay').length).toEqual(1)
+      @lightview.build()
+      expect($('.mercury-lightview-overlay', fixture.el).length).toEqual(1)
 
     it "creates a titleElement", ->
-      Mercury.lightview.build()
-      expect($('#test .mercury-lightview-title').length).toEqual(1)
-      expect($('#test .mercury-lightview-title').html()).toEqual("<span><\/span>")
-      expect(Mercury.lightview.titleElement).toBeDefined()
+      @lightview.build()
+      expect($('.mercury-lightview-title', fixture.el).length).toEqual(1)
+      expect($('.mercury-lightview-title', fixture.el).html()).toEqual("<span><\/span>")
+      expect(@lightview.titleElement).toBeDefined()
 
     it "creates a contentElement", ->
-      Mercury.lightview.build()
-      expect($('#test .mercury-lightview-content').length).toEqual(1)
-      expect(Mercury.lightview.contentElement).toBeDefined()
+      @lightview.build()
+      expect($('.mercury-lightview-content', fixture.el).length).toEqual(1)
+      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()
-      expect($('#test .mercury-lightview-close').length).toEqual(1)
+      @lightview.options.closeButton = true
+      @lightview.build()
+      expect($('.mercury-lightview-close', fixture.el).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: fixture.el})
 
       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 +154,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: fixture.el, 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 +201,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 +212,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: fixture.el})
+      @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: fixture.el})
+      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 +290,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 +299,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,37 +318,37 @@ 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: fixture.el})
 
     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", ->
 
       beforeEach ->
-        @setTimeoutSpy = spyOn(window, 'setTimeout').andCallFake((timeout, callback) => callback())
+        @setTimeoutSpy = spyOn(window, 'setTimeout').andCallFake((callback, timeout) => callback())
         Mercury.preloadedViews = {'/blank.html': 'this is the preloaded content'}
 
       afterEach ->
         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 +357,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 +367,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 +379,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 +394,110 @@ 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: fixture.el, 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'})
-      expect(callCount).toEqual(1)
+    it "calls a handler method if one is set in lightviewHandlers"#, ->
+#      callCount = 0
+#      Mercury.lightviewHandlers['foo'] = => callCount += 1
+#      @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 "makes any element with the lightview-close class close the lightview", ->
+      spy = spyOn(@lightview, 'hide').andCallFake(=>)
+      @lightview.loadContent('<span class="lightview-close">foo</span>')
+      jasmine.simulate.click(@lightview.contentElement.find('.lightview-close').get(0))
+      expect(spy.callCount).toEqual(1)
+
     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: fixture.el, 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 "#serializeForm", ->
+
+    beforeEach ->
+      spyOn(Mercury.Lightview.prototype, 'appear').andCallFake(=>)
+      @lightview = Mercury.lightview('/blank.html', {appendTo: fixture.el, title: 'title'})
+
+    describe "without a form", ->
+
+      it "returns an empty object", ->
+        expect(@lightview.serializeForm()).toEqual({})
+
+    describe "with a form", ->
+
+      it "returns an object of the serialized form", ->
+        @lightview.loadContent('<form><input name="options[foo]" value="bar"/></form>')
+        expect(@lightview.serializeForm()).toEqual({options: {foo: 'bar'}})
+
+
   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: fixture.el, 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 +505,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: fixture.el})
 
     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)