$(function() {
    
    $("#kjsPhoto").click(function(){
        $("#kjsPhoto").toggleClass( "full", "cropped", 1000 );
    });

	$("a[href='#connectButtons']").click(function() {
		$("html, body").animate({ scrollTop: 0 }, "slow").find("#connectButtons").effect("highlight", {}, 3000);
	  return false;
	});
    
	// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
	$( "#dialog:ui-dialog" ).dialog( "destroy" );

	var name = $( "#name" ),
		phone = $( "#phone" ),
		allFields = $( [] ).add( name ).add( phone ),
		tips = $( ".validateTips" );

	function updateTips( t ) {
		tips
			.text( t )
			.addClass( "ui-state-highlight" );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + " characters." );
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}

	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 250,
		width: 300,
		modal: true,
		buttons: {
			"Call Me": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );

				bValid = bValid && checkLength( name, "name", 2, 100 );

				bValid = bValid && checkRegexp( name, /^([a-zA-Z ])+$/i, "Name may only consist of letters and spaces" );
				bValid = bValid && checkRegexp( phone, /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/, "Phone number invalid" );

				if ( bValid ) {
				    tips.removeClass( "ui-state-highlight" );
        			tips.text("");
					phone.val(phone.val().replace(/[^\d.]/g, ""));
					$.ajax({
                       type: "POST",
                       url: "call.php",
                       data: "method=call&number=" + phone.val() + "&name=" + name.val(),
                       success: function(msg){
                         if(msg !== "ok=true"){
                             $('#callStatus').text("There was an error establishing with the call!");
                         }
                         else {
                             $('#callStatus').html('Connecting the call... <a href="#" id="cancelCallLink">Cancel Call</a>');
                             $('#cancelCallLink').click(function() {
                                $.ajax({
                                    type: "POST",
                                    url: "call.php",
                                    data: "method=cancel&number=" + phone.val() + "&name=" + name.val(),
                                    success: function(cancelMsg){
                                        $( "#dialog-form" ).dialog( "close" );
                                    }
                                });
                                return false;
                             });
                         }
                       }
                     });
					//$( this ).dialog( "close" );
				}
			},
			"Close": function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
		    $('#callStatus').text("");
			allFields.val( "" ).removeClass( "ui-state-error" );
			tips.removeClass( "ui-state-highlight" );
			tips.text("");
		}
	});

	$( "#callLink" )
		.click(function() {
			$( "#dialog-form" ).dialog( "open" );
			return false;
		});
});