//------------------------------------------------------------------
// Effect extend
Effect.MoveFromAppear = function(element, fromY, fromX) {

  element = $(element);

  Element.makePositioned(element);

  moveY = parseFloat(Element.getStyle(element,'top')  || '0') - fromY;
  moveX = parseFloat(Element.getStyle(element,'left') || '0') - fromX;

  element.style.top = fromY + 'px';
  element.style.left = fromX + 'px';

  return new Effect.Parallel(
    [new Effect.MoveBy(element, moveY, moveX,
      {sync: true}), 
     new Effect.Appear(element, {sync: true, from: 0.0, to: 1.0})],
    Object.extend(
      {}, arguments[3] || {}));
}

//------------------------------------------------------------------
function header_effect(){

  var header_str = $('header_title').innerHTML;
  var header_restr = '';
  for (var i = 0; i < header_str.length; i++) {
    header_restr += '<span id="header_title' + i + '" style="display: none;">' + header_str.charAt(i) + '</span>';
  }
  $('header_title').innerHTML = header_restr;
  $('header_title').show();

  for (var i = 0; i < header_str.length; i++) {
      Effect.MoveFromAppear('header_title' + i , 0, 500,
                            {duration: 0.5, delay: 0.3 * i});
  }
}

$('header_title').hide();
Event.observe(window, 'load', header_effect);