function getMaxCardId(increment) {
  var allInputs = document.getElementsByTagName('input');
  if (typeof maxId == "undefined") {
	  maxId = -1;
	  for (var i = 0; i < allInputs.length; ++i) {
	    var match = allInputs[i].name.match(/card(\d+)/);
	    if (match) {
	      var id = parseInt(match[1]);
	      maxId = Math.max(maxId, id);
	    }
		}
	}
	if (increment)
		++maxId;
	return maxId;
}

function addCard(id, question, answer) {
	var newId = getMaxCardId(true);
	var cardsTable = document.getElementById("cardsTable");
	var rows = cardsTable.getElementsByTagName("tr");
	var lastRow = rows[rows.length - 1];

	var newRow = lastRow.parentNode.appendChild(document.createElement("tr"));
	newRow.id = 'row' + newId;
	
	var td = newRow.appendChild(document.createElement('th'));
	td.style.textAlign = 'right';
	td.id = 'rowLabel' + newId;
	
	var multiline = question.match("\\n") || answer.match("\\n");
	
	td = newRow.appendChild(document.createElement('td'));
	td.innerHTML = generateTextfieldHTML(newId, 'question', question, multiline);

	td = newRow.appendChild(document.createElement('td'));
	td.innerHTML = generateTextfieldHTML(newId, 'answer', answer, multiline);

	td = newRow.appendChild(document.createElement('td'));
	td.innerHTML = '<a href="#" id="' + newId + 'previewlink" class="imageLink"><img src="/images/lupe.png"></img></a><div class="tooltip" id="' + 
	                   newId + 'previewdiv" style="display: none"><div id="' + 
	                   newId + 'previewcontent"></div></div>';

	td = newRow.appendChild(document.createElement('td'));
	td.innerHTML = '<a href="#" onclick="delCard(' + newId + ')">Löschen</a>';

	td = newRow.appendChild(document.createElement('td'));
	td.style.display = 'none';
	td.innerHTML =
			'<input id="card' + newId + '_id" name="card' + newId + '[id]" type="hidden" value="' + id + '" />' +
			'<input id="card' + newId + '_deleted" name="card' + newId + '[deleted]" type="hidden" value="0" />';
	
  Tooltip.add($(newId + 'previewlink'), $(newId + 'previewdiv'));
	addPreviewlinkObserve(newId);
}

function addPreviewlinkObserve(id) {
  Event.observe(id + 'previewlink', 'click', function(e) {
    var questionField = $(generateDomId(id, 'question'));
    var answerField = $(generateDomId(id, 'answer'));
    var params = $H(new Array());
		params['question'] = questionField.value;
		params['answer'] = answerField.value;
		new Ajax.Updater(id + 'previewcontent', '/boxes/preview', {parameters: params.toQueryString()});
  });
}

function generateTextfieldHTML(id, type, value, multiline) {
  var domId = generateDomId(id, type);
  var name = 'card' + id + '[' + type + ']';
  return '<textarea id="' + domId + '" name="' + name + '" cols="30" rows="3">' +
      value + '</textarea>';
}

function generateDomId(id, type) {
  return 'card' + id + '_' + type;
}

function reLabelAndColor() {
  var maxId = getMaxCardId(false);
	var displayedCount = -1;
	for (var i = 0; i <= maxId; ++i) {
		var row = document.getElementById('row' + i);
		var rowLabel = document.getElementById('rowLabel' + i);
		var deletedField = document.getElementById('card' + i + '_deleted');
		if (deletedField.value == '0') {
			++displayedCount;
		}
		row.className = displayedCount % 2 == 0 ? 'even' : 'odd';
		rowLabel.innerHTML = displayedCount + 1;
	}
}

function addCards() {
  var nrField = document.getElementById('newCardCount');
  var count = parseInt(nrField.value);
  if (count > 100) {
    alert('Bitte eine Zahl kleiner 100 eingeben.')
    return;
  }
  
  for (var i = 0; i < count; ++i)
    addCard('', '', '');
    
	reLabelAndColor();
}

function delCard(id) {
  var deletedField = document.getElementById('card' + id + '_deleted');
  var row = document.getElementById('row' + id);
  deletedField.value = '1';
  row.style.display = 'none';
  
  reLabelAndColor();
}

function showRear() {
	document.getElementById('knownSpan').style.display = '';
	document.getElementById('rueckseite').style.display = '';
	document.getElementById('showRearSpan').style.display = 'none';
	document.getElementById('knownYesButton').focus();
}

function resetControl() {
	document.getElementById('showRearSpan').style.display = '';
	document.getElementById('knownSpan').style.display = 'none';
	document.getElementById('showRearButton').focus();
}

function updatePage(cardCounts, cardCountsToBeLearned, currentDrawer, toBeLearned) {
  cardCounts[currentDrawer] -= 1; 
  cardCountsToBeLearned[currentDrawer] -= 1; 
	resetControl();
	for (var i = 0; i < cardCounts.length; ++i) {
		var fach = $('fach' + i);
		fach.innerHTML = '';
		fillKasten(fach, cardCounts[i] - cardCountsToBeLearned[i], '');
		fillKasten(fach, cardCountsToBeLearned[i], 'l');
		if (i == currentDrawer) {
    	// Aktuelle Karte darstellen
    	fillKasten(fach, 1, 'current' + (toBeLearned ? 'ToBeLearned' : ''));
		}
	}
}

function fillKasten(fach, cardCount, suffix) {
		for (var j = 0; j < Math.floor(cardCount / 100); ++j) {
			addFachCard(fach, 'kktt' + suffix);
		}
		for (var j = 0; j < Math.floor((cardCount % 100) / 10); ++j) {
			addFachCard(fach, 'kkt' + suffix);
		}
		for (var j = 0; j < cardCount % 10; ++j) {
			addFachCard(fach, 'kk' + suffix);
		}
}

function addFachCard(fach, className) {
	var newCard = document.createElement('div');
	newCard.className = className;
	//newCard.innerHTML = 'WWW<br/>';
	fach.appendChild(newCard);
}

function knownClicked(known) {
	document.getElementById('knownField').value = known ? 'true' : 'false'
}

function openScreenshot(id) {
  var w = 840;
  var h = 600;
	var x = screen.availWidth/2-w/2;
	var y = screen.availHeight/2-h/2;
	var popupWindow = window.open(
	    '', 'screenshot', 'width='+w+',height='+h+',left='+x+',top='+y+',screenX='+x+',screenY='+y);
	popupWindow.document.close();
	popupWindow.document.open();
	popupWindow.document.write('<html></head><body>' +
			'<img src="/images/screenshot_' + id + '.png" />' +
			'</body></html>');
	popupWindow.document.title = 'Screenshot ' + id;
}

function addBoxPreviewObserver(id) {
	var link = $(id + 'previewlink');
	link.clicked = false;
  Event.observe(link, 'click', function(e) {
		if (link.clicked) {
			link.clicked = false;
			link.firstDescendant().src = link.firstDescendant().src.sub("down", "right");
		  Effect.BlindUp(id + 'previewdiv', {duration: 1});
			Effect.BlindUp(id + 'previewrow');
		} else {
			link.clicked = true;
			link.firstDescendant().src = link.firstDescendant().src.sub("right", "down");
			Effect.BlindDown(id + 'previewrow');
	    new Ajax.Updater(id + 'previewdiv', '/public_boxes/preview/' + id, {
				onComplete: function() {
					Effect.BlindDown(id + 'previewdiv', {duration: 1});
				}
	    });
		}
  });
}