/** 
 * @projectDescription  Die UserInterface-Teile des iTravel-Hochzeitstisches.
 *
 * @author  Sascha Quasthoff s.quasthoff@assenmacher.net
 * @version 0.1
 * @date    04.04.2008
 */



/**
 * 
 *
 * @classDescription    Die Klasse baut einige Elemente des UI in animierte Varianten um.
 * @type {Object}
 */
UI = Class.create (
{



    /**
    * Start
    * @constructor
    */
    initialize : function()
    {

        this.photopool();
        this.pagination.initialize();
        this.confirm_deletion();

    },



    /**
     * Photopool
     */
    photopool : function()
    {

        $$('#photopool label').each( function (n) {
            n.next('input').addClassName('hidden');
            Event.observe(n, 'click', function (evt) {
                var element = Event.element(evt);
                $$('#photopool label').each( function (m) {
                    m.removeClassName('checked');
                } );
                if ( typeof n.click != 'undefined' ) n.click();
                n.addClassName('checked');
            });
        } );
    
    },



    /**
     * Aufbau der Seitenweisen Ausgabe der Geschenkpakete
     */
    pagination : {

        list_width : 0,


        /**
         * @constructor
         */
        initialize : function()
        {

            if ( !$$('ul.giftlist')[0] || !!$('pagination_container') ) return;

            // bau den Container ein
            var list = $$('ul.giftlist')[0];
            if ( typeof list.up('#add_gift') == 'object' ) var list = $$('ul.giftlist')[1];

            this.list_width = list.getWidth();
            var lists = list.childElements().inGroupsOf(3);
            var pages = new Array();
            var navi = '<div id="pagination_navi"><div><strong>Seite <span id="pagination_act_page">0</span></strong> von <span id="pagination_max_page">0</span> <ul><li class="previous_page"><a href="#" id="pagination_previous_page" title="vorherige Seite"><span>&laquo;</span></a></li>';

            lists.each(function (n, i) {
                pages[i] = new Array();
                n.each(function (m, j) {
                    pages[i][j] = m;
                } );
            });

            var pag_container = new Element('div',{ 'id' : 'pagination_container' }).update( new Element('div',{ 'id' : 'pagination_wrapper' }));
            list.replace( pag_container );
            pag_wrapper = $('pagination_wrapper');
            pag_container = $('pagination_container');
            pages.each(function (n, i) {
                navi += '<li class="page_'+(i+1)+'"><a href="#">'+(i+1)+'</a></li>';
                pag_wrapper.appendChild( new Element('ul',{
                    'class' : 'giftlist',
                    'id' : 'page_'+i
                }) );
                n.each(function (m, j) {
                    if ( m != null ) $('page_'+i).appendChild(m);
                });
            });

            // Styles umbauen
            pag_container.setStyle({ width: this.list_width+'px' });
            pag_wrapper.setStyle({ width: (pages.length * this.list_width)+'px' });
            $$('.giftlist').each(function (n) {
                n.setStyle({ cssFloat: 'left' });
            });

            // Seiten-Navigation erstellen
            navi += '<li class="next_page"><a href="#" id="pagination_next_page" title="nächste Seite"><span>&raquo;</span></a></li></ul></div></div>';
            $('pagination_container').insert(navi);
            $('pagination_navi').setStyle({ width: this.list_width+'px' });


            // Ereignisse erzeugen
            $$('#pagination_navi li a').each( (function (n) {
                n.observe('click', (function (evt) {
                    if ( n.id == 'pagination_previous_page' ) {
                        this.show_page( '-1' );
                    } else if ( n.id == 'pagination_next_page' ) {
                        this.show_page( '+1' );
                    } else {
                        this.show_page(n.innerHTML);
                    }
                    Event.stop(evt);
                }).bind(this));
            }).bind(this));


            // erste Seite anzeigen
            $('pagination_max_page').update(pages.length);
            this.show_page('1');

        },



        /**
         * Zeige die Seite page an.
         * @param {String} page Die Seitenzahl bzw. der String '+1' oder '-1'
         * @method
         */
        show_page : function( page )
        {

            max_page = parseInt( $('pagination_max_page').innerHTML );

            if ( page == '+1' ) {
                act_page = parseInt( $('pagination_act_page').innerHTML );
                new_page = (act_page == max_page) ? act_page : act_page + 1;
            } else if ( page == '-1' ) {
                act_page = parseInt( $('pagination_act_page').innerHTML );
                new_page = (act_page == 1) ? act_page : act_page - 1;
            } else {
                new_page = page;
            }

            $('pagination_act_page').update( new_page );
            $$('#pagination_navi li').each( function (n) { n.removeClassName('active_page'); });
            $$('.page_'+new_page)[0].addClassName('active_page');

            if ( new_page == 1 ) {
                $$('.previous_page')[0].addClassName('inactive');
            } else {
                $$('.previous_page')[0].removeClassName('inactive');
            }
            if ( new_page == max_page ) {
                $$('.next_page')[0].addClassName('inactive');
            } else {
                $$('.next_page')[0].removeClassName('inactive');
            }

            var new_pos = '-' + ((new_page-1) * this.list_width);
            new Effect.Move ($('pagination_wrapper') ,{ x: new_pos, y: 30, mode: 'absolute'});

        }


    },



    /**
     * Sicherheitsabfrage vor dem Löschen von Einträgen
     */
    confirm_deletion : function ()
    {

        $$('.delete_entry').each( function (n) {
            n.observe('click', (function (evt) {
                var url = n.readAttribute('href');
                var ok = window.confirm('Wollen Sie diesen Eintrag wirklich löschen?');
                if ( ok == true) {
                    window.location.href = url;
                }
                Event.stop(evt);
            }).bind(this));
        } );

    }


}

);


document.observe('dom:loaded', function () {
    _UI = new UI();
});