add in width

app/assets/javascripts/application.js

@@ -13,4 +13,5 @@
 //= require jquery
 //= require jquery_ujs
 //= require_tree .
-//= require jquery.mousewheel.js
+//= require jquery.mousewheel.js
+//= require jquery.underscore.js

app/assets/stylesheets/application.css.scss

@@ -112,6 +112,10 @@ ul.inline {
   top: 50%;
   height: 600px;
   margin-top: -300px;
+  img {
+    float: left;
+    margin-right: 3px;
+  }
 }
 
 .horizontal_scroll_logo {

app/controllers/welcome_controller.rb

@@ -3,18 +3,17 @@ def index
 	end
 
   def kids
-    @urls = (1..48).map {|i| URL.assets("kids/#{i}.jpg") }
-    @urls.concat (1..24).map {|i| URL.assets"kids/v#{i}.jpg" }
+    @photos = KidPhoto.all
     render "photography_type"
   end
 
   def newborns
-    @urls = (1..13).map {|i| URL.assets("newborns/#{i}.jpg")}
+    @photos = NewbornPhoto.all
     render "photography_type"
   end
 
   def families
-    @urls = (2..4).map {|i| URL.assets("families/#{i}.jpg")}
+    @photos = FamilyPhoto.all
     render "photography_type"
   end
 end

app/models/family_photo.rb

@@ -0,0 +1,11 @@
+class FamilyPhoto < Photo
+  def folder_name
+    "families"
+  end
+
+  def self.all
+    @families ||= YAML.load_file('data/families.yml').map do |attributes|
+      FamilyPhoto.new(attributes)
+    end
+  end
+end

app/models/kid_photo.rb

@@ -0,0 +1,11 @@
+class KidPhoto < Photo
+  def folder_name
+    "kids"
+  end
+
+  def self.all
+    @kids ||= YAML.load_file('data/kids.yml').map do |attributes|
+      KidPhoto.new(attributes)
+    end
+  end
+end

app/models/newborn_photo.rb

@@ -0,0 +1,11 @@
+class NewbornPhoto < Photo
+  def folder_name
+    "newborns"
+  end
+
+  def self.all
+    @kids ||= YAML.load_file('data/newborns.yml').map do |attributes|
+      NewbornPhoto.new(attributes)
+    end
+  end
+end

app/models/photo.rb

@@ -0,0 +1,17 @@
+class Photo
+  attr_reader :filename, :width
+  MARGIN = 3
+
+  def initialize(attributes = {})
+    @filename = attributes['filename']
+    @width = attributes['width']
+  end
+
+  def url
+    URL.assets("#{folder_name}/#{filename}.jpg")
+  end
+
+  def width_and_margin
+    width + MARGIN
+  end
+end

app/views/welcome/photography_type.html.haml

@@ -20,9 +20,10 @@
         = image_tag URL.assets("facebook.png"), :width => 20
     %li= link_to "Blog", "http://alexandrafarias.tumblr.com"
 
-%section.photo_viewer
-  - @urls.each do |url|
-    = image_tag url
+- width = @photos.map{ |p| p.width_and_margin }.inject(:+) + 50
+%section.photo_viewer{style: "width: #{width}px;"}
+  - @photos.each do |photo|
+    = image_tag photo.url
 
 :javascript
   $(function() {

data/families.yml

@@ -0,0 +1,7 @@
+---
+- filename: 2
+  width: 900
+- filename: 3
+  width: 900
+- filename: 4
+  width: 900

data/kids.yml

@@ -0,0 +1,145 @@
+---
+- filename: 1
+  width: 900
+- filename: 2
+  width: 900
+- filename: 3
+  width: 900
+- filename: 4
+  width: 900
+- filename: 5
+  width: 900
+- filename: 6
+  width: 900
+- filename: 7
+  width: 900
+- filename: 8
+  width: 900
+- filename: 9
+  width: 900
+- filename: 10
+  width: 899
+- filename: 11
+  width: 900
+- filename: 12
+  width: 900
+- filename: 13
+  width: 900
+- filename: 14
+  width: 900
+- filename: 15
+  width: 900
+- filename: 16
+  width: 900
+- filename: 17
+  width: 900
+- filename: 18
+  width: 900
+- filename: 19
+  width: 900
+- filename: 20
+  width: 900
+- filename: 21
+  width: 900
+- filename: 22
+  width: 900
+- filename: 23
+  width: 900
+- filename: 24
+  width: 900
+- filename: 25
+  width: 900
+- filename: 26
+  width: 900
+- filename: 27
+  width: 900
+- filename: 28
+  width: 900
+- filename: 29
+  width: 900
+- filename: 30
+  width: 900
+- filename: 31
+  width: 900
+- filename: 32
+  width: 900
+- filename: 33
+  width: 843
+- filename: 34
+  width: 843
+- filename: 35
+  width: 843
+- filename: 36
+  width: 900
+- filename: 37
+  width: 900
+- filename: 38
+  width: 900
+- filename: 39
+  width: 900
+- filename: 40
+  width: 843
+- filename: 41
+  width: 900
+- filename: 42
+  width: 900
+- filename: 43
+  width: 900
+- filename: 44
+  width: 900
+- filename: 45
+  width: 900
+- filename: 46
+  width: 900
+- filename: 47
+  width: 900
+- filename: 48
+  width: 900
+- filename: v1
+  width: 400
+- filename: v2
+  width: 458
+- filename: v3
+  width: 376
+- filename: v4
+  width: 400
+- filename: v5
+  width: 400
+- filename: v6
+  width: 400
+- filename: v7
+  width: 400
+- filename: v8
+  width: 400
+- filename: v9
+  width: 400
+- filename: v10
+  width: 400
+- filename: v11
+  width: 400
+- filename: v12
+  width: 442
+- filename: v13
+  width: 400
+- filename: v14
+  width: 400
+- filename: v15
+  width: 400
+- filename: v16
+  width: 400
+- filename: v17
+  width: 400
+- filename: v18
+  width: 400
+- filename: v19
+  width: 400
+- filename: v20
+  width: 400
+- filename: v21
+  width: 400
+- filename: v22
+  width: 400
+- filename: v23
+  width: 400
+- filename: v24
+  width: 400

data/newborns.yml

@@ -0,0 +1,27 @@
+---
+- filename: 1
+  width: 900
+- filename: 2
+  width: 900
+- filename: 3
+  width: 900
+- filename: 4
+  width: 900
+- filename: 5
+  width: 900
+- filename: 6
+  width: 900
+- filename: 7
+  width: 900
+- filename: 8
+  width: 900
+- filename: 9
+  width: 400
+- filename: 10
+  width: 899
+- filename: 11
+  width: 900
+- filename: 12
+  width: 900
+- filename: 13
+  width: 900