var detail = new Class({
    _req: false,
    _heightFx: false,
    _fadeFx: false,
    _scrollFx: false,
    _loaderHeight: 50,
    _diap: false,
    initialize: function () {
        this._req = new Request.HTML({ 'url': '/ajax/getDetails.aspx', 'update': $('detailWarp'), "onComplete": function () { this._showContainer(); this._initDiaporama(); } .bind(this) });
        this._heightFx = new Fx.Tween($('detail'), { property: 'height', duration: 1000, onComplete: function (e) { if (e.getStyle("height").toInt() != this._loaderHeight) { e.setStyle("height", null); } } .bind(this) });
        this._fadeFx = new Fx.Tween($('detailWarp'), { property: 'opacity' });
        this._scrollFx = new Fx.Scroll(window);
        site.addHistoryEvent('detailHistory', 'id');


        site.addEvent('detail', function (id) { this._open(id); site.HM.set("id", id); site.HM.set("i", 0); } .bind(this));
        site.addEvent('hideDetails', function (id) { this._hide(); } .bind(this));
        $('list').getElements('article').each(function (artElt) {
            var curId = artElt.get('rel');
            artElt.getElements('a').each(function (link) {
                link.set('href', "javascript:site.call('detail', '" + curId + "')");
            });
        });

        site.addEvent('detailHistory', function (o) { this._open(o.v); } .bind(this));
        if ($('detail').get('rel') && $('detailSlider')) {
            site.HM.set("id", $('detail').get('rel'));
            this._initDiaporama();
        }
    },
    _hide: function () {
        this._fadeFx.cancel();
        $('detailWarp').empty();
        this._heightFx.cancel();
        this._heightFx.start(0);
        $('detail').set('rel', "hideDetails");
    },
    _open: function (id) {
        if (!id || $('detail').get('rel') == id)
            return;
        this._hideContainer();
        this._scrollFx.toTop();
        this._req.cancel();
        this._req.post({ 'id': id });
        $('detail').set('rel', id);
    },
    _initDiaporama: function () {

        if (!this._diap)
            this._diap = new diaporama({
                container: 'detailSlider',
                eltpath: 'div.slides div.slide',
                linkpath: 'nav a.slideLink',
                linktonextpath: 'nav a#tonext',
                linktoprevpath: 'nav a#toprev',
                onBeforeShow: function (eltShown) {
                    if(eltShown.get("data-type") == "video") {
                        // init the video
                        
                        eltShown.adopt(
                            new Element("iframe",  {"src" : eltShown.get("data-iframe-url"), "allowfullscreen" : "allowfullscreen", "height" :eltShown.get("data-iframe-height") + "px", "width" :eltShown.get("data-iframe-width") + "px", "styles" : {"height" :eltShown.get("data-iframe-height") + "px", "width" :eltShown.get("data-iframe-width") + "px"}})
                        );
                    }
                },
                onAfterHide: function (eltHidden) {
                    if(eltHidden.get("data-type") == "video") {
                        eltHidden.empty();
                    }
                },
            });
        else
            this._diap.init({ container: 'detailSlider', eltpath: 'div.slides div.slide', linkpath: 'nav a.slideLink' });
    },
    _hideContainer: function () {

        $('detail')
            .addClass("loading");

        this._fadeFx.cancel();
        this._fadeFx.start(0);
        this._heightFx.cancel();
        this._heightFx.start(this._loaderHeight);
    },
    _showContainer: function () {
        var size = $('detailWarp').measure(function () {
            return this.getComputedSize();
        });
        this._heightFx.cancel();
        this._heightFx.start(size.height);
        this._fadeFx.cancel();
        this._fadeFx.start(1);
        $('detailSlider').getElement("div.slides").setStyle('overflow', 'hidden');
    }

});