/* MooFlow Viewer (extra JS MooFlowViewer.js)
* v0.1dev useViewer:true
*/
MooFlow.implement({
    attachViewer: function () {
        return this;
    },
    flowStart: function () {
        this.hideIcon();
    },

    flowComplete: function () {
        this.createIconTip();
    },

    createIconTip: function () {
        var cur = this.getCurrent();
        var divSombra = cur.con.getFirst();
        divSombra.style.opacity = 0;
        divSombra.style.filter = "alpha(opacity=0)";
        divSombra.id = "sombraOff";

        if (!$chk(cur.rel) || !$chk(cur.href)) return;
        this.tipFx = new Fx({ link: 'cancel' });
        if (!$chk(this.icon)) { this.icon = new Element('a').addClass('show').setStyles({ 'display': 'none', 'opacity': '0' }).inject(this.MooFlow); }
        this.icon.addEvent('click', this.onClickView.bind(this, cur));
        this.icon.addEvent('mouseenter', this.showTip.bind(this, cur));
        this.icon.addEvent('mouseleave', this.hideTip.bind(this, cur));
        if (!$chk(this.tip)) { this.tip = new Element('div').addClass('tooltip').setStyles({ 'display': 'none', 'opacity': '0' }).inject(this.MooFlow); }
        this.tip.set('html', cur.alt);
        this.icon.addClass(cur.rel.toLowerCase());
        this.icon.setStyle('display', 'block').fade(1);
    },

    showTip: function (cur) {
        //this.tip.setStyles({ 'top': 100, 'display': 'block' });
        //this.tipFx = new Fx.Morph(this.tip, { link: 'cancel' }).start({ 'opacity': 0.8, 'top': 175 });
    },

    hideTip: function (cur) {
        //this.tipFx.start({ 'opacity': 0, 'top': 100 });
    },

    hideIcon: function () {
        var sombraOff = document.getElementById('sombraOff');
        if (sombraOff != null) {
            sombraOff.style.opacity = 0.4;
            sombraOff.style.filter = "alpha(opacity=40)";
            sombraOff.id = "";
        }

        if ($chk(this.icon) && $chk(this.icon.getParent())) this.icon.destroy();
        if ($chk(this.tip) && $chk(this.tip.getParent())) this.tip.destroy();
        this.icon = this.tip = null;
    },

    onClickView: function (cur) {
        switch (cur.rel.toLowerCase()) {
            case 'image':
                this.loadImage(cur);
                break;
            case 'link':
                window.open(cur.href, cur.target || '_blank');
                break;
            default:
        }
    },

    loadImage: function (cur) {
        this.icon.removeClass('image').addClass('viewerload');
        this.image = new Asset.image(cur.href, { onload: this.showImage.bind(this) });
    },

    showImage: function () {
        var cur = this.getCurrent();
        //var c = cur.con.getFirst().getCoordinates();


        var c = cur.con.getElement('img').getCoordinates();
        this.image.inject(document.body);
        this.image.addEvent('click', this.hideImage.bind(this));
        this.image.setStyles({ 'left': c.left, 'top': c.top, 'width': c.width, 'height': c.height, 'position': 'absolute', 'z-index': '103' });


        var divHideBigImage = document.getElementById("divHideBigImageRight");
        divHideBigImage.style.display = "block";
        $('divHideBigImageRight').addEvent('click', this.hideImageAndNext.bind(this));

        var divHideBigImage = document.getElementById("divHideBigImageLeft");
        divHideBigImage.style.display = "block";
        $('divHideBigImageLeft').addEvent('click', this.hideImageAndPrev.bind(this));


        var imageFx = new Fx.Morph(this.image, { transition: Fx.Transitions.Sine.easeOut });
        var to = { x: this.image.get('width'), y: this.image.get('height') };
        var box = document.getSize(), scroll = document.getScroll();
        var pos = { x: scroll.x + ((box.x - to.x) / 2).toInt(), y: scroll.y + ((box.y - to.y) / 2).toInt() };
        var vars = { left: pos.x, top: (pos.y + 20), width: to.x, height: to.y };
        imageFx.start(vars);
    },

    hideImage: function () {
        var divHideBigImageLeft = document.getElementById("divHideBigImageLeft");
        divHideBigImageLeft.style.display = "none";
        $('divHideBigImageLeft').removeEvents('click');
        var divHideBigImageRight = document.getElementById("divHideBigImageRight");
        divHideBigImageRight.style.display = "none";
        $('divHideBigImageRight').removeEvents('click');
        this.icon.removeClass('viewerload').addClass('image');
        this.image.dispose();
    },

    hideImageAndNext: function () {
        //MooFlow
        var divHideBigImageLeft = document.getElementById("divHideBigImageLeft");
        divHideBigImageLeft.style.display = "none";
        $('divHideBigImageLeft').removeEvents('click');
        var divHideBigImageRight = document.getElementById("divHideBigImageRight");
        divHideBigImageRight.style.display = "none";
        $('divHideBigImageRight').removeEvents('click');
        //this.icon.removeClass('viewerload').addClass('image');
        this.image.dispose();
        this.next();
    },

    hideImageAndPrev: function () {
        //MooFlow
        var divHideBigImageLeft = document.getElementById("divHideBigImageLeft");
        divHideBigImageLeft.style.display = "none";
        $('divHideBigImageLeft').removeEvents('click');
        var divHideBigImageRight = document.getElementById("divHideBigImageRight");
        divHideBigImageRight.style.display = "none";
        $('divHideBigImageRight').removeEvents('click');
        //this.icon.removeClass('viewerload').addClass('image');
        this.image.dispose();
        this.prev();
    }


});

function teste() {
    alert('teste');
}