OnlineHub.ImageGallery4pic = Class.create();
OnlineHub.ImageGallery4pic.prototype = 
{
    initialize: function(container)
    {
        this.container = $(container);
        var img_container = this.container.down('div.oh_thumbnail_list') || this.container.down('div.thumbnails');
        var desc = img_container.descendants();
        var i, nname;
        this.scene = this.container.down('div.oh_scene') || this.container.down('div.oh_big_image');
        this.big_image = this.scene.down('img');
        this.big_image_height = this.scene.getHeight();
        this.big_image_width = this.scene.getWidth();
        for(i = 0; i < desc.length; i++)
        {
            nname = desc[i].nodeName.toLowerCase();
            if(nname == 'img')
            {
                desc[i].observe('click', this.show_image.bindAsEventListener(this));
            }
        }
        
        this.mode = 'horizontal';
        this.tlist_window = this.container.down('div.oh_thumbnail_list');
        var tl_w = this.tlist_window.getWidth();
        var tl_h = this.tlist_window.getHeight();
        if(tl_h > tl_w)
        {
            this.mode = 'vertical';
            this.tlist_window.setStyle({'height': this.scene.getHeight() + 'px'});
        }
                
        var scroll_b = this.container.down('div.oh_thumbnail_list_backward');
        this.scroll_back = scroll_b;
        this.scroll_back.addClassName('oh_' + this.mode);
        this.scroll_back.addClassName('oh_disabled');
        this.scroll_back.observe('click', this.go_back.bindAsEventListener(this));
        this.scroller_size = this.get_size(this.scroll_back);
        
        var scroll_f = this.container.down('div.oh_thumbnail_list_forward');
        this.scroll_forward = scroll_f;
        this.scroll_forward.addClassName('oh_' + this.mode);
        this.scroll_forward.observe('click', this.go_forward.bindAsEventListener(this));
                
        this.tlist_window_size = this.get_size(this.tlist_window) - 2 * this.scroller_size;
        
        this.thumbnail_list = this.tlist_window.down('ul');
        var lis = this.thumbnail_list.select('li');
        var i;
        this.thumbnail_list_size = 0;
        for(i = 0; i < lis.length; i++)
        {
            this.thumbnail_list_size += this.get_size(lis[i]);
        }
        
        if(this.thumbnail_list_size < this.tlist_window_size)
        {
            this.scroll_forward.addClassName('oh_disabled');
        }
        
        this.scroll_start = 0;
        this.thumbnail_list.setStyle({'left': '0px'});
    },
    
    show_image: function(event)
    {
        var el = event.element();
        this.image = new Element('img');
        this.image.observe('load', this.image_changed.bindAsEventListener(this));
        this.image.src = el.readAttribute('src');
    },
    
    image_changed: function(event)
    {
        this.scene.update(this.image);
        var w = this.image.getWidth();
        var h = this.image.getHeight();
        var r = Math.min((this.big_image_width / w), (this.big_image_height / h), 1);
        var l = (this.big_image_width - (r * w)) / 2;
        var t = (this.big_image_height - (r * h)) / 2;
        this.image.setStyle({'width': (r * w) + 'px', 'height': (r * h) + 'px', 'margin': t + 'px ' + l + 'px'});
    },
    
    go_back: function(e)
    {
        if(! this.scroll_back.hasClassName('oh_disabled'))
        {
            this.scroll_start = this.scroll_start + this.tlist_window_size;
            if(this.scroll_start > 0)
            {
                this.scroll_start = 0;
                this.scroll_back.addClassName('oh_disabled');
            }
            this.move();
            this.scroll_forward.removeClassName('oh_disabled');
        }
    },
    
    go_forward: function(e)
    {
        if(! this.scroll_forward.hasClassName('oh_disabled'))
        {
            this.scroll_start = this.scroll_start - this.tlist_window_size;
            if(this.scroll_start < -1 * (this.thumbnail_list_size - this.tlist_window_size))
            {
                this.scroll_start = -1 * (this.thumbnail_list_size - this.tlist_window_size);
                this.scroll_forward.addClassName('oh_disabled');
            }
            this.move();
            this.scroll_back.removeClassName('oh_disabled');
        }
    },
    
    get_size: function(element)
    {
        var size;
        if(this.mode == 'horizontal')
        {
            size = element.getWidth();
        }
        else
        {
            size = element.getHeight();
        }
        
        return size;
    },
    
    move: function()
    {
        if(this.mode == 'horizontal')
        {
            if(OnlineHub.Utilities.is_IE6())
            {
                this.thumbnail_list.setStyle({'top': this.scroll_start + 'px'});
            }
            else
            {
                new Effect.Move(this.thumbnail_list, {'x': this.scroll_start, 'mode': 'absolute', 'duration': 0.5});
            }
        }
        else
        {
            if(OnlineHub.Utilities.is_IE6())
            {
                this.thumbnail_list.setStyle({'top': this.scroll_start + 'px'});
            }
            else
            {
                new Effect.Move(this.thumbnail_list, {'y': this.scroll_start, 'mode': 'absolute', 'duration': 0.5})
            }
        }
    }
};

Event.observe(window, "load", function(){ $$('div.oh_image_gallery_4pic').each(function(g){new OnlineHub.ImageGallery4pic(g)})}, false);