function ZofBox (selector, options) {
    this.selector = selector;
    this.options  = options;
    this.disabled = false;
    this.els      = false;

    this.setup     = zofbox_setup;
    this.show_prev = zofbox_show_prev;
    this.show_next = zofbox_show_next;
    
    this.__show_slide      = __zofbox_show_slide;
    this.__create_elements = __zofbox_create_elements;
    this.__display_image   = __zofbox_display_image;
}

function zofbox_setup() {
    var els = $$(this.selector);

    this.els = els;
    this.__create_elements();
    
    for ( var i = 0; i < els.length; i++ ) {
        els[i].onclick = function(box,el,num) {
            return function() {
                box.__show_slide();
                box.cur_el_num = num;
                box.__display_image(this.href);
                return false;
            }
        }(this,els[i],i)
    }
}

function zofbox_show_prev() {
    var box = this;

    if (box.cur_el_num <= 0 ) {
        return true;
    }
    box.__show_slide();
    box.cur_el_num--;
    box.__display_image( box.els[box.cur_el_num].href );
}

function zofbox_show_next() {
    var box = this;
    if (box.cur_el_num+1  >= box.els.length ) {
        return false;
    }

    box.__show_slide();
    box.cur_el_num++;
    box.__display_image( box.els[box.cur_el_num].href );
}

function __zofbox_display_image(img_href) {
    var box = this;
    
    if ( box.cur_el_num == box.els.length - 1 ) {
        box.el_next_arrow.addClass('zofbox_no_more_slides');
    }
    else {
        box.el_next_arrow.removeClass('zofbox_no_more_slides');
    }

    if ( box.cur_el_num == 0 ) {
        box.el_prev_arrow.addClass('zofbox_no_more_slides');
    }
    else {
        box.el_prev_arrow.removeClass('zofbox_no_more_slides');
    }

    if ( this.els.length-1 > this.cur_el_num ) {
        var img_next = new Element('img', {
            'src': this.els[ this.cur_el_num + 1 ].href
        });
    }
    if ( box.multi ) {
        var window_size = window.getSize();
        box.el_prev_arrow.set({
            'styles': {
                'top': parseInt(window_size.y/2 - 20) + 'px',
                'left': 0
            }
        });

        box.el_next_arrow.set({
            'styles': {
                'top': parseInt(window_size.y/2 - 20) + 'px',
                'right': 0
            }
        });
    }

    var img = new Element('img');
    img.onload = function() {
        var size = {};
        size.x = this.width;
        size.y = this.height;
        var window_size = window.getSize();
        if ( size.x > window_size.x - 80 ) {
            var orig_size = size.x;
            size.y = parseInt(size.y * (window_size.x - 86) / size.x);
            size.x = window_size.x - 80;
        }
        if ( size.y > window_size.y ) {
            var orig_size = size.y;
            size.x = parseInt(size.x * window_size.y / size.y);
            size.y = window_size.y;
        }

        $('zofbox_view').set({
            'src': this.src,
            'width': size.x,
            'height': size.y,
            'styles': {
                'left': parseInt(window_size.x/2 - size.x/2) + 'px',
                'top': parseInt(window_size.y/2 - size.y/2) + 'px'
            }
        });
        this.dispose();
    }
    img.src = img_href;
}

function __zofbox_create_elements() {

    if ( $('zofbox_tint') ) { return }

    var tint = new Element('div', {
            'id': 'zofbox_tint',
            'styles': {
                'opacity': '.5'
            }
        }
    );
    
    tint.inject(document.body, 'bottom');
    
    var container = new Element('div', {
            'id': 'zofbox_container'
        }
    );

    container.onclick = function(box) {
        return function() {
            $('zofbox_tint').set({'styles':{'display':'none'}});
            this.set({'styles':{'display':'none'}});
            var window_size = window.getSize();
            $('zofbox_view').set( {
                'src': '/zofbox/loading.gif',
                'width': 40,
                'height': 40,
                'styles': {
                    'left': parseInt(window_size.x/2 - 20) + 'px',
                    'top': parseInt(window_size.y/2 - 20) + 'px'
                }
            });
//             document.body.set({'styles':{'position':'relative'}});
//             $$('html')[0].set({
//                 'styles':{
//                         'overflow-y':'scroll',
//                         'overflow-x':'auto'
//                     }
//             });
        }
    }(this)
    container.inject(document.body, 'inside');

    var window_size = window.getSize();
    new Element('img', {
            'id': 'zofbox_view',
            'alt': '',
            'src': '/zofbox/loading.gif',
            'width': 40,
            'height': 40,
            'styles': {
                'left': parseInt(window_size.x/2 - 20) + 'px',
                'top': parseInt(window_size.y/2 - 20) + 'px'
            }
        }
    ).inject(container, 'bottom');

    if ( this.els.length > 1 ) {
        this.multi = 1;
        this.el_prev_arrow = new Element('span', {
            'id': 'zofbox_prev_arrow',
            'class': 'zofbox_no_more_slides'
        }).inject(container,'bottom');
        this.el_next_arrow = new Element('span', {'id': 'zofbox_next_arrow'}).inject(container,'bottom');

        this.el_prev_arrow.onclick = function(box) {
            return function(e) {
                box.show_prev();
                return nobubble(e);
            }
        }(this)

        this.el_next_arrow.onclick = function(box) {
            return function(e) {
                box.show_next();
                return nobubble(e);
            }
        }(this)
    }
}


function __zofbox_show_slide() {
//     $$('html')[0].set({'styles':{'overflow':'hidden'}});
    document.body.set({'styles':{'position':'static'}});
    $('zofbox_tint').set({ 'styles': {
                    'top': 0, //window.getScroll().y + 'px',
                    'left': 0, //window.getScroll().x + 'px',
                    'width': window.getScrollSize().x + 'px',
                    'height': window.getScrollSize().y + 'px',
                    'display': 'block'
                }
            });
            
    $('zofbox_container').set({ 'styles': {
            'top': window.getScroll().y + 'px',
            'left': window.getScroll().x + 'px',
            'width': window.getSize().x + 'px',
            'height': window.getSize().y + 'px',
            'display': 'block'
        }
    });
}

function nobubble(e) {
    var event = e || window.event;

    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}