var currentIllustrationText = null;
window.onload = function() {
  if($('welcome-page')){
    var listitems = $('welcome-page').getElementsBySelector('li');
    listitems.each(function(s) {
      s.observe('mouseover', respondToHover);      
    });
    
    var listitems = $$('#welcome-page li a');
    listitems.each(function(s) {
      s.observe('mouseover', respondToHoverButton);      
    });
    
    $('welcome-page').observe('mouseout', respondToOut); 
  }
}   

function respondToHover(event) {
  var item = event.element();
  
  if(item == $('welcome-item01')){
    $('welcome-item01').setStyle({
      backgroundPosition: '0px -150px'
    });
    $('welcome-illustration').setStyle({
      backgroundPosition: '0px -264px'
    });
    switchWording('01');
  }else if(item == $('welcome-item02')){
    $('welcome-item02').setStyle({
      backgroundPosition: '0px -150px'
    });
    $('welcome-illustration').setStyle({
      backgroundPosition: '0px -528px'
    });
    switchWording('02');
  }else if(item == $('welcome-item03')){
    $('welcome-item03').setStyle({
      backgroundPosition: '0px -150px'
    });
    $('welcome-illustration').setStyle({
      backgroundPosition: '0px -1056px'
    });
    switchWording('03');
  }else if(item == $('welcome-item04')){
    $('welcome-item04').setStyle({
      backgroundPosition: '0px -150px'
    });
    $('welcome-illustration').setStyle({
      backgroundPosition: '0px -792px'
    });
    switchWording('04');
  }
}
function respondToHoverButton(event) {
  var item = event.element().up();
  
  if(item.hasClassName('welcome-item01')){
    $('welcome-item01').setStyle({
      backgroundPosition: '0px -150px'
    });
    $('welcome-illustration').setStyle({
      backgroundPosition: '0px -264px'
    });
    switchWording('01');
  }else if(item.hasClassName('welcome-item02')){
    $('welcome-item02').setStyle({
      backgroundPosition: '0px -150px'
    });
    $('welcome-illustration').setStyle({
      backgroundPosition: '0px -528px'
    });
    switchWording('02');
  }else if(item.hasClassName('welcome-item03')){
    $('welcome-item03').setStyle({
      backgroundPosition: '0px -150px'
    });
    $('welcome-illustration').setStyle({
      backgroundPosition: '0px -1056px'
    });
    switchWording('03');
  }else if(item.hasClassName('welcome-item04')){
    $('welcome-item04').setStyle({
      backgroundPosition: '0px -150px'
    });
    $('welcome-illustration').setStyle({
      backgroundPosition: '0px -792px'
    });
    switchWording('04');
  }
}
function respondToOut(event){
  $('welcome-item01').setStyle({
    backgroundPosition: '0px 0px'
  });
  $('welcome-item02').setStyle({
    backgroundPosition: '0px 0px'
  });  
  $('welcome-item03').setStyle({
    backgroundPosition: '0px 0px'
  });  
  $('welcome-item04').setStyle({
    backgroundPosition: '0px 0px'
  });
  
  $('welcome-illustration').setStyle({
    backgroundPosition: '0px 0px'
  });
  switchWording('00');  
}

function switchWording(number){
  if(!$$('.illustration .illustration-text00')[0].hasClassName('invisible')) $$('.illustration .illustration-text00')[0].addClassName('invisible'); 
  if(currentIllustrationText) currentIllustrationText.addClassName('invisible'); 
  currentIllustrationText = $$('.illustration .illustration-text'+number)[0];
  currentIllustrationText.removeClassName('invisible');
}