lux.index = lux.Gallery.subClass(function (me) {

    me.node.children().detach();

    me.current = $("<div class='current-image'> </div>");
    me.prev = $("<div class='previous-thumbnail'> </div>");
    me.next = $("<div class='next-thumbnail'> </div>");
    
    me.node.append(me.prev);
    me.node.append(me.current);
    me.node.append(me.next);

    me.selectImage = function (index, callback) {
        me.getImage(index).loadImage('blog/no_crop/620x520/color/').whenLoaded(function (currentImage) {
            currentImage.fitToBox(620,520);
            me.selectedImage = index;
            me.current.empty();
            me.current.append(currentImage.node);

            me.prev.empty();
            me.prev.append(me.getImage(index - 1).loadImage('blog/rectangular_crop/110x520/bw/').node);
            me.prev.css({height: currentImage.originalHeight + 'px' });
            me.prev.hide();
            me.prev.clickPreventDefault(function () { 
                me.selectImage(index - 1, function () { 
                    me.prev.show(); 
                    // put it in so you can click on it, but don't
                    // show it since it distrubs the most recent image
                    me.prev.css({ opacity: 0.0 });
                });
            });

            me.next.empty();
            me.next.append(me.getImage(index + 1).loadImage('blog/rectangular_crop/110x520/bw/').node);
            me.next.css({height: currentImage.originalHeight + 'px' });
            me.next.hide();
            me.next.clickPreventDefault(function () { 
                me.selectImage(index + 1, function () { 
                    me.next.show();
                    // as with the prev image
                    me.next.css({ opacity: 0.0 });
                });
            });

            me.current.mouseenter(function () { 
                me.prev.css({ opacity: 1.0 }); 
                me.prev.fadeIn(); 
                me.next.css({ opacity: 1.0 });
                me.next.fadeIn();
            });
            me.node.mouseleave(function () { me.prev.fadeOut(); me.next.fadeOut(); });

            if (callback) { callback(); }
        });
    };

    me.selectImage(0);
});

$(function () {
    window.G = new lux.index($("#gallery.index"));
});