$(function() {
		
		var name = $( "#callerName" ),
			number = $( "#callerNumber" ),
			response = "Response...",
			allFields = $( [] ).add( name ).add( number ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( n + " muss zwischen " +
					min + " und " + max + " Zeichen bestehen." );
				return false;
			} else {
				return true;
			}
		}

function initCall() {
			var fname     = $('#callerName').attr('value');  
    			var lname     = $('#callerNumber').attr('value');  
	$.ajax({  
		type: "GET",
		global: false,
		async: true,
		timeout: 30000,
		url: "/cgi-bin/CallMeBack.exe",
		data: "callerName="+ fname +"&callerNumber="+ lname,
		datatype: "html",
		contentType: "application/x-www-form-urlencoded",
		success: function(data, txtst, objectX)  {
					$( "#responseDIV" ).html( data );
					$( "#dialog-wait" ).dialog( "close" );
					$( "#dialog-response" ).dialog( "open" );
				},
				error: function(objectX, txtst, errorcode)  {
					$( "#responseDIV" ).html( errorcode );
					$( "#dialog-wait" ).dialog( "close" );
					$( "#dialog-response" ).dialog( "open" );
				}
			});
			$( "#dialog-form" ).dialog( "close" );
			$( "#dialog-wait" ).dialog( { dialogClass: 'no-close'} );
			$( "#dialog-wait" ).dialog( "open" );
}

		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			closeOnEscape: false,
			height: 220,
			width: 390,
			modal: true,
			buttons: {
				"Rückruf": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( name, "callerName", 5, 40 );
					bValid = bValid && checkLength( number, "callerNumber", 5, 20 );

					if ( bValid ) {
						initCall();
					}
				},
				Beenden: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
		
		$( "#dialog-wait" ).dialog({
			closeOnEscape: false,
			autoOpen: false,
			height: 220,
			width: 390,
			modal: true,
			open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
			close: function() { $(".ui-dialog-titlebar-close").show(); }
		});
		
		$( "#dialog-response" ).dialog({
			closeOnEscape: false,
			autoOpen: false,
			height: 220,
			width: 390,
			modal: true,
			buttons: {
				OK: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});

		$( "#call-back" )
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
			}
		);

		$( "#call-back-link" )
			.click(function() { $( "#dialog-form" ).dialog( "open" ); } )
			.hover(
				function() { $(this).css('cursor','pointer'); },
				function() { $(this).css('cursor','auto');}
			);
	});