Snappier javascript with moveIntoView

.cvsignore

@@ -1 +1,2 @@
 build
+target

gucci/assets/album.css

@@ -258,20 +258,13 @@ div.shadow-bottom div.start {
 
 div.shadow-right {
   background: url(shadow-right.gif) repeat-y;
-  height: 504px;
+  height: 510px;
   position: absolute;
   right: -6px;
   top: 0;
   width: 6px;
 }
 
-div.shadow-bottom div.start {
-  background: url(shadow-right-start.gif);
-  height: 6px;
-  position: absolute;
-  width: 6px;
-}
-
 div.picturebox div.darkening {
   background: url(lightbox-lowlight-overlay.jpg);
   position: absolute;

gucci/assets/album.js

@@ -10,7 +10,7 @@ var Album = {
 
     spacerEvent: function (spacer, direction) {
       var width = (direction < 0 ? _pictures[spacer].width : _pictures[spacer + 1].width) + 65;
-         new Effect.HScroll(width * direction);
+         new Effect.HScroll(width * direction, { queue: Album.queue, duration: 0.5, transition: Album.cubic });
     },
 
     initialize: function() {
@@ -65,6 +65,7 @@ var Album = {
                 $(img).setStyle({ width: picture.width + 'px', height: picture.height + 'px' });
                 $(container).setStyle({ width: picture.width + 'px' });
                 $(picturebox).setStyle({ width: picture.width + 'px' });
+                $(container).onclick = function() { Album.moveIntoView(container); };
                 totalWidth += picture.width;
                 pictureCount += 1;
             });
@@ -80,7 +81,7 @@ var Album = {
         setTimeout(function() {
                 this._loaderPause = false;
                 this.loadVisibleThumbs();
-            }.bind(this), 1050);
+            }.bind(this), 500);
     },
 
     loadVisibleThumbs: function() {
@@ -129,22 +130,31 @@ var Album = {
                                     img.setOpacity(0);
                                  //   alert(obj);
                                     img.src = obj;
-                                    new Effect.Opacity(img, { from: 0, to: 1, delay: 0.2, transition: Album.cubic, duration: 0.8 });
+                                    new Effect.Opacity(img, { from: 0, to: 1, delay: 0.1, transition: Album.cubic, duration: 0.4 });
                                 }});
                     });
 
             }, 100);
     },
 
-    moveIntoView: function(picturebox) {
+    moveIntoView: function(container) {
-        picturebox = $(picturebox);
+
+        container = $(container);
+        var picture = _pictures[container.id.substr(3)];
 
         var windowWidth   = Position.getPageSize().window.width;
         var windowLeft    = Position.scrollX();
         var windowRight   = windowLeft + windowWidth;
-        var pictureboxLeft  = Position.page(picturebox)[0] - 32 + windowLeft;
+        var pictureboxLeft  = Position.page(container)[0] - 32 + windowLeft;
-        var pictureboxRight = pictureboxLeft + 780 + 65;
+        var pictureboxRight = pictureboxLeft + picture.width;
 
+        var desiredCenter = (windowLeft + windowRight) / 2;
+        var actualCenter = (pictureboxLeft + pictureboxRight) / 2;
+        var delta = actualCenter - desiredCenter;
+
+        new Effect.HScroll(delta, { queue: Album.queue, duration: 0.5, transition: Album.cubic });
+
+/*
         if (pictureboxRight > windowRight) {
             if (pictureboxRight > Position.getPageSize().page.width)
                 setTimeout(function() {
@@ -155,6 +165,7 @@ var Album = {
         }
         else if (pictureboxLeft  < windowLeft)
             new Effect.HScrollTo(pictureboxLeft, { queue: Album.queue, duration: 0.5, transition: Album.cubic });
+*/
     },
 
     initializeThumbsLoader: function() {

gucci/index.html

@@ -20,14 +20,6 @@
 <div class="picturebox">
     <div class="picture"><img src="assets/empty.gif" alt=""/></div>
     <div class="shadow-bottom"><div class="start"></div></div>
-    <div class="shadow-right"><div class="start"></div></div>
-</div>
-
-<div class="spacer-column"></div>
-
-<div class="picturebox">
-    <div class="picture"><img src="assets/empty.gif" alt=""/></div>
-    <div class="shadow-bottom"></div>
     <div class="shadow-right"></div>
 </div>
 
@@ -35,7 +27,7 @@
 
 <div class="picturebox">
     <div class="picture"><img src="assets/empty.gif" alt=""/></div>
-    <div class="shadow-bottom"></div>
+    <div class="shadow-bottom"><div class="start"></div></div>
     <div class="shadow-right"></div>
 </div>
 
@@ -43,7 +35,7 @@
 
 <div class="picturebox">
     <div class="picture"><img src="assets/empty.gif" alt=""/></div>
-    <div class="shadow-bottom"></div>
+    <div class="shadow-bottom"><div class="start"></div></div>
     <div class="shadow-right"></div>
 </div>
 
@@ -51,7 +43,7 @@
 
 <div class="picturebox">
     <div class="picture"><img src="assets/empty.gif" alt=""/></div>
-    <div class="shadow-bottom"></div>
+    <div class="shadow-bottom"><div class="start"></div></div>
     <div class="shadow-right"></div>
 </div>
 
@@ -59,7 +51,15 @@
 
 <div class="picturebox">
     <div class="picture"><img src="assets/empty.gif" alt=""/></div>
-    <div class="shadow-bottom"></div>
+    <div class="shadow-bottom"><div class="start"></div></div>
+    <div class="shadow-right"></div>
+</div>
+
+<div class="spacer-column"></div>
+
+<div class="picturebox">
+    <div class="picture"><img src="assets/empty.gif" alt=""/></div>
+    <div class="shadow-bottom"><div class="start"></div></div>
     <div class="shadow-right"></div>
 </div>