album/gucci/assets/album.js

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' });
    },


};