window.onload = function(){
//select the first button
var tools = $('tools');
//select the second button
var login = $('login');
//select the first content element
var toolsContent = $('toolsContent');
//select the second content element
var loginContent = $('loginContent');

//The height transition we attach to 'contentElement1'
var toolsToggle = new Fx.Style('toolsContent', 'height',{duration: 700, transition: Fx.Transitions.Expo.easeOut});
//The height transition we attach to 'contentElement2'
var loginToggle = new Fx.Style('loginContent', 'height',{duration: 700, transition: Fx.Transitions.Expo.easeOut});

var fadeLogin = new Fx.Style('loginContent', 'opacity');
var fadeTools = new Fx.Style('toolsContent', 'opacity');




//add an onclick event listener to button1
tools.addEvent('click', function(){
  //toggle height transition (hide-show)
  
  if(toolsContent.getStyle('height').toInt() > 0){
    //hide
	fadeTools.start(1,0)
	toolsContent.setStyle('border','0px solid #D1D1D1');
	toolsContent.setStyle('margin-bottom','0px');
  	toolsToggle.start(0);
  }else{
    //show
	fadeTools.start(0,1)
	toolsContent.setStyle('border','1px solid #D1D1D1');
	toolsContent.setStyle('margin-bottom','6px');
    toolsToggle.start(toolsHeight);
  }
  //toggle classname button1 <-> button1 button1_
  tools.toggleClass('tools_');
  return false;
});

//add an onclick event listener to button2
login.addEvent('click', function(){
  //toggle height transition (hide-show)
  if(loginContent.getStyle('height').toInt() > 0){
    //hide
	fadeLogin.start(1,0)
	loginContent.setStyle('border','0px solid #D1D1D1');
	loginContent.setStyle('margin-bottom','0px');
	loginToggle.start(0);
  }else{
    //show
	fadeLogin.start(0,1)
	loginContent.setStyle('border','1px solid #D1D1D1');
	loginContent.setStyle('margin-bottom','6px');
    loginToggle.start(loginHeight)
  }
  //toggle classname button2 <-> button2 button2_
  login.toggleClass('login_');
  return false;
});

//set css display:block for the contentElements
toolsContent.setStyle('display','block');
loginContent.setStyle('display','block');


//get the scrollSize of the contentElements
var toolsHeight = toolsContent.getSize().scrollSize.y;
var loginHeight = loginContent.getSize().scrollSize.y;


};