var PhotoOverlay = new Class({
    initialize : function(src, html) {
        this.img = Asset.image(src, {onLoad : this.imageLoaded.bind(this)});
        this.options = {};
        this.options.initialWidth = 200;
        this.options.initialHeight = 200;
        var scroll = $(document.window).getScroll();
        this.con = new Element('div', {id : 'goCon', styles : {top : (scroll.y + 20)}}).inject($(document.body));
        this.canvas = new Element('div', {'id':'goCanvas', 'styles':{'width':this.options.initialWidth,'height':this.options.initialHeight, 'opacity':0, border : '20px solid white'}}).inject(this.con);
        this.canvas.set('tween',{duration:500,link:'chain'});
        this.canvas.addClass('loading');
        this.canvas.tween('opacity', 1);
        this.nav = null;
        this.html = html;
    },
    imageLoaded : function() {
        var tran = new Fx.Morph(this.canvas,{duration:'short', transition : Fx.Transitions.Sine.easeOut, link : 'chain'});
        var h = this.img.get('height');
        var obj = this;
        obj.canvas.removeClass('loading');
        tran.start({'height': h, 'width' : this.img.get('width')}).chain(function() {
            obj.canvas.adopt(obj.createNav());
            this.start({height : h.toInt() + obj.nav.getSize().y.toInt()});
        }).chain(function() {
            obj.canvasReady();
        });

    },
    canvasReady : function() {
        this.img.setStyle('opacity', 0);
        this.img.inject(this.canvas, 'top')
        this.nav.tween('opacity', 1);
        this.img.tween('opacity', 1);
    },
    createNav : function() {
        var that = this;
        this.nav = new Element('div' , {id : 'goNav'});
        var cap = new Element('div', {html : that.html, id : 'goCaption'}).inject(this.nav);
        var close = new Element('a', {id : 'goClose', html : 'Close', href : '#'}).inject(cap);
        close.addEvent('click', this.close.bind(this));
        this.nav.setStyle('opacity', 0);
        return this.nav;
    },
    close : function(evt) {
        evt.preventDefault();
        var that = this;
        var fade = new Fx.Tween(this.canvas, {duration : 'long', property : 'opacity', onComplete : function() {
            that.con.destroy();
        }});
        fade.start(0);
    }
});
var MultiPhotoOverlay = new Class({
    Extends : PhotoOverlay,
    initialize : function(src, html, links) {
        this.links = links;
        this.parent(src, html);
    },
    createNav : function() {
        var self = this;
        this.links.each(function(l, i) {
            if(l.get('href') == self.img.get('src')) {
                var coords = self.canvas.getCoordinates();
                if (i > 0) {
                    self.previous = new Element('a', {html : '<<', href : '#', 'class' : 'oNav', events : {'click' : function(evt) {
                        evt.preventDefault();
                        var oldImg = self.img;
                        self.img.destroy();
                        self.nav.destroy();
                        self.previous.destroy();
                        if (self.next) {
                            self.next.destroy();
                        }
                        self.nav = null;
                        self.html = self.links[i-1].getElement('img').get('alt');
                        self.img = Asset.image(self.links[i-1].get('href'), {onLoad : self.imageLoaded.bind(self)});
                    }},
                    styles : {
                        position : 'absolute',
                        top : ((coords.height/2) - 60),
                        left: coords.left - 60,
                        width : '60px',
                        height : '60px',
                        backgroundColor : '#ffffff',
                        borderRadius : '30px 0 0 30px'
                    }});
                    $('goCanvas').adopt(self.previous);
                }
                if (i+1 < self.links.length) {
                    self.next = new Element('a', {html : '>>', href : '#', 'class' : 'oNav', events : {'click' : function(evt) {
                        evt.preventDefault();
                        var oldImg = self.img;
                        self.img.destroy();
                        self.nav.destroy();
                        self.next.destroy();
                        if (self.previous) {
                            self.previous.destroy();
                        }
                        self.nav = null;
                        self.html = self.links[i+1].getElement('img').get('alt');
                        self.img = Asset.image(self.links[i+1].get('href'), {onLoad : self.imageLoaded.bind(self)});
                    }},
                    styles : {
                        position : 'absolute',
                        top : ((coords.height/2) - 60),
                        left: coords.right - 8,
                        width : '60px',
                        height : '60px',
                        backgroundColor : '#ffffff',
                        borderRadius : '0 30px 30px 0'
                    }});
                    $('goCanvas').adopt(self.next);
                }
            }
        });
        this.canvas.addClass('loading');
        return this.parent();
    },
    close : function(evt) {
        if (this.next !== undefined) {
            var fade = new Fx.Tween(this.next, {duration : 'long', property : 'opacity'});
            fade.start(0);
        }
        if (this.previous !== undefined) {
            var fade = new Fx.Tween(this.previous, {duration : 'long', property : 'opacity'});
            fade.start(0);
        }
        this.parent(evt);
    }
});