var lbOverlay;
var imagebox;

var ImageBox = new Class({

    Implements: [Chain, Options],

    lightbox: null,
    loader: null,
    lightboxSpinner: null,
    onClose: null,
    _options: {
        'border': 10,
        'animation': true,
        'closeButtonOnly': true,
        'bgcolor': '#FFFFFF',
        'bordercolor': '#FFFFFF',
	fixedDimensions: false
    },

    initialize: function() {

        // big image overlay

        this.image = new Element('div', {'class': 'lbImage', 'id': 'lbImage'});
        this.imageOverlay = new Element('div', {'id': 'lbImageOverlay'})
            .adopt(new Element('a', {'id': 'lbLogo'}));

        this.lightboxSpinner = new Element('img', {});

        this.lightbox = new Element('div', {'class': 'lbContainer'})
            .adopt(this.image)
            .adopt(this.imageOverlay)
            .setStyles({'display': 'none', 'position': 'absolute'})
            .inject(document.body);

        // dynamically attach close button
    	var closeButton = new Element('img', {
        	'class': 'widgetClose',
        	'src': '/css/img/dialogClose.png',
        	'alt': 'Close'
    	})
    	.setStyles({'top': -7, 'right': -16, 'display': 'none'})
    	.addEvent('click', this.close.bindWithEvent(this))
    	.addEvent('mousedown', function(e){ var e = new Event(e);  e.stop()})
    	.addEvent('mouseup', function(e){ var e = new Event(e);  e.stop()})
    	.inject(this.lightbox);

        this.fxOverlay = new Fx.Tween(lbOverlay, {'property': "opacity", 'duration': 500}).set(0);
    },

    open: function(img, options) {

        lbOverlay.setStyles({top: window.getScrollTop(), height: window.getHeight()});

        this.options = {};
        this.setOptions(this._options);
        this.setOptions(options);

        if (this.options.onclose) this.onClose = this.options.onclose;

        this.boundClose = this.close.bindWithEvent(this);

        // close by clicking on image - now optional
        if (false == this.options.closeButtonOnly)
        {
            this.lightbox.addEvent('click', this.boundClose);
        }


        this.fxOverlay.start(0.7);

        // hide image until it is loaded
        this.image.setStyles({
            'backgroundImage': '',
            'display': 'none',
            'borderWidth': this.options.border+'px',
            'borderColor': this.options.bordercolor
        });

        this.lightbox.setStyles({
            'display': '',
            'padding': this.options.border,
            'backgroundColor': this.options.bgcolor,
            'top': window.getScrollTop() + ((window.getHeight() - this.options.height) / 2) - this.options.border,
            'left': ((window.getWidth() - this.options.width) / 2) - this.options.border
        }).addClass('lbLoading');

        $$(this.lightbox, this.image).setStyles({
            'width': this.options.width + 'px',
            'height': this.options.height + 'px'
        });

        // set up a logo display
        if (null != this.options.logo)
        {
            this.imageOverlay.getElement('#lbLogo').setStyles({'display': 'none'});
            this.imageOverlay.removeEvents();
        }

        this.loader = new Image();
        this.loader.onload = this.loaded.bindWithEvent(this);
        this.loader.src = img;
    },

    loaded: function() {
        this.chain(
            function() {this.resize()},
            function() {this.show()}
        ).callChain();
    },

    resize: function() {

	if (this.options.fixedDimensions){
	    w = this.options.width;
	    h = this.options.height;
	}
	else {
            w = this.loader.width;
            h = this.loader.height;
	}

        if ((w != this.options.width || h != this.options.height) && (true == this.options.animation))
        {
            var morph = new Fx.Morph(this.lightbox, {
                'duration': 700,
                'onComplete': function() { this.callChain();}.bind(this)
            }).start(
            {
                'width': w + 'px',
                'height': h + 'px',
                'top': window.getScrollTop() + ((window.getHeight() - h) / 2) - this.options.border * 2,
                'left': ((window.getWidth() - w) / 2) - this.options.border * 2
            });
        }
        else
        {
            this.callChain();
        }
    },

    show: function()
    {
        this.image.setStyles({
            'backgroundPosition': '0px 0px'
        });

	if (this.options.fixedDimensions){
	    var w = this.options.width;
	    var h = this.options.height;
	}
	else {
	    var w = this.loader.width;
	    var h = this.loader.height;
	}

        if (this.options.animation)
        {
            // adjust image size
	    this.image.setStyles({
                'width': w,
                'height': h
	    });
        }
        else
        {
	    this.image.setStyles({
                'width': w,
                'height': h
            });


            var top = (this.options.height - h) / 2;
            var left = (this.options.width - w) / 2;

            // do not adjust image size - center instead
            this.image.setStyles({
                'backgroundPosition': left + 'px ' + top + 'px'
            });
        }

        //this.loader.setStyles({'opacity': 1, 'display': 'block', 'cursor': 'pointer'});
	this.image.empty();

        if (this.options.fixedDimensions){
	    this.image.adopt(new Element('img', {src: this.loader.src})
			     .setStyles({width: w,
					 height: h
					})
			    );
	    this.image.setStyles({display: ''});
	    
	}
	else {
	    this.image.setStyles({
		'backgroundImage': 'url(' + this.loader.src.replace('(', '%28').replace(')', '%29') + ')',
		'display': ''
            });
	}


        this.lightbox
            .removeClass('lbLoading')
            .getElement('.widgetClose').setStyles({'display': '', 'opacity': 1});

        // set up a logo display
        if (null != this.options.logo)
        {

            this.imageOverlay.getElement('#lbLogo').setStyles({
                'display': 'none',
                'backgroundImage': 'url(' + this.options.logo.image + ')',
                'width': this.options.logo.w,
                'height': this.options.logo.h,
                // 'top': (this.options.height - this.options.logo.h) / 2,
                // 'left': (this.options.width - this.options.logo.w) / 2
                'top': 10,
                'right': 10
            })
            .set('href', this.options.logo.link)
            .set('target', '_blank');

            this.imageOverlay
                .setStyles({
                    'width': this.options.width + 'px',
                    'height': this.options.height + 'px'
                })
                .removeEvents()
                .addEvent('mousemove', this.logoMouseOver.bindWithEvent(this))
                .addEvent('mouseleave', this.logoMouseOut.bindWithEvent(this));
        }
    },

    close: function()
    {
        this.fxOverlay.cancel().start(0);

        this.lightbox.removeEvent('click', this.boundClose);

        this.lightbox
            .setStyles({'display': 'none', 'cursor': 'default'})
            .getElement('.widgetClose').setStyle('display', 'none');

        if (this.onClose) this.onClose();
    },

    content: function(html)
    {
        this.image.set('html', html);
    },

    logoMouseOver: function()
    {
        this.imageOverlay.getElement('#lbLogo').setStyle('display', 'block');
    },

    logoMouseOut: function()
    {
        this.imageOverlay.getElement('#lbLogo').setStyle('display', 'none');
    }

});

window.addEvent('domready', function() {
    lbOverlay = new Element("div", {id: "lbOverlay"})
    .setStyle('visibility', 'hidden')
    .inject(document.body);

    imagebox = new ImageBox();
});