var Temoignages = Class.create({
    
    titles: [],
    texts: [],
    last_index: 0,
    steps: [],
    total_steps: 0,
    
    initialize: function()
    {
        this.titles = $('main').select('h1.title');
        this.texts = $('main').select('div.img_text');
        this.titles.slice(1).invoke('hide');
        this.texts.slice(1).invoke('hide');
        this.steps = [$('idsteps').firstDescendant().firstDescendant()];
        
        this.total_steps = this.titles.length;
        for(i=1; i < this.total_steps; i++) {
            var link = (new Element('a', {href: 'javascript:;'})).update('<!-- -->');
            link.observe('click', this.click_on_step.bind(this, link));
            this.steps.push(link);
            var li = (new Element('li')).insert(link);
            $('idsteps').insert(li);
        }
        
        if(this.titles.length < 2) {
            $('idright_arrow').hide();
        }
        else {
            this.steps[0].observe('click', this.click_on_step.bind(this, this.steps[0]));            
        }
        
        $('idleft_arrow').observe('click', this.move_to_left.bind(this));
        $('idright_arrow').observe('click', this.move_to_right.bind(this));

    },
    
    move_to_left: function(e)
    {
        this.click_on_step(this.steps[this.last_index-1]);
    },
    
    move_to_right: function(e)
    {
        this.click_on_step(this.steps[this.last_index+1]);
    },
    
    click_on_step: function(el)
    {
        if(this.steps[this.last_index] == el) return;
        
        var ind = this.steps.indexOf(el);
        var arr = [this.titles[this.last_index]];
            arr.push(this.texts[this.last_index]);
            arr.push(this.titles[ind]);
            arr.push(this.texts[ind]);
            
        this.steps[this.last_index].removeClassName('selected');
        this.steps[ind].addClassName('selected');
        $A(arr).invoke('toggle');
        this.last_index = ind;
        
        if(ind + 1 < this.total_steps) {
            $('idright_arrow').show();
        } else {
            $('idright_arrow').hide();
        }
        if(ind > 0) {
            $('idleft_arrow').style.visibility = 'visible';
        } else {
            $('idleft_arrow').style.visibility = 'hidden';
        }
    }
});

document.observe('dom:loaded', function(){
    new Temoignages();
});