<?php
    function magictoolbox_WordPress_MagicZoomPlus_get_select_option_value($value) {
        $v = $value;
        if ('tl' == $v) {
            $v = 'top-left';
        } elseif ('tr' == $v) {
            $v = 'top-right';
        } elseif ('bl' == $v) {
            $v = 'bottom-left';
        } elseif ('br' == $v) {
            $v = 'bottom-right';
        }

        return $v;
    }

    function magictoolbox_WordPress_MagicZoomPlus_set_custom_options($defaultOpt, $customOpt) {
        foreach ($customOpt as $key => $value) {
            $defaultOpt[$key] = $value;
        }
        return $defaultOpt;
    }

    function magictoolbox_WordPress_MagicZoomPlus_correct_mobile_options($o) {
        $opt = array();
        foreach($o as $key => $value) {
            $option = array();
            if (preg_match('/(.+)ForMobile/', $key, $option)) {
                $opt[$option[1]] = $value;
            } else if ('slideMobileEffect' == $key) {
                $opt[$key] = $value;
            }
        }
        return $opt;
    }

    function magictoolbox_WordPress_MagicZoomPlus_to_string($o) {
        $str = '';
        foreach($o as $key => $value) {
            $str .= ($key.':'.$value.';');
        }
        return $str;
    }

    function magictoolbox_WordPress_MagicZoomPlus_normalize_option($o) {
        $opt = array();
        foreach($o as $key => $value) {
            $opt[$key] = magictoolbox_WordPress_MagicZoomPlus_get_option($value);
        }
        return $opt;
    }

    function magictoolbox_WordPress_MagicZoomPlus_options_filter($o, $nameOfKey, $valuesOfKey = array()) {
        $opt = array();

        if (!is_array($valuesOfKey)) {
            $valuesOfKey = array($valuesOfKey);
        }

        foreach($o as $key => $value) {
            if (in_array($value[$nameOfKey], $valuesOfKey)) {
                $opt[$key] = $value;
            }
        }

        return $opt;
    }

    function magictoolbox_WordPress_MagicZoomPlus_get_script_part($arr, $id) {
        $str = '{';
        if (magictoolbox_WordPress_MagicZoomPlus_is_video($id)) {
            $str .= ('videoUrl:"'.$id.'",');
            $str .= ('type:"video"');
        } else {
            $id = (int)$id;
            $str .= ('id:'.$id.',');
            $str .= ('type:"image",');
            $str .= ('url:"'.wp_get_attachment_url($id).'",');
            $str .= ('title:"'.get_the_title($id).'",');
            $str .= ('alt:"'.get_post_meta($id, '_wp_attachment_image_alt', true).'",');
            if (count($arr)) {
                $str .= ('sizes: {');
                foreach ($arr as $key => $value) {
                    if ('custom' == $key) continue;
                    $url = wp_get_attachment_image_src($id, $key);
                    $url = $url[0];
                    $str .= ('"'.$key.'":{');
                    $str .= ('url:"'.$url.'",');
                    $str .= ('width:'.$value['width'].',');
                    $str .= ('height:'.$value['height']);
                    $str .= '},';
                }
                $str .= '}';
            }
        }
        $str .= '}';

        return $str;
    }

    function magictoolbox_WordPress_MagicZoomPlus_get_option_states($o, $co) {
        $opt = array();
        foreach ($o as $key => $value) {
            $el_state = empty($co[$key]) ? 'lock' : 'unlock';
            $opt[$key]['element_state'] = $el_state;
            $opt[$key]['button_state'] = ('lock' == $el_state) ? 'unlock' : 'lock';
        }
        return $opt;
    }

    function magictoolbox_WordPress_MagicZoomPlus_get_correct_sizes_of_images($width, $height) {
        $result = '';
        $result .= ('('. $width);

        if ('0' == $height.'' || preg_match('/^9+$/', $height.'')) {
            $result .= ' width';
        } else {
            $result .= ('x'.$height);
        }
        $result .= ')';
        return $result;
    }

    function magictoolbox_WordPress_MagicZoomPlus_sort_groups($opt, $groups) {
        $result = array();

        foreach ($groups as $value) {
            if (array_key_exists($value, $opt)) {
                $result[$value] = $opt[$value];
            }
        }

        foreach ($opt as $key => $value) {
            if (!array_key_exists($key, $groups)) {
                $result[$key] = $value;
            }
        }

        return $result;
    }

    $tool = null;
    $toolId = null;
    $toolName = null;
    $toolShortcode = null;
    $toolImage = '';
    $toolThumbnails = '';
    $toolOptions = array();
    $toolMobileOptions = array();
    $toolAdditionalOptions = null;
    $script = '';

    $allOptions = get_option("WordPressMagicZoomPlusCoreSettings");
    $allOptions = $allOptions['default'];

    // $mobileOptions = magictoolbox_WordPress_MagicZoomPlus_options_filter($options, 'magiczoomplus-mobile');
    // $options = magictoolbox_WordPress_MagicZoomPlus_options_filter($options, 'magiczoomplus');

    $mobileOptions = magictoolbox_WordPress_MagicZoomPlus_options_filter($allOptions, 'scope', 'magiczoomplus-mobile');
    $mobileOptions = array_merge($mobileOptions, magictoolbox_WordPress_MagicZoomPlus_options_filter($allOptions, 'id', array('background')));

    $options = magictoolbox_WordPress_MagicZoomPlus_options_filter($allOptions, 'scope', 'magiczoomplus');
    $options = array_merge($options, magictoolbox_WordPress_MagicZoomPlus_options_filter($allOptions, 'id', array('background')));


    $mobileOptions = magictoolbox_WordPress_MagicZoomPlus_correct_mobile_options($mobileOptions);

    $optionValues = magictoolbox_WordPress_MagicZoomPlus_normalize_option($options);
    $mobileOptionValues = magictoolbox_WordPress_MagicZoomPlus_normalize_option($mobileOptions);

    $defaultOtpions = magictoolbox_WordPress_MagicZoomPlus_to_string($optionValues);
    $defaultMobileOtpions = magictoolbox_WordPress_MagicZoomPlus_to_string($mobileOptionValues);

    $defaultImageSize = 'medium';
    $defaultImageWidth = "400";
    $defaultImageHeight = "400";
    $thumbnailImageSize = 'thumbnail';
    $thumbnailImageWidth = "100";
    $thumbnailImageHeight = "100";
    $thumbnailPosition = "bottom";
    $wordpressImageSizes = magictoolbox_WordPress_MagicZoomPlus_get_wordpress_image_sizes();
    $wordpressImageSizes['custom'] = array();
    $isUsingDefaultOptions = true;
    $magicScrollDefaultOtpions='';

    if (magictoolbox_WordPress_MagicZoomPlus_is_magicscroll_active()) {
        $scrollOptions = array();
        $thumbnailMode = "simple";

        $magicScrollOptions = get_option("WordPressMagicScrollCoreSettings");
        $magicScrollOptions = $magicScrollOptions['default'];
        $magicScrollOptions = magictoolbox_WordPress_MagicZoomPlus_options_filter($magicScrollOptions, 'scope', 'magicscroll');

        unset($magicScrollOptions['orientation']);

        $magicScrollOptionValues = magictoolbox_WordPress_MagicZoomPlus_normalize_option($magicScrollOptions);
        $magicScrollDefaultOtpions = magictoolbox_WordPress_MagicZoomPlus_to_string($magicScrollOptionValues);

        $isUsingMagicScrollDefaultOptions = true;
    }

    if (array_key_exists('id', $_GET) && 'new' != $_GET['id']) {
        $toolId = $_GET['id'];
        $tool = magictoolbox_WordPress_MagicZoomPlus_get_data("id", $toolId);
        $tool = $tool[0];

        $toolName = $tool->name;
        $toolShortcode = $tool->shortcode;

        $toolImage = $tool->image;
        $toolThumbnails = $tool->thumbnails;

        $toolAdditionalOptions = magictoolbox_WordPress_MagicZoomPlus_parse_option_from_string($tool->additional_options);

        $isUsingDefaultOptions = ('default' === $toolAdditionalOptions['settings']);

        if ($tool->options != '') {
            $savedOpt = explode('|', $tool->options);
            if (magictoolbox_WordPress_MagicZoomPlus_is_magicscroll_active()) {
                if (isset($toolAdditionalOptions['scrollsettings'])) {
                    $isUsingMagicScrollDefaultOptions = ('default' === $toolAdditionalOptions['scrollsettings']);
                }
                if ($savedOpt[1] && $savedOpt[1] != '') {
                    $scrollOptions = magictoolbox_WordPress_MagicZoomPlus_parse_option_from_string($savedOpt[1]);
                    $magicScrollOptionValues = magictoolbox_WordPress_MagicZoomPlus_set_custom_options($magicScrollOptionValues, $scrollOptions);
                }

                if (isset($toolAdditionalOptions['thumbnail_mode'])) {
                    $thumbnailMode = $toolAdditionalOptions['thumbnail_mode'];
                }
            }
            if ($savedOpt[0] && $savedOpt[0] != '') {
                $toolOptions = magictoolbox_WordPress_MagicZoomPlus_parse_option_from_string($tool->options);
                $optionValues = magictoolbox_WordPress_MagicZoomPlus_set_custom_options($optionValues, $toolOptions);
            }            
        }

        if ('' != $tool->mobile_options) {
            $toolMobileOptions = magictoolbox_WordPress_MagicZoomPlus_parse_option_from_string($tool->mobile_options);
            $mobileOptionValues = magictoolbox_WordPress_MagicZoomPlus_set_custom_options($mobileOptionValues, $toolMobileOptions);
        }

        $defaultImageSize = $toolAdditionalOptions['image_size'];
        $defaultImageWidth = $toolAdditionalOptions['image_width'];
        $defaultImageHeight = $toolAdditionalOptions['image_height'];
        $thumbnailImageSize = $toolAdditionalOptions['thumbnail_size'];
        $thumbnailImageWidth = $toolAdditionalOptions['thumbnail_width'];
        $thumbnailImageHeight = $toolAdditionalOptions['thumbnail_height'];
        $thumbnailPosition = $toolAdditionalOptions['thumbnails_position'];

        $script .= '<script>';
        $script .= 'var main_image = '.magictoolbox_WordPress_MagicZoomPlus_get_script_part($wordpressImageSizes, $toolImage).';';
        $tmp = explode(',', $toolThumbnails);
        $script .= 'var thumbnail_images = [';
        foreach ($tmp as $value) {
            if ('' != trim($value)) {
                $script .= magictoolbox_WordPress_MagicZoomPlus_get_script_part($wordpressImageSizes, $value);
                $script .= ',';
            }
        }
        $script .= '];';
        $script .= '</script>';
    }

    $states = magictoolbox_WordPress_MagicZoomPlus_get_option_states($optionValues, $toolOptions);
    $mobileStates = magictoolbox_WordPress_MagicZoomPlus_get_option_states($mobileOptionValues, $toolMobileOptions);

    if (magictoolbox_WordPress_MagicZoomPlus_is_magicscroll_active()) {
        $magicScrollStates = magictoolbox_WordPress_MagicZoomPlus_get_option_states($magicScrollOptionValues, $scrollOptions);
    }
?>

<div class="magiczoomplus-tool shortcode-container"
     data-tool-id="<?php echo $toolId; ?>"
     data-tool-name="<?php echo $toolName; ?>"
     data-tool-shortcode="<?php echo $toolShortcode; ?>"
     data-default-options="<?php echo $defaultOtpions; ?>"
     data-default-mobile-options="<?php echo $defaultMobileOtpions; ?>"
     data-default-magicscroll-options="<?php echo $magicScrollDefaultOtpions; ?>">

    <?php echo $script; ?>

    <h1 style="display:<?php echo (null == $toolId) ? 'none' : 'block'; ?>;" id="exist-tool">Edit Magic Zoom Plus ID #<span><?php echo $toolId; ?></span>, '<span><?php echo $toolName; ?></span>'</h1>
    <h1 style="display:<?php echo (null == $toolId) ? 'block' : 'none'; ?>;" id="new-tool">Add new Magic Zoom Plus</h1>

    <div class="save-container">
        <button class="button save-button">Save</button>
        <button class="button button-primary save-and-close-button">Save and close</button>
        <button class="button close-button">Close</button>
    </div>

    <div class="horizontal-block">
        <div class="flex-container">
            <div class="title-of-field">
                <span>Name (short title to describe shortcode)<span class="important-field" title="Obligatory input field">*</span></span>
            </div>
            <div class="value-of-field">
                <input id="tool-name-param" type="text" value="" placeholder="e.g. iPhone 6S">
                <span class="mt-error" id="name-error">Name is not specified!</span>
            </div>
        </div>
    </div>

    <div class="horizontal-block">
        <div class="flex-container">
            <div class="title-of-field">
                <span>Custom shortcode string</span>
            </div>
            <div class="value-of-field">
                <span><input id="tool-shortcode-param" type="text" value=""><div class="mt-loader"></div></span>
                <span class="mt-error" id="shortcode-error">Shortcode name must be maximum 50 characters, with no spaces. It can only contain letters, numbers, underscores and dashes.</span>
                <span class="mt-error" id="shortcode-is-not-unique">Is not unique.</span>
                <div class="">(optional, if you want to use a custom name instead of a number)</div>
            </div>
        </div>
    </div>

    <div class="horizontal-block">
        <div class="flex-container">
            <div class="title-of-field">
                <span>Main image size</span>
            </div>
            <div class="value-of-field">
                <select id="default-img-size-param" style="vertical-align: top;">
                    <?php foreach($wordpressImageSizes as $wpImgSize => $value) { ?>
                    <option <?php echo $wpImgSize == $defaultImageSize ? 'selected' : ''; ?> value="<?php echo $wpImgSize; ?>"><?php echo $wpImgSize; ?><?php echo count($value) ? (' '.magictoolbox_WordPress_MagicZoomPlus_get_correct_sizes_of_images($value['width'], $value['height'])) : ''; ?></option>
                    <?php } ?>
                </select>
                <div style="display: inline-block; margin-left: 20px;">
                    <div style="display: <?php echo 'custom' == $defaultImageSize ? 'inline-block' : 'none'; ?>;">
                        <input id="default-image-width-param" min="1" type="number" value="<?php echo $defaultImageWidth; ?>" placeholder="width (px)" title="Max width"><br/>
                        <span>max width (px)</span>
                    </div>
                    <div style="display: <?php echo 'custom' == $defaultImageSize ? 'inline-block' : 'none'; ?>;">
                        <input id="default-image-height-param" min="1" type="number" value="<?php echo $defaultImageHeight; ?>" placeholder="height (px)" title="Max height"><br/>
                        <span>max height (px)</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="horizontal-block">
        <div class="flex-container">
            <div class="title-of-field">
                <span>Thumbnail image size</span>
            </div>
            <div class="value-of-field">
                <select id="thumbnail-img-size-param" style="vertical-align: top;">
                    <?php foreach($wordpressImageSizes as $wpImgSize => $value) { ?>
                    <option <?php echo $wpImgSize == $thumbnailImageSize ? 'selected' : ''; ?> value="<?php echo $wpImgSize; ?>"><?php echo $wpImgSize; ?><?php echo count($value) ? (' '.magictoolbox_WordPress_MagicZoomPlus_get_correct_sizes_of_images($value['width'], $value['height'])) : ''; ?></option>
                    <?php } ?>
                </select>
                <div style="display: inline-block; margin-left: 20px;">
                    <div style="display: <?php echo 'custom' == $thumbnailImageSize ? 'inline-block' : 'none'; ?>;">
                        <input id="thumbnail-image-width-param" min="1" type="number" value="<?php echo $thumbnailImageWidth; ?>" placeholder="width (px)" title="Max width"><br/>
                        <span>max width (px)</span>
                    </div>
                    <div style="display: <?php echo 'custom' == $thumbnailImageSize ? 'inline-block' : 'none'; ?>;">
                        <input id="thumbnail-image-height-param" min="1" type="number" value="<?php echo $thumbnailImageHeight; ?>" placeholder="height (px)" title="Max height"><br/>
                        <span>max height (px)</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="horizontal-block">
        <div class="flex-container">
            <div class="title-of-field">
                <span>Thumbnail position</span>
            </div>
            <div class="value-of-field">
                <select id="thumbnail-position-param">
                    <option <?php echo ('top' == $thumbnailPosition) ? 'selected' : '' ; ?> value="top">top</option>
                    <option <?php echo ('left' == $thumbnailPosition) ? 'selected' : '' ; ?> value="left">left</option>
                    <option <?php echo ('right' == $thumbnailPosition) ? 'selected' : '' ; ?> value="right">right</option>
                    <option <?php echo ('bottom' == $thumbnailPosition) ? 'selected' : '' ; ?> value="bottom">bottom</option>
                </select>
            </div>
        </div>
    </div>

    <div class="horizontal-block">
        <div class="flex-container">
            <div class="title-of-field">
                <span>Scrollable thumbnails</span>
            </div>
            <div class="value-of-field">
                <?php
                    if (magictoolbox_WordPress_MagicZoomPlus_is_magicscroll_exist()) {
                        if (magictoolbox_WordPress_MagicZoomPlus_is_magicscroll_active()) {
                ?>
                <select id="thumbnail-mode-param">
                    <option <?php echo $thumbnailMode === 'simple' ? 'selected' : ''; ?> value="simple">No</option>
                    <option <?php echo $thumbnailMode === 'scroll' ? 'selected' : ''; ?> value="scroll">Yes</option>
                </select>
                <?php
                        } else {
                ?>
                <span>
                    Powered by the versatile <b>Magic Scroll for Wordpress</b><br />
                    <a id="activated-link" href="#">Activate plugin</a>
                </span>
                <?php
                        }
                    } else {
                ?>
                <span>
                    Powered by the versatile <b>Magic Scroll for Wordpress</b><br />
                    <a href="https://www.magictoolbox.com/magicscroll/modules/wordpress/" target="_blank">Download plugin</a>
                </span>
                <?php
                    }
                ?>
            </div>
        </div>
    </div>

    <div class="horizontal-block">
        <div class="flex-container">
            <div class="images-container">
                <h2>Images</h2>
                <div class="image-container-wrapper">
                    <fieldset>
                        <legend>Main image</legend>
                        <div class="image-wrapper">
                            <div id="tool-image" class="empty">
                                <button type="button" id="add-main-image-button" class="button" title="Select image">Select image</button>
                                <button type="button" id="main-image-button" class="remove" title="Remove image"></button>
                                <div class="mt-loader"></div>
                            </div>
                        </div>
                        <div class="mt-error" id="default-image">Please, choose main image.</div>
                        <div class="mt-error" id="loading-error">while loading main image there was an error</div>
                    </fieldset>
                </div>
                <div class="thumbnails-container-wrapper">
                    <fieldset>
                        <legend>Gallery images</legend>
                        <div class="thumbnails-container empty" id="thumbnails">
                            <div class="curtain"></div>
                            <div class="thumbnails-controll-panel"><button type="button" class="button" id="remove-thumbnails-button">Remove all images</button></div>
                            <div class="thumbnails-image-wrapper"></div>
                        </div>
                        <button type="button" id="add-thumbnails-button" class="button">Add images</button>
                        <button type="button" id="add-video-thumbnail-button" class="button">Add video</button>
                        <div class="mt-error" id="thumbnails-images">Please, choose images.</div>
                    </fieldset>
                </div>
            </div>
            <div class="preview-container">
                <h2>Preview</h2>
                <button type="button" id="refresh-button" class="button button-primary" style="display: none;">Refresh</button>
                <div class="tool-container"></div>
            </div>
        </div>
    </div>
    <div class="horizontal-block">
        <h2>Settings</h2>
        <div style="padding: 10px;">
            <label>
                <?php $checked = $isUsingDefaultOptions ? 'checked="checked"' : ''; ?>
                <input type="radio" id="use-def-opt" name="settings" <?php echo $checked; ?> value="default-options">Use default settings
            </label>
            <label>
                <?php $checked = !$isUsingDefaultOptions ? 'checked="checked"' : ''; ?>
                <input type="radio" id="use-cus-opt" name="settings" <?php echo $checked; ?> value="custom-options">Use custom settings &gt;
            </label>
        </div>
        <div id="custom-options-container" <?php echo $isUsingDefaultOptions ? 'style="display: none;"' : 'style="display: block;"' ;?>>
            <div class="left-side">
                <table>
                    <thead><tr><th colspan="2">Parameter</th><th>Value</th></tr></thead>
                    <tbody>
                        <?php
                            $map = WordPressMagicZoomPlus_getParamsMap();
                            $map = $map['default'];
                            $count = 5;


                            foreach ($map as $key => $value) {
                                if ('General' == $key) { continue; }
                                if ('Watermark' == $key || 'Scroll' == $key) { continue; }
                                $currentOptions = $options;
                                $currentOptionValues = $optionValues;
                                $currentStates = $states;
                                if ('Mobile' == $key) {
                                    $currentOptions = $mobileOptions;
                                    $currentOptionValues = $mobileOptionValues;
                                    $currentStates = $mobileStates;
                                }
                        ?>
                        <tr class="caption"><th colspan="4"><?php echo $key; ?></th></tr>
                        <?php
                            for ($i = 0; $i < count($value); $i++) {
                                $param = $value[$i];
                                if ('Mobile' == $key) { $param = str_replace('ForMobile', '', $param); }
                                if (!isset($currentOptions[$param])) { continue; }
                        ?>
                            <tr<?php echo ('lock' == $currentStates[$param]['element_state']) ? ' class="disabled-option"' : ''; ?>>
                                <td><button type="button" title="<?php echo ucfirst($currentStates[$param]['button_state']); ?>" class="button dashicons dashicons-<?php echo $currentStates[$param]['button_state'] == 'lock' ? 'unlock' : 'lock'; ?>"></button></td>
                                <td>
                                    <?php echo $currentOptions[$param]['label']; ?>
                                    <!-- <div title="<?php //echo $param;?>"><?php //echo $param; ?></div> -->
                                </td>
                                <td>
                                    <?php if ('array' == $currentOptions[$param]['type']) {?>
                                        <?php if (in_array($currentOptionValues[$param], array('Yes', 'No'))) { ?>
                                    <label class="switch-control">
                                        <input type="checkbox" name="<?php echo $param; ?>" data-state="<?php echo $currentStates[$param]['element_state']; ?>" <?php echo ('lock' == $currentStates[$param]['element_state']) ? 'disabled' : ''; ?> <?php echo $currentOptionValues[$param] == 'Yes' ? 'checked' : ''; ?> value="<?php echo $currentOptionValues[$param]; ?>" <?php echo ('Mobile' == $key) ? 'data-mobile="true"' : ''; ?>>
                                        <span class="switch-slider"></span>
                                    </label>
                                        <?php } else { ?>
                                    <select name="<?php echo $param; ?>" data-state="<?php echo $currentStates[$param]['element_state']; ?>" <?php echo ('lock' == $currentStates[$param]['element_state']) ? 'disabled' : ''; ?> <?php echo ('Mobile' == $key) ? 'data-mobile="true"' : ''; ?>>
                                        <?php foreach($currentOptions[$param]['values'] as $sel) {
                                            $paramValue = $sel;
                                            if ('cssClass' == $param) {
                                                if ('dark' == $paramValue) {
                                                    $paramValue = 'dark-bg';
                                                } else if ('white' == $paramValue) {
                                                    $paramValue = 'white-bg';
                                                } else {
                                                    $paramValue = 'blurred';
                                                }
                                            }
                                        ?>
                                        <option value="<?php echo $paramValue; ?>" <?php echo ($sel == $currentOptionValues[$param]) ? 'selected' : ''; ?>><?php echo magictoolbox_WordPress_MagicZoomPlus_get_select_option_value($sel); ?></option>
                                        <?php } ?>
                                    </select>
                                        <?php } ?>
                                    <?php } else { ?>
                                    <input type="text" name="<?php echo $param; ?>" data-state="<?php echo $currentStates[$param]['element_state']; ?>" <?php echo ('lock' == $currentStates[$param]['element_state']) ? 'disabled' : ''; ?> value="<?php echo $currentOptionValues[$param]; ?>" <?php echo ('Mobile' == $key) ? 'data-mobile="true"' : ''; ?>>
                                    <?php if (isset($currentOptions[$param]['description'])) { ?>
                                    <div class="magic-description"><?php echo $currentOptions[$param]['description']; ?></div>
                                    <?php } ?>

                                    <?php } ?>
                                </td>
                            </tr>
                        <?php } ?>
                        <?php if ($count == array_search($key, array_keys($map))) { ?>
                    </tbody></table></div><div class="right-side"><table><thead><tr><th colspan="2">Parameter</th><th>Value</th></tr></thead><tbody>
                        <?php } ?>
                    <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <?php if (magictoolbox_WordPress_MagicZoomPlus_is_magicscroll_active()) { ?>
    <div id="scroll-options-container" class="horizontal-block">
        <h2>MagicScroll settings</h2>
        <div style="padding: 10px;">
            <label>
                <?php $checked = $isUsingMagicScrollDefaultOptions ? 'checked="checked"' : ''; ?>
                <input type="radio" id="use-def-scroll-opt" name="scrollsettings" <?php echo $checked; ?> value="default-scroll-options">Use default scroll settings
            </label>
            <label>
                <?php $checked = !$isUsingMagicScrollDefaultOptions ? 'checked="checked"' : ''; ?>
                <input type="radio" id="use-cus-scroll-opt" name="scrollsettings" <?php echo $checked; ?> value="custom-scroll-options">Use custom scroll settings &gt;
            </label>
        </div>
        <div id="magicscroll-custom-options" <?php echo $isUsingMagicScrollDefaultOptions ? 'style="display: none;"' : 'style="display: block;"' ;?>>
            <div class="left-side">
                <table>
                    <thead><tr><th colspan="2">Parameter</th><th>Value</th></tr></thead>
                    <tbody>
                    <?php
                        $count = ceil(count($magicScrollOptions) / 2);
                        foreach ($magicScrollOptions as $key => $value) {
                    ?>
                    <?php
                                if ($count == 0) {
                    ?>
                    </tbody></table></div><div class="right-side"><table><thead><tr><th colspan="2">Parameter</th><th>Value</th></tr></thead><tbody>
                    <?php
                                }
                            $count -= 1;
                    ?>
                        <tr<?php echo ('lock' == $magicScrollStates[$key]['element_state']) ? ' class="disabled-option"' : ''; ?>>
                            <td><button type="button" title="<?php echo ucfirst($magicScrollStates[$key]['button_state']); ?>" class="button dashicons dashicons-<?php echo $magicScrollStates[$key]['button_state'] == 'lock' ? 'unlock' : 'lock'; ?>"></button></td>
                            <td><?php echo $value['label']; ?></td>
                            <td>
                                <?php if ('array' == $value['type']) {?>
                                    <?php if (in_array($magicScrollOptionValues[$key], array('Yes', 'No'))) { ?>
                                <label class="switch-control">
                                    <input type="checkbox" name="<?php echo $value['id']; ?>" data-state="<?php echo $magicScrollStates[$key]['element_state']; ?>" <?php echo ('lock' == $magicScrollStates[$key]['element_state']) ? 'disabled' : ''; ?> <?php echo $magicScrollOptionValues[$key] == 'Yes' ? 'checked' : ''; ?> value="<?php echo $magicScrollOptionValues[$key]; ?>">
                                    <span class="switch-slider"></span>
                                </label>
                                    <?php } else { ?>
                                <select name="<?php echo $value['id']; ?>" data-state="<?php echo $magicScrollStates[$key]['element_state']; ?>" <?php echo ('lock' == $magicScrollStates[$key]['element_state']) ? 'disabled' : ''; ?>>
                                    <?php foreach ($value['values'] as $selectValue) { ?>
                                    <option value="<?php echo $selectValue; ?>" <?php echo ($selectValue == $magicScrollOptionValues[$key]) ? 'selected' : ''; ?>><?php echo $selectValue; ?></option>
                                    <?php } ?>
                                </select>
                                    <?php } ?>
                                <?php } else { ?>
                                <input type="text" name="<?php echo $value['id']; ?>" data-state="<?php echo $magicScrollStates[$key]['element_state']; ?>" <?php echo ('lock' == $magicScrollStates[$key]['element_state']) ? 'disabled' : ''; ?> value="<?php echo $magicScrollOptionValues[$key]; ?>">
                                <?php } ?>
                                <?php if (isset($value['description'])) { ?>
                                <div class="magic-description"><?php echo $value['description']; ?></div>
                                <?php } ?>
                            </td>
                        </tr>
                    <?php
                        }
                    ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <?php } ?>
    <div class="save-container">
        <button class="button save-button">Save</button>
        <button class="button button-primary save-and-close-button">Save and close</button>
        <button class="button close-button">Close</button>
    </div>
</div>
