var  $img_off;

var img_active = function($e){
    //put whatever you want to happen in here
    var img_on = $e.getElements('.page_bg_image');
    img_on.setStyles({'display':'block'});
    img_on.fade('hide');
    img_on.fade('in');
}

var img_inactive = function($e){
	 var img_on = $e.getElements('.page_bg_image');
    img_on.fade('hide');
}



window.addEvent('domready', function() {

   // Adaption IE6
   if(window.ie6) var heightValue='100%';
   else var heightValue='';

   // Selectors of the containers for switches and content
   var togglerName='.toggler_box';
   var contentName='.elements';

   // Position selectors
   var counter=0;   
   var toggler=$$(togglerName);
   var content=$$(contentName);
   

   while(toggler.length>0)
   {
   
   	
      // Apply accordion
      new Accordion(toggler, content, {
         opacity: false,
         display: -1,
         alwaysHide: true,
         onComplete: function() { 
            var element=$(this.elements[this.previous]);
            if(element && element.offsetHeight>0) element.setStyle('height', heightValue);       
         },
         onActive: function(toggler, content) {
            toggler.addClass('open');
            img_active(toggler);
            
         },
         onBackground: function(toggler, content) {
            toggler.removeClass('open');
            img_inactive(toggler);
         }
      });


	// Add rollover state to the arrows
		
		var rollElement = toggler.getElement('h2');
		var rollTarget = rollElement.getElement('img');
	
		rollElement.addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.getElement('img').set('tween', {
				duration: 100,
				transition: Fx.Transitions.Quad.easeOut // This could have been also 'bounce:out'
			}).tween('right', '17');
		},
		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			this.getElement('img').set('tween', {
				duration: 300,
				transition: Fx.Transitions.Quad.easeOut // This could have been also 'bounce:out'
			}).tween('right', '10');
		}
	});

			

      // Set selectors for next level
      counter++;
      toggler=$$(togglerName+counter);
      content=$$(contentName+counter);
   }
   
   
   
   
});
