var Flickritis = new Class({
    element : $empty(),
    flickr_id : $empty(),
    large : $empty(),
    lightbox : $empty(),
    bound_keypress : $empty,
    initialize : function(e){
        this.element = e;
        // grab info from flickr API about this image
        // extract the photo's ID
        this.flickr_id = $(this).get('src').toString();
        this.flickr_id = this.flickr_id.substr(this.flickr_id.lastIndexOf('/') + 1);
        this.flickr_id = this.flickr_id.substr(0,this.flickr_id.indexOf('_'));
        new Request.JSON({
            url : '/flickr-call.php',
            data : 'id=' + this.flickr_id,
            onSuccess : function(flickr,t){
                if (flickr.stat == 'ok'){
                    // find the large photo
                    flickr.sizes.size.each(function(fl){
                        if (fl.label.toLowerCase() == 'large') {
                            this.large = fl;
                        }
                    }.bind(this));
                    this.element.set('rel','flickr');
                    this.element.getParent().addEvent('click',this.init_lightbox.bindWithEvent(this));
                }
            }.bind(this)
        }).send();
    },
    init_lightbox : function(e){
        var win = window.getSize();
        this.large.width = this.large.width.toInt();
        this.large.height = this.large.height.toInt();
        
        if (this.large.width > win.x || this.large.height > win.y) {
            var scale;
            if (this.large.width > win.x) scale = win.x / this.large.width;
            if (this.large.height > win.y) scale = win.y / this.large.height;
            this.large.width = this.large.width * scale;
            this.large.height = this.large.height * scale;
        }

        this.large.width -= 40;
        this.large.height -= 40;

        if (this.lightbox == $empty()) {
            if (document.getElement('#lightbox') == null){
                // create the lightbox element
                this.lightbox = new Element('div',{'id' : 'lightbox'});
                this.lightbox.setStyles({
                    'position' : 'absolute',
                    'top' : 0,
                    'left' : 0,
                    'padding' : 20,
                });
                var wait = new Element('p').set('text','Wait.')
                    .setStyles({
                        'width' : '100%',
                        'textAlign' : 'center',
                        'position' : 'absolute',
                        'top' : (this.large.height / 2) - 20,
                        'left' : 0
                    });
                this.lightbox.grab(wait);
                $(document.body).grab(this.lightbox,'bottom');
            } else {
                this.lightbox = document.getElement('#lightbox');
            }
        }
        this.lightbox.set('tween',{duration : 200}).tween('opacity',1);
        var lb_width = win.x - 60;
        // position lightbox so that the scroll offset is right
        this.lightbox.setStyles({
            'width' : lb_width,
            'height' : this.large.height,
            'zIndex' : 9999,
            'background' : '#fff',
            'background' : 'rgba(255,255,255,70)'
        });
        var y_offset = $(document.body).getOffsets().y * -1;
        var x_width = $(document.body).getSize().x;
        this.lightbox.setStyles({
            'top' : y_offset,
            'textAlign' : 'center'
        });
        var lb_img = this.lightbox.getElement('img');
        if (lb_img) {
            lb_img.set('tween',{
                    duration:400,
                    onComplete : function(){
                        lb_img.dispose();
                    }
                })
                .tween('opacity',0);
            }
            
        var im = new Element('img',{'src' : this.large.source,'title' : 'j=next,k=previous,o=open,q=close'})
            .setStyles({
                'position' : 'absolute',
                'top' : 20,
                'left' : (lb_width - this.large.width) / 2,
                'width' : this.large.width,
                'height' : this.large.height,
                'opacity' : 0
            })
            .addEvent('load',function(e){
                this.set('tween',{duration:400})
                    .tween('opacity',1);
            });

        this.lightbox.grab(im);
        this.element.addClass('open');
        window.addEvent('click',this.close_lightbox.bindWithEvent(this));
        this.bound_destroy = this.filter_keypress.bindWithEvent(this);
        window.addEvent('keypress',this.bound_destroy);
        return false;
    },
    filter_keypress : function(e){
        var src = document.getElements('img[rel=flickr]');
        switch (e.key) {
            case 'k': case 'up':
                src.reverse();
                this.nav(src);
                return false;
            break;
            case 'j': case 'down':
                this.nav(src);
                return false;
            break;
            case 'o': case 'right':
                window.open(this.element.getParent().get('href'));
                return false;
            break;
            case 'q': case 'esc':
                this.close_lightbox();
                return false;
            break;
        }
        return true;
    },
    nav : function(src){
        var o,f = false;
        src.each(function(el){
            if (o == undefined) {
                if (el.hasClass('open')) o = el;
            } else {
                if (!f){
                    f = true;
                    o.removeClass('open');
                    window.removeEvent('keypress',this.bound_destroy)
                    el.getParent().fireEvent('click');
                    return true;
                }
            }
        }.bind(this));
    },
    close_lightbox : function(){
        this.element.removeClass('open');
        if (this.lightbox) {
            window.removeEvent('keypress',this.bound_destroy)
            this.lightbox.set('tween',{
                duration : 400,
                onComplete : function(){
                    this.lightbox.setStyles({
                        'width' : 0,
                        'height' : 0
                    });
                    var im = this.lightbox.getElement('img');
                    if (im) im.dispose();
                }.bindWithEvent(this)
            }).tween('opacity',0);
        }
    },
    toElement : function(){
        return this.element;
    },
    log : function(){
    }
});
window.addEvent('domready',function(){
    $(document.body).getElements('a[href*=flickr.com] img[src*=flickr.com]').each(function(e){
        var fl = new Flickritis(e);
    });
});