Event.observe(window, 'load', function(){
    $$('.photobox').each(function(box){
        new Photobox(box);
    });
});

var Photobox = Class.create({

    initialize: function(container)
    {
        this.container = $(container);
        
        this.availSpace = this.container.select('.images')[0].getDimensions();
        this.currentImage = 0;
        this.images = this.container.select('.images img');
        this.imageCount = this.images.length;
        this.build();
        this.images.each(function(img){
            this.center(img);
        }, this);
        this.show();
    },
    
    build: function()
    {
        // caption
        if(!this.container.select('.caption')[0])
        {
            var caption = new Element('div').addClassName('caption');
            this.container.insert({ 'bottom': caption });
        }        
        var target = this.container.select('.caption')[0];
       
        // nav
        var nav = new Element('div').addClassName('nav');
        this.container.insert({ 'top': nav });
        
        // prev
        var p = new Element('a', { href: '#' }).observe('click', function(e) {
            Event.stop(e);
            this.prev();
        }.bind(this)).addClassName('prev');
        nav.insert(p);

        // next
        var n = new Element('a', { href: '#' }).observe('click', function(e) {
            Event.stop(e);
            this.next();
        }.bind(this)).addClassName('next');
        nav.insert(n);

        // count
        var c = new Element('span').addClassName('count');
        nav.insert(c);

        // title
        target.insert(
            new Element('span')
        );
        this.setTitle();        
    },
    
    setTitle: function()
    {
        var t = this.container.select('.caption span')[0];
        t.update(this.images[this.currentImage].title);
    },
    
    setCount: function()
    {
        var c = this.container.select('.nav span')[0];
        c.update((this.currentImage+1)+' / '+(this.imageCount));
    },
    
    center: function(img)
    {
        var dim = img.getDimensions();
        if(dim.width < this.availSpace.width)
        {
            img.setStyle({
                marginLeft: Math.round((this.availSpace.width-dim.width)/2, 0)+'px'
            });
        }
        if(dim.height < this.availSpace.height)
        {
            img.setStyle({
                marginTop: Math.round((this.availSpace.height-dim.height)/2, 0)+'px'
            });
        }
    },
    
    prev: function()
    {
        var p = this.currentImage - 1 < 0 ? this.imageCount-1 : this.currentImage - 1;
        this.currentImage = p;
        this.show();
    },
    
    next: function()
    {
        var n = this.currentImage + 1 >= this.imageCount? 0 : this.currentImage + 1;
        this.currentImage = n;
        this.show();
    },
    
    show: function()
    {
        this.images.each(function(img, i){
            var d = i == this.currentImage ? '' : 'none';
            img.setStyle({
                display: d
            })
        }, this);
        this.setTitle();
        this.setCount();
    }
    
});