window.addEvent("load",function(){
   (function() { initialAnimation(); }).delay(500);
   $$('.box .moreNews')[0].addEvent('click', function() { displayMore(0) });

   box1Expand = new Fx.Morph('box1', {wait: false, duration: 1000});
   box2Expand = new Fx.Morph('box2', {wait: false, duration: 1000});
   box3Expand = new Fx.Morph('box3', {wait: false, duration: 1000});
   currentBox = 2;
   $('box1').addEvent("click",function(){
      currentBox = 1;
      $clear(animateBox);
      changeBox();
   });
   $('box2').addEvent("click",function(){
      currentBox = 2;
      $clear(animateBox);
      changeBox();
   });
   $('box3').addEvent("click",function(){
      currentBox = 3;
      $clear(animateBox);
      changeBox();
   });
   var changeBox = function()
   {
      $$('.moreNews').each(function(news) { news.removeEvents('click'); });
      if(currentBox == 1)
      {
         box2Expand.start({'left':597});
         box3Expand.start({'left':765}).chain(function()
         {
            $$('.box .moreNews')[0].addEvent('click', function() { displayMore(0) });
         });
      }
      else if(currentBox == 2)
      {
         box2Expand.start({'left':168});
         box3Expand.start({'left':765}).chain(function()
         {
            $$('.box .moreNews')[1].addEvent('click', function() { displayMore(1) });
         });
      }
      else if(currentBox == 3)
      {
         box2Expand.start({'left':168});
         box3Expand.start({'left':336}).chain(function()
         {
            $$('.box .moreNews')[2].addEvent('click', function() { displayMore(2) });
         });
      }
      currentBox++;
      if(currentBox > 3) currentBox = 1;
   }
   var animateBox = changeBox.periodical(6000);

   function initialAnimation()
   {
      var headerMorph = new Fx.Morph('header',
      {
         wait: false,
         duration: 1000,
         transition: Fx.Transitions.linear.EaseOut
      });

      var footerMorph = new Fx.Morph('footer',
      {
         wait: false,
         duration: 1000,
         transition: Fx.Transitions.linear.EaseOut
      });

      var contentMorph = new Fx.Morph('content',
      {
         wait: false,
         duration: 800,
         transition: Fx.Transitions.Quad.EaseIn
      });

      footerMorph.start({'margin-bottom': [-60, 0]});
      $('footer').setStyle('display', 'block');

      $('header').setStyle('display', 'block');
      headerMorph.start({'margin-top': '0px', 'margin-bottom': '0px'}).chain(function()
      {
         contentMorph.start({'width': '932px'}).chain(function()
         {
            $('innerContent').setStyle('display', 'block');
            $$('.box').reverse().each(function(box, i)
            {
               (function() {
                  var boxMorph = new Fx.Morph(box,
                  {
                     wait: false,
                     duration: 200,
                     transition: Fx.Transitions.Cubic.EaseInOut
                  });
                  boxMorph.start({'top': '0px'});
               }).delay(i*500);
            });
         });
      });
   }

   var moreIsOpen = false;
   function displayMore(index)
   {
      var box = $$('.moreBox')[index];
      var boxMorph = new Fx.Morph(box,
      {
         wait: false,
         duration: 200,
         transition: Fx.Transitions.Expo.EaseOut
      });

      moreIsOpen = index;
      $('moreHidden').addEvent('click', function() { closeMore(index); });

      $('moreHidden').setStyle('display', 'block');
      box.setStyle('display', 'block');

      // Fade the box in
      box.setStyle('opacity', '0');
      box.getChildren('div').each(function(div)
      {
         div.setStyle('opacity', '0');
      });
      (function() { box.fade('in'); }).delay(100);

      // Expand the box
      (function() { boxMorph.start({'height': '465px'}); }).delay(500);

      // Fade the content in
      (function()
      {
         box.getChildren('div').each(function(div)
         {
            div.fade('in');
         });
      }).delay(1000);
   }

   function closeMore(index)
   {
      moreIsOpen = false;
      var box = $$('.moreBox')[index];
      var boxMorph = new Fx.Morph(box,
      {
         wait: false,
         duration: 200,
         transition: Fx.Transitions.Expo.EaseOut
      });

      $('moreHidden').removeEvents('click');

      boxMorph.start({'height': '272px'});
      (function()
      {
         box.getChildren('div').each(function(div)
         {
            div.fade('out');
         });
      }).delay(1000);
      (function() { box.fade('out'); }).delay(1500);
      (function()
      {
         $('moreHidden').setStyle('display', 'none');
         box.setStyle('display', 'none');
      }).delay(2000);
   }
});