document.observe('dom:loaded', function() {
	$$('a.cardTitle').invoke('observe', 'click', showCardPopup);
    $$('a.itemTitle').invoke('observe', 'click', showItemPopup);

    document.observe('keyup', closeAllPopups);
});

function closeAllPopups(event) {
    if (event.keyCode == Event.KEY_ESC) {
      closeCardPopup();
      closeItemPopup();
    }
}

function showCardPopup(event) {
	Event.stop(event);

    var product = getProduct(retrieveKey(event.element().id));

	var params = {id: product['id'], buy: product['buy'], lang: event.element().readAttribute('lang')};

	new Ajax.Request('card-detail.php', {method: 'get', onComplete: displayCardPopup, parameters: params});
}

function displayCardPopup(response) {
	var json  = response.responseJSON;
	var close = new Element('div', {'class': 'popup-close logo button'});

	$(document.body).insert(json.content);
	$(json.id).insert(close);

    close.observe('click', closeCardPopup);

	bindAddButtons('#'+json.id);
    bindTransformSwitch('#'+json.id);

    closeCardPopup();

	displayCardPopup.popup = new Control.Window($(json.id), {closeOnClick: false});

	displayCardPopup.popup.open();
}

function closeCardPopup() {
  if (displayCardPopup.popup) {
    displayCardPopup.popup.close();
  }
}

function showItemPopup(event) {
	Event.stop(event);

    var params = {id: getProduct(retrieveKey(event.element().id))['id']};

	new Ajax.Request('item-detail.php', {method: 'get', onComplete: displayItemPopup, parameters: params});
}

function displayItemPopup(response) {
    var json  = response.responseJSON;
	var close = new Element('div', {'class': 'popup-close logo button'});

	$(document.body).insert(json.content);
	$(json.id).insert(close);

    close.observe('click', closeItemPopup);

	bindAddButtons('#'+json.id);

    closeItemPopup();

	displayItemPopup.popup = new Control.Window($(json.id), {closeOnClick: close});

	displayItemPopup.popup.open();
}

function closeItemPopup() {
  if (displayItemPopup.popup) {
    displayItemPopup.popup.close();
  }
}