var zoom = new Class({
    initialize : function() {
        this.built = false;
        this.curent = 0;
        this.src = '';
        var zum = $(document.body).getElements('a[rel=palielinat-bildi]');
        this.total = zum.length;
        this.zum = zum;
        this.chain = new Chain();
        zum.each((function(img,i) {
            img.setProperty('uiq',i + 1);
            img.addEvent('click',(function(e) {
                e.stop();
                this.preload(img.get('href'),img.get('uiq'));
            }).bind(this))
        }).bind(this))
    },
    preload : function(src,i) {
        if (!this.preloader)
            this.createPreloader()

        this.preloader.setStyle('opacity',0.75)
        this.current = i;
        this.src = src;
        var tmp = new Asset.images([src],{
            onComplete : (function() {
                tmp[0].inject($('asset'));
                this.size = tmp[0].getSize();
                tmp[0].destroy();
                this.animate();
            }).bind(this)
        })
    },
    createPreloader : function() {
        this.preloader = new Element('div',{
            styles : {
                opacity : 0
            },
            'html' : '<div></div>',
            id : 'preloader'
        }).inject(document.body)
    },
    animate : function() {
        if (this.sizer) {
            this.change();
        }
        else {
            this.showHover();
            this.createHolder();
        }
    },
    createHover : function() {
        this.cover = new Element('div',{
            'id' : 'zum-hover',
            styles : {
                opacity : 0.65
            }
        }).inject(document.body);
    },
    showHover : function() {
        if (!$chk($('zum-hover')))
            this.createHover();
        else
            this.cover.setStyle('opacity',0.65);
    },
    hideHover : function() {
        this.cover.setStyle('opacity',0);
    },
    createHolder : function() {
        this.adopted = false;
        this.sizer = new Element('div',{
            styles : {
                'background' : '#FFF',
                'padding' : 10,
                'width' : this.size.x - 100,
                'height' : this.size.y - 100,
                'position' : 'relative'
            }
        })
        this.holder = new Element('table',{
            'id' : 'zum-holder',
            'html' : '<tr><td align="center" valign="middle"></td></tr>'
        }).inject(document.body)
        this.holder.getElement('td').adopt(this.sizer)
        this.parts();
        this.resizeSizer();
    },
    parts : function() {
        this.image = new Element('div',{
            styles : {
                'background' : '#000 url(' + this.src + ') no-repeat center center',
                'width' : this.size.x,
                'height' : this.size.y,
                'position' : 'relative'
            }
        })
        this.hide = new Element('div',{
            'class' : 'zum-hide'
        })
        this.caption = new Element('div',{
            'id' : 'zum-caption',
            'class' : 'zum-caption',
            'html' : '<p></p>'
        })
        this.closeButton = new Element('div',{
            id : 'zum-close'
        })
        this.moveLeft = new Element('div',{
            'class' : 'leftTip'
        })
        this.moveRight = new Element('div',{
            'class' : 'rightTip'
        })
        this.moveLeft.removeEvents('click').addEvents({
            'click' : (function() {
                this.left();
            }).bind(this)
        })
        this.moveRight.removeEvents('click').addEvents({
            'click' : (function() {
                this.right();
            }).bind(this)
        })
        this.closeButton.removeEvents('click').addEvents({
            'click' : (function() {
                this.close();
            }).bind(this)
        })
        window.removeEvents('keyup').addEvent('keyup',(function(e) {
            if (e.key == 'esc') {
                this.close();
            }
            else if (e.key == 'left') {
                this.left();
            }
            else if (e.key == 'right') {
                this.right();
            }
        }).bind(this))
        this.hide.removeEvents('click').addEvent('click',(function() {
            this.close();
        }).bind(this));
    },
    left : function() {
        uiq = this.current
        uiq--
        if (uiq >= 1) {
            this.current = uiq;
            src = $(document.body).getElement('a[uiq=' + uiq + ']').href
            this.preload(src,uiq)
        }
    },
    right : function() {
        uiq = this.current
        uiq++
        if (uiq <= this.total) {
            this.current = uiq;
            src = $(document.body).getElement('a[uiq=' + uiq + ']').href
            this.preload(src,uiq)
            if (!this.open && this.current > 6) {
                this.open = true;
                if ($chk($('photos')))
                    $('photos').removeClass('show-few');
                if ($chk($('visas-bildes')))
                    $('visas-bildes').setStyle('display','none');
            }
        }
    },
    change : function() {
        this.imageFadeOut();
        this.resizeSizer();
    },
    imageFadeOut : function() {
        this.chain.chain(
            this.hide.morph({
                opacity : 1
            })
            ).chain(
            this.image.setStyles({
                'width' : 1,
                'height' : 1,
                'opacity' : 0
            })
            )
    },
    resizeSizer : function() {
        this.caption.getElement('p').set('html',this.zum[this.current - 1].get('rev') ? this.zum[this.current - 1].get('rev') : this.zum[this.current - 1].get('title'));
        this.clone = this.caption.clone().inject($('asset'));
        this.clone.setStyles({
            'width': this.size.x,
            'height' : 'auto'
        });
        tmpSize = this.clone.getSize();
        this.caption.setStyle('height',tmpSize.y)
        //this.clone.destroy();
        sz = this.sizer.getSize();
        if (this.size.x != sz.x || this.size.y != sz.y) {
            this.fx = new Fx.Morph(this.sizer,{
                duration : 400
            })
            this.fx.start({
                'width' : this.size.x,
                'height' : this.size.y
            }).chain((function() {
                this.image.setStyles({
                    'opacity' : 1,
                    'width' : this.size.x,
                    'height' : this.size.y,
                    'background' : '#000 url(' + this.src + ') no-repeat center center'
                })
                this.eat();
            }).bind(this))
        }
        else {
            this.eat();
        }
    },
    eat : function() {
        if (!this.adopted) {
            this.adopted = true;
            this.image.adopt(this.hide)
            this.image.adopt(this.moveLeft)
            this.image.adopt(this.moveRight)
            this.image.adopt(this.caption)
            this.caption.adopt(this.closeButton)
            this.sizer.adopt(this.image)
            new Tips('.leftTip',{
                'className' : 'ltp',
                offset : {
                    x : -54
                },
                onShow : (function(tip) {
                    if (this.current > 1)
                        tip.setStyle('visibility','visible')
                }).bind(this)
            });
            new Tips('.rightTip',{
                'className' : 'rtp',
                onShow : (function(tip) {
                    if (this.current < this.total)
                        tip.setStyle('visibility','visible')
                }).bind(this)
            });
            this.show();
        }
        else
            this.show();
    },
    show : function() {
        this.hide.morph({
            opacity : 0.001
        })
        this.preloader.setStyle('opacity',0)
    },
    close : function() {
        window.removeEvents('keyup');
        $$('.ltp').destroy();
        $$('.rtp').destroy();
        this.preloader.setStyle('opacity',0);
        cl = new Fx.Morph(this.sizer,{
            duration : 300
        })
        cl.start({
            opacity : 0
        }).chain((function() {
            this.sizer = false;
            this.holder.destroy();
            this.hideHover();
        }).bind(this))
    }
})
window.addEvent('domready',function() {
    new zoom();
})