var formName = "";
var paarungName = "";
var Satz = "";
var Woerter = "";

function showpopupcards(fName, pName, s) {

  formName = fName;
  paarungName = pName;
  Satz = s;
  if(document.getElementById){
    if(document.getElementById("popupcards").style.visibility == "visible"){
       document.getElementById("popupcards").style.visibility = "hidden";
    }else{
       document.getElementById("popupcards").style.visibility = "visible";
       document.getElementById("popupcards").innerHTML = PopupCards();
    }
  }
}

function PopupCards(){

  Woerter = Satz.split("|");
  
  var output = "";
  
  output += '<table class="popup" cellpadding="0" cellspacing="0">';
  output += '<tbody>';
  output += '<tr><td class="title" align="center"> Monatstitel </td><td> </td><td align="right"><a onclick="showpopupcards()">X </a></td></tr>';

  output += '<tr><td>';
  
  output += '<form name="yelcardsForm" id="yelcardsForm" action="#">';
  output += '1.<select id="yel1" name="yel1" onchange="addfile2(\'yel\', 1)" >';
  output += '<option value="0"></option>';
  var Teil = "";
  		for (var j = 0; j < Woerter.length; j++){
		  Teil = Woerter[j].split(":");
  		  output += '<option value="'+Teil[0]+'">'+Teil[1]+'</option>';
  		}
  output += '</select>';
  output += '<input type="text" id="minutey1" name="minyel1" value="" size="3" />';
  output += '<div id="yelcards2"></div>';
  output += '</form>';
  
  output += '</td><td> </td><td>';
  
  output += '<form name="redcardsForm" id="redcardsForm" action="#">';
  output += '1.<select id="red1" name="red1" onchange="addfile2(\'red\', 1)" >';
  output += '<option value="0"></option>';
  		for (var j = 0; j < Woerter.length; j++){
		  Teil = Woerter[j].split(":");
  		  output += '<option value="'+Teil[0]+'">'+Teil[1]+'</option>';
  		}
  output += '</select>';
  output += '<input type="text" id="minuter1" name="minred1" value="" size="3" />';
  output += '<div id="redcards2"></div>';
  output += '</form>';
  
  output += '</td></tr>';
  output += '<tr><td>';
  output += '<input type="button" name="button" value="Speichern" onclick="put5()" /><br />\n';
  output += '</td></tr>';
  output += '</tbody>';
  output += '</table>';
  return(output);
               
}//function


function addfile2(cardType, id) {
	put4(cardType, id);
	put3(id);
}

function put4(cardType, id) { 
    

	if(document.getElementById(cardType+(id+1))!=null){
	  //alert("exist"+(id+1)+document.getElementById(cardType+(id+1)));
	}else{
	  Elementknoten = document.getElementById(cardType+'cards'+(id+1));
	  wert = "";
	  wert += (id+1)+'.<select id="'+cardType+(id+1)+'" name="'+cardType+(id+1)+'" onchange="addfile2(\''+cardType+'\', '+(id+1)+')" >';
	  wert += '<option value="0"></option>';
  		for (var j = 0; j < Woerter.length; j++){
		  Teil = Woerter[j].split(":");
  		  wert += '<option value="'+Teil[0]+'">'+Teil[1]+'</option>';
  		}
	  wert += '</select>';
	  wert += '<input type="text" id="min'+cardType+(id+1)+'" name="min'+cardType+(id+1)+'" value="" size="3" />';
	  wert += '<br />\n';
	  wert += '<div id="'+cardType+'cards'+(id+2)+'"></div>';
	  
	  Elementknoten.innerHTML = ''+wert;
	}
}

function put3(id) { 

Elementknoten = document.getElementById('file'+id);
wert = Elementknoten.value;
document.forms['cardsForm'].elements['file_2'].value = ''+wert;
}

function put5() { 
  var yels = document.forms['yelcardsForm'].length;
  var reds = document.forms['redcardsForm'].length;
  var str  = "";
  for (var i = 1; i < (yels/2); i++){
  	str  = str + document.forms['yelcardsForm'].elements['yel' + i].value;
  	str  = str + ':' + document.forms['yelcardsForm'].elements['minyel' + i].value;
	if( (i+1)< (yels/2) ){
		str = str + '|';
	}
  }
  str  = str + "-";
  for (var i = 1; i < (reds/2); i++){
  	str  = str + document.forms['redcardsForm'].elements['red' + i].value;
  	str  = str + ':' + document.forms['redcardsForm'].elements['minred' + i].value;
	if( (i+1)< (reds/2) ){
		str = str + '|';
	}
  }
  document.forms[formName].elements[paarungName+'['+paarungName+'cards]'].value = str;
  showpopupcards();
}