A new layout based on Gucci's site

.classpath

@@ -20,7 +20,7 @@
 	<classpathentry kind="var" path="MAVEN_REPO/resin-3.1/jars/webbeans-16-3.1.5.jar"/>
 	<classpathentry kind="var" path="MAVEN_REPO/resin-3.1/jars/ejb-15-3.1.5.jar"/>
 	<classpathentry kind="var" path="MAVEN_REPO/resin-3.1/jars/jpa-15-3.1.5.jar"/>
-	<classpathentry kind="var" path="MAVEN_REPO/resin-3.1/jars/jsdk-15-3.1.5.jar"/>
+	<classpathentry kind="var" path="MAVEN_REPO/resin-3.1/jars/jsdk-15-3.1.5.jar" sourcepath="/MAVEN_REPO/resin-3.1/sources/resin-3.1.5-src.zip"/>
 	<classpathentry kind="var" path="MAVEN_REPO/resin-3.1/jars/hessian-3.1.5.jar"/>
 	<classpathentry kind="var" path="MAVEN_REPO/resin-3.1/jars/jca-15-3.1.5.jar"/>
 	<classpathentry kind="var" path="MAVEN_REPO/resin-3.1/jars/jstl-11-3.1.5.jar"/>

gucci/assets/album-ext.js

@@ -0,0 +1,256 @@
+Position.includeScrollOffsets = true;
+
+var Engine = {
+    detect: function() {
+        var UA = navigator.userAgent;
+        this.isKHTML = /Konqueror|Safari|KHTML/.test(UA);
+        this.isGecko = (/Gecko/.test(UA) && !this.isKHTML);
+        this.isOpera = /Opera/.test(UA);
+        this.isMSIE  = (/MSIE/.test(UA) && !this.isOpera);
+        this.isMSIE7 = this.isMSIE && !(/MSIE 6\./.test(UA) && !this.isOpera);
+        this.isMSIE6 = this.isMSIE && !this.isMSIE7;
+        if (document.childNodes && !document.all && !navigator.taintEnabled)
+            Engine[!!document.evaluate ? 'isSafari3' : 'isSafari2'] = true;
+    }
+}
+Engine.detect();
+
+if (Engine.isMSIE){
+    try {
+        document.execCommand("BackgroundImageCache", false, true);
+    } catch(e) {
+        // ignore
+    }
+}
+
+Position.getPageSize = function() {
+
+    var xScroll, yScroll;
+
+    if (window.scrollMaxX) {  
+        xScroll = window.innerWidth  + window.scrollMaxX;
+        yScroll = window.innerHeight + window.scrollMaxY;
+    } else {
+        xScroll = document.body.scrollWidth;
+        yScroll = document.body.scrollHeight;
+    }
+  
+    var windowWidth, windowHeight;
+    if (self.innerHeight) { // all except Explorer
+        windowWidth = self.innerWidth;
+        windowHeight = self.innerHeight;
+    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
+        windowWidth = document.documentElement.clientWidth;
+        windowHeight = document.documentElement.clientHeight;
+    } else if (document.body) { // other Explorers
+        windowWidth = document.body.clientWidth;
+        windowHeight = document.body.clientHeight;
+    }
+    // for small pages with total height less then height of the viewport
+    pageHeight = Math.max(windowHeight, yScroll);
+
+    // for small pages with total width less then width of the viewport
+    pageWidth = Math.max(windowWidth, xScroll);
+
+    return {
+        page: { width: pageWidth, height: pageHeight },
+        window: { width: windowWidth, height: windowHeight }
+    };
+}
+
+Position.scrollX = function(){
+    return (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0);
+}
+
+var Loader = {
+
+    _assets: $H({}),
+    _checkInterval: null,
+    _options: {},
+    _update: function() {
+        var allLoaded = true;
+        Loader._assets.each(function(a) {
+                if(!a[1].complete && a[1].image.complete) {
+                    a[1].complete = true;
+                    a[1].completed_at = new Date().getTime();
+                    if(a[1].options.onComplete) {
+                        a[1].options.onComplete(a[0]);
+                    }
+                }
+                if(!a[1].complete && !a[1].image.complete) {
+                    allLoaded = false;
+                }
+            });
+        if (allLoaded) {
+            clearInterval(Loader._checkInterval);
+            Loader._checkInterval = null;
+            if (Loader._options && Loader._options.onComplete) {
+                Loader._options.onComplete();
+            }
+            Loader._options = null;
+        }
+    },
+
+    initialize: function() {
+        var options = arguments[0] || {};
+        Loader._options = options;
+    },
+
+    cacheOrLoad: function(url) {
+        var options = arguments[1] || {};
+        if (this.isLoaded(url)) {
+            if (options.onComplete) {
+                options.onComplete();
+            }
+        } else {
+            this.load(url, options);
+        }
+    },
+
+    load: function(url) {
+        if (Loader._assets.get(url)) return;
+        var options = arguments[1] || {};
+        var a = { };
+        a.image = new Image();
+        a.image.src = url;
+        a.complete = false;
+        a.options  = options;
+        a.loaded_at = new Date().getTime();
+        if (!Engine.isSafari2) {
+            Event.observe(a.image, 'error', function() { Loader.error(url) });
+        }
+        Loader._assets.set(url, a);
+        if (!Loader._checkInterval) {
+            Loader._checkInterval = setInterval(Loader._update, 10);
+        }
+    },
+
+    error: function(url) {
+        var asset = Loader._assets.get(url);
+        asset.complete = true;
+        if (asset.options.onComplete) {
+            asset.options.onComplete('assets/empty.gif');
+        }
+    },
+
+    stats: function(url) {
+        return (Loader._assets.get(url)._complete ?
+                (Loader._assets.get(url)._completed_at - Loader._assets.get(url)._loaded_at) : null);
+    },
+
+    isQueued: function(url) {
+        return !!(Loader._assets.get(url));
+    },
+
+    isLoaded: function(url) {
+        return (Loader._assets.get(url) && Loader._assets.get(url).complete);
+    },
+
+    remove: function(url) {
+        Loader._assets.unset(url);
+    },
+
+    reset: function() {
+        Loader._assets = $H({});
+    }
+};
+
+Event.localPointer = function(event) {
+    var p = [Event.pointerX(event), Event.pointerY(event)];
+    var element = arguments[1] || Event.element(event);
+    var e = Position.page($(element));
+    return [
+        p[0]-(e[0]+(window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0)),
+        p[1]-(e[1]+(window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop  || 0))];
+};
+
+Effect.HScroll = Class.create();
+
+Object.extend(Object.extend(Effect.HScroll.prototype, Effect.Base.prototype), {
+
+        initialize: function(delta) {
+
+            this.scrollStart = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+     
+            var w = Position.getPageSize();
+            if (this.scrollStart + delta < 0) {
+                delta = -this.scrollStart;
+            }
+            if (this.scrollStart + delta > (w.page.width-w.window.width)) {
+                delta = (w.page.width-w.window.width) - this.scrollStart;
+            }
+            this.delta   = delta;
+
+            this.start(arguments[1] || {});
+        },
+
+        update: function(position) {
+            Position.prepare();
+            window.scrollTo(this.scrollStart + (position*this.delta), 0); 
+        }
+    });
+ 
+Effect.HScrollTo = Class.create();
+
+Object.extend(Object.extend(Effect.HScrollTo.prototype, Effect.Base.prototype), {
+        initialize: function(scrollEnd) {
+            this.scrollStart = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+    
+            var delta = scrollEnd - this.scrollStart;
+            var w = Position.getPageSize();
+            if (this.scrollStart + delta < 0) {
+                delta = -this.scrollStart;
+            }
+            if (this.scrollStart + delta > (w.page.width-w.window.width)) {
+                delta = (w.page.width-w.window.width) - this.scrollStart;
+            }
+            this.delta   = delta;
+
+            this.start(arguments[1] || {});
+        },
+
+        update: function(position) {
+            Position.prepare();
+            window.scrollTo(this.scrollStart + (position*this.delta), 0); 
+        }
+    });
+
+Effect.HScrollToElement = function(element, direction) {
+
+    element = $(element);
+
+    var viewportMiddle = Position.getPageSize().window.width/2;
+    var scrollStart = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+    var elementMiddle = element.offsetWidth/2 + Position.cumulativeOffset(element).first();
+    var offset = scrollStart + viewportMiddle;
+    var clickOffset = Prototype.Browser.IE ? 20 : 17; //offset to keep arrows visible at 800x600
+    if (direction == 1)
+        var delta = elementMiddle - offset + clickOffset; 
+    else
+        var delta = -(offset - elementMiddle) - clickOffset;
+    new Effect.HScroll(delta);
+}
+
+Effect.MoveRight = Class.create();
+
+Object.extend(Object.extend(Effect.MoveRight.prototype, Effect.Base.prototype), {
+
+        initialize: function(element, delta) {
+            this.element = $(element);
+            if(!this.element) throw(Effect._elementDoesNotExistError);
+            var options = Object.extend({
+                    x:    delta
+                }, arguments[2] || {});
+            this.start(options);
+        },
+
+        setup: function() {
+            this.originalRight = this.options.initialRight || parseFloat(this.element.getStyle('right') || '0');
+        },
+
+        update: function(position) {
+            this.element.setStyle({
+                    right: Math.round(this.options.x  * position + this.originalRight) + 'px'
+                        });
+        }
+});

gucci/assets/album.css

@@ -0,0 +1,309 @@
+/* GLOBAL LAYOUT */
+
+html {
+  background: url(background.gif) repeat-x left center #95754e;
+  background-attachment: fixed;
+}
+
+body {
+  color: #2B200D;
+  margin: 0;
+  padding: 0;
+  font: 10px/14px Verdana, Arial, sans-serif;
+}
+
+* {
+  outline: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Text Selections */
+
+::-moz-selection {
+  background: transparent;
+  color: #000;
+}
+
+::selection {
+  background: transparent;
+  color: #000;
+}
+
+#logo {
+  top: -100px;
+  left: 126px;
+  position: fixed;
+  cursor: pointer;
+}
+
+#layout {
+  height: 504px;
+  margin-left: 65px;
+  margin-right: 65px;
+  position: absolute;
+}
+
+div#filling {
+  background: top right url(background-fill-2.gif);
+  height: 504px;
+  position: absolute;
+  top: 0px;
+  right: 301px;
+}
+
+/* TEXT CONTENT */
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  color: #2B200D;
+  margin: 0;
+  padding: 0;
+}
+
+li a {
+  color: #2B200D;
+  text-decoration: none;
+}
+
+li a:hover {
+  color: #89693b;
+}
+
+div.content-block {
+  background: url(box-2-panels-background.jpg) #CCBFA5;
+  float: left;
+  height: 504px;
+  position: relative;
+}
+
+div.content-block div.info {
+  color: #2B200D;
+  float: left;
+  font-size: 10px;
+  height: 420px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 28px;
+  position: relative;
+  width: 230px;
+}
+
+div.content-block div.info p {
+  font: 10px/15px Verdana;
+  margin-top: 0px;
+  margin-bottom: 18px;
+  padding: 0;
+}
+
+div.content-block div.info a {
+  color: #2B200D;
+}
+
+div.content-block div.info a:hover {
+  color: #89693b;
+}
+
+div.content-block div.headline {
+  padding-bottom: 39px;
+}
+
+div.content-block h1 {
+  color: #89693b;
+  font: 14px/15px Verdana;
+  text-transform: lowercase;
+  margin: 0;
+  padding: 0;
+  margin-top: 6px;
+}
+
+div.content-block h2 {
+  color: #89693b;
+  font: 11px/15px Verdana;
+  text-transform: lowercase;
+  margin: 0;
+  padding: 0;
+  padding-bottom: 8px;
+}
+
+div.content-block div.title.second-column, div.content-block div.subtitle.second-column {
+  left: 275px;
+}
+
+div.content-block div.info.wide {
+  width: 360px;
+}
+
+* html div.content-block div.info.wide {
+  width: 360px;
+}
+
+div.content-block div.info.wide h1 {
+  font: 11px/15px Verdana;
+  color: #89693b;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 12px;
+}
+
+div.content-block div.info.wide p, div.content-block div.info.narrow p {
+  padding: 0;
+  margin: 0;
+  margin-top: 0px;
+  margin-bottom: 18px;
+}
+
+div.content-block div.info.narrow {
+  width: 230px;
+}
+
+div.content-block img.content-block-image { 
+  float: left; 
+  position: relative;
+}
+
+/* TEXTPANELS */
+
+div.textpanel {
+  height: 504px;
+  float: left;
+  position: relative;
+  background: url(textpanel-background.gif) left top repeat-x;
+}
+
+div.textpanel {
+  width: 260px;
+}
+
+div.textpanel.wide {
+  width: 520px;
+}
+
+div.content-block div.textpanel.wide {
+  width: 520px; /* IE6 needs this to set correct width */
+}
+
+div.textpanel div.content {
+  margin-top: 140px;
+  margin-left: 28px;
+  margin-right: 28px;
+}
+
+div.textpanel.wide div.content {
+  width: 380px;
+  margin-left: 70px;
+}
+
+div.textpanel div.content h2 {
+  font-size: 20px;
+  font-weight: normal;
+  color: #6a5839;
+  margin-bottom: 40px;
+  text-shadow: 1px 1px 1px #e7e1d2;
+}
+
+div.content-block div.textpanel div.content {
+  margin-left: 55px;
+}
+
+div.content-block div.textpanel div.content h2 {
+  padding-bottom: 0px;
+}
+
+div.textpanel div.content p {
+  margin-bottom: 25px;
+  margin-top: 0;
+}
+
+
+/* PICTUREBOXES */
+
+div.picturebox {
+  float: left;
+  height: 510px;
+  position: relative;
+/*  overflow: hidden;*/
+}
+
+div.picturebox div.picture {
+  height: 504px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  background: url(empty.png) repeat;
+  Z-index: 3;
+}
+
+div.shadow-bottom {
+  overflow: hidden;
+  position: absolute;
+  top: 504px; 
+  height: 6px; 
+  left: 0;
+  width: 100%;
+  background: url(shadow-bottom.gif) repeat-x;
+}
+
+div.shadow-bottom div.start {
+  background: url(shadow-bottom-start.gif);
+  height: 6px;
+  position: absolute;
+  width: 6px;
+}
+
+div.shadow-right {
+  background: url(shadow-right.gif) repeat-y;
+  height: 504px;
+  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;
+  top: 0;
+  left: 0;
+  z-index: 10000; 
+}
+
+
+/* SPACERS */
+
+div#branch {
+  position: fixed;
+  left: 20px;
+  font: 14px Verdana;
+  color: #C5B89E;
+  padding: 3px;
+  background: #F2EFE8;
+  border-left: 1px solid #C5B89E;
+  border-bottom: 1px solid #C5B89E;
+  border-right: 1px solid #C5B89E;
+}
+
+* html div#branch {
+  position: absolute;
+}
+
+div.spacer-column {
+  float: left;
+  height: 504px;
+  width: 65px;
+  background: url(spacer-column.gif);
+  cursor: pointer;
+}
+

gucci/assets/album.js

@@ -0,0 +1,195 @@
+var Album = {
+
+    pictures: [],
+    queue: { position: 'end', scope: 'shop' },
+
+    cubic: function(pos) {
+        pos /= 0.5;
+        return pos < 1 ? 0.5*pos*pos*pos : 0.5*((pos-2)*(pos-2)*(pos-2) + 2);
+    },
+
+    spacerEvent: function (spacer, direction) {
+      var width = (direction < 0 ? _pictures[spacer].width : _pictures[spacer + 1].width) + 65;
+         new Effect.HScroll(width * direction);
+    },
+
+    initialize: function() {
+
+        $$('div.picturebox div.picture img').each( function(img, idx) {
+                var container = img.parentNode;
+                container.addClassName('highlight');
+                container.setAttribute('id', 'pic' + idx);
+                // var darkener = $(document.createElement('div')).addClassName('darkening').setOpacity(0);
+                // container.appendChild(darkener);
+                //      Event.observe(darkener, 'click', function() {
+                //        Album.showProduct(this);
+                //      }.bind(img));
+            });
+
+
+        $$('div.spacer-column').each(function(spacer, idx) {
+
+                spacer.setAttribute('id', 'spacer' + idx);
+
+                Event.observe(spacer, 'click', function(event) {
+                        Album.spacerEvent(idx, Event.localPointer(event)[0] < 33 ? 1 : -1);
+                    });
+
+                Event.observe(spacer, 'mousemove', function(event) {
+                        var d = Event.localPointer(event)[0]<33 ? '-65' : '-130';
+                        spacer.style.backgroundPosition = d + 'px 0px';
+                    });
+
+                Event.observe(spacer, 'mouseout', function(event) {
+                        spacer.style.backgroundPosition = '0px 0px';
+                    });
+            });
+
+    },
+
+    initializeThumbsFromPictureList: function(list) {
+
+        _pictures = list;
+
+        var imgtags = $$('div.picturebox div.picture img');
+
+        var totalWidth = 0;
+        var pictureCount = 0;
+
+        imgtags.each(function(img, index) {
+                var container = img.parentNode;
+                var picturebox = container.parentNode;
+                var darkener = img.next();
+
+                var picture = _pictures[container.id.substr(3)];
+                $(img).setStyle({ width: picture.width + 'px', height: picture.height + 'px' });
+                $(container).setStyle({ width: picture.width + 'px' });
+                $(picturebox).setStyle({ width: picture.width + 'px' });
+                totalWidth += picture.width;
+                pictureCount += 1;
+
+                /*
+                if (!container.hasClassName('highlight') && highlight.include(picture)) {
+                    new Effect.Opacity(container, { from: 1, to: 0, afterFinish:function() {
+                                container.setOpacity(1);
+                                container.addClassName('highlight');
+                                darkener.setOpacity(0.001);
+                            }});
+                } else if (container.hasClassName('highlight') && !highlight.include(picture)) {
+                    container.setOpacity(0);
+                    container.removeClassName('highlight');
+
+                    new Effect.Opacity(container,{ from: 0, to: 1.0 });
+                    new Effect.Opacity(darkener, { from: 0, to: 0.3 });
+                }
+                if (picture != null) {
+                    Album.thumbs.push({
+                            id:         picture.style,
+                            stylegroup: picture.id,
+                            thumburl:   picture.thumburl
+                      });
+                }
+                */
+            });
+
+        totalWidth += (pictureCount - 1) * 65;
+
+        $('layout').setStyle({ width: totalWidth + 'px' });
+        $('content').setStyle({ width: totalWidth + 'px' });
+        $('page-body').setStyle({ width: (totalWidth + 2 * 65) + 'px' });
+
+        Loader.reset();
+
+        setTimeout(function() {
+                this._loaderPause = false;
+                this.loadVisibleThumbs();
+            }.bind(this), 1050);
+    },
+
+    loadVisibleThumbs: function() {
+
+        if (this._loaderPause) return;
+        if (this._loaderTimeout) clearTimeout(this._loaderTimeout);
+
+        this._loaderTimeout = setTimeout(function() {
+
+                var w = Position.getPageSize().window.width;
+
+                var visibles = [];
+                $$('div.picturebox div.picture img').each(function(img) {
+
+                        var container = img.parentNode;
+                        var x0 = Position.page(container)[0];
+                        var picture = _pictures[container.id.substr(3)];
+                        var x1 = x0 + picture.width;
+                        if ((x0 >= 0 && x0 < w) || (x1 >=0 && x1 < w)) {
+                            visibles.push(img);
+                        } else {
+                            img.src = 'assets/empty.gif';
+                            Loader.remove(picture.url);
+                        }
+                    });
+
+
+                visibles.each(function(img, idx) {
+
+                        var id = img.parentNode.id;
+                        var picture = _pictures[id.substr(3)];
+                     //    alert(picture.url);
+
+                        if (img.src == picture.url) return;
+
+                        var imageObj = picture.url;
+
+                        if (Loader.isQueued(imageObj)) return;
+
+                        //                        alert('src: ' + img.src + '\nurl: ' + picture.url + '\nmatch: ' + img.src.match('assets/empty\.gif$') + '\nloader: ' + Loader.isQueued(imageObj));
+
+                        // $(img).setStyle({ position: 'relative', left: ('-' + picture.width + 'px') });
+                        Loader.cacheOrLoad(imageObj, {
+
+                                onComplete: function(obj) {
+                                    // $(img).setStyle({ position: 'relative', left: '0px'}).setOpacity(0);
+                                    $(img).setOpacity(0);
+                                    img.src = obj;
+                                    new Effect.Opacity(img, { from: 0, to: 1, delay: 0.2, transition: Album.cubic, duration: 0.8 });
+                                }});
+                    });
+
+            }, 100);
+    },
+
+    moveIntoView: function(picturebox) {
+        picturebox = $(picturebox);
+
+        var windowWidth   = Position.getPageSize().window.width;
+        var windowLeft    = Position.scrollX();
+        var windowRight   = windowLeft + windowWidth;
+        var pictureboxLeft  = Position.page(picturebox)[0] - 32 + windowLeft;
+        var pictureboxRight = pictureboxLeft + 780 + 65;
+
+        if (pictureboxRight > windowRight) {
+            if (pictureboxRight > Position.getPageSize().page.width)
+                setTimeout(function() {
+                        new Effect.HScrollTo(pictureboxRight - windowWidth, { duration: 0.5, transition: Album.cubic });
+                    }, 1000);
+            else
+                new Effect.HScrollTo(pictureboxRight - windowWidth, { queue: Album.queue, duration: 0.5, transition: Album.cubic });
+        }
+        else if (pictureboxLeft  < windowLeft)
+            new Effect.HScrollTo(pictureboxLeft, { queue: Album.queue, duration: 0.5, transition: Album.cubic });
+    },
+
+    initializeThumbsLoader: function() {
+        Event.observe(window, 'scroll', this.loadVisibleThumbs.bindAsEventListener(this));
+        Event.observe(window, 'resize', this.loadVisibleThumbs.bindAsEventListener(this));
+        Event.observe(window, 'beforeunload', this.unloadThumbs.bindAsEventListener(this));
+        this.loadVisibleThumbs();
+    },
+
+    unloadThumbs: function(){
+        $$('div.picturebox div.picture img').each(function(image) { image.src = 'assets/empty.gif' });
+    },
+
+
+};