var MediaGallery = Class.create(
{
    initialize: function(container, options) {
        
        this.container = $(container);
        
        /* event queue list */
        this.queue = new Array();
        
        /* load options */
        Object.extend(this, options);
        
        this.initControls();
        
        this.total_images = this.container.select('li').length;
        
        this.img_container = this.container.select('ul')[0];  
        this.img_container.setStyle({ left: '0px' }); 
        
        this.container.select('.window')[0].setStyle({ width: this.width+'px' });
        this.img_container.setStyle({ width: (this.width*this.total_images)+'px', height: this.height+'px' });
        
        this.max_position = (this.total_images-1) * this.width; 
        
        this.container.setStyle({ width: this.width+'px', height: this.height+'px' });
        this.container.select('li').invoke('setStyle', { width: this.width+'px', height: this.height+'px' });
        
        /* fix gallery layout */
        line_width = (this.container.getWidth()-35) + 'px';
        this.container.select('.top-repeat')[0].setStyle({ width: line_width });
        this.container.select('.bottom-repeat')[0].setStyle({ width: line_width });
        
        this.container.setStyle({ visibility: 'visible' });
        
        if(!gal_window_loaded)
            Event.observe(window, 'load', this.updateHeight.bind(this));
        else
            this.updateHeight();
    },
    
    initControls: function() {
        
        // before btn
        this.before_btn = new Element('a', { title: 'Anterior' }).addClassName('goLeft').setStyle({ top: Math.ceil(this.height/2 - 35/2)+'px'});
        this.before_btn.observe('click', this.previous.bind(this));
        
        // after btn
        this.after_btn = new Element('a', { title: 'Seguinte' }).addClassName('goRight').setStyle({ top: Math.ceil(this.height/2 - 35/2)+'px'});
        this.after_btn.observe('click', this.next.bind(this));
        
        this.container.insert({ top: this.before_btn });
        this.container.insert({ bottom: this.after_btn });
    },
    
    previous: function() {
        
        this.queue.push(1);
            
        if(this.queue.length == 1)
            this.processEventList();
        
        reloadAds();
    },
    
    next: function() {
        this.queue.push(-1);
            
        if(this.queue.length == 1)
            this.processEventList();
        
        reloadAds();
    },
    
    processEventList: function() {
        
        if(this.queue.length > 0) {
            
            position =  parseInt(this.img_container.getStyle('left')) + this.width * this.queue[0];
            
            if(position >= -this.max_position && position <= 0) 
                
                new Effect.Move(this.img_container, { x: position,
                                                      duration: 0.4,
                                                      mode: 'absolute',
                                                      transition: Effect.Transitions.sinoidal,
                                                      beforeStart: function() {
                                                          this.is_moving = true;
                                                      }.bind(this),
                                                      afterFinish: function() {
                                                          
                                                                      $$('.gal_current').invoke('update', Math.abs(parseInt(this.img_container.getStyle('left'))/this.width)+1);
                                                                      
                                                                      this.queue.pop();
                                                                      this.is_moving = false;
                                                                      this.processEventList();
                                                                      
                                                                   }.bind(this) 
                });
            
            else {
                this.queue.pop();
                this.processEventList();
            }
            
        }
        
    },
    
    updateHeight: function() {
        
        var top_height = 0;
        this.container.select('table').each(function(elem) {
                                                var height = elem.getHeight();
                                                if(top_height < height)
                                                    top_height = height;
                                            });
        

        this.height = top_height;
        
        this.img_container.setStyle({ width: (this.width*this.total_images)+'px', height: (top_height+50)+'px' });
        this.container.setStyle({ width: this.width+'px', height: (top_height+50)+'px' });
        this.container.select('li').invoke('setStyle', { width: this.width+'px', height: this.height+'px' });
        
        this.before_btn.setStyle({ top: Math.ceil((top_height+50)/2 - 35/2)+'px'});
        this.after_btn.setStyle({ top: Math.ceil((top_height+50)/2 - 35/2)+'px'});
        
        this.container.select('.bg')[0].setStyle({ height: (top_height+50)+'px' });
    }
    
});