window.addEvent('domready', function() {

  var map = document.getElement('.map');

  map.getElements('.qr_xxl, .bubble').fade('hide').removeClass('hide');

  var fx = function(klass, targetKlass, showOps, hideOps, skipHide) {

    map.getElement(klass).addEvent('click', function(e) {
      var el = map.getElement(targetKlass);

      if (el.retrieve('ca:visible')) {

        if (skipHide) return;

        new Fx.Morph(el, {
          duration: 200
        }).start(Object.merge({ opacity: 0 }, hideOps));

        el.store('ca:visible', false);
      } else {
        e.stop();

        new Fx.Morph(el, {
          duration: 200
        }).start(Object.merge({ opacity: 1 }, showOps));

        el.store('ca:visible', true);
      }
    });

  };

  fx('.ca.gbg', '.bubble.gbg', { left: 50 }, { left: 100 });
  fx('.ca.tallinn', '.bubble.tallinn', { top: 240 }, { top: 280 });
  fx('.ca.qr', '.qr_xxl', { top: 210 }, { top: 160 }, true);

  var qr = map.getElement('.qr_xxl');

  $(document.body).addEvent('click', function(e) {
    if(qr && !e.target || !$(e.target).getParents().contains(qr)) {

      new Fx.Morph(qr, {
        duration: 200
      }).start({ opacity: 0, top: 160 });

      qr.store('ca:visible', false);
    }
  });

});