/**
     * Builds out the options panel.
     *
     * If we were using the Settings API as it was intended we would use
     * do_settings_sections here.  But as we don't want the settings wrapped in a table,
     * we'll call our own custom optionsrara_fields.  See options-interface.php
     * for specifics on how each individual field is generated.
     *
     * Nonces are provided using the settings_fields()
     *
     * @since 1.7.0
     */
    function options_page()
    {
        ?>

		<div id="optionsrara-wrap" class="wrap">

		<?php 
        $menu = $this->menu_settings();
        ?>

		<div class="them_option_block clearfix">
		<div class="theme_option_title">
		<h2>

		<?php 
        $my_theme = wp_get_theme();
        ?>

            <?php 
        _e('Theme Options by', 'rara-clean');
        ?>
 <!-- <a href=" <?php 
        echo $my_theme->get('AuthorURI');
        ?>
 ">  <?php 
        echo $my_theme->get('TextDomain');
        ?>
 </a>  -->  </h2>
		</div>
		<div class="theme_option_link"><a href="<?php 
        echo $my_theme->get('AuthorURI');
        ?>
" title="Rara Theme" target="_blank"><img src="<?php 
        echo get_template_directory_uri();
        ?>
/option-panel/images/logo.png" height="32px"></a> </div>
		</div>


		<div class="donate-info">

				<a href="<?php 
        echo $my_theme->get('ThemeURI');
        ?>
" target="_blank" class="demo">
                    <?php 
        _e('View Demo', 'rara-clean');
        ?>
				</a>

				<div id="social-share">
					
		        </div>

        </div>
	    <h2 class="nav-tab-wrapper">
	        <?php 
        echo Options_rara_Interface::optionsrara_tabs();
        ?>
	    </h2>

	    <?php 
        settings_errors('options-rara');
        ?>

	    <div id="optionsrara-metabox" class="metabox-holder">
		    <div id="optionsrara" class="postbox">
				<form action="options.php" method="post">
				<?php 
        settings_fields('optionsrara');
        ?>
				<?php 
        Options_rara_Interface::optionsrara_fields();
        /* Settings */
        ?>
				<div id="optionsrara-submit">
					<input type="submit" class="button-primary" name="update" value="<?php 
        esc_attr_e('Save All Changes', 'rara-clean');
        ?>
" />
					<input type="submit" class="reset-button button-secondary" name="reset" value="<?php 
        esc_attr_e('Restore Defaults', 'rara-clean');
        ?>
" onclick="return confirm( '<?php 
        print esc_js(__('Click OK to reset. Any theme settings will be lost!', 'rara-clean'));
        ?>
' );" />
					<div class="clear"></div>
				</div>
				</form>
			</div> <!-- / #container -->
		</div>
		<?php 
        do_action('optionsrara_after');
        ?>
		</div> <!-- / .wrap -->

	<?php 
    }
 /**
  * Generates the options fields that are used in the form.
  */
 static function optionsrara_fields()
 {
     global $allowedtags;
     $options_rara = new Options_rara();
     $option_name = $options_rara->get_option_name();
     $settings = get_option($option_name);
     $options =& Options_rara::_optionsrara_options();
     $counter = 0;
     $menu = '';
     foreach ($options as $value) {
         $val = '';
         $select_value = '';
         $output = '';
         // Wrap all options
         if ($value['type'] != "heading" && $value['type'] != "info") {
             // Keep all ids lowercase with no spaces
             $value['id'] = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($value['id']));
             $id = 'section-' . $value['id'];
             $class = 'section';
             if (isset($value['type'])) {
                 $class .= ' section-' . $value['type'];
             }
             if (isset($value['class'])) {
                 $class .= ' ' . $value['class'];
             }
             $output .= '<div id="' . esc_attr($id) . '" class="' . esc_attr($class) . '">' . "\n";
             if (isset($value['name'])) {
                 $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n";
             }
             if ($value['type'] != 'editor') {
                 $output .= '<div class="option">' . "\n" . '<div class="controls">' . "\n";
             } else {
                 $output .= '<div class="option">' . "\n" . '<div>' . "\n";
             }
         }
         // Set default value to $val
         if (isset($value['std'])) {
             $val = $value['std'];
         }
         // If the option is already saved, override $val
         if ($value['type'] != 'heading' && $value['type'] != 'info') {
             if (isset($settings[$value['id']])) {
                 $val = $settings[$value['id']];
                 // Striping slashes of non-array options
                 if (!is_array($val)) {
                     $val = stripslashes($val);
                 }
             }
         }
         // If there is a description save it for labels
         $explain_value = '';
         if (isset($value['desc'])) {
             $explain_value = $value['desc'];
         }
         // Set the placeholder if one exists
         $placeholder = '';
         if (isset($value['placeholder'])) {
             $placeholder = ' placeholder="' . esc_attr($value['placeholder']) . '"';
         }
         if (has_filter('optionsrara_' . $value['type'])) {
             $output .= apply_filters('optionsrara_' . $value['type'], $option_name, $value, $val);
         }
         switch ($value['type']) {
             // Basic text input
             case 'text':
                 $output .= '<input id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" type="text" value="' . esc_attr($val) . '"' . $placeholder . ' />';
                 break;
                 // Password input
             // Password input
             case 'password':
                 $output .= '<input id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" type="password" value="' . esc_attr($val) . '" />';
                 break;
                 // Textarea
             // Textarea
             case 'textarea':
                 $rows = '8';
                 if (isset($value['settings']['rows'])) {
                     $custom_rows = $value['settings']['rows'];
                     if (is_numeric($custom_rows)) {
                         $rows = $custom_rows;
                     }
                 }
                 $val = stripslashes($val);
                 $output .= '<textarea id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" rows="' . $rows . '"' . $placeholder . '>' . esc_textarea($val) . '</textarea>';
                 break;
                 // Select Box
             // Select Box
             case 'select':
                 $output .= '<select class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '">';
                 foreach ($value['options'] as $key => $option) {
                     $output .= '<option' . selected($val, $key, false) . ' value="' . esc_attr($key) . '">' . esc_html($option) . '</option>';
                 }
                 $output .= '</select>';
                 break;
                 // Radio Box
             // Radio Box
             case "radio":
                 $name = $option_name . '[' . $value['id'] . ']';
                 foreach ($value['options'] as $key => $option) {
                     $id = $option_name . '-' . $value['id'] . '-' . $key;
                     $output .= '<input class="of-input of-radio" type="radio" name="' . esc_attr($name) . '" id="' . esc_attr($id) . '" value="' . esc_attr($key) . '" ' . checked($val, $key, false) . ' /><label for="' . esc_attr($id) . '">' . esc_html($option) . '</label>';
                 }
                 break;
                 // Image Selectors
             // Image Selectors
             case "images":
                 $name = $option_name . '[' . $value['id'] . ']';
                 foreach ($value['options'] as $key => $option) {
                     $selected = '';
                     if ($val != '' && $val == $key) {
                         $selected = ' of-radio-img-selected';
                     }
                     $output .= '<input type="radio" id="' . esc_attr($value['id'] . '_' . $key) . '" class="of-radio-img-radio" value="' . esc_attr($key) . '" name="' . esc_attr($name) . '" ' . checked($val, $key, false) . ' />';
                     $output .= '<div class="of-radio-img-label">' . esc_html($key) . '</div>';
                     $output .= '<img src="' . esc_url($option) . '" alt="' . $option . '" class="of-radio-img-img' . $selected . '" onclick="document.getElementById(\'' . esc_attr($value['id'] . '_' . $key) . '\').checked=true;" />';
                 }
                 break;
                 // Checkbox
             // Checkbox
             case "checkbox":
                 $output .= '<input id="' . esc_attr($value['id']) . '" class="checkbox of-input" type="checkbox" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" ' . checked($val, 1, false) . ' />';
                 $output .= '<label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label>';
                 break;
                 // Multicheck
             // Multicheck
             case "multicheck":
                 foreach ($value['options'] as $key => $option) {
                     $checked = '';
                     $label = $option;
                     $option = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($key));
                     $id = $option_name . '-' . $value['id'] . '-' . $option;
                     $name = $option_name . '[' . $value['id'] . '][' . $option . ']';
                     if (isset($val[$option])) {
                         $checked = checked($val[$option], 1, false);
                     }
                     $output .= '<input id="' . esc_attr($id) . '" class="checkbox of-input" type="checkbox" name="' . esc_attr($name) . '" ' . $checked . ' /><label for="' . esc_attr($id) . '">' . esc_html($label) . '</label>';
                 }
                 break;
                 // Color picker
             // Color picker
             case "color":
                 $default_color = '';
                 if (isset($value['std'])) {
                     if ($val != $value['std']) {
                         $default_color = ' data-default-color="' . $value['std'] . '" ';
                     }
                 }
                 $output .= '<input name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '" class="of-color"  type="text" value="' . esc_attr($val) . '"' . $default_color . ' />';
                 break;
                 // Uploader
             // Uploader
             case "upload":
                 $output .= Options_rara_Media_Uploader::optionsrara_uploader($value['id'], $val, null);
                 break;
                 // Typography
             // Typography
             case 'typography':
                 unset($font_size, $font_style, $font_face, $font_color);
                 $typography_defaults = array('size' => '', 'face' => '', 'style' => '', 'color' => '');
                 $typography_stored = wp_parse_args($val, $typography_defaults);
                 $typography_options = array('sizes' => of_recognized_font_sizes(), 'faces' => of_recognized_font_faces(), 'styles' => of_recognized_font_styles(), 'color' => true);
                 if (isset($value['options'])) {
                     $typography_options = wp_parse_args($value['options'], $typography_options);
                 }
                 // Font Size
                 if ($typography_options['sizes']) {
                     $font_size = '<select class="of-typography of-typography-size" name="' . esc_attr($option_name . '[' . $value['id'] . '][size]') . '" id="' . esc_attr($value['id'] . '_size') . '">';
                     $sizes = $typography_options['sizes'];
                     foreach ($sizes as $i) {
                         $size = $i . 'px';
                         $font_size .= '<option value="' . esc_attr($size) . '" ' . selected($typography_stored['size'], $size, false) . '>' . esc_html($size) . '</option>';
                     }
                     $font_size .= '</select>';
                 }
                 // Font Face
                 if ($typography_options['faces']) {
                     $font_face = '<select class="of-typography of-typography-face" name="' . esc_attr($option_name . '[' . $value['id'] . '][face]') . '" id="' . esc_attr($value['id'] . '_face') . '">';
                     $faces = $typography_options['faces'];
                     foreach ($faces as $key => $face) {
                         $font_face .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['face'], $key, false) . '>' . esc_html($face) . '</option>';
                     }
                     $font_face .= '</select>';
                 }
                 // Font Styles
                 if ($typography_options['styles']) {
                     $font_style = '<select class="of-typography of-typography-style" name="' . $option_name . '[' . $value['id'] . '][style]" id="' . $value['id'] . '_style">';
                     $styles = $typography_options['styles'];
                     foreach ($styles as $key => $style) {
                         $font_style .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['style'], $key, false) . '>' . $style . '</option>';
                     }
                     $font_style .= '</select>';
                 }
                 // Font Color
                 if ($typography_options['color']) {
                     $default_color = '';
                     if (isset($value['std']['color'])) {
                         if ($val != $value['std']['color']) {
                             $default_color = ' data-default-color="' . $value['std']['color'] . '" ';
                         }
                     }
                     $font_color = '<input name="' . esc_attr($option_name . '[' . $value['id'] . '][color]') . '" id="' . esc_attr($value['id'] . '_color') . '" class="of-color of-typography-color  type="text" value="' . esc_attr($typography_stored['color']) . '"' . $default_color . ' />';
                 }
                 // Allow modification/injection of typography fields
                 $typography_fields = compact('font_size', 'font_face', 'font_style', 'font_color');
                 $typography_fields = apply_filters('of_typography_fields', $typography_fields, $typography_stored, $option_name, $value);
                 $output .= implode('', $typography_fields);
                 break;
                 // Background
             // Background
             case 'background':
                 $background = $val;
                 // Background Color
                 $default_color = '';
                 if (isset($value['std']['color'])) {
                     if ($val != $value['std']['color']) {
                         $default_color = ' data-default-color="' . $value['std']['color'] . '" ';
                     }
                 }
                 $output .= '<input name="' . esc_attr($option_name . '[' . $value['id'] . '][color]') . '" id="' . esc_attr($value['id'] . '_color') . '" class="of-color of-background-color"  type="text" value="' . esc_attr($background['color']) . '"' . $default_color . ' />';
                 // Background Image
                 if (!isset($background['image'])) {
                     $background['image'] = '';
                 }
                 $output .= Options_rara_Media_Uploader::optionsrara_uploader($value['id'], $background['image'], null, esc_attr($option_name . '[' . $value['id'] . '][image]'));
                 $class = 'of-background-properties';
                 if ('' == $background['image']) {
                     $class .= ' hide';
                 }
                 $output .= '<div class="' . esc_attr($class) . '">';
                 // Background Repeat
                 $output .= '<select class="of-background of-background-repeat" name="' . esc_attr($option_name . '[' . $value['id'] . '][repeat]') . '" id="' . esc_attr($value['id'] . '_repeat') . '">';
                 $repeats = of_recognized_background_repeat();
                 foreach ($repeats as $key => $repeat) {
                     $output .= '<option value="' . esc_attr($key) . '" ' . selected($background['repeat'], $key, false) . '>' . esc_html($repeat) . '</option>';
                 }
                 $output .= '</select>';
                 // Background Position
                 $output .= '<select class="of-background of-background-position" name="' . esc_attr($option_name . '[' . $value['id'] . '][position]') . '" id="' . esc_attr($value['id'] . '_position') . '">';
                 $positions = of_recognized_background_position();
                 foreach ($positions as $key => $position) {
                     $output .= '<option value="' . esc_attr($key) . '" ' . selected($background['position'], $key, false) . '>' . esc_html($position) . '</option>';
                 }
                 $output .= '</select>';
                 // Background Attachment
                 $output .= '<select class="of-background of-background-attachment" name="' . esc_attr($option_name . '[' . $value['id'] . '][attachment]') . '" id="' . esc_attr($value['id'] . '_attachment') . '">';
                 $attachments = of_recognized_background_attachment();
                 foreach ($attachments as $key => $attachment) {
                     $output .= '<option value="' . esc_attr($key) . '" ' . selected($background['attachment'], $key, false) . '>' . esc_html($attachment) . '</option>';
                 }
                 $output .= '</select>';
                 $output .= '</div>';
                 break;
                 // Editor
             // Editor
             case 'editor':
                 $output .= '<div class="explain">' . wp_kses($explain_value, $allowedtags) . '</div>' . "\n";
                 echo $output;
                 $textarea_name = esc_attr($option_name . '[' . $value['id'] . ']');
                 $default_editor_settings = array('textarea_name' => $textarea_name, 'media_buttons' => false, 'tinymce' => array('plugins' => 'wordpress'));
                 $editor_settings = array();
                 if (isset($value['settings'])) {
                     $editor_settings = $value['settings'];
                 }
                 $editor_settings = array_merge($default_editor_settings, $editor_settings);
                 wp_editor($val, $value['id'], $editor_settings);
                 $output = '';
                 break;
                 // Info
             // Info
             case "info":
                 $id = '';
                 $class = 'section';
                 if (isset($value['id'])) {
                     $id = 'id="' . esc_attr($value['id']) . '" ';
                 }
                 if (isset($value['type'])) {
                     $class .= ' section-' . $value['type'];
                 }
                 if (isset($value['class'])) {
                     $class .= ' ' . $value['class'];
                 }
                 $output .= '<div ' . $id . 'class="' . esc_attr($class) . '">' . "\n";
                 if (isset($value['name'])) {
                     $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n";
                 }
                 if (isset($value['desc'])) {
                     $output .= $value['desc'] . "\n";
                 }
                 $output .= '</div>' . "\n";
                 break;
                 // Heading for Navigation
             // Heading for Navigation
             case "heading":
                 $counter++;
                 if ($counter >= 2) {
                     $output .= '</div>' . "\n";
                 }
                 $class = '';
                 $class = !empty($value['id']) ? $value['id'] : $value['name'];
                 $class = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($class));
                 $output .= '<div id="options-group-' . $counter . '" class="group ' . $class . '">';
                 $output .= '<h3>' . esc_html($value['name']) . '</h3>' . "\n";
                 break;
         }
         if ($value['type'] != "heading" && $value['type'] != "info") {
             $output .= '</div>';
             if ($value['type'] != "checkbox" && $value['type'] != "editor") {
                 $output .= '<div class="explain">' . wp_kses($explain_value, $allowedtags) . '</div>' . "\n";
             }
             $output .= '</div></div>' . "\n";
         }
         echo $output;
     }
     // Outputs closing div if there tabs
     if (Options_rara_Interface::optionsrara_tabs() != '') {
         echo '</div>';
     }
 }