var lastCard = 10;

window.addEvent('domready', function() {
	$('descriptionCon').setStyle('display', 'none');
	var moreBasicOptsLink = new Element('a', {'id':'moreOpts',
	'events': {
		'click': function() {
			$('descriptionCon').setStyle('display', 'block');
			this.destroy();
		}
	}
	});
	moreBasicOptsLink.set('text', "+see more options");
	moreBasicOptsLink.inject("descriptionCon", "before");
	
	var instSpan = $$('#instructions span')[0];
	
	$('flashcardsExample').setStyle('display', 'none');
	var seeExLink = new Element('a', {'id':'seeEx',
	'events': {
		'click': function() {
			$('flashcardsExample').setStyle('display', 'block');
			this.destroy();
			instSpan.set('text', 'As the example shows, each row represents one flashcard. The box to the left represents the front of the card, and the box to the right represents the back. Fill in these boxes, and when you are satisfied, click the "Create Flash Card Set" button at the bottom of this page.');
		}
	}
	});
	seeExLink.set('text', "view an example");
	instSpan.appendText("If this doesn't make sense, ");
	seeExLink.inject(instSpan);
	instSpan.appendText(" flashcard.");
	
	var moreFlashcardsLink = new Element('a', {'id':'moreFlashcards',
	'events': {
		'click': function() {
			 var tblBody = $$('#flashcards tbody')[0];
			for (var c=0; c<5; c++) {
				var lastCardP = lastCard+1;
				var tTrName = new Element('tr', {'class': 'flashcardSingle'+(lastCardP%2 == 0 ? 'E' : 'O') } );
				var tTdName = new Element('td', {'class': 'flashName', 'colspan': '2'});
				tTdName.set('text', "Flashcard "+(lastCard+1));
				tTdName.inject(tTrName);
				var tTrCard = new Element('tr', {'class': 'flashcardSingle'+(lastCardP%2 == 0 ? 'E' : 'O') } );
				var tTdFront = new Element('td', {'class': 'front'});
				var tTdBack = new Element('td', {'class': 'back'});
				var frontTextarea = new Element('textarea', {'id': 'front'+(lastCardP), 'name': 'front'+(lastCardP)});
				frontTextarea.inject(tTdFront);
				var backTextarea = new Element('textarea', {'id': 'back'+(lastCardP), 'name': 'back'+(lastCardP)});
				backTextarea.inject(tTdBack);
				tTdFront.inject(tTrCard);
				tTdBack.inject(tTrCard);
				
				tTrName.inject(tblBody);
				tTrCard.inject(tblBody);
				
				lastCard++;
			}
			if (lastCard >= 30) {
				this.set('text', '+add more flashcards...');
			}
			else if (lastCard >= 25) {
				this.set('text', '+add yet more flashcards');
			}
			else if (lastCard >= 20) {
				this.set('text', '+add even more flashcards');
			}
			else if (lastCard >= 15) {
				this.set('text', '+add some more flashcards');
			}
		}
	}
	});
	moreFlashcardsLink.set('text', "+add more flashcards");
	moreFlashcardsLink.inject("addFlashcards", "before");
	$('addFlashcards').destroy();
});