Theme Options Doesn't Save Properly

I’ve put together a Theme Options page using a couple different tutorials (https://vimeo.com/14470991 & https://www.ilovecolors.com.ar/how-to-add-a-color-picker-to-your-wordpress-plugin-or-theme/) that allows my users to upload a logo and change the site’s colors with a color picker.

It works, but not right away. The logo must be uploaded twice before it’ll show up and you can’t use the color picker until after you’ve typed some value in the color fields and saved.

<?php

$options = get_option('marathon');

// This file adds a "Theme Options" page under "Appearance" and allows the user to upload a logo and set colors.
add_action('admin_menu', 'create_theme_options_page');
add_action('admin_init', 'register_and_build_fields');

function create_theme_options_page() {
$page = add_theme_page('Theme Options', 'Theme Options', 'administrator', __FILE__, 'build_options_page');
add_action('admin_print_styles-' . $page, 'admin_scripts' );
}

function admin_scripts() {
wp_enqueue_style( 'farbtastic' );
wp_enqueue_script( 'farbtastic' );
wp_enqueue_script( 'marathon', get_template_directory_uri() . '/assets/theme-options.js', array( 'farbtastic', 'jquery' ) );
}

function build_options_page() {

?>
<div id="theme-options-wrap" class="wrap">
<div class="icon32" id="icon-themes">
</div>
<h2>Theme Options</h2>
<p> </p>

<?php if( isset($_GET['settings-updated']) ) {?>
<div id="message" class="updated fade">
<p><?php _e('Settings saved. Visit your site to see the changes.') ?></p>
</div>
<?php } ?>

<form method="post" action="options.php" enctype="multipart/form-data">

<?php wp_nonce_field( 'update-options' ); ?>
<?php settings_fields('marathon'); ?>
<?php do_settings_sections(__FILE__); ?>

<p class="submit"><input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" /></p>
</form>
</div><!-- theme options wrap -->
<?php
}

function register_and_build_fields(){
register_setting('marathon', 'marathon', 'validate_setting');
add_settings_section('main_section', ' ', 'section_cb', __FILE__);
add_settings_field('logo','Logo Upload','logo_setting',__FILE__,'main_section');
add_settings_field('ore_nav_links','Menu Links','navlinks_color',__FILE__,'main_section');
}

// logo
function logo_setting(){
$options = get_option('marathon');
echo "<img src='{$options['logo']}'; style='max-height: 100px; background: #454545;' />
";
echo "<input type='file' name='logo' />";
echo "<p>Your logo should be no larger than 950px wide and 125px high.</p>";
}

function navlinks_color(){
$options = get_option('marathon');
?>
<div class="colorpicker" style="position: relative;">
<input type="text" name="marathon[ore_nav_links]" value="<?php echo esc_attr( $options['ore_nav_links'] ); ?>" style="background: <?php echo esc_attr( $options['ore_nav_links'] ); ?>" id="ore_nav_links" />
Select a Color
<div style='z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;'></div>
</div>
<?php
}

function section_cb() {}

function validate_setting($marathon) {
$keys = array_keys($_FILES);
$i = 0;

foreach( $_FILES as $image ) {
// if a file was uploaded
if ( $image['size'] ) {
// is it an image?
if ( preg_match('/(jpg|jpeg|png|gif)$/i', $image['type']) ) {
$override = array('test_form' => false);
$file = wp_handle_upload($image, $override);
$marathon[$keys[$i]] = $file['url'];
}
else {
wp_die('No image was uploaded');
}
}
else {
$options = get_option('marathon');
$marathon[$keys[$i]] = $options[$keys[$i]];
}
$i++;
}

return $marathon;
}

Any suggestions to fix it?