// forum.js: dynamically add images to forum posts
document.observe('dom:loaded', function() {new ForumHandler();});
 
var ForumHandler = Class.create({
    rowIndex: 0,
    imageRowTemplate: null,
    videoRowTemplate: null,
    thumbCount: null,
    currentThumb: null,

    initialize: function(el)
    {
        this.imageRowTemplate = new Template('<tbody class="media"><tr><td class="label">afbeelding:</td><td><input type="file" name="image[image#{rowindex}]"><a href="#" id="removeimage#{rowindex}">verwijderen</a></td></tr><tr><td class="label">omschrijving:<br />(max 60 karakters)</td><td><input type="text" maxlength="60" name="description[image#{rowindex}]"></td></tr></tbody>');
        this.videoRowTemplate = new Template('<tbody class="media"><tr><td class="label">youtube id:</td><td><input type="text" name="videoid" style="width:200px;"><a href="#" id="removevideo">verwijderen</a></td></tr><tr><td class="label">omschrijving:</td><td><input type="text" name="videodescription"></td></tr></tbody>');
        if ($('formpost')) {
            $('addimage').observe('click', this.addImageInput.bindAsEventListener(this));
            $('addvideo').observe('click', this.addVideoInput.bindAsEventListener(this));
        }
        $$('a.moderate').each(function(a)
        {
            a.observe('click', function(e)
            {
                if (!confirm('Dit bericht verwijderen?'))
                    Event.stop(e);
            });
        });
        $$('a.showgallery').each(function(a) 
        {
            a.observe('click', this.openGallery.bindAsEventListener(this));
        }, this);
    },
 
    // handler to add file input
    addImageInput: function(e)
    {
        Event.stop(e);
        var table = $('formpost').down('table');
        var lastRow = $('lastrow').remove();
        table.insert(this.imageRowTemplate.evaluate({rowindex: ++this.rowIndex}));
        $('removeimage' + this.rowIndex).observe('click', this.removeInput);
        table.insert(lastRow);
        $('addvideo').hide();
    },

    // handler to add text input
    addVideoInput: function(e)
    {
        Event.stop(e);
        var table = $('formpost').down('table');
        var lastRow = $('lastrow').remove();
        table.insert(this.videoRowTemplate.evaluate({}));
        $('removevideo').observe('click', this.removeInput);
        table.insert(lastRow);
        $('addimage').hide();
        $('addvideo').hide();
    },

    // handler to remove input rows
    removeInput: function(e)
    {
        Event.stop(e);
        Event.element(e).up('tbody').remove();
        if ($$('tbody.media').length == 0) {
            $('addimage').show();
            $('addvideo').show();
        }
    },

    // open gallery lightbox
    openGallery: function(e)
    {
        Event.stop(e);
        var a = e.element();
        if (a.nodeName != 'A')
            a = a.up('a');
        var props = a.getAttribute('props').split(':');
        new Ajax.Updater(a.up('body'), '/imageproxy.php',
        {
            insertion: 'bottom',
            parameters: {'gallery':1, 'system':props[0], 'fid':props[1], 'offset':props[2]},
            // bind gallery handlers
            onComplete: this.bindGallery.bind(this)
        }, this);
    },

    bindGallery: function()
    {
        $('cover').up('body').setStyle({overflow: 'hidden', display: 'block'});
        var offset = $('cover').up('body').cumulativeScrollOffset().top;
        $('cover').setStyle({'top': offset + 'px'});
        $('popupcontainer').setStyle({'paddingTop': offset + 'px'});
        this.thumbCount = $$('div.popup').length;
        this.currentThumb = parseInt($('popupcontainer').getAttribute('offset'));
        $$('#popupcontainer a.close').each(function(b) 
        {
            b.observe('click', function(e) 
            {
                $('cover').up('body').setStyle({overflow: '', display: ''});
                $('popupcontainer').remove();
                $('cover').remove();
            });
        });
        $$('#popupcontainer a.next').each(function(b) 
        {
            b.observe('click', this.showNextImage.bindAsEventListener(this));
        }, this);
        $$('#popupcontainer a.prev').each(function(b) 
        {
            b.observe('click', this.showPreviousImage.bindAsEventListener(this));
        }, this);
    },

    // show next image
    showNextImage: function(e)
    {
        var elm = e.element().up('.popup');
        elm.hide();
        elm.setStyle({opacity: 0});
        this.currentThumb++;
        if (this.currentThumb > this.thumbCount)
            this.currentThumb = 1;
        var popup = 'big' + this.currentThumb;
        $(popup).show();
        $(popup).setStyle({opacity: 1});
    },

    // show previous image
    showPreviousImage: function(e)
    {
        var elm = Event.element(e).up('.popup');
        elm.hide();
        elm.setStyle({opacity: 0});
        this.currentThumb -= 1;
        if (this.currentThumb < 1)
            this.currentThumb = this.thumbCount;
        var popup = 'big' + this.currentThumb;
        $(popup).show();
        $(popup).setStyle( {opacity: 1});
    }
});