var zIndexMat=11;
var zIndexBehaelt=9;
var numMaterials = 1;

$(document).ready(function(){
  jQuery.each(jQuery.browser, function(i, val) {  
   if(i=="msie" && jQuery.browser.version.substr(0,1)=="6") { 
    $("div[class^='material']").css("position","relative");
    $("div[class^='material']").css("z-index","12");
    $("div[class^='behaelter']").css("position","relative");
    $("div[class^='behaelter']").css("z-index","11");
    $("div[class^='turnus']").css("position","relative");
    $("div[class^='turnus']").css("z-index","11");
   }
  });
 });

reload();


function reload() {

 $(document).ready(function(){

    $("div[class^='material'] > .uberPunkt").unbind("click");
    $("div[class^='material'] > .uberPunkt").click(function () {
		$($(this).next()).slideToggle();	
    });
	
    $("div[class^='material'] > .unterPunkt > .wUnterPunkt").click(function () {

		$(this).parent().slideUp();
		$(this).parent().prev().text($(this).text());
                $(this).parent().prev().parent().prev().attr("value",$(this).text());

    });

    $("div[class^='behaelter'] > .uberPunkt").unbind("click");
    $("div[class^='behaelter'] > .uberPunkt").click(function () {

		$($(this).next()).slideToggle();	
    });
	
    $("div[class^='behaelter'] > .unterPunkt > .wUnterPunkt").click(function () {

		$(this).parent().slideUp();
		$(this).parent().prev().text($(this).text());
                $(this).parent().prev().parent().prev().attr("value",$(this).text());
    });
	$("div[class^='turnus'] > .uberPunkt").unbind("click");
    $("div[class^='turnus'] > .uberPunkt").click(function () {

		$($(this).next()).slideToggle();	
    });
	
    $("div[class^='turnus'] > .unterPunkt > .wUnterPunkt").click(function () {

		$(this).parent().slideUp();
		$(this).parent().prev().text($(this).text());
                $(this).parent().prev().parent().prev().attr("value",$(this).text());
    });

    $(".wUnterPunkt:last-child").css("border-bottom-style","none");

	for(i=0;i<$(".Stil1").length-1;i++) {
		$(".Stil1").eq(i).html("<br/><hr/>");
                $(".Stil1").eq(i).parent().attr("colspan","3");               
		//$(".Stil1 > a").get(i).href="javascript:loeschen("+(i+1)+")";
		//$(".Stil1 > a").unbind("click");
		//$(".Stil1 > a").eq(i).click(clickFunk(i));
	}

if(numMaterials>=3) {
$(".Stil1").eq(3).html("<br/>");
}
	
	
   jQuery.each(jQuery.browser, function(i, val) {  
   if(i=="msie" && jQuery.browser.version.substr(0,1)=="6") { 

      cssIE6();
    
   }
  });
 });

}


function cssIE6 () {
    $("div[class^='material'] > .uberPunkt").css("background","transparent url(/ALBA_de/wLayout/design/img/drop_down_mittel2.gif) no-repeat");
    $("div[class^='material'] > .uberPunkt").css("cursor","pointer");
    $("div[class^='material'] > .uberPunkt").css("width","140px");
    $("div[class^='material'] > .uberPunkt").css("padding-left","8px");
    $("div[class^='material'] > .uberPunkt").css("line-height","16px");

    $("div[class^='behaelter'] > .uberPunkt").css("background","transparent url(/ALBA_de/wLayout/design/img/drop_down_mittel2.gif) no-repeat");
    $("div[class^='behaelter'] > .uberPunkt").css("cursor","pointer");
    $("div[class^='behaelter'] > .uberPunkt").css("width","140px");
    $("div[class^='behaelter'] > .uberPunkt").css("padding-left","8px");
    $("div[class^='behaelter'] > .uberPunkt").css("line-height","16px");


    $("div[class^='turnus'] > .uberPunkt").css("background","transparent url(/ALBA_de/wLayout/design/img/drop_down_mittel2.gif) no-repeat");
    $("div[class^='turnus'] > .uberPunkt").css("cursor","pointer");
    $("div[class^='turnus'] > .uberPunkt").css("width","140px");
    $("div[class^='turnus'] > .uberPunkt").css("padding-left","8px");
    $("div[class^='turnus'] > .uberPunkt").css("line-height","16px");

    $("div[class^='material'] > .uberPunkt").css("position","relative");
    $("div[class^='material'] > .uberPunkt").css("z-index","1");
    $("div[class^='behaelter > .uberPunkt']").css("position","relative");
    $("div[class^='behaelter > .uberPunkt']").css("z-index","1");
    $("div[class^='turnus'] > .uberPunkt").css("position","relative");
    $("div[class^='turnus'] > .uberPunkt").css("z-index","1");

    $("div[class^='material'] > .unterPunkt").css("display","none");
    $("div[class^='material'] > .unterPunkt").css("width","128px");
    $("div[class^='material'] > .unterPunkt").css("padding-left","8px");
    $("div[class^='material'] > .unterPunkt").css("border","1px solid #d5d7e3");
    $("div[class^='material'] > .unterPunkt").css("line-height","190%");
    $("div[class^='material'] > .unterPunkt").css("position","absolute");
    $("div[class^='material'] > .unterPunkt").css("z-index","15");
    $("div[class^='material'] > .unterPunkt").css("background-color","#fff");

    $("div[class^='behaelter'] > .unterPunkt").css("display","none");
    $("div[class^='behaelter'] > .unterPunkt").css("width","128px");
    $("div[class^='behaelter'] > .unterPunkt").css("padding-left","8px");
    $("div[class^='behaelter'] > .unterPunkt").css("border","1px solid #d5d7e3");
    $("div[class^='behaelter'] > .unterPunkt").css("line-height","190%");
    $("div[class^='behaelter'] > .unterPunkt").css("position","absolute");
    $("div[class^='behaelter'] > .unterPunkt").css("z-index","15");
    $("div[class^='behaelter'] > .unterPunkt").css("background-color","#fff");

    $("div[class^='turnus'] > .unterPunkt").css("display","none");
    $("div[class^='turnus'] > .unterPunkt").css("width","128px");
    $("div[class^='turnus'] > .unterPunkt").css("padding-left","8px");
    $("div[class^='turnus'] > .unterPunkt").css("border","1px solid #d5d7e3");
    $("div[class^='turnus'] > .unterPunkt").css("line-height","190%");
    $("div[class^='turnus'] > .unterPunkt").css("position","absolute");
    $("div[class^='turnus'] > .unterPunkt").css("z-index","15");
    $("div[class^='turnus'] > .unterPunkt").css("background-color","#fff");

    $("div[class^='material'] > .unterPunkt .wUnterPunkt").css("cursor","pointer");
    $("div[class^='material'] > .unterPunkt .wUnterPunkt").css("font-weight","normal");
    $("div[class^='material'] > .unterPunkt .wUnterPunkt").css("border-bottom","1px dashed #d5d7e3");
    $("div[class^='material'] > .unterPunkt .wUnterPunkt").css("width","120px");
    $("div[class^='material'] > .unterPunkt .wUnterPunkt").css("line-height","190%");

    $("div[class^='behaelter'] > .unterPunkt .wUnterPunkt").css("cursor","pointer");
    $("div[class^='behaelter'] > .unterPunkt .wUnterPunkt").css("font-weight","normal");
    $("div[class^='behaelter'] > .unterPunkt .wUnterPunkt").css("border-bottom","1px dashed #d5d7e3");
    $("div[class^='behaelter'] > .unterPunkt .wUnterPunkt").css("width","120px");
    $("div[class^='behaelter'] > .unterPunkt .wUnterPunkt").css("line-height","190%");

    $("div[class^='turnus'] > .unterPunkt .wUnterPunkt").css("cursor","pointer");
    $("div[class^='turnus'] > .unterPunkt .wUnterPunkt").css("font-weight","normal");
    $("div[class^='turnus'] > .unterPunkt .wUnterPunkt").css("border-bottom","1px dashed #d5d7e3");
    $("div[class^='turnus'] > .unterPunkt .wUnterPunkt").css("width","120px");
    $("div[class^='turnus'] > .unterPunkt .wUnterPunkt").css("line-height","190%");

    
    $("div[class^='material'] > .unterPunkt .wUnterPunkt:hover").css("font-weight","bold");
    $("div[class^='behaelter'] > .unterPunkt .wUnterPunkt:hover").css("font-weight","bold");
    $("div[class^='turnus'] > .unterPunkt .wUnterPunkt:hover").css("font-weight","bold");

}



function material(numMat) {
	
        var quelltext = '  	\n  <!-- web:item:start name="Eingabefeld"  -->\n';
	
	var quelltextTD1 = '<!-- web:text:start editor="box" rows="1" -->Material<!-- web:text:stop -->';
		
        var quelltextTD2 = '';
	quelltextTD2 += '<!-- web:input:start --> \n';
	quelltextTD2 += '<input type="hidden" name="material-'+numMat+'" id="material-'+numMat+'" />\n';
	quelltextTD2 += '<!-- web:input:stop -->\n';
	quelltextTD2 += '<div class="material-'+numMat+'"> \n';
	quelltextTD2 += '  <div class="uberPunkt"> Bitte auswählen </div> \n';
	quelltextTD2 += '  <div class="unterPunkt"> \n';
	quelltextTD2 += '      <div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Altakten");\'>Altakten<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Altmetall");\'>Altmetall<\/div> \n';
	quelltextTD2 += '              <div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Bauabfälle");\'>Bauabfälle<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Bio");\'>Bio<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Elektronikschrott");\'>Elektronikschrott<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Gelbe Tonne");\'>Gelbe Tonne<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Glas");\'>Glas<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Grünschnitt");\'>Grünschnitt<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Holz");\'>Holz<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Kunststoff");\'>Kunststoff<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("PPK");\'>PPK<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Restmüll");\'>Restmüll<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Sondermüll");\'>Sondermüll<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Speisereste");\'>Speisereste<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Fäkalien");\'>Fäkalien<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Sperrmüll");\'>Sperrmüll<\/div> \n';
	quelltextTD2 += '		<div class="wUnterPunkt" onClick=\'javascript:changeWerststoff("Gewerbliche Leichtstoffe");\'>Gewerbliche Leichtstoffe<\/div> \n';
	quelltextTD2 += '	 </div>                 \n';
	quelltextTD2 += '  </div>                 \n';
	

	var quelltextTD3 = ' ';
	quelltextTD3 += '<!-- web:input:start --> \n';
	quelltextTD3 += '                  <input name="menge'+numMat+'" id="menge'+numMat+'" style="width: 136px;" value="Menge" type="text"> \n';
	quelltextTD3 += '                  <!-- web:input:stop --> \n';

	var quelltextTD4 = '                  <textarea name="form'+numMat+'" id="form'+numMat+'" style="font-size:11px; font-family:arial; padding:3px;margin:0px 5px 0px 5px;width: 140px; height: 65px;" type="text">Sonstiges (...)</textarea>';
	quelltextTD4 += '	<!-- web:item:stop --> \n';

	var quelltext2TD1 = '      Behälter';

	var quelltext2TD2 = '<!-- web:input:start --> \n';
	quelltext2TD2 += '  <input type="hidden" name="behaelter-'+numMat+'" id="behaelter-'+numMat+'" /> ';
	quelltext2TD2 += '                  <!-- web:input:stop --> \n';

	quelltext2TD2 += '                  <div class="behaelter-'+numMat+'"> \n';
	quelltext2TD2 += '  <div class="uberPunkt"> Bitte auswählen </div> \n';
	quelltext2TD2 += '  <div class="unterPunkt"> \n';

	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("240 Liter Umleerbehälter");\'>240 Liter Umleerbehälter<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("360 Liter Umleerbehälter");\'>360 Liter Umleerbehälter<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("660 Liter Umleerbehälter");\'>660 Liter Umleerbehälter<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("1,1 m³ Umleerbehälter");\'>1,1 m³ Umleerbehälter<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("2 m³ Absetzcontainer");\'>2 m³ Absetzcontainer<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("2,5 m³ Überkopfmulde");\'>2,5 m³ Überkopfmulde<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("3 m³ Absetzcontainer");\'>3 m³ Absetzcontainer<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("5,5 m³ Absetzcontainer");\'>5,5 m³ Absetzcontainer<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("5,5 m³ Überkopfmulde");\'>5,5 m³ Überkopfmulde<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("7,5 m³ Absetzcontainer");\'>7,5 m³ Absetzcontainer<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("11 m³ Absetzcontainer");\'>11 m³ Absetzcontainer<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("13 m³ Abgleitcontainer");\'>13 m³ Abgleitcontainer<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("25 m³ Abgleitcontainer");\'>25 m³ Abgleitcontainer<\/div> \n';
	quelltext2TD2 += '                    <div class="wUnterPunkt" onClick=\'javascript:changeBehaelter("34 m³ Abgleitcontainer");\'>34 m³ Abgleitcontainer<\/div> \n';
	quelltext2TD2 += '                  </div> \n';
	quelltext2TD2 += '               </div> \n';	


	var quelltext2TD3 = '                <!-- web:item:start name="Auswahlfeld"  --> \n';
	quelltext2TD3 += '                  <input type="hidden" name="turnus-'+numMat+'" id="turnus'+numMat+'"> \n';
	quelltext2TD3 += '                <!-- web:input:start --> \n';
	quelltext2TD3 += '                 <div class="turnus-'+numMat+'"> \n';
	quelltext2TD3 += '                    <div class="uberPunkt"> Turnus auswählen </div> \n';
	quelltext2TD3 += '                     <div class="unterPunkt"> \n';
	quelltext2TD3 += '                      <div class="wUnterPunkt" onClick=\'javascript:changeTurnus("wöchentlich");\'>wöchentlich<\/div> \n';
	quelltext2TD3 += '                      <div class="wUnterPunkt" onClick=\'javascript:changeTurnus("14-täglich");\'>14-täglich<\/div> \n';
	quelltext2TD3 += '                      <div class="wUnterPunkt" onClick=\'javascript:changeTurnus("4-wöchentlich");\'>4-wöchentlich<\/div> \n';
	quelltext2TD3 += '                      <div class="wUnterPunkt" onClick=\'javascript:changeTurnus("auf Abruf");\'>auf Abruf<\/div> \n';
	quelltext2TD3 += '                    </div> \n';
	quelltext2TD3 += '                 </div> \n';
	quelltext2TD3 += '                  <!-- web:input:stop --> \n';
	quelltext2TD3 += '                  <!-- web:item:stop --> \n\n';
	                 


         var quelltext3TD2 = '';
         var quelltext3TD1 = '';
if(numMaterials<4) {	
quelltext3TD1 += '                   <div align="left" class="Stil1"><br /><a id="aMaterial'+(numMat+1)+'" href="javascript:material('+(numMat+1)+');">weitere Materialien zur Entsorgung angeben</a> </div> \n';
}
	quelltext3TD1 += '';

	
	
         var index = document.getElementById("entsorgungsTable").rows.length;

         var trLeer = document.getElementById("entsorgungsTable").insertRow(index);


		var td1 = trLeer.insertCell(0);
		var td2;
		var td3;
		var td4;
        td1.innerHTML ='<br/><br/>';



         var tr = document.getElementById("entsorgungsTable").insertRow(index+1);
        td1 = tr.insertCell(0);
        td2 = tr.insertCell(1);
        td3 = tr.insertCell(2);
        td4 = tr.insertCell(3);

        td1.innerHTML = quelltextTD1;
        td2.innerHTML = quelltextTD2;
        td3.innerHTML = quelltextTD3;
        td4.innerHTML = quelltextTD4;
        td3.className = "formValue";
        td4.rowSpan = "2";
        td4.align = "center";
         tr.style.marginTop = "5px";
         tr.id = index;

         var tr2 = document.getElementById("entsorgungsTable").insertRow(index+2);
        td1 = tr2.insertCell(0);
        td2 = tr2.insertCell(1);
        td3 = tr2.insertCell(2);

	td1.innerHTML = quelltext2TD1;
	td2.innerHTML = quelltext2TD2;
	td3.innerHTML = quelltext2TD3;

        td2.className="text";
        td2.vAlign="center";

        td3.className="text";
        td3.vAlign="center";
         var tr3 = document.getElementById("entsorgungsTable").insertRow(index+3);
         td1 = tr3.insertCell(0);
         td2 = tr3.insertCell(1);
	td1.innerHTML = quelltext3TD2;
	td2.innerHTML = quelltext3TD1;
        td2.colSpan="2";

//         document.getElementById("aMaterial"+(numMat-1)).href="javascript:loeschen("+index+")";
//         document.getElementById("aMaterial"+(numMat-1)).innerHTML = "<div>Material löschen</div>";

      $(".material-"+numMat).css("z-index",zIndexMat-1);
      $(".behaelter-"+numMat).css("z-index",zIndexMat-2);
      $(".turnus-"+numMat).css("z-index",zIndexMat-2);

      zIndexMat-=2;
      zIndexBehaelt--;
var i=0;

  //    for(i=0;i<$(".Stil1 > a").length-1;i++) {
  //        $(".Stil1 > a").eq(i).text("Material löschen");
  //        $(".Stil1 > a").get(i).href="javascript:loeschen("+(i+1)+")";
  //        $(".Stil1 > a").unbind("click");
  //        $(".Stil1 > a").eq(i).click(clickFunk(i));
 //     }

  //    $(".Stil1").eq($(".Stil1").length-1).html('<a id="aMaterial'+(numMat+1)+'" href="javascript:material('+(numMat+1)+');">weitere Materialien zur Entsorgung angeben</a>');
    reload();

    numMaterials++;
}

function loeschen (value) {
  // alert(value);
  value = value -1;
  $("#material-"+value).parent().parent().html(" ");
  $("#behaelter-"+value).parent().parent().next().html(" ");  
  $("#behaelter-"+value).parent().parent().html(" ");
  
//  $(".behaelter-"+value).parent("tr").next("tr");
 
}