MatisseMainMenu = {
  $container: null,
  $preloadedImgs: {},

  init: function(pages_infos)
  {
    this.$container = $('main-nav');
    var _this = this;

    Object.each(pages_infos, function(infos, token) {
      _this.$preloadedImgs[token] = new Asset.image('images/' + infos.bg);
    });

    this.$container.getElements('a').each(function($a, i) {
      if (!$a.getProperty('data-matisse-page'))
        return;

      var page = $a.getProperty('data-matisse-page');

      $a.addEvent('click', function(e) {
        e.preventDefault();
        
        new Request.JSON({"url": "index.php?ajax=1&page=" + page, "onComplete": function(json) {
          //-- anims fond & content
          var $bgNew = _this.$preloadedImgs[json.page];
          var $bgPrev = $$('#backgrounds img')[0];

          var doBgTransition = ($bgPrev.src != $bgNew.src);

          var fxContent = new Fx.Tween($('content'), {
            'property': 'bottom',
            'duration': 400
          }).set(-$('content').getSize().y);

          if (doBgTransition)
          {
            $bgNew.setStyle('margin-left', '1000').inject($('backgrounds'));
            
            var fxBgPrev = new Fx.Tween($bgPrev, {
              'property': 'margin-left',
              'duration': 1200
            }).set(-1000).addEvent('complete', function() {
              $bgPrev.dispose();
            });

            var fxBgNew = new Fx.Tween($bgNew, {
              'property': 'margin-left',
              'duration': 1200
            }).set(1000);
          }
          
          _this.pushContent(json, $a);

          fxContent.start(0);

          if (doBgTransition)
          {
            fxBgPrev.start(-2000);
            fxBgNew.start(-1000);
          }
        }}).get();
      });
    });
  },

  pushContent: function(json, $menu_a)
  {
    //-- content
    $('content').empty().set('html', json.html);

    //-- title
    document.title = json.title;

    //-- classe body
    var body_classes = document.body.className.split(' ');
    for (var i = 0; i < body_classes.length; i++)
    {
      if (body_classes[i].contains('page-'))
        $(document.body).removeClass(body_classes[i]);
    }

    $(document.body).addClass('page-' + json.page);

    //-- menu
    this.$container.getElements('a').removeClass('active');
    this.$container.getElements('li').removeClass('selected');
    $menu_a.addClass('active');
    if ($menu_a.getParent('.submenu'))
      $menu_a.getParent('.submenu').getParent('li').addClass('selected');

    //-- js
    if ($('photos'))
      PhotosViewer.init();
  }
}