var TopImageViewer = Class.create(ImageViewer, {
    image_asset: '',
    initialize: function (host, parent, assets_page) {
        this.host = host;
        this.rot_re = new RegExp("t(\\d)_");
        this.assets_page = assets_page;
        this.photos = parent.select('img.view').map(function (s) { return s.id });
        this.parent = parent.observe('click', function (e) {
            var el;
            if ((el = e.findElement('img.view'))) {
                this.view(e, el);
            }
        }.bindAsEventListener(this));
        this.rotate();
    },
    rotate: function () {
        if (this.photos.length > 0) {
            this.rotate_index = 0;
            this.rotate_backward = false;
            this.rotate_photos = this.photos.clone();
            this.host.image.cache_image($(this.rotate_photos[0]).src.replace("t0_", "t1_"));
            this.host.image.cache_image($(this.rotate_photos[1]).src.replace(this.rot_re, "t0_"));
            this.pe = new PeriodicalExecuter(function(pe) {
                if (!this.img_wnd || !this.img_wnd.isOpen) { /* skip rotate if viewing */
                    if (this.rotate_index === (this.rotate_photos.length - 1)) {
                        this.rotate_backward = true;
                    } else if (this.rotate_index === 0) {
                        this.rotate_backward = false;
                    }
                    if (this.rotate_backward) {
                        this.rotate_index--;
                    } else {
                        this.rotate_index++;
                    }
                    if (!this.rotate_backward && this.rotate_index < (this.rotate_photos.length - 1)) {
                        this.host.image.cache_image($(this.rotate_photos[this.rotate_index+1]).src.replace(this.rot_re, "t0_"));
                    }
                    var big = $(this.rotate_photos[0]).up();
                    var big_clone = [big.cloneNode(true), big.down('img').cloneNode(true)];
                    var small = $(this.rotate_photos[this.rotate_index]).up();
                    var result;
                    if ((result = this.rot_re.exec(small.down('img').src)) != null) {
                        Utils.fetch('/api/asset/'+small.id.substring(2)+'/extend', function (el, json) {
                            el.down('span.rate_up').update(json.rate_positive || 0);
                            el.down('span.rate_down').update(json.rate_negative || 0);
                            el.down('span.comments').update(json.comments_count);
                            el.up('div.one').down('div.title').down('a.avatar').setStyle({
                                backgroundImage:'url('+json.user.avatar+')'
                            }).writeAttribute({ href:json.user.url }).next('a').writeAttribute({
                                href: json.user.url
                            }).update(json.user.nick).next('span.datetime').update(json.created);
                            this.assets_page.init_one(el);
                        }.bind(this, big.up('div.one').down('div.asset').writeAttribute({id:'asset_'+small.id.substring(2)})));
                        big.writeAttribute({
                            href: small.href,
                            id: small.id
                        }).down('img').writeAttribute({
                            id: small.down('img').id,
                            src: small.down('img').src.replace(result[0], "t0_"),
                            title: small.down('img').title
                        }).appear({ from: 0, to: 1 }).up('div.one').down('div.title').down('a.clicker_href').writeAttribute({
                            href: small.href
                        }).update(small.down('img').title).up('div.one').down('a.comments').writeAttribute({
                            href: small.href
                        });
                        small.writeAttribute({
                            href: big_clone[0].href,
                            id: big_clone[0].id
                        }).down('img').writeAttribute({
                            id: big_clone[1].id,
                            src: big_clone[1].src.replace("t0_", "t"+result[1]+'_'),
                            title: big_clone[1].title
                        }).appear({ from: 0, to: 1 });
                        var tmp = this.rotate_photos[0];
                        this.rotate_photos[0] = this.rotate_photos[this.rotate_index];
                        this.rotate_photos[this.rotate_index] = tmp;
                    }
                }
            }.bind(this), 4.5);
        }

    },
    next: function (e) {
        var next;
        if (this.image_from && (this.photos.indexOf(this.image_from.id) < (this.photos.length - 1))) {
            this.image_from = $(this.photos[this.photos.indexOf(this.image_from.id) + 1]);
            this.set();
            e.stop();
        }
    },
    prev: function (e) {
        if (this.image_from && (this.photos.indexOf(this.image_from.id) > 0)) {
            this.image_from = $(this.photos[this.photos.indexOf(this.image_from.id) - 1]);
            this.set();
            e.stop();
        }
    },
    init_wnd: function ($super) {
        $super();
        this.img_wnd.container.down('div.caption').addClassName('b-asset').appendChild(
            Builder.node('div', { className:'asset', id:"" }, [
                Builder.node('div', { className:'rate_it' }, [
                    new Element('span', { className:'rate rate_up', title: I18N.like }),
                    new Element('span', { className:'rate rate_down', title: I18N.dislike }),
                    new Element('span', { className:'title' })
                ])
            ])
        );
        this.assets_page.init_one(this.img_wnd.container.down('div.caption'));
    },
    set: function () {
        this.image_asset = this.image_from.up('a').id.substring(2);
        this.img_wnd.container.down('img').stopObserving().writeAttribute({src:this.image_from.src.replace(new RegExp("t\\d?_"), 'i_')}).observe('load', function () {
            this.position();
        }.bind(this.img_wnd)).next().down('div.asset').writeAttribute({id:'asset_'+this.image_asset, 'class':'asset asset_'+this.image_asset}).down('span.title').update((this.image_from.title || this.image_from.alt) + ' <a href="'+this.image_from.up('a').href+'">'+I18N['go_to_'+this.image_from.up('a').className]+'</a>');
        Utils.fetch('/api/asset/'+this.image_asset+'/short', function (json) {
            this.down('span.rate_up').update(json.rate_positive || 0);
            this.down('span.rate_down').update(json.rate_negative || 0);
        }.bind(this.img_wnd.container.down('div.asset')));
    },
    destroy: function () {
        this.pe.stop();
        this.parent.stopObserving('click');
    }
});