var petanque = {
  'config': {
    'animationTime': 200
  },
  'menu': $('#menu'),
  'scoreboards' : {}
};

petanque.Scoreboard = (function () {
  var _leftClip  = $('#menu .left.clip');
  var _rightClip = $('#menu .right.clip');

  return function (elem, last) {
    this.elem  = $(elem);
    this.hasClips = last;
    this.leftClip = _leftClip;
    this.rightClip = _rightClip;
  };
})();

petanque.Scoreboard.prototype = {
  'clickHandler': function (clicked) {
    if (clicked.hasClass('hd')) {
      if (this.elem.hasClass('last')) {
        return false;
      }

      $('.scoreboard.last').removeClass('last');
      this.elem.appendTo(petanque.menu).addClass('last');

      var that = this;
      this.elem.find('ul[class^="level"]:has(.active)').each(function (i, side) {
        that.moveClip($(side));
      });
    } else if (clicked.hasClass('menu')) {
      var li = clicked.parents('li:first');

      if (li.hasClass('active')) {
        return false;
      }

      var side = clicked.parents('ul:first');
      side.children('.active').removeClass('active');
      li.addClass('active');

      this.moveClip(side);
      if (side.hasClass('level2')) {
        this.moveClip(li.children('.level3'));
      }
    }

    return true;
  },

  'getClips': function () {
    if (this.hasClips) {
      return;
    }
    
    var ownerId = this.leftClip.parents('.scoreboard').attr('id');
    petanque.scoreboards[ownerId].hasClips = false;

    this.elem.append(this.leftClip);
    this.elem.append(this.rightClip);
    this.rightClip.css('top', '-30px');
    this.hasClips = true;
  },

  'moveClip': (function () {
    var _factor = 30;

    return function (side) {
      var active = side.children('.active'),
          pos = (active.length ? active.prevAll().length : -1) * _factor + 'px';

      if (side.hasClass('level2')) {
        if (this.hasClips) {
          this.leftClip.animate({'top': pos}, petanque.config.animationTime);
          if (this.elem.find('.level3 .active').length == 0) {
            this.rightClip.animate({'top': '-' + _factor + 'px'}, petanque.config.animationTime);
          }
        } else {
          this.getClips();
          this.leftClip.css('top', pos);
        }
      } else {
        this.rightClip.animate({'top': pos}, petanque.config.animationTime);
      }
    };
  })()
};

var basti = 0;

(function () {
  $('.scoreboard').each(function(i) {
    var key = $(this).attr('id');
    var hasLast = $(this).hasClass('last');
    petanque.scoreboards[key] = new petanque.Scoreboard(this, hasLast);
  });

  function clickEventHandler(e)
  {
    var target = $(e.target);

    try {
      var id = target.parents('.scoreboard').attr('id') || false;
      if (id) {
        petanque.scoreboards[id].clickHandler(target);
      }
    } catch (err) {
      if (console && console.log) {
        console.log('ERR:' + err);
      }
    }
  }

  petanque.menu.mousedown(clickEventHandler);
})();