var SideBar = {
  isExtended: 0,
  tabWidth: 29,
  slideDuration: 1000,
  opacityDuration: 1500
};
function extendContract(){
  if(SideBar.isExtended == 0){
    SideBar.contentEffect.start({
       'height': SideBar.height,
       'opacity': 1
    });
    SideBar.barEffect.start({
       'width': SideBar.width + 31
    });
    SideBar.isExtended = 1;
    // make expand tab arrow image face left (inwards)
    SideBar.handle.src = SideBar.handle.src.replace(/(\.[^.]+)$/, '-active$1');
  }
  else{
    SideBar.contentEffect.start({
       'height': 0,
       'opacity': 0
    });
    SideBar.barEffect.start({
       'width': 29
    });
    SideBar.isExtended = 0;
    // make expand tab arrow image face right (outwards)
    SideBar.handle.src = SideBar.handle.src.replace(/-active(\.[^.]+)$/, '$1');
  }
}
function init(){
  SideBar.handle = $('sideBarHandle').childNodes[0];
  $('sideBarTab').addEvent('click', function(){extendContract()});
  // Figure out height of sideBar container element (since positioned absolutely needs height)
  SideBar.height = Math.max( $('sideBarTab').getSize().y, $('sideBarContents').getSize().y );
  $('sideBar').setStyle( 'height', SideBar.height + 2 );
  SideBar.width = $('sideBarContents').getSize().x;
  // Set default styles for contents so first transition works
  $('sideBarContents').setStyles({
      'height': 0,
      'opacity': 0
  });
  // Initialize effects
  SideBar.barEffect = new Fx.Morph('sideBar', {duration: SideBar.slideDuration, transition: Fx.Transitions.linear});
  SideBar.contentEffect = new Fx.Morph('sideBarContents', {duration: SideBar.slideDuration, transition: Fx.Transitions.linear});
  // Do not open side bar when clicking on icon
  $('sideBarTab').getElements('a').each( function( link ) {
      link.addEvent('click', function(e) {
          e.stop();
          window.open( this );
      }.bind( link.get( 'href' ) ) );
  });
}
window.addEvent('load', function(){init()});