var FancyZoom = Class.create({
    initialize: function(element) {
        this.element = $(element);
        this.zoom    = $(this.element.readAttribute('href').gsub(/^#/, ''));
        this.zooming = false;
        this.bg      = 'url(/life/images/shadow_round_small2.png) no-repeat';
        if (this.element && this.zoom) {
            this.zoom.addClassName('zoom');
            this.zoom.setStyle({
                position	: 'absolute',
                margin		: '0',
                padding		: '0'
            });
            this.zoomWidth  = this.zoom.getWidth();
            this.zoomHeight = this.zoom.getHeight();
            this.zoom.hide();
            this.element.observe('click', this.onClick.bindAsEventListener(this));
            this.addCloseButton();
        }
    },
    
    addCloseButton: function() {
        var a   = new Element('a', {href:'#'});
        var img = new Element('img', {src:'/life/images/closebox.png', alt:'Close'});
        a.appendChild(img);
        this.zoom.appendChild(a);
        this.zoomLink = $(a);
        this.zoomLink.observe('click', this.onCloseClick.bindAsEventListener(this)).addClassName('zoom_close');
        $(img).setStyle('border:none');
        
        
    },
    
    onClick: function(e) {
        e.stop();
        this.zoomIn(e);
    },
    
    onCloseClick: function(e) {
        e.stop();
        swfobject.getObjectById('video1').pause();
        this.zoomOut(e);
    },
    
    windowSize: function() {
        var width  = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
        var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
        var x      = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
        var y      = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
        return {'width':width, 'height':height, 'x':x, 'y':y}
    },
    
    
    zoomIn: function(e) {
        if (this.zooming) return;
        this.zooming   = true;
        var self       = this;
        var d          = this.windowSize();
        var yOffset    = document.viewport.getScrollOffsets()[1];
        var newTop     = (d.height/2) - (this.zoomHeight/2) + yOffset;
        var newLeft    = (d.width/2) - (this.zoomWidth/2);
        this.curOffset = this.element.cumulativeOffset();
        this.curTop    = e ? e.pointerY() : this.curOffset.top + 50;
        this.curLeft   = e ? e.pointerX() : this.curOffset.left - 40;
        this.moveX     = -(this.curLeft - newLeft);
        this.moveY     = -(this.curTop - newTop);
        $$('div.zoom').invoke('hide');
        this.zoom.setStyle({
            position		: 'absolute',
            top					: this.curTop+'px',
            left				: this.curLeft+'px',
            background	: this.bg
        });
        
        new Effect.Parallel([
        new Effect.Appear(this.zoom, {sync:true}),
        new Effect.Move(this.zoom, {x: this.moveX, y: this.moveY, sync: true}),
        new Effect.Scale(this.zoom, 100, {
            scaleFrom			: 0,
            scaleContent	: false,
            sync					: true,
            beforeStart: function(effect) {
                $(effect.element).setStyle({
                    width: self.zoomWidth+'px',
                    height: self.zoomHeight+'px'
                });
                self.addBgColorIfIE();
                self.zoom.select('div').invoke('hide');
            },
            afterFinish: function(effect) {
                self.removeBgColorIfIE();
                self.zoom.select('div').invoke('show');
                self.zoomLink.show();
                self.zoom.setStyle({
                    width:self.zoomWidth,
                    height:self.zoomHeight,
                    background:self.bg
                })
                self.zooming = false;
            }
        })
        ], { duration: 0.3 });
    },
    
    zoomOut: function(e) {
        if (this.zooming) return;
        this.zooming = true;
        var self = this;
        new Effect.Parallel([
        new Effect.Move(this.zoom, {x: this.moveX*-1, y: this.moveY*-1, sync: true}),
        new Effect.Scale(this.zoom, 0, {
            scaleFrom			: 100,
            scaleContent	: false,
            sync					: true,
            beforeStart: function(effect) {
                self.addBgColorIfIE();
                self.zoomLink.hide();
                self.zoom.select('div').invoke('hide');
            },
            afterFinish: function(effect) {
                self.removeBgColorIfIE();
                self.zoom.select('div').invoke('show');
                self.zooming = false;
            }
        }),
        new Effect.Fade(this.zoom, {sync:true})
        ], { duration: 0.5 });
    },
    
    // prevents the thick black border that happens when appearing or fading png in IE
    addBgColorIfIE: function() {
        if (Prototype.Browser.IE) this.zoom.setStyle({ background: '#fff ' + this.bg });
    },
    
    removeBgColorIfIE: function() {
        if (Prototype.Browser.IE) this.zoom.setStyle({ background: this.bg });
    }
});

$(document).observe('dom:loaded', function() {
    $$('a.fancy').each(function(el) { new FancyZoom(el); });
});