var isExtended = 0;
var height = 200;
var width = 150;
var slideDuration = 500;
var opacityDuration = 1000;

function extendContract(){
  
  if(isExtended == 0){
    
    sideBarSlide(0, height, 0, width);
    
    sideBarOpacity(0, 1);
  
    isExtended = 1;
    
    // make expand tab arrow image face left (inwards)
    $('vertMenuTab').childNodes[0].src = $('vertMenuTab').childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');
    
  }
  else{
    
    sideBarSlide(height, 0, width, 0);
    
    sideBarOpacity(1, 0);
    
    isExtended = 0;
    
    // make expand tab arrow image face right (outwards)
    
    $('vertMenuTab').childNodes[0].src = $('vertMenuTab').childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');
  }

}

function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth){
    var myEffects = new Fx.Styles('vertMenuContents', {duration: slideDuration, transition: Fx.Transitions.linear});
    myEffects.custom({
       'height': [fromHeight, toHeight],
       'width': [fromWidth, toWidth]
    });
}

function sideBarOpacity(from, to){
    var myEffects = new Fx.Styles('vertMenuContents', {duration: opacityDuration, transition: Fx.Transitions.linear});
    myEffects.custom({
       'opacity': [from, to]
    });
}

function init(){
  $('vertMenuTab').addEvent('click', function(){extendContract()});
  $('vertMenuTab').addEvent('mouseover', function(){extendContract()});
}

window.addEvent('load', function(){init()});