Element.addMethods({
    // Insert all items in collection Enumerable into parent element.
    insertCollection: function(element, collection){
        element = $(element);
        collection.each(function(item){ this.insert(item); }, element);
        return element;
    }
});


var RP = {
    share_links: {
        twitter: "http://twitter.com/home?status=#{location}", 
        facebook: "http://www.facebook.com/share.php?u=#{location}"
    }
};

RP.GalleryModule = Class.create({
    initialize: function(element, options){
        this.element = $(element);
        this.options = Object.extend({
            images:[], 
            links:[], 
            virtual_tour: false, 
            transition: {
                duration: 0.5, 
                queue: 'end'
            }
        }, options || {});
        
        this.build();
        this.show_image(0);
    }, 
    
    build: function(){
        this.content = new Element('div', {'class':'content'});
        this.element.insert({ bottom: this.content });
        
        if(this.options.virtual_tour){
            this.virtual_tour = new RP.GalleryModule.VirtualTour(this.options);
            this.content.insert({ top: this.virtual_tour });
        }
        
        this.images = this.options.images.map(function(options, i){
            return new Element('div', {'class':'image'})
                .setStyle({ backgroundImage:'url(\'' + options.full + '\')'})
                .hide();
        });
        var images_container = new Element('div', {'class':'images'})
            .insertCollection(this.images);
        this.content.insert(images_container);
        
        this.previous_button = new Element('a', {'class':'previous'})
            .update("<span>Previous</span>")
            .observe('click', function(){
                this.show_previous_image();
            }.bind(this));
        images_container.insert(this.previous_button);
        
        this.next_button = new Element('a', {'class':'next'})
            .update("<span>Next</span>")
            .observe('click', function(){
                this.show_next_image();
            }.bind(this))
        images_container.insert(this.next_button);
        
        if(this.options.links.length > 0){
            this.links = this.options.links.map(function(options){
                var link = new Element('a', {
                        'href': options.href || '#', 
                        'class': options.classname || null
                    })
                    .update(options.title)
                    .observe('mouseover', function(){
                        if('hover_title' in options)
                            this.update(options.hover_title);
                    })
                    .observe('mouseout', function(){
                        if('hover_title' in options)
                            this.update(options.title);
                    })
                    .observe('click', function(e){
                        this.links.each(function(link){
                            link.select('a').invoke('removeClassName', 'active');
                        });
                        Event.element(e).addClassName('active');
                        options.onclick(); //.apply(this);
                        if(!options.href) return false;
                    }.bind(this));
                return new Element('li').update(link);
            }.bind(this));
            this.content.insert(new Element('ul', {'class':'links'})
                .insertCollection(this.links));
        }
        
        if(this.options.images.length > 1){
           this.thumbs = this.options.images.map(function(options, i){
                var thumb = new Element('a', {'href':'#'})
                    .setStyle({ backgroundImage:'url(' + options.thumb + ')'})
                    .observe('click', function(){
                        this.show_image(i);
                    }.bind(this));
                return new Element('li').update(thumb);
            }.bind(this));
            this.thumb_container = new Element('ul').insertCollection(this.thumbs);
            this.content.insert(
                new Element('div', {'class':'thumbs'}).update(this.thumb_container));
        }
        
        var networks = new Element('ul', {'class':'networks'});
        $H(RP.share_links).each(function(network){
            var location = network.value.interpolate({ location: window.location });
            networks.insert(new Element('li', {'class': network.key }).update(
                new Element('a', { href: location, target:'_blank'})
                    .update("<span>Share on " + network.key + "<span>")
            ));
        });
        this.element.insert({ bottom: networks });
    }, 
    
    show_image: function(i){
        if(this.virtual_tour)
            this.virtual_tour.hide();
        
        if(this.current_image != i){
            // Display/hide previous image button.
            if(i == 0)
                this.previous_button.hide();
            else if(!this.previous_button.visible())
                this.previous_button.show();
            
            // Display/hide next image button.
            if(i == this.options.images.length - 1)
                this.next_button.hide();
            else if(!this.next_button.visible())
                this.next_button.show();
            
            // Fade the current image.
            if(this.current_image >= 0)
                this.images[this.current_image].fade(this.options.transition);
            
            // Scroll the thumbnails.
            var move_to = 0;
            if(i > 1)
                move_to = -(i - 1) * 63;
            if(i > (this.options.images.length - 3))
                move_to = -(this.options.images.length - 3) * 63;
            new Effect.Move(this.thumb_container, {
                duration: 0.3, 
                transition: Effect.Transitions.linear, 
                queue:'end', 
                mode:'absolute', 
                x: move_to
            });
            
            // Show the requested image.
            this.images[i].appear(this.options.transition);
            this.current_image = i;
        }
    }, 
    
    show_next_image: function(){
        var i = this.current_image + 1;
        if(i >= this.options.images.length)
            i = this.options.images.length - 1;
        this.show_image(i);
    }, 
    
    show_previous_image: function(){
        var i = this.current_image - 1;
        if(i < 0) i = 0;
        this.show_image(i);
    }
});


RP.GalleryModule.VirtualTour = Class.create({
    initialize: function(options){
        this.options = options || {};
        this.loaded = false;
        this.element = new Element('div', {'class':'virtual_tour'}).hide();
        
        this.options.links.push({ 
            title:"Gallery Images", 
            onclick: function(){ 
                this.hide();
            }.bind(this), 
            classname:'active'
        });
        this.options.links.push({ 
            title:"Virtual Tour", 
            onclick: function(){ 
                this.show();
            }.bind(this)
        });
    }, 
    
    toElement: function(){
        return this.element;
    }, 
    
    load: function(){
        var container = new Element('div');
        this.element.update(container);
        swfobject.embedSWF(
            this.options.virtual_tour, 
            container.identify(), 
            "314", "166", "10.0.0", null, {}, { 
                wmode:"transparent", 
                scale:"exactfit"
            }, {});
        this.loaded = true;
    }, 
    
    show: function(){
        if(!this.loaded)
            this.load();
        
        if(!this.element.visible())
            this.element.appear(this.options.transition);
    }, 
    
    hide: function(){
        if(this.element.visible())
            this.element.fade(this.options.transition);
    }
});