var team = new Class({

    scroller: null,
    imageWidth: 160,
    thumbs: null,
    opacity: 0.5,

    init: function() {
        // console.log('this',this);
        this.scroller = $('portrait_scroller');
        if (this.scroller == null) {
            return false;
        }
        this.scrollerFx = new Fx.Tween(this.scroller, {
            link: 'cancel'
        });
        this.thumbs = $('thumbs_container').getElements('div');
        this.thumbFxs = [];

        this.thumbs.each(function(thumb) {
            this.thumbFxs.push(new Fx.Tween(thumb, {
                duration: 200,
                link: 'cancel'
            }).set('opacity', this.opacity));
            var person = JSON.decode(thumb.get('rel'));

            // tooltip
        }.bind(this));

        this.setEvents();
        this.initTips();
        return true;
    },

    initTips: function() {
        this.tips = new Tips('.tooltip', {
            className: 'tooltipContainer',
            onShow: function(tip) {
                tip.setStyle('opacity', 0.8)
            }
        });
    },

    scrollToIndex: function(index, direct) {

        var newMargin = (index * this.imageWidth) * -1;
        if (direct) {
            this.scrollerFx.set('margin-left', newMargin);
        } else {
            this.scrollerFx.start('margin-left', newMargin);
        }


    },

    setEvents: function() {

        this.thumbs.each(function(thumb, index) {

            thumb.addEvent('click',
            function() {

                this.selectPerson(index);

            }.bind(this));

        }.bind(this));

    },

    blurThumbs: function(thumbIndex, direct) {

        this.thumbs.each(function(thumb, index) {
            if (index == thumbIndex) {
                if (direct) {
                    this.thumbFxs[index].set('opacity', 1);
                } else {
                    this.thumbFxs[index].start('opacity', 1);
                }


            } else {
                if (direct) {
                    this.thumbFxs[index].set('opacity', this.opacity);
                } else {
                    this.thumbFxs[index].start('opacity', this.opacity);
                }

            }
        }.bind(this));

    },

    selectPerson: function(index, direct) {
        var index = index || 0;

        var direct = direct || false;

        this.scrollToIndex(index, direct);

        this.blurThumbs(index, direct);

        var person = JSON.decode(this.thumbs[index].get('rel'));
        // console.log('person',person);
        $('team_name').set('text', person.name);
        $('rec_name').set('value', person.name);
        $('team_position').set('html', person.status);
        $('team_name_2').set('text', person.name);
        $('team_tel').set('text', person.telefon);
        $('team_index').set('value', index);

        $('team_mobil').set('text', person.mobil);

        // zusatz
        if (person.zusatz != "") {
            $('zusatz_row').setStyle('display', 'table-row');

            $('team_zusatz').set('html', person.zusatz);
        } else {
            $('zusatz_row').setStyle('display', 'none');
        }

        if (person.mobil != "") {
            $('row_mobil').setStyle('display', 'table-row');
            $('team_mobil').set('text', person.mobil);
        } else {
            $('row_mobil').setStyle('display', 'none');
        }

        $('team_mail').getElement('a').set('href', 'mailto:' + person.email_1);
        $('team_mail').getElement('a').set('text', person.email_1);

        $('mail_reciever').set('value', person.email_1);


        $('team_mail_3').getElement('a').set('href', 'mailto:' + person.email_2);
        $('team_mail_3').getElement('a').set('text', person.email_2);

        if (person.email_2 != "") {
            $('mail_row').setStyle('display', 'table-row');
        } else {
            $('mail_row').setStyle('display', 'none');
        }



    }





});

var teamInstance = new team();

// console.log('teamInstance',teamInstance);
window.addEvent('domready',
function() {
    if (teamInstance.init()) {
        teamInstance.selectPerson($('team_index').get('value'), true);
    }
});