function afg_admin_html_page()
{
    global $afg_photo_size_map, $afg_on_off_map, $afg_descr_map, $afg_columns_map, $afg_bg_color_map, $afg_width_map, $pf, $afg_sort_order_map, $afg_slideshow_map;
    function upgrade_handler()
    {
        $galleries = get_option('afg_galleries');
        if ($galleries) {
            foreach ($galleries as &$gallery) {
                if (!isset($gallery['slideshow_option']) && $gallery['slideshow_option'] == 'highslide') {
                    $gallery['slideshow_option'] = 'swipebox';
                }
            }
            update_option('afg_galleries', $galleries);
        }
        unset($gallery);
        $afg_cache_refresh_interval = get_option('afg_cache_refresh_interval');
        if (!isset($afg_cache_refresh_interval)) {
            update_option('afg_cache_refresh_interval', '1d');
        }
    }
    upgrade_handler();
    if ($_POST) {
        global $pf, $custom_size_err_msg;
        if (isset($_POST['submit']) && $_POST['submit'] == 'Delete Cached Galleries') {
            delete_afg_caches();
            echo "<div class='updated'><p><strong>Cached data deleted successfully.</strong></p></div>";
        } else {
            if (isset($_POST['submit']) && $_POST['submit'] == 'Save Changes') {
                update_option('afg_api_key', $_POST['afg_api_key']);
                if (!$_POST['afg_api_secret'] || $_POST['afg_api_secret'] != get_option('afg_api_secret')) {
                    update_option('afg_flickr_token', '');
                }
                update_option('afg_api_secret', $_POST['afg_api_secret']);
                update_option('afg_user_id', $_POST['afg_user_id']);
                if (ctype_digit($_POST['afg_per_page']) && (int) $_POST['afg_per_page']) {
                    update_option('afg_per_page', $_POST['afg_per_page']);
                } else {
                    update_option('afg_per_page', 10);
                    echo "<div class='updated'><p><strong>You entered invalid value for Per Page option.  It has been set to 10.</strong></p></div>";
                }
                update_option('afg_sort_order', $_POST['afg_sort_order']);
                update_option('afg_photo_size', $_POST['afg_photo_size']);
                if (get_option('afg_photo_size') == 'custom') {
                    if (ctype_digit($_POST['afg_custom_size']) && (int) $_POST['afg_custom_size'] >= 50 && (int) $_POST['afg_custom_size'] <= 500) {
                        update_option('afg_custom_size', $_POST['afg_custom_size']);
                        if (!is_dir(dirname(__FILE__) . "/cache")) {
                            if (!wp_mkdir_p(dirname(__FILE__) . "/cache")) {
                                echo "<div class='updated'><p>Could not create directory - '" . dirname(__FILE__) . "/cache'. This is required for custom size photos to be displayed. Manually create this directory and set permissions for this directory as 777.</p></div>";
                            }
                        }
                    } else {
                        update_option('afg_custom_size', 100);
                        echo "<div class='updated'><p><strong>You entered invalid value for Custom Width option.  It has been set to 100.</strong></p></div>";
                    }
                    update_option('afg_custom_size_square', $_POST['afg_custom_size_square'] ? $_POST['afg_custom_size_square'] : 'false');
                }
                update_option('afg_captions', $_POST['afg_captions']);
                update_option('afg_descr', $_POST['afg_descr']);
                update_option('afg_columns', $_POST['afg_columns']);
                update_option('afg_slideshow_option', $_POST['afg_slideshow_option']);
                update_option('afg_width', $_POST['afg_width']);
                update_option('afg_bg_color', $_POST['afg_bg_color']);
                if (isset($_POST['afg_credit_note']) && $_POST['afg_credit_note']) {
                    update_option('afg_credit_note', 'on');
                } else {
                    update_option('afg_credit_note', 'off');
                }
                if (isset($_POST['afg_pagination']) && $_POST['afg_pagination']) {
                    update_option('afg_pagination', 'off');
                } else {
                    update_option('afg_pagination', 'on');
                }
                echo "<div class='updated'><p><strong>Settings updated successfully.</br></br><font style='color:red'>Important Note:</font> If you have installed a caching plugin (like WP Super Cache or W3 Total Cache etc.), you may have to delete your cached pages for the settings to take effect.</strong></p></div>";
                if (get_option('afg_api_secret') && !get_option('afg_flickr_token')) {
                    echo "<div class='updated'><p><strong>Click \"Grant Access\" button to authorize Awesome Flickr Gallery to access your private photos from Flickr.</strong></p></div>";
                }
            }
        }
        create_afgFlickr_obj();
    }
    $url = $_SERVER['REQUEST_URI'];
    ?>

    <form method='post' action='<?php 
    echo $url;
    ?>
'>
   <div id='afg-wrap'>
        <h2><a href='http://www.ronakg.com/projects/awesome-flickr-gallery-wordpress-plugin/'><img src="<?php 
    echo BASE_URL . '/images/logo_big.png';
    ?>
" align='center'/></a>Awesome Flickr Gallery Settings</h2>

        <?php 
    echo afg_generate_version_line();
    ?>
            <div id="afg-main-box">
                        <h3>Flickr User Settings</h3>
                            <table class='widefat afg-settings-box'>
                                <tr>
                                    <th class="afg-label"></th>
                                    <th class="afg-input"></th>
                                    <th class="afg-help-bubble"></th>
                                </tr>
                                <tr>
                                  <td>Flickr User ID</td>
                                  <td><input class='afg-input' type='text' name='afg_user_id' value="<?php 
    echo get_option('afg_user_id');
    ?>
" /><b>*</b></td>
                                  <td><div class="afg-help">Don't know your Flickr User ID?  Get it from <a href="http://idgettr.com/" target='blank'>here.</a></div></td>
                               </tr>
                                <tr>
                                  <td>Flickr API Key</td>
                                  <td><input class='afg-input' type='text' name='afg_api_key' value="<?php 
    echo get_option('afg_api_key');
    ?>
" ><b>*</b></input> </td>
                                  <td> <div class='afg-help'>Don't have a Flickr API Key?  Get it from <a href="http://www.flickr.com/services/api/keys/" target='blank'>here.</a> Go through the <a href='http://www.flickr.com/services/api/tos/'>Flickr API Terms of Service.</a></div></td>
                                   </tr>
                                    <tr>
                                        <td>Flickr API Secret</td>
                               <td><input class='afg-input' type='text' name='afg_api_secret' id='afg_api_secret' value="<?php 
    echo get_option('afg_api_secret');
    ?>
"/>
                                <br /><br />
    <?php 
    if (get_option('afg_api_secret')) {
        if (get_option('afg_flickr_token')) {
            echo "<input type='button' class='button-secondary' value='Access Granted' disabled=''";
        } else {
            ?>
        <input type="button" class="button-primary" value="Grant Access" onClick="document.location.href='<?php 
            echo get_admin_url() . 'admin-ajax.php?action=afg_gallery_auth';
            ?>
';"/>
                            <?php 
        }
    } else {
        echo "<input type='button' class='button-secondary' value='Grant Access' disabled=''";
    }
    ?>
                               </td>
                               <td class="afg-help"><b>ONLY</b> If you want to include your <b>Private Photos</b> in your galleries, enter your Flickr API Secret here and click Save Changes.
                            </td>
                        </tr>
        </table>
                        <table class='widefat afg-settings-box'>
                        <h3>Gallery Settings</h3>
                           <tr>
                               <th class="afg-label"></th>
                               <th class="afg-input"></th>
                               <th class="afg-help-bubble"></th>
                            </tr>
                            <tr>
                              <td>Max Photos Per Page</td>
                              <td><input type='text' name='afg_per_page' id='afg_per_page' onblur='verifyPerPageBlank()' maxlength='3' value="<?php 
    echo get_option('afg_per_page') ? get_option('afg_per_page') : 10;
    ?>
" /><b>*</b></td>
                           </tr>

                            <tr>
                              <td>Sort order of Photos</td>
                              <td><select name='afg_sort_order' id='afg_sort_order'>
                                    <?php 
    echo afg_generate_options($afg_sort_order_map, get_option('afg_sort_order', 'flickr'));
    ?>
                              </select>
                              <td class="afg-help">Set the sort order of the photos as per your liking and forget about how photos are arranged on Flickr.</td>
                              </td>
                           </tr>

                           <tr>
                              <td>Size of the Photos</td>
                              <td><select name='afg_photo_size' id='afg_photo_size' onchange='customPhotoSize()'>
                                    <?php 
    echo afg_generate_options($afg_photo_size_map, get_option('afg_photo_size', '_m'));
    ?>
                              </select></td>
                           </tr>

                           <tr valign='top' id='afg_custom_size_block' style='display:none'>
                             <td>Custom Width</td>
                             <td><input type='text' size='3' maxlength='3' name='afg_custom_size' id='afg_custom_size' onblur='verifyCustomSizeBlank()' value="<?php 
    echo get_option('afg_custom_size') ? get_option('afg_custom_size') : 100;
    ?>
">* (in px)
                             &nbsp;Square? <input type='checkbox' name='afg_custom_size_square' value='true' <?php 
    if (get_option('afg_custom_size_square') == 'true') {
        echo "checked=''";
    }
    ?>
>
                             </td>
                             <td class="afg-help">Fill in the exact width for the photos (min 50, max 500).  Height of the photos will be adjusted
                                                accordingly to maintain aspect ratio of the photo. Enable <b>Square</b> to crop
                                                the photo to a square aspect ratio.<br />Warning: Custom photo sizes may not work with your webhost, please use built-in sizes, it's more reliable and faster too.</td>
                           </tr>

                           <tr>
                              <td>Photo Titles</td>
                              <td><select name='afg_captions'>
                                    <?php 
    echo afg_generate_options($afg_on_off_map, get_option('afg_captions', 'on'));
    ?>
                              </select></td>
                              <td class="afg-help">Photo Title setting applies only to Thumbnail (and above) size photos.</td>
                           </tr>

                           <tr>
                              <td>Photo Descriptions</td>
                              <td><select name='afg_descr'>
                                    <?php 
    echo afg_generate_options($afg_descr_map, get_option('afg_descr', 'off'));
    ?>
                              </select></td>
                              <td class="afg-help">Photo Description setting applies only to Small and Medium size photos.</td>
                              </tr>

                              <tr>
                                 <td>Number of Columns</td>
                                 <td><select name='afg_columns'>
                                       <?php 
    echo afg_generate_options($afg_columns_map, get_option('afg_columns', '2'));
    ?>
                                 </select></td>
                              </tr>

                              <tr>
                                 <td>Slideshow Behavior</td>
                                 <td><select name='afg_slideshow_option'>
                                       <?php 
    echo afg_generate_options($afg_slideshow_map, get_option('afg_slideshow_option', 'swipebox'));
    ?>
                                 </select></td>
                              </tr>


                              <tr>
                                 <td>Background Color</td>
                                 <td><select name='afg_bg_color'>
                                       <?php 
    echo afg_generate_options($afg_bg_color_map, get_option('afg_bg_color', 'Transparent'));
    ?>
                                 </select></td>
                              </tr>

                              <tr>
                                 <td>Gallery Width</td>
                                 <td><select name='afg_width'>
                                       <?php 
    echo afg_generate_options($afg_width_map, get_option('afg_width', 'auto'));
    ?>
                                 </select></td>
                                 <td class="afg-help">Width of the Gallery is relative to the width of the page where Gallery is being generated.  <i>Automatic</i> is 100% of page width.</td>
                              </tr>

                              <tr>
                                 <td>Disable Pagination?</td>
                                 <td><input type='checkbox' name='afg_pagination' value='off'
<?php 
    if (get_option('afg_pagination', 'off') == 'off') {
        echo 'checked=\'\'';
    }
    ?>
/></td>
                                 <td class="afg-help">Useful when displaying gallery in a sidebar widget where you want only few recent photos.</td>
                                 </tr>

                                 <tr>
                                    <td>Add a Small Credit Note?</td>
                                    <td><input type='checkbox' name='afg_credit_note' value='Yes'
<?php 
    if (get_option('afg_credit_note', 'on') == 'on') {
        echo "checked=''";
    }
    ?>
/></td>
                                    <td class="afg-help">Credit Note will appear at the bottom of the gallery as -
                                       Powered by
                                       <a href="http://www.ronakg.com/projects/awesome-flickr-gallery-wordpress-plugin" title="Awesome Flickr Gallery by Ronak Gandhi"/>
                                          AFG</a></td>
                                 </tr>
                              </table>
                        <br />
                        <input type="submit" name="submit" id="afg_save_changes" class="button-primary" value="Save Changes" />
                        <br /><br />
                              <h3>Your Photostream Preview</h3>
                              <table class='widefat afg-settings-box'>
                                 <tr><th>If your Flickr Settings are correct, 5 of your recent photos from your Flickr photostream should appear here.</th></tr>
                                 <td><div style="margin-top:15px">
<?php 
    global $pf;
    if (get_option('afg_flickr_token')) {
        $rsp_obj = $pf->people_getPhotos(get_option('afg_user_id'), array('per_page' => 5, 'page' => 1));
    } else {
        $rsp_obj = $pf->people_getPublicPhotos(get_option('afg_user_id'), NULL, NULL, 5, 1);
    }
    if (!$rsp_obj) {
        echo afg_error();
    } else {
        foreach ($rsp_obj['photos']['photo'] as $photo) {
            $photo_url = "http://farm{$photo['farm']}.static.flickr.com/{$photo['server']}/{$photo['id']}_{$photo['secret']}_s.jpg";
            echo "<img src=\"{$photo_url}\"/>&nbsp;&nbsp;&nbsp;";
        }
    }
    ?>
</div>
                                    <br /> <span style="margin-top:15px">
                                    Note:  This preview is based on the Flickr Settings only.  Gallery Settings
                                    have no effect on this preview.  You will need to insert gallery code to a post
                                    or page to actually see the Gallery.</span>
                                 </td>
                           </table>
                            <br />
                           <input type="submit" name="submit" class="button-secondary" value="Delete Cached Galleries"/>
</div>
<?php 
    if (DEBUG) {
        print_all_options();
    }
    ?>
<div id="afg-side-box">
<?php 
    $message = "<b>What are Default Settings?</b> - Default Settings serve as a\n        template for the galleries.  When you create a new gallery, you can assign\n        <i>Use Default</i> to a setting.  Such a setting will reference the <b>Default\n        Settings</b> instead of a specific setting defined for that particular\n        gallery. <br /> <br />\n        When you change any of <b>Default Settings</b>, all the settings in a gallery\n        referencing the <b>Default Settings</b> will inherit the new value.<br /><br />\n        <font color='red'><b>Important Note about Private Photos:</b></font><br/>To access\n        your private photos from Flickr, make sure that your App's authentication\n        type is set to <b>Web Application</b> and the <b>Callback URL</b>\n        points to <font color='blue'><i>" . get_admin_url() . "</i></font>\n        ";
    echo afg_box('Help', $message);
    $message = "Just insert the code <strong><font color='steelblue'>[AFG_gallery]</font></strong> in any of your posts or pages to display the Awesome Flickr Gallery.\n        <br /><p style='text-align:center'><i>-- OR --</i></p>You can create a new Awesome Flickr Gallery with different settings on page <a href='{$_SERVER['PHP_SELF']}?page=afg_add_gallery_page'>Add Galleries.";
    echo afg_box('Usage Instructions', $message);
    echo afg_donate_box();
    echo afg_share_box();
    ?>
</div>
</div>
            </form>
<?php 
}
function afg_generate_gallery_settings_table()
{
    global $afg_photo_size_map, $afg_on_off_map, $afg_descr_map, $afg_columns_map, $afg_bg_color_map, $afg_photo_source_map, $afg_width_map, $afg_yes_no_map, $afg_sort_order_map, $afg_slideshow_map;
    if (get_option('afg_photo_size') == 'custom') {
        $photo_size = '(Custom - ' . get_option('afg_custom_size') . 'px' . (get_option('afg_custom_size_square') == 'true' ? ' - Square)' : ')');
    } else {
        $photo_size = $afg_photo_size_map[get_option('afg_photo_size')];
    }
    return "\n        <h3>Gallery Settings</h3>\n        <table class='widefat fixed afg-settings-box'>\n            <tr>\n                <th class='afg-label'></th>\n                <th class='afg-input'></th>\n                <th class='afg-help-bubble'></th>\n            </tr>\n        <tr>\n        <td>Max Photos Per Page</td>\n        <td><div  style='display:inline; margin-right:10px'><input type='checkbox' name='afg_per_page_check' id='afg_per_page_check' onclick='showHidePerPage()' value='default' checked=''> Default </input></div><div  class='afg-small-input' style='display:inline-block'><input name='afg_per_page' disabled='true' id='afg_per_page' type='text' maxlength='3' onblur='verifyBlank()' value='10'/></div>\n        </td>\n        </tr>\n\n        <tr>\n        <td>Sort order of Photos</td>\n        <td><select name='afg_sort_order' id='afg_sort_order'>" . afg_generate_options($afg_sort_order_map, 'default', True, $afg_sort_order_map[get_option('afg_sort_order')]) . "\n    </select></td>\n            <td class='afg-help'>Set the sort order of the photos as per your liking and forget about how photos are arranged on Flickr.</td>\n            </tr>\n\n        <tr>\n        <td>Size of Photos</td>\n        <td><select name='afg_photo_size' id='afg_photo_size' onchange='customPhotoSize()'>\n            " . afg_generate_options($afg_photo_size_map, 'default', True, $photo_size) . "\n        </select></td>\n        </tr>\n\n        <tr id='afg_custom_size_block' style='display:none'>\n        <td>Custom Width</td>\n        <td><input type='text' maxlength='3' name='afg_custom_size' id='afg_custom_size' onblur='verifyCustomSizeBlank()' value='100'>* (in px)\n        &nbsp;Square? <input type='checkbox' id='afg_custom_size_square' name='afg_custom_size_square' value='true'>\n        </td>\n        <td class='afg-help'>Fill in the exact width for the photos (min 50, max 500).  Height of the photos will be adjusted\n        accordingly to maintain aspect ratio of the photo. Enable <b>Square</b> to crop\n        the photo to a square aspect ratio.<br />Warning: Custom photo sizes may not work with your webhost, please use built-in sizes, it's more reliable and faster too.</td>\n        </tr>\n\n        <tr>\n        <td>Photo Titles</td>\n        <td><select name='afg_captions' id='afg_captions'>\n            " . afg_generate_options($afg_on_off_map, 'default', True, $afg_on_off_map[get_option('afg_captions')]) . "\n        </select></td>\n        <td class='afg-help'>Photo Title setting applies only to Thumbnail (and above) size photos.</td>\n        </tr>\n\n        <tr>\n        <td>Photo Descriptions</td>\n        <td><select name='afg_descr' id='afg_descr'>\n            " . afg_generate_options($afg_descr_map, 'default', True, $afg_descr_map[get_option('afg_descr')]) . "\n        </select></td>\n        <td class='afg-help'>Photo Description setting applies only to Small and Medium size photos.</td>\n        </tr>\n\n        <tr>\n        <td>Number of Columns</td>\n        <td><select name='afg_columns' id='afg_columns'>\n            " . afg_generate_options($afg_columns_map, 'default', True, $afg_columns_map[get_option('afg_columns')]) . "\n        </select></td>\n        </tr>\n\n        <tr>\n        <td>Slideshow Behavior</td>\n        <td><select name='afg_slideshow_option' id='afg_slideshow_option'>\n        " . afg_generate_options($afg_slideshow_map, 'default', True, $afg_slideshow_map[get_option('afg_slideshow_option')]) . "\n    </select></td>\n            <td class='afg-help'><b>HighSlide is NOT FREE for Commercial websites</b>.  If you are using\n            <i>Awesome Flickr Gallery</i> on a commercial website, you need to purchase a license from their website\n            <a href='http://highslide.com/#licence' target='_blank'>here</a>.  If you want a free slideshow,\n            use ColorBox instead.</td>\n            </tr>\n\n        <tr>\n        <td>Background Color</td>\n        <td><select name='afg_bg_color' id='afg_bg_color'>\n            " . afg_generate_options($afg_bg_color_map, 'default', True, $afg_bg_color_map[get_option('afg_bg_color')]) . "\n        </select></td>\n        </tr>\n\n        <tr>\n        <td>Gallery Width</td>\n        <td><select name='afg_width' id='afg_width'>\n        " . afg_generate_options($afg_width_map, 'default', True, $afg_width_map[get_option('afg_width')]) . "\n        </select></td>\n        <td class='afg-help'>Width of the Gallery is relative to the width of the page where Gallery is being generated.  <i>Automatic</i> is 100% of page width.</td>\n        </tr>\n\n        <tr>\n        <td>Disable Pagination?</td>\n        <td><select name='afg_pagination' id='afg_pagination'>\n        " . afg_generate_options($afg_yes_no_map, 'default', True, $afg_yes_no_map[get_option('afg_pagination')]) . "\n        </select></td>\n        <td class='afg-help'>Useful when displaying gallery in a sidebar widget where you want only few recent photos.</td>\n        </tr>\n\n        <tr>\n        <td>Add a Small Credit Note?</td>\n        <td><select name='afg_credit_note' id='afg_credit_note'>\n             " . afg_generate_options($afg_on_off_map, 'default', True, $afg_on_off_map[get_option('afg_credit_note')]) . "\n             </select></td>\n        <td class='afg-help'>Credit Note will appear at the bottom of the gallery as - </font>\n            Powered by\n            <a href=\"http://www.ronakg.com/projects/awesome-flickr-gallery-wordpress-plugin\"/>\n            AFG</a></td>\n        </tr>\n    </table>";
}
function afg_advanced_settings_page()
{
    $url = $_SERVER['REQUEST_URI'];
    ?>

   <h2><a href='http://www.ronakg.com/projects/awesome-flickr-gallery-wordpress-plugin/'><img src="<?php 
    echo BASE_URL . '/images/logo_big.png';
    ?>
" align='center'/></a>Advanced Settings | Awesome Flickr Gallery</h2>

<?php 
    if (isset($_POST['afg_advanced_save_changes']) && $_POST['afg_advanced_save_changes']) {
        update_option('afg_disable_slideshow', isset($_POST['afg_disable_slideshow']) ? $_POST['afg_disable_slideshow'] : '');
        update_option('afg_custom_css', $_POST['afg_custom_css']);
        update_option('afg_cache_refresh_interval', $_POST['afg-cache-refresh-interval']);
        echo "<div class='updated'><p><strong>Settings updated successfully.</strong></p></div>";
    }
    ?>
         
<form method='post' action='<?php 
    echo $url;
    ?>
'>
   <div id='afg-wrap'>
<?php 
    global $afg_cache_refresh_interval_map;
    echo afg_generate_version_line();
    ?>
        <div id="afg-main-box">
		<h3>Advanced Settings</h3>
		<table class='widefat afg-settings-box'>
			<tr>
				<th class="afg-label"></th>
				<th class="afg-input"></th>
				<th class="afg-help-bubble"></th>
			</tr>
			<tr>
				<td>Cache Refresh Interval</td>
				<td><select name='afg-cache-refresh-interval' id='afg-cache-refresh-interval'> <?php 
    echo afg_generate_options($afg_cache_refresh_interval_map, get_option('afg_cache_refresh_interval', '1d'));
    ?>
</select></td>
                              <td> <div class="afg-help">How frequently should cached galleries update? Select a value that relates to your photos upload frequency on Flickr. Default is set to 1 day.</div></td>
			</tr>
		</table>
                     <h3>Custom CSS</h3>
                        <div style="background-color:#FFFFE0; border-color:#E6DB55; maargin:5px 0 15px; border-radius:3px 3px 3px 3px; border-width: 1px; border-style: solid; padding: 8px 10px; line-height: 20px">
                Check <a href='<?php 
    echo BASE_URL . '/afg.css';
    ?>
' target='_blank'>afg.css</a> to see existing classes and properties for gallery which you can redefine here. Note that there is no validation applied to CSS Code entered here, so make sure that you enter valid CSS.
                    </div><br/>
                    <textarea id='afg_custom_css' name='afg_custom_css'><?php 
    echo get_option('afg_custom_css');
    ?>
</textarea>
       <script type="text/javascript">var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('afg_custom_css'), {
       lineNumbers: true, indentUnit: 4, theme: "cobalt", matchBrackets: true} );</script>
            <input style='margin-top:15px' type="submit" name="afg_advanced_save_changes" id="afg_advanced_save_changes" class="button-primary" value="Save Changes" />
        </div>
         <div id="afg-side-box">
<?php 
    $message = "Settings on this page are global and hence apply to all your Galleries.";
    echo afg_box('Help', $message);
    echo afg_donate_box();
    echo afg_share_box();
    ?>
            </div>
      </div>
         </form>
    <?php 
}