function us_option_page()
{
    if (!current_user_can('administrator')) {
        wp_die(__('You do not have sufficient permissions to access this page.'));
    }
    $options = get_option('usersnap_options');
    $tabs = array();
    if (isset($options['api-key']) && strlen($options['api-key']) > 0) {
        $tabs = array('configure' => 'Configure');
        $currenttab = "configure";
        if (isset($_GET['tab']) && $_GET['tab'] == "newusersnap") {
            $_GET['tab'] = $currenttab;
        }
    } else {
        $tabs = array('newusersnap' => 'Setup Usersnap', 'configure' => 'Configure');
        $currenttab = "newusersnap";
    }
    ?>
	<div class="wrap">

	<?php 
    if (isset($_GET['tab'])) {
        $currenttab = $_GET['tab'];
    }
    us_option_tab_menu($currenttab, $tabs);
    ?>
	
	<?php 
    if ($options["error"] == true) {
        ?>
<p style="color: #FF0000;"><strong><?php 
        echo $options["message"];
        ?>
</strong></p><?php 
    }
    ?>
	<form method="post" action="options.php" id="us-settings-form">
	<?php 
    settings_fields('usersnap_options');
    ?>
	<?php 
    switch ($currenttab) {
        case 'newusersnap':
            ?>
			<h3>Already have a Usersnap account?</h3>
			<p>Click the configure tab above.</p>
			<?php 
            do_settings_sections('usersnap_pg_new');
            ?>
			<table class="form-table">
				<tr>
					<td>
		               By clicking "Create Usersnap account" you agree to the <a href="https://usersnap.com/terms-of-service">Terms of Service</a> and <a href="https://usersnap.com/privacy-policy">Privacy Policy</a>.
		            </td>
				</tr>
			</table>
			<p class="submit">
				<input type="hidden" name="us_setup" value="true"/>
				<input type="submit" id="us-btn-setup" name="us_btn_setup" class="button-primary" value="<?php 
            _e('Create Usersnap account');
            ?>
" />
			</p>
			<script type="text/javascript">
			jQuery('#us-settings-form').submit(function(form) {
				if ((jQuery('#us-user-pwd').val()==='') || (jQuery('#us-user-pwd').val() !== jQuery('#us-user-pwd2').val())) {
					alert('<?php 
            _e('Your passwords are empty or not equal!');
            ?>
');
					return false;
				}
				jQuery('#us-btn-setup').attr("disabled", true).val("<?php 
            _e('Please wait...');
            ?>
");
			});
			</script>
			<?php 
            break;
        case 'configure':
            do_settings_sections('usersnap');
            us_create_visibility_form();
            ?>
			<p class="submit">
				<input type="submit" id="us-btn-save" name="us_btn_save" class="button-primary" value="<?php 
            _e('Save Changes');
            ?>
" />
				<input type="button" class="button" id="us-reset-settings" value="<?php 
            _e('Reset Settings');
            ?>
" />
			</p>
			<script type="text/javascript">
			jQuery(function() {
				jQuery('#us-settings-form').submit(function() {
					if (jQuery('#us-api-key').val()!=='') {
						var s = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
						if (!s.test(jQuery('#us-api-key').val())) {
							jQuery('#us-api-key').focus();
							alert('<?php 
            _e('Your API key is not valid, please check again!');
            ?>
');
							return false;
						}
					}
				});

				jQuery('#us-reset-settings').click(function() {
					jQuery('#us-api-key').val('');
					jQuery('#us-visible-for-all').attr('checked',true);
					jQuery('#us-visible-roles').hide();
					jQuery('#us-btn-save').click();
				});
			});
			</script>
			<?php 
            break;
    }
    ?>
	</form>
	</div>
	<?php 
}
function us_option_page()
{
    if (!current_user_can('administrator')) {
        wp_die(__('You do not have sufficient permissions to access this page.'));
    }
    $options = get_option('usersnap_options');
    $tabs = array();
    if (isset($options['api-key']) && strlen($options['api-key']) > 0) {
        $tabs = array('configure' => 'Configure');
        $currenttab = "configure";
        if (isset($_GET['tab']) && $_GET['tab'] == "newusersnap") {
            $_GET['tab'] = $currenttab;
        }
    } else {
        $tabs = array('newusersnap' => 'Setup Usersnap', 'configure' => 'Configure');
        $currenttab = "newusersnap";
    }
    ?>
	<div class="wrap">
	
	<h2 class="us-headline"><?php 
    _e('Settings');
    ?>
 › Usersnap</h2>
	
	<?php 
    if (isset($_GET['tab'])) {
        $currenttab = $_GET['tab'];
    }
    if (count($tabs) > 1) {
        us_option_tab_menu($currenttab, $tabs);
    }
    ?>
	
	<?php 
    if ($options["error"] == true) {
        ?>
<div class="error below-h2"><p><?php 
        echo $options["message"];
        ?>
</p></p></div><?php 
    }
    ?>
	<form method="post" action="options.php" id="us-settings-form">
	<?php 
    settings_fields('usersnap_options');
    ?>
	<?php 
    switch ($currenttab) {
        case 'newusersnap':
            ?>
			<h3>Already have a Usersnap account?</h3>
			<p>Click the configure tab above.</p>
			<?php 
            do_settings_sections('usersnap_pg_new');
            ?>

			<p class="submit">
				<input type="hidden" name="us_setup" value="true"/>
				<input type="submit" id="us-btn-setup" name="us_btn_setup" class="button-primary" style="margin-bottom:.5em" value="<?php 
            _e('Create Usersnap account');
            ?>
" /><br>
				<i>By clicking "Create Usersnap account" you agree to the <a href="https://usersnap.com/terms-of-service">Terms of Service</a> and <a href="https://usersnap.com/privacy-policy">Privacy Policy</a>.</i>
			</p>
			<script type="text/javascript">
			jQuery('#us-settings-form').submit(function(form) {
				if ((jQuery('#us-user-name').val()==='')) {
					jQuery('.wrap h2:last').after('<div class="error below-h2" style="margin-top:1em"><p><?php 
            _e('Please specify a name!');
            ?>
</p></div>');
					jQuery('#us-user-name').focus();
					return false;
				}
				var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
				if ((jQuery('#us-user-email').val()==='') || !re.test(jQuery('#us-user-email').val())) {
					jQuery('.wrap h2:last').after('<div class="error below-h2" style="margin-top:1em"><p><?php 
            _e('Please enter a valid email address!');
            ?>
</p></div>');
					jQuery('#us-user-email').focus();
					return false;
				}
				if ((jQuery('#us-user-pwd').val()==='') || (jQuery('#us-user-pwd').val() !== jQuery('#us-user-pwd2').val())) {
					jQuery('.wrap h2:last').after('<div class="error below-h2" style="margin-top:1em"><p><?php 
            _e('Your passwords are empty or not equal!');
            ?>
</p></div>');
					jQuery('#us-user-pwd').focus();
					return false;
				}
				jQuery('#us-btn-setup').attr("disabled", true).val("<?php 
            _e('Please wait...');
            ?>
");
			});
			
			
			jQuery.post( ajaxurl, {
              pointer: '<?php 
            echo $pointer;
            ?>
',
              action: 'dismiss-wp-pointer'
           	} );
			</script>
			<?php 
            break;
        case 'configure':
            do_settings_sections('usersnap');
            us_create_visibility_form();
            ?>
			<p class="submit">
				<input type="submit" id="us-btn-save" name="us_btn_save" class="button-primary" value="<?php 
            _e('Save Changes');
            ?>
" />
				<input type="button" class="button" id="us-reset-settings" value="<?php 
            _e('Reset Settings');
            ?>
" />
			</p>
			<script type="text/javascript">
			jQuery(function() {
				jQuery('#us-settings-form').submit(function() {
					if (jQuery('#us-api-key').val()!=='') {
						var s = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
						if (!s.test(jQuery('#us-api-key').val())) {
							jQuery('#us-api-key').focus();
							jQuery('.wrap h2:last').after('<div class="error below-h2" style="margin-top:1em"><p><?php 
            _e('Your API key is not valid, please check again!');
            ?>
</p></div>');
							return false;
						}
					}
				});

				jQuery('#us-reset-settings').click(function() {
					jQuery('#us-api-key').val('');
					jQuery('#us-visible-for-all').attr('checked',true);
					jQuery('#us-visible-roles').hide();
					jQuery('#us-btn-save').click();
				});
			});
			
			jQuery.post( ajaxurl, {
                  pointer: '<?php 
            echo $pointer;
            ?>
',
                  action: 'dismiss-wp-pointer'
            } );
			
			</script>
			<?php 
            break;
    }
    ?>
	</form>
	</div>
	<?php 
}