OnlineHub.ImageScene = Class.create({
    create_scene: function()
    {
        this.overlay = new OnlineHub.Overlay({'class': 'oh_overlay', 'onClick': this.close_scene.bindAsEventListener(this), 'hideOnClick': true});
        this.overlay.show();
        this.frame = new Element('div', {'class': 'oh_gallery_frame'});
        this.close = new Element('div', {'class': 'oh_close_button'}).show();
        this.close.observe('click', this.close_scene.bindAsEventListener(this));
        
        this.toolbar = new Element('div', {'class': 'oh_gallery_toolbar'});
        this.frame.insert(this.toolbar);

        this.toolbar.insert(this.close);
        this.controls = new Element('div', {'class': 'oh_gallery_controls'});
        this.toolbar.insert(this.controls);

        this.prev_button = new Element('div', {'class': 'oh_gallery_prev oh_disabled'});
        this.prev_button.observe('click', this.previous.bindAsEventListener(this));
        this.controls.insert(this.prev_button);
        
        this.next_button = new Element('div', {'class': 'oh_gallery_next oh_disabled'});
        this.next_button.observe('click', this.next.bindAsEventListener(this));
        this.controls.insert(this.next_button);
        
        this.image_div = new Element('div', {'class': 'oh_gallery_image'});
        this.frame.insert(this.image_div);

        this.frame.setStyle({'zIndex': this.overlay.get_z_index() + 1});
        document.body.insert(this.frame);
    },
    
    resize_scene: function()
    {
        this.frame.show();
        this.frame.setStyle({'width': '150px', 'height': '150px'});
        this.image_div.update(this.image);
        this.image.show();
	
        var max_height = parseInt(document.viewport.getHeight()) - 20 - this.toolbar.getHeight();
        var max_width = parseInt(document.viewport.getWidth()) - 20;
        var curr_height = this.image_div.getHeight();
        var curr_width = this.image_div.getWidth();
        var h_ratio = 1;
        var v_ratio = 1;
        
        if(curr_height > max_height)
            h_ratio = max_height/curr_height;
        
        if(curr_width > max_width)
            v_ratio = max_width/curr_width;
        
        var ratio = Math.min(h_ratio, v_ratio);
        if(ratio < 1)
        {
            var new_width = Math.floor(this.image.getWidth() * ratio) + 'px';
            var new_height = Math.floor(this.image.getHeight() * ratio) + 'px';
            this.image.setStyle({'width': new_width, 'height': new_height});
        }
        
        this.frame.setStyle({'width': this.image_div.getWidth() + 'px', 'height': 'auto'});
        curr_width = $(this.frame).getWidth();
        var left = Math.floor((max_width - curr_width) / 2) + 10;
        this.frame.setStyle({'left': left + 'px'});
    },
    
    close_scene: function()
    {
        this.frame.hide();
        this.frame.remove();
        this.overlay.hide();
        this.overlay.remove();
    },
    
    previous: function(){},
    
    next: function(){}
});

OnlineHub.ImageGallery1 = Class.create(OnlineHub.ImageScene, {
    initialize: function(container)
    {
        this.container = $(container);
        this.kids = new Array();
        var desc = this.container.descendants();
        var i, nname, j = 0, top_margin;
        for(i = 0; i < desc.length; i++)
        {
            nname = desc[i].nodeName.toLowerCase();
            if((nname == 'a') || (nname == 'img'))
            {
                this.kids.push(desc[i]);
                this.kids[j].observe('click', this.open_gallery.bindAsEventListener(this));
                top_margin = parseInt((desc[i].parentNode.getHeight() - desc[i].getHeight()) / 2);
                this.kids[j].setStyle({'marginTop': top_margin + 'px'});
                j++;
            }
        }
    },
    
    open_gallery: function(e)
    {
        e.stop();
        this.current_kid = e.element();
        this.create_scene();
        this.show_current();
    },
    
    show_current: function()
    {
        var old_img = this.image_div.down('img');
        var new_src;
        
        if(this.current_kid.nodeName.toLowerCase() == 'a')
        {
            new_src = this.current_kid.readAttribute('href');
        }
        else
        {
            new_src = this.current_kid.readAttribute('src');
        }
        this.image = new Element('img');
        this.image.observe('load', this.resize_scene.bindAsEventListener(this));
        this.image.src = new_src;
        
        this.set_buttons_status();
    },

    previous: function(e)
    {
        var ind = this.kids.indexOf(this.current_kid);
        if(ind > 0)
        {
            ind --;
            this.current_kid = this.kids[ind];
            this.show_current();
        }
    },
    
    next: function()
    {
        var ind = this.kids.indexOf(this.current_kid);
        if(ind < (this.kids.length - 1))
        {
            ind ++;
            this.current_kid = this.kids[ind];
            this.show_current();
        }
    },
    
    set_buttons_status: function()
    {
        var ind = this.kids.indexOf(this.current_kid);
        if(ind == this.kids.length - 1)
        {
            this.next_button.addClassName('oh_disabled');
        }
        else
        {
            this.next_button.removeClassName('oh_disabled');
        }
        
        if(ind == 0)
        {
            this.prev_button.addClassName('oh_disabled');
        }
        else
        {
            this.prev_button.removeClassName('oh_disabled');
        }
    }
});

OnlineHub.ImageThumbnail = Class.create(OnlineHub.ImageScene, {
    initialize: function(img)
    {
        this.thumbnail = $(img);
        this.thumbnail.observe('click', this.show_thumbnail.bindAsEventListener(this));
    },
    
    show_thumbnail: function(e)
    {
        e.stop();
        this.create_scene();
        
        this.image = new Element('img');
        this.image.observe('load', this.resize_scene.bindAsEventListener(this));
        this.image.src = this.thumbnail.readAttribute('src');
    }
});

Event.observe(window, "load", function(){ $$('img.oh_thumbnail').each(function(g){new OnlineHub.ImageThumbnail(g)})}, false);
Event.observe(window, "load", function(){ $$('div.oh_image_gallery').each(function(g){new OnlineHub.ImageGallery1(g)})}, false);