updates

index.html

@@ -14,17 +14,14 @@
 </style>
 <script src="http://inc.the.tl/less.js" type="text/javascript"></script>
 <script src="http://inc.the.tl/jquery.js"></script>
-<!--[if !IE]>
 <script src="http://inc.the.tl/zepto/src/zepto.js"></script>
 <script src="http://inc.the.tl/zepto/src/event.js"></script>
 <script src="http://inc.the.tl/zepto/src/fx.js"></script>
 <script src="http://inc.the.tl/zepto/src/detect.js"></script>
-<![endif]-->
+
 <script>
-  if (!(window.Zepto))
-   Zepto = {"browser": {webkit: false}};
-  $ = jQuery;
-  z = Zepto;
+    $ = jQuery;
+    z = Zepto;
 </script>
 
 <script src="http://inc.the.tl/jqueryui.js"></script>
@@ -33,19 +30,20 @@
 <script src="http://inc.the.tl/k/index.js"></script>
 
 <script type="text/coffeescript">
+
   #problem. instantiating should NOT append to the dom or the object
   if !window.console
     window.console = {}
   if !window.console.log
     window.console.log = () ->
   $(document).ready () ->
+
     #trying the Model View Presenter pattern
 
     #this is a rusty model... polish it. look to backbone as an example
     HomeModel = k.class
       initialize: (e) ->
       loadGalleries: (e) ->
-        console.log "fetching"
         $.ajax
           type: "GET"
           url: "http://troybrinkerhoff.com/new2/galleries.php"
@@ -72,17 +70,17 @@
           p.clearThumbnails e
           p.slideThumbnails e, "out"
           p.slideBanner e, "down"
-          console.log model.galleries
           gallery_name = "gallery_" + linkName.toLowerCase() 
           for image, index in model.galleries[gallery_name].images
+            if k.s(image, -2) == "db" then return
             url = 
               big: image
               thumb: model.galleries[gallery_name].thumbs[index]
-            console.log url
             p.addImage view, url 
 
 
         k(view).bind "homeclick", (e) ->
+          view.galleryState = ""
           p.slideThumbnails e, "in"
           p.slideBanner e, "up"
 
@@ -92,6 +90,8 @@
     HomeView = k.class
       #jquert binds and triggers can go in here
       initialize: (e, presenter) ->
+        e.thumbsWidth = 200
+
         e.presenter = presenter 
         e.el = $('#home-wrapper')
         e.state = "home"
@@ -107,23 +107,23 @@
 
         e.el.find("#links").append a
       loadViewerImage: (e, url) ->
-        $("#viewer").attr "src", url
+        $("#viewer-img").attr "src", url
       addImage: (e, urls) ->
-        thumb = $("<img>")
+        thumb = $("<img class='thumb' >")
         thumb.attr "src", urls.thumb
         thumb.bind "click", (event) ->
-          p.loadViewerImage e, url.big
+          p.loadViewerImage e, urls.big
           k(e).trigger "imageSelected", urls, thumb
         $("#thumbs").append thumb
       clearThumbnails: (e) ->
         $("#thumbs").empty()
       slideThumbnails: (e, outOrIn) ->
         if outOrIn == "out"
-          translate = "-300px"
+          translate = "-#{e.thumbsWidth}px"
           right = 0
         else
-          translate = "0"
-          right = "-300px"
+          translate = 0
+          right = "-#{e.thumbsWidth}px"
         if z.browser.webkit
           z("#thumbs").anim({"translateX": translate})
         else
@@ -152,6 +152,7 @@
   <div id="wrapper" align="center">
     <div id="home-wrapper">
       <div id="home-image"></div>
+      <div id="viewer"><img id="viewer-img" src="blank.gif" /></div>
       <div id="slide"></div>
       <div id="thumbs"></div>
 

styles.less

@@ -6,6 +6,12 @@ body {
   font-family: 'Josefin Sans';  
   background-color: rgb(39,39,39) 
 }
+#viewer {
+  .absolute;
+}
+#viewer-img {
+ width: 760px;
+}
 
 .shadowy {
   -webkit-box-shadow: 0px 0px 5px #000;
@@ -17,13 +23,18 @@ body {
 }
 
 #main-logo {
+  color: rgb(70,70,70);
   .absolute;
   left: 10px;
   font-size: 20px;
+  cursor: pointer;
+}
+.thumb {
+  width: 43px;
+  height: 43px;
 }
-
 #thumbs {
-  @width: 300px;
+  @width: 200px;
   right: -1 * @width;
   .absolute;
   background-color: green;
@@ -59,5 +70,6 @@ body {
   .absolute;
   bottom: 50px;
   padding-top: 10px;
-  padding-bottom: 10px
+  padding-bottom: 10px;
+  background-color: black;
 }