import closet page

app/controllers/application_controller.rb

@@ -3,6 +3,10 @@ class ApplicationController < ActionController::Base
 
   helper_method :can_use_image_mode?
 
+  def authenticate_user! # too lazy to change references to login_path
+    redirect_to(login_path) unless user_signed_in?
+  end
+
   def can_use_image_mode?
     user_signed_in? && current_user.image_mode_tester?
   end

app/controllers/closet_pages_controller.rb

@@ -8,6 +8,8 @@ class ClosetPagesController < ApplicationController
   def create
     if params[:closet_page] && params[:closet_page][:source]
       @closet_page.source = params[:closet_page][:source]
+      @index = @closet_page.index
+
       saved_counts = @closet_page.save_hangers!
 
       any_created = saved_counts[:created] > 0
@@ -35,8 +37,8 @@ class ClosetPagesController < ApplicationController
         message << "That was the last page of your Neopets closet."
         destination = user_closet_hangers_path(current_user)
       else
-        message << "Let's move onto the next page!"
+        message << "Now the frame should contain page #{@closet_page.index + 1}. Paste that source code over, too."
-        destination = {:action => :new, :page => (@closet_page.index + 1)}
+        destination = {:action => :new, :index => (@closet_page.index + 1)}
       end
 
       flash[:success] = message
@@ -47,16 +49,18 @@ class ClosetPagesController < ApplicationController
   end
 
   def new
+    @closet_page.index ||= 1
   end
 
   protected
 
   def build_closet_page
     @closet_page = ClosetPage.new(current_user)
+    @closet_page.index = params[:index]
   end
 
   def on_parse_error
-    flash[:alert] = "We had trouble reading your source code. Is it a valid HTML document? Make sure you pasted the computery-looking result of right-click > View Source, and not the pretty page itself."
+    flash[:alert] = "We had trouble reading your source code. Is it a valid HTML document? Make sure you pasted the computery-looking result of clicking View Frame Source, and not the pretty page itself."
     render :action => :new
   end
 end

app/models/closet_page.rb

@@ -14,7 +14,8 @@ class ClosetPage
     :selected       => "option[selected]"
   }
 
-  attr_reader :hangers, :index, :source, :total_pages, :unknown_item_names, :user
+  attr_accessor :index
+  attr_reader :hangers, :source, :total_pages, :unknown_item_names, :user
 
   def initialize(user)
     raise ArgumentError, "Expected #{user.inspect} to be a User", caller unless user.is_a?(User)
@@ -50,6 +51,10 @@ class ClosetPage
     parse_source!(source)
   end
 
+  def url
+    "http://www.neopets.com/closet.phtml?per_page=50&page=#{@index}"
+  end
+
   protected
 
   def element(selector_name, parent)

app/stylesheets/closet_hangers/_index.sass

@@ -0,0 +1,15 @@
+body.closet_hangers-index
+  #title
+    float: left
+
+  #import-link
+    +awesome-button
+    +loud-awesome-button-color
+    margin:
+      left: 2em
+      top: .75em
+
+  #closet-hangers
+    clear: both
+    text-align: center
+

app/stylesheets/closet_hangers/index.sass

@@ -1,4 +0,0 @@
-body.closet_hangers-index
-  #closet-hangers
-    text-align: center
-

app/stylesheets/closet_pages/_new.sass

@@ -0,0 +1,42 @@
+body.closet_pages-new, body.closet_pages-create
+
+  #closet-page-form
+    +clearfix
+    margin-bottom: 1em
+
+  #closet-page-frame-wrapper
+    float: left
+    margin-right: 2%
+    width: 48%
+
+  #closet-page-frame
+    height: 19em
+    width: 100%
+
+  #closet-page-source
+    float: left
+    width: 50%
+
+    label
+      font-weight: bold
+
+    textarea
+      height: 19em
+
+
+  ol
+    padding-left: 1em
+
+    > li
+      margin-bottom: 1em
+
+    ul
+      font-size: 85%
+      margin:
+        bottom: 1em
+        top: 0
+      padding-left: 1em
+
+    p
+      margin: 0
+

app/stylesheets/screen.sass

@@ -7,6 +7,7 @@
 @import partials/jquery.jgrowl
 
 @import closet_hangers/index
+@import closet_pages/new
 @import contributions/index
 @import items
 @import items/index

app/views/closet_hangers/index.html.haml

@@ -1,5 +1,6 @@
 - if user_is?(@user)
   - title 'Your Closet'
+  = link_to "Import closet from Neopets", new_closet_page_path, :id => 'import-link'
 - else
   - title "#{@user.name}'s Closet"
 #closet-hangers

app/views/closet_pages/new.html.haml

@@ -1,5 +1,49 @@
-= form_for(@closet_page) do |f|
+- title "Closet Importer, Page #{@closet_page.index}"
-  = f.label :source
+
+= form_for @closet_page, :html => {:id => 'closet-page-form'} do |f|
+  #closet-page-frame-wrapper
+    %span
+      %strong Page #{@closet_page.index}
+      of your closet
+    %iframe#closet-page-frame{:src => @closet_page.url}
+  #closet-page-source
+    = f.label :source, "Paste source code below"
     = f.text_area :source
   = f.submit 'Add items to closet'
 
+:markdown
+  **Welcome to the bulk closet importer!** We're going to make it as
+  easy as possible to import your Neopets.com closet data into your Dress to
+  Impress closet. Here's how it works.
+
+  1. Check the framed Neopets.com window on the left, pointing to
+    [page #{@closet_page.index} of your closet][cp].
+      * **Log in if you haven't already.** If you're logged into
+        Neopets, but not in this frame, enable "third-party cookies" in your
+        browser. (Most have that on by default.)
+      * **Confirm that the page is, in fact, your closet.** Don't just trust a
+        website when they tell you to copy-paste the source code of another site.
+        Instead, check that the page is what it is supposed to be and does not
+        contain any information you didn't mean to give out.
+
+  2. View the frame's source code.
+      * **In Google Chrome,** right-click the frame and choose **View Frame Source**.
+      * **In Firefox,** right-click the frame, choose **This Frame**, then **View Frame Source**.
+      * In other browsers, right-click, and look for something similar. If you're
+        still having trouble, try
+        #{link_to "viewing the page in a new window", @closet_page.url, :target => "_blank"},
+        right-clicking, and choosing View Source.
+
+  3. Highlight the entire source code, and copy-paste it into the box on the right.
+      * Some nifty shortcuts: Ctrl-A to select all the text, Ctrl-C to copy it,
+        Ctrl-V to paste it in.
+
+  4. Submit!
+      * We'll analyze the code you sent us, grab exclusively the identity and
+        quantity of items in your closet, and add that to your Dress to Impress
+        closet. I promise it's all safe, but, if you're concerned, find a
+        programmer buddy and [check out the source code to be sure][source].
+
+  [cp]: #{@closet_page.url}
+  [source]: http://github.com/matchu/openneo-impress-rails
+

public/stylesheets/compiled/closet_hangers/index.css

@@ -1,4 +0,0 @@
-/* line 2, ../../../../app/stylesheets/closet_hangers/index.sass */
-body.closet_hangers-index #closet-hangers {
-  text-align: center;
-}

public/stylesheets/compiled/screen.css

@@ -538,11 +538,108 @@ div.jGrowl div.jGrowl-closer {
   }
 }
 
-/* line 2, ../../../app/stylesheets/closet_hangers/index.sass */
+/* line 2, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index #title {
+  float: left;
+}
+/* line 5, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index #import-link {
+  /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  background: #006400 url('/images/alert-overlay.png?1296599919') repeat-x;
+  border: 0;
+  display: inline-block;
+  padding: 0.5em 0.75em 0.45em;
+  color: white;
+  text-decoration: none;
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  position: relative;
+  font-weight: bold;
+  line-height: 1;
+  background: #ff5c00 url('/images/alert-overlay.png?1296599919') repeat-x;
+  margin-left: 2em;
+  margin-top: 0.75em;
+}
+/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.closet_hangers-index #import-link:hover {
+  background-color: #005300;
+}
+/* line 53, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.closet_hangers-index #import-link:hover {
+  color: white;
+}
+/* line 55, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.closet_hangers-index #import-link:active {
+  top: 1px;
+}
+/* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.closet_hangers-index #import-link:hover {
+  background-color: #ee4b00;
+}
+/* line 12, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index #closet-hangers {
+  clear: both;
   text-align: center;
 }
 
+/* line 3, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new #closet-page-form, body.closet_pages-create #closet-page-form {
+  overflow: hidden;
+  display: inline-block;
+  margin-bottom: 1em;
+}
+/* line 8, ../../../app/stylesheets/partials/clean/_mixins.sass */
+body.closet_pages-new #closet-page-form, body.closet_pages-create #closet-page-form {
+  display: block;
+}
+/* line 7, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new #closet-page-frame-wrapper, body.closet_pages-create #closet-page-frame-wrapper {
+  float: left;
+  margin-right: 2%;
+  width: 48%;
+}
+/* line 12, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new #closet-page-frame, body.closet_pages-create #closet-page-frame {
+  height: 19em;
+  width: 100%;
+}
+/* line 16, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new #closet-page-source, body.closet_pages-create #closet-page-source {
+  float: left;
+  width: 50%;
+}
+/* line 20, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new #closet-page-source label, body.closet_pages-create #closet-page-source label {
+  font-weight: bold;
+}
+/* line 23, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new #closet-page-source textarea, body.closet_pages-create #closet-page-source textarea {
+  height: 19em;
+}
+/* line 27, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new ol, body.closet_pages-create ol {
+  padding-left: 1em;
+}
+/* line 30, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new ol > li, body.closet_pages-create ol > li {
+  margin-bottom: 1em;
+}
+/* line 33, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new ol ul, body.closet_pages-create ol ul {
+  font-size: 85%;
+  margin-bottom: 1em;
+  margin-top: 0;
+  padding-left: 1em;
+}
+/* line 40, ../../../app/stylesheets/closet_pages/_new.sass */
+body.closet_pages-new ol p, body.closet_pages-create ol p {
+  margin: 0;
+}
+
 /* line 1, ../../../app/stylesheets/contributions/_index.sass */
 body.contributions-index {
   text-align: center;