$(document).ready(function() {

	// Show steps
    $("#javasteps").css({'display':'block'});
    
	// Show calender
    $("#calender").css({'display':'block'});
    
	// Show datelist
    $("#datecontainerjava").css({'display':'block'});
    
	// Show javapictures
    $("#picturesjava").css({'display':'block'});
    
    
    // Step 1
    $("#stepone .steps").click(function (){
    	var link = $(this).attr("id");
    	var title = $('[name=title]').val();
    	var name = $('[name=name]').val(); 
    	var email = $('[name=email]').val(); 
    	var description = $('[name=description]').val();
    	var theme = $("input[@name='theme']:checked").val();
   
   		if(title != "" && name != ""){
    		$.post("step1", { title: title , name: name, email: email, description: description, theme: theme });
    		document.location.href = link;
    	} else {
    		alert("Please fill out the necessary info.");
    	}
 		
    });
    
    $("#stepone #next").click(function (){
    	var title = $('[name=title]').val(); 
    	var name = $('[name=name]').val(); 
    	var email = $('[name=email]').val(); 
    	var description = $('[name=description]').val();
    	var theme = $("input[@name='theme']:checked").val();
    	
   		if(title != "" && name != ""){
    		$.post("step1", { title: title , name: name, email: email, description: description, theme: theme  });
    		document.location.href = 'step2';
    	} else {
    		alert("Please fill out the necessary info.");
    	}
    	   
    });
    
    
    
    
    // Step 2
    
    // navigeren door de kalender
    $(".innercolum .btn").livequery('click', function (){
    	var vars = $(this).attr("title");
    	$.ajax({
  			type: "GET",
  			cache: false,
   			url: "ajax.php",
   			data: vars,
   			success: function(msg){
 				$('#calender').html(msg);
   			}
 		});
    });
    
    // dag toevoegen
    $(".day").livequery('click', function (){
    	var date = $(this).attr("id");
    	$.ajax({
  			type: "GET",
  			cache: false,
   			url: "ajax.php",
   			data: date,
   			success: function(msg){
 				$('#datecontainerjava').html(msg);
   			}
 		});
 		$(this).removeClass("day");
 		$(this).addClass("selected");
    });
    
    // dag verwijderen
    $(".delete").livequery('click', function (){
    	var date = $(this).attr("title");
    	var calender = $("#titlebar").attr("title");
    	$.ajax({
  			type: "GET",
  			cache: false,
   			url: "ajax.php",
   			data: "deleteDate="+date+"&"+calender,
   			success: function(msg){
 				$('#calender').html(msg);
   			}
 		});
 		
    	$.ajax({
    		type: "GET",
    		cache: false,
    		url: "ajax.php?rand="+parseInt(Math.random()*999999999),
    		data: "formHour=",
    		success: 
    				function(msg){
    				$('#datecontainerjava').html(msg);
    			}
    	});
    });
    
    // formulier tonen om een uur te voegen
    $(".add").livequery('click', function (){
    	var where = $(this).attr("title");
    	$.ajax({
  			type: "GET",
  			cache: false,
   			url: "ajax.php",
   			data: where,
   			success: function(msg){
 				$('#datecontainerjava').html(msg);
   			}
 		});
    });
    
    // formulier formulier om een uur te voegen verbergen
    $(".close").livequery('click', function (){
    	$.ajax({
  			type: "GET",
  			cache: false,
   			url: "ajax.php",
   			data: "formHour=",
   			success: function(msg){
 				$('#datecontainerjava').html(msg);
   			}
 		});
    });
    
    // een uur toevoegen
    $(".submitetime").livequery('click', function(){
    	var fromhours =  $('[name=fromhours]').val();
    	var fromminutes =  $('[name=fromminutes]').val();
    	var tillhours =  $('[name=tillhours]').val();
    	var tillminutes =  $('[name=tillminutes]').val();
    	var date =  $('[name=date]').val();
    	var formHour =  $('form').attr("title");
    	
    	$.post("post.php", { fromhours:fromhours,  fromminutes:fromminutes,  tillhours:tillhours,  tillminutes:tillminutes, date:date},
    		function (data){
    			refresh();
    		});
    	
    	function refresh(){
    		$.ajax({type: "GET",cache: false,url: "ajax.php?rand="+parseInt(Math.random()*999999999) ,data: "formHour=",success: function(msg){$('#datecontainerjava').html(msg);}});
    	}
    	
    	
    });
    
    // een uur verwijderen
    $(".smalldelete").livequery('click', function(){
    	var hour = $(this).attr("title")+"&rand="+parseInt(Math.random()*999999999);
    	
    	$.ajax({
    		type: "GET",
    		cache: false,
    		url: "step2", 
    		data: hour, 
    		success: function(msg){
    			refresh(); 
    		}
    	});
    	
    	
    	function refresh(){
    		$.ajax({
    			type: "GET",
    			cache: false,
    			url: "ajax.php?rand="+parseInt(Math.random()*999999999) ,
    			data: "formHour=",
    			success: function(msg){
    				$('#datecontainerjava').html(msg);
    			}
    		});
    	}
    	
    });
    
    // check
    $("#steptwo .steps").click(function (){
    	var link = $(this).attr("id");
   		var htmlStr = $("#datecontainerjava").html();
   
   		if(htmlStr != ""){
    		document.location.href = link + '.php';
    	} else {
    		alert("Please select some dates.");
    	}
 		
    });
    
    $("#steptwo #next").click(function (){
   		var htmlStr = $("#datecontainerjava").html();
   
   		if(htmlStr != ""){
    		document.location.href = 'step3';
    	} else {
    		alert("Please select some dates.");
    	}
    	   
    });
    
    
    
    
    
    // Step 3
    $("#getpictures").livequery('click', function(){
    	var fname =  $('[name=fname]').val();
    	if(fname == ""){
    		alert("Please fill in a Flickr username.");
    	} else {
    		$.ajax({
  				type: "GET",
  				cache: false,
   				url: "ajax_image.php",
   				data: "fname="+fname,
   				success: function(msg){
 					$('#picturesjava').html(msg);
   				}
 			});
 		}
    });
    $("#reseting").livequery('click', function(){
    	$.ajax({
  			type: "GET",
  			cache: false,
   			url: "ajax_image.php",
   			data: "action=reset",
   			success: function(msg){
 				$('#picturesjava').html(msg);
   			}
 		});
    });
    $("#change").livequery('click', function(){
    	$.ajax({
  			type: "GET",
  			cache: false,
   			url: "ajax_image.php",
   			data: "action=change",
   			success: function(msg){
 				$('#picturesjava').html(msg);
 				$(".spacing").css({'display':'block'});
				$("#picturerow").css({'width':'660px'});
 				$("#stepthree").removeClass('stepsbalklarge');
 				$("#stepthree").addClass('stepsbalk');
   			}
 		});
    });
    $(".pc_img").livequery('click', function(){
    	var image = $(this).attr("title");
    	$.ajax({
  			type: "GET",
  			cache: false,
   			url: "ajax_image.php",
   			data: "picture="+image,
   			success: function(msg){
 				$('#picturesjava').html(msg);
				$('#jcrop_target').Jcrop({
					onChange: showPreview,
					onSelect: showPreview,
					setSelect: [ 200, 200, 0, 0 ],
					aspectRatio: 1
				});
 				$(".spacing").css({'display':'none'});
				$("#picturerow").css({'width':'890px'});
 				$("#stepthree").removeClass('stepsbalk');
 				$("#stepthree").addClass('stepsbalklarge');
   			}
 		});
    });
    $(function(){
		$('#jcrop_target').Jcrop({
			onChange: showPreview,
			onSelect: showPreview,
			setSelect: [ 200, 200, 0, 0 ],
			aspectRatio: 1
		})
	});
	function showPreview(coords) {
		var rx = 225 / coords.w;
		var ry = 225 / coords.h;
		var imgwidth = $('#jcrop_target').attr("title");
		var imgheight = $('#jcrop_target').attr("alt");
		
		$('#preview').attr("den_x",coords.x );
		$('#preview').attr("den_y",coords.y );
		$('#preview').attr("den_w",coords.w );
		$('#preview').attr("den_h",coords.h );
		$('#preview').css({
			width: Math.round(rx * imgwidth) + 'px',
			height: Math.round(ry * imgheight) + 'px',
			marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			marginTop: '-' + Math.round(ry * coords.y) + 'px'
		});
	};
	
	
    $("#stepthree .steps").click(function (){
    	var link = $(this).attr("id");
    	var x = $('#preview').attr("den_x");
    	var y = $('#preview').attr("den_y");
		var width = $('#preview').attr("den_w");
	    var height = $('#preview').attr("den_h");
    	if($('#jcrop_target').attr("name") == "flickr" ){
    		$.ajax({
  				type: "GET",
  				cache: false,
   				url: "ajax_image.php",
   				data: "width="+width+"&height="+height+"&x="+x+"&y="+y,
   				success: function(msg){
    				document.location.href = link + '.php';
   				}
 			});
    	} else{
    		alert("Please select an image.");
    	}
    	
    });
    
    $("#stepthree #next").click(function (){
		var width = $('#preview').attr("den_w");
	    var height = $('#preview').attr("den_h");
    	var x = $('#preview').attr("den_x");
    	var y = $('#preview').attr("den_y");
    	
    	if($('#jcrop_target').attr("name") == "flickr" ){
    		$.ajax({
  				type: "GET",
  				cache: false,
   				url: "ajax_image.php",
   				data: "width="+width+"&height="+height+"&x="+x+"&y="+y,
   				success: function(msg){
    				document.location.href = 'step4';
   				}
 			});
    	} else{
    		alert("Please select an image.");
    	}
    });


    
    
    
    
    
    // Step 4
    $("#stepfour .steps").click(function (){
    	var link = $(this).attr("id");
    	var rule = $('[name=rule]').val();
   
   		if(rule.length >= 4){
    		$.post("post.php", { rule:rule});
    		document.location.href = link + '.php';
    	} else {
    		alert("Please fill out the necessary info.");
    	}
 		
    });
    
    $("#stepfour #next").click(function (){
    	var rule = $('[name=rule]').val();
   
   		if(rule.length <= 222){
    		$.post("post.php", {rule:rule});
    		document.location.href = 'step5';
    	} else {
    		alert("The text on the back of the card may only contain 6 lines and a maximum of 222 characters.");
    	}
    	   
    });
	    function getLines(id)
	    {
	      return $('.' + id).val().split("\n").length;
	    }

	  $('.txtrule').keyup(function() 
	  {
	    var allowedNumberOfLines = 6;
		var value = $(this).val();
		for (var x = 1; x <= 5; x++) {
    		value = value.replace(/\n/, "<br/>");
    	}
	    if(getLines('txtrule') > allowedNumberOfLines)
	    {
	      modifiedText = $(this).val().split("\n").slice(0, allowedNumberOfLines);
	      $(this).val(modifiedText.join("\n"));
	    }
		$comment = $(this).val();
		$comment = $comment.replace(/\n/g, "<br />");
		$comment = $comment.replace(/\n\n+/g, '</p>');
		$("#rule").html($comment);
	  });
	
	
   /* $(".txtrule").keyup(function(){
    	var value = $(this).val();
    	var target = "#rule";
    	for (var x = 1; x <= 5; x++) {
    		value = value.replace(/\n/, "<br/>");
    	}
    	$(target).html(value);
    });*/
    
});