<?php

    if( is_admin() ){
        // Insert the theme page menu item
        add_action('admin_menu', 'option_page_menu_insert');

        // Initiate theme options and page
        add_action('admin_init', 'register_theme_settings');
    }
    else{
        //play in a sandbox
    }

    function option_page_menu_insert() {
        /* Add a menu item inter the 'Appearance' menu
         * Function Definition:
         * add_options_page(unique text id,  displayed title, function to display, callback page)
         */
        add_theme_page( 'WSU Theme Options', 'WSU Theme Options', 'edit_theme_options', 'WSU_Theme_Options', 'theme_options_page');
    }

    function register_theme_settings() {
        // Create the main setting group: 'wsuy-theme-options'
        register_setting('wsuy_theme_options', 'wsuy-theme-options');

        /* Add a settings group sub-section: 'wsuy-theme-options-section'
         * Function Definition:
         * add_settings_section(unique text id,  displayed title, function to display, callback page)
         */
        add_settings_section('wsuy_theme_options_section', 'WSU Theme (Yoko): Options', 'section_description', __FILE__);

        /* Define theme options fields:
        * Function Definition:
        * add_settings_field(unique  id,    displayed title,        display,        callback page,   section id)
        */
        add_settings_field('wsuy_logo',     'Website logo',         'field_logo',   __FILE__, 'wsuy_theme_options_section');
        add_settings_field('wsuy_color',    'Website header color', 'field_color',  __FILE__, 'wsuy_theme_options_section');

    }

    function field_logo(){
        $options = get_option('wsuy_theme_options');
        echo "<input id='wsuy_logo' name='wsuy_theme_options[wsuy_logo]' disabled='disabled' size='40' type='text' value='{$options['wsuy_logo']}' style='display:none'/><br>";
        $path = str_replace("style.css", "logos/", get_stylesheet_uri());
        echo "<ul id='logo'>";
            echo '<li id="l1">  <img class="logo" src="' . $path . 'ce.PNG" width="100px;"/>                </li>';
            echo '<li id="l2">  <img class="logo" src="' . $path . 'cepm.png" width="100px;"/>              </li>';
            echo '<li id="l3">  <img class="logo" src="' . $path . 'west.PNG" width="100px;"/>              </li>';
            echo '<li id="l4">  <img class="logo" src="' . $path . 'concurrent.PNG" width="100px;"/>        </li>';
            echo '<li id="l5">  <img class="logo" src="' . $path . 'conferences.PNG" width="100px;"/>       </li>';
            echo '<li id="l6">  <img class="logo" src="' . $path . 'early-credit.PNG" width="100px;"/>      </li>';
            echo '<li id="l7">  <img class="logo" src="' . $path . 'hybrid.PNG" width="100px;"/>            </li>';
            echo '<li id="l8">  <img class="logo" src="' . $path . 'kaysville.PNG" width="100px;"/>         </li>';
            echo '<li id="l9">  <img class="logo" src="' . $path . 'lifelong-learning.PNG" width="100px;"/> </li>';
            echo '<li id="l10"> <img class="logo" src="' . $path . 'morgan.PNG" width="100px;"/>            </li>';
            echo '<li id="l11"> <img class="logo" src="' . $path . 'police.PNG" width="100px;"/>            </li>';
            echo '<li id="l12"> <img class="logo" src="' . $path . 'prof-dev.PNG" width="100px;"/>          </li>';
            echo '<li id="l13"> <img class="logo" src="' . $path . 'study-abroad.PNG" width="100px;"/>      </li>';
            echo '<div style="clear:both"></div>';
        echo "</ul>";
    }

    function field_color(){
        $options = get_option('wsuy_theme_options');
        echo "<input id='wsuy_color' name='wsuy_theme_options[wsuy_color]' size='40' type='color' data-hex='true' value='{$options['wsuy_color']}' />";
    }

    function section_description() {}

    function validate($input){
        // Do nothing
        return $input;
    }

    function theme_options_page() {
        //Check the users permission level
        if (!current_user_can('manage_options'))  {
            wp_die( __('You do not have sufficient permissions to access this page.') );
        }

        //Generate the html for the options page:
        ?>
        <style type="text/css">
            #logo{
                list-style:none;
                display:block;
                background:#eaeaea;
            }
            #logo li{
                display:inline;
                float:left;
                margin:10px;
                width:120px;
                height:30px;
                border:1px solid #d5d5d5;
                background:#fff;
                padding:10px;
                cursor:pointer;
                border-radius:5px;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                text-align:center;
            }
            #logo li:hover{
                border:1px solid #aeaeae;
            }
            .selected{
                background:#fffce0 !important;
                border:1px solid #aeaeae !important;
            }
        </style>
        <div class="wrap">
            <h1>WSU Theme Options</h1>
            <form method="post" action="options.php">
                <?php settings_fields('wsuy_theme_options_section'); ?>
                <?php do_settings_sections(__FILE__); ?>
                <div class="clear"><br /></div>
                <input style="margin-left:800px;" name="Submit" type="submit" value="<?php esc_attr_e('Save Changes'); ?>" class="button-primary"/>
            </form>
        </div>
        <!-- ColorPicker Javascript -->
        <script type="text/javascript" src="http://meta100.github.com/mColorPicker/javascripts/mColorPicker_min.js" charset="UTF-8"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $("#logo li").click(function() {
                    file = $(this).find("img").attr("src");
                    $("#wsuy_logo").val(file);
                    $("#logo li").removeClass("selected");
                    $(this).addClass("selected");
                });
            });
        </script>
    <?php }
?>