// By Sebastian Wohlrab @ NOSE AG Design Intelligence
//
// Usage:
// new Collapsable( $('header'), $('content'), false );
//
// Third argument controls the intital appeareance:
// false collapses the "content" on startup, true will leave it shown
//
// Collapsed titles will contain a css-class "collapsed", Encollapsed titles contain a css-class "encollapsed"
// Collapsed content contains a css-class "hidden" (this must set display to none)
// Encollapsed content contains a css-class "visible" (this must set display to block)

var Collapsable = new Class({
    // * : This lines are setting up some styles in code; Could be customized, removed or commented out
    initialize: function( titleEl, content, shown )
    {
        // Initial Style Set-Up
        if ( shown == false )
        {
            // titleEl.setStyles({ 'padding-left' : '0' }); // *
            titleEl.addClass('collapsed');
            content.setStyles({'opacity' : '0' });
            content.addClass('hidden');
        }
        else {
            // titleEl.setStyles({ 'padding-left' : '5' }); // *
            titleEl.removeClass('encollapsed');
        }

        titleEl.addEvent('click', function(e) {
            e.stop();

            // Set-Up Tweens
            var tween = new Fx.Tween( content, { duration: 500 });
            // var titletween = new Fx.Tween( titleEl, { duration: 250 });
            // var titlebacktween = new Fx.Tween( titleEl, { duration: 250 });

            if ( content.hasClass('hidden') )
            {
                // Set-Up Content-Classes
                content.removeClass('hidden');
                content.addClass('visible');
                
                // Set-Up Title-Classes
                titleEl.removeClass('collapsed');
                titleEl.addClass('encollapsed');
                
                // Start Tweening
                // titletween.start('padding-left', '0', '10' ); // *
                // titlebacktween.start('background-position', '-5', '0'); // *
                tween.start('opacity', '0', '1');

            }
            else {
                // Start Tweening
                tween.start('opacity', '1', '0');
                // titletween.start('padding-left', '10', '0' ); // *
                // titlebacktween.start('background-position', '0', '-5'); // *

                tween.addEvent('complete', function() {
                    // Set-Up Content-Classes
                    content.removeClass('visible');
                    content.addClass('hidden');
                    
                    // Set-Up Title-Classes
                    titleEl.removeClass('encollapsed');
                    titleEl.addClass('collapsed');
                    
                });
            }
        });
    }
});