var Switcher = new Class({
    
    initialize: function(){
        
        // 1. create an accordion
        // 2. init any other elements that need to be initialized
        // 2. register other fucntions to be executed
        if($('accordion')){
            
            
            // create the HTML
            var elems_array = new Array();
            $('accordion').set('class', 'accordion_cs');
            for(var i = 1 ; i <= 8 ; i++) {
                var toggler     = new Element('div', {'id': 'toggler_' + i, 'class': 'toggle' });
                var container   = new Element('div', {'id': 'strand_' + i, 'class': 'slide_container' });
                
                var switch_link = new Element('a', {
                    'href':     '',
                    'id':       'switch_link_' + i, 
                    'class':    'sw_link',
                    'html':     'Films in this <em>Strand</em>',
                    events: {
                        'click': function(ev) {
                            ev.stop();
                            var strand_idx = this.get('id').split('switch_link_', 2)[1];

                            for(var j = 1 ; j <= 8 ; j++) {
                                if(j != parseInt(strand_idx) && $('strand_info_' + j).getStyle('display') == 'block'){
                                    $('strand_info_' + j).setStyle('display', 'none');
                                    $('strand_info_' + j).setStyle('opacity', 0);
                                }
                            }
                            $('strand_info_' + strand_idx).setStyle('display','block');
                            $('strand_info_' + strand_idx).fade('in');
                        }
                    }
                    });
                
                var picture     = new Element('img', {
                    'src':      'picture/upload/image/festival_08/strands/img' + i + '.jpg',
                    'border':   '0',
                    'width':    '338',
                    'height':   '247' 
                });
                
                container.adopt(switch_link);
                container.adopt(picture);
                elems_array.push(toggler);
                elems_array.push(container);
                
                // hide all the visible strand info segments
                if(i > 1){
                    $('strand_info_' + i).setStyle('display','none');
                    $('strand_info_' + i).setStyle('opacity', 0);
                }
            }

            $('accordion').adopt(elems_array);
            
            
            // set the backgrounds to the starting position
            var offset = 0;
            $$('#accordion .toggle').each(function(elem, index){
                elem.style.backgroundPosition = '-' + offset + 'px' + ' 0px';
                offset += 30;
            });
            
            var h_accordion = new Accordion(
                $$('#accordion .toggle'), 
                $$('#accordion .slide_container'),
                {
                    display:    1,
                    show:       000000,
                    height:     false,
                    width:      true,
                    opacity:    false,
                    fixedHeight:247,
                    fixedWidth: 338,
                    
                    onActive: function(toggler, elem) {
                        var position = toggler.style.backgroundPosition;
                        var pos_x = parseInt(position.split('px', 1));
                        pos_x = pos_x - 240;
                        toggler.style.backgroundPosition = pos_x + 'px' + ' 0px';                        
                    },
                    
                    onBackground: function(toggler, elem) {
                        var position = toggler.style.backgroundPosition;
                        var pos_x = parseInt(position.split('px', 1));
                        pos_x = pos_x + 240;
                        
                        // simple range check to ensure re-positioning doesn't occur on all
                        // toggles, except the one that needs to be moved
                        if(pos_x <= 0 && pos_x >= -240){
                            toggler.style.backgroundPosition = pos_x + 'px' + ' 0px';
                        }
                    }
                }
            );
            
            // fire the onclick event on a mouse over event
            $$('#accordion .toggle').addEvent('mouseenter', function() { this.fireEvent('click'); });  

        }
    }
    
});


// initialize and load the Apps on domready
window.addEvent('domready', function() {
    
    var strand_switcher = new Switcher();
    
});