public function metaboxes()
    {
        add_action('add_meta_boxes', function () {
            //css id,title,callback func,page,priority, callback func arguments
            add_meta_box('wcla_font_file', __('Font Details', 'liveart'), 'wcla_font_file_cb', 'wcla_fonts');
        });
        add_action('add_meta_boxes', function () {
            //css id,title,callback func,page,priority, callback func arguments
            add_meta_box('wcla_system_fonts', __('System Fonts', 'liveart'), 'wcla_system_fonts_cb', 'wcla_fonts');
        });
        function wcla_font_file_cb($post)
        {
            //wp_nonce_field(__FILE__, 'mma_nonce');
            $files = get_post_meta($post->ID, 'wcla_font_file', true);
            ?>
 
            <p>          			
                <label for="wcla_font_family"><?php 
            echo __('Font Family', 'liveart');
            ?>
:</label>            
                <input type="text" id="wcla_font_family" name="wcla_font_family" value="<?php 
            echo get_post_meta($post->ID, 'wcla_font_family', true);
            ?>
" class="wide50pct" />                                                
            </p>
            <div class="note" ><?php 
            echo __('The Font Family', 'liveart');
            ?>
.</div>
            <p>          			
                <label for="wcla_font_system_name"><?php 
            echo __('System Name', 'liveart');
            ?>
:</label>            
                <input type="text" id="wcla_font_system_name" name="wcla_font_system_name" value="<?php 
            echo get_post_meta($post->ID, 'wcla_font_system_name', true);
            ?>
" class="wide50pct" />                       
            </p>
            <div class="note wide50pct" ><?php 
            echo __('Need for converting. Use <b>bold</b> name from System Fonts below (font should appear there after saving)', 'liveart');
            ?>
.</div>

            <p>
                <label for="wcla_font_file">
                    <?php 
            echo __('File(Normal)', 'liveart');
            ?>
:
                </label>
                <input type="file" id="wcla_font_file" name="wcla_font_file[normal_normal]" value="" />                
                <?php 
            if (isset($files["normal_normal"])) {
                ?>
                    <br>
                    <span class="font-filename"><?php 
                echo $files["normal_normal"];
                ?>
</span>
                <?php 
            }
            ?>

            </p>
            <p>
                <label for="wcla_font_file">
                    <?php 
            echo __('File(Bold)', 'liveart');
            ?>
:
                </label>
                <input type="file" id="wcla_font_file" name="wcla_font_file[bold_normal]" value="" />    
                <?php 
            if (isset($files["bold_normal"])) {
                ?>
                    <br>
                    <span class="font-filename"><?php 
                echo $files["bold_normal"];
                ?>
</span>
                <?php 
            }
            ?>
            </p>
            <p>
                <label for="wcla_font_file">
                    <?php 
            echo __('File(Italic)', 'liveart');
            ?>
:
                </label>
                <input type="file" id="wcla_font_file" name="wcla_font_file[normal_italic]" value="" />     
                <?php 
            if (isset($files["normal_italic"])) {
                ?>
                    <br>
                    <span class="font-filename"><?php 
                echo $files["normal_italic"];
                ?>
</span>
                <?php 
            }
            ?>
            </p>
            <p>
                <label for="wcla_font_file">
                    <?php 
            echo __('File(Bold & Italic)', 'liveart');
            ?>
:
                </label>
                <input type="file" id="wcla_font_file" name="wcla_font_file[bold_italic]" value="" />   
                <?php 
            if (isset($files["bold_italic"])) {
                ?>
                    <br>
                    <span class="font-filename"><?php 
                echo $files["bold_italic"];
                ?>
</span>
                <?php 
            }
            ?>
            </p>
            <p>          			
                <label for="wcla_font_ascent"><?php 
            echo __('Ascent', 'liveart');
            ?>
:</label>            
                <input type="text" id="wcla_font_ascent" name="wcla_font_ascent" value="<?php 
            echo get_post_meta($post->ID, 'wcla_font_ascent', true);
            ?>
" class="wide50pct" />                       
            </p>
            <p>
                <?php 
            echo WCLA_Utilities::selectYesNo('wcla_font_bold_allowed', 'Bold Allowed', get_post_meta($post->ID, 'wcla_font_bold_allowed', true));
            ?>
            </p>
            <p>
                <?php 
            echo WCLA_Utilities::selectYesNo('wcla_font_italic_allowed', 'Italic Allowed', get_post_meta($post->ID, 'wcla_font_italic_allowed', true));
            ?>
            </p>
            <p>
                <label for="wcla_font_vector_file">
                    <?php 
            echo __('Vector File', 'liveart');
            ?>
:
                </label>
                <input type="file" id="wcla_font_vector_file" name="wcla_font_vector_file" value="" /> 
                <?php 
            if (get_post_meta($post->ID, 'wcla_font_vector_file', true)) {
                ?>
                    <br>
                    <span class="font-filename"><?php 
                echo get_post_meta($post->ID, 'wcla_font_vector_file', true);
                ?>
</span>
                <?php 
            }
            ?>
            </p>

            <?php 
            wp_nonce_field(plugin_basename(__FILE__), 'font_file_nonce');
            ?>
            <?php 
        }
        function wcla_system_fonts_cb($post)
        {
            ?>

            <div class="entry-edit">                
                <div class="fieldset" style="max-height: 500px; overflow: auto;padding: 0 10px;">
                    <?php 
            foreach (WCLA_Font_Post_Type::getSystemFonts() as $i => $font) {
                ?>
                        <ul style="background: #eee; margin-bottom: 10px; padding: 10px 15px;">
                            <li><?php 
                echo $i + 1;
                ?>
. <strong><?php 
                echo trim(str_replace('family:', '', $font['family']));
                ?>
</strong></li>
                            <?php 
                foreach ($font as $fontParameter) {
                    ?>
                                <li><?php 
                    echo $fontParameter;
                    ?>
</li>
                            <?php 
                }
                ?>
                        </ul>
                    <?php 
            }
            ?>
                </div>
            </div>

            <?php 
        }
        add_action('save_post', function ($post_id) {
            if ($_POST) {
                if (user_can_save($post_id, plugin_basename(__FILE__), 'font_file_nonce')) {
                    //var_dump($_FILES);die();
                    update_post_meta($post_id, 'wcla_font_family', $_POST["wcla_font_family"]);
                    update_post_meta($post_id, 'wcla_font_system_name', $_POST["wcla_font_system_name"]);
                    update_post_meta($post_id, 'wcla_font_bold_allowed', $_POST["wcla_font_bold_allowed"]);
                    update_post_meta($post_id, 'wcla_font_italic_allowed', $_POST["wcla_font_italic_allowed"]);
                    update_post_meta($post_id, 'wcla_font_ascent', $_POST["wcla_font_ascent"]);
                    $fontFilesPaths = array();
                    $vectorFilePath = null;
                    $fontDir = sanitize_title($_POST["wcla_font_family"]);
                    if (has_files_to_upload('wcla_font_file')) {
                        if (is_array($_FILES['wcla_font_file']["name"])) {
                            foreach ($_FILES['wcla_font_file']['name'] as $inputName => $filename) {
                                if ($filename) {
                                    $file = wp_upload_bits($_FILES['wcla_font_file']['name'][$inputName], null, @file_get_contents($_FILES['wcla_font_file']['tmp_name'][$inputName]));
                                    if (FALSE === $file['error']) {
                                        $fontFilesPaths[$inputName] = $fontDir . '/' . pathinfo($file["file"], PATHINFO_FILENAME) . '.' . pathinfo($file["file"], PATHINFO_EXTENSION);
                                    }
                                    update_post_meta($post_id, 'wcla_font_file', $fontFilesPaths);
                                }
                            }
                        }
                        //
                    }
                    if (has_files_to_upload('wcla_font_vector_file')) {
                        if (isset($_FILES['wcla_font_vector_file'])) {
                            $file = wp_upload_bits($_FILES['wcla_font_vector_file']['name'], null, @file_get_contents($_FILES['wcla_font_vector_file']['tmp_name']));
                            if (FALSE === $file['error']) {
                                update_post_meta($post_id, 'wcla_font_vector_file', $fontDir . '/' . pathinfo($file["file"], PATHINFO_FILENAME) . '.' . pathinfo($file["file"], PATHINFO_EXTENSION));
                            }
                        }
                    }
                }
                self::buildFontCSS();
            }
        });
    }
    public function metaboxes()
    {
        add_action('add_meta_boxes', function () {
            //css id,title,callback func,page,priority, callback func arguments
            add_meta_box('wcla_graphics_details', __('Graphic Details', 'liveart'), 'wcla_graphics_details_cb', 'wcla_graphics');
            add_meta_box('wcla_graphics_colorizable_elements', __('Colorizable Elements', 'liveart'), 'wcla_graphics_colorizable_elements', 'wcla_graphics');
        });
        function wcla_graphics_details_cb($post)
        {
            ?>
            <p>     
                <?php 
            if (get_post_meta($post->ID, 'wcla_graphics_file_url', true) != '') {
                ?>
                    <a href="<?php 
                echo get_post_meta($post->ID, 'wcla_graphics_file_url', true);
                ?>
" style="float:left"><img src="<?php 
                echo get_post_meta($post->ID, 'wcla_graphics_file_url', true);
                ?>
" height="40" width="40"></a>
                <?php 
            }
            ?>
                             
                <label for="wcla_graphics_image_file"><?php 
            echo __('Image', 'liveart');
            ?>
:</label>
                <input type="file" id="wcla_graphics_image_file" name="wcla_graphics_image_file" value="" accept="image/*" />
            </p>
            <div style="clear:both"></div>
            <p>
                <?php 
            if (get_post_meta($post->ID, 'wcla_graphics_thumb_file_url', true) != '') {
                ?>
                    <a href="<?php 
                echo get_post_meta($post->ID, 'wcla_graphics_thumb_file_url', true);
                ?>
" style="float:left"><img src="<?php 
                echo get_post_meta($post->ID, 'wcla_graphics_thumb_file_url', true);
                ?>
" height="40" width="40"></a>
                <?php 
            }
            ?>
 
                <label for="wcla_graphics_image_thumb_file"><?php 
            echo __('Thumbnail', 'liveart');
            ?>
:</label>
                <input type="file" id="wcla_graphics_image_thumb_file" name="wcla_graphics_image_thumb_file" value="" accept="image/*"/>                
            </p>
            <p>
                <label for="category_id"><?php 
            echo __('Category', 'liveart');
            ?>
:</label>
                <?php 
            echo WCLA_LAGraphics_Post_Type::getTaxonomyCombo('lagraphics_categories', 'category_id', get_post_meta($post->ID, 'wcla_graphics_category_id', true) == '' ? 0 : get_post_meta($post->ID, 'wcla_graphics_category_id', true));
            ?>
            </p>
            <div class="note wide50pct" ><?php 
            echo __('Graphic category', 'liveart');
            ?>
.</div>
            <p>
                <label for="wcla_graphics_desc"><?php 
            echo __('Description', 'liveart');
            ?>
:</label>
                <textarea type="text" id="wcla_graphics_desc" name="wcla_graphics_desc"  class="wide50pct" ><?php 
            echo get_post_meta($post->ID, 'wcla_graphics_desc', true);
            ?>
</textarea>
            </p>
            <p>
                <label for="wcla_graphics_price"><?php 
            echo __('Price', 'liveart');
            ?>
:</label>
                <input type="text" id="wcla_graphics_price" name="wcla_graphics_price" value="<?php 
            echo get_post_meta($post->ID, 'wcla_graphics_price', true);
            ?>
"  class="wide50pct"/>
            </p>
            <div class="note wide50pct" ><?php 
            echo __('Extra price', 'liveart');
            ?>
</div>
            <p>
                <?php 
            echo WCLA_Utilities::selectYesNo('wcla_graphics_colorizable', 'Colorizable', get_post_meta($post->ID, 'wcla_graphics_colorizable', true));
            ?>
            </p>
            <p>
                <label for="wcla_graphics_colors"><?php 
            echo __('Colors', 'liveart');
            ?>
:</label>
                <input type="text" id="wcla_graphics_colors" name="wcla_graphics_colors" value="<?php 
            echo get_post_meta($post->ID, 'wcla_graphics_colors', true);
            ?>
"  class="wide50pct" />
            </p>

            <div class="note wide50pct" >
                <ul>
                    <li> <code class="prettyprint">"-1"</code> — <?php 
            echo __('process colors are required, e.g. if the graphic is photo', 'liveart');
            ?>
; </li>
                    <li> <code class="prettyprint">"0"</code> — default value (need graphic to be <code class="prettyprint">Colorizable = Yes</code> and get colors information from selected fill color/outline/multicolor layers); </li>
                    <li> <?php 
            echo __('integer (e.g. <code class="prettyprint">"5"</code>) — number of unique graphic colors', 'liveart');
            ?>
;</li>
                    <li> <?php 
            echo __('array of hex web colors (e.g. <code class="prettyprint">["#FFFFFF", "#000000"]</code>) — list of colors for accurate counting', 'liveart');
            ?>
</li>
                </ul>
            </div>
            <?php 
            wp_nonce_field(plugin_basename(__FILE__), 'graphic_file_nonce');
            ?>
            <?php 
        }
        function wcla_graphics_colorizable_elements($post)
        {
            $colorizable_elements = maybe_unserialize(get_post_meta($post->ID, 'wcla_graphic_colorizable_elements', true));
            ?>


            <div class="wcla_content">           
                <ul class="wcla_list_content">
                    <?php 
            if (is_array($colorizable_elements) && count($colorizable_elements) > 0) {
                ?>
                
                        <?php 
                foreach ($colorizable_elements as $k => $colorizable_element) {
                    ?>
                            <li class="wcla_list_content_row wcla_clear" id="colorizable_element-<?php 
                    echo $k;
                    ?>
">
                                <table class="table-grid">
                                    <thead>
                                        <tr>
                                            <td>Name<span class="required">*</span></td>
                                            <td>Id<span class="required">*</span></td>
                                        </tr>   
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="text" name="wcla_colorizable_element[<?php 
                    echo $k;
                    ?>
][name]" id="wcla_colorizable_element_name_<?php 
                    echo $k;
                    ?>
" class="wcla_textbox" value="<?php 
                    echo $colorizable_element["name"];
                    ?>
"/></td>
                                            <td><input type="text" name="wcla_colorizable_element[<?php 
                    echo $k;
                    ?>
][id]" id="wcla_colorizable_element_id_<?php 
                    echo $k;
                    ?>
" class="wcla_textbox" value="<?php 
                    echo $colorizable_element["id"];
                    ?>
" /></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <div id="wcla_colorizable_element_colors_<?php 
                    echo $k;
                    ?>
" class="wcla_product_properties wc-metabox postbox">
                                                    <h3>Colors</h3>
                                                    <div class="inside">
                                                        <table class="table-grid" style="margin:10px;">
                                                            <thead>
                                                                <tr>
                                                                    <td>Name<span class="required">*</span></td>
                                                                    <td>Value<span class="required">*</span></td>
                                                                    <td style="width:40px"></td>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="color_<?php 
                    echo $k;
                    ?>
">
                                                                <?php 
                    if (isset($colorizable_element["colors"]) && $colorizable_element["colors"] > 0) {
                        ?>
                                                                    <?php 
                        foreach ($colorizable_element["colors"] as $key => $color) {
                            ?>
                                                                        <tr id="wcla_colorizable_element_<?php 
                            echo $k;
                            ?>
_color_row_<?php 
                            echo $key;
                            ?>
">
                                                                            <td>
                                                                                <input type="text" name="wcla_colorizable_element[<?php 
                            echo $k;
                            ?>
][colors][<?php 
                            echo $key;
                            ?>
][name]"  class="wcla_textbox" value="<?php 
                            echo $color["name"];
                            ?>
"/>
                                                                            </td>
                                                                            <td>
                                                                                <input type="text" name="wcla_colorizable_element[<?php 
                            echo $k;
                            ?>
][colors][<?php 
                            echo $key;
                            ?>
][value]"  class="wcla_textbox" value="<?php 
                            echo $color["value"];
                            ?>
"/>
                                                                            </td>
                                                                            <td>
                                                                                <button class="button button-primary wcla_printing_area" type="button" onclick="delElement('wcla_colorizable_element_<?php 
                            echo $k;
                            ?>
_color_row_<?php 
                            echo $key;
                            ?>
')">Delete</button><div class="wcla_clear"> 
                                                                            </td>
                                                                        </tr>
                                                                    <?php 
                        }
                        ?>
                                                                <?php 
                    }
                    ?>
                                                            </tbody>   
                                                        </table>
                                                        <div class="toolbar"><button class="button button-primary wcla_add_row_color_button wcla_right" type="button" value="wcla_colorizable_element_colors_<?php 
                    echo $k;
                    ?>
">Add</button><div class="wcla_clear"></div></div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table> 
                                <span class="wcla_left wcla_clear wcla_pad0 wcla_print_area_btn wcla_remove_btn"><button class="button button-primary wcla_printing_area" type="button" onclick="delElement('colorizable_element-<?php 
                    echo $k;
                    ?>
')">Delete</button><div class="wcla_clear"></div></span>

                                <div class="wcla_clear"></div><input type="hidden" value="<?php 
                    echo $k;
                    ?>
" name="wcla_colorizable_elements[]"/>
                            </li>
                        <?php 
                }
                ?>
                    <?php 
            }
            ?>
                </ul>
                <div class="wcla_clear"></div>
            </div>
            <div class="wcla_clear"></div>
            <div class="toolbar">
                <button class="button button-primary wcla_add_col_elements wcla_right" type="button">Add</button>
                <div class="wcla_clear"></div>
            </div>


            <?php 
            /**
             * Graphic Type Javascript
             */
            ob_start();
            ?>
            <script type="text/javascript">
                var cecnt =<?php 
            echo count($colorizable_elements);
            ?>
;
                jQuery(function () {
                    jQuery('#wcla_graphics_colorizable_elements').on('click', '.wcla_add_col_elements', function () {
                        jQuery('#wcla_graphics_colorizable_elements ul.wcla_list_content').append(
                                '<li class="wcla_list_content_row wcla_clear" id="colorizable_element-' + cecnt + '">'
                                + '<table class="table-grid">'
                                + '<thead>'
                                + '<tr>'
                                + '<td>'
                                + 'Name<span class="required">*</span>'
                                + '</td>'
                                + '<td>'
                                + 'Id<span class="required">*</span>'
                                + '</td> '
                                + '</tr>'
                                + '</thead>'
                                + '<tbody>'
                                + '<tr>'
                                + '<td><input type="text" name="wcla_colorizable_element[' + cecnt + '][name]" id="wcla_colorizable_element_name_' + cecnt + '" class="wcla_textbox"/></td>'
                                + '<td><input type="text" name="wcla_colorizable_element[' + cecnt + '][id]" id="wcla_colorizable_element_id_' + cecnt + '" class="wcla_textbox"/></td>'
                                + '</tr>'
                                + '<tr>'
                                + '<td colspan="2">'
                                + '<div id="wcla_colorizable_element_colors_' + cecnt + '" class="wcla_product_properties wc-metabox postbox">'
                                + '<h3>Colors</h3>'
                                + '<div class="inside">'
                                + '<table class="table-grid" style="margin:10px;">'
                                + '<thead>'
                                + '<tr>'
                                + '<td>'
                                + 'Name<span class="required">*</span>'
                                + '</td>'
                                + '<td>'
                                + 'Value<span class="required">*</span>'
                                + '</td> '
                                + '<td style="width:40px"></td>'
                                + '</tr>'
                                + '</thead>'
                                + '<tbody id="color_' + cecnt + '">'
                                + '</tbody>'
                                + '</table>'
                                + '<div class="toolbar"><button class="button button-primary wcla_add_row_color_button wcla_right" type="button" value="wcla_colorizable_element_colors_' + cecnt + '">Add</button><div class="wcla_clear"></div></div>'
                                + '</div>'
                                + '</div>'
                                + '</td>'
                                + '</tr>'
                                + '</tbody>'
                                + '</table>'
                                + '<span class="wcla_left wcla_clear wcla_pad0 wcla_print_area_btn wcla_remove_btn"><button class="button button-primary wcla_printing_area" type="button" onclick="delElement(\'colorizable_element-' + cecnt + '\')">Delete</button><div class="wcla_clear"></div></span>'

                                + '<div class="wcla_clear"></div><input type="hidden" value="' + cecnt + '" name="wcla_colorizable_elements[]"/></li>'
                                );
                        cecnt++;

                    });

                    jQuery('#wcla_graphics_colorizable_elements').on('click', '.wcla_add_row_color_button', function () {
                        var cnt = parseInt(jQuery("#" + jQuery(this).val() + " tbody tr").length);
                        cnt++;
                        var idxStr = jQuery("#" + jQuery(this).val() + " tbody").attr("id");
                        var idArr = idxStr.split("_");

                        jQuery("#" + jQuery(this).val() + " tbody").append(
                                '<tr id="wcla_colorizable_element_' + idArr[1] + '_color_row_' + cnt + '">'
                                + '<td>'
                                + '<input type="text" name="wcla_colorizable_element[' + idArr[1] + '][colors][' + cnt + '][name]"  class="wcla_textbox"/>'
                                + '</td>'
                                + '<td>'
                                + '<input type="text" name="wcla_colorizable_element[' + idArr[1] + '][colors][' + cnt + '][value]"  class="wcla_textbox"/>'
                                + '</td>'
                                + '<td>'
                                + '<button class="button button-primary wcla_printing_area" type="button" onclick="delElement(\'wcla_colorizable_element_' + idArr[1] + '_color_row_' + cnt + '\')">Delete</button><div class="wcla_clear">'
                                + '</td>'
                                + '</tr>'
                                );

                    });
                });
            </script>    
            <?php 
            $javascript = ob_get_clean();
            // $woocommerce->add_inline_js($javascript);
            echo $javascript;
            ?>

            <?php 
        }
        add_action('save_post', function ($post_id) {
            if ($_POST) {
                update_post_meta($post_id, 'wcla_graphics_category_id', $_POST["category_id"]);
                update_post_meta($post_id, 'wcla_graphics_price', $_POST["wcla_graphics_price"]);
                update_post_meta($post_id, 'wcla_graphics_desc', $_POST["wcla_graphics_desc"]);
                update_post_meta($post_id, 'wcla_graphics_colorizable', $_POST["wcla_graphics_colorizable"]);
                update_post_meta($post_id, 'wcla_graphics_colors', $_POST["wcla_graphics_colors"]);
                if (user_can_save($post_id, plugin_basename(__FILE__), 'graphic_file_nonce')) {
                    if (has_files_to_upload('wcla_graphics_image_file')) {
                        if (isset($_FILES['wcla_graphics_image_file'])) {
                            $file = wp_upload_bits($_FILES['wcla_graphics_image_file']['name'], null, @file_get_contents($_FILES['wcla_graphics_image_file']['tmp_name']));
                            if (FALSE === $file['error']) {
                                update_post_meta($post_id, 'wcla_graphics_file', pathinfo($file["file"], PATHINFO_FILENAME) . '.' . pathinfo($file["file"], PATHINFO_EXTENSION));
                            }
                        }
                        if (isset($_FILES['wcla_graphics_image_thumb_file'])) {
                            $file = array();
                            $file = wp_upload_bits('thumb_' . $_FILES['wcla_graphics_image_thumb_file']['name'], null, @file_get_contents($_FILES['wcla_graphics_image_thumb_file']['tmp_name']));
                            if (FALSE === $file['error']) {
                                update_post_meta($post_id, 'wcla_graphics_thumb_file', pathinfo($file["file"], PATHINFO_FILENAME) . '.' . pathinfo($file["file"], PATHINFO_EXTENSION));
                            }
                        }
                    }
                }
                $colorizable_elements = array();
                if (isset($_POST["wcla_colorizable_elements"])) {
                    foreach ($_POST["wcla_colorizable_elements"] as $key => $val) {
                        $colorizable_elements[] = isset($_POST["wcla_colorizable_element"][$val]) ? $_POST["wcla_colorizable_element"][$val] : array();
                    }
                }
                // var_dump($_POST["wcla_colorizable_elements"],$_POST["wcla_colorizable_element"],$colorizable_elements);die();
                update_post_meta($post_id, 'wcla_graphic_colorizable_elements', $colorizable_elements);
            }
        });
    }