/* GUI */

var songs = [];

var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var testName = /^[A-Za-z0-9]+$/i;
var dialogLogin, formLogin;


function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

  
function   setCookieLang(newLang) {
	
		   $.ajax({
			  type: "POST",                                      
			  url: 'ajaxalterlang.php',    
			  dataType: 'json', 
	        data: ({langNew: newLang}),
		  success: function(data)         
				{
	    window.setTimeout('location.reload()', 1000);
				} 
			}); 
}
	  

		   $("#userLogin, .moreItems, .btnDisabled").click(function(event) { 
   
			dialogLogin = $("#loginForm").dialog({
			autoOpen: false,
			height: 580,
			width: 350,
			modal: true,
			
			title: languages["LOGINSIGNUP"],
			draggable: true,
			position: { my: "center", at: "center", of: window },
			closeOnEscape: true,
      		buttons: {
					Cancel: function() {
					dialogLogin.dialog( "close" );
        	},
    
      		},
			open: function() {
				// Fokus setzen und aria-expanded aktualisieren
				$("#newUser").trigger("focus");
				$("#userLogin a").attr("aria-expanded", "true");
			},
      close: function() {
 // aria-expanded zurücksetzen
 $("#userLogin a").attr("aria-expanded", "false");
 console.log("Login dialog closed.");
      }
    });
	       dialogLogin.dialog( "open" );
		});	  
	
	
	
	
	var wrongCount = 0;	
$("#loginBtn").mousedown(function (e) {
       submitLogin();
}); 


$('#password').keypress(function (e) {
  if (((e.keyCode || e.which) == 13)) {
 submitLogin();
    return false; 
  }
});


function submitLogin() {	
    var userInfo = htmlEntities($('#eMail').val());
    var userPass = htmlEntities($('#password').val());

    $.ajax({
        type: "POST",
        url: 'ajaxconnect.php',    
        dataType: 'json', 
        data: {uinfo: userInfo, upass: userPass},
        success: function(data) {
            if (data.success) {
                // Login erfolgreich -> Seite neuladen oder weiterleiten
                dialogLogin.dialog("close");
                window.setTimeout('location.reload()', 1000);
            } else {
                // Login fehlgeschlagen -> Fehler ausgeben
                wrongCount++;
                if (wrongCount < 4) {
                    $('#outputLogin').html(data.message || languages["TRYAGAIN"]);
                    $('#eMail').val("");
                    $('#password').val("");
                } else {
                    dialogLogin.dialog("close");
                    $('#eMail').val("");
                    $('#password').val("");
                    $("<div></div>").html(data.message || languages["TRYAGAIN"]).dialog({
                        title: "Error",
                        resizable: false,
                        modal: true,
                        buttons: {
                            "OK": function() {
                                $(this).dialog("close");
                            }
                        }
                    });
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        } 
    });
}

 
$('#newUser').keyup(function (e) {
 
if (!testName.test($('#newUser').val()) || $('#newUser').val() == "")
$('#outputSignup').html("Not a valid name!");
else
$('#outputSignup').html("");
 
}); 


$('#newMail').keyup(function (e) {
 
if (!testEmail.test($('#newMail').val()) || $('#newMail').val() == "")
$('#outputSignup').html(languages["TITLE_EMAIL"]);
else
$('#outputSignup').html("");
 
});
  
  
$('#newMail').add('#newUser').add('#newPass').keyup( function (e) {
 if ($('#newMail').val() != "" && $('#newUser').val() != "" && $('#newPass').val() != "" && $('#outputSignup').is(':empty'))  
	 $('#signupBtn').prop("disabled", false);
	 else 	$('#signupBtn').prop("disabled", true);
 });  
  

$('#newPass').keypress(function (e) {
  if (((e.keyCode || e.which) == 13)) {
	  
	  if (!$('#signupBtn').is('[disabled=disabled]'))
	 submitAdduser();
    return false; 
  }
});

$("#signupBtn").mousedown(function (e) {
       submitAdduser();
}); 



function submitAdduser() {
 if (!testEmail.test($('#newMail').val()) || !testName.test($('#newUser').val()) || $('#newPass').val() == "")
$('#outputSignup').html(languages["TRYAGAIN"]);
 else {

var userExists = true;
	 
 if($('#passwordRepeat').val() == "" && $('#zip').val() == "") {
	 
	  var userName = htmlEntities($('#newUser').val());
	  var userMail =  htmlEntities($('#newMail').val());
	  var userPass =  htmlEntities($('#newPass').val());
	  var userLang =  htmlEntities($('#langSelectSave').val());
	 $.ajax({
	   type: "POST",                                      
      url: 'ajaxusercheck.php',    
	  dataType: 'json', 
      data: ({uname: userName, umail: userMail}),
      success: function(data)         
      {
		 if(data == null) {
				$("<div></div>").html(languages["TRYAGAIN"]).dialog({
        title: "Error",
        resizable: false,
        modal: true,
        buttons: {
            "OK": function() 
            {
                $( this ).dialog( "close" );
            }
        }
    	});
		 }
        else {
		userExists = data.nameexists;
		mailExists = data.mailexists;
		
		

if (userExists == false && mailExists == false ) {	
	

	 $.ajax({
	   type: "POST",                                      
      url: 'ajaxuseradd.php',    
	  dataType: 'json', 
      data: ({uname: userName, upass: userPass, umail: userMail, ulang: userLang}),
      success: function(data)         
      {
		 if(data == null) {
				$("<div></div>").html(languages["TRYAGAIN"]).dialog({
        title: "Error",
        resizable: false,
        modal: true,
        buttons: {
            "OK": function() 
            {
                $( this ).dialog( "close" );
            }
        }
    	});
		 }
        else {
		ga("send", "event", "User", "Signup");
		dialogLogin.dialog( "close" );
	    window.setTimeout('location.reload()', 1000);
		}
      },
	    error: function(jqXHR, textStatus, errorThrown){
        alert(errorThrown);
    } 
    }); 
} 
else {
	if (userExists == true )
		$('#outputSignup').html(languages["USERTAKEN"]);
	else if (mailExists == true)
		$('#outputSignup').html(languages["ADDRESSUSED"]);
}

		
		
		}
      },
	    error: function(jqXHR, textStatus, errorThrown){
        alert(errorThrown);
    } 
    }); 



 }
 else {
	 dialogLogin.dialog( "close" );
	 $('#signupBtn').prop("disabled", true);
	$('#outputSignup').html(languages["TRYAGAIN"]);

  } 


 
 }
}
  


$(document).ready(function() {
    $('#userInfo').click(function() {
            $('#userMenu').slideToggle("fast");
			
    });
});


  $( function() {
    $( "#userMenu" ).menu({
		  icons: { topMenu: "ui-icon-circle-triangle-e" },

		});
  } );
  
  
  
  // DELETE COOKIE AND CLEAR STAGE WITHOUT RELOAD
$('#logout').click(function () {
 $( "#logout-confirm" ).dialog( "open" );
});

  $( function() {
    $( "#logout-confirm" ).dialog({
      resizable: false,
      height: "auto",
	  autoOpen: false ,
      width: 400,
      modal: true,
	  position: { my: "center", at: "center", of: window },
      buttons: {
        "Log out": function() {
$('#mainStage').empty();
$.removeCookie('stageSetup', { path: '/' });
$.cookie("stageSetup", null, { path: '/' });
$.removeCookie('userID', { path: '/' });
$.cookie("userID", null, { path: '/' });
$.removeCookie('userToken', { path: '/' });
$.cookie("userToken", null, { path: '/' });
$.removeCookie('userID');
$.removeCookie('userToken');
$.removeCookie('stageSetup');

itemArray = [];

		  $.get("deleteCookies.php");
	$( this ).dialog( "close" );
		
      window.setTimeout('location.reload()', 1000);
	  
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );


  $(document).ready(function() {
    $('#langSelect').click(function() {
        let menu = $('#LangNav');
        let button = $('#langSelect a');
        let isExpanded = button.attr('aria-expanded') === 'true';

        menu.slideToggle("fast");
        button.attr('aria-expanded', isExpanded ? 'false' : 'true');

        if (!isExpanded) {
            menu.find('a').first().focus(); // Fokus auf erstes Menüelement setzen
        }
    });
});


  $( function() {
    $("#LangNav" ).menu({
	});
	
  } );



    $("#downloadImg").click(function() {
      var doc = new jsPDF('p', 'mm', 'letter');
	
		$('#stageArea').addClass('toPDF');
       
        if(songs.length <= 10)
		$('#stageArea').addClass('songsL');
        else if(songs.length <= 25)
		$('#stageArea').addClass('songsM');
        else if(songs.length >= 40)
		$('#stageArea').addClass('songsS');

 var pdf = new jsPDF('p', 'pt', 'letter');
	   pdf.addHTML($('#songListContent')[0], function () {
     pdf.save('Test.pdf');
 
       $('#stageArea').removeClass('toPDF');
		$('#stageArea').removeClass('songsS');
		$('#stageArea').removeClass('songsM');
		$('#stageArea').removeClass('songsL');

	   
 });


  $("#mainStage").find('.screenShotTempCanvas').remove();
  $("#mainStage").find('.tempHide').show().removeClass('tempHide');
  

});
  
var loggedin = false;
var trName = htmlEntities($('#trName').val());


   $("#saveTR").click(function(event) {

  if ($.cookie("userID") != null && $.cookie("userID") != ""){
saveTR();
			  //////////////
			    }
				else saveTR();
				
			 		 });	  
		  
function saveTR() {
	 
			  	  if ($.cookie("userID") != null && $.cookie("userID") != ""){
				  
				  if (trName == null || trName == "")
				  {
					  trName = "New Setlist";
				  }
				  else trName = htmlEntities($('#trName').val());
				  
			  
					if (loaded == false) {
				
							$.ajax({
							   type: "POST",                                      
							  url: 'ajaxtradd.php',    
							  dataType: 'json', 
							  data: ({setListName: trName, trContent: localStorage.getItem('stageSetup')}), // STORE songs as well!!
							  success: function(data)         
							  {
								$("#saveTR a").animate({
								  color: "#3a3",
								  
								}, 200 );
								$("#saveTR a").animate({
								  color: "#000",
								}, 500 );				
	
						window.location.replace("?do=opn&tid="+data.trID);
							
							  },

								error: function(jqXHR, textStatus, errorThrown){
	
								alert(errorThrown);
							} 
							});
					  }
					  
					  
					 else {
						 	$.ajax({
							  type: "POST",                                      
							  url: 'ajaxtralter.php',    
							  dataType: 'json', 
							  data: ({setListName: trName, trContent: localStorage.getItem('stageSetup'), trID: techriderID}),
							  success: function(data)         
							  {
								$("#saveTR a").animate({
								  color: "#3a3",
								  
								}, 200 );
								$("#saveTR a").animate({
								  color: "#000",
								}, 500 );				
							
							window.location.replace("?do=opn&tid="+techriderID);
							
							  },
								error: function(jqXHR, textStatus, errorThrown){
								
							} 
							});
						 
						 
					 }
					  
				  
				  }
				  else {
		 
				  dialogLogin = $("#loginForm").dialog({
				  autoOpen: false,
				  height: 500,
				  width: 350,
				  modal: true,
				  
				  title: languages["LOGINSIGNUP"],
				  draggable: true,
				  position: { my: "center", at: "center", of: window },
				  closeOnEscape: true,
				  buttons: {
						  Cancel: function() {
						  dialogLogin.dialog( "close" );
				  },
		  
				  },
			close: function() {
	  
			}
		  });
				 dialogLogin.dialog( "open" );
			  }

}
		  
		  
		  $( "#selectTrMenu" ).dialog({
					autoOpen: false,
					  resizable: false,
						height: 450,
						width: 350,
			  });
		  
		  
		  $('#openTecMenu').click(function () {
	   $( "#selectTrMenu" ).dialog( "open" );
	   
	  	 $.ajax({
			type: "POST",                                      
			url: 'ajaxtrlist.php',    
			dataType: 'html', 
			success: function(data)         
			{
			  $('#selectTrList').empty();
			  $('#selectTrList').append(data);
		  } 
		  });
 
});
	


var trID = 0;

function deleteTrSetup(thisID) {
	trID = thisID;
      $( "#delete-dialog-confirm" ).dialog( "open" );
 	   $( "#selectTrMenu" ).dialog( "close" );

}

  $( function() {
    $( "#delete-dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
	  autoOpen: false,
      width: 400,
      modal: true,

      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
		 		 	 
		 
		     $.ajax({
	   type: "POST",                                      
      url: 'ajaxtrdel.php',    
	  dataType: 'json', 
      data: ({techID: trID}),
      success: function(data)         
      {
	  if (typeof techriderID !== 'undefined' && trID == techriderID) {
	  	localStorage.clear();	
	 	window.location.replace("/");  
		  }
		  
	      },
	    error: function(jqXHR, textStatus, errorThrown){
        alert(errorThrown);
    } 
    });
		 
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );
  
  
  
		  $( "#passReset" ).dialog({
					autoOpen: false,
					  resizable: false,
						height: 450,
						width: 350,
			  });  
  
$('#changePass').click(function () {
 $( "#passReset" ).dialog( "open" );

});

var newPass = "";
var newPass2 = "";

function chgPass() {
    var newPass = $('#newPass1').val();
    var newPass2 = $('#newPass2').val();

    if (newPass === newPass2) { 
        $.ajax({
            type: "POST",                                      
            url: "ajaxpwalter.php",    
            dataType: "json", 
            data: { newPassword: newPass }, // Keine unnötigen Klammern
            success: function(response) {
                if (response.success) {
                    alert("✅ OK!");
                    $("#passReset").dialog("close");
                } else {
                    alert("❌ Error: " + response.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert("❌ Server Error: " + errorThrown);
            }
        });
    } else {
        $('#newPass1').val("");
        $('#newPass2').val("");
        alert(languages["TRYAGAIN"]);
    }
}

  
  
  

	  
	  
$('#shareFacebook').click(function (event) {
	$('#shareSub').css("display", "none");
	$('#stageArea').css("width", "100%");
//	window.open("about:blank", "newPage");
var w = window.open("about:blank", "newPage");
var html = "<b>Please wait!</b><br>Your post is being created ...";
w.document.writeln(html);

	 var filename = htmlEntities($('#trName').val());
	 if (filename == null || filename == "" || filename == " ")  {
	  filename = "My Concert-Setlist";
	 }
		
 var doc = new jsPDF('l', 'px');
	
  var svgElements = $("#mainStage").find('svg');

  svgElements.each(function() {
    var canvas, xml;

    $.each($(this).find('[style*=em]'), function(index, el) {
      $(this).css('font-size', getStyle(el, 'font-size'));
    });

    canvas = document.createElement("canvas");
    canvas.className = "screenShotTempCanvas";
    xml = (new XMLSerializer()).serializeToString(this);

    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

    canvg(canvas, xml);
    $(canvas).insertAfter(this);
    $(this).attr('class', 'tempHide');
    $(this).hide();
	

  });

html2canvas($("#mainStage"),  {
    onrendered: function (canvas) {
        var imagedata = canvas.toDataURL('image/png');
		imgdataRaw = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");

$.ajax({
							type: "POST",                                      
							  url: 'ajaxsocialadd.php',    
							  dataType: 'json', 
							  data: ({setListName: filename, trContent: localStorage.getItem('stageSetup'), imageData: imgdataRaw}),
							  success: function(data)         
							  {		
						  	$('#stageArea').css("width", "75%");
						window.open("https://www.facebook.com/share.php?u=https://concert-setlist.com/share/"+data.tid+"&picture=https://concert-setlist.com/images/social/"+data.tid+".jpg&title="+filename, "newPage", "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");					
							  },
								error: function(jqXHR, textStatus, errorThrown){} 
							});
    }
});
  
	
});	  

	  
$('#shareTwitter').click(function (event) {
	$('#shareSub').css("display", "none");
	$('#stageArea').css("width", "100%");
var w = window.open("about:blank", "newPage");
var html = "<b>Please wait!</b><br>Your post is being created ...";
w.document.writeln(html);

	 var filename = htmlEntities($('#trName').val());
	 if (filename == null || filename == "" || filename == " ")  {
	  filename = "My Concert-Setlist";
	 }
		
 var doc = new jsPDF('l', 'px');
	
  var svgElements = $("#mainStage").find('svg');

  svgElements.each(function() {
    var canvas, xml;

    $.each($(this).find('[style*=em]'), function(index, el) {
      $(this).css('font-size', getStyle(el, 'font-size'));
    });

    canvas = document.createElement("canvas");
    canvas.className = "screenShotTempCanvas";
    xml = (new XMLSerializer()).serializeToString(this);

    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

    canvg(canvas, xml);
    $(canvas).insertAfter(this);
    $(this).attr('class', 'tempHide');
    $(this).hide();
	

  });

html2canvas($("#mainStage"),  {
    onrendered: function (canvas) {
        var imagedata = canvas.toDataURL('image/png');
		imgdataRaw = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");

$.ajax({
							type: "POST",                                      
							  url: 'ajaxsocialadd.php',    
							  dataType: 'json', 
							  data: ({setListName: filename, trContent: localStorage.getItem('stageSetup'), imageData: imgdataRaw}),
							  success: function(data)         
							  {		
						  	$('#stageArea').css("width", "75%");

						window.open("https://twitter.com/intent/tweet?url=https://concert-setlist.com/share/"+data.tid, "newPage", "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");					
									
							  },

								error: function(jqXHR, textStatus, errorThrown){} 
							});

    }
});
  
	
});	  






////////
  
$('#shareLink').click(function (event) {
	$('#shareSub').css("display", "none");
	$('#stageArea').css("width", "100%");

	 var filename = htmlEntities($('#trName').val());
	 if (filename == null || filename == "" || filename == " ")  {
	  filename = "My Concert-Setlist";
	 }
		
 var doc = new jsPDF('l', 'px');
	
  var svgElements = $("#mainStage").find('svg');

  svgElements.each(function() {
    var canvas, xml;

    $.each($(this).find('[style*=em]'), function(index, el) {
      $(this).css('font-size', getStyle(el, 'font-size'));
    });

    canvas = document.createElement("canvas");
    canvas.className = "screenShotTempCanvas";
    xml = (new XMLSerializer()).serializeToString(this);

    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

    canvg(canvas, xml);
    $(canvas).insertAfter(this);
    $(this).attr('class', 'tempHide');
    $(this).hide();
	

  });

html2canvas($("#mainStage"),  {
    onrendered: function (canvas) {
        var imagedata = canvas.toDataURL('image/png');
		imgdataRaw = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");

$.ajax({
							type: "POST",                                      
							  url: 'ajaxsocialadd.php',    
							  dataType: 'json', 
							  data: ({setListName: filename, trContent: localStorage.getItem('stageSetup'), imageData: imgdataRaw}),
							  success: function(data)         
							  {		
						  	$('#stageArea').css("width", "75%");

							$("#dialog-link").dialog({
								modal: true,
								buttons:{
					"Cancel": function() {
					$("#dialog-link").dialog( "close" );
					 	},
						"Copy": function() {
							$("#shareURL").focus();		
							$("#shareURL").select();	
					document.execCommand("Copy");
					 	} 
						
						
						}
    
								});
							$("#shareURL").val("https://concert-setlist.com/share/"+data.tid);		
							$("#shareURL").focus();		
							$("#shareURL").select();		

							  },

								error: function(jqXHR, textStatus, errorThrown){} 
							});

    }
});
  
	
});	  

////

$('#shareTop').click(function() {
var curState = $('#shareSub').css("display");

if (curState == "none")
$('#shareSub').css("display", "inline");
else
$('#shareSub').css("display", "none");
}
);
	  

		  $("#startNow").click(function() {
    $('html, body').animate({
        scrollTop: $("#mainContainer").offset().top-50
    }, 750);
});


  $(window).on("resize", settopMenu);

function settopMenu() {
if ($(window).width() < 550) {
var stageHeight = $('#stageArea').height(); 
$('#listView').css("margin-top", stageHeight + 120);
}
else {
	$('#listView').css("margin-top", 'initial');
}
}
settopMenu();



////////////////

$(document).ready(function() {
$("#feedbackTab").click(function(event) { 
	
 $( function() {
    $( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Send: function() {
			
		
	 var mood = $("input:radio[name='FeedBackSelector']:checked").val();
    var feedbackText = $('#feedbackMessage').val();
			
			
			    $.ajax({
        type: "POST",
        url: 'sendFeedback.php',
	  	dataType: 'json', 
	      data: ({userMood: mood, userMessage: feedbackText}),
        success: function() {
		$( "#dialog-message" ).dialog( "close" );
            alert("Thank you!");
		$("#feedbackTab").css("display", "none");	
        }

    });

			
			
        }
      }
    });
  });
});
});

$(document).ready(function() {
	$(document).on("click", "#setLang", function(event) {
		$("#langModal").css("display", "block"); // Direkt anzeigen
	});
	
    $(document).on("click", "#closeLangModal", function(event) {
        $("#langModal").fadeOut(); // Modal ausblenden
    });

	$(document).on("click", "#setLangConfirm", function(event) {
		event.preventDefault(); // Standard-Aktion verhindern
		event.stopPropagation(); // Stellt sicher, dass nichts anderes getriggert wird
	
		var selectedLang = $("#langModal #langSelectSave").val();
		console.log("✅ DEBUG: Gewählte Sprache:", selectedLang);
	
		$.ajax({
			url: "ajaxalterlang.php",
			type: "POST",
			data: { langNew: selectedLang },
			dataType: "json",
			success: function(response) {
				console.log("✅ DEBUG: AJAX Response:", response);
				if (response.success === "true") {
					console.log("🔄 DEBUG: Seite wird neu geladen...");
					location.reload();
				} else {
					alert("❌ Fehler beim Speichern der Sprache: " + response.error);
				}
			},
			error: function(xhr, status, error) {
				console.error("❌ AJAX Fehler:", status, error);
				alert("Serverfehler. Bitte versuche es erneut.");
			}
		});
	
		return false;
	});
	
});


  $("#forgotPassword").click(function(event) { 
   
   $( "#loginForm" ).dialog( "close" );
			dialogLogin = $("#resetForm").dialog({
			autoOpen: false,
			height: 200,
			width: 350,
			modal: true,
			
			title: languages["FORGOTPASS"],
			draggable: true,
			position: { my: "center", at: "center", of: window },
			closeOnEscape: true,
      		buttons:{
					"Cancel": function() {
					dialogLogin.dialog( "close" );
					 	},
    
	    			"Reset Password": function() {
       	var resetMail = $('#newPassRequest').val();

if (resetMail != "" && resetMail !== 'undefined' && resetMail.indexOf("@") > -1){

$.ajax({
	   type: "POST",                                      
      url: 'ajaxpwreset.php',    
	  dataType: 'json', 
      data: ({resetPw: resetMail}),
      success: function(data)         
      {
	$( "#resetForm" ).dialog( "close" );
	$( "#resetInfo" ).dialog();

	      },
	    error: function(jqXHR, textStatus, errorThrown){
        alert(errorThrown);
    } 
    });
	}
     		}
      		},
      close: function() {

      }
    });
	       dialogLogin.dialog( "open" );
		});	  
	
	
 
var songHelp = [];
  
  $( function() {
    $( "#setList" ).sortable({
      placeholder: "ui-state-highlight",
	        revert: true,
			 receive: function( event, ui ) {
	 		   songHelp.splice(0);
			   songHelp = songs.slice();
				songHelp.splice($(this).data("ui-sortable").currentItem.index(), 0,$(ui.item).text());
			//	console.log($(this).data("ui-sortable").currentItem.index()+ ' -- ' + $(ui.item).text())

				 },
	   drop: function( event, ui ) {
		   songs.splice(0);
			   $('ol#setList li span').each(function() { 
			      songs.push(this.innerHTML); 
})},
	   beforeStop: function( event, ui ) {
		
		   
			if (songHelp.length < 1) {
		   songs.splice(0);
		   	//	   ELEMENT MUSS IN ARRAY HINZUGEFÜGT WERDEN!
		   $('ol#setList li span').each(function() { 
			      songs.push(this.innerHTML); 
			})
			}
			else {
			songs = songHelp.slice();
	 		   songHelp.splice(0);
			}
			  			//	console.log(songs);
						reDrawList();
},
stop: function( event, ui) {
	//reDrawList();
}

    });
    $( "#setList" ).disableSelection();
  } );
  
    $( function() {
    $( "#piSc, #piHr, #piIntro, #piOutro, #piBreak, #piAnnouncement" ).draggable({
      connectToSortable: "#setList",
      helper: "clone",
      revert: "invalid",
	 // 		stop: function( event, ui ) {alert($(this).attr("id"))},

	  });
    });		   
		   
		   
		   
var cList = $('ol#setList')

function reDrawList() {	
$('#newSongName').focus();

$( "#setList" ).sortable({
  disabled: true
});
	$('ol#setList li').remove();
$( "#setList" ).sortable({
  disabled: false
});		
		
var itemCounter = 0;
	
	$.each(songs, function(i) {
		
	if (songs[i] == "Line" || songs[i] =="Intro" || songs[i] =="Break" || songs[i] =="Outro" || songs[i] =="Soundcheck" || songs[i] =="Announcement") {
    var li = $('<li/>').addClass('ui-state-default slInfobar noselect').attr('role', 'menuitem').appendTo(cList);
	if (songs[i] == "Line")
	  var aaa = $('<span/>').addClass('ui-all horizontalRule noselect').text(songs[i]).appendTo(li);
	else 
	  var aaa = $('<span/>').addClass('ui-all slExtra noselect').text(songs[i]).appendTo(li);
	var del = $('<a/>').addClass('delSong').text('X').appendTo(li).attr('id','songID'+i).attr('onMouseDown','delSong("songID'+i+'");');
		}
	else {	
		itemCounter += 1;
    var li = $('<li/>').addClass('ui-state-default noselect').attr('role', 'menuitem').appendTo(cList);
		var itemCountLine = $('<div/>').addClass('itemCount noselect').text(itemCounter+". ").appendTo(li);

 var aaa = $('<span/>').addClass('ui-all noselect').text(songs[i]).appendTo(li);
	var del = $('<a/>').addClass('delSong noselect').text('X').appendTo(li).attr('id','songID'+i).attr('onMouseDown','delSong("songID'+i+'");');
}
});

console.log(songs+" --> \n"+localStorage.getItem('stageSetup')); 
  localStorage.setItem('stageSetup', JSON.stringify(songs));
  
}

function delSong(objThis) {
	   $('#'+objThis).closest('li').remove();
	   var idVar = objThis.replace(/^songID/, '');
	   songs.splice(idVar,1);
	   console.log(idVar+songs);
}
$("#addSong").mousedown(function (e) {
var newSong = $('#newSongName').val();
if (newSong != null && newSong != "" && newSong != " ") {
songs.push(newSong);
reDrawList();
$('#newSongName').val("").focus();
}
}); 
//reDrawList();

var highestID = 0;
var n = 0;
var itemCat = "";

function getHighestID() {
  highestID = highestID + 1;
  return highestID;
}

var itemArray = [];

function touchHandler(event) {
  var touch = event.changedTouches[0];

  var simulatedEvent = document.createEvent("MouseEvent");
  simulatedEvent.initMouseEvent({
      touchstart: "mousedown",
      touchmove: "mousemove",
      touchend: "mouseup"
    }[event.type], true, true, window, 1,
    touch.screenX, touch.screenY,
    touch.clientX, touch.clientY, false,
    false, false, false, 0, null);

  touch.target.dispatchEvent(simulatedEvent);
  event.preventDefault();
}

function init() {
  document.addEventListener("touchstart", touchHandler, true);
  document.addEventListener("touchmove", touchHandler, true);
  document.addEventListener("touchend", touchHandler, true);
  document.addEventListener("touchcancel", touchHandler, true);
}



console.log("FROM LOCAL STORAGE: "+localStorage.getItem('stageSetup'));
if (typeof loadedContent != 'undefined' && loaded && shared == false) {
  localStorage.clear();
  
 songs = JSON.parse(loadedContent);;
 console.log("Loaded: "+songs);
reDrawList();
} else {
  if (localStorage.getItem('stageSetup') != null && shared == false) {
console.log("FROM LOCAL STORAGE: "+localStorage.getItem('stageSetup'));
songs = JSON.parse(localStorage.getItem('stageSetup'));
reDrawList();

  } else if (shared == true) {
  }

}



// HOVER FORM
var dialog, form;


////////////////////////////////// NEW ////////////////////////




$('#resetAll').click(function () {
 $( "#dialog-confirm" ).dialog( "open" );
 $(".ui-dialog").css("border", "2px solid red");
});

$(function() {
	$("#dialog-confirm").dialog({
	  resizable: false,
	  height: "auto",
	  autoOpen: false,
	  width: 400,
	  position: { my: "center", at: "center", of: window },
	  modal: true,
	  buttons: {
		"Delete all items": function() {
		  $('#mainStage').empty();
		  songs = [];
		  localStorage.clear();
		  reDrawList();
  
		  $(this).dialog("close");
		},
		Cancel: function() {
		  $(this).dialog("close");
		}
	  },
	  open: function() {
		// Füge Klasse für den "Delete all items"-Button hinzu
		$(".ui-dialog-buttonpane button:contains('Delete all items')").addClass("delete-button");
	  }
	});
  });
  


$('#newSongName').keypress(function (e) {
  if (e.which == 13) {
    
var newSong = $('#newSongName').val();
if (newSong != null && newSong != "" && newSong != " ") {
songs.push(newSong);
reDrawList();
$('#newSongName').val("").focus();
}  }
});