$(document).ready(function(){init();});
$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           loadMoreBoxes();
        }
}); 

var elements = new Array("#intro", "#paper", "#data");
var active = 0;

var iVRandomFlash;
var cntRandomFlash = 0;
var isFinish = false;

var signsPerPage = 42;
var signsLoaded = 0;
var firstPageLoaded = false;
var loadMore = true;

var cntSigns = 0;

function createBoxes(results){
    var anzahlEintraege = results.length;
    var anzahlSpalten = 6;
    var anzahlZeilen = Math.floor(anzahlEintraege/anzahlSpalten);
    var testStr = "";

    for(var currCol=1; currCol<=anzahlSpalten; currCol++){
        var startBox = anzahlEintraege-currCol;
        var lastBox = startBox-anzahlSpalten*anzahlZeilen;
        if(lastBox < 0){
            lastBox = 0;
        }

        testStr += startBox+"("+currCol+"): ";
        for(var currBox=startBox; currBox>=lastBox; currBox=currBox-anzahlSpalten){
           var id = results[currBox].id;
           var message = results[currBox].message;
           var name = results[currBox].name;

           if(signsLoaded == 0 && currBox == anzahlEintraege-8){
               // Rote Box auf Pos. 8 verschieben
               $("#col"+currCol).append($("#active"));
               continue;
           }
           if(signsLoaded == 0 && currBox == anzahlEintraege-40){
               $("#col"+currCol).append($("#aboutus"));
               continue;
           }

           /*var imgTag =  $.create('img', {'src':'signs/sign_'+id+'.png'});
           var pTag = $.create('p', {});
           $(pTag).append("<b>"+message+"</b><br />"+name);
           var divTag = $.create('div', {'class':'box'}, [imgTag]);
           
           $("#col"+currCol).append(divTag);*/
           $("#col"+currCol).append('<div class="box"><a href="signs/sign_'+id+'.jpg" title="'+message+' von '+name+'"><img src="signs/sign_'+id+'.png" /></a></div>');
           testStr += currBox+"|"+id+" ";
        }
        testStr += "\n";
    }

    //console.log("Box Layout", testStr);
}

function initBoxes(){

	$(".box").hover(
		function(){
            // Boxen einfaden
			$(this).animate({
		       opacity: 1
		    }, 0 );
		},
		function(){
            $(this).animate({
                       opacity: 0.2
            }, 1500 );
            
            $(this).animate({
		       opacity: 1
		    }, 2000 );
            
			// Vergrößerung deaktivieren
			if($(this).hasClass("box_click")){
				$(this).removeClass("box_click");
                // Box im Hintergrund verschwinden lassen
				/*$(this).animate({
			       opacity: 0.2
			    }, 2000 );*/
			}
		}
	);
        
    $(".box a").lightBox();

    $("#active").click(
        function(){
            // Nur vergrößern, wenn noch nicht fertig
            if(!isFinish){
                $(this).addClass("box_active");
                $("#klickmich").hide();
                
                // Aktive Box vergr��ern
                $(elements[active]).show();
                //$(elements[active]).find("*").show();
                $(window).scrollTop(0);
            }else{
                // Falls schon fertig, nur normal vergrößern
                $(this).addClass("box_click");
            }
        }
	);

    $("#newsymbol").click(
        function(){
            $("#active").trigger('click');
        }
    );

    $("#active").hover(
        function() {
            if(!$(this).hasClass("box_active") && !isFinish){
                $("#klickmich").show();
            }
        },
        function() {
            if(!$(this).hasClass("box_active") && !isFinish){
                // Animiertes Herz wieder löschen
                $("#klickmich").hide();
            }else{
                if($(this).hasClass("box_click")){
                    $(this).removeClass("box_click");
                }
            }
        }
    );
        
    // Hover über about Box => Anzeige von Infos (Leitspruch)
    $("#aboutus").hover(
        function() {
            $(this).addClass("box_active");
        },
        function() {
            if($(this).hasClass("box_active")){
                    $(this).removeClass("box_active");
            }
        }
    );

    // Spalte 6 öffnet nach links, anderes left und right
}

function loadBoxes(){
    // AJAX Anfrage nach Daten: ID, Name, Botschaft
    $.ajax({
        type: "GET",
        url: "model.php",
        data: "action=getZeichen&from=0&to="+signsPerPage,
        success: function(jsonData){
            var results = eval('(' + jsonData + ')');
            //console.log("JSON Data", results);

            createBoxes(results);
            cntSigns = results[results.length-1].id;
            $("#counter").html("00"+cntSigns);
            initBoxes();
            //flashBoxes();
            signsLoaded = signsPerPage; // ersten x zeichen geladen
        }
    });
}

function loadMoreBoxes(){
    if(loadMore){
        $.ajax({
            type: "GET",
            url: "model.php",
            data: "action=getZeichen&from="+signsLoaded+"&to="+(signsLoaded+signsPerPage),
            success: function(jsonData){
                var results = eval('(' + jsonData + ')');
                //console.log("JSON Data", results);
                if(results.length == 0){
                    loadMore = false; // Laden abbrechen
                }else{
                    createBoxes(results);

                    initBoxes();
                    signsLoaded = signsLoaded+signsPerPage;
                }
            }
        });
    }
}

function checkData(){
    var path = $("#zeichnung").val();

    // Pfad muss mindestens 120 Zeichen lang sein
    if(path.length < 120){
        // Paper löschen
        clearPaper();
        $("#path-to-short").show();
        return false;
    }
    return true;
}

function sendData(){
    // Daten zum Server schicken
    var action = "newEntry"
    var message = $("#message").val();
    var name = $("#name").val();
    var email = $("#email").val();
    var path = $("#zeichnung").val();
    var mail_pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

    if(message.length == 0 || name.length == 0){
        $("#message-name-empty").show();
        return false;
    }
    
    if(message.length < 10){
        $("#message-to-short").show();
        return false;
    }
    
    if(name.length < 4){
        $("#name-to-short").show();
        return false;
    }
    
    if(email.length > 0 && !mail_pattern.test(email)){
        $("#email-wrong").show();
        return false;
    }

	var dataString = 'action='+ action +'&botschaft='+ message + '&name=' + name
                   + '&email=' + email + '&path=' + path;
    //console.log("sendData() : dataString", dataString);
    
    // Falls Image erfolgreich erstellt wurde, wird der String zurückgegeben
    var imgFile = $.ajax({
        type: "POST",  
        url: "controller.php",
        data: dataString,  
        async: false
    }).responseText;

    $("#zeichenErstellt").attr({src: imgFile});
    $("#botschaftErstellt").text(message);
    $("#nameErstellt").text(name);

    // Als Normale Box darstellen
    $("#active").css({backgroundColor: "#000000"}); // Hintergrund von rot auf schwarz setzen
    $("#finish").show();

    $("#active").removeClass("box_active");
    isFinish = true;

    // Boxen einfaden
    $(".box img").animate({
		       opacity: 1
	}, 3500 );

    cntSigns++;
    $("#counter").html("00"+cntSigns);

    return true;
}

function next(){
    var cont = true;
    switch(active){
            case 0: cont = loadPaper(); break; // Zeichenbereich laden
            case 1: cont = checkData(); break; // Pfad glätten; Formular überprüfen
            case 2: cont = sendData(); break; // Daten senden
    }

    if(cont){
        $(elements[active]).hide(); // altes Layer verstecken
        active++;
        // this[i].style is undefinied; Zugriff auf Element 3 => undefinied
        if(active<elements.length){
            $(elements[active]).show(); // neues Layer anzeigen
        }
    }
}

function closeBox(){
    $("#active").removeClass("box_active");
    $("#klickmich").show();
                
    $(elements[active]).hide()
}

function back(){
    $(".message").hide();
}

function flashBoxes(){
    iVRandomFlash = setInterval("randomFlash()", 20);
}

function randomFlash(){
	// Bilder nacheinander ausblenden
	var imgs = $(".box").get();

	// Zufallszahl zw. 0 und imgs.length generieren
	var randomId = Math.round(imgs.length*Math.random());

	// Aufflashen lassen
	flash(imgs[randomId]);
	
	if(cntRandomFlash > imgs.length){
		clearInterval(iVRandomFlash);
		$(".box img").show();
	}
	
	cntRandomFlash++;
}

function flash(layer){
		$(layer).animate({ 
			       opacity: 0.1
		}, 1000 );
		
		$(layer).find("img").show();
		
		$(layer).animate({ 
			       opacity: 1
		}, 2000 );
}

function init(){
    // Füge ein paar Zeichen per DOM hinzu
    loadBoxes();
    $("#news").lightBox();
}