var Gallery = Class.create({
    
    initialize: function() {
        this.images = [];
        this.current_image = 0;
        this.parent = null;
        this.fade_time = 500;
        this.display_time = 5000;
        this.fade_steps = 50;
        
        this.display_timeout = '';
        this.current_step = 0;
        this.fade_direction = '';
        this.opacity_step = 1 / this.fade_steps;
        this.time_between_steps = this.fade_time / this.fade_steps;
        this.update_direction = '';
    },
    
    start: function() {
        var first = $$('.gallery').first();
        if(!first)
            return;
        this.parent = first.up();
    /*
        var parent = $$('.gallery').first().up();
        parent.insert({'top': '<div id="decal_gallery_container" style="width:500px; height:800px;"></div>'});
        this.parent = $('decal_gallery_parent');
    */  

        this.getImages();
        if(this.images.length > 0)
        {
            this.collapseImages();
            this.displayNav();
            this.displayImage(false);
        }
    },
    
    // Get each image from the gallery components. Grab the image, a caption if it exists and remove everything else
    getImages: function(){
        var images = [];
        $$('.gallery').each( function(gallery) {
            var img = false;
            var cap = false;
            //alert(gallery.getWidth() + ' ' + gallery.getHeight());
            gallery.childElements().each( function(element) {
                var has_img = element.select('img').length;
                
                /*element.childElements().each( function(child) {
                    if(child.tagName.toLowerCase() == 'img')
                    {
                        has_img = true;
                    }
                });*/
                
                if(has_img && !img)
                {   
                    img = true;
                }
                else if(!has_img && !cap)
                {
                    cap = true;
                }
                else
                {
                    element.remove();
                }
            });
            if(img != '')
            {
                images[images.length] = gallery;
            }
        });

        this.images = images;
    },
    
    collapseImages: function(){
        $$('.gallery').each( function (gallery) {
             gallery.remove();
        });
    },
    
    displayNav: function(){
        if(this.images.length > 1)
        {
            this.parent.insert({'top': '<a href="javascript:void(0);" id="decal_gallery_prev">Previous</a> &nbsp; <a href="javascript:void(0);" id="decal_gallery_next">Next</a>'});
            $('decal_gallery_prev').observe('click',this.previous.bind(this));
            $('decal_gallery_next').observe('click',this.next.bind(this));
        }
    },
    
    
    
    
    displayImage: function(fade){
        //alert('display');
        this.updateImageIndex();
        this.parent.insert({'top': this.images[this.current_image]});
        if(fade)
            this.fadeIn();
        else
            this.doDisplayImage();
    },

    doDisplayImage: function(){
        this.parent.firstDescendant().setOpacity(0.9999);
        this.clearTimer();
        this.startTimer();
    },
    
    fadeIn: function() {
        this.fade_direction = 'in';
        this.current_step++;
        if(this.current_step <= this.fade_steps)
        {
            this.parent.firstDescendant().setOpacity(this.current_step * this.opacity_step);
            setTimeout(this.fadeIn.bind(this),this.time_between_steps);
        }
        else
        {
            this.current_step = 0;
            this.doDisplayImage();
        }
    },


    removeImage: function(fade){
        if(fade)
            this.fadeOut();
        else
            this.doRemoveImage(fade);
    },
    
    doRemoveImage: function(fade){
        this.parent.firstDescendant().remove();
        this.displayImage(fade);
    },
    
    fadeOut: function() {
        this.fade_direction = 'out';
        this.current_step++;
        if(this.current_step <= this.fade_steps)
        {
            this.parent.firstDescendant().setOpacity(1 - this.current_step * this.opacity_step);
            setTimeout(this.fadeOut.bind(this),this.time_between_steps);
        }
        else
        {
            this.current_step = 0;
            this.doRemoveImage(true);
        }
    },


    updateImageIndex: function(){
        if(this.update_direction == 'next')
            (this.current_image == this.images.length - 1) ? this.current_image = 0 : this.current_image++;
        else if(this.update_direction == 'previous')
            (this.current_image == 0) ? this.current_image = this.images.length - 1 : this.current_image--;
    },
    

    displayNextImage: function(){
        this.update_direction = 'next';
        this.removeImage(true);
    },
    
    displayNewImage: function(fade, direction){
        this.update_direction = direction;
        this.removeImage(fade,direction);
    },
    
    previous: function(event){
        this.clearTimer();
        if(this.current_step > 0)
        {
            /*
            if(this.fade_direction == 'out')
            {
                this.update_direction = 'previous';
            }
            else
            {
                this.update_direction = 'previous';
                //this.updateImageIndex();
            }
            */
        }
        else
            this.displayNewImage(true,'previous');
    },
    
    next: function(event){
        this.clearTimer();
        if(this.current_step > 0)
        {
        
        
        }
        else
            this.displayNewImage(true,'next');
    },
    
    startTimer: function(){
        if(!this.fading)
        {
            this.display_timeout = setTimeout(this.displayNextImage.bind(this),this.display_time);
        }
        else
            setTimeout(this.startTimer.bind(this),10);
    },
    
    clearTimer: function(){
        clearTimeout(this.display_timeout);
        this.display_timeout = '';
    }
});

document.observe("dom:loaded", function() {
    var gal = new Gallery();
    gal.start();
});