var Gallery = {
    page: 1,
    total_pages: 0,
    per_page: 6,
    total_images: 0,
    left_over: 0,
    step: 84, // thumb_width + padding:1px + border:1px + margin-right:10px

    init: function(){
        this.total_images = $$('.gal_thumb').length;
        this.total_pages = Math.ceil(this.total_images/this.per_page);
        this.left_over = this.total_images%this.per_page;
        $('thumbs-holder').setStyle({width: this.total_images*this.step+'px'});
        $('gallery_right').observe('click', this.scroll_right.bind(this));
		if(this.total_pages > 1){
            $('gallery_right').addClassName('gallery_active');
        }
        $('gallery_left').observe('click', this.scroll_left.bind(this));
    },

    calculate_scroll_distance: function(direction){
        var distance = null;
        if(direction == 'right'){
            if((this.left_over > 0 && this.page == this.total_pages-1 )) {
                distance = this.per_page * (this.page-1) * this.step + this.left_over*this.step;
            } else {
                distance = this.per_page * this.step * this.page;
            }
        }else{
            distance = this.per_page * this.step * (this.page-1);
        }
        return distance;
    },

    scroll_left: function(){
        if(this.page > 1){
            this.page = this.page - 1;
            new Effect.Move($('thumbs-holder'),{x: -(this.calculate_scroll_distance('left')), y: 0, duration: 1, mode:'absolute'});
            if(this.page == 1){
                $('gallery_left').removeClassName('gallery_active');
            }
            $('gallery_right').addClassName('gallery_active');
        }
    },

    scroll_right: function(){
        if(this.total_pages > this.page){
            new Effect.Move($('thumbs-holder'),{x: -(this.calculate_scroll_distance('right')), y: 0, duration: 1, mode:'absolute'});
            this.page = this.page + 1;
            $('gallery_left').addClassName('gallery_active');
            if(this.page == this.total_pages){
                $('gallery_right').removeClassName('gallery_active');
            }
    
            if(this.page == (this.total_pages-1)){this.left_over=1;}
        }
    }
}

Event.observe(window, 'load', function(){
    
    Gallery.init();
});