Example #1
0
function wds_filemanager_ajax()
{
    if (function_exists('current_user_can')) {
        if (!current_user_can('manage_options')) {
            die('Access Denied');
        }
    } else {
        die('Access Denied');
    }
    global $wpdb;
    require_once WD_S_DIR . '/framework/WDW_S_Library.php';
    $page = WDW_S_Library::get('action');
    if ($page != '' && ($page == 'addImage' || $page == 'addMusic')) {
        require_once WD_S_DIR . '/filemanager/controller.php';
        $controller_class = 'FilemanagerController';
        $controller = new $controller_class();
        $controller->execute();
    }
}
 public function unpublish_all()
 {
     global $wpdb;
     $flag = FALSE;
     if (isset($_POST['check_all_items'])) {
         $wpdb->query('UPDATE ' . $wpdb->prefix . 'wdsslider SET published=0');
         $flag = TRUE;
     } else {
         $sliders_ids_col = $wpdb->get_col('SELECT id FROM ' . $wpdb->prefix . 'wdsslider');
         foreach ($sliders_ids_col as $slider_id) {
             if (isset($_POST['check_' . $slider_id])) {
                 $flag = TRUE;
                 $wpdb->update($wpdb->prefix . 'wdsslider', array('published' => 0), array('id' => $slider_id));
             }
         }
     }
     if ($flag) {
         echo WDW_S_Library::message('Items Succesfully Unpublished.', 'updated');
     } else {
         echo WDW_S_Library::message('You must select at least one item.', 'error');
     }
     $this->display();
 }
Example #3
0
    public function edit($id, $reset = FALSE)
    {
        $row = $this->model->get_row_data($id, $reset);
        $slides_row = $this->model->get_slides_row_data($id);
        $slide_ids_string = '';
        $sub_tab_type = WDW_S_Library::get('sub_tab', '');
        $page_title = $id != 0 ? 'Edit slider ' . $row->name : 'Create new slider';
        $aligns = array('left' => 'Left', 'center' => 'Center', 'right' => 'Right');
        $border_styles = array('none' => 'None', 'solid' => 'Solid', 'dotted' => 'Dotted', 'dashed' => 'Dashed', 'double' => 'Double', 'groove' => 'Groove', 'ridge' => 'Ridge', 'inset' => 'Inset', 'outset' => 'Outset');
        $button_styles = array('fa-chevron' => 'Chevron', 'fa-angle' => 'Angle', 'fa-angle-double' => 'Double');
        $bull_styles = array('fa-circle-o' => 'Circle O', 'fa-circle' => 'Circle', 'fa-minus' => 'Minus', 'fa-square-o' => 'Square O', 'fa-square' => 'Square');
        $font_families = array('arial' => 'Arial', 'lucida grande' => 'Lucida grande', 'segoe ui' => 'Segoe ui', 'tahoma' => 'Tahoma', 'trebuchet ms' => 'Trebuchet ms', 'verdana' => 'Verdana', 'cursive' => 'Cursive', 'fantasy' => 'Fantasy', 'monospace' => 'Monospace', 'serif' => 'Serif');
        $font_weights = array('lighter' => 'Lighter', 'normal' => 'Normal', 'bold' => 'Bold');
        $social_buttons = array('facebook' => 'Facebook', 'google-plus' => 'Google+', 'twitter' => 'Twitter', 'pinterest' => 'Pinterest', 'tumblr' => 'Tumblr');
        $free_effects = array('none', 'fade', 'sliceH', 'fan', 'scaleIn');
        $effects = array('none' => 'None', 'fade' => 'Fade', 'sliceH' => 'Slice Horizontal', 'fan' => 'Fan', 'scaleIn' => 'Scale In', 'zoomFade' => 'Zoom Fade', 'parallelSlideH' => 'Parallel Slide Horizontal', 'parallelSlideV' => 'Parallel Slide Vertical', 'slic3DH' => 'Slice 3D Horizontal', 'slic3DV' => 'Slice 3D Vertical', 'slicR3DH' => 'Slice 3D Horizontal Random', 'slicR3DV' => 'Slice 3D Vertical Random', 'blindR' => 'Blind', 'tilesR' => 'Tiles', 'blockScaleR' => 'Block Scale Random', 'cubeH' => 'Cube Horizontal', 'cubeV' => 'Cube Vertical', 'cubeR' => 'Cube Random', 'sliceV' => 'Slice Vertical', 'slideH' => 'Slide Horizontal', 'slideV' => 'Slide Vertical', 'scaleOut' => 'Scale Out', 'blockScale' => 'Block Scale', 'kaleidoscope' => 'Kaleidoscope', 'blindH' => 'Blind Horizontal', 'blindV' => 'Blind Vertical', 'random' => 'Random', '3Drandom' => '3D Random');
        $free_layer_effects = array('none', 'bounce', 'tada', 'bounceInDown', 'bounceOutUp', 'fadeInLeft', 'fadeOutRight');
        $layer_effects_in = array('none' => 'None', 'bounce' => 'Bounce', 'tada' => 'Tada', 'bounceInDown' => 'BounceInDown', 'fadeInLeft' => 'FadeInLeft', 'flash' => 'Flash', 'pulse' => 'Pulse', 'rubberBand' => 'RubberBand', 'shake' => 'Shake', 'swing' => 'Swing', 'wobble' => 'Wobble', 'hinge' => 'Hinge', 'lightSpeedIn' => 'LightSpeedIn', 'rollIn' => 'RollIn', 'bounceIn' => 'BounceIn', 'bounceInLeft' => 'BounceInLeft', 'bounceInRight' => 'BounceInRight', 'bounceInUp' => 'BounceInUp', 'fadeIn' => 'FadeIn', 'fadeInDown' => 'FadeInDown', 'fadeInDownBig' => 'FadeInDownBig', 'fadeInLeftBig' => 'FadeInLeftBig', 'fadeInRight' => 'FadeInRight', 'fadeInRightBig' => 'FadeInRightBig', 'fadeInUp' => 'FadeInUp', 'fadeInUpBig' => 'FadeInUpBig', 'flip' => 'Flip', 'flipInX' => 'FlipInX', 'flipInY' => 'FlipInY', 'rotateIn' => 'RotateIn', 'rotateInDownLeft' => 'RotateInDownLeft', 'rotateInDownRight' => 'RotateInDownRight', 'rotateInUpLeft' => 'RotateInUpLeft', 'rotateInUpRight' => 'RotateInUpRight', 'zoomIn' => 'ZoomIn', 'zoomInDown' => 'ZoomInDown', 'zoomInLeft' => 'ZoomInLeft', 'zoomInRight' => 'ZoomInRight', 'zoomInUp' => 'ZoomInUp');
        $layer_effects_out = array('none' => 'None', 'bounce' => 'Bounce', 'tada' => 'Tada', 'bounceOutUp' => 'BounceOutUp', 'fadeOutRight' => 'FadeOutRight', 'flash' => 'Flash', 'pulse' => 'Pulse', 'rubberBand' => 'RubberBand', 'shake' => 'Shake', 'swing' => 'Swing', 'wobble' => 'Wobble', 'hinge' => 'Hinge', 'lightSpeedOut' => 'LightSpeedOut', 'rollOut' => 'RollOut', 'bounceOut' => 'BounceOut', 'bounceOutDown' => 'BounceOutDown', 'bounceOutLeft' => 'BounceOutLeft', 'bounceOutRight' => 'BounceOutRight', 'fadeOut' => 'FadeOut', 'fadeOutDown' => 'FadeOutDown', 'fadeOutDownBig' => 'FadeOutDownBig', 'fadeOutLeft' => 'FadeOutLeft', 'fadeOutLeftBig' => 'FadeOutLeftBig', 'fadeOutRightBig' => 'FadeOutRightBig', 'fadeOutUp' => 'FadeOutUp', 'fadeOutUpBig' => 'FadeOutUpBig', 'flip' => 'Flip', 'flipOutX' => 'FlipOutX', 'flipOutY' => 'FlipOutY', 'rotateOut' => 'RotateOut', 'rotateOutDownLeft' => 'RotateOutDownLeft', 'rotateOutDownRight' => 'RotateOutDownRight', 'rotateOutUpLeft' => 'RotateOutUpLeft', 'rotateOutUpRight' => 'RotateOutUpRight', 'zoomOut' => 'ZoomOut', 'zoomOutDown' => 'ZoomOutDown', 'zoomOutLeft' => 'ZoomOutLeft', 'zoomOutRight' => 'ZoomOutRight', 'zoomOutUp' => 'ZoomOutUp');
        $built_in_watermark_fonts = array();
        foreach (scandir(path_join(WD_S_DIR, 'fonts')) as $filename) {
            if (strpos($filename, '.') === 0) {
                continue;
            } else {
                $built_in_watermark_fonts[] = $filename;
            }
        }
        if (get_option("wds_theme_version")) {
            $fv = TRUE;
            $fv_class = 'spider_free_version_label';
            $fv_disabled = 'disabled="disabled"';
            $fv_message = '<tr><td colspan="2"><div class="error" style="padding: 5px; font-size: 14px; color: #000000 !important;">Some options are disabled in free version.</div></td></tr>';
            $fv_title = ' title="This option is disabled in free version."';
        } else {
            $fv = FALSE;
            $fv_class = '';
            $fv_disabled = '';
            $fv_message = '';
            $fv_title = '';
        }
        ?>
    <div class="spider_message_cont"></div>
    <div class="spider_load">
      <div class="spider_load_cont"></div>
      <div class="spider_load_icon"><img class="spider_ajax_loading" src="<?php 
        echo WD_S_URL . '/images/ajax_loader.png';
        ?>
"></div>
    </div>
    <div style="clear: both; float: left; width: 99%;">
      <div style="float: left; font-size: 14px; font-weight: bold;">
        This section allows you to add/edit slider.
        <a style="color: blue; text-decoration: none;" target="_blank" href="https://web-dorado.com/wordpress-slider-wd-guide-step-2.html">Read More in User Manual</a>
      </div>
      <div style="float: right; text-align: right;">
        <a style="text-decoration: none;" target="_blank" href="https://web-dorado.com/files/fromslider.php">
          <img width="215" border="0" alt="web-dorado.com" src="<?php 
        echo WD_S_URL . '/images/wd_logo.png';
        ?>
" />
        </a>
      </div>
    </div>
    <form class="wrap" method="post" id="sliders_form" action="admin.php?page=sliders_wds" style="float: left; width: 99%;">
      <?php 
        wp_nonce_field('nonce_wd', 'nonce_wd');
        ?>
      <span class="slider-icon"></span>
      <h2><?php 
        echo $page_title;
        ?>
</h2>
      <div class="wds_buttons">
        <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                   spider_set_input_value('task', 'save');
                                                                   spider_ajax_save('sliders_form', event);" value="Save" />
        <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                   spider_set_input_value('task', 'apply');
                                                                   spider_ajax_save('sliders_form', event);" value="Apply" />
        <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                               spider_set_input_value('task', 'duplicate');
                                                               spider_set_input_value('sub_tab', '');
                                                               spider_ajax_save('sliders_form', event);" value="Save as Copy" />
        <input type="button" class="button-primary" value="Preview"
               onclick="if (wds_check_required('name', 'Name')) { return false;}; spider_set_input_value('task', 'preview'); spider_ajax_save('sliders_form', event); return false;" />
	<input type="button" class="button-secondary wds_free_button" onclick="alert('This functionality is disabled in free version.')" value="Export" />
	<input class="button-secondary" type="submit" onclick="spider_set_input_value('task', 'cancel')" value="Cancel" />
      </div>
      <div class="wds_tabs">
        <a href="#"><span tab_type="settings" onclick="wds_change_tab(this, 'wds_settings_box')" class="wds_tab_label">Settings</span></a>
        <a href="#"><span tab_type="slides" onclick="wds_change_tab(this, 'wds_slides_box')" class="wds_tab_label">Slides</span></a>
        <div class="wds_clear"></div>
      </div>
      <div>
        <div class="wds_reset_button">
          <input class="button-primary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                   spider_set_input_value('task', 'reset');
                                                                   spider_ajax_save('sliders_form', event);" value="Reset Settings" />
        </div>
        <!--------------Settings tab----------->
        <div class="wds_box wds_settings_box">
          <div class="wds_nav_tabs">
            <ul>
              <li tab_type="global" onclick="wds_change_nav(this, 'wds_nav_global_box')">
                <a href="#">Global</a>
              </li>
              <li tab_type="carousel" onclick="wds_change_nav(this, 'wds_nav_carousel_box')">
                <a href="#">Carousel</a>
              </li>
              <li tab_type="navigation" onclick="wds_change_nav(this, 'wds_nav_navigation_box')" >
                <a href="#">Navigation</a>
              </li>
              <li tab_type="bullets" onclick="wds_change_nav(this, 'wds_nav_bullets_box')" >
                <a href="#">Bullets</a>
              </li>
              <li tab_type="filmstrip" onclick="wds_change_nav(this, 'wds_nav_filmstrip_box')" >
                <a href="#">Filmstrip</a>
              </li>
              <li tab_type="timer_bar" onclick="wds_change_nav(this, 'wds_nav_timer_bar_box')" >
                <a href="#">Timer bar</a>
              </li>
              <li tab_type="watermark" onclick="wds_change_nav(this, 'wds_nav_watermark_box')" >
                <a href="#">Watermark</a>
              </li>
              <li tab_type="css" onclick="wds_change_nav(this, 'wds_nav_css_box')" >
                <a href="#">CSS</a>
              </li>
            </ul>
          </div>
          <div>
            <div class="wds_nav_box wds_nav_global_box">
              <table>
                <tbody>
                  <tr>
                    <td class="spider_label"><label>Dimensions: </label></td>
                    <td>
                      <input type="text" name="width" id="width" value="<?php 
        echo $row->width;
        ?>
" class="spider_int_input" onchange="wds_whr('width')" onkeypress="return spider_check_isnum(event)" /> x 
                      <input type="text" name="height" id="height" value="<?php 
        echo $row->height;
        ?>
" class="spider_int_input" onchange="wds_whr('height')" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description">Maximum width and height for slider.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Full width: </label></td>
                    <td>
                      <input type="radio" id="full_width1" name="full_width" <?php 
        echo $row->full_width ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="full_width1">Yes</label>
                      <input type="radio" id="full_width0" name="full_width" <?php 
        echo $row->full_width ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="full_width0">No</label>
                      <input type="text" name="ratio" id="ratio" value="" class="spider_int_input" onchange="wds_whr('ratio')" onkeypress="return spider_check_isnum(event)" /><label for="ratio">Ratio</label>
                      <div class="spider_description">The image will stretch to the page width, taking the height based on dimensions ratio.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Background fit: </label></td>
                    <td>
                      <input type="radio" name="bg_fit" id="bg_fit_cover" value="cover" <?php 
        if ($row->bg_fit == 'cover') {
            echo 'checked="checked"';
        }
        ?>
 onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundSize: 'cover'})" /><label for="bg_fit_cover">Cover</label>
                      <input type="radio" name="bg_fit" id="bg_fit_fill" value="100% 100%" <?php 
        if ($row->bg_fit == '100% 100%') {
            echo 'checked="checked"';
        }
        ?>
 onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundSize: '100% 100%'})" /><label for="bg_fit_fill">Fill</label>
                      <input type="radio" name="bg_fit" id="bg_fit_contain" value="contain" <?php 
        if ($row->bg_fit == 'contain') {
            echo 'checked="checked"';
        }
        ?>
 onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundSize: 'contain'})" /><label for="bg_fit_contain">Contain</label>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="align">Align: </label></td>
                    <td>
                      <select name="align" id="align">
                        <?php 
        foreach ($aligns as $key => $align) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->align == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $align;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <div class="spider_description">Set the alignment of the slider.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label for="effect">Effect:</label>
                    </td>
                    <td>
                      <select name="effect" id="effect">
                        <?php 
        foreach ($effects as $key => $effect) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo !in_array($key, $free_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
            ?>
 <?php 
            if ($row->effect == $key) {
                echo 'selected="selected"';
            }
            ?>
><?php 
            echo $effect;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="effect_duration">Еffect duration: </label></td>
                    <td>
                      <input type="text" id="effect_duration" name="effect_duration" value="<?php 
        echo $row->effect_duration;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> ms
                      <div class="spider_description">Define the time for the effect.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label spider_free_version_label"><label>Parallax Effect: </label></td>
                    <td>
                      <input disabled="disabled" type="radio" id="parallax_effect1" name="parallax_effect" <?php 
        echo $row->parallax_effect ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="parallax_effect1">Yes</label>
                      <input disabled="disabled" type="radio" id="parallax_effect0" name="parallax_effect" <?php 
        echo $row->parallax_effect ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="parallax_effect0">No</label>
                      <div class="spider_description">The direction of the movement, as well as the layer moving pace depend on the z-index value.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Autoplay: </label></td>
                    <td>
                      <input type="radio" id="autoplay1" name="autoplay" <?php 
        echo $row->autoplay ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="autoplay1">Yes</label>
                      <input type="radio" id="autoplay0" name="autoplay" <?php 
        echo $row->autoplay ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="autoplay0">No</label>
                      <div class="spider_description">Choose whether to autoplay the sliders or not.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="time_intervval">Time Interval: </label></td>
                    <td>
                      <input type="text" id="time_intervval" name="time_intervval" value="<?php 
        echo $row->time_intervval;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> sec.
                      <div class="spider_description">Set the time interval for the change of the sliders when autoplay is on.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Stop on hover: </label></td>
                    <td>
                      <input type="radio" id="stop_animation1" name="stop_animation" <?php 
        echo $row->stop_animation ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="stop_animation1">Yes</label>
                      <input type="radio" id="stop_animation0" name="stop_animation" <?php 
        echo $row->stop_animation ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="stop_animation0">No</label>
                      <div class="spider_description">The option works when autoplay is on.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Shuffle: </label></td>
                    <td>
                      <input type="radio" id="shuffle1" name="shuffle" <?php 
        echo $row->shuffle ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="shuffle1">Yes</label>
                      <input type="radio" id="shuffle0" name="shuffle" <?php 
        echo $row->shuffle ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="shuffle0">No</label>
                      <div class="spider_description">Choose whether to have the slides change in a random manner or to keep the original sequence.</div>
                    </td>
                  </tr> 
                  <tr>
                    <td class="spider_label"><label for="start_slide_num">Start with slide: </label></td>
                    <td>
                      <input type="text" name="start_slide_num" id="start_slide_num" value="<?php 
        echo $row->start_slide_num;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" />
                      <div class="spider_description">The slider will start with the specified slide. You can use the value 0 for random.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Music: </label></td>
                    <td>
                      <input type="radio" id="music1" name="music" <?php 
        echo $row->music ? 'checked="checked"' : '';
        ?>
 value="1" onClick="bwg_enable_disable('', 'tr_music_url', 'music1')" /><label for="music1">Yes</label>
                      <input type="radio" id="music0" name="music" <?php 
        echo $row->music ? '' : 'checked="checked"';
        ?>
 value="0" onClick="bwg_enable_disable('none', 'tr_music_url', 'music0')" /><label for="music0">No</label>
                      <div class="spider_description">Choose whether to have music/audio track playback with the slider or not.</div>
                    </td>
                  </tr>
                  <tr id="tr_music_url">
                    <td class="spider_label_options">
                      <label for="music_url">Music url: </label>
                    </td>
                    <td>
                      <input type="text" id="music_url" name="music_url" size="39" value="<?php 
        echo $row->music_url;
        ?>
" style="display:inline-block;" />
                      <input id="add_music_url" class="button-primary" type="button" onclick="spider_media_uploader('music', event, false); return false;" value="Add music" />
                      <div class="spider_description">Only .aac,.m4a,.f4a,.mp3,.ogg,.oga formats are supported.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Smart Load: </label></td>
                    <td>
                      <input type="radio" id="preload_images1" name="preload_images" <?php 
        echo $row->preload_images ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="preload_images1">Yes</label>
                      <input type="radio" id="preload_images0" name="preload_images" <?php 
        echo $row->preload_images ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="preload_images0">No</label>
                      <div class="spider_description">Choose to have faster load for the first few images and process the rest meanwhile.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="background_color">Background color:</label></td>
                    <td>
                      <input type="text" name="background_color" id="background_color" value="<?php 
        echo $row->background_color;
        ?>
" class="color" onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundColor: wds_hex_rgba(jQuery(this).val(), 100 - jQuery('#background_transparent').val())})" />
                      <input id="background_transparent" name="background_transparent" class="spider_int_input" type="text" onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundColor: wds_hex_rgba(jQuery('#background_color').val(), 100 - jQuery(this).val())})" onkeypress="return spider_check_isnum(event)" value="<?php 
        echo $row->background_transparent;
        ?>
" /> %
                      <div class="spider_description">Transparency value must be between 0 to 100.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="glb_border_width">Border: </label></td>
                    <td>
                      <input type="text" name="glb_border_width" id="glb_border_width" value="<?php 
        echo $row->glb_border_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px 
                      <select name="glb_border_style" id="glb_border_style" >
                        <?php 
        foreach ($border_styles as $key => $border_style) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->glb_border_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $border_style;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <input type="text" name="glb_border_color" id="glb_border_color" value="<?php 
        echo $row->glb_border_color;
        ?>
" class="color" />
                      <div class="spider_description">Set the border width, type and the color.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="glb_border_radius">Border radius: </label></td>
                    <td>
                      <input type="text" name="glb_border_radius" id="glb_border_radius" value="<?php 
        echo $row->glb_border_radius;
        ?>
" class="spider_char_input" />
                      <div class="spider_description">Use CSS type values.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="glb_margin">Margin: </label></td>
                    <td>
                      <input type="text" name="glb_margin" id="glb_margin" value="<?php 
        echo $row->glb_margin;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description">Set a margin for the slider.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="glb_box_shadow">Shadow: </label></td>
                    <td>
                      <input type="text" name="glb_box_shadow" id="glb_box_shadow" value="<?php 
        echo $row->glb_box_shadow;
        ?>
" class="spider_box_input" />
                      <div class="spider_description">Use CSS type values (e.g. 10px 10px 5px #888888).</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Right click protection: </label>
                    </td>
                    <td>
                      <input type="radio" name="image_right_click" id="image_right_click_1" value="1" <?php 
        if ($row->image_right_click) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="image_right_click_1">Yes</label>
                      <input type="radio" name="image_right_click" id="image_right_click_0" value="0" <?php 
        if (!$row->image_right_click) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="image_right_click_0">No</label>
                      <div class="spider_description">Disable image right click possibility.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Layer out on next: </label>
                    </td>
                    <td>
                      <input type="radio" name="layer_out_next" id="layer_out_next_1" value="1" <?php 
        if ($row->layer_out_next) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="layer_out_next_1">Yes</label>
                      <input type="radio" name="layer_out_next" id="layer_out_next_0" value="0" <?php 
        if (!$row->layer_out_next) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="layer_out_next_0">No</label>
                      <div class="spider_description">Choose whether to have the layer effect out regardless of the timing between the hit to the next slider or skip the effect out and get to the next image.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Turn SliderWD Media Upload: </label></td>
                    <td>
                      <input type="radio" id="spider_uploader1" name="spider_uploader" <?php 
        echo $row->spider_uploader ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="spider_uploader1">Yes</label>
                      <input type="radio" id="spider_uploader0" name="spider_uploader" <?php 
        echo $row->spider_uploader ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="spider_uploader0">No</label>
                      <div class="spider_description">Choose the option to use the custom media upload instead of the WordPress default for adding images.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Published: </label></td>
                    <td>
                      <input type="radio" id="published1" name="published" <?php 
        echo $row->published ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="published1">Yes</label>
                      <input type="radio" id="published0" name="published" <?php 
        echo $row->published ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="published0">No</label>
                      <div class="spider_description">Choose whether to publish the mentioned slider or not.</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_carousel_box spider_free_version_label" title="This functionality is disabled in free version.">
              <table>
                <tbody>
                  <tr>
                    <td colspan="2">
                      <div class="error" style="padding: 5px; font-size: 14px; color: #000000 !important;">Carousel is disabled in free version.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Carousel: </label></td>
                    <td>
                      <input disabled="disabled" type="radio" id="carousel1" name="carousel" <?php 
        echo $row->carousel ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="carousel1">Yes</label>
                      <input disabled="disabled" type="radio" id="carousel0" name="carousel" <?php 
        echo $row->carousel ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="carousel0">No</label>
                      <div class="spider_description">If you activate this feature the effects you had chosen in Global settings for your slider will not play.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="carousel_image_counts">Number of images for carousel: </label></td>
                    <td>
                      <input disabled="disabled" type="text" id="carousel_image_counts" name="carousel_image_counts" value="<?php 
        echo $row->carousel_image_counts;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" />
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="carousel_image_parameters">Carousel image ratio: </label></td>
                    <td>
                      <input disabled="disabled" type="text" id="carousel_image_parameters" name="carousel_image_parameters" value="<?php 
        echo $row->carousel_image_parameters;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" />
                      <div class="spider_description">The value must be between 0 and 1.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Container fit: </label></td>
                    <td>
                      <input disabled="disabled" type="radio" id="carousel_fit_containerWidth1" name="carousel_fit_containerWidth" <?php 
        echo $row->carousel_fit_containerWidth ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="carousel_fit_containerWidth1">Yes</label>
                      <input disabled="disabled" type="radio" id="carousel_fit_containerWidth0" name="carousel_fit_containerWidth" <?php 
        echo $row->carousel_fit_containerWidth ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="carousel_fit_containerWidth0">No</label>
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="carousel_width">Fixed width: </label></td>
                    <td>
                      <input disabled="disabled" type="text" id="carousel_width" name="carousel_width" value="<?php 
        echo $row->carousel_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_navigation_box">
              <table>
                <tbody>
                  <tr>
                    <td class="spider_label_options">
                      <label>Next / Previous buttons: </label>
                    </td>
                    <td>
                      <input type="radio" name="prev_next_butt" id="prev_next_butt_1" value="1" <?php 
        if ($row->prev_next_butt) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="prev_next_butt_1">Yes</label>
                      <input type="radio" name="prev_next_butt" id="prev_next_butt_0" value="0" <?php 
        if (!$row->prev_next_butt) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="prev_next_butt_0">No</label>
                      <div class="spider_description">Choose whether to display Previous and Next buttons or not.</div>
                    </td>
                  </tr>
		  <tr>
                    <td class="spider_label_options">
                      <label>Mouse swipe navigation: </label>
                    </td>
                    <td>
                      <input type="radio" name="mouse_swipe_nav" id="mouse_swipe_nav_1" value="1" <?php 
        if ($row->mouse_swipe_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="mouse_swipe_nav_1">Yes</label>
                      <input type="radio" name="mouse_swipe_nav" id="mouse_swipe_nav_0" value="0" <?php 
        if (!$row->mouse_swipe_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="mouse_swipe_nav_0">No</label>
                      <div class="spider_description">Choose whether to display Previous and Next buttons or not.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Show Navigation buttons: </label>
                    </td>
                    <td>
                      <input type="radio" name="navigation" id="navigation_1" value="hover" <?php 
        if ($row->navigation == 'hover') {
            echo 'checked="checked"';
        }
        ?>
 /><label for="navigation_1">On hover</label>
                      <input type="radio" name="navigation" id="navigation_0" value="always" <?php 
        if ($row->navigation == 'always') {
            echo 'checked="checked"';
        }
        ?>
 /><label for="navigation_0">Always</label>
                      <div class="spider_description">Select between the option of always displaying the navigation buttons or only when hovered.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Image for Next / Previous buttons: </label>
                    </td>
                    <td>
                      <input type="radio" name="rl_butt_img_or_not" id="rl_butt_img_or_not_our" value="our" <?php 
        if ($row->rl_butt_img_or_not == 'our') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_next_prev_butt('our')" /><label for="rl_butt_img_or_not_our">Default</label>
                      <input type="radio" name="rl_butt_img_or_not" id="rl_butt_img_or_not_cust" value="custom" <?php 
        if ($row->rl_butt_img_or_not == 'custom') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_next_prev_butt('custom')" /><label for="rl_butt_img_or_not_cust">Custom</label>
                      <input type="radio" name="rl_butt_img_or_not" id="rl_butt_img_or_not_style" value="style" <?php 
        if ($row->rl_butt_img_or_not == 'style') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_next_prev_butt('style')" /><label for="rl_butt_img_or_not_style">Styled</label>
                      <input type="hidden" id="right_butt_url" name="right_butt_url" value="<?php 
        echo $row->right_butt_url;
        ?>
" />
                      <input type="hidden" id="right_butt_hov_url" name="right_butt_hov_url" value="<?php 
        echo $row->right_butt_hov_url;
        ?>
" />
                      <input type="hidden" id="left_butt_url" name="left_butt_url" value="<?php 
        echo $row->left_butt_url;
        ?>
" />
                      <input type="hidden" id="left_butt_hov_url" name="left_butt_hov_url" value="<?php 
        echo $row->left_butt_hov_url;
        ?>
" />
                      <div class="spider_description">Choose whether to use default navigation buttons or to upload custom ones.</div>
                    </td>
                  </tr>	
                </tbody>
                <tbody class="<?php 
        echo $fv_class;
        ?>
"<?php 
        echo $fv_title;
        ?>
>
                  <?php 
        echo $fv_message;
        ?>
                  <tr id="right_left_butt_style">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="rl_butt_style">Next / Previous buttons style: </label></td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <select name="rl_butt_style" id="rl_butt_style" onchange="change_rl_butt_style(jQuery(this).val())">
                          <?php 
        foreach ($button_styles as $key => $button_style) {
            ?>
                            <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->rl_butt_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $button_style;
            ?>
</option>
                            <?php 
        }
        ?>
                          </select>
                        </div>
                        <div style="display: table-cell; vertical-align: middle; background-color: rgba(229, 229, 229, 0.62); text-align: center;">
                          <i id="wds_left_style" class="fa <?php 
        echo $row->rl_butt_style;
        ?>
-left" style="color: #<?php 
        echo $row->butts_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                          <i id="wds_right_style" class="fa <?php 
        echo $row->rl_butt_style;
        ?>
-right" style="color: #<?php 
        echo $row->butts_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                        </div>
                      </div>
                      <div class="spider_description">Choose the style of the button you prefer to have as navigation buttons.</div>
                    </td>
                  </tr>				  
                  <tr id="right_butt_upl">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label>Upload buttons images: </label>
                    </td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Previous Button" onclick="alert('This functionality is disabled in free version.')" />
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Previous Button Hover" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Next Button" onclick="alert('This functionality is disabled in free version.')" />
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Next Button Hover" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                          <img id="left_butt_img" src="<?php 
        echo $row->left_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="right_butt_img" src="<?php 
        echo $row->right_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="left_butt_hov_img" src="<?php 
        echo $row->left_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="right_butt_hov_img" src="<?php 
        echo $row->right_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                        </div>
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="wds_change_custom_src()" value="Reverse" />
                        </div>
                      </div>
                    </td>
                  </tr>
                  <script>				  
                    var wds_rl_butt_type = [];
                    var rl_butt_dir = '<?php 
        echo WD_S_URL . '/images/arrow/';
        ?>
';
                    var type_cur_fold = '1';
                    <?php 
        $folder_names = scandir(WD_S_DIR . '/images/arrow');
        $cur_fold_name = '';
        $cur_type_key = '';
        $cur_color_key = '';
        $cur_sub_fold_names = array();
        array_splice($folder_names, 0, 2);
        $flag = FALSE;
        foreach ($folder_names as $type_key => $folder_name) {
            if (is_dir(WD_S_DIR . '/images/arrow/' . $folder_name)) {
                ?>
                        wds_rl_butt_type["<?php 
                echo $type_key;
                ?>
"] = [];
                        wds_rl_butt_type["<?php 
                echo $type_key;
                ?>
"]["type_name"] = "<?php 
                echo $folder_name;
                ?>
";
                        <?php 
                if ($row->left_butt_url != '') {
                    /* Getting current button's type folder and color folder.*/
                    $check_cur_fold = explode('/', $row->left_butt_url);
                    if (in_array($folder_name, $check_cur_fold)) {
                        $flag = TRUE;
                        $cur_fold_name = $folder_name;
                        $cur_type_key = $type_key;
                        $cur_sub_fold_names = scandir(WD_S_DIR . '/images/arrow/' . $cur_fold_name);
                        array_splice($cur_sub_fold_names, 0, 2);
                        ?>
                        type_cur_fold = '<?php 
                        echo $cur_type_key;
                        ?>
';
                            <?php 
                    }
                }
                $sub_folder_names = scandir(WD_S_DIR . '/images/arrow/' . $folder_name);
                array_splice($sub_folder_names, 0, 2);
                foreach ($sub_folder_names as $color_key => $sub_folder_name) {
                    if (is_dir(WD_S_DIR . '/images/arrow/' . $folder_name . '/' . $sub_folder_name)) {
                        if ($cur_fold_name == $folder_name) {
                            /* Getting current button's color key.*/
                            if (in_array($sub_folder_name, $check_cur_fold)) {
                                $cur_color_key = $color_key;
                            }
                        }
                        ?>
                            wds_rl_butt_type["<?php 
                        echo $type_key;
                        ?>
"]["<?php 
                        echo $color_key;
                        ?>
"] = "<?php 
                        echo $sub_folder_name;
                        ?>
";
                            <?php 
                    }
                }
            } else {
                ?>
                        console.log('<?php 
                echo $folder_name . " is not a directory.";
                ?>
');
                        <?php 
            }
        }
        ?>
 
                  </script>
                  <tr id="right_left_butt_select">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label for="right_butt_url">Choose buttons: </label>
                    </td>
                    <td style="display: block;">
                      <div style="display: table; margin-bottom: 14px;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <div style="display: block; width: 180px;">
                            <div class="spider_choose_option" onclick="wds_choose_option(this)"> 
                              <div  class="spider_option_main_title">Choose group</div>
                              <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color: #1E8CBE"></i></div>
                            </div>
                            <div class="spider_options_cont">
                            <?php 
        foreach ($folder_names as $type_key => $folder_name) {
            ?>
 							  							  
                              <div class="spider_option_cont wds_rl_butt_groups" value="<?php 
            echo $type_key;
            ?>
" <?php 
            echo $cur_type_key == $type_key ? 'selected="selected" style="background-color: #3399FF;"' : '';
            ?>
 onclick="change_rl_butt_type(this)"> 
                                <div  class="spider_option_cont_title">
                                  <?php 
            echo 'Group-' . ++$type_key;
            ?>
                                </div>
                                <div class="spider_option_cont_img">
                                  <img class="src_top_left" style="display: inline-block; width: 14px; height: 14px;" />
                                  <img class="src_top_right" style="display: inline-block; width: 14px; height: 14px;" />
                                  <img class="src_bottom_left" style="display: inline-block; width: 14px; height: 14px;" />
                                  <img class="src_bottom_right" style="display: inline-block; width: 14px; height: 14px;" /> 
                                </div>
                              </div>
                              <?php 
        }
        if (!$flag) {
            /* Folder doesn't exist.*/
            ?>
                              <div class="spider_option_cont" value="0" selected="selected" disabled="disabled">Custom</div>
                              <?php 
        }
        ?>
                            </div>
                          </div>							
                        </div>
                        <div style="display:table-cell;vertical-align: middle;">
                          <div style="display: block; width: 180px; margin-left: 12px;">
                            <div class="spider_choose_option" onclick="alert('This functionality is disabled in free version.')">
                              <div  class="spider_option_main_title">Choose color</div>
                              <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color:#1E8CBE"></i></div>
                            </div>
                          </div>
                        </div>
                        <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;">
                          <div style=" display: block; margin-left: 12px; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                          <img id="rl_butt_img_l" src="<?php 
        echo $row->left_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="rl_butt_img_r" src="<?php 
        echo $row->right_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="rl_butt_hov_img_l" src="<?php 
        echo $row->left_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="rl_butt_hov_img_r" src="<?php 
        echo $row->right_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          </div>
                        </div>
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="change_src()" value="Reverse" />
                        </div>
                      </div>
                      <div class="spider_description">Choose the type and color for navigation button images. The option is designed for limited preview (colors not included) purposes and can't be saved.</div>
                    </td>
                  </tr>
                  <tr id="right_left_butt_size">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="rl_butt_size">Next / Previous buttons size: </label></td>
                    <td>
                      <input type="text" name="rl_butt_size" id="rl_butt_size" value="<?php 
        echo $row->rl_butt_size;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <div class="spider_description">Set the size for the next / previous buttons.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Play / Pause button: </label>
                    </td>
                    <td>
                      <input type="radio" name="play_paus_butt" id="play_paus_butt_1" value="1" <?php 
        if ($row->play_paus_butt) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="play_paus_butt_1">Yes</label>
                      <input type="radio" name="play_paus_butt" id="play_paus_butt_0" value="0" <?php 
        if (!$row->play_paus_butt) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="play_paus_butt_0">No</label>
                      <div class="spider_description">Choose whether to display Play and Pause buttons or not.</div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr>
                    <td class="spider_label_options">
                      <label>Image for Play / Pause buttons: </label>
                    </td>
                    <td>
                      <input type="radio" name="play_paus_butt_img_or_not" id="play_pause_butt_img_or_not_our" value="our" <?php 
        if ($row->play_paus_butt_img_or_not == 'our') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_play_pause_butt('our')" /><label for="play_pause_butt_img_or_not_our">Default</label>
                      <input type="radio" name="play_paus_butt_img_or_not" id="play_pause_butt_img_or_not_cust" value="custom" <?php 
        if ($row->play_paus_butt_img_or_not == 'custom') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_play_pause_butt('custom')" /><label for="play_pause_butt_img_or_not_cust">Custom</label>
                      <input type="radio" name="play_paus_butt_img_or_not" id="play_pause_butt_img_or_not_select" value="style" <?php 
        if ($row->play_paus_butt_img_or_not == 'style') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_play_pause_butt('style')" /><label for="play_pause_butt_img_or_not_select">Styled</label>
                      <input type="hidden" id="play_butt_url" name="play_butt_url" value="<?php 
        echo $row->play_butt_url;
        ?>
" />
                      <input type="hidden" id="play_butt_hov_url" name="play_butt_hov_url" value="<?php 
        echo $row->play_butt_hov_url;
        ?>
" />
                      <input type="hidden" id="paus_butt_url" name="paus_butt_url" value="<?php 
        echo $row->paus_butt_url;
        ?>
" />
                      <input type="hidden" id="paus_butt_hov_url" name="paus_butt_hov_url" value="<?php 
        echo $row->paus_butt_hov_url;
        ?>
" />
                      <div class="spider_description">Choose whether to use default play/pause buttons or to upload custom ones.</div>
                    </td>
                  </tr>
                </tbody>
                <tbody class="<?php 
        echo $fv_class;
        ?>
"<?php 
        echo $fv_title;
        ?>
>
                  <tr id="play_pause_butt_style">
                    <td class="spider_label"><label for="pp_butt_style">Play / Pause buttons style: </label></td>
                    <td>
                      <div style="display: table-cell; vertical-align: middle; background-color: rgba(229, 229, 229, 0.62); text-align: center;">
                        <i id="wds_play_style" class="fa fa-play" style="color: #<?php 
        echo $row->butts_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                        <i id="wds_paus_style" class="fa fa-pause" style="color: #<?php 
        echo $row->butts_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                      </div>
                    </td>
                  </tr>
                  <tr id="play_pause_butt_cust">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label>Upload buttons images: </label>
                    </td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Play Button" onclick="alert('This functionality is disabled in free version.')" />
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Play Button Hover" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Pause Button" onclick="alert('This functionality is disabled in free version.')" />
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Pause Button Hover" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                          <img id="play_butt_img" src="<?php 
        echo $row->play_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="paus_butt_img" src="<?php 
        echo $row->paus_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="play_butt_hov_img" src="<?php 
        echo $row->play_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="paus_butt_hov_img" src="<?php 
        echo $row->paus_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                        </div>
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="wds_change_play_paus_custom_src()" value="Reverse" />
                        </div>
                      </div>
                    </td>
                  </tr>
                  <script>				  
                    var wds_pp_butt_type = [];
                    var pp_butt_dir = '<?php 
        echo WD_S_URL . '/images/button/';
        ?>
';
                    var pp_type_cur_fold = '1';
                    <?php 
        $folder_names = scandir(WD_S_DIR . '/images/button');
        $butt_cur_fold_name = '';
        $butt_cur_type_key = '';
        $butt_cur_color_key = '';
        $butt_cur_sub_fold_names = array();
        array_splice($folder_names, 0, 2);
        $flag = FALSE;
        foreach ($folder_names as $type_key => $folder_name) {
            if (is_dir(WD_S_DIR . '/images/button/' . $folder_name)) {
                ?>
                        wds_pp_butt_type["<?php 
                echo $type_key;
                ?>
"] = [];
                        wds_pp_butt_type["<?php 
                echo $type_key;
                ?>
"]["type_name"] = "<?php 
                echo $folder_name;
                ?>
";
                        <?php 
                if ($row->play_butt_url != '') {
                    /* Getting current button's type folder and color folder.*/
                    $check_butt_cur_fold = explode('/', $row->play_butt_url);
                    if (in_array($folder_name, $check_butt_cur_fold)) {
                        $flag = TRUE;
                        $butt_cur_fold_name = $folder_name;
                        $butt_cur_type_key = $type_key;
                        $butt_cur_sub_fold_names = scandir(WD_S_DIR . '/images/button/' . $butt_cur_fold_name);
                        array_splice($butt_cur_sub_fold_names, 0, 2);
                        ?>
                        pp_type_cur_fold = '<?php 
                        echo $butt_cur_type_key;
                        ?>
';
                            <?php 
                    }
                }
                $sub_folder_names = scandir(WD_S_DIR . '/images/button/' . $folder_name);
                array_splice($sub_folder_names, 0, 2);
                foreach ($sub_folder_names as $color_key => $sub_folder_name) {
                    if (is_dir(WD_S_DIR . '/images/button/' . $folder_name . '/' . $sub_folder_name)) {
                        if ($butt_cur_fold_name == $folder_name) {
                            /* Getting current button's color key.*/
                            if (in_array($sub_folder_name, $check_butt_cur_fold)) {
                                $butt_cur_color_key = $color_key;
                            }
                        }
                        ?>
                            wds_pp_butt_type["<?php 
                        echo $type_key;
                        ?>
"]["<?php 
                        echo $color_key;
                        ?>
"] = "<?php 
                        echo $sub_folder_name;
                        ?>
";
                            <?php 
                    }
                }
            } else {
                ?>
                        console.log('<?php 
                echo $folder_name . " is not a directory.";
                ?>
');
                        <?php 
            }
        }
        ?>
 
                  </script>
                  <tr id="play_pause_butt_select">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label for="right_butt_url">Choose buttons: </label>
                    </td>
                    <td style="display: block;">
                        <div style="display: table; margin-bottom: 14px;">
                          <div style="display: table-cell; vertical-align: middle;">
                            <div style="display: block; width: 180px;">
                              <div class="spider_choose_option" onclick="wds_choose_pp_option(this)"> 
                                <div class="spider_option_main_title">Choose group</div>
                                <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color: #1E8CBE"></i></div>
                              </div>
                              <div class="spider_pp_options_cont">
                              <?php 
        foreach ($folder_names as $type_key => $folder_name) {
            ?>
 							  							  
                                <div class="spider_option_cont wds_pp_butt_groups" value="<?php 
            echo $type_key;
            ?>
" <?php 
            echo $butt_cur_type_key == $type_key ? 'selected="selected" style="background-color: #3399FF;"' : '';
            ?>
 onclick="change_play_paus_butt_type(this)"> 
                                  <div  class="spider_option_cont_title">
                                    <?php 
            echo 'Group-' . ++$type_key;
            ?>
                                  </div>
                                  <div class="spider_option_cont_img">
                                    <img class="pp_src_top_left" style="display: inline-block; width: 14px; height: 14px;" />
                                    <img class="pp_src_top_right" style="display: inline-block; width: 14px; height: 14px;" />
                                    <img class="pp_src_bottom_left" style="display: inline-block; width: 14px; height: 14px;" />
                                    <img class="pp_src_bottom_right" style="display: inline-block; width: 14px; height: 14px;" /> 
                                  </div>
                                </div>
                                <?php 
        }
        if (!$flag) {
            /* Folder doesn't exist.*/
            ?>
                                <div class="spider_option_cont" value="0" selected="selected" disabled="disabled">Custom</div>
                                <?php 
        }
        ?>
                              </div>
                            </div>
                          </div>
                          <div style="display:table-cell;vertical-align: middle;">
                            <div style="display: block; width: 180px; margin-left: 12px;">
                              <div class="spider_choose_option" onclick="alert('This functionality is disabled in free version.')">
                                <div  class="spider_option_main_title">Choose color</div>
                                <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color:#1E8CBE"></i></div>
                              </div>
                            </div>
                          </div>
                          <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;">
                            <div style=" display: block; margin-left: 12px; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                              <img id="pp_butt_img_play" src="<?php 
        echo $row->play_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                              <img id="pp_butt_img_paus" src="<?php 
        echo $row->paus_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                              <img id="pp_butt_hov_img_play" src="<?php 
        echo $row->play_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                              <img id="pp_butt_hov_img_paus" src="<?php 
        echo $row->paus_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                            </div>
                          </div>
                          <div style="display: table-cell; text-align: center; vertical-align: middle;">
                            <input type="button" class="button button-small wds_reverse" onclick="change_play_paus_src()" value="Reverse" />
                          </div>
                        </div>
                      <div class="spider_description">Choose the type and color for navigation button images. The option is designed for limited preview (colors not included) purposes and can't be saved.</div>
                    </td>
                  </tr>
                  <tr id="play_pause_butt_size">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="pp_butt_size">Play / Pause button size: </label></td>
                    <td>
                      <input type="text" name="pp_butt_size" id="pp_butt_size" value="<?php 
        echo $row->pp_butt_size;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <div class="spider_description">Set the size for the play / pause buttons.</div>
                    </td>
                  </tr>
                  <tr id="tr_butts_color">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="butts_color">Buttons color: </label></td>
                    <td>
                      <input type="text" name="butts_color" id="butts_color" value="<?php 
        echo $row->butts_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 onchange="jQuery('#wds_left_style,#wds_right_style').css({color: '#' + jQuery(this).val()})" />
                      <div class="spider_description">Select a color for the navigation buttons.</div>
                    </td>
                  </tr>
                  <tr id="tr_hover_color">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="hover_color">Hover color: </label></td>
                    <td>
                      <input type="text" name="hover_color" id="hover_color" value="<?php 
        echo $row->hover_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 />
                      <div class="spider_description">Select a hover color for the navigation buttons.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="nav_border_width">Border: </label></td>
                    <td>
                      <input type="text" name="nav_border_width" id="nav_border_width" value="<?php 
        echo $row->nav_border_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <select name="nav_border_style" id="nav_border_style" <?php 
        echo $fv_disabled;
        ?>
>
                        <?php 
        foreach ($border_styles as $key => $border_style) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->nav_border_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $border_style;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <input type="text" name="nav_border_color" id="nav_border_color" value="<?php 
        echo $row->nav_border_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 />
                      <div class="spider_description">Select the type, size and the color of border for the navigation buttons.</div>
                    </td>
                  </tr>
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="nav_border_radius">Border radius: </label></td>
                    <td>
                      <input type="text" name="nav_border_radius" id="nav_border_radius" value="<?php 
        echo $row->nav_border_radius;
        ?>
" class="spider_char_input" <?php 
        echo $fv_disabled;
        ?>
 />
                      <div class="spider_description">Use CSS type values.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="nav_bg_color">Background color: </label></td>
                    <td>
                      <input type="text" name="nav_bg_color" id="nav_bg_color" value="<?php 
        echo $row->nav_bg_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 />
                      <input type="text" name="butts_transparent" id="butts_transparent" value="<?php 
        echo $row->butts_transparent;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> %
                      <div class="spider_description">Transparency value must be between 0 to 100.</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_bullets_box">
              <table>
                <tbody>
                  <tr>
                    <td class="spider_label"><label>Enable bullets: </label></td>
                    <td>
                      <input type="radio" id="enable_bullets1" name="enable_bullets" <?php 
        echo $row->enable_bullets ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="enable_bullets1">Yes</label>
                      <input type="radio" id="enable_bullets0" name="enable_bullets" <?php 
        echo $row->enable_bullets ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="enable_bullets0">No</label>
                      <div class="spider_description">Choose whether to have navigation bullets or not.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Position: </label></td>
                    <td>
                      <select name="bull_position" id="bull_position">
                        <option value="top" <?php 
        echo $row->bull_position == "top" ? 'selected="selected"' : '';
        ?>
>Top</option>
                        <option value="bottom" <?php 
        echo $row->bull_position == "bottom" ? 'selected="selected"' : '';
        ?>
>Bottom</option>
                      </select>
                      <div class="spider_description">Select the position for the navigation bullets.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Image for bullets: </label>
                    </td>
                    <td>
                      <input type="radio" name="bull_butt_img_or_not" id="bull_butt_img_or_not_our" value="our" <?php 
        if ($row->bull_butt_img_or_not == 'our') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_bull_butt('our')" /><label for="bull_butt_img_or_not_our">Default</label>
                      <input type="radio" name="bull_butt_img_or_not" id="bull_butt_img_or_not_cust" value="custom" <?php 
        if ($row->bull_butt_img_or_not == 'custom') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_bull_butt('custom')" /><label for="bull_butt_img_or_not_cust">Custom</label>
                      <input type="radio" name="bull_butt_img_or_not" id="bull_butt_img_or_not_stl" value="style" <?php 
        if ($row->bull_butt_img_or_not == 'style') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_bull_butt('style')" /><label for="bull_butt_img_or_not_stl">Styled</label>
                      <input type="hidden" id="bullets_img_main_url" name="bullets_img_main_url" value="<?php 
        echo $row->bullets_img_main_url;
        ?>
" />
                      <input type="hidden" id="bullets_img_hov_url" name="bullets_img_hov_url" value="<?php 
        echo $row->bullets_img_hov_url;
        ?>
" />
                      <div class="spider_description">Choose whether to use default or styled bullets.</div>
                    </td>
                  </tr>
                </tbody>
                <tbody class="<?php 
        echo $fv_class;
        ?>
"<?php 
        echo $fv_title;
        ?>
>
                  <?php 
        echo $fv_message;
        ?>
                  <tr id="bullets_style">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_style">Bullet style: </label></td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <select name="bull_style" id="bull_style" <?php 
        echo $fv_disabled;
        ?>
 onchange="change_bull_style(jQuery(this).val())">
                            <?php 
        foreach ($bull_styles as $key => $bull_style) {
            ?>
                              <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->bull_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $bull_style;
            ?>
</option>
                              <?php 
        }
        ?>
                          </select>
                        </div>
                        <div style="display: table-cell; vertical-align: middle; background-color: rgba(229, 229, 229, 0.62); text-align: center;">
                          <i id="wds_act_bull_style" class="fa <?php 
        echo str_replace('-o', '', $row->bull_style);
        ?>
" style="color: #<?php 
        echo $row->bull_act_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                          <i id="wds_deact_bull_style" class="fa <?php 
        echo $row->bull_style;
        ?>
" style="color: #<?php 
        echo $row->bull_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                        </div>
                      </div>
                      <div class="spider_description">Choose the style for the bullets.</div>
                    </td>
                  </tr>
                  <script>				  
                    var wds_blt_img_type = [];
                    var blt_img_dir = '<?php 
        echo WD_S_URL . '/images/bullet/';
        ?>
';
                    var bull_type_cur_fold = '1';
                    <?php 
        $folder_names = scandir(WD_S_DIR . '/images/bullet');
        $bull_cur_fold_name = '';
        $bull_cur_type_key = '';
        $bull_cur_color_key = '';
        $bull_cur_sub_fold_names = array();
        array_splice($folder_names, 0, 2);
        $flag = FALSE;
        foreach ($folder_names as $type_key => $folder_name) {
            if (is_dir(WD_S_DIR . '/images/bullet/' . $folder_name)) {
                ?>
                        wds_blt_img_type["<?php 
                echo $type_key;
                ?>
"] = [];
                        wds_blt_img_type["<?php 
                echo $type_key;
                ?>
"]["type_name"] = "<?php 
                echo $folder_name;
                ?>
";
                        <?php 
                if ($row->bullets_img_main_url != '') {
                    /* Getting current button's type folder and color folder.*/
                    $check_bull_cur_fold = explode('/', $row->bullets_img_main_url);
                    if (in_array($folder_name, $check_bull_cur_fold)) {
                        $flag = TRUE;
                        $bull_cur_fold_name = $folder_name;
                        $bull_cur_type_key = $type_key;
                        $bull_cur_sub_fold_names = scandir(WD_S_DIR . '/images/bullet/' . $bull_cur_fold_name);
                        array_splice($bull_cur_sub_fold_names, 0, 2);
                        ?>
                        bull_type_cur_fold = '<?php 
                        echo $bull_cur_type_key;
                        ?>
';
                            <?php 
                    }
                }
                $sub_folder_names = scandir(WD_S_DIR . '/images/bullet/' . $folder_name);
                array_splice($sub_folder_names, 0, 2);
                foreach ($sub_folder_names as $color_key => $sub_folder_name) {
                    if (is_dir(WD_S_DIR . '/images/bullet/' . $folder_name . '/' . $sub_folder_name)) {
                        if ($bull_cur_fold_name == $folder_name) {
                            /* Getting current button's color key.*/
                            if (in_array($sub_folder_name, $check_bull_cur_fold)) {
                                $bull_cur_color_key = $color_key;
                            }
                        }
                        ?>
                            wds_blt_img_type["<?php 
                        echo $type_key;
                        ?>
"]["<?php 
                        echo $color_key;
                        ?>
"] = "<?php 
                        echo $sub_folder_name;
                        ?>
";
                            <?php 
                    }
                }
            } else {
                ?>
                        console.log('<?php 
                echo $folder_name . " is not a directory.";
                ?>
');
                        <?php 
            }
        }
        ?>
 
                  </script>
                  <tr id="bullets_images_cust">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label>Upload buttons images: </label>
                    </td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Active Button" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_free_button" type="button" value="Deactive Button" onclick="alert('This functionality is disabled in free version.')" />
                        </div>  
                        <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                          <img id="bull_img_main" src="<?php 
        echo $row->bullets_img_main_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="bull_img_hov" src="<?php 
        echo $row->bullets_img_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" /> 
                        </div>
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="wds_change_bullets_custom_src()" value="Reverse" />
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr id="bullets_images_select">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label for="bullets_images_url">Chooes buttons: </label>
                    </td>
                    <td style="display: block;">
                      <div style="display: table; margin-bottom: 14px;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <div style="display: block; width: 180px;">
                            <div class="spider_choose_option" onclick="wds_choose_bull_option(this)">
                              <div class="spider_option_main_title">Choose group</div>
                              <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color: #1E8CBE;"></i></div>
                            </div>
                            <div class="spider_bull_options_cont">
                            <?php 
        foreach ($folder_names as $type_key => $folder_name) {
            ?>
                              <div class="spider_option_cont wds_bull_butt_groups" value="<?php 
            echo $type_key;
            ?>
" <?php 
            echo $bull_cur_type_key == $type_key ? 'selected="selected" style="background-color: #3399FF;"' : '';
            ?>
 onclick="change_bullets_images_type(this)">
                                <div class="spider_option_cont_title" style="width: 64%;">
                                  <?php 
            echo 'Group-' . ++$type_key;
            ?>
                                </div>
                                <div class="spider_option_cont_img">
                                  <img class="bull_src_left" style="display: inline-block; width: 14px; height: 14px;" />
                                  <img class="bull_src_right" style="display: inline-block; width: 14px; height: 14px;" />
                                </div>
                              </div>
                              <?php 
        }
        if (!$flag) {
            /* Folder doesn't exist.*/
            ?>
                              <div class="spider_option_cont" value="0" selected="selected" disabled="disabled">Custom</div>
                              <?php 
        }
        ?>
                            </div>
                          </div>							
                        </div>
                        <div style="display: table-cell; vertical-align: middle;">
                          <div style="display: block; width: 180px; margin-left: 12px;">
                            <div class="spider_choose_option" onclick="alert('This functionality is disabled in free version.')" >
                              <div class="spider_option_main_title" >Choose color</div>
                              <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color: #1E8CBE;"></i></div>
                            </div>
                          </div>
                        </div>						
                        <div style="width: 100px; display: table-cell; vertical-align: middle; text-align: center;">
                          <div style="display: block; vertical-align: middle; margin-left: 12px; text-align: center; background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                            <img id="bullets_img_main" src="<?php 
        echo $row->bullets_img_main_url;
        ?>
" style="display: inline-block; width: 40px; height: 40px;" />
                            <img id="bullets_img_hov" src="<?php 
        echo $row->bullets_img_hov_url;
        ?>
" style="display: inline-block; width: 40px; height: 40px;" />
                          </div>
                        </div>						
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="change_bullets_src()" value="Reverse" />
                        </div>
                      </div>
                      <div class="spider_description">Choose the type and color for the bullets. The option is designed for limited preview (colors not included) purposes and can't be saved.</div>
                    </td>
                  </tr>
                  <tr id="bullet_size">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_size">Size: </label></td>
                    <td>
                      <input type="text" name="bull_size" id="bull_size" value="<?php 
        echo $row->bull_size;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <div class="spider_description">Define the size of the navigation bullets.</div>
                    </td>
                  </tr>
                  <tr id="bullets_color">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_color">Color: </label></td>
                    <td>
                      <input type="text" name="bull_color" id="bull_color" value="<?php 
        echo $row->bull_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 onchange="jQuery('#wds_deact_bull_style').css({color: '#' + jQuery(this).val()})" />
                      <div class="spider_description">Select the color for the navigation bullets.</div>
                    </td>
                  </tr> 
                  <tr id="bullets_act_color">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_act_color">Active color: </label></td>
                    <td>
                      <input type="text" name="bull_act_color" id="bull_act_color" value="<?php 
        echo $row->bull_act_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 onchange="jQuery('#wds_act_bull_style').css({color: '#' + jQuery(this).val()})" />
                      <div class="spider_description">Select the color for the bullet, which is currently displaying a corresponding image.</div>
                    </td>
                  </tr>
                  <tr id="bullet_margin">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_margin">Margin: </label></td>
                    <td>
                      <input type="text" name="bull_margin" id="bull_margin" value="<?php 
        echo $row->bull_margin;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <div class="spider_description">Set the margin for the navigation bullets in pixels.</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_filmstrip_box spider_free_version_label" title="This functionality is disabled in free version.">
              <table>
                <tbody>
                  <tr>
                    <td colspan="2">
                      <div class="error" style="padding: 5px; font-size: 14px; color: #000000 !important;">Filmstrip is disabled in free version.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label spider_free_version_label"><label>Enable filmstrip: </label></td>
                    <td>
                      <input disabled="disabled" type="radio" id="enable_filmstrip1" name="enable_filmstrip" <?php 
        echo $row->enable_filmstrip ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="filmstrip1">Yes</label>
                      <input disabled="disabled" type="radio" id="enable_filmstrip0" name="enable_filmstrip" <?php 
        echo $row->enable_filmstrip ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="filmstrip0">No</label>
                      <div class="spider_description">Choose whether to have thumbnails of the slides displayed as a filmstrip or not.</div>
                    </td>
                  </tr>
                  <tr id="filmstrip_position">
                    <td class="spider_label"><label>Position: </label></td>
                    <td>
                      <select disabled="disabled" name="film_pos" id="film_pos">
                        <option value="top" <?php 
        echo $row->film_pos == "top" ? 'selected="selected"' : '';
        ?>
>Top</option>
                        <option value="right" <?php 
        echo $row->film_pos == "right" ? 'selected="selected"' : '';
        ?>
>Right</option>
                        <option value="bottom" <?php 
        echo $row->film_pos == "bottom" ? 'selected="selected"' : '';
        ?>
>Bottom</option>
                        <option value="left" <?php 
        echo $row->film_pos == "left" ? 'selected="selected"' : '';
        ?>
>Left</option>
                      </select>
                      <div class="spider_description">Set the position of the filmstrip.</div>
                    </td>
                  </tr>
                  <tr id="filmstrip_size">
                    <td class="spider_label"><label for="film_thumb_width">Thumbnail dimensions: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_thumb_width" id="film_thumb_width" value="<?php 
        echo $row->film_thumb_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> x 
                      <input disabled="disabled" type="text" name="film_thumb_height" id="film_thumb_height" value="<?php 
        echo $row->film_thumb_height;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description">Define the maximum width and heigth of the filmstrip thumbnails.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="film_bg_color">Background color: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_bg_color" id="film_bg_color" value="<?php 
        echo $row->film_bg_color;
        ?>
" class="color" />
                      <div class="spider_description">Select the background color for the filmstrip.</div>
                    </td>
                  </tr>
                  <tr id="filmstrip_thumb_margin">
                    <td class="spider_label"><label for="film_tmb_margin">Thumbnail margin: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_tmb_margin" id="film_tmb_margin" value="<?php 
        echo $row->film_tmb_margin;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)"/> px
                      <div class="spider_description">Set the margin for the thumbnails.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="film_act_border_width">Active border: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_act_border_width" id="film_act_border_width" value="<?php 
        echo $row->film_act_border_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)"/> px
                      <select disabled="disabled" name="film_act_border_style" id="film_act_border_style">
                        <?php 
        foreach ($border_styles as $key => $border_style) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->film_act_border_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $border_style;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <input disabled="disabled" type="text" name="film_act_border_color" id="film_act_border_color" value="<?php 
        echo $row->film_act_border_color;
        ?>
" class="color"/>
                      <div class="spider_description">The thumbnail for the currently displayed image will have a border. You can set its size, type and color.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="film_dac_transparent">Deactive transparency: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_dac_transparent" id="film_dac_transparent" value="<?php 
        echo $row->film_dac_transparent;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)"/> %
                      <div class="spider_description">You can set a transparency level for the inactive filmstrip items which must be between 0 to 100..</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_timer_bar_box">
              <table>
                <tbody>
                  <tr>
                    <td class="spider_label"><label>Enable timer bar: </label></td>
                    <td>
                      <input type="radio" id="enable_time_bar1" name="enable_time_bar" <?php 
        echo $row->enable_time_bar ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="time_bar1">Yes</label>
                      <input type="radio" id="enable_time_bar0" name="enable_time_bar" <?php 
        echo $row->enable_time_bar ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="time_bar0">No</label>
                      <div class="spider_description">You can add a bar displaying the timing left to switching to the next slide on autoplay.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="timer_bar_type">Type: </label></td>
                    <td>
                      <select name="timer_bar_type" id="timer_bar_type">
                        <option value="top" <?php 
        echo $row->timer_bar_type == "top" ? 'selected="selected"' : '';
        ?>
>Line top</option>
                        <option value="bottom" <?php 
        echo $row->timer_bar_type == "bottom" ? 'selected="selected"' : '';
        ?>
>Line Bottom</option>
                        <option value="circle_top_left" <?php 
        echo $row->timer_bar_type == "circle_top_left" ? 'selected="selected"' : '';
        ?>
>Circle top left</option>
                        <option value="circle_top_right" <?php 
        echo $row->timer_bar_type == "circle_top_right" ? 'selected="selected"' : '';
        ?>
>Circle top right</option>
                        <option value="circle_bot_left" <?php 
        echo $row->timer_bar_type == "circle_bot_left" ? 'selected="selected"' : '';
        ?>
>Circle bottom left</option>
                        <option value="circle_bot_right" <?php 
        echo $row->timer_bar_type == "circle_bot_right" ? 'selected="selected"' : '';
        ?>
>Circle bottom right</option>
                      </select>
                      <div class="spider_description">Choose the type of the timer bar to be used within the slider.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="timer_bar_size">Size: </label></td>
                    <td>
                      <input type="text" name="timer_bar_size" id="timer_bar_size" value="<?php 
        echo $row->timer_bar_size;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description">Define the height of the timer bar.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="timer_bar_color">Color: </label></td>
                    <td>
                      <input type="text" name="timer_bar_color" id="timer_bar_color" value="<?php 
        echo $row->timer_bar_color;
        ?>
" class="color" />
                      <input type="text" name="timer_bar_transparent" id="timer_bar_transparent" value="<?php 
        echo $row->timer_bar_transparent;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)"/> %
                      <div class="spider_description">Transparency value must be between 0 to 100.</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_watermark_box">
              <div class="updated">
                <p>
                Please note that the <b>Fill</b> and <b>Contain</b> options will work fine with <b>Watermark</b> option regardless of the image dimensions, 
                whereas for the <b>Cover</b> option you should have the image identical to the size set in the <b>Dimensions</b> settings. 
                If you have uploaded the image with another dimension, you will need to resize the image and upload it again.
                </p>
              </div>
              <table>
                <tbody>
                  <tr>
                    <td style="width: 50%; vertical-align: top; height: 100%; display: table-cell;">
                      <table>
                        <tbody>
                          <tr id="tr_built_in_watermark_type">
                            <td class="spider_label_options">
                              <label>Watermark type: </label>
                            </td>
                            <td>
                              <input type="radio" name="built_in_watermark_type" id="built_in_watermark_type_none" value="none" <?php 
        if ($row->built_in_watermark_type == 'none') {
            echo 'checked="checked"';
        }
        ?>
 onClick="bwg_built_in_watermark('watermark_type_none')" />
                              <label for="built_in_watermark_type_none">None</label>
                              <input type="radio" name="built_in_watermark_type" id="built_in_watermark_type_text" value="text" <?php 
        if ($row->built_in_watermark_type == 'text') {
            echo 'checked="checked"';
        }
        ?>
 onClick="bwg_built_in_watermark('watermark_type_text')" onchange="preview_built_in_watermark()" />
                              <label for="built_in_watermark_type_text">Text</label>
                              <input type="radio" name="built_in_watermark_type" id="built_in_watermark_type_image" value="image" <?php 
        if ($row->built_in_watermark_type == 'image') {
            echo 'checked="checked"';
        }
        ?>
 onClick="bwg_built_in_watermark('watermark_type_image')" onchange="preview_built_in_watermark()" />
                              <label for="built_in_watermark_type_image">Image</label>
                              <div class="spider_description">Choose what kind of watermark you want to use.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_url">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_url">Watermark url: </label>
                            </td>
                            <td>
                              <input type="text" id="built_in_watermark_url" name="built_in_watermark_url" style="width: 68%;" value="<?php 
        echo $row->built_in_watermark_url;
        ?>
" style="display:inline-block;" onchange="preview_built_in_watermark()" />
                              <?php 
        if (!$row->spider_uploader) {
            ?>
                              <input id="wat_img_add_butt" class="button-primary" type="button" onclick="spider_media_uploader('watermark', event, false); return false;" value="Add Image" />
                                <?php 
        } else {
            ?>
                              <a href="<?php 
            echo add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'watermark', 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
            ?>
" class="button-primary thickbox thickbox-preview" title="Add Image" onclick="return false;">
                                Add Image
                              </a>
                                <?php 
        }
        ?>
                              <div class="spider_description">Only .png format is supported.</div>
                            </td>
                          </tr>                    
                          <tr id="tr_built_in_watermark_text">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_text">Watermark text: </label>
                            </td>
                            <td>
                              <input type="text" name="built_in_watermark_text" id="built_in_watermark_text" style="width: 100%;" value="<?php 
        echo $row->built_in_watermark_text;
        ?>
" onchange="preview_built_in_watermark()" onkeypress="preview_built_in_watermark()" />
                              <div class="spider_description">Provide the text which will be displayed over the slides.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_size">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_size">Watermark size: </label>
                            </td>
                            <td>
                              <input type="text" name="built_in_watermark_size" id="built_in_watermark_size" value="<?php 
        echo $row->built_in_watermark_size;
        ?>
" class="spider_int_input" onchange="preview_built_in_watermark()" /> %
                              <div class="spider_description">Enter size of watermark in percents according to image.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_font_size">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_font_size">Watermark font size: </label>
                            </td>
                            <td>
                              <input type="text" name="built_in_watermark_font_size" id="built_in_watermark_font_size" value="<?php 
        echo $row->built_in_watermark_font_size;
        ?>
" class="spider_int_input" onchange="preview_built_in_watermark()" onkeypress="return spider_check_isnum(event)" /> px
                              <div class="spider_description">Specify the font size of the watermark.</div>
                            </td>
                          </tr>
                            <tr id="tr_built_in_watermark_font">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_font">Watermark font style: </label>
                            </td>
                            <td>
                            <select name="built_in_watermark_font" id="built_in_watermark_font" style="width:150px;" onchange="preview_built_in_watermark()">
                              <?php 
        foreach ($built_in_watermark_fonts as $watermark_font) {
            ?>
                              <option value="<?php 
            echo $watermark_font;
            ?>
" <?php 
            if ($row->built_in_watermark_font == $watermark_font) {
                echo 'selected="selected"';
            }
            ?>
><?php 
            echo $watermark_font;
            ?>
</option>
                              <?php 
        }
        ?>
                            </select>
                            <?php 
        foreach ($built_in_watermark_fonts as $watermark_font) {
            ?>
                              <style>
                              @font-face {
                                font-family: <?php 
            echo 'bwg_' . str_replace('.ttf', '', $watermark_font);
            ?>
;
                                src: url("<?php 
            echo WD_S_URL . '/fonts/' . $watermark_font;
            ?>
");
                               }
                              </style>
                              <?php 
        }
        ?>
                            <div class="spider_description">Specify the font family for the watermark text.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_color">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_color">Watermark color: </label>
                            </td>
                            <td>
                              <input type="text" name="built_in_watermark_color" id="built_in_watermark_color" value="<?php 
        echo $row->built_in_watermark_color;
        ?>
" class="color" onchange="preview_built_in_watermark()" />
                              <input type="text" name="built_in_watermark_opacity" id="built_in_watermark_opacity" value="<?php 
        echo $row->built_in_watermark_opacity;
        ?>
" class="spider_int_input" onchange="preview_built_in_watermark()" /> %
                              <div class="spider_description">Transparency value must be between 0 to 100.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_position">
                            <td class="spider_label_options">
                              <label>Watermark position: </label>
                            </td>
                            <td>
                              <table class="wds_position_table">
                                <tbody>
                                  <tr>
                                    <td class="wds_position_td"><input type="radio" value="top-left" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "top-left") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="top-center" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "top-center") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="top-right" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "top-right") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                  </tr>
                                  <tr>
                                    <td class="wds_position_td"><input type="radio" value="middle-left" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "middle-left") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="middle-center" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "middle-center") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="middle-right" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "middle-right") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                  </tr>
                                  <tr>
                                    <td class="wds_position_td"><input type="radio" value="bottom-left" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "bottom-left") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="bottom-center" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "bottom-center") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="bottom-right" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "bottom-right") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                  </tr>
                                </tbody>
                              </table>
                              <div class="spider_description">Choose the positioning of the watermark.</div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                    <td style="width: 50%; vertical-align: top;height: 100%; display: table-cell;">
                      <span id="preview_built_in_watermark" style='display:table-cell; background-image:url("<?php 
        echo WD_S_URL . '/images/watermark_preview.jpg';
        ?>
"); background-size:100% 100%;width:400px;height:400px;padding-top: 4px; position:relative;'></span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_css_box">
              <table style="width:50%">
                <tbody>
                  <tr>
                    <td class="spider_label"><label for="css">Css: </label></td> 
                  </tr> 
                  <tr>
                    <td style="width: 90%;">
                      <div class="spider_description">Add custom CSS to apply custom changes to the slider.</div>
                      <textarea id="css" name="css" rows="30" style="width: 100%;"><?php 
        echo htmlspecialchars($row->css);
        ?>
</textarea>
                    </td>
                  </tr>   
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!--------------Slides tab----------->
        <div class="wds_box wds_slides_box">
          <table>
            <thead>
              <tr>
                <td colspan="4">
                  <div class="wds_buttons">
                    <?php 
        if ($row->spider_uploader) {
            ?>
                    <a href="<?php 
            echo add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'add_slides', 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
            ?>
" class="button-primary thickbox thickbox-preview" title="Add Images" onclick="return false;">
                      Add Images
                    </a>
                      <?php 
        } else {
            ?>
                    <input type="button" class="button-primary" id="button_image_url" onclick="spider_media_uploader('button_image_url', event, true); return false;" value="Add Images" />
                      <?php 
        }
        ?>
                    <input class="button-secondary wds_free_button" type="button" value="Add Posts" onclick="alert('This functionality is disabled in free version.')" />
                    <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                           spider_set_input_value('task', 'set_watermark');
                                                                           spider_ajax_save('sliders_form', event);" value="Set Watermark" />
                    <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                           spider_set_input_value('task', 'reset_watermark');
                                                                           spider_ajax_save('sliders_form', event);" value="Reset Watermark" />
                  </div>
                </td>
              </tr>
            </thead>
            <tbody style="display: block;">
              <tr>
                <td class="spider_label"><label for="name">Slider name: <span style="color:#FF0000;">*</span> </label></td>
                <td><input type="text" id="name" name="name" value="<?php 
        echo $row->name;
        ?>
" size="39" /></td>
              </tr>
              <tr style="display: block;">
                <td colspan="4" style="display: block;">
                  <div class="wds_tabs wbs_subtab aui-sortable">
                    <?php 
        foreach ($slides_row as $key => $slide_row) {
            ?>
                    <a id="wbs_subtab<?php 
            echo $slide_row->id;
            ?>
" class="connectedSortable <?php 
            echo ($id == 0 || !$sub_tab_type || strpos($sub_tab_type, 'pr') !== FALSE) && $key == 0 || 'slide' . $slide_row->id == $sub_tab_type ? 'wds_sub_active' : '';
            ?>
" href="#">
                      <div class="handle" title="Drag to re-order"></div>
                      <input type="text" id="title<?php 
            echo $slide_row->id;
            ?>
" name="title<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->title;
            ?>
" class="wds_tab_title" tab_type="slide<?php 
            echo $slide_row->id;
            ?>
" onclick="wds_change_sub_tab(this, 'wds_slide<?php 
            echo $slide_row->id;
            ?>
')"/>
                      <span class="wds_slide_dublicate" onclick="wds_duplicate_slide('<?php 
            echo $slide_row->id;
            ?>
');" title="Duplicate slide"></span>					                   
                      <span class="wds_tab_remove" title="Delete slide" onclick="wds_remove_slide('<?php 
            echo $slide_row->id;
            ?>
')"></span>
                      <input type="hidden" name="order<?php 
            echo $slide_row->id;
            ?>
" id="order<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->order;
            ?>
" />
                    </a>
                      <?php 
        }
        ?>
                    <a class="wds_add_layer" href="#" title="Add slide" onclick="wds_add_slide()">+</a>
                    <div class="wds_clear"></div>
                  </div>
                  <?php 
        foreach ($slides_row as $key => $slide_row) {
            ?>
                  <div class="wds_box <?php 
            echo ($id == 0 || !$sub_tab_type || strpos($sub_tab_type, 'pr') !== FALSE) && $key == 0 || 'slide' . $slide_row->id == $sub_tab_type ? 'wds_sub_active' : '';
            ?>
 wds_slide<?php 
            echo $slide_row->id;
            ?>
">
                    <table class="ui-sortable<?php 
            echo $slide_row->id;
            ?>
">
                      <thead><tr><td colspan="4">&nbsp;</td></tr></thead>
                      <tbody>
                        <input type="hidden" name="type<?php 
            echo $slide_row->id;
            ?>
" id="type<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->type;
            ?>
" />
                        <tr>
                          <td colspan="4">
                            <?php 
            if (!$row->spider_uploader) {
                ?>
                            <input type="button" class="button-primary" id="button_image_url<?php 
                echo $slide_row->id;
                ?>
" onclick="spider_media_uploader('<?php 
                echo $slide_row->id;
                ?>
', event, false); return false;" value="Add Image" />
                              <?php 
            } else {
                ?>
                            <a href="<?php 
                echo add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'add_update_slide', 'slide_id' => $slide_row->id, 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
                ?>
" class="button-primary thickbox thickbox-preview" title="Add Image" onclick="return false;">
                              Add Image
                            </a>
                              <?php 
            }
            ?>
                            <input type="button" class="button-primary" onclick="wds_add_image_url('<?php 
            echo $slide_row->id;
            ?>
')" value="Add Image by URL" />
                            <input type="button" class="button-secondary wds_free_button" onclick="alert('This functionality is disabled in free version.')" value="Embed Media" />
                            <input class="button-secondary wds_free_button" type="button" value="Add Post" onclick="alert('This functionality is disabled in free version.')" />
                            <input type="button" class="button-secondary" id="delete_image_url<?php 
            echo $slide_row->id;
            ?>
" onclick="spider_remove_url('image_url<?php 
            echo $slide_row->id;
            ?>
', 'wds_preview_image<?php 
            echo $slide_row->id;
            ?>
')" value="Remove" />
                            <input type="hidden" id="image_url<?php 
            echo $slide_row->id;
            ?>
" name="image_url<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->image_url;
            ?>
" />
                            <input type="hidden" id="thumb_url<?php 
            echo $slide_row->id;
            ?>
" name="thumb_url<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->thumb_url;
            ?>
" />
                          </td>
                        </tr>
                        <tr>
                          <td colspan="4">
                            <div id="wds_preview_wrapper_<?php 
            echo $slide_row->id;
            ?>
" class="wds_preview_wrapper" style="width: <?php 
            echo $row->width;
            ?>
px; height: <?php 
            echo $row->height;
            ?>
px;">
                              <div class="wds_preview" style="overflow: hidden; position: absolute; width: inherit; height: inherit; background-color: transparent; background-image: none; display: block;">
                                <div id="wds_preview_image<?php 
            echo $slide_row->id;
            ?>
" class="wds_preview_image<?php 
            echo $slide_row->id;
            ?>
"
                                     style='background-color: <?php 
            echo WDW_S_Library::spider_hex2rgba($row->background_color, (100 - $row->background_transparent) / 100);
            ?>
;
                                            background-image: url("<?php 
            echo $slide_row->type != 'image' ? $slide_row->thumb_url : $slide_row->image_url . '?date=' . date('Y-m-d H:i:s');
            ?>
");
                                            background-position: center center;
                                            background-repeat: no-repeat;
                                            background-size: <?php 
            echo $row->bg_fit;
            ?>
;
                                            width: inherit;
                                            height: inherit;
                                            /*position: relative;*/'>
                                <?php 
            $layers_row = $this->model->get_layers_row_data($slide_row->id);
            if ($layers_row) {
                foreach ($layers_row as $key => $layer) {
                    $prefix = 'slide' . $slide_row->id . '_layer' . $layer->id;
                    switch ($layer->type) {
                        case 'text':
                            ?>
                                        <span id="<?php 
                            echo $prefix;
                            ?>
" class="wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable ui-draggable" data-type="wds_text_parent" onclick="wds_showhide_layer('<?php 
                            echo $prefix;
                            ?>
_tbody', 1)"
                                              style="<?php 
                            echo $layer->image_width ? 'width: ' . $layer->image_width . '%; ' : '';
                            echo $layer->image_height ? 'height: ' . $layer->image_height . '%; ' : '';
                            ?>
word-break: <?php 
                            echo $layer->image_scale ? 'keep-all' : 'break-all';
                            ?>
; display: inline-block; position: absolute; left: <?php 
                            echo $layer->left;
                            ?>
px; top: <?php 
                            echo $layer->top;
                            ?>
px; z-index: <?php 
                            echo $layer->depth;
                            ?>
; color: #<?php 
                            echo $layer->color;
                            ?>
; font-size: <?php 
                            echo $layer->size;
                            ?>
px; line-height: 1.25em; font-family: <?php 
                            echo $layer->ffamily;
                            ?>
; font-weight: <?php 
                            echo $layer->fweight;
                            ?>
; padding: <?php 
                            echo $layer->padding;
                            ?>
; background-color: <?php 
                            echo WDW_S_Library::spider_hex2rgba($layer->fbgcolor, (100 - $layer->transparent) / 100);
                            ?>
; border: <?php 
                            echo $layer->border_width;
                            ?>
px <?php 
                            echo $layer->border_style;
                            ?>
 #<?php 
                            echo $layer->border_color;
                            ?>
; border-radius: <?php 
                            echo $layer->border_radius;
                            ?>
; box-shadow: <?php 
                            echo $layer->shadow;
                            ?>
"><?php 
                            echo str_replace(array("\r\n", "\r", "\n"), "<br>", $layer->text);
                            ?>
</span>
                                        <?php 
                            break;
                        case 'image':
                            ?>
                                        <img id="<?php 
                            echo $prefix;
                            ?>
" class="wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable ui-draggable" onclick="wds_showhide_layer('<?php 
                            echo $prefix;
                            ?>
_tbody', 1)" src="<?php 
                            echo $layer->image_url;
                            ?>
"
                                             style="opacity: <?php 
                            echo (100 - $layer->imgtransparent) / 100;
                            ?>
; filter: Alpha(opacity=<?php 
                            echo 100 - $layer->imgtransparent;
                            ?>
); position: absolute; left: <?php 
                            echo $layer->left;
                            ?>
px; top: <?php 
                            echo $layer->top;
                            ?>
px; z-index: <?php 
                            echo $layer->depth;
                            ?>
; border: <?php 
                            echo $layer->border_width;
                            ?>
px <?php 
                            echo $layer->border_style;
                            ?>
 #<?php 
                            echo $layer->border_color;
                            ?>
; border-radius: <?php 
                            echo $layer->border_radius;
                            ?>
; box-shadow: <?php 
                            echo $layer->shadow;
                            ?>
; " />
                                        <?php 
                            break;
                        case 'video':
                            ?>
                                        <img id="<?php 
                            echo $prefix;
                            ?>
" class="wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable ui-draggable" onclick="wds_showhide_layer('<?php 
                            echo $prefix;
                            ?>
_tbody', 1)" src="<?php 
                            echo $layer->image_url;
                            ?>
"
                                             style="max-width: <?php 
                            echo $layer->image_width;
                            ?>
px; width: <?php 
                            echo $layer->image_width;
                            ?>
px; max-height: <?php 
                            echo $layer->image_height;
                            ?>
px; height: <?php 
                            echo $layer->image_height;
                            ?>
px; position: absolute; left: <?php 
                            echo $layer->left;
                            ?>
px; top: <?php 
                            echo $layer->top;
                            ?>
px; z-index: <?php 
                            echo $layer->depth;
                            ?>
; border: <?php 
                            echo $layer->border_width;
                            ?>
px <?php 
                            echo $layer->border_style;
                            ?>
 #<?php 
                            echo $layer->border_color;
                            ?>
; border-radius: <?php 
                            echo $layer->border_radius;
                            ?>
; box-shadow: <?php 
                            echo $layer->shadow;
                            ?>
;" />
                                        <?php 
                            break;
                        case 'social':
                            ?>
                                        <style>#<?php 
                            echo $prefix;
                            ?>
:hover {color: #<?php 
                            echo $layer->hover_color;
                            ?>
 !important;}</style>
                                        <i id="<?php 
                            echo $prefix;
                            ?>
" class="wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable fa fa-<?php 
                            echo $layer->social_button;
                            ?>
 ui-draggable" onclick="wds_showhide_layer('<?php 
                            echo $prefix;
                            ?>
_tbody', 1)"
                                           style="opacity: <?php 
                            echo (100 - $layer->transparent) / 100;
                            ?>
; filter: Alpha(opacity=<?php 
                            echo 100 - $layer->transparent;
                            ?>
); position: absolute; left: <?php 
                            echo $layer->left;
                            ?>
px; top: <?php 
                            echo $layer->top;
                            ?>
px; z-index: <?php 
                            echo $layer->depth;
                            ?>
; color: #<?php 
                            echo $layer->color;
                            ?>
; font-size: <?php 
                            echo $layer->size;
                            ?>
px; line-height: <?php 
                            echo $layer->size;
                            ?>
px; padding: <?php 
                            echo $layer->padding;
                            ?>
; "></i>
                                        <?php 
                            break;
                        default:
                            break;
                    }
                }
            }
            ?>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="spider_label"><label>Published: </label></td>
                          <td>
                            <input type="radio" id="published<?php 
            echo $slide_row->id;
            ?>
1" name="published<?php 
            echo $slide_row->id;
            ?>
" <?php 
            echo $slide_row->published ? 'checked="checked"' : '';
            ?>
 value="1" /><label for="published<?php 
            echo $slide_row->id;
            ?>
1">Yes</label>
                            <input type="radio" id="published<?php 
            echo $slide_row->id;
            ?>
0" name="published<?php 
            echo $slide_row->id;
            ?>
" <?php 
            echo $slide_row->published ? '' : 'checked="checked"';
            ?>
 value="0" /><label for="published<?php 
            echo $slide_row->id;
            ?>
0">No</label>
                          </td>
                        </tr>
                        <tr id="trlink<?php 
            echo $slide_row->id;
            ?>
" <?php 
            echo $slide_row->type == 'image' ? '' : 'style="display: none;"';
            ?>
>
                          <td class="spider_label">
                            <label for="link<?php 
            echo $slide_row->id;
            ?>
">Link the slide to: </label>
                          </td>
                          <td>
                            <input id="link<?php 
            echo $slide_row->id;
            ?>
" type="text" size="39" value="<?php 
            echo $slide_row->link;
            ?>
" name="link<?php 
            echo $slide_row->id;
            ?>
" />
                            <input id="target_attr_slide<?php 
            echo $slide_row->id;
            ?>
" type="checkbox"  name="target_attr_slide<?php 
            echo $slide_row->id;
            ?>
" <?php 
            echo $slide_row->target_attr_slide ? 'checked="checked"' : '';
            ?>
 value="1" /><label for="target_attr_slide<?php 
            echo $slide_row->id;
            ?>
"> Open in a new window</label>
                            <div class="spider_description">You can set a redirection link, so that the user will get to the mentioned location upon hitting the slide.<br />Use http:// and https:// for external links.</div>
                          </td>
                        </tr>
                        <tr>
                          <td colspan="4">
                            <input type="button" class="button-<?php 
            echo !$fv ? "primary" : "secondary wds_free_button";
            ?>
 button button-small" onclick="<?php 
            echo !$fv ? "wds_add_layer('text', '" . $slide_row->id . "')" : "alert('This functionality is disabled in free version.')";
            ?>
; return false;" value="Add Text Layer" />
                            <?php 
            if (!$row->spider_uploader) {
                ?>
                            <input type="button" class="button-<?php 
                echo !$fv ? "primary" : "secondary wds_free_button";
                ?>
 button button-small" onclick="<?php 
                echo !$fv ? "wds_add_layer('image', '" . $slide_row->id . "', '', event)" : "alert('This functionality is disabled in free version.')";
                ?>
; return false;" value="Add Image Layer" />
                              <?php 
            } else {
                ?>
                            <a href="<?php 
                echo !$fv ? add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'add_layer', 'slide_id' => $slide_row->id, 'TB_iframe' => '1'), admin_url('admin-ajax.php')) : '';
                ?>
" onclick="<?php 
                echo !$fv ? '' : "alert('This functionality is disabled in free version.')";
                ?>
; return false;" class="button-<?php 
                echo !$fv ? "primary thickbox thickbox-preview" : "secondary wds_free_button";
                ?>
 button button-small" title="Add Image Layer">
                              Add Image layer
                            </a>
                              <?php 
            }
            ?>
                            <input type="button" class="button-secondary button button-small wds_free_button" onclick="alert('This functionality is disabled in free version.'); return false;" value="Embed Media Layer" />
                            <input type="button" class="button-secondary button button-small wds_free_button" onclick="alert('This functionality is disabled in free version.'); return false;" value="Add Social Button Layer" />
                            <input type="button" class="button-secondary button button-small wds_free_button" onclick="alert('This functionality is disabled in free version.'); return false;" value="Add Hotspot Layer" />
                          </td>
                        </tr>
                      </tbody>
                      <?php 
            $layer_ids_string = '';
            if ($layers_row) {
                foreach ($layers_row as $key => $layer) {
                    $prefix = 'slide' . $slide_row->id . '_layer' . $layer->id;
                    ?>
                          <tbody id="<?php 
                    echo $prefix;
                    ?>
_tbody">
                            <tr class="wds_layer_head_tr">
                              <td class="wds_layer_head" colspan="4">
                                <div class="handle connectedSortable" title="Drag to re-order"></div>
                                <span class="wds_layer_label" onclick="wds_showhide_layer('<?php 
                    echo $prefix;
                    ?>
_tbody', 0)"><input id="<?php 
                    echo $prefix;
                    ?>
_title" name="<?php 
                    echo $prefix;
                    ?>
_title" type="text" class="wds_layer_title" style="width: 80px;" value="<?php 
                    echo $layer->title;
                    ?>
" title="Layer title" /></span>
                                <span class="wds_layer_remove" onclick="wds_delete_layer('<?php 
                    echo $slide_row->id;
                    ?>
', '<?php 
                    echo $layer->id;
                    ?>
')" title="Delete layer"></span>
                                <span class="wds_layer_dublicate" onclick="wds_add_layer('<?php 
                    echo $layer->type;
                    ?>
', '<?php 
                    echo $slide_row->id;
                    ?>
', '', 1, 0); wds_duplicate_layer('<?php 
                    echo $layer->type;
                    ?>
', '<?php 
                    echo $slide_row->id;
                    ?>
', '<?php 
                    echo $layer->id;
                    ?>
');" title="Duplicate layer"></span>
                                <input id="<?php 
                    echo $prefix;
                    ?>
_depth" class="wds_layer_depth spider_int_input" type="text" onchange="jQuery('#<?php 
                    echo $prefix;
                    ?>
').css({zIndex: jQuery(this).val()})" onkeypress="return spider_check_isnum(event)" value="<?php 
                    echo $layer->depth;
                    ?>
" prefix="<?php 
                    echo $prefix;
                    ?>
" name="<?php 
                    echo $prefix;
                    ?>
_depth" title="z-index" />
                              </td>
                            </tr>
                            <?php 
                    switch ($layer->type) {
                        /*--------text layer----------*/
                        case 'text':
                            ?>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_text">Text: </label>
                              </td>
                              <td>
                                <textarea id="<?php 
                            echo $prefix;
                            ?>
_text" name="<?php 
                            echo $prefix;
                            ?>
_text" style="width: 222px; height: 60px; resize: vertical;" onkeyup="wds_new_line('<?php 
                            echo $prefix;
                            ?>
');"><?php 
                            echo $layer->text;
                            ?>
</textarea>
                                <input type="button" class="wds_editor_btn button-secondary" onclick="alert('This functionality is disabled in free version.')" value="Editor" />
                                <div class="spider_description"></div>
                              </td>							  
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in">Effect In:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_start" class="spider_int_input" type="text" value="<?php 
                            echo $layer->start;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_start" /> ms 
                                  <div class="spider_description">Start</div>
                                </span>
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" style="width:150px;" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_in as $key => $layer_effect_in) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_in == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_in;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_in').val());" value="<?php 
                            echo $layer->duration_eff_in;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" /> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>							
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_image_width">Dimensions: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_width" class="spider_int_input" type="text" onchange="wds_text_width(this,'<?php 
                            echo $prefix;
                            ?>
')" value="<?php 
                            echo $layer->image_width;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_image_width" /> x 
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_height" class="spider_int_input" type="text" onchange="wds_text_height(this,'<?php 
                            echo $prefix;
                            ?>
')" value="<?php 
                            echo $layer->image_height;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_image_height" /> % 
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_scale" type="checkbox" onchange="wds_break_word(this, '<?php 
                            echo $prefix;
                            ?>
')" name="<?php 
                            echo $prefix;
                            ?>
_image_scale" <?php 
                            echo $layer->image_scale ? 'checked="checked"' : '';
                            ?>
 /><label for="<?php 
                            echo $prefix;
                            ?>
_image_scale">Break-word</label>
                                <div class="spider_description">Leave blank to keep the initial width and height.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out">Effect Out:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_end" class="spider_int_input" type="text" value="<?php 
                            echo $layer->end;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_end"> ms
                                  <div class="spider_description">Start</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" style="width:150px;" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_out as $key => $layer_effect_out) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_out == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_out;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_out').val());" value="<?php 
                            echo $layer->duration_eff_out;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out"> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Position: </label>
                              </td>
                              <td>
                                X <input id="<?php 
                            echo $prefix;
                            ?>
_left" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({left: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->left;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_left" />
                                Y <input id="<?php 
                            echo $prefix;
                            ?>
_top" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({top: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->top;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_top" />
                                <div class="spider_description">In addition you can drag and drop the layer to a desired position.</div>
                              </td> 
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_padding">Padding: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_padding" class="spider_char_input" type="text" onchange="document.getElementById('<?php 
                            echo $prefix;
                            ?>
').style.padding=jQuery(this).val();" value="<?php 
                            echo $layer->padding;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_padding">
                                <div class="spider_description">Use CSS type values.</div>
                              </td>                              
                            </tr>		
                            <tr class="wds_layer_tr" style="display: none;">                             
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_size">Size: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_size" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({fontSize: jQuery(this).val() + 'px', lineHeight: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->size;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_size" /> px
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_fbgcolor">Background Color: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_fbgcolor" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({backgroundColor: wds_hex_rgba(jQuery(this).val(), 100 - jQuery('#<?php 
                            echo $prefix;
                            ?>
_transparent').val())})" value="<?php 
                            echo $layer->fbgcolor;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_fbgcolor" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_color">Color: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({color: '#' + jQuery(this).val()})" value="<?php 
                            echo $layer->color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_color" />
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_transparent">Transparent: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_transparent" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({backgroundColor: wds_hex_rgba(jQuery('#<?php 
                            echo $prefix;
                            ?>
_fbgcolor').val(), 100 - jQuery(this).val())})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->transparent;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_transparent"> %
                                <div class="spider_description">Value must be between 0 to 100.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_ffamily">Font family: </label>
                              </td>
                              <td>
                                <select id="<?php 
                            echo $prefix;
                            ?>
_ffamily" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({fontFamily: jQuery(this).val()})" name="<?php 
                            echo $prefix;
                            ?>
_ffamily">
                                  <?php 
                            foreach ($font_families as $key => $font_family) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->ffamily == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $font_family;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_border_width">Border: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_width" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderWidth: jQuery(this).val()})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->border_width;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_width"> px
                                <select id="<?php 
                            echo $prefix;
                            ?>
_border_style" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderStyle: jQuery(this).val()})" style="width: 80px;" name="<?php 
                            echo $prefix;
                            ?>
_border_style">
                                  <?php 
                            foreach ($border_styles as $key => $border_style) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->border_style == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $border_style;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderColor: '#' + jQuery(this).val()})" value="<?php 
                            echo $layer->border_color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_color" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_fweight">Font weight: </label>
                              </td>
                              <td>
                                <select id="<?php 
                            echo $prefix;
                            ?>
_fweight" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({fontWeight: jQuery(this).val()})" name="<?php 
                            echo $prefix;
                            ?>
_fweight">
                                  <?php 
                            foreach ($font_weights as $key => $fweight) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->fweight == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $fweight;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_border_radius">Radius: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_radius" class="spider_char_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderRadius: jQuery(this).val()})" value="<?php 
                            echo $layer->border_radius;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_radius">
                                <div class="spider_description">Use CSS type values.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_link">Link: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_link" type="text" size="39" value="<?php 
                            echo $layer->link;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_link" />
                                <input id="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer" type="checkbox"  name="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer" <?php 
                            echo $layer->target_attr_layer ? 'checked="checked"' : '';
                            ?>
 value="1" /><label for="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer"> Open in a new window</label>
                                <div class="spider_description">Use http:// and https:// for external links.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_shadow">Shadow: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_shadow" class="spider_char_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({boxShadow: jQuery(this).val()})" value="<?php 
                            echo $layer->shadow;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_shadow" />
                                <div class="spider_description">Use CSS type values (e.g. 10px 10px 5px #888888).</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Published: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published1" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="1" <?php 
                            echo $layer->published ? 'checked="checked"' : '';
                            ?>
 />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published1">Yes</label>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published0" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="0" <?php 
                            echo $layer->published ? '' : 'checked="checked"';
                            ?>
 />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published0">No</label>
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                                <?php 
                            break;
                            /*--------image layer----------*/
                        /*--------image layer----------*/
                        case 'image':
                            ?>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Dimensions: </label>
                              </td>
                              <td>
                                <input type="hidden" name="<?php 
                            echo $prefix;
                            ?>
_image_url" id="<?php 
                            echo $prefix;
                            ?>
_image_url" value="<?php 
                            echo $layer->image_url;
                            ?>
" />
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_width" class="spider_int_input" type="text" onkeyup="wds_scale('#<?php 
                            echo $prefix;
                            ?>
_image_scale', '<?php 
                            echo $prefix;
                            ?>
')" value="<?php 
                            echo $layer->image_width;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_image_width" /> x 
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_height" class="spider_int_input" type="text" onkeyup="wds_scale('#<?php 
                            echo $prefix;
                            ?>
_image_scale', '<?php 
                            echo $prefix;
                            ?>
')" value="<?php 
                            echo $layer->image_height;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_image_height" /> px 
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_scale" type="checkbox" onchange="wds_scale(this, '<?php 
                            echo $prefix;
                            ?>
')" name="<?php 
                            echo $prefix;
                            ?>
_image_scale" <?php 
                            echo $layer->image_scale ? 'checked="checked"' : '';
                            ?>
 /><label for="<?php 
                            echo $prefix;
                            ?>
_image_scale">Scale</label>
                                <input class="button-secondary wds_free_button" type="button" value="Edit Image" onclick="alert('This functionality is disabled in free version.')" />
                                <div class="spider_description">Set width and height of the image.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in">Effect In:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_start" class="spider_int_input" type="text" value="<?php 
                            echo $layer->start;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_start" /> ms 
                                  <div class="spider_description">Start</div>
                                </span>
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" style="width:150px;" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_in as $key => $layer_effect_in) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_in == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_in;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_in').val());" value="<?php 
                            echo $layer->duration_eff_in;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" /> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_alt">Alt: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_alt" type="text" size="39" value="<?php 
                            echo $layer->alt;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_alt" />
                                <div class="spider_description">Set the HTML attribute specified in the IMG tag.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out">Effect Out:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_end" class="spider_int_input" type="text" value="<?php 
                            echo $layer->end;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_end"> ms
                                  <div class="spider_description">Start</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" style="width:150px;" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_out as $key => $layer_effect_out) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_out == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_out;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_out').val());" value="<?php 
                            echo $layer->duration_eff_out;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out"> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_link">Link: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_link" type="text" size="39" value="<?php 
                            echo $layer->link;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_link" />
                                <input id="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer" type="checkbox"  name="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer" <?php 
                            echo $layer->target_attr_layer ? 'checked="checked"' : '';
                            ?>
 value="1" /><label for="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer"> Open in a new window</label>
                                <div class="spider_description">Use http:// and https:// for external links.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_border_width">Border: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_width" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderWidth: jQuery(this).val()})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->border_width;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_width"> px
                                <select id="<?php 
                            echo $prefix;
                            ?>
_border_style" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderStyle: jQuery(this).val()})" style="width: 80px;" name="<?php 
                            echo $prefix;
                            ?>
_border_style">
                                  <?php 
                            foreach ($border_styles as $key => $border_style) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->border_style == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $border_style;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderColor: '#' + jQuery(this).val()})" value="<?php 
                            echo $layer->border_color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_color" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Position: </label>
                              </td>
                              <td>
                                X <input id="<?php 
                            echo $prefix;
                            ?>
_left" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({left: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->left;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_left" />
                                Y <input id="<?php 
                            echo $prefix;
                            ?>
_top" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({top: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->top;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_top" />
                                <div class="spider_description">In addition you can drag and drop the layer to a desired position.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_border_radius">Radius: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_radius" class="spider_char_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderRadius: jQuery(this).val()})" value="<?php 
                            echo $layer->border_radius;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_radius">
                                <div class="spider_description">Use CSS type values.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_imgtransparent">Transparent: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_imgtransparent" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({opacity: (100 - jQuery(this).val()) / 100, filter: 'Alpha(opacity=' + 100 - jQuery(this).val() + ')'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->imgtransparent;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_imgtransparent"> %
                                <div class="spider_description">Value must be between 0 to 100.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_shadow">Shadow: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_shadow" class="spider_char_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({boxShadow: jQuery(this).val()})" value="<?php 
                            echo $layer->shadow;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_shadow" />
                                <div class="spider_description">Use CSS type values.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Published: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published1" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="1" <?php 
                            echo $layer->published ? 'checked="checked"' : '';
                            ?>
 />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published1">Yes</label>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published0" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="0" <?php 
                            echo $layer->published ? '' : 'checked="checked"';
                            ?>
/>
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published0">No</label>
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <?php 
                            break;
                            /*--------social button layer----------*/
                        /*--------social button layer----------*/
                        case 'social':
                            ?>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Position: </label>
                              </td>
                              <td>
                                X <input id="<?php 
                            echo $prefix;
                            ?>
_left" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({left: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->left;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_left" />
                                Y <input id="<?php 
                            echo $prefix;
                            ?>
_top" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({top: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->top;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_top" />
                                <div class="spider_description">In addition you can drag and drop the layer to a desired position.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in">Effect In:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_start" class="spider_int_input" type="text" value="<?php 
                            echo $layer->start;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_start" /> ms 
                                  <div class="spider_description">Start</div>
                                </span>
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" style="width:150px;" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 1); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_in as $key => $layer_effect_in) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_in == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_in;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 1); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_in').val());" value="<?php 
                            echo $layer->duration_eff_in;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" /> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_social_button">Social button: </label>
                              </td>
                              <td>
                                <select id="<?php 
                            echo $prefix;
                            ?>
_social_button" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').attr('class', 'wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable fa fa-' + jQuery(this).val())" name="<?php 
                            echo $prefix;
                            ?>
_social_button">
                                  <?php 
                            foreach ($social_buttons as $key => $social_button) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->social_button == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $social_button;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out">Effect Out:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_end" class="spider_int_input" type="text" value="<?php 
                            echo $layer->end;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_end"> ms
                                  <div class="spider_description">Start</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" style="width:150px;" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 1); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_out as $key => $layer_effect_out) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_out == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_out;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 1); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_out').val());" value="<?php 
                            echo $layer->duration_eff_out;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out"> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_size">Size: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_size" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({fontSize: jQuery(this).val() + 'px', lineHeight: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->size;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_size" /> px
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_color">Color: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({color: '#' + jQuery(this).val()})" value="<?php 
                            echo $layer->color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_color" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_transparent">Transparent: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_transparent" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({opacity: (100 - jQuery(this).val()) / 100, filter: 'Alpha(opacity=' + 100 - jQuery(this).val() + ')'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->transparent;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_transparent" /> %
                                <div class="spider_description">Value must be between 0 to 100.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_hover_color">Hover Color: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_hover_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').hover(function() { jQuery(this).css({color: '#' + jQuery('#<?php 
                            echo $prefix;
                            ?>
_hover_color').val()}); }, function() { jQuery(this).css({color: '#' + jQuery('#<?php 
                            echo $prefix;
                            ?>
_color').val()}); })" value="<?php 
                            echo $layer->hover_color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_hover_color" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Published: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published1" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="1" <?php 
                            echo $layer->published ? 'checked="checked"' : '';
                            ?>
 />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published1">Yes</label>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published0" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="0" <?php 
                            echo $layer->published ? '' : 'checked="checked"';
                            ?>
/>
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published0">No</label>
                                <div class="spider_description"></div>
                              </td>                              
                            </tr>
                                <?php 
                            break;
                        default:
                            break;
                    }
                    ?>
                            <input type="hidden" name="<?php 
                    echo $prefix;
                    ?>
_type" id="<?php 
                    echo $prefix;
                    ?>
_type" value="<?php 
                    echo $layer->type;
                    ?>
" />
                          </tbody>
                          <?php 
                    $layer_ids_string .= $layer->id . ',';
                }
            }
            ?>
                    </table>
                    <input id="slide<?php 
            echo $slide_row->id;
            ?>
_layer_ids_string" name="slide<?php 
            echo $slide_row->id;
            ?>
_layer_ids_string" type="hidden" value="<?php 
            echo $layer_ids_string;
            ?>
" />
                    <input id="slide<?php 
            echo $slide_row->id;
            ?>
_del_layer_ids_string" name="slide<?php 
            echo $slide_row->id;
            ?>
_del_layer_ids_string" type="hidden" value="" />
                  </div>
                    <script>
                      jQuery(document).ready(function() {
                        image_for_next_prev_butt('<?php 
            echo $row->rl_butt_img_or_not;
            ?>
');
                        image_for_bull_butt('<?php 
            echo $row->bull_butt_img_or_not;
            ?>
');						
                        image_for_play_pause_butt('<?php 
            echo $row->play_paus_butt_img_or_not;
            ?>
');							
                        wds_whr('width');
                        wds_drag_layer('<?php 
            echo $slide_row->id;
            ?>
');
                        wds_layer_weights('<?php 
            echo $slide_row->id;
            ?>
');
                        <?php 
            if ($layers_row) {
                foreach ($layers_row as $key => $layer) {
                    if ($layer->type == 'image') {
                        $prefix = 'slide' . $slide_row->id . '_layer' . $layer->id;
                        ?>
                          wds_scale('#<?php 
                        echo $prefix;
                        ?>
_image_scale', '<?php 
                        echo $prefix;
                        ?>
');
                              <?php 
                    }
                }
            }
            ?>
                      });
                    </script>
                    <?php 
            $slide_ids_string .= $slide_row->id . ',';
        }
        ?>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="wds_task_cont">
        <input id="current_id" name="current_id" type="hidden" value="<?php 
        echo $row->id;
        ?>
" />
        <input id="slide_ids_string" name="slide_ids_string" type="hidden" value="<?php 
        echo $slide_ids_string;
        ?>
" />
        <input id="del_slide_ids_string" name="del_slide_ids_string" type="hidden" value="" />
        <input id="nav_tab" name="nav_tab" type="hidden" value="<?php 
        echo WDW_S_Library::get('nav_tab', 'global');
        ?>
" />
        <input id="tab" name="tab" type="hidden" value="<?php 
        echo WDW_S_Library::get('tab', 'slides');
        ?>
" />
        <input id="sub_tab" name="sub_tab" type="hidden" value="<?php 
        echo $sub_tab_type;
        ?>
" />
        <script>
          var spider_uploader = <?php 
        echo $row->spider_uploader;
        ?>
;
        </script>
      </div>
      <input id="task" name="task" type="hidden" value="" />
      <script>
        var wds_preview_url = "<?php 
        echo add_query_arg(array('action' => 'WDSPreview', 'slider_id' => $id ? $id : 'sliderID', 'width' => '700', 'height' => '550', 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
        ?>
";
        var uploader_href = '<?php 
        echo add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'add_update_slide', 'slide_id' => 'slideID', 'layer_id' => 'layerID', 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
        ?>
';		
        var fv = '<?php 
        echo $fv;
        ?>
';
        jQuery(document).ready(function() {
          wds_onload();
        });
        jQuery("#sliders_form").on("click", "a", function(e) {
          e.preventDefault();
        });
      </script>
      <div class="opacity_add_image_url opacity_add_video wds_opacity_video" onclick="jQuery('.opacity_add_video').hide();jQuery('.opacity_add_image_url').hide();"></div>
      <div class="opacity_add_video wds_add_video">
        <input type="text" id="video_url" name="video_url" value="" />
        <input type="button" id="add_video_button" class="button-primary" value="Add" />
        <input type="button" class="button-secondary" onclick="jQuery('.opacity_add_video').hide(); return false;" value="Cancel" />
        <div class="spider_description">Enter YouTube or Vimeo link here.</div>
      </div>
      <div class="opacity_add_image_url wds_resize_image">
        <input type="text" id="image_url_input" name="image_url_input" value="" />
        <input type="button" id="add_image_url_button" class="button-primary" value="Add" />
        <input type="button" class="button-secondary" onclick="jQuery('.opacity_add_image_url').hide(); return false;" value="Cancel" />
        <div class="spider_description">Enter absolute url of the image.</div>
      </div>
    </form>
    <?php 
    }
    public function display($id, $from_shortcode = 0, $wds = 0)
    {
        $resolutions = array(320, 480, 640, 768, 800, 1024, 1366, 1824, 3000);
        require_once WD_S_DIR . '/framework/WDW_S_Library.php';
        $slider_row = $this->model->get_slider_row_data($id);
        if (!$slider_row) {
            echo WDW_S_Library::message(__('There is no slider selected or the slider was deleted.', 'wds'), 'error');
            return;
        }
        $image_right_click = $slider_row->image_right_click;
        $bull_position = $slider_row->bull_position;
        $bull_style_active = str_replace('-o', '', $slider_row->bull_style);
        $bull_style_deactive = $slider_row->bull_style;
        $bull_size_cont = $slider_row->bull_size + $slider_row->bull_margin * 2;
        $slide_rows = $this->model->get_slide_rows_data($id);
        if (!$slide_rows) {
            echo WDW_S_Library::message(__('There are no slides in this slider.', 'wds'), 'error');
        }
        $image_width = $slider_row->width;
        $image_height = $slider_row->height;
        $slides_count = count($slide_rows);
        $slideshow_effect = $slider_row->effect == 'zoomFade' ? 'fade' : $slider_row->effect;
        $slideshow_interval = $slider_row->time_intervval;
        $circle_timer_size = (2 * $slider_row->timer_bar_size - 2) * 2;
        $enable_slideshow_shuffle = $slider_row->shuffle;
        $enable_prev_next_butt = $slider_row->prev_next_butt;
        $enable_play_paus_butt = $slider_row->play_paus_butt;
        if (!$enable_prev_next_butt && !$enable_play_paus_butt) {
            $enable_slideshow_autoplay = 1;
        } else {
            $enable_slideshow_autoplay = $slider_row->autoplay;
        }
        if ($enable_slideshow_autoplay && !$enable_play_paus_butt && $slides_count > 1) {
            $autoplay = TRUE;
        } else {
            $autoplay = FALSE;
        }
        if ($slider_row->navigation == 'always') {
            $navigation = 0;
            $pp_btn_opacity = 1;
        } else {
            $navigation = 4000;
            $pp_btn_opacity = 0;
        }
        $enable_slideshow_music = $slider_row->music;
        $slideshow_music_url = $slider_row->music_url;
        $filmstrip_direction = $slider_row->film_pos == 'right' || $slider_row->film_pos == 'left' ? 'vertical' : 'horizontal';
        $filmstrip_position = $slider_row->film_pos;
        $filmstrip_thumb_margin_hor = 2 * $slider_row->film_tmb_margin;
        if ($filmstrip_position != 'none') {
            if ($filmstrip_direction == 'horizontal') {
                $filmstrip_width = $slider_row->film_thumb_width;
                $filmstrip_height = $slider_row->film_thumb_height;
                $filmstrip_width_in_percent = 0;
            } else {
                $filmstrip_width = $slider_row->film_thumb_width;
                $filmstrip_height = $slider_row->film_thumb_height;
                $filmstrip_width_in_percent = 100 * $slider_row->film_thumb_width / $image_width;
            }
        } else {
            $filmstrip_width = 0;
            $filmstrip_height = 0;
            $filmstrip_width_in_percent = 0;
        }
        $left_or_top = 'left';
        $width_or_height = 'width';
        $outerWidth_or_outerHeight = 'outerWidth';
        if (!($filmstrip_direction == 'horizontal')) {
            $left_or_top = 'top';
            $width_or_height = 'height';
            $outerWidth_or_outerHeight = 'outerHeight';
        }
        if ($enable_slideshow_shuffle || $slider_row->start_slide_num == 0) {
            $slide_ids = array();
            foreach ($slide_rows as $slide_row) {
                $slide_ids[] += $slide_row->id;
            }
            $current_image_id = $slide_ids[array_rand($slide_ids)];
        } else {
            if ($slider_row->start_slide_num > 0 && $slider_row->start_slide_num <= count($slide_rows)) {
                $start_slide_num = $slider_row->start_slide_num - 1;
            } else {
                $start_slide_num = 0;
            }
            $current_image_id = $slide_rows ? $slide_rows[$start_slide_num]->id : 0;
        }
        global $wp;
        $current_url = add_query_arg($wp->query_string, '', home_url($wp->request));
        ?>
    <style>
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 {
        text-align: <?php 
        echo $slider_row->align;
        ?>
;
        margin: <?php 
        echo $slider_row->glb_margin;
        ?>
px <?php 
        echo $slider_row->full_width ? 0 : '';
        ?>
;
        visibility: hidden;
        <?php 
        echo $slider_row->full_width ? 'position: relative;' : '';
        ?>
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
 * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
 {
        background-color: <?php 
        echo WDW_S_Library::spider_hex2rgba($slider_row->background_color, (100 - $slider_row->background_transparent) / 100);
        ?>
;
        border-width: <?php 
        echo $slider_row->glb_border_width;
        ?>
px;
        border-style: <?php 
        echo $slider_row->glb_border_style;
        ?>
;
        border-color: #<?php 
        echo $slider_row->glb_border_color;
        ?>
;
        border-radius: <?php 
        echo $slider_row->glb_border_radius;
        ?>
;
        border-collapse: collapse;
        display: inline-block;
        position: <?php 
        echo $slider_row->full_width ? 'absolute' : 'relative';
        ?>
;
        text-align: center;
        width: 100%;
        max-width: <?php 
        echo $image_width;
        ?>
px;
        box-shadow: <?php 
        echo $slider_row->glb_box_shadow;
        ?>
;
        overflow: hidden;
        z-index: 0;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_image_<?php 
        echo $wds;
        ?>
 {
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        vertical-align: middle;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: <?php 
        echo $slider_row->bg_fit;
        ?>
;
        width: 100%;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_image_container_<?php 
        echo $wds;
        ?>
 {
        display: /*table*/block;
        position: absolute;
        text-align: center;
        <?php 
        echo $filmstrip_position;
        ?>
: <?php 
        echo $filmstrip_direction == 'horizontal' ? $filmstrip_height . 'px' : $filmstrip_width_in_percent . '%';
        ?>
;
        vertical-align: middle;
        width: <?php 
        echo 100 - $filmstrip_width_in_percent;
        ?>
%;
        height: inherit;
      }

      <?php 
        foreach ($resolutions as $key => $resolution) {
            if ($key) {
                $prev_resolution = $resolutions[$key - 1] + 1;
            } else {
                $prev_resolution = 0;
            }
            $media_slide_height = $image_width > $resolution ? $image_height * $resolution / $image_width : $image_height;
            $media_bull_size = (int) ($resolution / 26) > $slider_row->bull_size ? $slider_row->bull_size : (int) ($resolution / 26);
            $media_bull_margin = $slider_row->bull_margin > 2 && $resolution < 481 ? 2 : $slider_row->bull_margin;
            $media_bull_size_cont = $media_bull_size + $media_bull_margin * 2;
            $media_pp_butt_size = (int) ($resolution / 16) > $slider_row->pp_butt_size ? $slider_row->pp_butt_size : (int) ($resolution / 16);
            $media_rl_butt_size = (int) ($resolution / 16) > $slider_row->rl_butt_size ? $slider_row->rl_butt_size : (int) ($resolution / 16);
            ?>
      @media only screen and (min-width: <?php 
            echo $prev_resolution;
            ?>
px) and (max-width: <?php 
            echo $resolution;
            ?>
px) {
        #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_slideshow_dots_thumbnails_<?php 
            echo $wds;
            ?>
 {
          height: <?php 
            echo $media_bull_size_cont;
            ?>
px;
          width: <?php 
            echo $media_bull_size_cont * $slides_count;
            ?>
px;
        }
        #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_slideshow_dots_<?php 
            echo $wds;
            ?>
 {
          font-size: <?php 
            echo $media_bull_size;
            ?>
px;
          width: <?php 
            echo $media_bull_size;
            ?>
px;
          margin: <?php 
            echo $media_bull_margin;
            ?>
px;
          height: <?php 
            echo $media_bull_size;
            ?>
px;
        }
        #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_pp_btn_cont {  
          font-size: <?php 
            echo $media_pp_butt_size;
            ?>
px;
          height: <?php 
            echo $media_pp_butt_size;
            ?>
px;
          width: <?php 
            echo $media_pp_butt_size;
            ?>
px;
        }
        #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_left_btn_cont,
        #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_right_btn_cont {
          height: <?php 
            echo $media_rl_butt_size;
            ?>
px;
          font-size: <?php 
            echo $media_rl_butt_size;
            ?>
px;
          width: <?php 
            echo $media_rl_butt_size;
            ?>
px;
        }
      }
        <?php 
        }
        ?>

      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_video_<?php 
        echo $wds;
        ?>
 {
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        width: 100%;
        vertical-align: middle;
        display: inline-block;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 #wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
 {  
        color: #<?php 
        echo $slider_row->butts_color;
        ?>
;
        cursor: pointer;
        position: relative;
        z-index: 13;
        width: inherit;
        height: inherit;
        font-size: inherit;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 #wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
:hover {  
        color: #<?php 
        echo $slider_row->hover_color;
        ?>
;
        cursor: pointer;
      }
      <?php 
        if ($slider_row->play_paus_butt_img_or_not != 'style') {
            ?>
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_slideshow_play_pause_<?php 
            echo $wds;
            ?>
.fa-pause:before,
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_slideshow_play_pause_<?php 
            echo $wds;
            ?>
.fa-play:before {
          content: "";
      }
	    #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 #wds_slideshow_play_pause_<?php 
            echo $wds;
            ?>
.fa-play {
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->play_butt_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-image 0.2s ease-out;
        -ms-transition: background-image 0.2s ease-out;
        -moz-transition: background-image 0.2s ease-out;
        -webkit-transition: background-image 0.2s ease-out;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 #wds_slideshow_play_pause_<?php 
            echo $wds;
            ?>
.fa-play:before {
        content: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->play_butt_hov_url, ENT_QUOTES));
            ?>
');
        width: 0;
        height: 0;
        visibility: hidden;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 #wds_slideshow_play_pause_<?php 
            echo $wds;
            ?>
.fa-play:hover {
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->play_butt_hov_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover; 
        transition: background-image 0.2s ease-in;
        -ms-transition: background-image 0.2s ease-in;
        -moz-transition: background-image 0.2s ease-in;
        -webkit-transition: background-image 0.2s ease-in;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 #wds_slideshow_play_pause_<?php 
            echo $wds;
            ?>
.fa-pause{
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->paus_butt_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-image 0.2s ease-out;
        -ms-transition: background-image 0.2s ease-out;
        -moz-transition: background-image 0.2s ease-out;
        -webkit-transition: background-image 0.2s ease-out;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 #wds_slideshow_play_pause_<?php 
            echo $wds;
            ?>
.fa-pause:before {
        content: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->paus_butt_hov_url, ENT_QUOTES));
            ?>
');
        width: 0;
        height: 0;
        visibility: hidden;
      }
	    #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 #wds_slideshow_play_pause_<?php 
            echo $wds;
            ?>
.fa-pause:hover {
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->paus_butt_hov_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-image 0.2s ease-in;
        -ms-transition: background-image 0.2s ease-in;
        -moz-transition: background-image 0.2s ease-in;
        -webkit-transition: background-image 0.2s ease-in;
      }
        <?php 
        }
        ?>
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_left-ico_<?php 
        echo $wds;
        ?>
,
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_right-ico_<?php 
        echo $wds;
        ?>
 {
        background-color: <?php 
        echo WDW_S_Library::spider_hex2rgba($slider_row->nav_bg_color, (100 - $slider_row->butts_transparent) / 100);
        ?>
;
        border-radius: <?php 
        echo $slider_row->nav_border_radius;
        ?>
;
        border: <?php 
        echo $slider_row->nav_border_width;
        ?>
px <?php 
        echo $slider_row->nav_border_style;
        ?>
 #<?php 
        echo $slider_row->nav_border_color;
        ?>
;
        border-collapse: separate;
        color: #<?php 
        echo $slider_row->butts_color;
        ?>
;
        left: 0;
        top: 0;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        cursor: pointer;
        line-height: 0;
        width: inherit;
        height: inherit;
        font-size: inherit;
        position: absolute;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_left-ico_<?php 
        echo $wds;
        ?>
 {
        left: -<?php 
        echo $navigation;
        ?>
px;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_right-ico_<?php 
        echo $wds;
        ?>
 {
        left: <?php 
        echo $navigation;
        ?>
px;
      }
      <?php 
        if ($slider_row->rl_butt_img_or_not != 'style') {
            ?>
	    #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_left-ico_<?php 
            echo $wds;
            ?>
 {
        left: -<?php 
            echo $navigation;
            ?>
px;
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->left_butt_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-image 0.2s ease-out;
        -ms-transition: background-image 0.2s ease-out;
        -moz-transition: background-image 0.2s ease-out;
        -webkit-transition: background-image 0.2s ease-out;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_left-ico_<?php 
            echo $wds;
            ?>
:before {
        content: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->left_butt_hov_url, ENT_QUOTES));
            ?>
');
        width: 0;
        height: 0;
        visibility: hidden;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_left-ico_<?php 
            echo $wds;
            ?>
:hover {
        left: -<?php 
            echo $navigation;
            ?>
px;
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->left_butt_hov_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover; 
        transition: background-image 0.2s ease-in;
        -ms-transition: background-image 0.2s ease-in;
        -moz-transition: background-image 0.2s ease-in;
        -webkit-transition: background-image 0.2s ease-in;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_right-ico_<?php 
            echo $wds;
            ?>
 {
        left: <?php 
            echo $navigation;
            ?>
px;
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->right_butt_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-image 0.2s ease-out;
        -ms-transition: background-image 0.2s ease-out;
        -moz-transition: background-image 0.2s ease-out;
        -webkit-transition: background-image 0.2s ease-out;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_right-ico_<?php 
            echo $wds;
            ?>
:before {
        content: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->right_butt_hov_url, ENT_QUOTES));
            ?>
');
        width: 0;
        height: 0;
        visibility: hidden;
      }
	    #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_right-ico_<?php 
            echo $wds;
            ?>
:hover {
        left: <?php 
            echo $navigation;
            ?>
px;
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->right_butt_hov_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-image 0.2s ease-in;
        -ms-transition: background-image 0.2s ease-in;
        -moz-transition: background-image 0.2s ease-in;
        -webkit-transition: background-image 0.2s ease-in;
      }
        <?php 
        }
        ?>
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 #wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
 {
        opacity: <?php 
        echo $pp_btn_opacity;
        ?>
;
        filter: "Alpha(opacity=<?php 
        echo $pp_btn_opacity * 100;
        ?>
)";
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_left-ico_<?php 
        echo $wds;
        ?>
:hover,
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_right-ico_<?php 
        echo $wds;
        ?>
:hover {
        color: #<?php 
        echo $slider_row->hover_color;
        ?>
;
        cursor: pointer;
      }

      /* Filmstrip*/
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
 {
        background-color: #<?php 
        echo $slider_row->film_bg_color;
        ?>
 !important;
        display: <?php 
        echo $filmstrip_direction == 'horizontal' ? '/*table*/block' : 'block';
        ?>
;
        height: <?php 
        echo $filmstrip_direction == 'horizontal' ? $filmstrip_height . 'px' : '100%';
        ?>
;
        position: absolute;
        width: <?php 
        echo $filmstrip_direction == 'horizontal' ? '100%' : $filmstrip_width_in_percent . '%';
        ?>
;
        z-index: 10105;
        <?php 
        echo $filmstrip_position;
        ?>
: 0;
        overflow: hidden;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_<?php 
        echo $wds;
        ?>
 {
        overflow: hidden;
        position: absolute;
        <?php 
        echo $width_or_height;
        ?>
: 100%;
        width: 100%;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
 {
        height: <?php 
        echo $filmstrip_direction == 'horizontal' ? 'inherit' : ($filmstrip_height + $filmstrip_thumb_margin_hor) * $slides_count . 'px';
        ?>
;
        <?php 
        echo $left_or_top;
        ?>
: 0px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        width: <?php 
        echo $filmstrip_direction == 'horizontal' ? ($filmstrip_width + $filmstrip_thumb_margin_hor) * $slides_count . 'px' : '100%';
        ?>
;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_thumbnail_<?php 
        echo $wds;
        ?>
 {
        position: relative;
        background: none;
        cursor: pointer;
        float: left;
        height: <?php 
        echo $filmstrip_direction == 'horizontal' ? 'inherit' : $filmstrip_height . 'px';
        ?>
;
        margin: <?php 
        echo $filmstrip_direction == 'horizontal' ? '0 ' . $slider_row->film_tmb_margin . 'px' : $slider_row->film_tmb_margin . 'px 0';
        ?>
;
        width: <?php 
        echo $filmstrip_direction == 'horizontal' ? $filmstrip_width . 'px' : '100%';
        ?>
;
        overflow: hidden;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
 div {
        opacity: 1;
        filter: Alpha(opacity=100);
        border: <?php 
        echo $slider_row->film_act_border_width;
        ?>
px <?php 
        echo $slider_row->film_act_border_style;
        ?>
 #<?php 
        echo $slider_row->film_act_border_color;
        ?>
;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
 {
        opacity: <?php 
        echo number_format((100 - $slider_row->film_dac_transparent) / 100, 2, ".", "");
        ?>
;
        filter: Alpha(opacity=<?php 
        echo 100 - $slider_row->film_dac_transparent;
        ?>
);
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_thumbnail_img_<?php 
        echo $wds;
        ?>
 {
        display: block;
        opacity: 1;
        filter: Alpha(opacity=100);
        padding: 0 !important;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: <?php 
        echo $filmstrip_direction == 'horizontal' ? $filmstrip_height . 'px' : $filmstrip_height . 'px';
        ?>
;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_left_<?php 
        echo $wds;
        ?>
,
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_right_<?php 
        echo $wds;
        ?>
 {
        background-color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
        display: table;
        vertical-align: middle;
        <?php 
        echo $width_or_height;
        ?>
: 20px;
        z-index: 10000;
        position: absolute;
        <?php 
        echo $filmstrip_direction == 'horizontal' ? 'height: inherit' : 'width: 100%';
        ?>
; 
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_left_<?php 
        echo $wds;
        ?>
 {
        <?php 
        echo $left_or_top;
        ?>
: 0;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_right_<?php 
        echo $wds;
        ?>
 {
        <?php 
        echo $filmstrip_direction == 'horizontal' ? 'right' : 'bottom';
        ?>
: 0;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_left_<?php 
        echo $wds;
        ?>
 i,
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_filmstrip_right_<?php 
        echo $wds;
        ?>
 i {
        color: #FFFFFF;
        display: table-cell;
        font-size: 20px;
        vertical-align: middle;
      }

      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_none_selectable_<?php 
        echo $wds;
        ?>
 {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slide_container_<?php 
        echo $wds;
        ?>
 {
        display: table-cell;
        margin: 0 auto;
        position: absolute;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slide_bg_<?php 
        echo $wds;
        ?>
 {
        margin: 0 auto;
        width: inherit;
        height: inherit;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slider_<?php 
        echo $wds;
        ?>
 {
        height: inherit;
        width: inherit;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_image_spun_<?php 
        echo $wds;
        ?>
 {
        width: inherit;
        height: inherit;
        display: table-cell;
        filter: Alpha(opacity=100);
        opacity: 1;
        position: absolute;
        vertical-align: middle;
        z-index: 2;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_image_second_spun_<?php 
        echo $wds;
        ?>
 {
        width: inherit;
        height: inherit;
        display: table-cell;
        filter: Alpha(opacity=0);
        opacity: 0;
        position: absolute;
        vertical-align: middle;
        z-index: 1;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_grid_<?php 
        echo $wds;
        ?>
 {
        display: none;
        height: 100%;
        overflow: hidden;
        position: absolute;
        width: 100%;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_gridlet_<?php 
        echo $wds;
        ?>
 {
        opacity: 1;
        filter: Alpha(opacity=100);
        position: absolute;
      }

      /* Dots.*/
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_dots_container_<?php 
        echo $wds;
        ?>
 {
        display: block;
        overflow: hidden;
        position: absolute;
        width: 100%;
        <?php 
        echo $bull_position;
        ?>
: <?php 
        echo $bull_position == $filmstrip_position ? $filmstrip_height : 0;
        ?>
px;
        /*z-index: 17;*/
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_dots_thumbnails_<?php 
        echo $wds;
        ?>
 {
        left: 0px;
        font-size: 0;
        margin: 0 auto;
        position: relative;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_dots_<?php 
        echo $wds;
        ?>
 {
        display: inline-block;
        position: relative;
        color: #<?php 
        echo $slider_row->bull_color;
        ?>
;
        cursor: pointer;
        z-index: 17;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_dots_active_<?php 
        echo $wds;
        ?>
 {
        color: #<?php 
        echo $slider_row->bull_act_color;
        ?>
;
        opacity: 1;
        filter: Alpha(opacity=100);
        <?php 
        if ($slider_row->bull_butt_img_or_not != 'style') {
            ?>
        display: inline-block;
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->bullets_img_main_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-image 0.2s ease-in;
        -ms-transition: background-image 0.2s ease-in;
        -moz-transition: background-image 0.2s ease-in;
        -webkit-transition: background-image 0.2s ease-in;
          <?php 
        }
        ?>
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_dots_deactive_<?php 
        echo $wds;
        ?>
 {
        <?php 
        if ($slider_row->bull_butt_img_or_not != 'style') {
            ?>
        display: inline-block;
        background-image: url('<?php 
            echo addslashes(htmlspecialchars_decode($slider_row->bullets_img_hov_url, ENT_QUOTES));
            ?>
');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-image 0.2s ease-in;
        -ms-transition: background-image 0.2s ease-in;
        -moz-transition: background-image 0.2s ease-in;
        -webkit-transition: background-image 0.2s ease-in;
          <?php 
        }
        ?>
      }

      <?php 
        if ($slider_row->timer_bar_type == 'top' || $slider_row->timer_bar_type == 'bottom') {
            ?>
      /* Line timer.*/
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_line_timer_container_<?php 
            echo $wds;
            ?>
 {
        display: block;
        position: absolute;
        overflow: hidden;
        <?php 
            echo $slider_row->timer_bar_type;
            ?>
: <?php 
            echo $filmstrip_position == $slider_row->timer_bar_type ? $filmstrip_height : 0;
            ?>
px;
        z-index: 16;
        width: 100%;
        height: <?php 
            echo $slider_row->timer_bar_size;
            ?>
px;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_line_timer_<?php 
            echo $wds;
            ?>
 {
        z-index: 17;
        width: 0;
        height: <?php 
            echo $slider_row->timer_bar_size;
            ?>
px;
        background: #<?php 
            echo $slider_row->timer_bar_color;
            ?>
;
        opacity: <?php 
            echo number_format((100 - $slider_row->timer_bar_transparent) / 100, 2, ".", "");
            ?>
;
        filter: alpha(opacity=<?php 
            echo 100 - $slider_row->timer_bar_transparent;
            ?>
);
      }
        <?php 
        } elseif ($slider_row->timer_bar_type != 'none') {
            ?>
      /* Circle timer.*/
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_line_timer_container_<?php 
            echo $wds;
            ?>
 {
        display: block;
        position: absolute;
        overflow: hidden;
        <?php 
            echo $slider_row->timer_bar_type;
            ?>
: 0;
        z-index: 16;
        width: 100%;
        height: <?php 
            echo $circle_timer_size;
            ?>
px;
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_circle_timer_container_<?php 
            echo $wds;
            ?>
 {
        display: block;
        position: absolute;
        overflow: hidden;
        z-index: 16;
        width: 100%;
        <?php 
            switch ($slider_row->timer_bar_type) {
                case 'circle_top_right':
                    echo 'top: 0px; text-align:right;';
                    break;
                case 'circle_top_left':
                    echo 'top: 0px; text-align:left;';
                    break;
                case 'circle_bot_right':
                    echo 'bottom: 0px; text-align:right;';
                    break;
                case 'circle_bot_left':
                    echo 'bottom: 0px; text-align:left;';
                    break;
                default:
                    'top: 0px; text-align:right;';
            }
            ?>
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_circle_timer_container_<?php 
            echo $wds;
            ?>
 .wds_circle_timer_<?php 
            echo $wds;
            ?>
 {
        display: inline-block;
        width: <?php 
            echo $circle_timer_size;
            ?>
px;
        height: <?php 
            echo $circle_timer_size;
            ?>
px;
        position: relative;
        opacity: <?php 
            echo number_format((100 - $slider_row->timer_bar_transparent) / 100, 2, ".", "");
            ?>
;
        filter: alpha(opacity=<?php 
            echo 100 - $slider_row->timer_bar_transparent;
            ?>
);
      }
      #wds_container1_<?php 
            echo $wds;
            ?>
 #wds_container2_<?php 
            echo $wds;
            ?>
 .wds_circle_timer_container_<?php 
            echo $wds;
            ?>
 .wds_circle_timer_<?php 
            echo $wds;
            ?>
 .wds_circle_timer_parts_<?php 
            echo $wds;
            ?>
 {
        display: table;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        position: relative;
      }
      .wds_circle_timer_part_<?php 
            echo $wds;
            ?>
 {
        display: table-cell;
        width: 50%;
        height: 100%;
        overflow: hidden !important;
      }
      .wds_circle_timer_small_parts_<?php 
            echo $wds;
            ?>
 {
        display: block;
        width: 100%;
        height: 50%;
        background: #<?php 
            echo $slider_row->timer_bar_color;
            ?>
;
        position: relative;
      }
      .wds_circle_timer_center_cont_<?php 
            echo $wds;
            ?>
 {
        display: table;
        width: <?php 
            echo $circle_timer_size;
            ?>
px;
        height: <?php 
            echo $circle_timer_size;
            ?>
px;
        position: absolute;
        text-align: center;
        top:0px;
        vertical-align:middle;
      }
      .wds_circle_timer_center_<?php 
            echo $wds;
            ?>
 {
        display: table-cell;
        width: 100%; 
        height: 100%;
        text-align: center;
        line-height: 0px !important;
        vertical-align: middle;
      }
      .wds_circle_timer_center_<?php 
            echo $wds;
            ?>
 div {
        display: inline-block;
        width: <?php 
            echo $circle_timer_size / 2 - 2;
            ?>
px;
        height: <?php 
            echo $circle_timer_size / 2 - 2;
            ?>
px;		
        background-color: #FFFFFF;
        border-radius: 100%;
        z-index: 300;
        position: relative;
      }

        <?php 
        }
        ?>

      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_image_spun1_<?php 
        echo $wds;
        ?>
 {
        display: table; 
        width: inherit; 
        height: inherit;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_slideshow_image_spun2_<?php 
        echo $wds;
        ?>
 {
        display: table-cell; 
        vertical-align: middle; 
        text-align: center;
        overflow: hidden;
      }
      #wds_container1_<?php 
        echo $wds;
        ?>
 #wds_container2_<?php 
        echo $wds;
        ?>
 .wds_video_layer_frame_<?php 
        echo $wds;
        ?>
 {
        max-height: 100%;
        max-width: 100%;
        width: 100%;
        height: 100%;
      }
      <?php 
        echo $slider_row->css;
        ?>
    </style>
    <script>
      var wds_data_<?php 
        echo $wds;
        ?>
 = [];
      var wds_event_stack_<?php 
        echo $wds;
        ?>
 = [];
      var wds_clear_layers_effects_in_<?php 
        echo $wds;
        ?>
 = [];
      var wds_clear_layers_effects_out_<?php 
        echo $wds;
        ?>
 = [];
      var wds_clear_layers_effects_out_before_change_<?php 
        echo $wds;
        ?>
 = [];
      if (<?php 
        echo $slider_row->layer_out_next;
        ?>
) {
        var wds_duration_for_change_<?php 
        echo $wds;
        ?>
 = 500;
        var wds_duration_for_clear_effects_<?php 
        echo $wds;
        ?>
 = 530;
      }
      else {
        var wds_duration_for_change_<?php 
        echo $wds;
        ?>
 = 0;
        var wds_duration_for_clear_effects_<?php 
        echo $wds;
        ?>
 = 0;
      }
      <?php 
        foreach ($slide_rows as $key => $slide_row) {
            ?>
        wds_clear_layers_effects_in_<?php 
            echo $wds;
            ?>
["<?php 
            echo $key;
            ?>
"] = [];
        wds_clear_layers_effects_out_<?php 
            echo $wds;
            ?>
["<?php 
            echo $key;
            ?>
"] = [];
        wds_clear_layers_effects_out_before_change_<?php 
            echo $wds;
            ?>
["<?php 
            echo $key;
            ?>
"] = [];
        wds_data_<?php 
            echo $wds;
            ?>
["<?php 
            echo $key;
            ?>
"] = [];
        wds_data_<?php 
            echo $wds;
            ?>
["<?php 
            echo $key;
            ?>
"]["id"] = "<?php 
            echo $slide_row->id;
            ?>
";
        wds_data_<?php 
            echo $wds;
            ?>
["<?php 
            echo $key;
            ?>
"]["image_url"] = "<?php 
            echo addslashes(htmlspecialchars_decode($slide_row->image_url, ENT_QUOTES));
            ?>
";
        wds_data_<?php 
            echo $wds;
            ?>
["<?php 
            echo $key;
            ?>
"]["thumb_url"] = "<?php 
            echo addslashes(htmlspecialchars_decode($slide_row->thumb_url, ENT_QUOTES));
            ?>
";
        wds_data_<?php 
            echo $wds;
            ?>
["<?php 
            echo $key;
            ?>
"]["is_video"] = "<?php 
            echo $slide_row->type == "YOUTUBE" || $slide_row->type == "VIMEO";
            ?>
";
        wds_data_<?php 
            echo $wds;
            ?>
["<?php 
            echo $key;
            ?>
"]["slide_layers_count"] = 0;
        <?php 
            $layers_row = $this->model->get_layers_row_data($slide_row->id);
            if ($layers_row) {
                foreach ($layers_row as $layer_key => $layer) {
                    ?>
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_id"] = "<?php 
                    echo $layer->id;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_layer_effect_in"] = "<?php 
                    echo $layer->layer_effect_in;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_duration_eff_in"] = "<?php 
                    echo $layer->duration_eff_in;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_layer_effect_out"] = "<?php 
                    echo $layer->layer_effect_out;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_duration_eff_out"] = "<?php 
                    echo $layer->duration_eff_out;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_social_button"] = "<?php 
                    echo $layer->social_button;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_start"] = "<?php 
                    echo $layer->start;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_end"] = "<?php 
                    echo $layer->end;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_type"] = "<?php 
                    echo $layer->type;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["layer_<?php 
                    echo $layer_key;
                    ?>
_video_autoplay"] = "<?php 
                    echo $layer->image_scale;
                    ?>
";
            wds_data_<?php 
                    echo $wds;
                    ?>
["<?php 
                    echo $key;
                    ?>
"]["slide_layers_count"] ++;
            <?php 
                }
            }
        }
        ?>
    
    </script>
    <div id="wds_container1_<?php 
        echo $wds;
        ?>
">
      <div class="wds_loading">
        <img src="<?php 
        echo WD_S_URL . '/images/ajax_loader.png';
        ?>
" class="wds_loading_img" style="float: none; width:50px;" />
      </div>
      <div id="wds_container2_<?php 
        echo $wds;
        ?>
">
        <div class="wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
">
          <?php 
        $current_pos = 0;
        if ($filmstrip_position != 'none' && $slides_count > 1) {
            ?>
          <div class="wds_slideshow_filmstrip_container_<?php 
            echo $wds;
            ?>
">
            <div class="wds_slideshow_filmstrip_left_<?php 
            echo $wds;
            ?>
"><i class="fa <?php 
            echo $filmstrip_direction == 'horizontal' ? 'fa-angle-left' : 'fa-angle-up';
            ?>
"></i></div>
            <div class="wds_slideshow_filmstrip_<?php 
            echo $wds;
            ?>
">
              <div class="wds_slideshow_filmstrip_thumbnails_<?php 
            echo $wds;
            ?>
">
                <?php 
            foreach ($slide_rows as $key => $slide_row) {
                if ($slide_row->id == $current_image_id) {
                    $current_pos = $key * (($filmstrip_direction == 'horizontal' ? $filmstrip_width : $filmstrip_height) + $filmstrip_thumb_margin_hor);
                    $current_key = $key;
                }
                ?>
                <div id="wds_filmstrip_thumbnail_<?php 
                echo $key;
                ?>
_<?php 
                echo $wds;
                ?>
" class="wds_slideshow_filmstrip_thumbnail_<?php 
                echo $wds;
                ?>
 <?php 
                echo $slide_row->id == $current_image_id ? 'wds_slideshow_thumb_active_' . $wds : 'wds_slideshow_thumb_deactive_' . $wds;
                ?>
">
                  <div onclick="wds_change_image_<?php 
                echo $wds;
                ?>
(parseInt(jQuery('#wds_current_image_key_<?php 
                echo $wds;
                ?>
').val()), '<?php 
                echo $key;
                ?>
', wds_data_<?php 
                echo $wds;
                ?>
)"
                       image_id="<?php 
                echo $slide_row->id;
                ?>
"
                       image_key="<?php 
                echo $key;
                ?>
"
                       class="wds_slideshow_filmstrip_thumbnail_img_<?php 
                echo $wds;
                ?>
"
                       style="background-image: url('<?php 
                echo addslashes(htmlspecialchars_decode($slide_row->thumb_url, ENT_QUOTES));
                ?>
');"></div>
                </div>
                <?php 
            }
            ?>
              </div>
            </div>
            <div class="wds_slideshow_filmstrip_right_<?php 
            echo $wds;
            ?>
"><i class="fa <?php 
            echo $filmstrip_direction == 'horizontal' ? 'fa-angle-right' : 'fa-angle-down';
            ?>
"></i></div>
          </div>
            <?php 
        }
        ?>
          <div id="wds_slideshow_image_container_<?php 
        echo $wds;
        ?>
" class="wds_slideshow_image_container_<?php 
        echo $wds;
        ?>
">
            <?php 
        if ($bull_position != 'none' && $slides_count > 1) {
            ?>
            <div class="wds_slideshow_dots_container_<?php 
            echo $wds;
            ?>
">
              <div class="wds_slideshow_dots_thumbnails_<?php 
            echo $wds;
            ?>
">
                <?php 
            foreach ($slide_rows as $key => $slide_row) {
                if ($slider_row->bull_butt_img_or_not == 'style') {
                    ?>
                <i id="wds_dots_<?php 
                    echo $key;
                    ?>
_<?php 
                    echo $wds;
                    ?>
"
                   class="wds_slideshow_dots_<?php 
                    echo $wds;
                    ?>
 fa <?php 
                    echo $slide_row->id == $current_image_id ? $bull_style_active . ' wds_slideshow_dots_active_' . $wds : $bull_style_deactive . ' wds_slideshow_dots_deactive_' . $wds;
                    ?>
"
                   onclick="wds_change_image_<?php 
                    echo $wds;
                    ?>
(parseInt(jQuery('#wds_current_image_key_<?php 
                    echo $wds;
                    ?>
').val()), '<?php 
                    echo $key;
                    ?>
', wds_data_<?php 
                    echo $wds;
                    ?>
)" image_id="<?php 
                    echo $slide_row->id;
                    ?>
"
                   image_key="<?php 
                    echo $key;
                    ?>
">
                </i>
                    <?php 
                } else {
                    ?>
                <span id="wds_dots_<?php 
                    echo $key;
                    ?>
_<?php 
                    echo $wds;
                    ?>
"
                      class="wds_slideshow_dots_<?php 
                    echo $wds;
                    ?>
 <?php 
                    echo $slide_row->id == $current_image_id ? ' wds_slideshow_dots_active_' . $wds : ' wds_slideshow_dots_deactive_' . $wds;
                    ?>
"
                      onclick="wds_change_image_<?php 
                    echo $wds;
                    ?>
(parseInt(jQuery('#wds_current_image_key_<?php 
                    echo $wds;
                    ?>
').val()), '<?php 
                    echo $key;
                    ?>
', wds_data_<?php 
                    echo $wds;
                    ?>
)" 
                      image_id="<?php 
                    echo $slide_row->id;
                    ?>
" image_key="<?php 
                    echo $key;
                    ?>
">
                </span>
                    <?php 
                }
            }
            ?>
              </div>
            </div>
              <?php 
        }
        if ($slider_row->timer_bar_type == 'top' || $slider_row->timer_bar_type == 'bottom') {
            ?>
              <div class="wds_line_timer_container_<?php 
            echo $wds;
            ?>
"><div class="wds_line_timer_<?php 
            echo $wds;
            ?>
"></div></div>			
              <?php 
        } elseif ($slider_row->timer_bar_type != 'none') {
            ?>
              <div class="wds_circle_timer_container_<?php 
            echo $wds;
            ?>
">
                <div class="wds_circle_timer_<?php 
            echo $wds;
            ?>
">
                  <div class="wds_circle_timer_parts_<?php 
            echo $wds;
            ?>
">
                    <div class="wds_circle_timer_part_<?php 
            echo $wds;
            ?>
">
                      <div class="wds_circle_timer_small_parts_<?php 
            echo $wds;
            ?>
 animated" style="border-radius:100% 0% 0% 0%;" id="top_left_<?php 
            echo $wds;
            ?>
"></div>
                      <div class="wds_circle_timer_small_parts_<?php 
            echo $wds;
            ?>
 animated" style="border-radius:0% 0% 0% 100%;z-index:150;" id="bottom_left_<?php 
            echo $wds;
            ?>
"></div>
                    </div>
                    <div class="wds_circle_timer_part_<?php 
            echo $wds;
            ?>
">
                      <div class="wds_circle_timer_small_parts_<?php 
            echo $wds;
            ?>
 animated" style="border-radius:0% 100% 0% 0%;" id="top_right_<?php 
            echo $wds;
            ?>
"></div>
                      <div class="wds_circle_timer_small_parts_<?php 
            echo $wds;
            ?>
 animated" style="border-radius:0% 0% 100% 0%;" id="bottom_right_<?php 
            echo $wds;
            ?>
"></div>
                    </div>
                  </div>
                  <div class="wds_circle_timer_center_cont_<?php 
            echo $wds;
            ?>
">
                     <div class="wds_circle_timer_center_<?php 
            echo $wds;
            ?>
">
                      <div></div>
                     </div> 
                  </div>					
                </div>
              </div>
              <?php 
        }
        ?>
			
            <div class="wds_slide_container_<?php 
        echo $wds;
        ?>
">
              <div class="wds_slide_bg_<?php 
        echo $wds;
        ?>
">
                <div class="wds_slider_<?php 
        echo $wds;
        ?>
">
                <?php 
        foreach ($slide_rows as $key => $slide_row) {
            $is_video = $slide_row->type == "YOUTUBE" || $slide_row->type == "VIMEO";
            if ($slide_row->id == $current_image_id) {
                if ($is_video) {
                    $play_pause_button_display = 'none';
                } else {
                    $play_pause_button_display = '';
                }
                $current_key = $key;
                $image_div_num = '';
            } else {
                $image_div_num = '_second';
            }
            $share_image_url = urlencode($is_video ? $slide_row->thumb_url : $slide_row->image_url);
            $share_url = add_query_arg(array('action' => 'WDSShare', 'image_id' => $slide_row->id, 'curr_url' => $current_url), admin_url('admin-ajax.php'));
            ?>
                  <span class="wds_slideshow_image<?php 
            echo $image_div_num;
            ?>
_spun_<?php 
            echo $wds;
            ?>
" id="image_id_<?php 
            echo $wds;
            ?>
_<?php 
            echo $slide_row->id;
            ?>
">
                    <span class="wds_slideshow_image_spun1_<?php 
            echo $wds;
            ?>
">
                      <span class="wds_slideshow_image_spun2_<?php 
            echo $wds;
            ?>
">
                        <?php 
            if (!$is_video) {
                ?>
                        <div img_id="wds_slideshow_image<?php 
                echo $image_div_num;
                ?>
_<?php 
                echo $wds;
                ?>
"
                             class="wds_slideshow_image_<?php 
                echo $wds;
                ?>
"
                             onclick="<?php 
                echo $slide_row->link ? 'window.open(\'' . $slide_row->link . '\', \'' . ($slide_row->target_attr_slide ? '_blank' : '_self') . '\')' : '';
                ?>
"
                             style="<?php 
                echo $slide_row->link ? 'cursor: pointer;' : '';
                echo !$slider_row->preload_images || $image_div_num == '' ? "background-image: url('" . addslashes(htmlspecialchars_decode($slide_row->image_url, ENT_QUOTES)) . "');" : "";
                ?>
">
                          <?php 
            } else {
                ?>
                        <div img_id="wds_slideshow_image<?php 
                echo $image_div_num;
                ?>
_<?php 
                echo $wds;
                ?>
" class="wds_slideshow_video_<?php 
                echo $wds;
                ?>
" image_id="<?php 
                echo $slide_row->id;
                ?>
">
                          <iframe class="wds_video_frame_<?php 
                echo $wds;
                ?>
" src="<?php 
                echo $slide_row->type == "YOUTUBE" ? "//www.youtube.com/embed/" . $slide_row->image_url . "?enablejsapi=1&wmode=transparent" : "//player.vimeo.com/video/" . $slide_row->image_url . "?api=1";
                ?>
" frameborder="0" allowfullscreen style="width:100%; height:100%;"></iframe>
                          <?php 
            }
            $layers_row = $this->model->get_layers_row_data($slide_row->id);
            if ($layers_row) {
                foreach ($layers_row as $key => $layer) {
                    if ($layer->published) {
                        $prefix = 'wds_' . $wds . '_slide' . $slide_row->id . '_layer' . $layer->id;
                        $left_percent = $slider_row->width ? 100 * $layer->left / $slider_row->width : 0;
                        $top_percent = $slider_row->height ? 100 * $layer->top / $slider_row->height : 0;
                        $video_width_percent = $slider_row->width ? 100 * $layer->image_width / $slider_row->width : 0;
                        $video_height_percent = $slider_row->height ? 100 * $layer->image_height / $slider_row->height : 0;
                        switch ($layer->type) {
                            case 'text':
                                ?>
                                  <style>
                                    #wds_container1_<?php 
                                echo $wds;
                                ?>
 #wds_container2_<?php 
                                echo $wds;
                                ?>
 #<?php 
                                echo $prefix;
                                ?>
 {
                                      font-size: <?php 
                                echo $layer->size;
                                ?>
px;
                                      line-height: 1.25em;
                                      padding: <?php 
                                echo $layer->padding;
                                ?>
;
                                    }
                                    #wds_container1_<?php 
                                echo $wds;
                                ?>
 #wds_container2_<?php 
                                echo $wds;
                                ?>
 .wds_layer_<?php 
                                echo $layer->id;
                                ?>
{
                                      opacity: <?php 
                                echo $layer->layer_effect_in != 'none' ? '0 !important' : '1';
                                ?>
;
                                      filter: "Alpha(opacity=<?php 
                                echo $layer->layer_effect_in != 'none' ? '0' : '100';
                                ?>
)" !important;
                                    }
                                  </style>
                                <span class="wds_layer_<?php 
                                echo $layer->id;
                                ?>
" id="<?php 
                                echo $prefix;
                                ?>
" wds_fsize="<?php 
                                echo $layer->size;
                                ?>
"
                                      style="<?php 
                                echo $layer->image_width ? 'width: ' . $layer->image_width . '%; ' : '';
                                ?>
                                             <?php 
                                echo $layer->image_height ? 'height: ' . $layer->image_height . '%; ' : '';
                                ?>
                                             word-break: <?php 
                                echo $layer->image_scale ? 'keep-all' : 'break-all';
                                ?>
;
                                             text-align: initial; <?php 
                                echo $layer->link ? 'cursor: pointer; ' : '';
                                ?>
                                             opacity: 1;
                                             filter: 'Alpha(opacity=100)';
                                             display: inline-block;
                                             position: absolute;
                                             left: <?php 
                                echo $left_percent;
                                ?>
%;
                                             top: <?php 
                                echo $top_percent;
                                ?>
%;
                                             z-index: <?php 
                                echo $layer->depth;
                                ?>
;
                                             color: #<?php 
                                echo $layer->color;
                                ?>
;
                                             font-family: <?php 
                                echo $layer->ffamily;
                                ?>
;
                                             font-weight: <?php 
                                echo $layer->fweight;
                                ?>
;
                                             background-color: <?php 
                                echo WDW_S_Library::spider_hex2rgba($layer->fbgcolor, (100 - $layer->transparent) / 100);
                                ?>
;
                                             border: <?php 
                                echo $layer->border_width;
                                ?>
px <?php 
                                echo $layer->border_style;
                                ?>
 #<?php 
                                echo $layer->border_color;
                                ?>
;
                                             border-radius: <?php 
                                echo $layer->border_radius;
                                ?>
;
                                             box-shadow: <?php 
                                echo $layer->shadow;
                                ?>
"
                                      onclick="<?php 
                                echo $layer->link ? 'window.open(\'' . $layer->link . '\', \'' . ($layer->target_attr_layer ? '_blank' : '_self') . '\');' : '';
                                ?>
event.stopPropagation();"><?php 
                                echo str_replace(array("\r\n", "\r", "\n"), "<br>", $layer->text);
                                ?>
</span>
                                  <?php 
                                break;
                            case 'image':
                                ?>
                                  <style>
                                    #wds_container1_<?php 
                                echo $wds;
                                ?>
 #wds_container2_<?php 
                                echo $wds;
                                ?>
 .wds_layer_<?php 
                                echo $layer->id;
                                ?>
{
                                      opacity: <?php 
                                echo $layer->layer_effect_in != 'none' ? '0 !important' : '1';
                                ?>
;
                                      filter: "Alpha(opacity=<?php 
                                echo $layer->layer_effect_in != 'none' ? '0' : '100';
                                ?>
)" !important;
                                    }
                                  </style>
                                <img class="wds_layer_<?php 
                                echo $layer->id;
                                ?>
" id="<?php 
                                echo $prefix;
                                ?>
" src="<?php 
                                echo $layer->image_url;
                                ?>
"
                                     style="<?php 
                                echo $layer->link ? 'cursor: pointer; ' : '';
                                ?>
                                            opacity: <?php 
                                echo number_format((100 - $layer->imgtransparent) / 100, 2, ".", "");
                                ?>
;
                                            filter: Alpha(opacity=<?php 
                                echo 100 - $layer->imgtransparent;
                                ?>
);
                                            position: absolute;
                                            left: <?php 
                                echo $left_percent;
                                ?>
%;
                                            top: <?php 
                                echo $top_percent;
                                ?>
%;
                                            z-index: <?php 
                                echo $layer->depth;
                                ?>
;
                                            border: <?php 
                                echo $layer->border_width;
                                ?>
px <?php 
                                echo $layer->border_style;
                                ?>
 #<?php 
                                echo $layer->border_color;
                                ?>
;
                                            border-radius: <?php 
                                echo $layer->border_radius;
                                ?>
;
                                            box-shadow: <?php 
                                echo $layer->shadow;
                                ?>
"
                                     onclick="<?php 
                                echo $layer->link ? 'window.open(\'' . $layer->link . '\', \'' . ($layer->target_attr_layer ? '_blank' : '_self') . '\');' : '';
                                ?>
event.stopPropagation();"
                                     wds_scale="<?php 
                                echo $layer->image_scale;
                                ?>
"
                                     wds_image_width="<?php 
                                echo $layer->image_width;
                                ?>
"
                                     wds_image_height="<?php 
                                echo $layer->image_height;
                                ?>
" />
                                  <?php 
                                break;
                            case 'video':
                                ?>
                                  <style>
                                    #wds_container1_<?php 
                                echo $wds;
                                ?>
 #wds_container2_<?php 
                                echo $wds;
                                ?>
 .wds_layer_<?php 
                                echo $layer->id;
                                ?>
 {
                                      opacity: <?php 
                                echo $layer->layer_effect_in != 'none' ? '0 !important' : '1';
                                ?>
;
                                      filter: "Alpha(opacity=<?php 
                                echo $layer->layer_effect_in != 'none' ? '0' : '100';
                                ?>
)" !important;
                                    }
                                  </style>
                                <span class="wds_layer_<?php 
                                echo $layer->id;
                                ?>
" id="<?php 
                                echo $prefix;
                                ?>
" wds_fsize="<?php 
                                echo $layer->size;
                                ?>
"
                                      style="<?php 
                                echo $layer->image_width ? 'width: ' . $video_width_percent . '%; ' : '';
                                ?>
                                             <?php 
                                echo $layer->image_height ? 'height: ' . $video_height_percent . '%; ' : '';
                                ?>
                                             position: absolute;
                                             overflow: hidden;
                                             left: <?php 
                                echo $left_percent;
                                ?>
%;
                                             top: <?php 
                                echo $top_percent;
                                ?>
%;
                                             z-index: <?php 
                                echo $layer->depth;
                                ?>
;
                                             border: <?php 
                                echo $layer->border_width;
                                ?>
px <?php 
                                echo $layer->border_style;
                                ?>
 #<?php 
                                echo $layer->border_color;
                                ?>
;
                                             border-radius: <?php 
                                echo $layer->border_radius;
                                ?>
;
                                             box-shadow: <?php 
                                echo $layer->shadow;
                                ?>
">
                                  <iframe class="wds_video_layer_frame_<?php 
                                echo $wds;
                                ?>
" src="<?php 
                                echo $layer->alt == "YOUTUBE" ? "//www.youtube.com/embed/" . $layer->link . "?enablejsapi=1&wmode=transparent" : "//player.vimeo.com/video/" . $layer->link . "?api=1";
                                ?>
" frameborder="0" allowfullscreen></iframe>
                                </span>
                                  <?php 
                                break;
                            case 'social':
                                ?>
                                  <style>
                                    #wds_container1_<?php 
                                echo $wds;
                                ?>
 #wds_container2_<?php 
                                echo $wds;
                                ?>
 #<?php 
                                echo $prefix;
                                ?>
 {
                                      font-size: <?php 
                                echo $layer->size;
                                ?>
px;
                                      padding: <?php 
                                echo $media_layer_padding;
                                ?>
;
                                    }
                                    #wds_container1_<?php 
                                echo $wds;
                                ?>
 #wds_container2_<?php 
                                echo $wds;
                                ?>
 .wds_layer_<?php 
                                echo $layer->id;
                                ?>
 {
                                      opacity: <?php 
                                echo $layer->layer_effect_in != 'none' ? '0 !important' : '1';
                                ?>
;
                                      filter: "Alpha(opacity=<?php 
                                echo $layer->layer_effect_in != 'none' ? '0' : '100';
                                ?>
)" !important;
                                    }
                                    #wds_container1_<?php 
                                echo $wds;
                                ?>
 #wds_container2_<?php 
                                echo $wds;
                                ?>
 #<?php 
                                echo $prefix;
                                ?>
:hover {
                                      color: #<?php 
                                echo $layer->hover_color;
                                ?>
 !important;
                                    }
                                  </style>
                                  <?php 
                                switch ($layer->social_button) {
                                    case 'facebook':
                                        ?>
                                  <a class="wds_share_a" onclick="event.stopPropagation();" href="https://www.facebook.com/sharer/sharer.php?u=<?php 
                                        echo urlencode($share_url);
                                        ?>
" target="_blank" title="<?php 
                                        echo __('Share on Facebook', 'wds');
                                        ?>
">
                                      <?php 
                                        break;
                                    case 'twitter':
                                        ?>
                                  <a class="wds_share_a" onclick="event.stopPropagation();" href="https://twitter.com/share?url=<?php 
                                        echo urlencode($share_url);
                                        ?>
" target="_blank" title="<?php 
                                        echo __('Share on Twitter', 'wds');
                                        ?>
">
                                      <?php 
                                        break;
                                    case 'google-plus':
                                        ?>
                                  <a class="wds_share_a" onclick="event.stopPropagation();" href="https://plus.google.com/share?url=<?php 
                                        echo urlencode($share_url);
                                        ?>
" target="_blank" title="<?php 
                                        echo __('Share on Google+', 'wds');
                                        ?>
">
                                      <?php 
                                        break;
                                    case 'pinterest':
                                        ?>
                                  <a class="wds_share_a" onclick="event.stopPropagation();" href="http://pinterest.com/pin/create/button/?s=100&url=<?php 
                                        echo urlencode($share_url);
                                        ?>
&media=<?php 
                                        echo $share_image_url;
                                        ?>
&description=<?php 
                                        echo $slide_row->title;
                                        ?>
" target="_blank" title="<?php 
                                        echo __('Share on Pinterest', 'wds');
                                        ?>
">
                                      <?php 
                                        break;
                                    case 'tumblr':
                                        ?>
                                  <a class="wds_share_a" onclick="event.stopPropagation();" href="https://www.tumblr.com/share/photo?source=<?php 
                                        echo $share_image_url;
                                        ?>
&caption=<?php 
                                        echo urlencode($slide_row->title);
                                        ?>
&clickthru=<?php 
                                        echo urlencode($share_url);
                                        ?>
" target="_blank" title="<?php 
                                        echo __('Share on Tumblr', 'wds');
                                        ?>
">
                                      <?php 
                                        break;
                                    default:
                                        ?>
<a><?php 
                                        break;
                                }
                                ?>
                                    <i id="<?php 
                                echo $prefix;
                                ?>
" class="wds_layer_<?php 
                                echo $layer->id;
                                ?>
 fa fa-<?php 
                                echo $layer->social_button;
                                ?>
" wds_fsize="<?php 
                                echo $layer->size;
                                ?>
"
                                       style="opacity: <?php 
                                echo number_format((100 - $layer->transparent) / 100, 2, ".", "");
                                ?>
;
                                              filter: Alpha(opacity=<?php 
                                echo 100 - $layer->transparent;
                                ?>
);
                                              position: absolute;
                                              left: <?php 
                                echo $left_percent;
                                ?>
%;
                                              top: <?php 
                                echo $top_percent;
                                ?>
%;
                                              z-index: <?php 
                                echo $layer->depth;
                                ?>
;
                                              color: #<?php 
                                echo $layer->color;
                                ?>
;"></i>
                                  </a>
                                  <?php 
                                break;
                            default:
                                break;
                        }
                    }
                }
            }
            ?>
                        </div>
                      </span>
                    </span>
                  </span>
                  <?php 
        }
        ?>
                <input type="hidden" id="wds_current_image_key_<?php 
        echo $wds;
        ?>
" value="<?php 
        echo $current_key;
        ?>
" />
                </div>
              </div>
            </div>
            <?php 
        if ($enable_prev_next_butt && $slides_count > 1) {
            ?>
              <div class="wds_btn_cont wds_contTableCell">
                <div class="wds_btn_cont wds_contTable">
                  <span class="wds_btn_cont wds_contTableCell" style="position: relative; text-align: left;">
                    <span class="wds_left_btn_cont">
                      <span class="wds_left-ico_<?php 
            echo $wds;
            ?>
" onclick="wds_change_image_<?php 
            echo $wds;
            ?>
(parseInt(jQuery('#wds_current_image_key_<?php 
            echo $wds;
            ?>
').val()), (parseInt(jQuery('#wds_current_image_key_<?php 
            echo $wds;
            ?>
').val()) - iterator_<?php 
            echo $wds;
            ?>
()) >= 0 ? (parseInt(jQuery('#wds_current_image_key_<?php 
            echo $wds;
            ?>
').val()) - iterator_<?php 
            echo $wds;
            ?>
()) % wds_data_<?php 
            echo $wds;
            ?>
.length : wds_data_<?php 
            echo $wds;
            ?>
.length - 1, wds_data_<?php 
            echo $wds;
            ?>
); return false;">
                        <?php 
            if ($slider_row->rl_butt_img_or_not == 'style') {
                ?>
                          <i class="fa <?php 
                echo $slider_row->rl_butt_style;
                ?>
-left"></i>
                          <?php 
            }
            ?>
                      </span>
                    </span>
                   </span>
                </div>
              </div>
              <div class="wds_btn_cont wds_contTableCell">
                <div class="wds_btn_cont wds_contTable">
                  <span class="wds_btn_cont wds_contTableCell" style="position: relative; text-align: right;">
                    <span class="wds_right_btn_cont">
                      <span class="wds_right-ico_<?php 
            echo $wds;
            ?>
" onclick="wds_change_image_<?php 
            echo $wds;
            ?>
(parseInt(jQuery('#wds_current_image_key_<?php 
            echo $wds;
            ?>
').val()), (parseInt(jQuery('#wds_current_image_key_<?php 
            echo $wds;
            ?>
').val()) + iterator_<?php 
            echo $wds;
            ?>
()) % wds_data_<?php 
            echo $wds;
            ?>
.length, wds_data_<?php 
            echo $wds;
            ?>
); return false;">
                        <?php 
            if ($slider_row->rl_butt_img_or_not == 'style') {
                ?>
                          <i class="fa <?php 
                echo $slider_row->rl_butt_style;
                ?>
-right"></i>
                          <?php 
            }
            ?>
                      </span>
                    </span>
                  </span>
                </div>
              </div>
              <?php 
        }
        if ($enable_play_paus_butt && $slides_count > 1) {
            ?>
              <div class="wds_btn_cont wds_contTableCell">
                <div class="wds_btn_cont wds_contTable">
                  <span class="wds_btn_cont wds_contTableCell" style="position: relative; text-align: center;">
                    <span class="wds_pp_btn_cont">
                      <span id="wds_slideshow_play_pause_<?php 
            echo $wds;
            ?>
" style="display: <?php 
            echo $play_pause_button_display;
            ?>
;" <?php 
            echo $slider_row->play_paus_butt_img_or_not != 'style' ? 'class="wds_ctrl_btn_' . $wds . ' wds_slideshow_play_pause_' . $wds . ' fa fa-play"' : '';
            ?>
>
                        <?php 
            if ($slider_row->play_paus_butt_img_or_not == 'style') {
                ?>
                        <i class="wds_ctrl_btn_<?php 
                echo $wds;
                ?>
 wds_slideshow_play_pause_<?php 
                echo $wds;
                ?>
 fa fa-play"></i>
                          <?php 
            }
            ?>
                      </span>
                    </span>
                  </span>
                </div>
              </div>
              <?php 
        }
        ?>
          </div>
          <?php 
        if ($enable_slideshow_music) {
            ?>
            <audio id="wds_audio_<?php 
            echo $wds;
            ?>
" src="<?php 
            echo $slideshow_music_url;
            ?>
" loop volume="1.0"></audio>
            <?php 
        }
        ?>
        </div>
      </div>
    </div>

    <script>
      var wds_trans_in_progress_<?php 
        echo $wds;
        ?>
 = false;
      var wds_transition_duration_<?php 
        echo $wds;
        ?>
 = <?php 
        echo $slideshow_interval < 4 && $slideshow_interval != 0 ? $slideshow_interval * 1000 / 4 : $slider_row->effect_duration;
        ?>
;
      var wds_playInterval_<?php 
        echo $wds;
        ?>
;
      var progress = 0;
      var bottom_right_deggree_<?php 
        echo $wds;
        ?>
;
      var bottom_left_deggree_<?php 
        echo $wds;
        ?>
;
      var top_left_deggree_<?php 
        echo $wds;
        ?>
;
      var curent_time_deggree_<?php 
        echo $wds;
        ?>
 = 0;
      var circle_timer_animate_<?php 
        echo $wds;
        ?>
;
      function circle_timer_<?php 
        echo $wds;
        ?>
(angle) {
        circle_timer_animate_<?php 
        echo $wds;
        ?>
 = jQuery({deg: angle}).animate({deg: 360}, {
          duration: <?php 
        echo $slideshow_interval * 1000;
        ?>
,
          step: function(now) {
            curent_time_deggree_<?php 
        echo $wds;
        ?>
 = now;
            if (now >= 0 && now <= 270) {
              jQuery('#top_right_<?php 
        echo $wds;
        ?>
').css({
                '-moz-transform':'rotate('+now+'deg)',
                '-webkit-transform':'rotate('+now+'deg)',
                '-o-transform':'rotate('+now+'deg)',
                '-ms-transform':'rotate('+now+'deg)',
                'transform':'rotate('+now+'deg)',

                '-webkit-transform-origin': 'left bottom',
                '-ms-transform-origin': 'left bottom',
                '-moz-transform-origin': 'left bottom',
                'transform-origin': 'left bottom'
              });
            }
            if (now >= 90 && now <= 270) {
              bottom_right_deggree_<?php 
        echo $wds;
        ?>
 = now - 90;
              jQuery('#bottom_right_<?php 
        echo $wds;
        ?>
').css({
                '-moz-transform':'rotate('+bottom_right_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
              '-webkit-transform':'rotate('+bottom_right_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
              '-o-transform':'rotate('+bottom_right_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
              '-ms-transform':'rotate('+bottom_right_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
              'transform':'rotate('+bottom_right_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',

              '-webkit-transform-origin': 'left top',
              '-ms-transform-origin': 'left top',
              '-moz-transform-origin': 'left top',
              'transform-origin': 'left top'
              });
            }
            if (now >= 180 && now <= 360) {
              bottom_left_deggree_<?php 
        echo $wds;
        ?>
 = now - 180;
              jQuery('#bottom_left_<?php 
        echo $wds;
        ?>
').css({
                '-moz-transform':'rotate('+bottom_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
                '-webkit-transform':'rotate('+bottom_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
                '-o-transform':'rotate('+bottom_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
                '-ms-transform':'rotate('+bottom_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
                'transform':'rotate('+bottom_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',

                '-webkit-transform-origin': 'right top',
                '-ms-transform-origin': 'right top',
                '-moz-transform-origin': 'right top',
                'transform-origin': 'right top'
              });
            }
            if (now >= 270 && now <= 360) {
              top_left_deggree_<?php 
        echo $wds;
        ?>
  = now - 270;
              jQuery('#top_left_<?php 
        echo $wds;
        ?>
').css({
                '-moz-transform':'rotate('+top_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
                '-webkit-transform':'rotate('+top_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
                '-o-transform':'rotate('+top_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
                '-ms-transform':'rotate('+top_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',
                'transform':'rotate('+top_left_deggree_<?php 
        echo $wds;
        ?>
 +'deg)',

                '-webkit-transform-origin': 'right bottom',
                '-ms-transform-origin': 'right bottom',
                '-moz-transform-origin': 'right bottom',
                'transform-origin': 'right bottom'
              });
            }
          }
        });
      }
      /* Stop autoplay.*/
      window.clearInterval(wds_playInterval_<?php 
        echo $wds;
        ?>
);
      var wds_current_key_<?php 
        echo $wds;
        ?>
 = '<?php 
        echo isset($current_key) ? $current_key : '';
        ?>
';
      var wds_current_filmstrip_pos_<?php 
        echo $wds;
        ?>
 = <?php 
        echo $current_pos;
        ?>
;
      /* Set filmstrip initial position.*/
      function wds_set_filmstrip_pos_<?php 
        echo $wds;
        ?>
(filmStripWidth) {
        var selectedImagePos = -wds_current_filmstrip_pos_<?php 
        echo $wds;
        ?>
 - (jQuery(".wds_slideshow_filmstrip_thumbnail_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
() + <?php 
        echo $filmstrip_thumb_margin_hor;
        ?>
) / 2;
        var imagesContainerLeft = Math.min(0, Math.max(filmStripWidth - jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
(), selectedImagePos + filmStripWidth / 2));
        jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").animate({
            <?php 
        echo $left_or_top;
        ?>
: imagesContainerLeft
          }, {
            duration: 500,
            complete: function () { wds_filmstrip_arrows_<?php 
        echo $wds;
        ?>
(); }
          });
      }
      function wds_move_filmstrip_<?php 
        echo $wds;
        ?>
() {
        var image_left = jQuery(".wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
;
        var image_right = jQuery(".wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
 + jQuery(".wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").<?php 
        echo $outerWidth_or_outerHeight;
        ?>
(true);
        var wds_filmstrip_width = jQuery(".wds_slideshow_filmstrip_<?php 
        echo $wds;
        ?>
").<?php 
        echo $outerWidth_or_outerHeight;
        ?>
(true);
        var wds_filmstrip_thumbnails_width = jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").<?php 
        echo $outerWidth_or_outerHeight;
        ?>
(true);
        var long_filmstrip_cont_left = jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
;
        var long_filmstrip_cont_right = Math.abs(jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
) + wds_filmstrip_width;
        if (wds_filmstrip_width > wds_filmstrip_thumbnails_width) {
          return;
        }
        if (image_left < Math.abs(long_filmstrip_cont_left)) {
          jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").animate({
            <?php 
        echo $left_or_top;
        ?>
: -image_left
          }, {
            duration: 500,
            complete: function () { wds_filmstrip_arrows_<?php 
        echo $wds;
        ?>
(); }
          });
        }
        else if (image_right > long_filmstrip_cont_right) {
          jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").animate({
            <?php 
        echo $left_or_top;
        ?>
: -(image_right - wds_filmstrip_width)
          }, {
            duration: 500,
            complete: function () { wds_filmstrip_arrows_<?php 
        echo $wds;
        ?>
(); }
          });
        }
      }
      function wds_move_dots_<?php 
        echo $wds;
        ?>
() {
        var image_left = jQuery(".wds_slideshow_dots_active_<?php 
        echo $wds;
        ?>
").position().left;
        var image_right = jQuery(".wds_slideshow_dots_active_<?php 
        echo $wds;
        ?>
").position().left + jQuery(".wds_slideshow_dots_active_<?php 
        echo $wds;
        ?>
").outerWidth(true);
        var wds_dots_width = jQuery(".wds_slideshow_dots_container_<?php 
        echo $wds;
        ?>
").outerWidth(true);
        var wds_dots_thumbnails_width = jQuery(".wds_slideshow_dots_thumbnails_<?php 
        echo $wds;
        ?>
").outerWidth(true);
        var long_filmstrip_cont_left = jQuery(".wds_slideshow_dots_thumbnails_<?php 
        echo $wds;
        ?>
").position().left;
        var long_filmstrip_cont_right = Math.abs(jQuery(".wds_slideshow_dots_thumbnails_<?php 
        echo $wds;
        ?>
").position().left) + wds_dots_width;
        if (wds_dots_width > wds_dots_thumbnails_width) {
          return;
        }
        if (image_left < Math.abs(long_filmstrip_cont_left)) {
          jQuery(".wds_slideshow_dots_thumbnails_<?php 
        echo $wds;
        ?>
").animate({
            left: -image_left
          }, {
            duration: 500
          });
        }
        else if (image_right > long_filmstrip_cont_right) {
          jQuery(".wds_slideshow_dots_thumbnails_<?php 
        echo $wds;
        ?>
").animate({
            left: -(image_right - wds_dots_width)
          }, {
            duration: 500
          });
        }
      }
      /* Show/hide filmstrip arrows.*/
      function wds_filmstrip_arrows_<?php 
        echo $wds;
        ?>
() {
        if (jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
() < jQuery(".wds_slideshow_filmstrip_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
()) {
          jQuery(".wds_slideshow_filmstrip_left_<?php 
        echo $wds;
        ?>
").hide();
          jQuery(".wds_slideshow_filmstrip_right_<?php 
        echo $wds;
        ?>
").hide();
        }
        else {
          jQuery(".wds_slideshow_filmstrip_left_<?php 
        echo $wds;
        ?>
").show();
          jQuery(".wds_slideshow_filmstrip_right_<?php 
        echo $wds;
        ?>
").show();
        }
      }
      function wds_testBrowser_cssTransitions_<?php 
        echo $wds;
        ?>
() {
        return wds_testDom_<?php 
        echo $wds;
        ?>
('Transition');
      }
      function wds_testBrowser_cssTransforms3d_<?php 
        echo $wds;
        ?>
() {
        return wds_testDom_<?php 
        echo $wds;
        ?>
('Perspective');
      }
      function wds_testDom_<?php 
        echo $wds;
        ?>
(prop) {
        /* Browser vendor CSS prefixes.*/
        var browserVendors = ['', '-webkit-', '-moz-', '-ms-', '-o-', '-khtml-'];
        /* Browser vendor DOM prefixes.*/
        var domPrefixes = ['', 'Webkit', 'Moz', 'ms', 'O', 'Khtml'];
        var i = domPrefixes.length;
        while (i--) {
          if (typeof document.body.style[domPrefixes[i] + prop] !== 'undefined') {
            return true;
          }
        }
        return false;
      }
      function wds_set_dots_class_<?php 
        echo $wds;
        ?>
() {
        jQuery(".wds_slideshow_dots_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_dots_active_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_dots_deactive_<?php 
        echo $wds;
        ?>
");
        jQuery("#wds_dots_" + wds_current_key_<?php 
        echo $wds;
        ?>
 + "_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_dots_deactive_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_dots_active_<?php 
        echo $wds;
        ?>
");
        <?php 
        if ($slider_row->bull_butt_img_or_not == 'style') {
            ?>
        jQuery(".wds_slideshow_dots_<?php 
            echo $wds;
            ?>
").removeClass("<?php 
            echo $bull_style_active;
            ?>
").addClass("<?php 
            echo $bull_style_deactive;
            ?>
");
        jQuery("#wds_dots_" + wds_current_key_<?php 
            echo $wds;
            ?>
 + "_<?php 
            echo $wds;
            ?>
").removeClass("<?php 
            echo $bull_style_deactive;
            ?>
").addClass("<?php 
            echo $bull_style_active;
            ?>
");
        <?php 
        }
        ?>
      }
      function wds_grid3d_<?php 
        echo $wds;
        ?>
(cols, rows, tz, wrx, wry, nty, ntx, nry, nrx, current_image_class, next_image_class, direction, random, easing) {
        /* If browser does not support CSS transitions.*/
        if (!wds_testBrowser_cssTransitions_<?php 
        echo $wds;
        ?>
()) {
          return wds_fallback_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction);
        }
        wds_trans_in_progress_<?php 
        echo $wds;
        ?>
 = true;
        /* Set active thumbnail.*/
        jQuery(".wds_slideshow_filmstrip_thumbnail_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
");
        jQuery("#wds_filmstrip_thumbnail_" + wds_current_key_<?php 
        echo $wds;
        ?>
 + "_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
");
        wds_set_dots_class_<?php 
        echo $wds;
        ?>
();

        /* The time (in ms) added to/subtracted from the delay total for each new gridlet.*/
        var count = (wds_transition_duration_<?php 
        echo $wds;
        ?>
) / (cols + rows);
        /* Gridlet creator (divisions of the image grid, positioned with background-images to replicate the look of an entire slide image when assembled)*/
        function wds_gridlet(width, height, top, img_top, left, img_left, src, src2, imgWidth, imgHeight, c, r) {
          var delay = random ? Math.floor((cols + rows) * count * Math.random()) : (c + r) * count;

          /* Return a gridlet elem with styles for specific transition.*/
          var grid_div = jQuery('<span class="wds_gridlet_<?php 
        echo $wds;
        ?>
" />').css({
            display: "block",
            width : "100%",
            height : "100%",
            transform : 'translateZ(' + tz + 'px)',
            backfaceVisibility : 'hidden',
            overflow: 'hidden'
          }).append(jQuery('<span class="wds_gridlet_<?php 
        echo $wds;
        ?>
" />').css({
            display: "block",
            width : jQuery(".wds_slideshow_image_spun_<?php 
        echo $wds;
        ?>
").width() + "px",
            height : jQuery(".wds_slideshow_image_spun_<?php 
        echo $wds;
        ?>
").height() + "px",
            top : -top,
            left : -left,
            backgroundImage : src,
            backgroundSize: jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css("background-size"),
            backgroundPosition: jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css("background-position"),
            /*backgroundColor: jQuery(".wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
").css("background-color"),*/
            backgroundRepeat: 'no-repeat',
          }));
          var grid_div2 = jQuery('<span class="wds_gridlet_<?php 
        echo $wds;
        ?>
" />').css({
            display: "block",
            width : "100%",
            height : "100%",
            backfaceVisibility : 'hidden',
            transform : 'translateY(' + nty + 'px) translateX(' + ntx + 'px) rotateY('+ nry +'deg) rotateX('+ nrx +'deg)',
            overflow: 'hidden'
          }).append(jQuery('<span class="wds_gridlet_<?php 
        echo $wds;
        ?>
" />').css({
            display: "block",
            width : jQuery(".wds_slideshow_image_spun_<?php 
        echo $wds;
        ?>
").width() + "px",
            height : jQuery(".wds_slideshow_image_spun_<?php 
        echo $wds;
        ?>
").height() + "px",
            top : -top,
            left : -left,
            backgroundImage : src2,
            backgroundSize: jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css("background-size"),
            backgroundPosition: jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css("background-position"),
            /*backgroundColor: jQuery(".wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
").css("background-color"),*/
            backgroundRepeat: 'no-repeat',
          }));
          return jQuery('<span class="wds_gridlet_<?php 
        echo $wds;
        ?>
" />').css({
            display: "block",
            width : width,
            height : height,
            top : top,
            left : left,
            transition : 'all ' + wds_transition_duration_<?php 
        echo $wds;
        ?>
 + 'ms ' + easing + ' ' + delay + 'ms',
            transform: 'translateZ(-' + tz + 'px)',
            transformStyle: 'preserve-3d',
          }).append(grid_div).append(grid_div2);
        }
        /* Get the current slide's image.*/
        var cur_img = jQuery(current_image_class).find('div');
        var next_img = jQuery(next_image_class).find('div');
        /* Create a grid to hold the gridlets.*/
        var grid = jQuery('<span style="display: block;" />').addClass('wds_grid_<?php 
        echo $wds;
        ?>
').css('perspective', 1000);
        /* Prepend the grid to the next slide (i.e. so it's above the slide image).*/
        jQuery(current_image_class).prepend(grid);
        /* vars to calculate positioning/size of gridlets*/
        var cont = jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
");
        var imgWidth = cur_img.width();
        var imgHeight = cur_img.height();
        var contWidth = cont.width(),
            contHeight = cont.height(),
            imgSrc = cur_img.css('background-image'),
            imgSrcNext = next_img.css('background-image'),
            colWidth = Math.floor(contWidth / cols),
            rowHeight = Math.floor(contHeight / rows),
            colRemainder = contWidth - (cols * colWidth),
            colAdd = Math.ceil(colRemainder / cols),
            rowRemainder = contHeight - (rows * rowHeight),
            rowAdd = Math.ceil(rowRemainder / rows),
            leftDist = 0,
            img_leftDist = (jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
").width() - cur_img.width()) / 2;
        /* Loop through cols*/
        for (var i = 0; i < cols; i++) {
          var topDist = 0,
              img_topDst = (jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
").height() - cur_img.height()) / 2,
              newColWidth = colWidth;
          /* If imgWidth (px) does not divide cleanly into the specified number of cols, adjust individual col widths to create correct total.*/
          if (colRemainder > 0) {
            var add = colRemainder >= colAdd ? colAdd : colRemainder;
            newColWidth += add;
            colRemainder -= add;
          }
          /* Nested loop to create row gridlets for each col.*/
          for (var j = 0; j < rows; j++)  {
            var newRowHeight = rowHeight,
                newRowRemainder = rowRemainder;
            /* If contHeight (px) does not divide cleanly into the specified number of rows, adjust individual row heights to create correct total.*/
            if (newRowRemainder > 0) {
              add = newRowRemainder >= rowAdd ? rowAdd : rowRemainder;
              newRowHeight += add;
              newRowRemainder -= add;
            }
            /* Create & append gridlet to grid.*/
            grid.append(wds_gridlet(newColWidth, newRowHeight, topDist, img_topDst, leftDist, img_leftDist, imgSrc, imgSrcNext, imgWidth, imgHeight, i, j));
            topDist += newRowHeight;
            img_topDst -= newRowHeight;
          }
          
          img_leftDist -= newColWidth;
          leftDist += newColWidth;
        }
        /* Show grid & hide the image it replaces.*/
        grid.show();
        cur_img.css('opacity', 0);        
        /* Execution steps.*/
        setTimeout(function () {
          grid.children().css({
            transform: 'translateZ(-' + tz + 'px) rotateX('+ wrx +'deg) rotateY('+ wry +'deg)'
          });
        }, 1);
        /* After transition.*/
         var cccount = 0;
         var obshicccount = cols * rows;
         grid.children().one('webkitTransitionEnd transitionend otransitionend oTransitionEnd mstransitionend', jQuery.proxy(wds_after_trans_each));
         function wds_after_trans_each() {
           if (++cccount == obshicccount) {
             wds_after_trans();
           }
         }
         function wds_after_trans() {
          jQuery(current_image_class).css({'opacity' : 0, 'z-index': 1});
          jQuery(next_image_class).css({'opacity' : 1, 'z-index' : 2});
          cur_img.css('opacity', 1);
          grid.remove();
          wds_trans_in_progress_<?php 
        echo $wds;
        ?>
 = false;
          if (typeof wds_event_stack_<?php 
        echo $wds;
        ?>
 !== 'undefined') {
            if (wds_event_stack_<?php 
        echo $wds;
        ?>
.length > 0) {
              key = wds_event_stack_<?php 
        echo $wds;
        ?>
[0].split("-");
              wds_event_stack_<?php 
        echo $wds;
        ?>
.shift();
              wds_change_image_<?php 
        echo $wds;
        ?>
(key[0], key[1], wds_data_<?php 
        echo $wds;
        ?>
, true);
            }
          }
        }
      }
      function wds_slic3DH_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {         
        var dimension = jQuery(current_image_class).width() / 2;
        if (direction == 'right') {
          wds_grid3d_<?php 
        echo $wds;
        ?>
(1, 5, dimension, 0, -90, 0, dimension, 90, 0, current_image_class, next_image_class, direction, 0, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
        }
        else if (direction == 'left') {
          wds_grid3d_<?php 
        echo $wds;
        ?>
(1, 5, dimension, 0, 90, 0, -dimension, -90, 0, current_image_class, next_image_class, direction, 0, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
        }
      }
      function wds_slic3DV_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        var dimension = jQuery(current_image_class).height() / 2;
        if (direction == 'right') {
          wds_grid3d_<?php 
        echo $wds;
        ?>
(10, 1, dimension, -90, 0, -dimension, 0, 0, 90, current_image_class, next_image_class, direction, 0, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
        }
        else if (direction == 'left') {
          wds_grid3d_<?php 
        echo $wds;
        ?>
(10, 1, dimension, 90, 0, dimension, 0, 0, -90, current_image_class, next_image_class, direction, 0, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
        }
      }
      
      function wds_slicR3DH_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {         
        var dimension = jQuery(current_image_class).width() / 2;
        if (direction == 'right') {
          wds_grid3d_<?php 
        echo $wds;
        ?>
(1, 5, dimension, 0, -90, 0, dimension, 90, 0, current_image_class, next_image_class, direction, 1, 'ease-in-out');
        }
        else if (direction == 'left') {
          wds_grid3d_<?php 
        echo $wds;
        ?>
(1, 5, dimension, 0, 90, 0, -dimension, -90, 0, current_image_class, next_image_class, direction, 1, 'ease-in-out');
        }
      }
      function wds_slicR3DV_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        var dimension = jQuery(current_image_class).height() / 2;
        if (direction == 'right') {
          wds_grid3d_<?php 
        echo $wds;
        ?>
(10, 1, dimension, -90, 0, -dimension, 0, 0, 90, current_image_class, next_image_class, direction, 1, 'ease-in-out');
        }
        else if (direction == 'left') {
          wds_grid3d_<?php 
        echo $wds;
        ?>
(10, 1, dimension, 90, 0, dimension, 0, 0, -90, current_image_class, next_image_class, direction, 1, 'ease-in-out');
        }
      }
      function wds_parallelSlide_<?php 
        echo $wds;
        ?>
(ni_left, ni_top, tx, ty, current_image_class, next_image_class, direction, easing) {
        /* If browser does not support 3d transforms/CSS transitions.*/
        if (!wds_testBrowser_cssTransitions_<?php 
        echo $wds;
        ?>
()) {
          return wds_fallback_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction);
        }
        if (!wds_testBrowser_cssTransforms3d_<?php 
        echo $wds;
        ?>
()) {
          return wds_fallback3d_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction);
        }
        wds_trans_in_progress_<?php 
        echo $wds;
        ?>
 = true;
        /* Set active thumbnail.*/
        jQuery(".wds_slideshow_filmstrip_thumbnail_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
");
        jQuery("#wds_filmstrip_thumbnail_" + wds_current_key_<?php 
        echo $wds;
        ?>
 + "_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
");
        wds_set_dots_class_<?php 
        echo $wds;
        ?>
();
        jQuery(current_image_class).css({
          position : 'absolute',
          top : '0px',
          left : '0px',
          position : 'absolute',
        });
        jQuery(next_image_class).css({
          position : 'absolute',
          top : ni_top + 'px',
          left : ni_left + 'px',
          'opacity' : 1, 
          filter : 'Alpha(opacity=100)',
          position : 'absolute',
        });
        jQuery(".wds_slider_<?php 
        echo $wds;
        ?>
").css({
          position : 'relative',
          'backface-visibility': 'hidden'
        });
        jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
").css({
          overflow : 'hidden',
        });
        /* Execution steps.*/
        setTimeout(function () {
          jQuery('.wds_slider_<?php 
        echo $wds;
        ?>
').css({
            transition : 'all ' + wds_transition_duration_<?php 
        echo $wds;
        ?>
 + 'ms ' + easing,
            transform : 'translateX(' + tx + 'px) translateY(' + ty + 'px)',
          });
        }, 1);
        /* After transition.*/
        jQuery('.wds_slider_<?php 
        echo $wds;
        ?>
').one('webkitTransitionEnd transitionend otransitionend oTransitionEnd mstransitionend', jQuery.proxy(wds_after_trans));
        function wds_after_trans() {
          jQuery(current_image_class).removeAttr('style');
          jQuery(next_image_class).removeAttr('style');
          jQuery(".wds_slider_<?php 
        echo $wds;
        ?>
").removeAttr('style');
          jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
").removeAttr('style');
          jQuery(current_image_class).css({'opacity' : 0, filter: 'Alpha(opacity=0)', 'z-index': 1});
          jQuery(next_image_class).css({'opacity' : 1, filter: 'Alpha(opacity=100)', 'z-index' : 2});
          wds_trans_in_progress_<?php 
        echo $wds;
        ?>
 = false;
          if (typeof wds_event_stack_<?php 
        echo $wds;
        ?>
 !== 'undefined') {
            if (wds_event_stack_<?php 
        echo $wds;
        ?>
.length > 0) {
              key = wds_event_stack_<?php 
        echo $wds;
        ?>
[0].split("-");
              wds_event_stack_<?php 
        echo $wds;
        ?>
.shift();
              wds_change_image_<?php 
        echo $wds;
        ?>
(key[0], key[1], wds_data_<?php 
        echo $wds;
        ?>
, true);
            }
          }
        }
      }
      function wds_parallelSlideH_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        var width = jQuery(current_image_class).width();
        var height = jQuery(current_image_class).height();
        if (direction == 'right') {
          wds_parallelSlide_<?php 
        echo $wds;
        ?>
(width, 0, -width, 0, current_image_class, next_image_class, direction, 'ease-in-out');
        }
        else if (direction == 'left') {
          wds_parallelSlide_<?php 
        echo $wds;
        ?>
(-width, 0, width, 0, current_image_class, next_image_class, direction, 'ease-in-out');
        }
      }
      function wds_parallelSlideV_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        var width = jQuery(current_image_class).width();
        var height = jQuery(current_image_class).height();
        if (direction == 'right') {
          wds_parallelSlide_<?php 
        echo $wds;
        ?>
(0, height, 0, -height, current_image_class, next_image_class, direction, 'ease-in-out');
        }
        else if (direction == 'left') {
          wds_parallelSlide_<?php 
        echo $wds;
        ?>
(0, -height, 0, height, current_image_class, next_image_class, direction, 'ease-in-out');
        }
      }
      function wds_cube_<?php 
        echo $wds;
        ?>
(tz, ntx, nty, nrx, nry, wrx, wry, current_image_class, next_image_class, direction, easing) {
        /* If browser does not support 3d transforms/CSS transitions.*/
        if (!wds_testBrowser_cssTransitions_<?php 
        echo $wds;
        ?>
()) {
          return wds_fallback_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction);
        }
        if (!wds_testBrowser_cssTransforms3d_<?php 
        echo $wds;
        ?>
()) {
          return wds_fallback3d_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction);
        }
        wds_trans_in_progress_<?php 
        echo $wds;
        ?>
 = true;
        /* Set active thumbnail.*/
        jQuery(".wds_slideshow_filmstrip_thumbnail_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
");
        jQuery("#wds_filmstrip_thumbnail_" + wds_current_key_<?php 
        echo $wds;
        ?>
 + "_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
");
        wds_set_dots_class_<?php 
        echo $wds;
        ?>
();

        jQuery(".wds_slide_container_<?php 
        echo $wds;
        ?>
").css('overflow', 'visible');
        jQuery(".wds_slideshow_image_spun2_<?php 
        echo $wds;
        ?>
").css('overflow', 'visible');
        jQuery(".wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
").css('overflow', 'visible');
        var filmstrip_position = '<?php 
        echo $filmstrip_position;
        ?>
';
        if (filmstrip_position == 'none') {
          jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-radius', jQuery(".wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
").css('border-radius'));
        }
        else {
          jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-radius', '<?php 
        echo $slider_row->glb_border_radius;
        ?>
');
          jQuery(".wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
").css('border-radius', '<?php 
        echo $slider_row->glb_border_radius;
        ?>
');
          if (filmstrip_position == 'top') {
            jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-top-left-radius', 0);
            jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-top-right-radius', 0);
            jQuery(".wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
").css('border-bottom-left-radius', 0);
            jQuery(".wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
").css('border-bottom-right-radius', 0);
          }
          else if (filmstrip_position == 'bottom') {
            jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-bottom-left-radius', 0);
            jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-bottom-right-radius', 0);
            jQuery(".wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
").css('border-top-left-radius', 0);
            jQuery(".wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
").css('border-top-right-radius', 0);
          }
          else if (filmstrip_position == 'right') {
            jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-bottom-right-radius', 0);
            jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-top-right-radius', 0);
            jQuery(".wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
").css('border-bottom-left-radius', 0);
            jQuery(".wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
").css('border-top-left-radius', 0);
          }
          else if (filmstrip_position == 'left') {
            jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-bottom-left-radius', 0);
            jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css('border-top-left-radius', 0);
            jQuery(".wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
").css('border-bottom-right-radius', 0);
            jQuery(".wds_slideshow_filmstrip_container_<?php 
        echo $wds;
        ?>
").css('border-top-right-radius', 0);
          }
        }

        jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
").css('perspective', 1000);
        jQuery(current_image_class).css({
          transform : 'translateZ(' + tz + 'px)',
          backfaceVisibility : 'hidden'
        });
        jQuery(next_image_class).css({
          opacity : 1,
          filter: 'Alpha(opacity=100)',
          zIndex: 2,
          backfaceVisibility : 'hidden',
          transform : 'translateY(' + nty + 'px) translateX(' + ntx + 'px) rotateY('+ nry +'deg) rotateX('+ nrx +'deg)'
        });
        jQuery(".wds_slider_<?php 
        echo $wds;
        ?>
").css({
          transform: 'translateZ(-' + tz + 'px)',
          transformStyle: 'preserve-3d',
          position: 'absolute'
        });
        /* Execution steps.*/
        setTimeout(function () {
          jQuery(".wds_slider_<?php 
        echo $wds;
        ?>
").css({
            transition: 'all ' + wds_transition_duration_<?php 
        echo $wds;
        ?>
 + 'ms ' + easing,
            transform: 'translateZ(-' + tz + 'px) rotateX('+ wrx +'deg) rotateY('+ wry +'deg)'
          });
        }, 20);
        /* After transition.*/
        jQuery(".wds_slider_<?php 
        echo $wds;
        ?>
").one('webkitTransitionEnd transitionend otransitionend oTransitionEnd mstransitionend', jQuery.proxy(wds_after_trans));
        function wds_after_trans() {
          jQuery(current_image_class).removeAttr('style');
          jQuery(next_image_class).removeAttr('style');
          jQuery(".wds_slider_<?php 
        echo $wds;
        ?>
").removeAttr('style');
          jQuery(current_image_class).css({'opacity' : 0, filter: 'Alpha(opacity=0)', 'z-index': 1});
          jQuery(next_image_class).css({'opacity' : 1, filter: 'Alpha(opacity=100)', 'z-index' : 2});
          wds_trans_in_progress_<?php 
        echo $wds;
        ?>
 = false;
          if (typeof wds_event_stack_<?php 
        echo $wds;
        ?>
 !== 'undefined') {
            if (wds_event_stack_<?php 
        echo $wds;
        ?>
.length > 0) {
              key = wds_event_stack_<?php 
        echo $wds;
        ?>
[0].split("-");
              wds_event_stack_<?php 
        echo $wds;
        ?>
.shift();
              wds_change_image_<?php 
        echo $wds;
        ?>
(key[0], key[1], wds_data_<?php 
        echo $wds;
        ?>
, true);
            }
          }
          jQuery(".wds_slide_container_<?php 
        echo $wds;
        ?>
").css('overflow', 'hidden');
          jQuery(".wds_slideshow_image_spun2_<?php 
        echo $wds;
        ?>
").css('overflow', 'hidden');
          jQuery(".wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
").css('overflow', 'hidden');
          jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
").css('perspective', 'none');
        }
      }
      function wds_cubeR_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        var random_direction = Math.floor(Math.random() * 2);
        var dimension = random_direction ? jQuery(current_image_class).height() / 2 : jQuery(current_image_class).width() / 2;
        if (direction == 'right') {
         if (random_direction) {
           wds_cube_<?php 
        echo $wds;
        ?>
(dimension, 0, -dimension, 90, 0, -90, 0, current_image_class, next_image_class, direction, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
         }
         else {
           wds_cube_<?php 
        echo $wds;
        ?>
(dimension, dimension, 0, 0, 90, 0, -90, current_image_class, next_image_class, direction, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
         }
        }
        else if (direction == 'left') {
         if (random_direction) {
           wds_cube_<?php 
        echo $wds;
        ?>
(dimension, 0, dimension, -90, 0, 90, 0, current_image_class, next_image_class, direction, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
         }
         else {
           wds_cube_<?php 
        echo $wds;
        ?>
(dimension, -dimension, 0, 0, -90, 0, 90, current_image_class, next_image_class, direction, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
         }
        }
      }
      function wds_cubeH_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        /* Set to half of image width.*/
        var dimension = jQuery(current_image_class).width() / 2;
        if (direction == 'right') {
          wds_cube_<?php 
        echo $wds;
        ?>
(dimension, dimension, 0, 0, 90, 0, -90, current_image_class, next_image_class, direction, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
        }
        else if (direction == 'left') {
          wds_cube_<?php 
        echo $wds;
        ?>
(dimension, -dimension, 0, 0, -90, 0, 90, current_image_class, next_image_class, direction, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
        }
      }
      function wds_cubeV_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        /* Set to half of image height.*/
        var dimension = jQuery(current_image_class).height() / 2;
        /* If next slide.*/
        if (direction == 'right') {
          wds_cube_<?php 
        echo $wds;
        ?>
(dimension, 0, -dimension, 90, 0, -90, 0, current_image_class, next_image_class, direction, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
        }
        else if (direction == 'left') {
          wds_cube_<?php 
        echo $wds;
        ?>
(dimension, 0, dimension, -90, 0, 90, 0, current_image_class, next_image_class, direction, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
        }
      }
      /* For browsers that does not support transitions.*/
      function wds_fallback_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_fade_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction);
      }
      /* For browsers that support transitions, but not 3d transforms (only used if primary transition makes use of 3d-transforms).*/
      function wds_fallback3d_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_sliceV_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction);
      }
      function wds_none_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        jQuery(current_image_class).css({'opacity' : 0, 'z-index': 1});
        jQuery(next_image_class).css({'opacity' : 1, 'z-index' : 2});
        /* Set active thumbnail.*/
        jQuery(".wds_slideshow_filmstrip_thumbnail_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
");
        jQuery("#wds_filmstrip_thumbnail_" + wds_current_key_<?php 
        echo $wds;
        ?>
 + "_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
");
        wds_set_dots_class_<?php 
        echo $wds;
        ?>
();
      }
      function wds_fade_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        /* Set active thumbnail.*/
        jQuery(".wds_slideshow_filmstrip_thumbnail_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
");
        jQuery("#wds_filmstrip_thumbnail_" + wds_current_key_<?php 
        echo $wds;
        ?>
 + "_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
");
        wds_set_dots_class_<?php 
        echo $wds;
        ?>
();
        if (wds_testBrowser_cssTransitions_<?php 
        echo $wds;
        ?>
()) {
          jQuery(next_image_class).css('transition', 'opacity ' + wds_transition_duration_<?php 
        echo $wds;
        ?>
 + 'ms linear');
          jQuery(current_image_class).css({'opacity' : 0, 'z-index': 1});
          jQuery(next_image_class).css({'opacity' : 1, 'z-index' : 2});
        }
        else {
          jQuery(current_image_class).animate({'opacity' : 0, 'z-index' : 1}, wds_transition_duration_<?php 
        echo $wds;
        ?>
);
          jQuery(next_image_class).animate({
              'opacity' : 1,
              'z-index': 2
            }, {
              duration: wds_transition_duration_<?php 
        echo $wds;
        ?>
,
              complete: function () {  }
            });
          /* For IE.*/
          jQuery(current_image_class).fadeTo(wds_transition_duration_<?php 
        echo $wds;
        ?>
, 0);
          jQuery(next_image_class).fadeTo(wds_transition_duration_<?php 
        echo $wds;
        ?>
, 1);
        }
      }
      function wds_grid_<?php 
        echo $wds;
        ?>
(cols, rows, ro, tx, ty, sc, op, current_image_class, next_image_class, direction, random, roy, easing) {
        /* If browser does not support CSS transitions.*/
        if (!wds_testBrowser_cssTransitions_<?php 
        echo $wds;
        ?>
()) {
          return wds_fallback_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction);
        }
        wds_trans_in_progress_<?php 
        echo $wds;
        ?>
 = true;
        /* Set active thumbnail.*/
        jQuery(".wds_slideshow_filmstrip_thumbnail_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
");
        jQuery("#wds_filmstrip_thumbnail_" + wds_current_key_<?php 
        echo $wds;
        ?>
 + "_<?php 
        echo $wds;
        ?>
").removeClass("wds_slideshow_thumb_deactive_<?php 
        echo $wds;
        ?>
").addClass("wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
");
        wds_set_dots_class_<?php 
        echo $wds;
        ?>
();
        /* The time (in ms) added to/subtracted from the delay total for each new gridlet.*/
        var count = (wds_transition_duration_<?php 
        echo $wds;
        ?>
) / (cols + rows);
        /* Gridlet creator (divisions of the image grid, positioned with background-images to replicate the look of an entire slide image when assembled)*/
        function wds_gridlet(width, height, top, img_top, left, img_left, src, imgWidth, imgHeight, c, r) {
          var delay = random ? Math.floor((cols + rows) * count * Math.random()) : (c + r) * count;
          /* Return a gridlet elem with styles for specific transition.*/
          var grid_div = jQuery('<span class="wds_gridlet_<?php 
        echo $wds;
        ?>
" />').css({
            display: "block",
            width : imgWidth,/*"100%"*/
            height : jQuery(".wds_slideshow_image_spun_<?php 
        echo $wds;
        ?>
").height() + "px",
            top : -top,
            left : -left,
            backgroundImage : src,
            backgroundSize: jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css("background-size"),
            backgroundPosition: jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css("background-position"),
            /*backgroundColor: jQuery(".wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
").css("background-color"),*/
            backgroundRepeat: 'no-repeat'
          });
          return jQuery('<span class="wds_gridlet_<?php 
        echo $wds;
        ?>
" />').css({
            display: "block",
            width : width,/*"100%"*/
            height : height,
            top : top,
            left : left,
            backgroundSize : imgWidth + 'px ' + imgHeight + 'px',
            backgroundPosition : img_left + 'px ' + img_top + 'px',
            backgroundRepeat: 'no-repeat',
            overflow: "hidden",
            transition : 'all ' + wds_transition_duration_<?php 
        echo $wds;
        ?>
 + 'ms ' + easing + ' ' + delay + 'ms',
            transform : 'none'
          }).append(grid_div);
        }
        /* Get the current slide's image.*/
        var cur_img = jQuery(current_image_class).find('div');
        /* Create a grid to hold the gridlets.*/
        var grid = jQuery('<span style="display: block;" />').addClass('wds_grid_<?php 
        echo $wds;
        ?>
');
        /* Prepend the grid to the next slide (i.e. so it's above the slide image).*/
        jQuery(current_image_class).prepend(grid);
        /* vars to calculate positioning/size of gridlets*/
        var cont = jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
");
        var imgWidth = cur_img.width();
        var imgHeight = cur_img.height();
        var contWidth = cont.width(),
            contHeight = cont.height(),
            imgSrc = cur_img.css('background-image'),/*.replace('/thumb', ''),*/
            colWidth = Math.floor(contWidth / cols),
            rowHeight = Math.floor(contHeight / rows),
            colRemainder = contWidth - (cols * colWidth),
            colAdd = Math.ceil(colRemainder / cols),
            rowRemainder = contHeight - (rows * rowHeight),
            rowAdd = Math.ceil(rowRemainder / rows),
            leftDist = 0,
            img_leftDist = (jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
").width() - cur_img.width()) / 2;
        /* tx/ty args can be passed as 'auto'/'min-auto' (meaning use slide width/height or negative slide width/height).*/
        tx = tx === 'auto' ? contWidth : tx;
        tx = tx === 'min-auto' ? - contWidth : tx;
        ty = ty === 'auto' ? contHeight : ty;
        ty = ty === 'min-auto' ? - contHeight : ty;
        /* Loop through cols*/
        for (var i = 0; i < cols; i++) {
          var topDist = 0,
              img_topDst = (jQuery(".wds_slide_bg_<?php 
        echo $wds;
        ?>
").height() - cur_img.height()) / 2,
              newColWidth = colWidth;
          /* If imgWidth (px) does not divide cleanly into the specified number of cols, adjust individual col widths to create correct total.*/
          if (colRemainder > 0) {
            var add = colRemainder >= colAdd ? colAdd : colRemainder;
            newColWidth += add;
            colRemainder -= add;
          }
          /* Nested loop to create row gridlets for each col.*/
          for (var j = 0; j < rows; j++)  {
            var newRowHeight = rowHeight,
                newRowRemainder = rowRemainder;
            /* If contHeight (px) does not divide cleanly into the specified number of rows, adjust individual row heights to create correct total.*/
            if (newRowRemainder > 0) {
              add = newRowRemainder >= rowAdd ? rowAdd : rowRemainder;
              newRowHeight += add;
              newRowRemainder -= add;
            }
            /* Create & append gridlet to grid.*/
            grid.append(wds_gridlet(newColWidth, newRowHeight, topDist, img_topDst, leftDist, img_leftDist, imgSrc, imgWidth, imgHeight, i, j));
            topDist += newRowHeight;
            img_topDst -= newRowHeight;
          }
          
          img_leftDist -= newColWidth;
          leftDist += newColWidth;
        }
        /* Show grid & hide the image it replaces.*/
        grid.show();
        cur_img.css('opacity', 0);
        /* Add identifying classes to corner gridlets (useful if applying border radius).*/
        grid.children().first().addClass('rs-top-left');
        grid.children().last().addClass('rs-bottom-right');
        grid.children().eq(rows - 1).addClass('rs-bottom-left');
        grid.children().eq(- rows).addClass('rs-top-right');
        /* Execution steps.*/
        setTimeout(function () {
          grid.children().css({
            opacity: op,
            transform: 'rotate('+ ro +'deg) rotateY('+ roy +'deg) translateX('+ tx +'px) translateY('+ ty +'px) scale('+ sc +')'
          });
        }, 1);
        jQuery(next_image_class).css('opacity', 1);
        /* After transition.*/
        var cccount = 0;
        var obshicccount = cols * rows;
        grid.children().one('webkitTransitionEnd transitionend otransitionend oTransitionEnd mstransitionend', jQuery.proxy(wds_after_trans_each));
        function wds_after_trans_each() {
         if (++cccount == obshicccount) {
           wds_after_trans();
         }
        }
        function wds_after_trans() {
          jQuery(current_image_class).css({'opacity' : 0, 'z-index': 1});
          jQuery(next_image_class).css({'opacity' : 1, 'z-index' : 2});
          cur_img.css('opacity', 1);
          grid.remove();
          wds_trans_in_progress_<?php 
        echo $wds;
        ?>
 = false;
          if (typeof wds_event_stack_<?php 
        echo $wds;
        ?>
 !== 'undefined') {
            if (wds_event_stack_<?php 
        echo $wds;
        ?>
.length > 0) {
              key = wds_event_stack_<?php 
        echo $wds;
        ?>
[0].split("-");
              wds_event_stack_<?php 
        echo $wds;
        ?>
.shift();
              wds_change_image_<?php 
        echo $wds;
        ?>
(key[0], key[1], wds_data_<?php 
        echo $wds;
        ?>
, true);
            }
          }
        }
      }
      function wds_sliceH_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        if (direction == 'right') {
          var translateX = 'min-auto';
        }
        else if (direction == 'left') {
          var translateX = 'auto';
        }
        wds_grid_<?php 
        echo $wds;
        ?>
(1, 8, 0, translateX, 0, 1, 0, current_image_class, next_image_class, direction, 0, 0, 'ease-in-out');
      }
      function wds_sliceV_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        if (direction == 'right') {
          var translateY = 'min-auto';
        }
        else if (direction == 'left') {
          var translateY = 'auto';
        }
        wds_grid_<?php 
        echo $wds;
        ?>
(10, 1, 0, 0, translateY, 1, 0, current_image_class, next_image_class, direction, 0, 0, 'ease-in-out');
      }
      function wds_slideV_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        if (direction == 'right') {
          var translateY = 'auto';
        }
        else if (direction == 'left') {
          var translateY = 'min-auto';
        }
        wds_grid_<?php 
        echo $wds;
        ?>
(1, 1, 0, 0, translateY, 1, 1, current_image_class, next_image_class, direction, 0, 0, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
      }
      function wds_slideH_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        if (direction == 'right') {
          var translateX = 'min-auto';
        }
        else if (direction == 'left') {
          var translateX = 'auto';
        }
        wds_grid_<?php 
        echo $wds;
        ?>
(1, 1, 0, translateX, 0, 1, 1, current_image_class, next_image_class, direction, 0, 0, 'cubic-bezier(0.785, 0.135, 0.150, 0.860)');
      }
      function wds_scaleOut_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_grid_<?php 
        echo $wds;
        ?>
(1, 1, 0, 0, 0, 1.5, 0, current_image_class, next_image_class, direction, 0, 0, 'ease-in-out');
      }
      function wds_scaleIn_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_grid_<?php 
        echo $wds;
        ?>
(1, 1, 0, 0, 0, 0.5, 0, current_image_class, next_image_class, direction, 0, 0, 'ease-in-out');
      }
      function wds_blockScale_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_grid_<?php 
        echo $wds;
        ?>
(8, 6, 0, 0, 0, 0.6, 0, current_image_class, next_image_class, direction, 0, 0, 'ease-in-out');
      }
      function wds_blockScaleR_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_grid_<?php 
        echo $wds;
        ?>
(8, 6, 0, 0, 0, 0.6, 0, current_image_class, next_image_class, direction, 1, 0, 'ease-in-out');
      }
      function wds_blindR_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_grid_<?php 
        echo $wds;
        ?>
(8, 1, 0, 0, 0, 1, 1, current_image_class, next_image_class, direction, 1, 90, 'ease-in-out');
      }
      function wds_tilesR_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_grid_<?php 
        echo $wds;
        ?>
(8, 8, 0, 0, 0, 1, 1, current_image_class, next_image_class, direction, 1, 90, 'ease-in-out');
      }
      function wds_kaleidoscope_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_grid_<?php 
        echo $wds;
        ?>
(10, 8, 0, 0, 0, 1, 0, current_image_class, next_image_class, direction, 0, 0, 'ease-in-out');
      }
      function wds_fan_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        if (direction == 'right') {
          var rotate = 45;
          var translateX = 100;
        }
        else if (direction == 'left') {
          var rotate = -45;
          var translateX = -100;
        }
        wds_grid_<?php 
        echo $wds;
        ?>
(1, 10, rotate, translateX, 0, 1, 0, current_image_class, next_image_class, direction, 0, 0, 'ease-in-out');
      }
      function wds_blindV_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_grid_<?php 
        echo $wds;
        ?>
(1, 8, 0, 0, 0, .7, 0, current_image_class, next_image_class, direction, 0, 0, 'ease-in-out');
      }
      function wds_blindH_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        wds_grid_<?php 
        echo $wds;
        ?>
(10, 1, 0, 0, 0, .7, 0, current_image_class, next_image_class, direction, 0, 0, 'ease-in-out');
      }
      function wds_random_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        var anims = ['sliceH', 'sliceV', 'slideH', 'slideV', 'scaleOut', 'scaleIn', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV', 'parallelSlideH', 'parallelSlideV'];
        /* Pick a random transition from the anims array.*/
        this["wds_" + anims[Math.floor(Math.random() * anims.length)] + "_<?php 
        echo $wds;
        ?>
"](current_image_class, next_image_class, direction);
      }
      function wds_3Drandom_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction) {
        var anims = ['cubeH', 'cubeV', 'cubeR', 'slic3DH', 'slic3DV', 'slicR3DH', 'slicR3DV'];
        /* Pick a random transition from the anims array.*/
        this["wds_" + anims[Math.floor(Math.random() * anims.length)] + "_<?php 
        echo $wds;
        ?>
"](current_image_class, next_image_class, direction);
      }
      function iterator_<?php 
        echo $wds;
        ?>
() {
        var iterator = 1;
        if (<?php 
        echo $enable_slideshow_shuffle;
        ?>
) {
          iterator = Math.floor((wds_data_<?php 
        echo $wds;
        ?>
.length - 1) * Math.random() + 1);
        }
        return iterator;
      }
      function wds_change_image_<?php 
        echo $wds;
        ?>
(current_key, key, wds_data_<?php 
        echo $wds;
        ?>
, from_effect) {
        <?php 
        if ($slider_row->effect == 'zoomFade') {
            ?>
          wds_genBgPos_<?php 
            echo $wds;
            ?>
();
          <?php 
        }
        ?>
        /* Pause videos.*/
        jQuery("#wds_slideshow_image_container_<?php 
        echo $wds;
        ?>
").find("iframe").each(function () {
          jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
          jQuery(this)[0].contentWindow.postMessage('{ "method": "pause" }', "*");
        });
        /* Pause layer videos.*/
        jQuery(".wds_video_layer_frame_<?php 
        echo $wds;
        ?>
").each(function () {
          jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
          jQuery(this)[0].contentWindow.postMessage('{ "method": "pause" }', "*");
        });
        if (wds_data_<?php 
        echo $wds;
        ?>
[key]) {
          if (jQuery('.wds_ctrl_btn_<?php 
        echo $wds;
        ?>
').hasClass('fa-pause') || ('<?php 
        echo $autoplay;
        ?>
')) {
            play_<?php 
        echo $wds;
        ?>
();
          }
          if (!from_effect) {
            /* Change image key.*/
            jQuery("#wds_current_image_key_<?php 
        echo $wds;
        ?>
").val(key);
            if (current_key == '-1') { /* Filmstrip.*/
              current_key = jQuery(".wds_slideshow_thumb_active_<?php 
        echo $wds;
        ?>
").children("img").attr("image_key");
            }
            else if (current_key == '-2') { /* Dots.*/
              current_key = jQuery(".wds_slideshow_dots_active_<?php 
        echo $wds;
        ?>
").attr("image_key");
            }
          }
          if (wds_trans_in_progress_<?php 
        echo $wds;
        ?>
) {
            wds_event_stack_<?php 
        echo $wds;
        ?>
.push(current_key + '-' + key);
            return;
          }
          var direction = 'right';
          if (wds_current_key_<?php 
        echo $wds;
        ?>
 > key) {
            var direction = 'left';
          }
          else if (wds_current_key_<?php 
        echo $wds;
        ?>
 == key) {
            return;
          }
          /* Set active thumbnail position.*/
          wds_current_filmstrip_pos_<?php 
        echo $wds;
        ?>
 = key * (jQuery(".wds_slideshow_filmstrip_thumbnail_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
() + 2 + 2 * 0);
          wds_current_key_<?php 
        echo $wds;
        ?>
 = key;
          /* Change image id.*/
          jQuery("div[img_id=wds_slideshow_image_<?php 
        echo $wds;
        ?>
]").attr('image_id', wds_data_<?php 
        echo $wds;
        ?>
[key]["id"]);
          var current_image_class = "#image_id_<?php 
        echo $wds;
        ?>
_" + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["id"];
          var next_image_class = "#image_id_<?php 
        echo $wds;
        ?>
_" + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"];
          <?php 
        if ($slider_row->preload_images) {
            ?>
          if (!wds_data_<?php 
            echo $wds;
            ?>
[key]["is_video"]) {
            jQuery(next_image_class).find("div").css("background-image", 'url("' + wds_data_<?php 
            echo $wds;
            ?>
[key]["image_url"] + '")');
          }
          <?php 
        }
        ?>
          var current_slide_layers_count = wds_data_<?php 
        echo $wds;
        ?>
[current_key]["slide_layers_count"];
          var next_slide_layers_count = wds_data_<?php 
        echo $wds;
        ?>
[key]["slide_layers_count"];

          /* Clear layers before image change.*/
          function set_layer_effect_out_before_change(m) {
            wds_clear_layers_effects_out_before_change_<?php 
        echo $wds;
        ?>
[current_key][m] = setTimeout(function() {
              if (wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + m + "_type"] != 'social') {
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + m + "_id"]).css('-webkit-animation-duration' , 0.6 + 's').css('animation-duration' , 0.6 + 's');
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + m + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + m + "_layer_effect_out"] + ' animated');
              }
              else {
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + m + "_id"]).css('-webkit-animation-duration' , 0.6 + 's').css('animation-duration' , 0.6 + 's');
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + m + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + m + "_layer_effect_out"] + ' fa fa-' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + m + "_social_button"] + ' animated');
              }
            }, 10);
          }
          if (<?php 
        echo $slider_row->layer_out_next;
        ?>
) {
            for (var m = 0; m < current_slide_layers_count; m++) {
              if (jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + m + "_id"]).css('opacity') != 0) {
                set_layer_effect_out_before_change(m);
              }
            }
          }
          /* Loop through current slide layers for clear effects.*/
          setTimeout(function() {
            for (var k = 0; k < current_slide_layers_count; k++) {
              clearTimeout(wds_clear_layers_effects_in_<?php 
        echo $wds;
        ?>
[current_key][k]);
              clearTimeout(wds_clear_layers_effects_out_<?php 
        echo $wds;
        ?>
[current_key][k]);
              if (wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + k + "_type"] != 'social') {
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + k + "_id"]).removeClass().addClass('wds_layer_'+ wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + k + "_id"]);
              }
              else {
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + k + "_id"]).removeClass().addClass('fa fa-' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + k + "_social_button"] + ' wds_layer_' + wds_data_<?php 
        echo $wds;
        ?>
[current_key]["layer_" + k + "_id"]);
              }
            }
          }, wds_duration_for_clear_effects_<?php 
        echo $wds;
        ?>
);
          /* Effects out part.*/
          function set_layer_effect_out(i) {
            wds_clear_layers_effects_out_<?php 
        echo $wds;
        ?>
[key][i] = setTimeout(function() {
              if (wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_layer_effect_out"] != 'none') {
                if (wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_type"] != 'social') {	
                  jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_id"]).css('-webkit-animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_duration_eff_out"] / 1000 + 's').css('animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_duration_eff_out"] / 1000 + 's');				 
                  jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_layer_effect_out"] + ' animated');
                }
                else {
                  jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_id"]).css('-webkit-animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_duration_eff_out"] / 1000 + 's').css('animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_duration_eff_out"] / 1000 + 's');
                  jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_layer_effect_out"] + ' fa fa-' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_social_button"] + ' animated');
                }
              }
            }, wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + i + "_end"]);
          }
          /* Effects in part.*/
          function set_layer_effect_in(j) {
            wds_clear_layers_effects_in_<?php 
        echo $wds;
        ?>
[key][j] = setTimeout(function() {
              if (wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_type"] != 'social') {
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_id"]).css('-webkit-animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_duration_eff_out"] / 1000 + 's').css('animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_duration_eff_out"] / 1000 + 's');			 
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_layer_effect_in"] + ' animated');
              }
              else {
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_id"]).css('-webkit-animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_duration_eff_out"] / 1000 + 's').css('animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_duration_eff_out"] / 1000 + 's');
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_layer_effect_in"] + ' fa fa-' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_social_button"] + ' animated');
              }
              /* Play video on layer in.*/
              if ((wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_type"] == "video") && (wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_video_autoplay"] == "on")) {
                jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[key]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_id"]).find("iframe").each(function () {
                  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
                  jQuery(this)[0].contentWindow.postMessage('{ "method": "play" }', "*");
                });
              }
            }, wds_data_<?php 
        echo $wds;
        ?>
[key]["layer_" + j + "_start"]);
          }
          /* Loop through layers in.*/
          for (var j = 0; j < next_slide_layers_count; j++) {
            set_layer_effect_in(j);
          }
          /* Loop through layers out if pause button not pressed.*/
          if (jQuery(".wds_ctrl_btn_<?php 
        echo $wds;
        ?>
").hasClass("fa-pause")) {
            for (var i = 0; i < next_slide_layers_count; i++) {
              set_layer_effect_out(i);
            }
          }
          setTimeout(function() {
            if (typeof jQuery().finish !== 'undefined') {
              if (jQuery.isFunction(jQuery().finish)) {
                jQuery(".wds_line_timer_<?php 
        echo $wds;
        ?>
").finish();
              }
            }
            jQuery(".wds_line_timer_<?php 
        echo $wds;
        ?>
").css({width: 0});
            wds_<?php 
        echo $slideshow_effect;
        ?>
_<?php 
        echo $wds;
        ?>
(current_image_class, next_image_class, direction);
            if (('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'none') && (<?php 
        echo $enable_slideshow_autoplay;
        ?>
 || jQuery('.wds_ctrl_btn_<?php 
        echo $wds;
        ?>
').hasClass('fa-pause'))) {
              if('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' == 'top' || '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' == 'bottom') {
                if (!jQuery(".wds_ctrl_btn_<?php 
        echo $wds;
        ?>
").hasClass("fa-play")) {
                  jQuery(".wds_line_timer_<?php 
        echo $wds;
        ?>
").animate({
                    width: "100%"
                  }, {
                    duration: <?php 
        echo $slideshow_interval * 1000;
        ?>
,
                    specialEasing: {width: "linear"}
                  });             
                }
              }
              else if ('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'none') {
                if (typeof circle_timer_animate_<?php 
        echo $wds;
        ?>
 !== 'undefined') {
                  circle_timer_animate_<?php 
        echo $wds;
        ?>
.stop();
                }
                jQuery('#top_right_<?php 
        echo $wds;
        ?>
').css({
                  '-moz-transform':'rotate(0deg)',
                  '-webkit-transform':'rotate(0deg)',
                  '-o-transform':'rotate(0deg)',
                  '-ms-transform':'rotate(0deg)',
                  'transform':'rotate(0deg)',
                   
                  '-webkit-transform-origin': 'left bottom',
                  '-ms-transform-origin': 'left bottom',
                  '-moz-transform-origin': 'left bottom',
                  'transform-origin': 'left bottom'
                });
                jQuery('#bottom_right_<?php 
        echo $wds;
        ?>
').css({
                  '-moz-transform':'rotate(0deg)',
                  '-webkit-transform':'rotate(0deg)',
                  '-o-transform':'rotate(0deg)',
                  '-ms-transform':'rotate(0deg)',
                  'transform':'rotate(0deg)',
                 
                  '-webkit-transform-origin': 'left top',
                  '-ms-transform-origin': 'left top',
                  '-moz-transform-origin': 'left top',
                  'transform-origin': 'left top'
                });
                jQuery('#bottom_left_<?php 
        echo $wds;
        ?>
').css({
                  '-moz-transform':'rotate(0deg)',
                  '-webkit-transform':'rotate(0deg)',
                  '-o-transform':'rotate(0deg)',
                  '-ms-transform':'rotate(0deg)',
                  'transform':'rotate(0deg)',
                 
                  '-webkit-transform-origin': 'right top',
                  '-ms-transform-origin': 'right top',
                  '-moz-transform-origin': 'right top',
                  'transform-origin': 'right top'
                });
                jQuery('#top_left_<?php 
        echo $wds;
        ?>
').css({
                  '-moz-transform':'rotate(0deg)',
                  '-webkit-transform':'rotate(0deg)',
                  '-o-transform':'rotate(0deg)',
                  '-ms-transform':'rotate(0deg)',
                  'transform':'rotate(0deg)',
                 
                  '-webkit-transform-origin': 'right bottom',
                  '-ms-transform-origin': 'right bottom',
                  '-moz-transform-origin': 'right bottom',
                  'transform-origin': 'right bottom'
                });	
                if (!jQuery(".wds_ctrl_btn_<?php 
        echo $wds;
        ?>
").hasClass("fa-play")) {
                  /* Begin circle timer on next.*/				  		
                  circle_timer_<?php 
        echo $wds;
        ?>
(0);
                }
                else {
                  curent_time_deggree_<?php 
        echo $wds;
        ?>
 = 0;
                }
              }
            }
            <?php 
        if ($filmstrip_position != 'none' && $slides_count > 1) {
            ?>
              wds_move_filmstrip_<?php 
            echo $wds;
            ?>
();
              <?php 
        }
        if ($bull_position != 'none' && $slides_count > 1) {
            ?>
              wds_move_dots_<?php 
            echo $wds;
            ?>
();
              <?php 
        }
        ?>
            if (wds_data_<?php 
        echo $wds;
        ?>
[key]["is_video"]) {
              jQuery("#wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").css({display: 'none'});
            }
            else {
              jQuery("#wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").css({display: ''});
            }
          }, wds_duration_for_change_<?php 
        echo $wds;
        ?>
);
        }
      }
      function wds_resize_slider_<?php 
        echo $wds;
        ?>
() {
        var slide_orig_width = <?php 
        echo $image_width;
        ?>
;
        var slide_orig_height = <?php 
        echo $image_height;
        ?>
;
        var slide_width = jQuery("#wds_container1_<?php 
        echo $wds;
        ?>
").parent().width();
        if (slide_orig_width <= slide_width) {
          slide_width = slide_orig_width;
        }
        var ratio = slide_width / slide_orig_width;

        <?php 
        if ($slider_row->full_width) {
            ?>
        ratio = jQuery(window).width() / slide_orig_width;
        slide_orig_width = jQuery(window).width() - <?php 
            echo 2 * $slider_row->glb_margin;
            ?>
;
        slide_orig_height = <?php 
            echo $image_height;
            ?>
 * slide_orig_width / <?php 
            echo $image_width;
            ?>
;
        slide_width = jQuery(window).width() - <?php 
            echo 2 * $slider_row->glb_margin;
            ?>
;
        wds_full_width_<?php 
            echo $wds;
            ?>
();
          <?php 
        }
        ?>
        var slide_height = slide_orig_height;
        if (slide_orig_width > slide_width) {
          slide_height = Math.floor(slide_width * slide_orig_height / slide_orig_width);
        }

        jQuery(".wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
, #wds_container2_<?php 
        echo $wds;
        ?>
").height(slide_height + <?php 
        echo $filmstrip_direction == 'horizontal' ? $filmstrip_height : 0;
        ?>
);
        jQuery(".wds_slideshow_image_container_<?php 
        echo $wds;
        ?>
").height(slide_height);
        jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").height(slide_height);
        jQuery(".wds_slideshow_video_<?php 
        echo $wds;
        ?>
").height(slide_height);
        jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
 img").each(function () {
          var wds_theImage = new Image();
          wds_theImage.src = jQuery(this).attr("src");
          var wds_origWidth = wds_theImage.width;
          var wds_origHeight = wds_theImage.height;
          var wds_imageWidth = jQuery(this).attr("wds_image_width");
          var wds_imageHeight = jQuery(this).attr("wds_image_height");
          var wds_width = wds_imageWidth;
          if (wds_origWidth <= wds_imageWidth) {
            wds_width = wds_origWidth;
          }
          var wds_height = wds_imageHeight;
          if (wds_origHeight <= wds_imageHeight) {
            wds_height = wds_origHeight;
          }
          jQuery(this).css({
            maxWidth: (parseFloat(wds_imageWidth) * ratio) + "px",
            maxHeight: (parseFloat(wds_imageHeight) * ratio) + "px",
          });
          if (jQuery(this).attr("wds_scale") != "on") {
            jQuery(this).css({
              width: (parseFloat(wds_imageWidth) * ratio) + "px",
              height: (parseFloat(wds_imageHeight) * ratio) + "px"
            });
          }
          else if (wds_origWidth <= wds_imageWidth || wds_origHeight <= wds_imageHeight) {
            if (wds_origWidth / wds_imageWidth > wds_origHeight / wds_imageHeight) {
              jQuery(this).css({
                width: (parseFloat(wds_imageWidth) * ratio) + "px"
              });
            }
            else {
              jQuery(this).css({
                height: (parseFloat(wds_imageHeight) * ratio) + "px"
              });
            }
          }

        });
        jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
 span, .wds_slideshow_image_<?php 
        echo $wds;
        ?>
 i").each(function () {
          jQuery(this).css({
            fontSize: (parseFloat(jQuery(this).attr("wds_fsize")) * ratio) + "px",
            lineHeight: "1.25em",
            paddingLeft: (parseFloat(jQuery(this).attr("wds_fpaddingl")) * ratio) + "px",
            paddingRight: (parseFloat(jQuery(this).attr("wds_fpaddingr")) * ratio) + "px",
            paddingTop: (parseFloat(jQuery(this).attr("wds_fpaddingt")) * ratio) + "px",
            paddingBottom: (parseFloat(jQuery(this).attr("wds_fpaddingb")) * ratio) + "px",
          })
        });
      }
      function wds_genBgPos_<?php 
        echo $wds;
        ?>
() {
        var bgSizeArray = [0, 70];
        var bgSize = bgSizeArray[Math.floor(Math.random() * bgSizeArray.length)];
        
        var bgPosXArray = ['left', 'right'];
        var bgPosYArray = ['top', 'bottom'];
        var bgPosX = bgPosXArray[Math.floor(Math.random() * bgPosXArray.length)];
        var bgPosY = bgPosYArray[Math.floor(Math.random() * bgPosYArray.length)];
        jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
").css({
          backgroundPosition: bgPosX + " " + bgPosY,
          backgroundSize : (100 + bgSize) + "%",
          webkitAnimation: '<?php 
        echo $slideshow_interval;
        ?>
s linear 0s alternate infinite wdszoom' + bgSize,
          mozAnimation: '<?php 
        echo $slideshow_interval;
        ?>
s linear 0s alternate infinite wdszoom' + bgSize,
          animation: '<?php 
        echo $slideshow_interval;
        ?>
s linear 0s alternate infinite wdszoom' + bgSize
        });
      }
      jQuery(window).resize(function () {
        wds_resize_slider_<?php 
        echo $wds;
        ?>
();
      });
      function wds_full_width_<?php 
        echo $wds;
        ?>
() {
        var left = jQuery("#wds_container1_<?php 
        echo $wds;
        ?>
").offset().left;
        jQuery(".wds_slideshow_image_wrap_<?php 
        echo $wds;
        ?>
").css({
          left: (-left + <?php 
        echo $slider_row->glb_margin;
        ?>
) + "px",
          width: (jQuery(window).width() - <?php 
        echo 2 * $slider_row->glb_margin;
        ?>
) + "px",
          maxWidth: "none"
        });
      }
      jQuery(window).load(function () {
        <?php 
        if ($enable_slideshow_autoplay && $slider_row->stop_animation) {
            ?>
        jQuery("#wds_container1_<?php 
            echo $wds;
            ?>
").mouseover(function(e) {
          wds_stop_animation_<?php 
            echo $wds;
            ?>
();
        });
        jQuery("#wds_container1_<?php 
            echo $wds;
            ?>
").mouseout(function(e) {
          if (!e) {
            var e = window.event;
          }
          var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
          while (reltg.tagName != 'BODY') {
            if (reltg.id == this.id){
              return;
            }
            reltg = reltg.parentNode;
          }
          wds_play_animation_<?php 
            echo $wds;
            ?>
();
        });
        <?php 
        }
        ?>
        jQuery(".wds_slideshow_image_<?php 
        echo $wds;
        ?>
 span, .wds_slideshow_image_<?php 
        echo $wds;
        ?>
 i").each(function () {
          jQuery(this).attr("wds_fpaddingl", jQuery(this).css("paddingLeft"));
          jQuery(this).attr("wds_fpaddingr", jQuery(this).css("paddingRight"));
          jQuery(this).attr("wds_fpaddingt", jQuery(this).css("paddingTop"));
          jQuery(this).attr("wds_fpaddingb", jQuery(this).css("paddingBottom"));
        });
        if (<?php 
        echo $navigation;
        ?>
) {
          jQuery("#wds_container2_<?php 
        echo $wds;
        ?>
").hover(function () {
            jQuery(".wds_right-ico_<?php 
        echo $wds;
        ?>
").animate({left: 0}, 700, "swing");
            jQuery(".wds_left-ico_<?php 
        echo $wds;
        ?>
").animate({left: 0}, 700, "swing");
            jQuery("#wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").animate({opacity: 1, filter: "Alpha(opacity=100)"}, 700, "swing");
          }, function () {
            jQuery(".wds_right-ico_<?php 
        echo $wds;
        ?>
").css({left: 4000});
            jQuery(".wds_left-ico_<?php 
        echo $wds;
        ?>
").css({left: -4000});
            jQuery("#wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").css({opacity: 0, filter: "Alpha(opacity=0)"});
          });
        }

        wds_resize_slider_<?php 
        echo $wds;
        ?>
();
        jQuery("#wds_container2_<?php 
        echo $wds;
        ?>
").css({visibility: 'visible'});
        jQuery(".wds_loading").hide();

      	<?php 
        if ($slider_row->effect == 'zoomFade') {
            ?>
          wds_genBgPos_<?php 
            echo $wds;
            ?>
();
          <?php 
        }
        if ($image_right_click) {
            ?>
          /* Disable right click.*/
          jQuery('div[id^="wds_container"]').bind("contextmenu", function () {
            return false;
          });
          <?php 
        }
        ?>
        if (<?php 
        echo $enable_prev_next_butt;
        ?>
) {
          if (typeof jQuery().swiperight !== 'undefined') {
            if (jQuery.isFunction(jQuery().swiperight)) {
              jQuery('#wds_container1_<?php 
        echo $wds;
        ?>
').swiperight(function () {
                wds_change_image_<?php 
        echo $wds;
        ?>
(parseInt(jQuery('#wds_current_image_key_<?php 
        echo $wds;
        ?>
').val()), (parseInt(jQuery('#wds_current_image_key_<?php 
        echo $wds;
        ?>
').val()) - iterator_<?php 
        echo $wds;
        ?>
()) >= 0 ? (parseInt(jQuery('#wds_current_image_key_<?php 
        echo $wds;
        ?>
').val()) - iterator_<?php 
        echo $wds;
        ?>
()) % wds_data_<?php 
        echo $wds;
        ?>
.length : wds_data_<?php 
        echo $wds;
        ?>
.length - 1, wds_data_<?php 
        echo $wds;
        ?>
);
                return false;
              });
            }
          }
          if (typeof jQuery().swipeleft !== 'undefined') {
            if (jQuery.isFunction(jQuery().swipeleft)) {
              jQuery('#wds_container1_<?php 
        echo $wds;
        ?>
').swipeleft(function () {
                wds_change_image_<?php 
        echo $wds;
        ?>
(parseInt(jQuery('#wds_current_image_key_<?php 
        echo $wds;
        ?>
').val()), (parseInt(jQuery('#wds_current_image_key_<?php 
        echo $wds;
        ?>
').val()) + iterator_<?php 
        echo $wds;
        ?>
()) % wds_data_<?php 
        echo $wds;
        ?>
.length, wds_data_<?php 
        echo $wds;
        ?>
);
                return false;
              });
            }
          }
        }

        var isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
        var wds_click = isMobile ? 'touchend' : 'click';

        var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; /* FF doesn't recognize mousewheel as of FF3.x */
        jQuery('.wds_slideshow_filmstrip_<?php 
        echo $wds;
        ?>
').bind(mousewheelevt, function(e) {
          var evt = window.event || e; /* Equalize event object.*/
          evt = evt.originalEvent ? evt.originalEvent : evt; /* Convert to originalEvent if possible.*/
          var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta; /* Check for detail first, because it is used by Opera and FF.*/
          if (delta > 0) {
            /* Scroll up.*/
            jQuery(".wds_slideshow_filmstrip_left_<?php 
        echo $wds;
        ?>
").trigger("click");
          }
          else {
            /* Scroll down.*/
            jQuery(".wds_slideshow_filmstrip_right_<?php 
        echo $wds;
        ?>
").trigger("click");
          }
          return false;
        });
        jQuery(".wds_slideshow_filmstrip_right_<?php 
        echo $wds;
        ?>
").on(wds_click, function () {
          if (typeof jQuery().stop !== 'undefined') {
            if (jQuery.isFunction(jQuery().stop)) {
              jQuery( ".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
" ).stop(true, false);
            }
          }
          if (jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
 >= -(jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
() - jQuery(".wds_slideshow_filmstrip_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
())) {
            jQuery(".wds_slideshow_filmstrip_left_<?php 
        echo $wds;
        ?>
").css({opacity: 1, filter: "Alpha(opacity=100)"});
            if (jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
 < -(jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
() - jQuery(".wds_slideshow_filmstrip_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
() - <?php 
        echo $filmstrip_thumb_margin_hor + $filmstrip_width;
        ?>
)) {
              jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").animate({<?php 
        echo $left_or_top;
        ?>
: -(jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
() - jQuery(".wds_slideshow_filmstrip_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
())}, 500, 'linear');
            }
            else {
              jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").animate({<?php 
        echo $left_or_top;
        ?>
: (jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
 - <?php 
        echo $filmstrip_thumb_margin_hor + $filmstrip_width;
        ?>
)}, 500, 'linear');
            }
          }
          /* Disable right arrow.*/
          window.setTimeout(function() {
            if (jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
 == -(jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
() - jQuery(".wds_slideshow_filmstrip_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
())) {
              jQuery(".wds_slideshow_filmstrip_right_<?php 
        echo $wds;
        ?>
").css({opacity: 0.3, filter: "Alpha(opacity=30)"});
            }
          }, 500);
        });
        jQuery(".wds_slideshow_filmstrip_left_<?php 
        echo $wds;
        ?>
").on(wds_click, function () {
          if (typeof jQuery().stop !== 'undefined') {
            if (jQuery.isFunction(jQuery().stop)) {
              jQuery( ".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
" ).stop(true, false);
            }
          }
          if (jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
 < 0) {
            jQuery(".wds_slideshow_filmstrip_right_<?php 
        echo $wds;
        ?>
").css({opacity: 1, filter: "Alpha(opacity=100)"});
            if (jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
 > - <?php 
        echo $filmstrip_thumb_margin_hor + $filmstrip_width;
        ?>
) {
              jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").animate({<?php 
        echo $left_or_top;
        ?>
: 0}, 500, 'linear');
            }
            else {
              jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").animate({<?php 
        echo $left_or_top;
        ?>
: (jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
 + <?php 
        echo $filmstrip_thumb_margin_hor + $filmstrip_width;
        ?>
)}, 500, 'linear');
            }
          }
          /* Disable left arrow.*/
          window.setTimeout(function(){
            if (jQuery(".wds_slideshow_filmstrip_thumbnails_<?php 
        echo $wds;
        ?>
").position().<?php 
        echo $left_or_top;
        ?>
 == 0) {
              jQuery(".wds_slideshow_filmstrip_left_<?php 
        echo $wds;
        ?>
").css({opacity: 0.3, filter: "Alpha(opacity=30)"});
            }
          }, 500);
        });
        /* Set filmstrip initial position.*/
        wds_set_filmstrip_pos_<?php 
        echo $wds;
        ?>
(jQuery(".wds_slideshow_filmstrip_<?php 
        echo $wds;
        ?>
").<?php 
        echo $width_or_height;
        ?>
());
        /* Play/pause.*/
        jQuery("#wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").on(wds_click, function () {
          if (jQuery(".wds_ctrl_btn_<?php 
        echo $wds;
        ?>
").hasClass("fa-play")) {
            /* Play.*/
            jQuery(".wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").attr("title", "<?php 
        echo __('Pause', 'bwg');
        ?>
");
            jQuery(".wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").attr("class", "wds_ctrl_btn_<?php 
        echo $wds;
        ?>
 wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
 fa fa-pause");

            /* Finish current animation and begin the other.*/
            if (<?php 
        echo $enable_slideshow_autoplay;
        ?>
 && ('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'top' && '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'bottom')) {
              if (typeof circle_timer_animate_<?php 
        echo $wds;
        ?>
 !== 'undefined') {
                circle_timer_animate_<?php 
        echo $wds;
        ?>
.stop();
              }
              circle_timer_<?php 
        echo $wds;
        ?>
(curent_time_deggree_<?php 
        echo $wds;
        ?>
);
            }
            play_<?php 
        echo $wds;
        ?>
();
            if (<?php 
        echo $enable_slideshow_music;
        ?>
) {
              document.getElementById("wds_audio_<?php 
        echo $wds;
        ?>
").play();
            }
          }
          else {
            /* Pause.*/
            /* Pause layers out effect.*/
            var current_key = jQuery('#wds_current_image_key_<?php 
        echo $wds;
        ?>
').val();
            var current_slide_layers_count = wds_data_<?php 
        echo $wds;
        ?>
[current_key]["slide_layers_count"];
            setTimeout(function() {
              for (var k = 0; k < current_slide_layers_count; k++) {
                clearTimeout(wds_clear_layers_effects_out_<?php 
        echo $wds;
        ?>
[current_key][k]);
              }
            }, wds_duration_for_clear_effects_<?php 
        echo $wds;
        ?>
);

            window.clearInterval(wds_playInterval_<?php 
        echo $wds;
        ?>
);
            jQuery(".wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").attr("title", "<?php 
        echo __('Play', 'bwg');
        ?>
");
            jQuery(".wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").attr("class", "wds_ctrl_btn_<?php 
        echo $wds;
        ?>
 wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
 fa fa-play");
            if (<?php 
        echo $enable_slideshow_music;
        ?>
) {
              document.getElementById("wds_audio_<?php 
        echo $wds;
        ?>
").pause();
            }
            if (typeof jQuery().stop !== 'undefined') {
              if (jQuery.isFunction(jQuery().stop)) {
                <?php 
        if ($slider_row->timer_bar_type == 'top' || $slider_row->timer_bar_type == 'bottom') {
            ?>
                  jQuery(".wds_line_timer_<?php 
            echo $wds;
            ?>
").stop();
                  <?php 
        } elseif ($slider_row->timer_bar_type != 'none') {
            ?>
                  /* Pause circle timer.*/
                  if (typeof circle_timer_animate_<?php 
            echo $wds;
            ?>
.stop !== 'undefined') {
                    circle_timer_animate_<?php 
            echo $wds;
            ?>
.stop();
                  }
                  <?php 
        }
        ?>
              }
            }
          }
        });
        if (<?php 
        echo $enable_slideshow_autoplay;
        ?>
) {
          play_<?php 
        echo $wds;
        ?>
();

          jQuery(".wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").attr("title", "<?php 
        echo __('Pause', 'bwg');
        ?>
");
          jQuery(".wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
").attr("class", "wds_ctrl_btn_<?php 
        echo $wds;
        ?>
 wds_slideshow_play_pause_<?php 
        echo $wds;
        ?>
 fa fa-pause");
          if (<?php 
        echo $enable_slideshow_music;
        ?>
) {
            document.getElementById("wds_audio_<?php 
        echo $wds;
        ?>
").play();
          }
          if ('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'none' && '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'top' && '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'bottom') {
            circle_timer_<?php 
        echo $wds;
        ?>
(0);		  
          }
        }
        <?php 
        if ($slider_row->preload_images) {
            ?>
        function wds_preload_<?php 
            echo $wds;
            ?>
(preload_key) {
          jQuery("<img/>")
            .load(function() { if (preload_key < wds_data_<?php 
            echo $wds;
            ?>
.length - 1) wds_preload_<?php 
            echo $wds;
            ?>
(preload_key + 1); })
            .error(function() { if (preload_key < wds_data_<?php 
            echo $wds;
            ?>
.length - 1) wds_preload_<?php 
            echo $wds;
            ?>
(preload_key + 1); })
            .attr("src", (!wds_data_<?php 
            echo $wds;
            ?>
[preload_key]["is_video"] ? wds_data_<?php 
            echo $wds;
            ?>
[preload_key]["image_url"] : ""));
        }
        wds_preload_<?php 
            echo $wds;
            ?>
(0);
        <?php 
        }
        ?>
        var first_slide_layers_count_<?php 
        echo $wds;
        ?>
 = wds_data_<?php 
        echo $wds;
        ?>
[0]["slide_layers_count"];
        if (first_slide_layers_count_<?php 
        echo $wds;
        ?>
) {
          /* Loop through layers in.*/
          for (var j = 0; j < first_slide_layers_count_<?php 
        echo $wds;
        ?>
; j++) {
            set_layer_effect_in_onload_<?php 
        echo $wds;
        ?>
(j);
          }
          /* Loop through layers out.*/
          for (var i = 0; i < first_slide_layers_count_<?php 
        echo $wds;
        ?>
; i++) {
            set_layer_effect_out_onload_<?php 
        echo $wds;
        ?>
(i);
          }
        }
      });
	    function wds_stop_animation_<?php 
        echo $wds;
        ?>
() {
        window.clearInterval(wds_playInterval_<?php 
        echo $wds;
        ?>
);
        /* Pause layers out effect.*/
        var current_key = jQuery('#wds_current_image_key_<?php 
        echo $wds;
        ?>
').val();
        var current_slide_layers_count = wds_data_<?php 
        echo $wds;
        ?>
[current_key]["slide_layers_count"];			
        setTimeout(function() {
          for (var k = 0; k < current_slide_layers_count; k++) {
            clearTimeout(wds_clear_layers_effects_out_<?php 
        echo $wds;
        ?>
[current_key][k]);
          }
        }, wds_duration_for_clear_effects_<?php 
        echo $wds;
        ?>
);
        if (<?php 
        echo $enable_slideshow_music;
        ?>
) {
          document.getElementById("wds_audio_<?php 
        echo $wds;
        ?>
").pause();
        }
        if (typeof jQuery().stop !== 'undefined') {
          if (jQuery.isFunction(jQuery().stop)) {
            if ('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' == 'top' || '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' == 'bottom') {
              jQuery(".wds_line_timer_<?php 
        echo $wds;
        ?>
").stop();
            }
            else if ('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'none') {
              circle_timer_animate_<?php 
        echo $wds;
        ?>
.stop();
            }
          }
        }
      }
      function wds_play_animation_<?php 
        echo $wds;
        ?>
() {
        if (jQuery(".wds_ctrl_btn_<?php 
        echo $wds;
        ?>
").hasClass("fa-play")) {
          return;
        }
        play_<?php 
        echo $wds;
        ?>
();
        if ('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'none' && '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'bottom' && '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'top') {
          if (typeof circle_timer_animate_<?php 
        echo $wds;
        ?>
 !== 'undefined') {
            circle_timer_animate_<?php 
        echo $wds;
        ?>
.stop();
          }
          circle_timer_<?php 
        echo $wds;
        ?>
(curent_time_deggree_<?php 
        echo $wds;
        ?>
);
        }
        if (<?php 
        echo $enable_slideshow_music;
        ?>
) {
          document.getElementById("wds_audio_<?php 
        echo $wds;
        ?>
").play();
        }	 
      }
      /* Effects in part.*/		
		  function set_layer_effect_in_onload_<?php 
        echo $wds;
        ?>
(j) {
		    wds_clear_layers_effects_in_<?php 
        echo $wds;
        ?>
[0][j] = setTimeout(function(){
          if (wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_type"] != 'social') {
            jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[0]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_id"]).css('-webkit-animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_duration_eff_out"] / 1000 + 's').css('animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_duration_eff_out"] / 1000 + 's');			 
		        jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[0]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_layer_effect_in"] + ' animated');
		      }
          else {
            jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[0]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_id"]).css('-webkit-animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_duration_eff_out"] / 1000 + 's').css('animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_duration_eff_out"] / 1000 + 's');	
            jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[0]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_layer_effect_in"] + ' fa fa-' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_social_button"] + ' animated');
          }
          /* Play video on layer in.*/
          if ((wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_type"] == "video") && (wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_video_autoplay"] == "on")) {
            jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[0]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_id"]).find("iframe").each(function () {
              jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
              jQuery(this)[0].contentWindow.postMessage('{ "method": "play" }', "*");
            });
          }
		    }, wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + j + "_start"]);
		  }
      /* Effects out part.*/
		  function set_layer_effect_out_onload_<?php 
        echo $wds;
        ?>
(i) {
			  wds_clear_layers_effects_out_<?php 
        echo $wds;
        ?>
[0][i] = setTimeout(function() {
          if (wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_layer_effect_out"] != 'none') {
            if (wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_type"] != 'social') {
              jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[0]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_id"]).css('-webkit-animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_duration_eff_out"] / 1000 + 's').css('animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_duration_eff_out"] / 1000 + 's');				 
              jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[0]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_layer_effect_out"] + ' animated');
            }
            else {
              jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[0]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_id"]).css('-webkit-animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_duration_eff_out"] / 1000 + 's').css('animation-duration' , wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_duration_eff_out"] / 1000 + 's');
              jQuery('#wds_<?php 
        echo $wds;
        ?>
_slide' + wds_data_<?php 
        echo $wds;
        ?>
[0]["id"] + '_layer' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_id"]).removeClass().addClass( wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_layer_effect_out"] + ' fa fa-' + wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_social_button"] + ' animated');
            }
          }
		    }, wds_data_<?php 
        echo $wds;
        ?>
[0]["layer_" + i + "_end"]);
		  }
      function play_<?php 
        echo $wds;
        ?>
() {
        if (('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'none') && (<?php 
        echo $enable_slideshow_autoplay;
        ?>
 || jQuery('.wds_ctrl_btn_<?php 
        echo $wds;
        ?>
').hasClass('fa-pause'))) {
          jQuery(".wds_line_timer_<?php 
        echo $wds;
        ?>
").animate({
            width: "100%"
          }, {
            duration: <?php 
        echo $slideshow_interval * 1000;
        ?>
,
            specialEasing: {width: "linear"}
          });
        }
        window.clearInterval(wds_playInterval_<?php 
        echo $wds;
        ?>
);
        /* Play.*/
        wds_playInterval_<?php 
        echo $wds;
        ?>
 = setInterval(function () {
          var iterator = 1;
          if (<?php 
        echo $enable_slideshow_shuffle;
        ?>
) {
            iterator = Math.floor((wds_data_<?php 
        echo $wds;
        ?>
.length - 1) * Math.random() + 1);
          }
          wds_change_image_<?php 
        echo $wds;
        ?>
(parseInt(jQuery('#wds_current_image_key_<?php 
        echo $wds;
        ?>
').val()), (parseInt(jQuery('#wds_current_image_key_<?php 
        echo $wds;
        ?>
').val()) + iterator) % wds_data_<?php 
        echo $wds;
        ?>
.length, wds_data_<?php 
        echo $wds;
        ?>
)
        }, '<?php 
        echo $slideshow_interval * 1000;
        ?>
');
      }
      jQuery(window).focus(function() {
        if (!jQuery(".wds_ctrl_btn_<?php 
        echo $wds;
        ?>
").hasClass("fa-play")) {
          if (<?php 
        echo $enable_slideshow_autoplay;
        ?>
) {
            play_<?php 
        echo $wds;
        ?>
();
            if ('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'none' && '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'top' && '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'bottom') {
              if (typeof circle_timer_animate_<?php 
        echo $wds;
        ?>
 !== 'undefined') {
                circle_timer_animate_<?php 
        echo $wds;
        ?>
.stop();
              }
              circle_timer_<?php 
        echo $wds;
        ?>
(curent_time_deggree_<?php 
        echo $wds;
        ?>
);
            }
          }
        }
        var i_<?php 
        echo $wds;
        ?>
 = 0;
        jQuery(".wds_slider_<?php 
        echo $wds;
        ?>
").children("span").each(function () {
          if (jQuery(this).css('opacity') == 1) {
            jQuery("#wds_current_image_key_<?php 
        echo $wds;
        ?>
").val(i_<?php 
        echo $wds;
        ?>
);
          }
          i_<?php 
        echo $wds;
        ?>
++;
        });
      });
      jQuery(window).blur(function() {
        wds_event_stack_<?php 
        echo $wds;
        ?>
 = [];
        window.clearInterval(wds_playInterval_<?php 
        echo $wds;
        ?>
);
        if (typeof jQuery().stop !== 'undefined') {
          if (jQuery.isFunction(jQuery().stop)) {
            if ('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' == 'top' || '<?php 
        echo $slider_row->timer_bar_type;
        ?>
' == 'bottom') {
              jQuery(".wds_line_timer_<?php 
        echo $wds;
        ?>
").stop();
            }
            else if ('<?php 
        echo $slider_row->timer_bar_type;
        ?>
' != 'none') {
              circle_timer_animate_<?php 
        echo $wds;
        ?>
.stop();
            }
          }
        }
      });
    </script>
    <?php 
        if ($from_shortcode) {
            return;
        } else {
            die;
        }
    }
Example #5
0
    public function edit($id, $reset = FALSE)
    {
        $row = $this->model->get_row_data($id, $reset);
        $slides_row = $this->model->get_slides_row_data($id);
        $slide_ids_string = '';
        $sub_tab_type = WDW_S_Library::get('sub_tab', '');
        $page_title = $id != 0 ? 'Edit slider ' . $row->name : 'Create new slider';
        $aligns = array('left' => 'Left', 'center' => 'Center', 'right' => 'Right');
        $border_styles = array('none' => 'None', 'solid' => 'Solid', 'dotted' => 'Dotted', 'dashed' => 'Dashed', 'double' => 'Double', 'groove' => 'Groove', 'ridge' => 'Ridge', 'inset' => 'Inset', 'outset' => 'Outset');
        $button_styles = array('fa-chevron' => 'Chevron', 'fa-angle' => 'Angle', 'fa-angle-double' => 'Double');
        $bull_styles = array('fa-circle-o' => 'Circle O', 'fa-circle' => 'Circle', 'fa-minus' => 'Minus', 'fa-square-o' => 'Square O', 'fa-square' => 'Square');
        $font_families = array('arial' => 'Arial', 'lucida grande' => 'Lucida grande', 'segoe ui' => 'Segoe ui', 'tahoma' => 'Tahoma', 'trebuchet ms' => 'Trebuchet ms', 'verdana' => 'Verdana', 'cursive' => 'Cursive', 'fantasy' => 'Fantasy', 'monospace' => 'Monospace', 'serif' => 'Serif');
        if ($row->possib_add_ffamily != '') {
            $possib_add_ffamily = explode("*WD*", $row->possib_add_ffamily);
            foreach ($possib_add_ffamily as $possib_add_value) {
                if ($possib_add_value) {
                    $font_families[strtolower($possib_add_value)] = $possib_add_value;
                }
            }
        }
        $google_fonts = array('ABeeZee' => 'ABeeZee', 'Abel' => 'Abel', 'Abril+Fatface' => 'Abril Fatface', 'Aclonica' => 'Aclonica', 'Acme' => 'Acme', 'Actor' => 'Actor', 'Adamina' => 'Adamina', 'Advent+Pro' => 'Advent Pro', 'Aguafina+Script' => 'Aguafina Script', 'Akronim' => 'Akronim', 'Aladin' => 'Aladin', 'Aldrich' => 'Aldrich', 'Alegreya' => 'Alegreya', 'Alegreya+SC' => 'Alegreya SC', 'Alex+Brush' => 'Alex Brush', 'Alfa+Slab+One' => 'Alfa Slab One', 'Alice' => 'Alice', 'Alike' => 'Alike', 'Alike+Angular' => 'Alike Angular', 'Allan' => 'Allan', 'Allerta' => 'Allerta', 'Allura' => 'Allura', 'Almendra' => 'Almendra', 'Almendra+display' => 'Almendra Display', 'Almendra+sc' => 'Almendra SC', 'Amarante' => 'Amarante', 'Amaranth' => 'Amaranth', 'Amatic+sc' => 'Amatic SC', 'Amethysta' => 'Amethysta', 'Anaheim' => 'Anaheim', 'Andada' => 'Andada', 'Andika' => 'Andika', 'Angkor' => 'Angkor', 'Annie+Use+Your+Telescope' => 'Annie Use Your Telescope', 'Anonymous+Pro' => 'Anonymous Pro', 'Antic' => 'Antic', 'Antic+Didone' => 'Antic Didone', 'Antic+Slab' => 'Antic Slab', 'Anton' => 'Anton', 'Arapey' => 'Arapey', 'Arbutus' => 'Arbutus', 'Arbutus+slab' => 'Arbutus Slab', 'Architects+daughter' => 'Architects Daughter', 'Archivo+black' => 'Archivo Black', 'Archivo+narrow' => 'Archivo Narrow', 'Arimo' => 'Arimo', 'Arizonia' => 'Arizonia', 'Armata' => 'Armata', 'Artifika' => 'Artifika', 'Arvo' => 'Arvo', 'Asap' => 'Asap', 'Asset' => 'Asset', 'Astloch' => 'Astloch', 'Asul' => 'Asul', 'Atomic+age' => 'Atomic Age', 'Aubrey' => 'Aubrey', 'Audiowide' => 'Audiowide', 'Autour+one' => 'Autour One', 'Average' => 'Average', 'Average+Sans' => 'Average Sans', 'Averia+Gruesa+Libre' => 'Averia Gruesa Libre', 'Averia+Libre' => 'Averia Libre', 'Averia+Sans+Libre' => 'Averia Sans Libre', 'Averia+Serif+Libre' => 'Averia Serif Libre', 'Bad+Script' => 'Bad Script', 'Balthazar' => 'Balthazar', 'Bangers' => 'Bangers', 'Basic' => 'Basic', 'Battambang' => 'Battambang', 'Baumans' => 'Baumans', 'Bayon' => 'Bayon', 'Belgrano' => 'Belgrano', 'BenchNine' => 'BenchNine', 'Bentham' => 'Bentham', 'Berkshire+Swash' => 'Berkshire Swash', 'Bevan' => 'Bevan', 'Bigelow+Rules' => 'Bigelow Rules', 'Bigshot+One' => 'Bigshot One', 'Bilbo' => 'Bilbo', 'Bilbo+Swash+Caps' => 'Bilbo Swash Caps', 'Bitter' => 'Bitter', 'Black+Ops+One' => 'Black Ops One', 'Bokor' => 'Bokor', 'Bonbon' => 'Bonbon', 'Boogaloo' => 'Boogaloo', 'Bowlby+One' => 'Bowlby One', 'bowlby+One+SC' => 'Bowlby One SC', 'Brawler' => 'Brawler', 'Bree+Serif' => 'Bree Serif', 'Bubblegum+Sans' => 'Bubblegum Sans', 'Bubbler+One' => 'Bubbler One', 'Buda' => 'Buda', 'Buenard' => 'Buenard', 'Butcherman' => 'Butcherman', 'Butterfly+Kids' => 'Butterfly Kids', 'Cabin' => 'Cabin', 'Cabin+Condensed' => 'Cabin Condensed', 'Cabin+Sketch' => 'Cabin Sketch', 'Caesar+Dressing' => 'Caesar Dressing', 'Cagliostro' => 'Cagliostro', 'Calligraffitti' => 'Calligraffitti', 'Cambo' => 'Cambo', 'Candal' => 'Candal', 'Cantarell' => 'Cantarell', 'Cantata+One' => 'Cantata One', 'Cantora+One' => 'Cantora One', 'Capriola' => 'Capriola', 'Cardo' => 'Cardo', 'Carme' => 'Carme', 'Carrois+Gothic' => 'Carrois Gothic', 'Carrois+Gothic+SC' => 'Carrois Gothic SC', 'Carter+One' => 'Carter One', 'Caudex' => 'Caudex', 'Cedarville+cursive' => 'Cedarville Cursive', 'Ceviche+One' => 'Ceviche One', 'Changa+One' => 'Changa One', 'Chango' => 'Chango', 'Chau+philomene+One' => 'Chau Philomene One', 'Chela+One' => 'Chela One', 'Chelsea+Market' => 'Chelsea Market', 'Chenla' => 'Chenla', 'Cherry+Cream+Soda' => 'Cherry Cream Soda', 'Chewy' => 'Chewy', 'Chicle' => 'Chicle', 'Chivo' => 'Chivo', 'Cinzel' => 'Cinzel', 'Cinzel+Decorative' => 'Cinzel Decorative', 'Clicker+Script' => 'Clicker Script', 'Coda' => 'Coda', 'Coda+Caption' => 'Coda Caption', 'Codystar' => 'Codystar', 'Combo' => 'Combo', 'Comfortaa' => 'Comfortaa', 'Coming+soon' => 'Coming Soon', 'Concert+One' => 'Concert One', 'Condiment' => 'Condiment', 'Content' => 'Content', 'Contrail+One' => 'Contrail One', 'Convergence' => 'Convergence', 'Cookie' => 'Cookie', 'Copse' => 'Copse', 'Corben' => 'Corben', 'Courgette' => 'Courgette', 'Cousine' => 'Cousine', 'Coustard' => 'Coustard', 'Covered+By+Your+Grace' => 'Covered By Your Grace', 'Crafty+Girls' => 'Crafty Girls', 'Creepster' => 'Creepster', 'Crete+Round' => 'Crete Round', 'Crimson+Text' => 'Crimson Text', 'Croissant+One' => 'Croissant One', 'Crushed' => 'Crushed', 'Cuprum' => 'Cuprum', 'Cutive' => 'Cutive', 'Cutive+Mono' => 'Cutive Mono', 'Damion' => 'Damion', 'Dancing+Script' => 'Dancing Script', 'Dangrek' => 'Dangrek', 'Dawning+of+a+New+Day' => 'Dawning of a New Day', 'Days+One' => 'Days One', 'Delius' => 'Delius', 'Delius+Swash+Caps' => 'Delius Swash Caps', 'Delius+Unicase' => 'Delius Unicase', 'Della+Respira' => 'Della Respira', 'Denk+One' => 'Denk One', 'Devonshire' => 'Devonshire', 'Didact+Gothic' => 'Didact Gothic', 'Diplomata' => 'Diplomata', 'Diplomata+SC' => 'Diplomata SC', 'Domine' => 'Domine', 'Donegal+One' => 'Donegal One', 'Doppio+One' => 'Doppio One', 'Dorsa' => 'Dorsa', 'Dosis' => 'Dosis', 'Dr+Sugiyama' => 'Dr Sugiyama', 'Droid+Sans' => 'Droid Sans', 'Droid+Sans+Mono' => 'Droid Sans Mono', 'Droid+Serif' => 'Droid Serif', 'Duru+Sans' => 'Duru Sans', 'Dynalight' => 'Dynalight', 'Eb+Garamond' => 'EB Garamond', 'Eagle+Lake' => 'Eagle Lake', 'Eater' => 'Eater', 'Economica' => 'Economica', 'Electrolize' => 'Electrolize', 'Elsie' => 'Elsie', 'Elsie+Swash+Caps' => 'Elsie Swash Caps', 'Emblema+One' => 'Emblema One', 'Emilys+Candy' => 'Emilys Candy', 'Engagement' => 'Engagement', 'Englebert' => 'Englebert', 'Enriqueta' => 'Enriqueta', 'Erica+One' => 'Erica One', 'Esteban' => 'Esteban', 'Euphoria+Script' => 'Euphoria Script', 'Ewert' => 'Ewert', 'Exo' => 'Exo', 'Expletus+Sans' => 'Expletus Sans', 'Fanwood+Text' => 'Fanwood Text', 'Fascinate' => 'Fascinate', 'Fascinate+Inline' => 'Fascinate Inline', 'Faster+One' => 'Faster One', 'Fasthand' => 'Fasthand', 'Federant' => 'Federant', 'Federo' => 'Federo', 'Felipa' => 'Felipa', 'Fenix' => 'Fenix', 'Finger+Paint' => 'Finger Paint', 'Fjalla+One' => 'Fjalla One', 'Fjord+One' => 'Fjord One', 'Flamenco' => 'Flamenco', 'Flavors' => 'Flavors', 'Fondamento' => 'Fondamento', 'Fontdiner+swanky' => 'Fontdiner Swanky', 'Forum' => 'Forum', 'Francois+One' => 'Francois One', 'Freckle+Face' => 'Freckle Face', 'Fredericka+the+Great' => 'Fredericka the Great', 'Fredoka+One' => 'Fredoka One', 'Freehand' => 'Freehand', 'Fresca' => 'Fresca', 'Frijole' => 'Frijole', 'Fruktur' => 'Fruktur', 'Fugaz+One' => 'Fugaz One', 'GFS+Didot' => 'GFS Didot', 'GFS+Neohellenic' => 'GFS Neohellenic', 'Gabriela' => 'Gabriela', 'Gafata' => 'Gafata', 'Galdeano' => 'Galdeano', 'Galindo' => 'Galindo', 'Gentium+Basic' => 'Gentium Basic', 'Gentium+Book+Basic' => 'Gentium Book Basic', 'Geo' => 'Geo', 'Geostar' => 'Geostar', 'Geostar+Fill' => 'Geostar Fill', 'Germania+One' => 'Germania One', 'Gilda+Display' => 'Gilda Display', 'Give+You+Glory' => 'Give You Glory', 'Glass+Antiqua' => 'Glass Antiqua', 'Glegoo' => 'Glegoo', 'Gloria+Hallelujah' => 'Gloria Hallelujah', 'Goblin+One' => 'Goblin One', 'Gochi+Hand' => 'Gochi Hand', 'Gorditas' => 'Gorditas', 'Goudy+Bookletter+1911' => 'Goudy Bookletter 1911', 'Graduate' => 'Graduate', 'Grand+Hotel' => 'Grand Hotel', 'Gravitas+One' => 'Gravitas One', 'Great+Vibes' => 'Great Vibes', 'Griffy' => 'Griffy', 'Gruppo' => 'Gruppo', 'Gudea' => 'Gudea', 'Habibi' => 'Habibi', 'Hammersmith+One' => 'Hammersmith One', 'Hanalei' => 'Hanalei', 'Hanalei+Fill' => 'Hanalei Fill', 'Handlee' => 'Handlee', 'Hanuman' => 'Hanuman', 'Happy+Monkey' => 'Happy Monkey', 'Headland+One' => 'Headland One', 'Henny+Penny' => 'Henny Penny', 'Herr+Von+Muellerhoff' => 'Herr Von Muellerhoff', 'Holtwood+One +SC' => 'Holtwood One SC', 'Homemade+Apple' => 'Homemade Apple', 'Homenaje' => 'Homenaje', 'IM+Fell+DW+Pica' => 'IM Fell DW Pica', 'IM+Fell+DW+Pica+SC' => 'IM Fell DW Pica SC', 'IM+Fell+Double+Pica' => 'IM Fell Double Pica', 'IM+Fell+Double+Pica+S' => 'IM Fell Double Pica S', 'IM+Fell+English' => 'IM Fell English', 'IM+Fell+English+SC' => 'IM Fell English SC', 'IM+Fell+French+Canon' => 'IM Fell French Canon', 'IM+Fell+French+Canon+SC' => 'IM Fell French Canon SC', 'IM+Fell+Great+Primer' => 'IM Fell Great Primer', 'IM+Fell+Great+Primer+SC' => 'IM Fell Great Primer SC', 'Iceberg' => 'Iceberg', 'Iceland' => 'Iceland', 'Imprima' => 'Imprima', 'Inconsolata' => 'Inconsolata', 'Inder' => 'Inder', 'Indie+Flower' => 'Indie Flower', 'Inika' => 'Inika', 'Irish+Grover' => 'Irish Grover', 'Istok+Web' => 'Istok Web', 'Italiana' => 'Italiana', 'Italianno' => 'Italianno', 'Jacques+Francois' => 'Jacques Francois', 'Jacques+Francois+Shadow' => 'Jacques Francois Shadow', 'Jim+Nightshade' => 'Jim Nightshade', 'Jockey+One' => 'Jockey One', 'Jolly+Lodger' => 'Jolly Lodger', 'Josefin+Sans' => 'Josefin Sans', 'Josefin+Slab' => 'Josefin Slab', 'Joti+One' => 'Joti One', 'Judson' => 'Judson', 'Julee' => 'Julee', 'Julius+Sans+One' => 'Julius Sans One', 'Junge' => 'Junge', 'Jura' => 'Jura', 'Just+Another+Hand' => 'Just Another Hand', 'Just+Me+Again+Down+Here' => 'Just Me Again Down Here', 'Kameron' => 'Kameron', 'Karla' => 'Karla', 'Kaushan+Script' => 'Kaushan Script', 'Kavoon' => 'Kavoon', 'Keania+One' => 'Keania One', 'kelly+Slab' => 'Kelly Slab', 'Kenia' => 'Kenia', 'Khmer' => 'Khmer', 'Kite+One' => 'Kite One', 'Knewave' => 'Knewave', 'Kotta+One' => 'Kotta One', 'Koulen' => 'Koulen', 'Kranky' => 'Kranky', 'Kreon' => 'Kreon', 'Kristi' => 'Kristi', 'Krona+One' => 'Krona One', 'La+Belle+Aurore' => 'La Belle Aurore', 'Lancelot' => 'Lancelot', 'Lato' => 'Lato', 'League+Script' => 'League Script', 'Leckerli+One' => 'Leckerli One', 'Ledger' => 'Ledger', 'Lekton' => 'Lekton', 'Lemon' => 'Lemon', 'Libre+Baskerville' => 'Libre Baskerville', 'Life+Savers' => 'Life Savers', 'Lilita+One' => 'Lilita One', 'Limelight' => 'Limelight', 'Linden+Hill' => 'Linden Hill', 'Lobster' => 'Lobster', 'Lobster+Two' => 'Lobster Two', 'Londrina+Outline' => 'Londrina Outline', 'Londrina+Shadow' => 'Londrina Shadow', 'Londrina+Sketch' => 'Londrina Sketch', 'Londrina+Solid' => 'Londrina Solid', 'Lora' => 'Lora', 'Love+Ya+Like+A+Sister' => 'Love Ya Like A Sister', 'Loved+by+the+King' => 'Loved by the King', 'Lovers+Quarrel' => 'Lovers Quarrel', 'Luckiest+Guy' => 'Luckiest Guy', 'Lusitana' => 'Lusitana', 'Lustria' => 'Lustria', 'Macondo' => 'Macondo', 'Macondo+Swash+Caps' => 'Macondo Swash Caps', 'Magra' => 'Magra', 'Maiden+Orange' => 'Maiden Orange', 'Mako' => 'Mako', 'Marcellus' => 'Marcellus', 'Marcellus+SC' => 'Marcellus SC', 'Marck+Script' => 'Marck Script', 'Margarine' => 'Margarine', 'Marko+One' => 'Marko One', 'Marmelad' => 'Marmelad', 'Marvel' => 'Marvel', 'Mate' => 'Mate', 'Mate+SC' => 'Mate SC', 'Maven+Pro' => 'Maven Pro', 'McLaren' => 'McLaren', 'Meddon' => 'Meddon', 'MedievalSharp' => 'MedievalSharp', 'Medula+One' => 'Medula One', 'Megrim' => 'Megrim', 'Meie+Script' => 'Meie Script', 'Merienda' => 'Merienda', 'Merienda+One' => 'Merienda One', 'Merriweather' => 'Merriweather', 'Merriweather+Sans' => 'Merriweather Sans', 'Metal' => 'Metal', 'Metal+mania' => 'Metal Mania', 'Metamorphous' => 'Metamorphous', 'Metrophobic' => 'Metrophobic', 'Michroma' => 'Michroma', 'Milonga' => 'Milonga', 'Miltonian' => 'Miltonian', 'Miltonian+Tattoo' => 'Miltonian Tattoo', 'Miniver' => 'Miniver', 'Miss+Fajardose' => 'Miss Fajardose', 'Modern+Antiqua' => 'Modern Antiqua', 'Molengo' => 'Molengo', 'Molle' => 'Molle', 'Monda' => 'Monda', 'Monofett' => 'Monofett', 'Monoton' => 'Monoton', 'Monsieur+La+Doulaise' => 'Monsieur La Doulaise', 'Montaga' => 'Montaga', 'Montez' => 'Montez', 'Montserrat' => 'Montserrat', 'Montserrat+Alternates' => 'Montserrat Alternates', 'Montserrat+Subrayada' => 'Montserrat Subrayada', 'Moul' => 'Moul', 'Moulpali' => 'Moulpali', 'Mountains+of+Christmas' => 'Mountains of Christmas', 'Mouse+Memoirs' => 'Mouse Memoirs', 'Mr+Bedfort' => 'Mr Bedfort', 'Mr+Dafoe' => 'Mr Dafoe', 'Mr+De+Haviland' => 'Mr De Haviland', 'Mrs+Saint+Delafield' => 'Mrs Saint Delafield', 'Mrs+Sheppards' => 'Mrs Sheppards', 'Muli' => 'Muli', 'Mystery+Quest' => 'Mystery Quest', 'Neucha' => 'Neucha', 'Neuton' => 'Neuton', 'New+Rocker' => 'New Rocker', 'News+Cycle' => 'News Cycle', 'Niconne' => 'Niconne', 'Nixie+One' => 'Nixie One', 'Nobile' => 'Nobile', 'Nokora' => 'Nokora', 'Norican' => 'Norican', 'Nosifer' => 'Nosifer', 'Nothing+You+Could+Do' => 'Nothing You Could Do', 'Noticia+Text' => 'Noticia Text', 'Nova+Cut' => 'Nova Cut', 'Nova+Flat' => 'Nova Flat', 'Nova+Mono' => 'Nova Mono', 'Nova+Oval' => 'Nova Oval', 'Nova+Round' => 'Nova Round', 'Nova+Script' => 'Nova Script', 'Nova+Slim' => 'Nova Slim', 'Nova+Square' => 'Nova Square', 'Numans' => 'Numans', 'Nunito' => 'Nunito', 'Odor+Mean+Chey' => 'Odor Mean Chey', 'Offside' => 'Offside', 'Old+standard+tt' => 'Old Standard TT', 'Oldenburg' => 'Oldenburg', 'Oleo+Script' => 'Oleo Script', 'Oleo+Script+Swash+Caps' => 'Oleo Script Swash Caps', 'Open+Sans' => 'Open Sans', 'Open+Sans+Condensed' => 'Open Sans Condensed', 'Oranienbaum' => 'Oranienbaum', 'Orbitron' => 'Orbitron', 'Oregano' => 'Oregano', 'Orienta' => 'Orienta', 'Original+Surfer' => 'Original Surfer', 'Oswald' => 'Oswald', 'Over+the+Rainbow' => 'Over the Rainbow', 'Overlock' => 'Overlock', 'Overlock+SC' => 'Overlock SC', 'Ovo' => 'Ovo', 'Oxygen' => 'Oxygen', 'Oxygen+Mono' => 'Oxygen Mono', 'PT+Mono' => 'PT Mono', 'PT+Sans' => 'PT Sans', 'PT+Sans+Caption' => 'PT Sans Caption', 'PT+Sans+Narrow' => 'PT Sans Narrow', 'PT+Serif' => 'PT Serif', 'PT+Serif+Caption' => 'PT Serif Caption', 'Pacifico' => 'Pacifico', 'Paprika' => 'Paprika', 'Parisienne' => 'Parisienne', 'Passero+One' => 'Passero One', 'Passion+One' => 'Passion One', 'Patrick+Hand' => 'Patrick Hand', 'Patrick+Hand+SC' => 'Patrick Hand SC', 'Patua+One' => 'Patua One', 'Paytone+One' => 'Paytone One', 'Peralta' => 'Peralta', 'Permanent+Marker' => 'Permanent Marker', 'Petit+Formal+Script' => 'Petit Formal Script', 'Petrona' => 'Petrona', 'Philosopher' => 'Philosopher', 'Piedra' => 'Piedra', 'Pinyon+Script' => 'Pinyon Script', 'Pirata+One' => 'Pirata One', 'Plaster' => 'Plaster', 'Play' => 'Play', 'Playball' => 'Playball', 'Playfair+Display' => 'Playfair Display', 'Playfair+Display+SC' => 'Playfair Display SC', 'Podkova' => 'Podkova', 'Poiret+One' => 'Poiret One', 'Poller+One' => 'Poller One', 'Poly' => 'Poly', 'Pompiere' => 'Pompiere', 'Pontano+Sans' => 'Pontano Sans', 'Port+Lligat+Sans' => 'Port Lligat Sans', 'Port+Lligat+Slab' => 'Port Lligat Slab', 'Prata' => 'Prata', 'Preahvihear' => 'Preahvihear', 'Press+start+2P' => 'Press Start 2P', 'Princess+Sofia' => 'Princess Sofia', 'Prociono' => 'Prociono', 'Prosto+One' => 'Prosto One', 'Puritan' => 'Puritan', 'Purple+Purse' => 'Purple Purse', 'Quando' => 'Quando', 'Quantico' => 'Quantico', 'Quattrocento' => 'Quattrocento', 'Quattrocento+Sans' => 'Quattrocento Sans', 'Questrial' => 'Questrial', 'Quicksand' => 'Quicksand', 'Quintessential' => 'Quintessential', 'Qwigley' => 'Qwigley', 'Racing+sans+One' => 'Racing Sans One', 'Radley' => 'Radley', 'Raleway' => 'Raleway', 'Raleway+Dots' => 'Raleway Dots', 'Rambla' => 'Rambla', 'Rammetto+One' => 'Rammetto One', 'Ranchers' => 'Ranchers', 'Rancho' => 'Rancho', 'Rationale' => 'Rationale', 'Redressed' => 'Redressed', 'Reenie+Beanie' => 'Reenie Beanie', 'Revalia' => 'Revalia', 'Ribeye' => 'Ribeye', 'Ribeye+Marrow' => 'Ribeye Marrow', 'Righteous' => 'Righteous', 'Risque' => 'Risque', 'Roboto' => 'Roboto', 'Roboto+Condensed' => 'Roboto Condensed', 'Rochester' => 'Rochester', 'Rock+Salt' => 'Rock Salt', 'Rokkitt' => 'Rokkitt', 'Romanesco' => 'Romanesco', 'Ropa+Sans' => 'Ropa Sans', 'Rosario' => 'Rosario', 'Rosarivo' => 'Rosarivo', 'Rouge+Script' => 'Rouge Script', 'Ruda' => 'Ruda', 'Rufina' => 'Rufina', 'Ruge+Boogie' => 'Ruge Boogie', 'Ruluko' => 'Ruluko', 'Rum+Raisin' => 'Rum Raisin', 'Ruslan+Display' => 'Ruslan Display', 'Russo+One' => 'Russo One', 'Ruthie' => 'Ruthie', 'Rye' => 'Rye', 'Sacramento' => 'Sacramento', 'Sail' => 'Sail', 'Salsa' => 'Salsa', 'Sanchez' => 'Sanchez', 'Sancreek' => 'Sancreek', 'Sansita+One' => 'Sansita One', 'Sarina' => 'Sarina', 'Satisfy' => 'Satisfy', 'Scada' => 'Scada', 'Schoolbell' => 'Schoolbell', 'Seaweed+Script' => 'Seaweed Script', 'Sevillana' => 'Sevillana', 'Seymour+One' => 'Seymour One', 'Shadows+Into+Light' => 'Shadows Into Light', 'Shadows+Into+Light+Two' => 'Shadows Into Light Two', 'Shanti' => 'Shanti', 'Share' => 'Share', 'Share+Tech' => 'Share Tech', 'Share+Tech+Mono' => 'Share Tech Mono', 'Shojumaru' => 'Shojumaru', 'Short+Stack' => 'Short Stack', 'Siemreap' => 'Siemreap', 'Sigmar+One' => 'Sigmar One', 'Signika' => 'Signika', 'Signika+Negative' => 'Signika Negative', 'Simonetta' => 'Simonetta', 'Sintony' => 'Sintony', 'Sirin+Stencil' => 'Sirin Stencil', 'Six+Caps' => 'Six Caps', 'Skranji' => 'Skranji', 'Slackey' => 'Slackey', 'Smokum' => 'Smokum', 'Smythe' => 'Smythe', 'Sniglet' => 'Sniglet', 'Snippet' => 'Snippet', 'Snowburst+One' => 'Snowburst One', 'Sofadi+One' => 'Sofadi One', 'Sofia' => 'Sofia', 'Sonsie+One' => 'Sonsie One', 'Sorts+Mill+Goudy' => 'Sorts Mill Goudy', 'Source+Code+Pro' => 'Source Code Pro', 'Source+Sans+Pro' => 'Source Sans Pro', 'Special+Elite' => 'Special Elite', 'Spicy+Rice' => 'Spicy Rice', 'Spinnaker' => 'Spinnaker', 'Spirax' => 'Spirax', 'Squada+One' => 'Squada One', 'Stalemate' => 'Stalemate', 'Stalinist+One' => 'Stalinist One', 'Stardos+Stencil' => 'Stardos Stencil', 'Stint+Ultra+Condensed' => 'Stint Ultra Condensed', 'Stint+Ultra+Expanded' => 'Stint Ultra Expanded', 'Stoke' => 'Stoke', 'Strait' => 'Strait', 'Sue+Ellen+Francisco' => 'Sue Ellen Francisco', 'Sunshiney' => 'Sunshiney', 'Supermercado+One' => 'Supermercado One', 'Suwannaphum' => 'Suwannaphum', 'Swanky+and+Moo+Moo' => 'Swanky and Moo Moo', 'Syncopate' => 'Syncopate', 'Tangerine' => 'Tangerine', 'Taprom' => 'Taprom', 'Tauri' => 'Tauri', 'Telex' => 'Telex', 'Tenor+Sans' => 'Tenor Sans', 'Text+Me+One' => 'Text Me One', 'The+Girl+Next+Door' => 'The Girl Next Door', 'Tienne' => 'Tienne', 'Tinos' => 'Tinos', 'Titan+One' => 'Titan One', 'Titillium+Web' => 'Titillium Web', 'Trade+Winds' => 'Trade Winds', 'Trocchi' => 'Trocchi', 'Trochut' => 'Trochut', 'Trykker' => 'Trykker', 'Tulpen+One' => 'Tulpen One', 'Ubuntu' => 'Ubuntu', 'Ubuntu+Condensed' => 'Ubuntu Condensed', 'Ubuntu+Mono' => 'Ubuntu Mono', 'Ultra' => 'Ultra', 'Uncial+Antiqua' => 'Uncial Antiqua', 'Underdog' => 'Underdog', 'Unica+One' => 'Unica One', 'UnifrakturCook' => 'UnifrakturCook', 'UnifrakturMaguntia' => 'UnifrakturMaguntia', 'Unkempt' => 'Unkempt', 'Unna' => 'Unna', 'VT323' => 'VT323', 'Vampiro+One' => 'Vampiro One', 'Varela' => 'Varela', 'Varela+Round' => 'Varela Round', 'Vast+Shadow' => 'Vast Shadow', 'Vibur' => 'Vibur', 'Vidaloka' => 'Vidaloka', 'Viga' => 'Viga', 'Voces' => 'Voces', 'Volkhov' => 'Volkhov', 'Vollkorn' => 'Vollkorn', 'Voltaire' => 'Voltaire', 'Waiting+for+the+sunrise' => 'Waiting for the Sunrise', 'Wallpoet' => 'Wallpoet', 'Walter+Turncoat' => 'Walter Turncoat', 'Warnes' => 'Warnes', 'Wellfleet' => 'Wellfleet', 'Wendy+One' => 'Wendy One', 'Wire+One' => 'Wire One', 'Yanone+Kaffeesatz' => 'Yanone Kaffeesatz', 'Yellowtail' => 'Yellowtail', 'Yeseva+One' => 'Yeseva One', 'Yesteryear' => 'Yesteryear', 'Zeyada' => 'Zeyada');
        $font_weights = array('lighter' => 'Lighter', 'normal' => 'Normal', 'bold' => 'Bold');
        $social_buttons = array('facebook' => 'Facebook', 'google-plus' => 'Google+', 'twitter' => 'Twitter', 'pinterest' => 'Pinterest', 'tumblr' => 'Tumblr');
        $free_effects = array('none', 'fade', 'sliceH', 'fan', 'scaleIn');
        $effects = array('none' => 'None', 'fade' => 'Fade', 'sliceH' => 'Slice Horizontal', 'fan' => 'Fan', 'scaleIn' => 'Scale In', 'zoomFade' => 'Zoom Fade', 'parallelSlideH' => 'Parallel Slide Horizontal', 'parallelSlideV' => 'Parallel Slide Vertical', 'slic3DH' => 'Slice 3D Horizontal', 'slic3DV' => 'Slice 3D Vertical', 'slicR3DH' => 'Slice 3D Horizontal Random', 'slicR3DV' => 'Slice 3D Vertical Random', 'blindR' => 'Blind', 'tilesR' => 'Tiles', 'blockScaleR' => 'Block Scale Random', 'cubeH' => 'Cube Horizontal', 'cubeV' => 'Cube Vertical', 'cubeR' => 'Cube Random', 'sliceV' => 'Slice Vertical', 'slideH' => 'Slide Horizontal', 'slideV' => 'Slide Vertical', 'scaleOut' => 'Scale Out', 'blockScale' => 'Block Scale', 'kaleidoscope' => 'Kaleidoscope', 'blindH' => 'Blind Horizontal', 'blindV' => 'Blind Vertical', 'random' => 'Random', '3Drandom' => '3D Random');
        $free_layer_effects = array('none', 'bounce', 'tada', 'bounceInDown', 'bounceOutUp', 'fadeInLeft', 'fadeOutRight');
        $layer_effects_in = array('none' => 'None', 'bounce' => 'Bounce', 'tada' => 'Tada', 'bounceInDown' => 'BounceInDown', 'fadeInLeft' => 'FadeInLeft', 'flash' => 'Flash', 'pulse' => 'Pulse', 'rubberBand' => 'RubberBand', 'shake' => 'Shake', 'swing' => 'Swing', 'wobble' => 'Wobble', 'hinge' => 'Hinge', 'lightSpeedIn' => 'LightSpeedIn', 'rollIn' => 'RollIn', 'bounceIn' => 'BounceIn', 'bounceInLeft' => 'BounceInLeft', 'bounceInRight' => 'BounceInRight', 'bounceInUp' => 'BounceInUp', 'fadeIn' => 'FadeIn', 'fadeInDown' => 'FadeInDown', 'fadeInDownBig' => 'FadeInDownBig', 'fadeInLeftBig' => 'FadeInLeftBig', 'fadeInRight' => 'FadeInRight', 'fadeInRightBig' => 'FadeInRightBig', 'fadeInUp' => 'FadeInUp', 'fadeInUpBig' => 'FadeInUpBig', 'flip' => 'Flip', 'flipInX' => 'FlipInX', 'flipInY' => 'FlipInY', 'rotateIn' => 'RotateIn', 'rotateInDownLeft' => 'RotateInDownLeft', 'rotateInDownRight' => 'RotateInDownRight', 'rotateInUpLeft' => 'RotateInUpLeft', 'rotateInUpRight' => 'RotateInUpRight', 'zoomIn' => 'ZoomIn', 'zoomInDown' => 'ZoomInDown', 'zoomInLeft' => 'ZoomInLeft', 'zoomInRight' => 'ZoomInRight', 'zoomInUp' => 'ZoomInUp');
        $layer_effects_out = array('none' => 'None', 'bounce' => 'Bounce', 'tada' => 'Tada', 'bounceOutUp' => 'BounceOutUp', 'fadeOutRight' => 'FadeOutRight', 'flash' => 'Flash', 'pulse' => 'Pulse', 'rubberBand' => 'RubberBand', 'shake' => 'Shake', 'swing' => 'Swing', 'wobble' => 'Wobble', 'hinge' => 'Hinge', 'lightSpeedOut' => 'LightSpeedOut', 'rollOut' => 'RollOut', 'bounceOut' => 'BounceOut', 'bounceOutDown' => 'BounceOutDown', 'bounceOutLeft' => 'BounceOutLeft', 'bounceOutRight' => 'BounceOutRight', 'fadeOut' => 'FadeOut', 'fadeOutDown' => 'FadeOutDown', 'fadeOutDownBig' => 'FadeOutDownBig', 'fadeOutLeft' => 'FadeOutLeft', 'fadeOutLeftBig' => 'FadeOutLeftBig', 'fadeOutRightBig' => 'FadeOutRightBig', 'fadeOutUp' => 'FadeOutUp', 'fadeOutUpBig' => 'FadeOutUpBig', 'flip' => 'Flip', 'flipOutX' => 'FlipOutX', 'flipOutY' => 'FlipOutY', 'rotateOut' => 'RotateOut', 'rotateOutDownLeft' => 'RotateOutDownLeft', 'rotateOutDownRight' => 'RotateOutDownRight', 'rotateOutUpLeft' => 'RotateOutUpLeft', 'rotateOutUpRight' => 'RotateOutUpRight', 'zoomOut' => 'ZoomOut', 'zoomOutDown' => 'ZoomOutDown', 'zoomOutLeft' => 'ZoomOutLeft', 'zoomOutRight' => 'ZoomOutRight', 'zoomOutUp' => 'ZoomOutUp');
        $built_in_watermark_fonts = array();
        foreach (scandir(path_join(WD_S_DIR, 'fonts')) as $filename) {
            if (strpos($filename, '.') === 0) {
                continue;
            } else {
                $built_in_watermark_fonts[] = $filename;
            }
        }
        if (get_option("wds_theme_version")) {
            $fv = TRUE;
            $fv_class = 'spider_free_version_label';
            $fv_disabled = 'disabled="disabled"';
            $fv_message = '<tr><td colspan="2"><div class="wd_error" style="padding: 5px; font-size: 14px; color: #000000 !important;">Some options are disabled in free version.</div></td></tr>';
            $fv_title = ' title="This option is disabled in free version."';
        } else {
            $fv = FALSE;
            $fv_class = '';
            $fv_disabled = '';
            $fv_message = '';
            $fv_title = '';
        }
        ?>
    <div class="spider_message_cont"></div>
    <div class="spider_load">
      <div class="spider_load_cont"></div>
      <div class="spider_load_icon"><img class="spider_ajax_loading" src="<?php 
        echo WD_S_URL . '/images/ajax_loader.png';
        ?>
"></div>
    </div>
    <div style="clear: both; float: left; width: 99%;">
      <div style="float: left; font-size: 14px; font-weight: bold;">
        This section allows you to add/edit slider.
        <a style="color: blue; text-decoration: none;" target="_blank" href="https://web-dorado.com/wordpress-slider-wd-guide-step-2.html">Read More in User Manual</a>
      </div>
      <div style="float: right; text-align: right;">
        <a style="text-decoration: none;" target="_blank" href="https://web-dorado.com/files/fromslider.php">
          <img width="215" border="0" alt="web-dorado.com" src="<?php 
        echo WD_S_URL . '/images/wd_logo.png';
        ?>
" />
        </a>
      </div>
    </div>
    <form class="wrap" method="post" id="sliders_form" action="admin.php?page=sliders_wds" style="float: left; width: 99%;">
      <?php 
        wp_nonce_field('nonce_wd', 'nonce_wd');
        ?>
      <span class="slider-icon"></span>
      <h2><?php 
        echo $page_title;
        ?>
</h2>
      <div class="wds_buttons">
        <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                   spider_set_input_value('task', 'save');
                                                                   spider_ajax_save('sliders_form', event);" value="Save" />
        <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                   spider_set_input_value('task', 'apply');
                                                                   spider_ajax_save('sliders_form', event);" value="Apply" />
        <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                               spider_set_input_value('task', 'duplicate');
                                                               spider_set_input_value('sub_tab', '');
                                                               spider_ajax_save('sliders_form', event);" value="Save as Copy" />
        <input type="button" class="button-primary" value="Preview"
               onclick="if (wds_check_required('name', 'Name')) { return false;}; spider_set_input_value('task', 'preview'); spider_ajax_save('sliders_form', event); return false;" />
	<input type="button" class="button-secondary wds_free_button" onclick="alert('This functionality is disabled in free version.')" value="Export" />
	<input class="button-secondary" type="submit" onclick="spider_set_input_value('task', 'cancel')" value="Cancel" />
      </div>
      <div class="wds_tabs">
        <a href="#"><span tab_type="settings" onclick="wds_change_tab(this, 'wds_settings_box')" class="wds_tab_label">Settings</span></a>
        <a href="#"><span tab_type="slides" onclick="wds_change_tab(this, 'wds_slides_box')" class="wds_tab_label">Slides</span></a>
        <div class="wds_clear"></div>
      </div>
      <div>
        <div class="wds_reset_button">
          <input class="button-primary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                   spider_set_input_value('task', 'reset');
                                                                   spider_ajax_save('sliders_form', event);" value="Reset Settings" />
        </div>
        <!--------------Settings tab----------->
        <div class="wds_box wds_settings_box">
          <div class="wds_nav_tabs">
            <ul>
              <li tab_type="global" onclick="wds_change_nav(this, 'wds_nav_global_box')">
                <a href="#">Global</a>
              </li>
              <li tab_type="carousel" onclick="wds_change_nav(this, 'wds_nav_carousel_box')">
                <a href="#">Carousel</a>
              </li>
              <li tab_type="navigation" onclick="wds_change_nav(this, 'wds_nav_navigation_box')" >
                <a href="#">Navigation</a>
              </li>
              <li tab_type="bullets" onclick="wds_change_nav(this, 'wds_nav_bullets_box')" >
                <a href="#">Bullets</a>
              </li>
              <li tab_type="filmstrip" onclick="wds_change_nav(this, 'wds_nav_filmstrip_box')" >
                <a href="#">Filmstrip</a>
              </li>
              <li tab_type="timer_bar" onclick="wds_change_nav(this, 'wds_nav_timer_bar_box')" >
                <a href="#">Timer bar</a>
              </li>
              <li tab_type="watermark" onclick="wds_change_nav(this, 'wds_nav_watermark_box')" >
                <a href="#">Watermark</a>
              </li>
              <li tab_type="css" onclick="wds_change_nav(this, 'wds_nav_css_box')" >
                <a href="#">CSS</a>
              </li>
            </ul>
          </div>
          <div>
            <div class="wds_nav_box wds_nav_global_box">
              <table>
                <tbody>
                  <tr>
                    <td class="spider_label"><label>Dimensions: </label></td>
                    <td>
                      <input type="text" name="width" id="width" value="<?php 
        echo $row->width;
        ?>
" class="spider_int_input" onchange="wds_whr('width')" onkeypress="return spider_check_isnum(event)" /> x 
                      <input type="text" name="height" id="height" value="<?php 
        echo $row->height;
        ?>
" class="spider_int_input" onchange="wds_whr('height')" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description">Maximum width and height for slider.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Full width: </label></td>
                    <td>
                      <input type="radio" id="full_width1" name="full_width" <?php 
        echo $row->full_width ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="full_width1">Yes</label>
                      <input type="radio" id="full_width0" name="full_width" <?php 
        echo $row->full_width ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="full_width0">No</label>
                      <input type="text" name="ratio" id="ratio" value="" class="spider_int_input" onchange="wds_whr('ratio')" onkeypress="return spider_check_isnum(event)" /><label for="ratio">Ratio</label>
                      <div class="spider_description">The image will stretch to the page width, taking the height based on dimensions ratio.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Background fit: </label></td>
                    <td>
                      <input type="radio" name="bg_fit" id="bg_fit_cover" value="cover" <?php 
        if ($row->bg_fit == 'cover') {
            echo 'checked="checked"';
        }
        ?>
 onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundSize: 'cover'})" /><label for="bg_fit_cover">Cover</label>
                      <input type="radio" name="bg_fit" id="bg_fit_fill" value="100% 100%" <?php 
        if ($row->bg_fit == '100% 100%') {
            echo 'checked="checked"';
        }
        ?>
 onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundSize: '100% 100%'})" /><label for="bg_fit_fill">Fill</label>
                      <input type="radio" name="bg_fit" id="bg_fit_contain" value="contain" <?php 
        if ($row->bg_fit == 'contain') {
            echo 'checked="checked"';
        }
        ?>
 onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundSize: 'contain'})" /><label for="bg_fit_contain">Contain</label>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="align">Align: </label></td>
                    <td>
                      <select name="align" id="align">
                        <?php 
        foreach ($aligns as $key => $align) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->align == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $align;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <div class="spider_description">Set the alignment of the slider.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label for="effect">Effect:</label>
                    </td>
                    <td>
                      <select name="effect" id="effect">
                        <?php 
        foreach ($effects as $key => $effect) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo !in_array($key, $free_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
            ?>
 <?php 
            if ($row->effect == $key) {
                echo 'selected="selected"';
            }
            ?>
><?php 
            echo $effect;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="effect_duration">Еffect duration: </label></td>
                    <td>
                      <input type="text" id="effect_duration" name="effect_duration" value="<?php 
        echo $row->effect_duration;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> ms
                      <div class="spider_description">Define the time for the effect.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label spider_free_version_label"><label>Parallax Effect: </label></td>
                    <td>
                      <input disabled="disabled" type="radio" id="parallax_effect1" name="parallax_effect" <?php 
        echo $row->parallax_effect ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="parallax_effect1">Yes</label>
                      <input disabled="disabled" type="radio" id="parallax_effect0" name="parallax_effect" <?php 
        echo $row->parallax_effect ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="parallax_effect0">No</label>
                      <div class="spider_description">The direction of the movement, as well as the layer moving pace depend on the z-index value.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Autoplay: </label></td>
                    <td>
                      <input type="radio" id="autoplay1" name="autoplay" <?php 
        echo $row->autoplay ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="autoplay1">Yes</label>
                      <input type="radio" id="autoplay0" name="autoplay" <?php 
        echo $row->autoplay ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="autoplay0">No</label>
                      <div class="spider_description">Choose whether to autoplay the sliders or not.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="time_intervval">Time Interval: </label></td>
                    <td>
                      <input type="text" id="time_intervval" name="time_intervval" value="<?php 
        echo $row->time_intervval;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> sec.
                      <div class="spider_description">Set the time interval for the change of the sliders when autoplay is on.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Stop on hover: </label></td>
                    <td>
                      <input type="radio" id="stop_animation1" name="stop_animation" <?php 
        echo $row->stop_animation ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="stop_animation1">Yes</label>
                      <input type="radio" id="stop_animation0" name="stop_animation" <?php 
        echo $row->stop_animation ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="stop_animation0">No</label>
                      <div class="spider_description">The option works when autoplay is on.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Shuffle: </label></td>
                    <td>
                      <input type="radio" id="shuffle1" name="shuffle" <?php 
        echo $row->shuffle ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="shuffle1">Yes</label>
                      <input type="radio" id="shuffle0" name="shuffle" <?php 
        echo $row->shuffle ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="shuffle0">No</label>
                      <div class="spider_description">Choose whether to have the slides change in a random manner or to keep the original sequence.</div>
                    </td>
                  </tr> 
                  <tr>
                    <td class="spider_label"><label for="start_slide_num">Start with slide: </label></td>
                    <td>
                      <input type="text" name="start_slide_num" id="start_slide_num" value="<?php 
        echo $row->start_slide_num;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" />
                      <div class="spider_description">The slider will start with the specified slide. You can use the value 0 for random.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Music: </label></td>
                    <td>
                      <input type="radio" id="music1" name="music" <?php 
        echo $row->music ? 'checked="checked"' : '';
        ?>
 value="1" onClick="bwg_enable_disable('', 'tr_music_url', 'music1')" /><label for="music1">Yes</label>
                      <input type="radio" id="music0" name="music" <?php 
        echo $row->music ? '' : 'checked="checked"';
        ?>
 value="0" onClick="bwg_enable_disable('none', 'tr_music_url', 'music0')" /><label for="music0">No</label>
                      <div class="spider_description">Choose whether to have music/audio track playback with the slider or not.</div>
                    </td>
                  </tr>
                  <tr id="tr_music_url">
                    <td class="spider_label_options">
                      <label for="music_url">Music url: </label>
                    </td>
                    <td>
                      <input type="text" id="music_url" name="music_url" size="39" value="<?php 
        echo $row->music_url;
        ?>
" style="display:inline-block;" />
                      <input id="add_music_url" class="button-primary" type="button" onclick="spider_media_uploader('music', event, false); return false;" value="Add music" />
                      <div class="spider_description">Only .aac,.m4a,.f4a,.mp3,.ogg,.oga formats are supported.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Smart Load: </label></td>
                    <td>
                      <input type="radio" id="preload_images1" name="preload_images" <?php 
        echo $row->preload_images ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="preload_images1">Yes</label>
                      <input type="radio" id="preload_images0" name="preload_images" <?php 
        echo $row->preload_images ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="preload_images0">No</label>
                      <div class="spider_description">Choose to have faster load for the first few images and process the rest meanwhile.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="background_color">Background color:</label></td>
                    <td>
                      <input type="text" name="background_color" id="background_color" value="<?php 
        echo $row->background_color;
        ?>
" class="color" onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundColor: wds_hex_rgba(jQuery(this).val(), 100 - jQuery('#background_transparent').val())})" />
                      <input id="background_transparent" name="background_transparent" class="spider_int_input" type="text" onchange="jQuery('div[id^=\'wds_preview_image\']').css({backgroundColor: wds_hex_rgba(jQuery('#background_color').val(), 100 - jQuery(this).val())})" onkeypress="return spider_check_isnum(event)" value="<?php 
        echo $row->background_transparent;
        ?>
" /> %
                      <div class="spider_description">Transparency value must be between 0 to 100.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="glb_border_width">Border: </label></td>
                    <td>
                      <input type="text" name="glb_border_width" id="glb_border_width" value="<?php 
        echo $row->glb_border_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px 
                      <select name="glb_border_style" id="glb_border_style" >
                        <?php 
        foreach ($border_styles as $key => $border_style) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->glb_border_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $border_style;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <input type="text" name="glb_border_color" id="glb_border_color" value="<?php 
        echo $row->glb_border_color;
        ?>
" class="color" />
                      <div class="spider_description">Set the border width, type and the color.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="glb_border_radius">Border radius: </label></td>
                    <td>
                      <input type="text" name="glb_border_radius" id="glb_border_radius" value="<?php 
        echo $row->glb_border_radius;
        ?>
" class="spider_char_input" />
                      <div class="spider_description">Use CSS type values.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="glb_margin">Margin: </label></td>
                    <td>
                      <input type="text" name="glb_margin" id="glb_margin" value="<?php 
        echo $row->glb_margin;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description">Set a margin for the slider.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="glb_box_shadow">Shadow: </label></td>
                    <td>
                      <input type="text" name="glb_box_shadow" id="glb_box_shadow" value="<?php 
        echo $row->glb_box_shadow;
        ?>
" class="spider_box_input" />
                      <div class="spider_description">Use CSS type values (e.g. 10px 10px 5px #888888).</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Right click protection: </label>
                    </td>
                    <td>
                      <input type="radio" name="image_right_click" id="image_right_click_1" value="1" <?php 
        if ($row->image_right_click) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="image_right_click_1">Yes</label>
                      <input type="radio" name="image_right_click" id="image_right_click_0" value="0" <?php 
        if (!$row->image_right_click) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="image_right_click_0">No</label>
                      <div class="spider_description">Disable image right click possibility.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Layer out on next: </label>
                    </td>
                    <td>
                      <input type="radio" name="layer_out_next" id="layer_out_next_1" value="1" <?php 
        if ($row->layer_out_next) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="layer_out_next_1">Yes</label>
                      <input type="radio" name="layer_out_next" id="layer_out_next_0" value="0" <?php 
        if (!$row->layer_out_next) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="layer_out_next_0">No</label>
                      <div class="spider_description">Choose whether to have the layer effect out regardless of the timing between the hit to the next slider or skip the effect out and get to the next image.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Turn SliderWD Media Upload: </label></td>
                    <td>
                      <input type="radio" id="spider_uploader1" name="spider_uploader" <?php 
        echo $row->spider_uploader ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="spider_uploader1">Yes</label>
                      <input type="radio" id="spider_uploader0" name="spider_uploader" <?php 
        echo $row->spider_uploader ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="spider_uploader0">No</label>
                      <div class="spider_description">Choose the option to use the custom media upload instead of the WordPress default for adding images.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="possib_add_ffamily_input">Add font-family: </label></td>
                    <td>
                      <input type="text" id="possib_add_ffamily_input" value="" class="spider_box_input" onchange="set_ffamily_value(jQuery(this).val())" />
                      <input type="hidden" id="possib_add_ffamily" name="possib_add_ffamily" value="<?php 
        echo $row->possib_add_ffamily;
        ?>
" /> 
                      <div class="spider_description">The added font family will appear in the drop-down list of fonts.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Published: </label></td>
                    <td>
                      <input type="radio" id="published1" name="published" <?php 
        echo $row->published ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="published1">Yes</label>
                      <input type="radio" id="published0" name="published" <?php 
        echo $row->published ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="published0">No</label>
                      <div class="spider_description">Choose whether to publish the mentioned slider or not.</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_carousel_box spider_free_version_label" title="This functionality is disabled in free version.">
              <table>
                <tbody>
                  <tr>
                    <td colspan="2">
                      <div class="wd_error" style="padding: 5px; font-size: 14px; color: #000000 !important;">Carousel is disabled in free version.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Carousel: </label></td>
                    <td>
                      <input disabled="disabled" type="radio" id="carousel1" name="carousel" <?php 
        echo $row->carousel ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="carousel1">Yes</label>
                      <input disabled="disabled" type="radio" id="carousel0" name="carousel" <?php 
        echo $row->carousel ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="carousel0">No</label>
                      <div class="spider_description">If you activate this feature the effects you had chosen in Global settings for your slider will not play.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="carousel_image_counts">Number of images for carousel: </label></td>
                    <td>
                      <input disabled="disabled" type="text" id="carousel_image_counts" name="carousel_image_counts" value="<?php 
        echo $row->carousel_image_counts;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" />
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="carousel_image_parameters">Carousel image ratio: </label></td>
                    <td>
                      <input disabled="disabled" type="text" id="carousel_image_parameters" name="carousel_image_parameters" value="<?php 
        echo $row->carousel_image_parameters;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" />
                      <div class="spider_description">The value must be between 0 and 1.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Container fit: </label></td>
                    <td>
                      <input disabled="disabled" type="radio" id="carousel_fit_containerWidth1" name="carousel_fit_containerWidth" <?php 
        echo $row->carousel_fit_containerWidth ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="carousel_fit_containerWidth1">Yes</label>
                      <input disabled="disabled" type="radio" id="carousel_fit_containerWidth0" name="carousel_fit_containerWidth" <?php 
        echo $row->carousel_fit_containerWidth ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="carousel_fit_containerWidth0">No</label>
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="carousel_width">Fixed width: </label></td>
                    <td>
                      <input disabled="disabled" type="text" id="carousel_width" name="carousel_width" value="<?php 
        echo $row->carousel_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_navigation_box">
              <table>
                <tbody>
                  <tr>
                    <td class="spider_label_options">
                      <label>Next / Previous buttons: </label>
                    </td>
                    <td>
                      <input type="radio" name="prev_next_butt" id="prev_next_butt_1" value="1" <?php 
        if ($row->prev_next_butt) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="prev_next_butt_1">Yes</label>
                      <input type="radio" name="prev_next_butt" id="prev_next_butt_0" value="0" <?php 
        if (!$row->prev_next_butt) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="prev_next_butt_0">No</label>
                      <div class="spider_description">Choose whether to display Previous and Next buttons or not.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Mouse swipe navigation: </label>
                    </td>
                    <td>
                      <input type="radio" name="mouse_swipe_nav" id="mouse_swipe_nav_1" value="1" <?php 
        if ($row->mouse_swipe_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="mouse_swipe_nav_1">Yes</label>
                      <input type="radio" name="mouse_swipe_nav" id="mouse_swipe_nav_0" value="0" <?php 
        if (!$row->mouse_swipe_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="mouse_swipe_nav_0">No</label>
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Touch swipe navigation: </label>
                    </td>
                    <td>
                      <input type="radio" name="touch_swipe_nav" id="touch_swipe_nav_1" value="1" <?php 
        if ($row->touch_swipe_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="touch_swipe_nav_1">Yes</label>
                      <input type="radio" name="touch_swipe_nav" id="touch_swipe_nav_0" value="0" <?php 
        if (!$row->touch_swipe_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="touch_swipe_nav_0">No</label>
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                   <tr>
                   <tr>
                    <td class="spider_label_options">
                      <label>Mouse wheel navigation: </label>
                    </td>
                    <td>
                      <input type="radio" name="mouse_wheel_nav" id="mouse_wheel_nav_1" value="1" <?php 
        if ($row->mouse_wheel_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="mouse_wheel_nav_1">Yes</label>
                      <input type="radio" name="mouse_wheel_nav" id="mouse_wheel_nav_0" value="0" <?php 
        if (!$row->mouse_wheel_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="mouse_wheel_nav_0">No</label>
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                   <tr>
                    <td class="spider_label_options">
                      <label>Keyboard navigation: </label>
                    </td>
                    <td>
                      <input type="radio" name="keyboard_nav" id="keyboard_nav_1" value="1" <?php 
        if ($row->keyboard_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="keyboard_nav_1">Yes</label>
                      <input type="radio" name="keyboard_nav" id="keyboard_nav_0" value="0" <?php 
        if (!$row->keyboard_nav) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="keyboard_nav_0">No</label>
                      <div class="spider_description"></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Show Navigation buttons: </label>
                    </td>
                    <td>
                      <input type="radio" name="navigation" id="navigation_1" value="hover" <?php 
        if ($row->navigation == 'hover') {
            echo 'checked="checked"';
        }
        ?>
 /><label for="navigation_1">On hover</label>
                      <input type="radio" name="navigation" id="navigation_0" value="always" <?php 
        if ($row->navigation == 'always') {
            echo 'checked="checked"';
        }
        ?>
 /><label for="navigation_0">Always</label>
                      <div class="spider_description">Select between the option of always displaying the navigation buttons or only when hovered.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Image for Next / Previous buttons: </label>
                    </td>
                    <td>
                      <input type="radio" name="rl_butt_img_or_not" id="rl_butt_img_or_not_our" value="our" <?php 
        if ($row->rl_butt_img_or_not == 'our') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_next_prev_butt('our')" /><label for="rl_butt_img_or_not_our">Default</label>
                      <input type="radio" name="rl_butt_img_or_not" id="rl_butt_img_or_not_cust" value="custom" <?php 
        if ($row->rl_butt_img_or_not == 'custom') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_next_prev_butt('custom')" /><label for="rl_butt_img_or_not_cust">Custom</label>
                      <input type="radio" name="rl_butt_img_or_not" id="rl_butt_img_or_not_style" value="style" <?php 
        if ($row->rl_butt_img_or_not == 'style') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_next_prev_butt('style')" /><label for="rl_butt_img_or_not_style">Styled</label>
                      <input type="hidden" id="right_butt_url" name="right_butt_url" value="<?php 
        echo $row->right_butt_url;
        ?>
" />
                      <input type="hidden" id="right_butt_hov_url" name="right_butt_hov_url" value="<?php 
        echo $row->right_butt_hov_url;
        ?>
" />
                      <input type="hidden" id="left_butt_url" name="left_butt_url" value="<?php 
        echo $row->left_butt_url;
        ?>
" />
                      <input type="hidden" id="left_butt_hov_url" name="left_butt_hov_url" value="<?php 
        echo $row->left_butt_hov_url;
        ?>
" />
                      <div class="spider_description">Choose whether to use default navigation buttons or to upload custom ones.</div>
                    </td>
                  </tr>	
                </tbody>
                <tbody class="<?php 
        echo $fv_class;
        ?>
"<?php 
        echo $fv_title;
        ?>
>
                  <?php 
        echo $fv_message;
        ?>
                  <tr id="right_left_butt_style">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="rl_butt_style">Next / Previous buttons style: </label></td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <select name="rl_butt_style" id="rl_butt_style" onchange="change_rl_butt_style(jQuery(this).val())">
                          <?php 
        foreach ($button_styles as $key => $button_style) {
            ?>
                            <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->rl_butt_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $button_style;
            ?>
</option>
                            <?php 
        }
        ?>
                          </select>
                        </div>
                        <div style="display: table-cell; vertical-align: middle; background-color: rgba(229, 229, 229, 0.62); text-align: center;">
                          <i id="wds_left_style" class="fa <?php 
        echo $row->rl_butt_style;
        ?>
-left" style="color: #<?php 
        echo $row->butts_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                          <i id="wds_right_style" class="fa <?php 
        echo $row->rl_butt_style;
        ?>
-right" style="color: #<?php 
        echo $row->butts_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                        </div>
                      </div>
                      <div class="spider_description">Choose the style of the button you prefer to have as navigation buttons.</div>
                    </td>
                  </tr>				  
                  <tr id="right_butt_upl">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label>Upload buttons images: </label>
                    </td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Previous Button" onclick="alert('This functionality is disabled in free version.')" />
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Previous Button Hover" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Next Button" onclick="alert('This functionality is disabled in free version.')" />
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Next Button Hover" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                          <img id="left_butt_img" src="<?php 
        echo $row->left_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="right_butt_img" src="<?php 
        echo $row->right_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="left_butt_hov_img" src="<?php 
        echo $row->left_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="right_butt_hov_img" src="<?php 
        echo $row->right_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                        </div>
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="wds_change_custom_src()" value="Reverse" />
                        </div>
                      </div>
                    </td>
                  </tr>
                  <script>				  
                    var wds_rl_butt_type = [];
                    var rl_butt_dir = '<?php 
        echo WD_S_URL . '/images/arrow/';
        ?>
';
                    var type_cur_fold = '1';
                    <?php 
        $folder_names = scandir(WD_S_DIR . '/images/arrow');
        $cur_fold_name = '';
        $cur_type_key = '';
        $cur_color_key = '';
        $cur_sub_fold_names = array();
        array_splice($folder_names, 0, 2);
        $flag = FALSE;
        foreach ($folder_names as $type_key => $folder_name) {
            if (is_dir(WD_S_DIR . '/images/arrow/' . $folder_name)) {
                ?>
                        wds_rl_butt_type["<?php 
                echo $type_key;
                ?>
"] = [];
                        wds_rl_butt_type["<?php 
                echo $type_key;
                ?>
"]["type_name"] = "<?php 
                echo $folder_name;
                ?>
";
                        <?php 
                if ($row->left_butt_url != '') {
                    /* Getting current button's type folder and color folder.*/
                    $check_cur_fold = explode('/', $row->left_butt_url);
                    if (in_array($folder_name, $check_cur_fold)) {
                        $flag = TRUE;
                        $cur_fold_name = $folder_name;
                        $cur_type_key = $type_key;
                        $cur_sub_fold_names = scandir(WD_S_DIR . '/images/arrow/' . $cur_fold_name);
                        array_splice($cur_sub_fold_names, 0, 2);
                        ?>
                        type_cur_fold = '<?php 
                        echo $cur_type_key;
                        ?>
';
                            <?php 
                    }
                }
                $sub_folder_names = scandir(WD_S_DIR . '/images/arrow/' . $folder_name);
                array_splice($sub_folder_names, 0, 2);
                foreach ($sub_folder_names as $color_key => $sub_folder_name) {
                    if (is_dir(WD_S_DIR . '/images/arrow/' . $folder_name . '/' . $sub_folder_name)) {
                        if ($cur_fold_name == $folder_name) {
                            /* Getting current button's color key.*/
                            if (in_array($sub_folder_name, $check_cur_fold)) {
                                $cur_color_key = $color_key;
                            }
                        }
                        ?>
                            wds_rl_butt_type["<?php 
                        echo $type_key;
                        ?>
"]["<?php 
                        echo $color_key;
                        ?>
"] = "<?php 
                        echo $sub_folder_name;
                        ?>
";
                            <?php 
                    }
                }
            } else {
                ?>
                        console.log('<?php 
                echo $folder_name . " is not a directory.";
                ?>
');
                        <?php 
            }
        }
        ?>
 
                  </script>
                  <tr id="right_left_butt_select">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label for="right_butt_url">Choose buttons: </label>
                    </td>
                    <td style="display: block;">
                      <div style="display: table; margin-bottom: 14px;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <div style="display: block; width: 180px;">
                            <div class="spider_choose_option" onclick="wds_choose_option(this)"> 
                              <div  class="spider_option_main_title">Choose group</div>
                              <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color: #1E8CBE"></i></div>
                            </div>
                            <div class="spider_options_cont">
                            <?php 
        foreach ($folder_names as $type_key => $folder_name) {
            ?>
 							  							  
                              <div class="spider_option_cont wds_rl_butt_groups" value="<?php 
            echo $type_key;
            ?>
" <?php 
            echo $cur_type_key == $type_key ? 'selected="selected" style="background-color: #3399FF;"' : '';
            ?>
 onclick="change_rl_butt_type(this)"> 
                                <div  class="spider_option_cont_title">
                                  <?php 
            echo 'Group-' . ++$type_key;
            ?>
                                </div>
                                <div class="spider_option_cont_img">
                                  <img class="src_top_left" style="display: inline-block; width: 14px; height: 14px;" />
                                  <img class="src_top_right" style="display: inline-block; width: 14px; height: 14px;" />
                                  <img class="src_bottom_left" style="display: inline-block; width: 14px; height: 14px;" />
                                  <img class="src_bottom_right" style="display: inline-block; width: 14px; height: 14px;" /> 
                                </div>
                              </div>
                              <?php 
        }
        if (!$flag) {
            /* Folder doesn't exist.*/
            ?>
                              <div class="spider_option_cont" value="0" selected="selected" disabled="disabled">Custom</div>
                              <?php 
        }
        ?>
                            </div>
                          </div>							
                        </div>
                        <div style="display:table-cell;vertical-align: middle;">
                          <div style="display: block; width: 180px; margin-left: 12px;">
                            <div class="spider_choose_option" onclick="alert('This functionality is disabled in free version.')">
                              <div  class="spider_option_main_title">Choose color</div>
                              <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color:#1E8CBE"></i></div>
                            </div>
                          </div>
                        </div>
                        <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;">
                          <div style=" display: block; margin-left: 12px; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                          <img id="rl_butt_img_l" src="<?php 
        echo $row->left_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="rl_butt_img_r" src="<?php 
        echo $row->right_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="rl_butt_hov_img_l" src="<?php 
        echo $row->left_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="rl_butt_hov_img_r" src="<?php 
        echo $row->right_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          </div>
                        </div>
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="change_src()" value="Reverse" />
                        </div>
                      </div>
                      <div class="spider_description">Choose the type and color for navigation button images. The option is designed for limited preview (colors not included) purposes and can't be saved.</div>
                    </td>
                  </tr>
                  <tr id="right_left_butt_size">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="rl_butt_size">Next / Previous buttons size: </label></td>
                    <td>
                      <input type="text" name="rl_butt_size" id="rl_butt_size" value="<?php 
        echo $row->rl_butt_size;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <div class="spider_description">Set the size for the next / previous buttons.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Play / Pause button: </label>
                    </td>
                    <td>
                      <input type="radio" name="play_paus_butt" id="play_paus_butt_1" value="1" <?php 
        if ($row->play_paus_butt) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="play_paus_butt_1">Yes</label>
                      <input type="radio" name="play_paus_butt" id="play_paus_butt_0" value="0" <?php 
        if (!$row->play_paus_butt) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="play_paus_butt_0">No</label>
                      <div class="spider_description">Choose whether to display Play and Pause buttons or not.</div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr>
                    <td class="spider_label_options">
                      <label>Image for Play / Pause buttons: </label>
                    </td>
                    <td>
                      <input type="radio" name="play_paus_butt_img_or_not" id="play_pause_butt_img_or_not_our" value="our" <?php 
        if ($row->play_paus_butt_img_or_not == 'our') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_play_pause_butt('our')" /><label for="play_pause_butt_img_or_not_our">Default</label>
                      <input type="radio" name="play_paus_butt_img_or_not" id="play_pause_butt_img_or_not_cust" value="custom" <?php 
        if ($row->play_paus_butt_img_or_not == 'custom') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_play_pause_butt('custom')" /><label for="play_pause_butt_img_or_not_cust">Custom</label>
                      <input type="radio" name="play_paus_butt_img_or_not" id="play_pause_butt_img_or_not_select" value="style" <?php 
        if ($row->play_paus_butt_img_or_not == 'style') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_play_pause_butt('style')" /><label for="play_pause_butt_img_or_not_select">Styled</label>
                      <input type="hidden" id="play_butt_url" name="play_butt_url" value="<?php 
        echo $row->play_butt_url;
        ?>
" />
                      <input type="hidden" id="play_butt_hov_url" name="play_butt_hov_url" value="<?php 
        echo $row->play_butt_hov_url;
        ?>
" />
                      <input type="hidden" id="paus_butt_url" name="paus_butt_url" value="<?php 
        echo $row->paus_butt_url;
        ?>
" />
                      <input type="hidden" id="paus_butt_hov_url" name="paus_butt_hov_url" value="<?php 
        echo $row->paus_butt_hov_url;
        ?>
" />
                      <div class="spider_description">Choose whether to use default play/pause buttons or to upload custom ones.</div>
                    </td>
                  </tr>
                </tbody>
                <tbody class="<?php 
        echo $fv_class;
        ?>
"<?php 
        echo $fv_title;
        ?>
>
                  <tr id="play_pause_butt_style">
                    <td class="spider_label"><label for="pp_butt_style">Play / Pause buttons style: </label></td>
                    <td>
                      <div style="display: table-cell; vertical-align: middle; background-color: rgba(229, 229, 229, 0.62); text-align: center;">
                        <i id="wds_play_style" class="fa fa-play" style="color: #<?php 
        echo $row->butts_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                        <i id="wds_paus_style" class="fa fa-pause" style="color: #<?php 
        echo $row->butts_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                      </div>
                    </td>
                  </tr>
                  <tr id="play_pause_butt_cust">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label>Upload buttons images: </label>
                    </td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Play Button" onclick="alert('This functionality is disabled in free version.')" />
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Play Button Hover" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Pause Button" onclick="alert('This functionality is disabled in free version.')" />
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Pause Button Hover" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                          <img id="play_butt_img" src="<?php 
        echo $row->play_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="paus_butt_img" src="<?php 
        echo $row->paus_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="play_butt_hov_img" src="<?php 
        echo $row->play_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="paus_butt_hov_img" src="<?php 
        echo $row->paus_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                        </div>
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="wds_change_play_paus_custom_src()" value="Reverse" />
                        </div>
                      </div>
                    </td>
                  </tr>
                  <script>				  
                    var wds_pp_butt_type = [];
                    var pp_butt_dir = '<?php 
        echo WD_S_URL . '/images/button/';
        ?>
';
                    var pp_type_cur_fold = '1';
                    <?php 
        $folder_names = scandir(WD_S_DIR . '/images/button');
        $butt_cur_fold_name = '';
        $butt_cur_type_key = '';
        $butt_cur_color_key = '';
        $butt_cur_sub_fold_names = array();
        array_splice($folder_names, 0, 2);
        $flag = FALSE;
        foreach ($folder_names as $type_key => $folder_name) {
            if (is_dir(WD_S_DIR . '/images/button/' . $folder_name)) {
                ?>
                        wds_pp_butt_type["<?php 
                echo $type_key;
                ?>
"] = [];
                        wds_pp_butt_type["<?php 
                echo $type_key;
                ?>
"]["type_name"] = "<?php 
                echo $folder_name;
                ?>
";
                        <?php 
                if ($row->play_butt_url != '') {
                    /* Getting current button's type folder and color folder.*/
                    $check_butt_cur_fold = explode('/', $row->play_butt_url);
                    if (in_array($folder_name, $check_butt_cur_fold)) {
                        $flag = TRUE;
                        $butt_cur_fold_name = $folder_name;
                        $butt_cur_type_key = $type_key;
                        $butt_cur_sub_fold_names = scandir(WD_S_DIR . '/images/button/' . $butt_cur_fold_name);
                        array_splice($butt_cur_sub_fold_names, 0, 2);
                        ?>
                        pp_type_cur_fold = '<?php 
                        echo $butt_cur_type_key;
                        ?>
';
                            <?php 
                    }
                }
                $sub_folder_names = scandir(WD_S_DIR . '/images/button/' . $folder_name);
                array_splice($sub_folder_names, 0, 2);
                foreach ($sub_folder_names as $color_key => $sub_folder_name) {
                    if (is_dir(WD_S_DIR . '/images/button/' . $folder_name . '/' . $sub_folder_name)) {
                        if ($butt_cur_fold_name == $folder_name) {
                            /* Getting current button's color key.*/
                            if (in_array($sub_folder_name, $check_butt_cur_fold)) {
                                $butt_cur_color_key = $color_key;
                            }
                        }
                        ?>
                            wds_pp_butt_type["<?php 
                        echo $type_key;
                        ?>
"]["<?php 
                        echo $color_key;
                        ?>
"] = "<?php 
                        echo $sub_folder_name;
                        ?>
";
                            <?php 
                    }
                }
            } else {
                ?>
                        console.log('<?php 
                echo $folder_name . " is not a directory.";
                ?>
');
                        <?php 
            }
        }
        ?>
 
                  </script>
                  <tr id="play_pause_butt_select">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label for="right_butt_url">Choose buttons: </label>
                    </td>
                    <td style="display: block;">
                        <div style="display: table; margin-bottom: 14px;">
                          <div style="display: table-cell; vertical-align: middle;">
                            <div style="display: block; width: 180px;">
                              <div class="spider_choose_option" onclick="wds_choose_pp_option(this)"> 
                                <div class="spider_option_main_title">Choose group</div>
                                <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color: #1E8CBE"></i></div>
                              </div>
                              <div class="spider_pp_options_cont">
                              <?php 
        foreach ($folder_names as $type_key => $folder_name) {
            ?>
 							  							  
                                <div class="spider_option_cont wds_pp_butt_groups" value="<?php 
            echo $type_key;
            ?>
" <?php 
            echo $butt_cur_type_key == $type_key ? 'selected="selected" style="background-color: #3399FF;"' : '';
            ?>
 onclick="change_play_paus_butt_type(this)"> 
                                  <div  class="spider_option_cont_title">
                                    <?php 
            echo 'Group-' . ++$type_key;
            ?>
                                  </div>
                                  <div class="spider_option_cont_img">
                                    <img class="pp_src_top_left" style="display: inline-block; width: 14px; height: 14px;" />
                                    <img class="pp_src_top_right" style="display: inline-block; width: 14px; height: 14px;" />
                                    <img class="pp_src_bottom_left" style="display: inline-block; width: 14px; height: 14px;" />
                                    <img class="pp_src_bottom_right" style="display: inline-block; width: 14px; height: 14px;" /> 
                                  </div>
                                </div>
                                <?php 
        }
        if (!$flag) {
            /* Folder doesn't exist.*/
            ?>
                                <div class="spider_option_cont" value="0" selected="selected" disabled="disabled">Custom</div>
                                <?php 
        }
        ?>
                              </div>
                            </div>
                          </div>
                          <div style="display:table-cell;vertical-align: middle;">
                            <div style="display: block; width: 180px; margin-left: 12px;">
                              <div class="spider_choose_option" onclick="alert('This functionality is disabled in free version.')">
                                <div  class="spider_option_main_title">Choose color</div>
                                <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color:#1E8CBE"></i></div>
                              </div>
                            </div>
                          </div>
                          <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;">
                            <div style=" display: block; margin-left: 12px; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                              <img id="pp_butt_img_play" src="<?php 
        echo $row->play_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                              <img id="pp_butt_img_paus" src="<?php 
        echo $row->paus_butt_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                              <img id="pp_butt_hov_img_play" src="<?php 
        echo $row->play_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                              <img id="pp_butt_hov_img_paus" src="<?php 
        echo $row->paus_butt_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                            </div>
                          </div>
                          <div style="display: table-cell; text-align: center; vertical-align: middle;">
                            <input type="button" class="button button-small wds_reverse" onclick="change_play_paus_src()" value="Reverse" />
                          </div>
                        </div>
                      <div class="spider_description">Choose the type and color for navigation button images. The option is designed for limited preview (colors not included) purposes and can't be saved.</div>
                    </td>
                  </tr>
                  <tr id="play_pause_butt_size">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="pp_butt_size">Play / Pause button size: </label></td>
                    <td>
                      <input type="text" name="pp_butt_size" id="pp_butt_size" value="<?php 
        echo $row->pp_butt_size;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <div class="spider_description">Set the size for the play / pause buttons.</div>
                    </td>
                  </tr>
                  <tr id="tr_butts_color">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="butts_color">Buttons color: </label></td>
                    <td>
                      <input type="text" name="butts_color" id="butts_color" value="<?php 
        echo $row->butts_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 onchange="jQuery('#wds_left_style,#wds_right_style').css({color: '#' + jQuery(this).val()})" />
                      <div class="spider_description">Select a color for the navigation buttons.</div>
                    </td>
                  </tr>
                  <tr id="tr_hover_color">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="hover_color">Hover color: </label></td>
                    <td>
                      <input type="text" name="hover_color" id="hover_color" value="<?php 
        echo $row->hover_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 />
                      <div class="spider_description">Select a hover color for the navigation buttons.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="nav_border_width">Border: </label></td>
                    <td>
                      <input type="text" name="nav_border_width" id="nav_border_width" value="<?php 
        echo $row->nav_border_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <select name="nav_border_style" id="nav_border_style" <?php 
        echo $fv_disabled;
        ?>
>
                        <?php 
        foreach ($border_styles as $key => $border_style) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->nav_border_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $border_style;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <input type="text" name="nav_border_color" id="nav_border_color" value="<?php 
        echo $row->nav_border_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 />
                      <div class="spider_description">Select the type, size and the color of border for the navigation buttons.</div>
                    </td>
                  </tr>
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="nav_border_radius">Border radius: </label></td>
                    <td>
                      <input type="text" name="nav_border_radius" id="nav_border_radius" value="<?php 
        echo $row->nav_border_radius;
        ?>
" class="spider_char_input" <?php 
        echo $fv_disabled;
        ?>
 />
                      <div class="spider_description">Use CSS type values.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="nav_bg_color">Background color: </label></td>
                    <td>
                      <input type="text" name="nav_bg_color" id="nav_bg_color" value="<?php 
        echo $row->nav_bg_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 />
                      <input type="text" name="butts_transparent" id="butts_transparent" value="<?php 
        echo $row->butts_transparent;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> %
                      <div class="spider_description">Transparency value must be between 0 to 100.</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_bullets_box">
              <table>
                <tbody>
                  <tr>
                    <td class="spider_label"><label>Enable bullets: </label></td>
                    <td>
                      <input type="radio" id="enable_bullets1" name="enable_bullets" <?php 
        echo $row->enable_bullets ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="enable_bullets1">Yes</label>
                      <input type="radio" id="enable_bullets0" name="enable_bullets" <?php 
        echo $row->enable_bullets ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="enable_bullets0">No</label>
                      <div class="spider_description">Choose whether to have navigation bullets or not.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Show bullets: </label>
                    </td>
                    <td>
                      <input type="radio" name="bull_hover" id="bull_hover_0" value="0" <?php 
        if ($row->bull_hover == 0) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="bull_hover_0">On hover</label>
                      <input type="radio" name="bull_hover" id="bull_hover_1" value="1" <?php 
        if ($row->bull_hover == 1) {
            echo 'checked="checked"';
        }
        ?>
 /><label for="bull_hover_1">Always</label>
                      <div class="spider_description">Select between the option of always displaying the bullets or only when hovered.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label>Position: </label></td>
                    <td>
                      <select name="bull_position" id="bull_position">
                        <option value="top" <?php 
        echo $row->bull_position == "top" ? 'selected="selected"' : '';
        ?>
>Top</option>
                        <option value="bottom" <?php 
        echo $row->bull_position == "bottom" ? 'selected="selected"' : '';
        ?>
>Bottom</option>
                      </select>
                      <div class="spider_description">Select the position for the navigation bullets.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label_options">
                      <label>Image for bullets: </label>
                    </td>
                    <td>
                      <input type="radio" name="bull_butt_img_or_not" id="bull_butt_img_or_not_our" value="our" <?php 
        if ($row->bull_butt_img_or_not == 'our') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_bull_butt('our')" /><label for="bull_butt_img_or_not_our">Default</label>
                      <input type="radio" name="bull_butt_img_or_not" id="bull_butt_img_or_not_cust" value="custom" <?php 
        if ($row->bull_butt_img_or_not == 'custom') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_bull_butt('custom')" /><label for="bull_butt_img_or_not_cust">Custom</label>
                      <input type="radio" name="bull_butt_img_or_not" id="bull_butt_img_or_not_stl" value="style" <?php 
        if ($row->bull_butt_img_or_not == 'style') {
            echo 'checked="checked"';
        }
        ?>
 onClick="image_for_bull_butt('style')" /><label for="bull_butt_img_or_not_stl">Styled</label>
                      <input type="hidden" id="bullets_img_main_url" name="bullets_img_main_url" value="<?php 
        echo $row->bullets_img_main_url;
        ?>
" />
                      <input type="hidden" id="bullets_img_hov_url" name="bullets_img_hov_url" value="<?php 
        echo $row->bullets_img_hov_url;
        ?>
" />
                      <div class="spider_description">Choose whether to use default or styled bullets.</div>
                    </td>
                  </tr>
                </tbody>
                <tbody class="<?php 
        echo $fv_class;
        ?>
"<?php 
        echo $fv_title;
        ?>
>
                  <?php 
        echo $fv_message;
        ?>
                  <tr id="bullets_style">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_style">Bullet style: </label></td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <select name="bull_style" id="bull_style" <?php 
        echo $fv_disabled;
        ?>
 onchange="change_bull_style(jQuery(this).val())">
                            <?php 
        foreach ($bull_styles as $key => $bull_style) {
            ?>
                              <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->bull_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $bull_style;
            ?>
</option>
                              <?php 
        }
        ?>
                          </select>
                        </div>
                        <div style="display: table-cell; vertical-align: middle; background-color: rgba(229, 229, 229, 0.62); text-align: center;">
                          <i id="wds_act_bull_style" class="fa <?php 
        echo str_replace('-o', '', $row->bull_style);
        ?>
" style="color: #<?php 
        echo $row->bull_act_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                          <i id="wds_deact_bull_style" class="fa <?php 
        echo $row->bull_style;
        ?>
" style="color: #<?php 
        echo $row->bull_color;
        ?>
; display: inline-block; font-size: 40px; width: 40px; height: 40px;"></i>
                        </div>
                      </div>
                      <div class="spider_description">Choose the style for the bullets.</div>
                    </td>
                  </tr>
                  <script>				  
                    var wds_blt_img_type = [];
                    var blt_img_dir = '<?php 
        echo WD_S_URL . '/images/bullet/';
        ?>
';
                    var bull_type_cur_fold = '1';
                    <?php 
        $folder_names = scandir(WD_S_DIR . '/images/bullet');
        $bull_cur_fold_name = '';
        $bull_cur_type_key = '';
        $bull_cur_color_key = '';
        $bull_cur_sub_fold_names = array();
        array_splice($folder_names, 0, 2);
        $flag = FALSE;
        foreach ($folder_names as $type_key => $folder_name) {
            if (is_dir(WD_S_DIR . '/images/bullet/' . $folder_name)) {
                ?>
                        wds_blt_img_type["<?php 
                echo $type_key;
                ?>
"] = [];
                        wds_blt_img_type["<?php 
                echo $type_key;
                ?>
"]["type_name"] = "<?php 
                echo $folder_name;
                ?>
";
                        <?php 
                if ($row->bullets_img_main_url != '') {
                    /* Getting current button's type folder and color folder.*/
                    $check_bull_cur_fold = explode('/', $row->bullets_img_main_url);
                    if (in_array($folder_name, $check_bull_cur_fold)) {
                        $flag = TRUE;
                        $bull_cur_fold_name = $folder_name;
                        $bull_cur_type_key = $type_key;
                        $bull_cur_sub_fold_names = scandir(WD_S_DIR . '/images/bullet/' . $bull_cur_fold_name);
                        array_splice($bull_cur_sub_fold_names, 0, 2);
                        ?>
                        bull_type_cur_fold = '<?php 
                        echo $bull_cur_type_key;
                        ?>
';
                            <?php 
                    }
                }
                $sub_folder_names = scandir(WD_S_DIR . '/images/bullet/' . $folder_name);
                array_splice($sub_folder_names, 0, 2);
                foreach ($sub_folder_names as $color_key => $sub_folder_name) {
                    if (is_dir(WD_S_DIR . '/images/bullet/' . $folder_name . '/' . $sub_folder_name)) {
                        if ($bull_cur_fold_name == $folder_name) {
                            /* Getting current button's color key.*/
                            if (in_array($sub_folder_name, $check_bull_cur_fold)) {
                                $bull_cur_color_key = $color_key;
                            }
                        }
                        ?>
                            wds_blt_img_type["<?php 
                        echo $type_key;
                        ?>
"]["<?php 
                        echo $color_key;
                        ?>
"] = "<?php 
                        echo $sub_folder_name;
                        ?>
";
                            <?php 
                    }
                }
            } else {
                ?>
                        console.log('<?php 
                echo $folder_name . " is not a directory.";
                ?>
');
                        <?php 
            }
        }
        ?>
 
                  </script>
                  <tr id="bullets_images_cust">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label>Upload buttons images: </label>
                    </td>
                    <td>
                      <div style="display: table;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_ctrl_btn_upload wds_free_button" type="button" value="Active Button" onclick="alert('This functionality is disabled in free version.')" />
                        </div>
                        <div style="display: table-cell; vertical-align: middle;">
                          <input class="button-secondary wds_free_button" type="button" value="Deactive Button" onclick="alert('This functionality is disabled in free version.')" />
                        </div>  
                        <div style="width:100px; display: table-cell; vertical-align: middle; text-align: center;background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                          <img id="bull_img_main" src="<?php 
        echo $row->bullets_img_main_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" />
                          <img id="bull_img_hov" src="<?php 
        echo $row->bullets_img_hov_url;
        ?>
" style="display:inline-block; width: 40px; height: 40px;" /> 
                        </div>
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="wds_change_bullets_custom_src()" value="Reverse" />
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr id="bullets_images_select">
                    <td class="spider_label_options" style="vertical-align: middle;">
                      <label for="bullets_images_url">Chooes buttons: </label>
                    </td>
                    <td style="display: block;">
                      <div style="display: table; margin-bottom: 14px;">
                        <div style="display: table-cell; vertical-align: middle;">
                          <div style="display: block; width: 180px;">
                            <div class="spider_choose_option" onclick="wds_choose_bull_option(this)">
                              <div class="spider_option_main_title">Choose group</div>
                              <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color: #1E8CBE;"></i></div>
                            </div>
                            <div class="spider_bull_options_cont">
                            <?php 
        foreach ($folder_names as $type_key => $folder_name) {
            ?>
                              <div class="spider_option_cont wds_bull_butt_groups" value="<?php 
            echo $type_key;
            ?>
" <?php 
            echo $bull_cur_type_key == $type_key ? 'selected="selected" style="background-color: #3399FF;"' : '';
            ?>
 onclick="change_bullets_images_type(this)">
                                <div class="spider_option_cont_title" style="width: 64%;">
                                  <?php 
            echo 'Group-' . ++$type_key;
            ?>
                                </div>
                                <div class="spider_option_cont_img">
                                  <img class="bull_src_left" style="display: inline-block; width: 14px; height: 14px;" />
                                  <img class="bull_src_right" style="display: inline-block; width: 14px; height: 14px;" />
                                </div>
                              </div>
                              <?php 
        }
        if (!$flag) {
            /* Folder doesn't exist.*/
            ?>
                              <div class="spider_option_cont" value="0" selected="selected" disabled="disabled">Custom</div>
                              <?php 
        }
        ?>
                            </div>
                          </div>							
                        </div>
                        <div style="display: table-cell; vertical-align: middle;">
                          <div style="display: block; width: 180px; margin-left: 12px;">
                            <div class="spider_choose_option" onclick="alert('This functionality is disabled in free version.')" >
                              <div class="spider_option_main_title" >Choose color</div>
                              <div class="spider_sel_option_ic"><i class="fa fa-angle-down fa-lg" style="color: #1E8CBE;"></i></div>
                            </div>
                          </div>
                        </div>						
                        <div style="width: 100px; display: table-cell; vertical-align: middle; text-align: center;">
                          <div style="display: block; vertical-align: middle; margin-left: 12px; text-align: center; background-color: rgba(229, 229, 229, 0.62); padding-top: 4px; border-radius: 3px;">
                            <img id="bullets_img_main" src="<?php 
        echo $row->bullets_img_main_url;
        ?>
" style="display: inline-block; width: 40px; height: 40px;" />
                            <img id="bullets_img_hov" src="<?php 
        echo $row->bullets_img_hov_url;
        ?>
" style="display: inline-block; width: 40px; height: 40px;" />
                          </div>
                        </div>						
                        <div style="display: table-cell; text-align: center; vertical-align: middle;">
                          <input type="button" class="button button-small wds_reverse" onclick="change_bullets_src()" value="Reverse" />
                        </div>
                      </div>
                      <div class="spider_description">Choose the type and color for the bullets. The option is designed for limited preview (colors not included) purposes and can't be saved.</div>
                    </td>
                  </tr>
                  <tr id="bullet_size">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_size">Size: </label></td>
                    <td>
                      <input type="text" name="bull_size" id="bull_size" value="<?php 
        echo $row->bull_size;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <div class="spider_description">Define the size of the navigation bullets.</div>
                    </td>
                  </tr>
                  <tr id="bullets_color">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_color">Color: </label></td>
                    <td>
                      <input type="text" name="bull_color" id="bull_color" value="<?php 
        echo $row->bull_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 onchange="jQuery('#wds_deact_bull_style').css({color: '#' + jQuery(this).val()})" />
                      <div class="spider_description">Select the color for the navigation bullets.</div>
                    </td>
                  </tr> 
                  <tr id="bullets_act_color">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_act_color">Active color: </label></td>
                    <td>
                      <input type="text" name="bull_act_color" id="bull_act_color" value="<?php 
        echo $row->bull_act_color;
        ?>
" class="color" <?php 
        echo $fv_disabled;
        ?>
 onchange="jQuery('#wds_act_bull_style').css({color: '#' + jQuery(this).val()})" />
                      <div class="spider_description">Select the color for the bullet, which is currently displaying a corresponding image.</div>
                    </td>
                  </tr>
                  <tr id="bullet_margin">
                    <td class="spider_label <?php 
        echo $fv_class;
        ?>
"><label for="bull_margin">Margin: </label></td>
                    <td>
                      <input type="text" name="bull_margin" id="bull_margin" value="<?php 
        echo $row->bull_margin;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" <?php 
        echo $fv_disabled;
        ?>
 /> px
                      <div class="spider_description">Set the margin for the navigation bullets in pixels.</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_filmstrip_box spider_free_version_label" title="This functionality is disabled in free version.">
              <table>
                <tbody>
                  <tr>
                    <td colspan="2">
                      <div class="wd_error" style="padding: 5px; font-size: 14px; color: #000000 !important;">Filmstrip is disabled in free version.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label spider_free_version_label"><label>Enable filmstrip: </label></td>
                    <td>
                      <input disabled="disabled" type="radio" id="enable_filmstrip1" name="enable_filmstrip" <?php 
        echo $row->enable_filmstrip ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="filmstrip1">Yes</label>
                      <input disabled="disabled" type="radio" id="enable_filmstrip0" name="enable_filmstrip" <?php 
        echo $row->enable_filmstrip ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="filmstrip0">No</label>
                      <div class="spider_description">Choose whether to have thumbnails of the slides displayed as a filmstrip or not.</div>
                    </td>
                  </tr>
                  <tr id="filmstrip_position">
                    <td class="spider_label"><label>Position: </label></td>
                    <td>
                      <select disabled="disabled" name="film_pos" id="film_pos">
                        <option value="top" <?php 
        echo $row->film_pos == "top" ? 'selected="selected"' : '';
        ?>
>Top</option>
                        <option value="right" <?php 
        echo $row->film_pos == "right" ? 'selected="selected"' : '';
        ?>
>Right</option>
                        <option value="bottom" <?php 
        echo $row->film_pos == "bottom" ? 'selected="selected"' : '';
        ?>
>Bottom</option>
                        <option value="left" <?php 
        echo $row->film_pos == "left" ? 'selected="selected"' : '';
        ?>
>Left</option>
                      </select>
                      <div class="spider_description">Set the position of the filmstrip.</div>
                    </td>
                  </tr>
                  <tr id="filmstrip_size">
                    <td class="spider_label"><label for="film_thumb_width">Thumbnail dimensions: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_thumb_width" id="film_thumb_width" value="<?php 
        echo $row->film_thumb_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> x 
                      <input disabled="disabled" type="text" name="film_thumb_height" id="film_thumb_height" value="<?php 
        echo $row->film_thumb_height;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description">Define the maximum width and heigth of the filmstrip thumbnails.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="film_bg_color">Background color: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_bg_color" id="film_bg_color" value="<?php 
        echo $row->film_bg_color;
        ?>
" class="color" />
                      <div class="spider_description">Select the background color for the filmstrip.</div>
                    </td>
                  </tr>
                  <tr id="filmstrip_thumb_margin">
                    <td class="spider_label"><label for="film_tmb_margin">Thumbnail separator: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_tmb_margin" id="film_tmb_margin" value="<?php 
        echo $row->film_tmb_margin;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)"/> px
                      <div class="spider_description">Set the separator for the thumbnails.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="film_act_border_width">Active border: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_act_border_width" id="film_act_border_width" value="<?php 
        echo $row->film_act_border_width;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)"/> px
                      <select disabled="disabled" name="film_act_border_style" id="film_act_border_style">
                        <?php 
        foreach ($border_styles as $key => $border_style) {
            ?>
                          <option value="<?php 
            echo $key;
            ?>
" <?php 
            echo $row->film_act_border_style == $key ? 'selected="selected"' : '';
            ?>
><?php 
            echo $border_style;
            ?>
</option>
                          <?php 
        }
        ?>
                      </select>
                      <input disabled="disabled" type="text" name="film_act_border_color" id="film_act_border_color" value="<?php 
        echo $row->film_act_border_color;
        ?>
" class="color"/>
                      <div class="spider_description">The thumbnail for the currently displayed image will have a border. You can set its size, type and color.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="film_dac_transparent">Deactive transparency: </label></td>
                    <td>
                      <input disabled="disabled" type="text" name="film_dac_transparent" id="film_dac_transparent" value="<?php 
        echo $row->film_dac_transparent;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)"/> %
                      <div class="spider_description">You can set a transparency level for the inactive filmstrip items which must be between 0 to 100..</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_timer_bar_box">
              <table>
                <tbody>
                  <tr>
                    <td class="spider_label"><label>Enable timer bar: </label></td>
                    <td>
                      <input type="radio" id="enable_time_bar1" name="enable_time_bar" <?php 
        echo $row->enable_time_bar ? 'checked="checked"' : '';
        ?>
 value="1" /><label for="time_bar1">Yes</label>
                      <input type="radio" id="enable_time_bar0" name="enable_time_bar" <?php 
        echo $row->enable_time_bar ? '' : 'checked="checked"';
        ?>
 value="0" /><label for="time_bar0">No</label>
                      <div class="spider_description">You can add a bar displaying the timing left to switching to the next slide on autoplay.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="timer_bar_type">Type: </label></td>
                    <td>
                      <select name="timer_bar_type" id="timer_bar_type">
                        <option value="top" <?php 
        echo $row->timer_bar_type == "top" ? 'selected="selected"' : '';
        ?>
>Line top</option>
                        <option value="bottom" <?php 
        echo $row->timer_bar_type == "bottom" ? 'selected="selected"' : '';
        ?>
>Line Bottom</option>
                        <option value="circle_top_left" <?php 
        echo $row->timer_bar_type == "circle_top_left" ? 'selected="selected"' : '';
        ?>
>Circle top left</option>
                        <option value="circle_top_right" <?php 
        echo $row->timer_bar_type == "circle_top_right" ? 'selected="selected"' : '';
        ?>
>Circle top right</option>
                        <option value="circle_bot_left" <?php 
        echo $row->timer_bar_type == "circle_bot_left" ? 'selected="selected"' : '';
        ?>
>Circle bottom left</option>
                        <option value="circle_bot_right" <?php 
        echo $row->timer_bar_type == "circle_bot_right" ? 'selected="selected"' : '';
        ?>
>Circle bottom right</option>
                      </select>
                      <div class="spider_description">Choose the type of the timer bar to be used within the slider.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="timer_bar_size">Size: </label></td>
                    <td>
                      <input type="text" name="timer_bar_size" id="timer_bar_size" value="<?php 
        echo $row->timer_bar_size;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)" /> px
                      <div class="spider_description">Define the height of the timer bar.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="spider_label"><label for="timer_bar_color">Color: </label></td>
                    <td>
                      <input type="text" name="timer_bar_color" id="timer_bar_color" value="<?php 
        echo $row->timer_bar_color;
        ?>
" class="color" />
                      <input type="text" name="timer_bar_transparent" id="timer_bar_transparent" value="<?php 
        echo $row->timer_bar_transparent;
        ?>
" class="spider_int_input" onkeypress="return spider_check_isnum(event)"/> %
                      <div class="spider_description">Transparency value must be between 0 to 100.</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_watermark_box">
              <div class="wd_updated">
                <p>
                Please note that the <b>Fill</b> and <b>Contain</b> options will work fine with <b>Watermark</b> option regardless of the image dimensions, 
                whereas for the <b>Cover</b> option you should have the image identical to the size set in the <b>Dimensions</b> settings. 
                If you have uploaded the image with another dimension, you will need to resize the image and upload it again.
                </p>
              </div>
              <table>
                <tbody>
                  <tr>
                    <td style="width: 50%; vertical-align: top; height: 100%; display: table-cell;">
                      <table>
                        <tbody>
                          <tr id="tr_built_in_watermark_type">
                            <td class="spider_label_options">
                              <label>Watermark type: </label>
                            </td>
                            <td>
                              <input type="radio" name="built_in_watermark_type" id="built_in_watermark_type_none" value="none" <?php 
        if ($row->built_in_watermark_type == 'none') {
            echo 'checked="checked"';
        }
        ?>
 onClick="bwg_built_in_watermark('watermark_type_none')" />
                              <label for="built_in_watermark_type_none">None</label>
                              <input type="radio" name="built_in_watermark_type" id="built_in_watermark_type_text" value="text" <?php 
        if ($row->built_in_watermark_type == 'text') {
            echo 'checked="checked"';
        }
        ?>
 onClick="bwg_built_in_watermark('watermark_type_text')" onchange="preview_built_in_watermark()" />
                              <label for="built_in_watermark_type_text">Text</label>
                              <input type="radio" name="built_in_watermark_type" id="built_in_watermark_type_image" value="image" <?php 
        if ($row->built_in_watermark_type == 'image') {
            echo 'checked="checked"';
        }
        ?>
 onClick="bwg_built_in_watermark('watermark_type_image')" onchange="preview_built_in_watermark()" />
                              <label for="built_in_watermark_type_image">Image</label>
                              <div class="spider_description">Choose what kind of watermark you want to use.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_url">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_url">Watermark url: </label>
                            </td>
                            <td>
                              <input type="text" id="built_in_watermark_url" name="built_in_watermark_url" style="width: 68%;" value="<?php 
        echo $row->built_in_watermark_url;
        ?>
" style="display:inline-block;" onchange="preview_built_in_watermark()" />
                              <?php 
        if (!$row->spider_uploader) {
            ?>
                              <input id="wat_img_add_butt" class="button-primary" type="button" onclick="spider_media_uploader('watermark', event, false); return false;" value="Add Image" />
                                <?php 
        } else {
            ?>
                              <a href="<?php 
            echo add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'watermark', 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
            ?>
" class="button-primary thickbox thickbox-preview" title="Add Image" onclick="return false;">
                                Add Image
                              </a>
                                <?php 
        }
        ?>
                              <div class="spider_description">Only .png format is supported.</div>
                            </td>
                          </tr>                    
                          <tr id="tr_built_in_watermark_text">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_text">Watermark text: </label>
                            </td>
                            <td>
                              <input type="text" name="built_in_watermark_text" id="built_in_watermark_text" style="width: 100%;" value="<?php 
        echo $row->built_in_watermark_text;
        ?>
" onchange="preview_built_in_watermark()" onkeypress="preview_built_in_watermark()" />
                              <div class="spider_description">Provide the text which will be displayed over the slides.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_size">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_size">Watermark size: </label>
                            </td>
                            <td>
                              <input type="text" name="built_in_watermark_size" id="built_in_watermark_size" value="<?php 
        echo $row->built_in_watermark_size;
        ?>
" class="spider_int_input" onchange="preview_built_in_watermark()" /> %
                              <div class="spider_description">Enter size of watermark in percents according to image.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_font_size">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_font_size">Watermark font size: </label>
                            </td>
                            <td>
                              <input type="text" name="built_in_watermark_font_size" id="built_in_watermark_font_size" value="<?php 
        echo $row->built_in_watermark_font_size;
        ?>
" class="spider_int_input" onchange="preview_built_in_watermark()" onkeypress="return spider_check_isnum(event)" /> px
                              <div class="spider_description">Specify the font size of the watermark.</div>
                            </td>
                          </tr>
                            <tr id="tr_built_in_watermark_font">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_font">Watermark font style: </label>
                            </td>
                            <td>
                            <select name="built_in_watermark_font" id="built_in_watermark_font" style="width:150px;" onchange="preview_built_in_watermark()">
                              <?php 
        foreach ($built_in_watermark_fonts as $watermark_font) {
            ?>
                              <option value="<?php 
            echo $watermark_font;
            ?>
" <?php 
            if ($row->built_in_watermark_font == $watermark_font) {
                echo 'selected="selected"';
            }
            ?>
><?php 
            echo $watermark_font;
            ?>
</option>
                              <?php 
        }
        ?>
                            </select>
                            <?php 
        foreach ($built_in_watermark_fonts as $watermark_font) {
            ?>
                              <style>
                              @font-face {
                                font-family: <?php 
            echo 'bwg_' . str_replace('.ttf', '', $watermark_font);
            ?>
;
                                src: url("<?php 
            echo WD_S_URL . '/fonts/' . $watermark_font;
            ?>
");
                               }
                              </style>
                              <?php 
        }
        ?>
                            <div class="spider_description">Specify the font family for the watermark text.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_color">
                            <td class="spider_label_options">
                              <label for="built_in_watermark_color">Watermark color: </label>
                            </td>
                            <td>
                              <input type="text" name="built_in_watermark_color" id="built_in_watermark_color" value="<?php 
        echo $row->built_in_watermark_color;
        ?>
" class="color" onchange="preview_built_in_watermark()" />
                              <input type="text" name="built_in_watermark_opacity" id="built_in_watermark_opacity" value="<?php 
        echo $row->built_in_watermark_opacity;
        ?>
" class="spider_int_input" onchange="preview_built_in_watermark()" /> %
                              <div class="spider_description">Transparency value must be between 0 to 100.</div>
                            </td>
                          </tr>
                          <tr id="tr_built_in_watermark_position">
                            <td class="spider_label_options">
                              <label>Watermark position: </label>
                            </td>
                            <td>
                              <table class="wds_position_table">
                                <tbody>
                                  <tr>
                                    <td class="wds_position_td"><input type="radio" value="top-left" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "top-left") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="top-center" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "top-center") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="top-right" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "top-right") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                  </tr>
                                  <tr>
                                    <td class="wds_position_td"><input type="radio" value="middle-left" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "middle-left") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="middle-center" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "middle-center") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="middle-right" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "middle-right") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                  </tr>
                                  <tr>
                                    <td class="wds_position_td"><input type="radio" value="bottom-left" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "bottom-left") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="bottom-center" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "bottom-center") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                    <td class="wds_position_td"><input type="radio" value="bottom-right" name="built_in_watermark_position" <?php 
        if ($row->built_in_watermark_position == "bottom-right") {
            echo 'checked="checked"';
        }
        ?>
 onchange="preview_built_in_watermark()"></td>
                                  </tr>
                                </tbody>
                              </table>
                              <div class="spider_description">Choose the positioning of the watermark.</div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                    <td style="width: 50%; vertical-align: top;height: 100%; display: table-cell;">
                      <span id="preview_built_in_watermark" style='display:table-cell; background-image:url("<?php 
        echo WD_S_URL . '/images/watermark_preview.jpg';
        ?>
"); background-size:100% 100%;width:400px;height:400px;padding-top: 4px; position:relative;'></span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="wds_nav_box wds_nav_css_box">
              <table style="width:50%">
                <tbody>
                  <tr>
                    <td class="spider_label"><label for="css">Css: </label></td> 
                  </tr> 
                  <tr>
                    <td style="width: 90%;">
                      <div class="spider_description">Add custom CSS to apply custom changes to the slider.</div>
                      <textarea id="css" name="css" rows="30" style="width: 100%;"><?php 
        echo htmlspecialchars($row->css);
        ?>
</textarea>
                    </td>
                  </tr>   
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!--------------Slides tab----------->
        <div class="wds_box wds_slides_box">
          <table>
            <thead>
              <tr>
                <td colspan="4">
                  <div class="wds_buttons">
                    <?php 
        if ($row->spider_uploader) {
            ?>
                    <a href="<?php 
            echo add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'add_slides', 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
            ?>
" class="button-primary thickbox thickbox-preview" title="Add Images" onclick="return false;">
                      Add Images
                    </a>
                      <?php 
        } else {
            ?>
                    <input type="button" class="button-primary" id="button_image_url" onclick="spider_media_uploader('button_image_url', event, true); return false;" value="Add Images" />
                      <?php 
        }
        ?>
                    <input class="button-secondary wds_free_button" type="button" value="Add Posts" onclick="alert('This functionality is disabled in free version.')" />
                    <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                           spider_set_input_value('task', 'set_watermark');
                                                                           spider_ajax_save('sliders_form', event);" value="Set Watermark" />
                    <input class="button-secondary" type="button" onclick="if (wds_check_required('name', 'Name')) {return false;};
                                                                           spider_set_input_value('task', 'reset_watermark');
                                                                           spider_ajax_save('sliders_form', event);" value="Reset Watermark" />
                  </div>
                </td>
              </tr>
            </thead>
            <tbody style="display: block;">
              <tr>
                <td class="spider_label"><label for="name">Slider name: <span style="color:#FF0000;">*</span> </label></td>
                <td><input type="text" id="name" name="name" value="<?php 
        echo $row->name;
        ?>
" size="39" /></td>
              </tr>
              <tr style="display: block;">
                <td colspan="4" style="display: block;">
                  <div class="wds_tabs wbs_subtab aui-sortable">
                    <?php 
        foreach ($slides_row as $key => $slide_row) {
            ?>
                    <a id="wbs_subtab<?php 
            echo $slide_row->id;
            ?>
" class="connectedSortable <?php 
            echo ($id == 0 || !$sub_tab_type || strpos($sub_tab_type, 'pr') !== FALSE) && $key == 0 || 'slide' . $slide_row->id == $sub_tab_type ? 'wds_sub_active' : '';
            ?>
" href="#">
                      <div class="handle" title="Drag to re-order"></div>
                      <input type="text" id="title<?php 
            echo $slide_row->id;
            ?>
" name="title<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->title;
            ?>
" class="wds_tab_title" tab_type="slide<?php 
            echo $slide_row->id;
            ?>
" onclick="wds_change_sub_tab(this, 'wds_slide<?php 
            echo $slide_row->id;
            ?>
')"/>
                      <span class="wds_slide_dublicate" onclick="wds_duplicate_slide('<?php 
            echo $slide_row->id;
            ?>
');" title="Duplicate slide"></span>					                   
                      <span class="wds_tab_remove" title="Delete slide" onclick="wds_remove_slide('<?php 
            echo $slide_row->id;
            ?>
')"></span>
                      <input type="hidden" name="order<?php 
            echo $slide_row->id;
            ?>
" id="order<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->order;
            ?>
" />
                    </a>
                      <?php 
        }
        ?>
                    <a class="wds_add_layer" href="#" title="Add slide" onclick="wds_add_slide()">+</a>
                    <div class="wds_clear"></div>
                  </div>
                  <?php 
        foreach ($slides_row as $key => $slide_row) {
            ?>
                  <div class="wds_box <?php 
            echo ($id == 0 || !$sub_tab_type || strpos($sub_tab_type, 'pr') !== FALSE) && $key == 0 || 'slide' . $slide_row->id == $sub_tab_type ? 'wds_sub_active' : '';
            ?>
 wds_slide<?php 
            echo $slide_row->id;
            ?>
">
                    <table class="ui-sortable<?php 
            echo $slide_row->id;
            ?>
">
                      <thead><tr><td colspan="4">&nbsp;</td></tr></thead>
                      <tbody>
                        <input type="hidden" name="type<?php 
            echo $slide_row->id;
            ?>
" id="type<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->type;
            ?>
" />
                        <tr>
                          <td colspan="4">
                            <?php 
            if (!$row->spider_uploader) {
                ?>
                            <input type="button" class="button-primary" id="button_image_url<?php 
                echo $slide_row->id;
                ?>
" onclick="spider_media_uploader('<?php 
                echo $slide_row->id;
                ?>
', event, false); return false;" value="Add Image" />
                              <?php 
            } else {
                ?>
                            <a href="<?php 
                echo add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'add_update_slide', 'slide_id' => $slide_row->id, 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
                ?>
" class="button-primary thickbox thickbox-preview" title="Add Image" onclick="return false;">
                              Add Image
                            </a>
                              <?php 
            }
            ?>
                            <input type="button" class="button-primary" onclick="wds_add_image_url('<?php 
            echo $slide_row->id;
            ?>
')" value="Add Image by URL" />
			    <input type="button" class="button-secondary wds_free_button" onclick="alert('This functionality is disabled in free version.')" value="Add Video" />
                            <input type="button" class="button-secondary wds_free_button" onclick="alert('This functionality is disabled in free version.')" value="Embed Media" />
                            <input class="button-secondary wds_free_button" type="button" value="Add Post" onclick="alert('This functionality is disabled in free version.')" />
                            <input type="button" class="button-secondary" id="delete_image_url<?php 
            echo $slide_row->id;
            ?>
" onclick="spider_remove_url('image_url<?php 
            echo $slide_row->id;
            ?>
', 'wds_preview_image<?php 
            echo $slide_row->id;
            ?>
')" value="Remove" />
                            <input type="hidden" id="image_url<?php 
            echo $slide_row->id;
            ?>
" name="image_url<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->image_url;
            ?>
" />
                            <input type="hidden" id="thumb_url<?php 
            echo $slide_row->id;
            ?>
" name="thumb_url<?php 
            echo $slide_row->id;
            ?>
" value="<?php 
            echo $slide_row->thumb_url;
            ?>
" />
                          </td>
                        </tr>
                        <tr>
                          <td colspan="4">
                            <div id="wds_preview_wrapper_<?php 
            echo $slide_row->id;
            ?>
" class="wds_preview_wrapper" style="width: <?php 
            echo $row->width;
            ?>
px; height: <?php 
            echo $row->height;
            ?>
px;">
                              <div class="wds_preview" style="overflow: hidden; position: absolute; width: inherit; height: inherit; background-color: transparent; background-image: none; display: block;">
                                <div id="wds_preview_image<?php 
            echo $slide_row->id;
            ?>
" class="wds_preview_image<?php 
            echo $slide_row->id;
            ?>
"
                                     style='background-color: <?php 
            echo WDW_S_Library::spider_hex2rgba($row->background_color, (100 - $row->background_transparent) / 100);
            ?>
;
                                            background-image: url("<?php 
            echo $slide_row->type != 'image' ? $slide_row->thumb_url : $slide_row->image_url . '?date=' . date('Y-m-d H:i:s');
            ?>
");
                                            background-position: center center;
                                            background-repeat: no-repeat;
                                            background-size: <?php 
            echo $row->bg_fit;
            ?>
;
                                            width: inherit;
                                            height: inherit;
                                            /*position: relative;*/'>
                                <?php 
            $layers_row = $this->model->get_layers_row_data($slide_row->id);
            if ($layers_row) {
                foreach ($layers_row as $key => $layer) {
                    $prefix = 'slide' . $slide_row->id . '_layer' . $layer->id;
                    $fonts = isset($layer->google_fonts) && $layer->google_fonts ? $google_fonts : $font_families;
                    switch ($layer->type) {
                        case 'text':
                            ?>
                                        <span id="<?php 
                            echo $prefix;
                            ?>
" class="wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable ui-draggable" data-type="wds_text_parent" onclick="wds_showhide_layer('<?php 
                            echo $prefix;
                            ?>
_tbody', 1)"
                                              style="<?php 
                            echo $layer->image_width ? 'width: ' . $layer->image_width . '%; ' : '';
                            echo $layer->image_height ? 'height: ' . $layer->image_height . '%; ' : '';
                            ?>
word-break: <?php 
                            echo $layer->image_scale ? 'normal' : 'break-all';
                            ?>
; display: inline-block; position: absolute; left: <?php 
                            echo $layer->left;
                            ?>
px; top: <?php 
                            echo $layer->top;
                            ?>
px; z-index: <?php 
                            echo $layer->depth;
                            ?>
; color: #<?php 
                            echo $layer->color;
                            ?>
; font-size: <?php 
                            echo $layer->size;
                            ?>
px; line-height: 1.25em; font-family: <?php 
                            echo $fonts[$layer->ffamily];
                            ?>
; font-weight: <?php 
                            echo $layer->fweight;
                            ?>
; padding: <?php 
                            echo $layer->padding;
                            ?>
; background-color: <?php 
                            echo WDW_S_Library::spider_hex2rgba($layer->fbgcolor, (100 - $layer->transparent) / 100);
                            ?>
; border: <?php 
                            echo $layer->border_width;
                            ?>
px <?php 
                            echo $layer->border_style;
                            ?>
 #<?php 
                            echo $layer->border_color;
                            ?>
; border-radius: <?php 
                            echo $layer->border_radius;
                            ?>
; box-shadow: <?php 
                            echo $layer->shadow;
                            ?>
"><?php 
                            echo str_replace(array("\r\n", "\r", "\n"), "<br>", $layer->text);
                            ?>
</span>
                                        <?php 
                            break;
                        case 'image':
                            ?>
                                        <img id="<?php 
                            echo $prefix;
                            ?>
" class="wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable ui-draggable" onclick="wds_showhide_layer('<?php 
                            echo $prefix;
                            ?>
_tbody', 1)" src="<?php 
                            echo $layer->image_url;
                            ?>
"
                                             style="opacity: <?php 
                            echo (100 - $layer->imgtransparent) / 100;
                            ?>
; filter: Alpha(opacity=<?php 
                            echo 100 - $layer->imgtransparent;
                            ?>
); position: absolute; left: <?php 
                            echo $layer->left;
                            ?>
px; top: <?php 
                            echo $layer->top;
                            ?>
px; z-index: <?php 
                            echo $layer->depth;
                            ?>
; border: <?php 
                            echo $layer->border_width;
                            ?>
px <?php 
                            echo $layer->border_style;
                            ?>
 #<?php 
                            echo $layer->border_color;
                            ?>
; border-radius: <?php 
                            echo $layer->border_radius;
                            ?>
; box-shadow: <?php 
                            echo $layer->shadow;
                            ?>
; " />
                                        <?php 
                            break;
                        case 'video':
                            ?>
                                        <img id="<?php 
                            echo $prefix;
                            ?>
" class="wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable ui-draggable" onclick="wds_showhide_layer('<?php 
                            echo $prefix;
                            ?>
_tbody', 1)" src="<?php 
                            echo $layer->image_url;
                            ?>
"
                                             style="max-width: <?php 
                            echo $layer->image_width;
                            ?>
px; width: <?php 
                            echo $layer->image_width;
                            ?>
px; max-height: <?php 
                            echo $layer->image_height;
                            ?>
px; height: <?php 
                            echo $layer->image_height;
                            ?>
px; position: absolute; left: <?php 
                            echo $layer->left;
                            ?>
px; top: <?php 
                            echo $layer->top;
                            ?>
px; z-index: <?php 
                            echo $layer->depth;
                            ?>
; border: <?php 
                            echo $layer->border_width;
                            ?>
px <?php 
                            echo $layer->border_style;
                            ?>
 #<?php 
                            echo $layer->border_color;
                            ?>
; border-radius: <?php 
                            echo $layer->border_radius;
                            ?>
; box-shadow: <?php 
                            echo $layer->shadow;
                            ?>
;" />
                                        <?php 
                            break;
                        case 'social':
                            ?>
                                        <style>#<?php 
                            echo $prefix;
                            ?>
:hover {color: #<?php 
                            echo $layer->hover_color;
                            ?>
 !important;}</style>
                                        <i id="<?php 
                            echo $prefix;
                            ?>
" class="wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable fa fa-<?php 
                            echo $layer->social_button;
                            ?>
 ui-draggable" onclick="wds_showhide_layer('<?php 
                            echo $prefix;
                            ?>
_tbody', 1)"
                                           style="opacity: <?php 
                            echo (100 - $layer->transparent) / 100;
                            ?>
; filter: Alpha(opacity=<?php 
                            echo 100 - $layer->transparent;
                            ?>
); position: absolute; left: <?php 
                            echo $layer->left;
                            ?>
px; top: <?php 
                            echo $layer->top;
                            ?>
px; z-index: <?php 
                            echo $layer->depth;
                            ?>
; color: #<?php 
                            echo $layer->color;
                            ?>
; font-size: <?php 
                            echo $layer->size;
                            ?>
px; line-height: <?php 
                            echo $layer->size;
                            ?>
px; padding: <?php 
                            echo $layer->padding;
                            ?>
; "></i>
                                        <?php 
                            break;
                        default:
                            break;
                    }
                }
            }
            ?>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td class="spider_label"><label>Published: </label></td>
                          <td>
                            <input type="radio" id="published<?php 
            echo $slide_row->id;
            ?>
1" name="published<?php 
            echo $slide_row->id;
            ?>
" <?php 
            echo $slide_row->published ? 'checked="checked"' : '';
            ?>
 value="1" /><label for="published<?php 
            echo $slide_row->id;
            ?>
1">Yes</label>
                            <input type="radio" id="published<?php 
            echo $slide_row->id;
            ?>
0" name="published<?php 
            echo $slide_row->id;
            ?>
" <?php 
            echo $slide_row->published ? '' : 'checked="checked"';
            ?>
 value="0" /><label for="published<?php 
            echo $slide_row->id;
            ?>
0">No</label>
                          </td>
                        </tr>
                        <tr id="trlink<?php 
            echo $slide_row->id;
            ?>
" <?php 
            echo $slide_row->type == 'image' ? '' : 'style="display: none;"';
            ?>
>
                          <td class="spider_label">
                            <label for="link<?php 
            echo $slide_row->id;
            ?>
">Link the slide to: </label>
                          </td>
                          <td>
                            <input id="link<?php 
            echo $slide_row->id;
            ?>
" type="text" size="39" value="<?php 
            echo $slide_row->link;
            ?>
" name="link<?php 
            echo $slide_row->id;
            ?>
" />
                            <input id="target_attr_slide<?php 
            echo $slide_row->id;
            ?>
" type="checkbox"  name="target_attr_slide<?php 
            echo $slide_row->id;
            ?>
" <?php 
            echo $slide_row->target_attr_slide ? 'checked="checked"' : '';
            ?>
 value="1" /><label for="target_attr_slide<?php 
            echo $slide_row->id;
            ?>
"> Open in a new window</label>
                            <div class="spider_description">You can set a redirection link, so that the user will get to the mentioned location upon hitting the slide.<br />Use http:// and https:// for external links.</div>
                          </td>
                        </tr>
                        <tr>
                          <td colspan="4">
                            <input type="button" class="button-<?php 
            echo !$fv ? "primary" : "secondary wds_free_button";
            ?>
 button button-small" onclick="<?php 
            echo !$fv ? "wds_add_layer('text', '" . $slide_row->id . "')" : "alert('This functionality is disabled in free version.')";
            ?>
; return false;" value="Add Text Layer" />
                            <?php 
            if (!$row->spider_uploader) {
                ?>
                            <input type="button" class="button-<?php 
                echo !$fv ? "primary" : "secondary wds_free_button";
                ?>
 button button-small" onclick="<?php 
                echo !$fv ? "wds_add_layer('image', '" . $slide_row->id . "', '', event)" : "alert('This functionality is disabled in free version.')";
                ?>
; return false;" value="Add Image Layer" />
                              <?php 
            } else {
                ?>
                            <a href="<?php 
                echo !$fv ? add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'add_layer', 'slide_id' => $slide_row->id, 'TB_iframe' => '1'), admin_url('admin-ajax.php')) : '';
                ?>
" onclick="<?php 
                echo !$fv ? '' : "alert('This functionality is disabled in free version.')";
                ?>
; return false;" class="button-<?php 
                echo !$fv ? "primary thickbox thickbox-preview" : "secondary wds_free_button";
                ?>
 button button-small" title="Add Image Layer">
                              Add Image layer
                            </a>
                              <?php 
            }
            ?>
			    <input type="button" class="button-secondary button button-small wds_free_button" id="button_video_url<?php 
            echo $slide_row->id;
            ?>
"  onclick="alert('This functionality is disabled in free version.'); return false;" value="Add Video Layer" />
                            <input type="button" class="button-secondary button button-small wds_free_button" onclick="alert('This functionality is disabled in free version.'); return false;" value="Embed Media Layer" />
                            <input type="button" class="button-secondary button button-small wds_free_button" onclick="alert('This functionality is disabled in free version.'); return false;" value="Add Social Button Layer" />
                            <input type="button" class="button-secondary button button-small wds_free_button" onclick="alert('This functionality is disabled in free version.'); return false;" value="Add Hotspot Layer" />
                          </td>
                        </tr>
                      </tbody>
                      <?php 
            $layer_ids_string = '';
            if ($layers_row) {
                foreach ($layers_row as $key => $layer) {
                    $prefix = 'slide' . $slide_row->id . '_layer' . $layer->id;
                    ?>
                          <tbody id="<?php 
                    echo $prefix;
                    ?>
_tbody">
                            <tr class="wds_layer_head_tr">
                              <td class="wds_layer_head" colspan="4">
                                <div class="handle connectedSortable" title="Drag to re-order"></div>
                                <span class="wds_layer_label" onclick="wds_showhide_layer('<?php 
                    echo $prefix;
                    ?>
_tbody', 0)"><input id="<?php 
                    echo $prefix;
                    ?>
_title" name="<?php 
                    echo $prefix;
                    ?>
_title" type="text" class="wds_layer_title" style="width: 80px;" value="<?php 
                    echo $layer->title;
                    ?>
" title="Layer title" /></span>
                                <span class="wds_layer_remove" onclick="wds_delete_layer('<?php 
                    echo $slide_row->id;
                    ?>
', '<?php 
                    echo $layer->id;
                    ?>
')" title="Delete layer"></span>
                                <span class="wds_layer_dublicate" onclick="wds_add_layer('<?php 
                    echo $layer->type;
                    ?>
', '<?php 
                    echo $slide_row->id;
                    ?>
', '', 1, 0); wds_duplicate_layer('<?php 
                    echo $layer->type;
                    ?>
', '<?php 
                    echo $slide_row->id;
                    ?>
', '<?php 
                    echo $layer->id;
                    ?>
');" title="Duplicate layer"></span>
                                <input id="<?php 
                    echo $prefix;
                    ?>
_depth" class="wds_layer_depth spider_int_input" type="text" onchange="jQuery('#<?php 
                    echo $prefix;
                    ?>
').css({zIndex: jQuery(this).val()})" onkeypress="return spider_check_isnum(event)" value="<?php 
                    echo $layer->depth;
                    ?>
" prefix="<?php 
                    echo $prefix;
                    ?>
" name="<?php 
                    echo $prefix;
                    ?>
_depth" title="z-index" />
                              </td>
                            </tr>
                            <?php 
                    switch ($layer->type) {
                        /*--------text layer----------*/
                        case 'text':
                            ?>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_text">Text: </label>
                              </td>
                              <td>
                                <textarea id="<?php 
                            echo $prefix;
                            ?>
_text" name="<?php 
                            echo $prefix;
                            ?>
_text" style="width: 222px; height: 60px; resize: vertical;" onkeyup="wds_new_line('<?php 
                            echo $prefix;
                            ?>
');"><?php 
                            echo $layer->text;
                            ?>
</textarea>
                                <input type="button" class="wds_editor_btn button-secondary" onclick="alert('This functionality is disabled in free version.')" value="Editor" />
                                <div class="spider_description"></div>
                              </td>							  
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in">Effect In:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_start" class="spider_int_input" type="text" value="<?php 
                            echo $layer->start;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_start" /> ms 
                                  <div class="spider_description">Start</div>
                                </span>
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" style="width:150px;" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_in as $key => $layer_effect_in) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_in == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_in;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_in').val());" value="<?php 
                            echo $layer->duration_eff_in;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" /> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>							
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_image_width">Dimensions: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_width" class="spider_int_input" type="text" onchange="wds_text_width(this,'<?php 
                            echo $prefix;
                            ?>
')" value="<?php 
                            echo $layer->image_width;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_image_width" /> x 
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_height" class="spider_int_input" type="text" onchange="wds_text_height(this,'<?php 
                            echo $prefix;
                            ?>
')" value="<?php 
                            echo $layer->image_height;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_image_height" /> % 
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_scale" type="checkbox" onchange="wds_break_word(this, '<?php 
                            echo $prefix;
                            ?>
')" name="<?php 
                            echo $prefix;
                            ?>
_image_scale" <?php 
                            echo $layer->image_scale ? 'checked="checked"' : '';
                            ?>
 /><label for="<?php 
                            echo $prefix;
                            ?>
_image_scale">Break-word</label>
                                <div class="spider_description">Leave blank to keep the initial width and height.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out">Effect Out:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_end" class="spider_int_input" type="text" value="<?php 
                            echo $layer->end;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_end"> ms
                                  <div class="spider_description">Start</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" style="width:150px;" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_out as $key => $layer_effect_out) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_out == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_out;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_out').val());" value="<?php 
                            echo $layer->duration_eff_out;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out"> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Position: </label>
                              </td>
                              <td>
                                X <input id="<?php 
                            echo $prefix;
                            ?>
_left" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({left: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->left;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_left" />
                                Y <input id="<?php 
                            echo $prefix;
                            ?>
_top" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({top: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->top;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_top" />
                                <div class="spider_description">In addition you can drag and drop the layer to a desired position.</div>
                              </td> 
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_padding">Padding: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_padding" class="spider_char_input" type="text" onchange="document.getElementById('<?php 
                            echo $prefix;
                            ?>
').style.padding=jQuery(this).val();" value="<?php 
                            echo $layer->padding;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_padding">
                                <div class="spider_description">Use CSS type values.</div>
                              </td>                              
                            </tr>		
                            <tr class="wds_layer_tr" style="display: none;">                             
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_size">Size: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_size" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({fontSize: jQuery(this).val() + 'px', lineHeight: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->size;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_size" /> px
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_fbgcolor">Background Color: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_fbgcolor" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({backgroundColor: wds_hex_rgba(jQuery(this).val(), 100 - jQuery('#<?php 
                            echo $prefix;
                            ?>
_transparent').val())})" value="<?php 
                            echo $layer->fbgcolor;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_fbgcolor" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_color">Color: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({color: '#' + jQuery(this).val()})" value="<?php 
                            echo $layer->color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_color" />
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_transparent">Transparent: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_transparent" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({backgroundColor: wds_hex_rgba(jQuery('#<?php 
                            echo $prefix;
                            ?>
_fbgcolor').val(), 100 - jQuery(this).val())})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->transparent;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_transparent"> %
                                <div class="spider_description">Value must be between 0 to 100.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_ffamily">Font family: </label>
                              </td>
                              <td>
                                <select style="width: 200px;" id="<?php 
                            echo $prefix;
                            ?>
_ffamily" onchange="wds_change_fonts('<?php 
                            echo $prefix;
                            ?>
', 1)" name="<?php 
                            echo $prefix;
                            ?>
_ffamily">
                                  <?php 
                            $fonts = isset($layer->google_fonts) && $layer->google_fonts ? $google_fonts : $font_families;
                            foreach ($fonts as $key => $font_family) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->ffamily == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $font_family;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_google_fonts1" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_google_fonts" value="1" <?php 
                            echo $layer->google_fonts ? 'checked="checked"' : '';
                            ?>
 onchange="wds_change_fonts('<?php 
                            echo $prefix;
                            ?>
')" />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_google_fonts1">Google fonts</label>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_google_fonts0" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_google_fonts" value="0" <?php 
                            echo $layer->google_fonts ? '' : 'checked="checked"';
                            ?>
 onchange="wds_change_fonts('<?php 
                            echo $prefix;
                            ?>
')" />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_google_fonts0">Default</label>
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_border_width">Border: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_width" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderWidth: jQuery(this).val()})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->border_width;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_width"> px
                                <select id="<?php 
                            echo $prefix;
                            ?>
_border_style" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderStyle: jQuery(this).val()})" style="width: 80px;" name="<?php 
                            echo $prefix;
                            ?>
_border_style">
                                  <?php 
                            foreach ($border_styles as $key => $border_style) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->border_style == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $border_style;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderColor: '#' + jQuery(this).val()})" value="<?php 
                            echo $layer->border_color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_color" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_fweight">Font weight: </label>
                              </td>
                              <td>
                                <select id="<?php 
                            echo $prefix;
                            ?>
_fweight" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({fontWeight: jQuery(this).val()})" name="<?php 
                            echo $prefix;
                            ?>
_fweight">
                                  <?php 
                            foreach ($font_weights as $key => $fweight) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->fweight == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $fweight;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_border_radius">Radius: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_radius" class="spider_char_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderRadius: jQuery(this).val()})" value="<?php 
                            echo $layer->border_radius;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_radius">
                                <div class="spider_description">Use CSS type values.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_link">Link: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_link" type="text" size="39" value="<?php 
                            echo $layer->link;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_link" />
                                <input id="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer" type="checkbox"  name="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer" <?php 
                            echo $layer->target_attr_layer ? 'checked="checked"' : '';
                            ?>
 value="1" /><label for="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer"> Open in a new window</label>
                                <div class="spider_description">Use http:// and https:// for external links.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_shadow">Shadow: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_shadow" class="spider_char_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({boxShadow: jQuery(this).val()})" value="<?php 
                            echo $layer->shadow;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_shadow" />
                                <div class="spider_description">Use CSS type values (e.g. 10px 10px 5px #888888).</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Published: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published1" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="1" <?php 
                            echo $layer->published ? 'checked="checked"' : '';
                            ?>
 />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published1">Yes</label>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published0" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="0" <?php 
                            echo $layer->published ? '' : 'checked="checked"';
                            ?>
 />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published0">No</label>
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                                <?php 
                            break;
                            /*--------image layer----------*/
                        /*--------image layer----------*/
                        case 'image':
                            ?>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Dimensions: </label>
                              </td>
                              <td>
                                <input type="hidden" name="<?php 
                            echo $prefix;
                            ?>
_image_url" id="<?php 
                            echo $prefix;
                            ?>
_image_url" value="<?php 
                            echo $layer->image_url;
                            ?>
" />
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_width" class="spider_int_input" type="text" onkeyup="wds_scale('#<?php 
                            echo $prefix;
                            ?>
_image_scale', '<?php 
                            echo $prefix;
                            ?>
')" value="<?php 
                            echo $layer->image_width;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_image_width" /> x 
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_height" class="spider_int_input" type="text" onkeyup="wds_scale('#<?php 
                            echo $prefix;
                            ?>
_image_scale', '<?php 
                            echo $prefix;
                            ?>
')" value="<?php 
                            echo $layer->image_height;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_image_height" /> px 
                                <input id="<?php 
                            echo $prefix;
                            ?>
_image_scale" type="checkbox" onchange="wds_scale(this, '<?php 
                            echo $prefix;
                            ?>
')" name="<?php 
                            echo $prefix;
                            ?>
_image_scale" <?php 
                            echo $layer->image_scale ? 'checked="checked"' : '';
                            ?>
 /><label for="<?php 
                            echo $prefix;
                            ?>
_image_scale">Scale</label>
                                <input class="button-secondary wds_free_button" type="button" value="Edit Image" onclick="alert('This functionality is disabled in free version.')" />
                                <div class="spider_description">Set width and height of the image.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in">Effect In:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_start" class="spider_int_input" type="text" value="<?php 
                            echo $layer->start;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_start" /> ms 
                                  <div class="spider_description">Start</div>
                                </span>
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" style="width:150px;" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_in as $key => $layer_effect_in) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_in == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_in;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_in').val());" value="<?php 
                            echo $layer->duration_eff_in;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" /> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_alt">Alt: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_alt" type="text" size="39" value="<?php 
                            echo $layer->alt;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_alt" />
                                <div class="spider_description">Set the HTML attribute specified in the IMG tag.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out">Effect Out:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_end" class="spider_int_input" type="text" value="<?php 
                            echo $layer->end;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_end"> ms
                                  <div class="spider_description">Start</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" style="width:150px;" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_out as $key => $layer_effect_out) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_out == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_out;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 0); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_out').val());" value="<?php 
                            echo $layer->duration_eff_out;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out"> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_link">Link: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_link" type="text" size="39" value="<?php 
                            echo $layer->link;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_link" />
                                <input id="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer" type="checkbox"  name="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer" <?php 
                            echo $layer->target_attr_layer ? 'checked="checked"' : '';
                            ?>
 value="1" /><label for="<?php 
                            echo $prefix;
                            ?>
_target_attr_layer"> Open in a new window</label>
                                <div class="spider_description">Use http:// and https:// for external links.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_border_width">Border: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_width" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderWidth: jQuery(this).val()})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->border_width;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_width"> px
                                <select id="<?php 
                            echo $prefix;
                            ?>
_border_style" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderStyle: jQuery(this).val()})" style="width: 80px;" name="<?php 
                            echo $prefix;
                            ?>
_border_style">
                                  <?php 
                            foreach ($border_styles as $key => $border_style) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->border_style == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $border_style;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderColor: '#' + jQuery(this).val()})" value="<?php 
                            echo $layer->border_color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_color" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Position: </label>
                              </td>
                              <td>
                                X <input id="<?php 
                            echo $prefix;
                            ?>
_left" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({left: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->left;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_left" />
                                Y <input id="<?php 
                            echo $prefix;
                            ?>
_top" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({top: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->top;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_top" />
                                <div class="spider_description">In addition you can drag and drop the layer to a desired position.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_border_radius">Radius: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_border_radius" class="spider_char_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({borderRadius: jQuery(this).val()})" value="<?php 
                            echo $layer->border_radius;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_border_radius">
                                <div class="spider_description">Use CSS type values.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_imgtransparent">Transparent: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_imgtransparent" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({opacity: (100 - jQuery(this).val()) / 100, filter: 'Alpha(opacity=' + 100 - jQuery(this).val() + ')'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->imgtransparent;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_imgtransparent"> %
                                <div class="spider_description">Value must be between 0 to 100.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_shadow">Shadow: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_shadow" class="spider_char_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({boxShadow: jQuery(this).val()})" value="<?php 
                            echo $layer->shadow;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_shadow" />
                                <div class="spider_description">Use CSS type values.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Published: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published1" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="1" <?php 
                            echo $layer->published ? 'checked="checked"' : '';
                            ?>
 />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published1">Yes</label>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published0" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="0" <?php 
                            echo $layer->published ? '' : 'checked="checked"';
                            ?>
/>
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published0">No</label>
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <?php 
                            break;
                            /*--------social button layer----------*/
                        /*--------social button layer----------*/
                        case 'social':
                            ?>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Position: </label>
                              </td>
                              <td>
                                X <input id="<?php 
                            echo $prefix;
                            ?>
_left" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({left: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->left;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_left" />
                                Y <input id="<?php 
                            echo $prefix;
                            ?>
_top" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({top: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->top;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_top" />
                                <div class="spider_description">In addition you can drag and drop the layer to a desired position.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in">Effect In:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_start" class="spider_int_input" type="text" value="<?php 
                            echo $layer->start;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_start" /> ms 
                                  <div class="spider_description">Start</div>
                                </span>
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_in" style="width:150px;" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 1); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_in as $key => $layer_effect_in) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_in == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_in;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_in('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 1); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_in').val());" value="<?php 
                            echo $layer->duration_eff_in;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_in" /> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_social_button">Social button: </label>
                              </td>
                              <td>
                                <select id="<?php 
                            echo $prefix;
                            ?>
_social_button" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').attr('class', 'wds_draggable_<?php 
                            echo $slide_row->id;
                            ?>
 wds_draggable fa fa-' + jQuery(this).val())" name="<?php 
                            echo $prefix;
                            ?>
_social_button">
                                  <?php 
                            foreach ($social_buttons as $key => $social_button) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo $layer->social_button == $key ? 'selected="selected"' : '';
                                ?>
><?php 
                                echo $social_button;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                </select>
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out">Effect Out:</label>
                              </td>
                              <td>
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_end" class="spider_int_input" type="text" value="<?php 
                            echo $layer->end;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_end"> ms
                                  <div class="spider_description">Start</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <select name="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" id="<?php 
                            echo $prefix;
                            ?>
_layer_effect_out" style="width:150px;" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 1); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery(this).val());">
                                  <?php 
                            foreach ($layer_effects_out as $key => $layer_effect_out) {
                                ?>
                                    <option value="<?php 
                                echo $key;
                                ?>
" <?php 
                                echo !in_array($key, $free_layer_effects) ? 'disabled="disabled" title="This effect is disabled in free version."' : '';
                                ?>
 <?php 
                                if ($layer->layer_effect_out == $key) {
                                    echo 'selected="selected"';
                                }
                                ?>
><?php 
                                echo $layer_effect_out;
                                ?>
</option>
                                    <?php 
                            }
                            ?>
                                  </select>
                                  <div class="spider_description">Effect</div>
                                </span> 
                                <span style="display: table-cell;">
                                  <input id="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out" class="spider_int_input" type="text" onkeypress="return spider_check_isnum(event)" onchange="wds_trans_effect_out('<?php 
                            echo $slide_row->id;
                            ?>
', '<?php 
                            echo $prefix;
                            ?>
', 1); wds_trans_end('<?php 
                            echo $prefix;
                            ?>
', jQuery('#<?php 
                            echo $prefix;
                            ?>
_layer_effect_out').val());" value="<?php 
                            echo $layer->duration_eff_out;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_duration_eff_out"> ms
                                  <div class="spider_description">Duration</div>
                                </span>
                                <div class="spider_description spider_free_version">Some effects are disabled in free version.</div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_size">Size: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_size" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({fontSize: jQuery(this).val() + 'px', lineHeight: jQuery(this).val() + 'px'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->size;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_size" /> px
                                <div class="spider_description"></div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_color">Color: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({color: '#' + jQuery(this).val()})" value="<?php 
                            echo $layer->color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_color" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_transparent">Transparent: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_transparent" class="spider_int_input" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').css({opacity: (100 - jQuery(this).val()) / 100, filter: 'Alpha(opacity=' + 100 - jQuery(this).val() + ')'})" onkeypress="return spider_check_isnum(event)" value="<?php 
                            echo $layer->transparent;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_transparent" /> %
                                <div class="spider_description">Value must be between 0 to 100.</div>
                              </td>
                              <td class="spider_label">
                                <label for="<?php 
                            echo $prefix;
                            ?>
_hover_color">Hover Color: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_hover_color" class="color" type="text" onchange="jQuery('#<?php 
                            echo $prefix;
                            ?>
').hover(function() { jQuery(this).css({color: '#' + jQuery('#<?php 
                            echo $prefix;
                            ?>
_hover_color').val()}); }, function() { jQuery(this).css({color: '#' + jQuery('#<?php 
                            echo $prefix;
                            ?>
_color').val()}); })" value="<?php 
                            echo $layer->hover_color;
                            ?>
" name="<?php 
                            echo $prefix;
                            ?>
_hover_color" />
                                <div class="spider_description"></div>
                              </td>
                            </tr>
                            <tr class="wds_layer_tr" style="display: none;">
                              <td class="spider_label">
                                <label>Published: </label>
                              </td>
                              <td>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published1" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="1" <?php 
                            echo $layer->published ? 'checked="checked"' : '';
                            ?>
 />
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published1">Yes</label>
                                <input id="<?php 
                            echo $prefix;
                            ?>
_published0" type="radio" name="<?php 
                            echo $prefix;
                            ?>
_published" value="0" <?php 
                            echo $layer->published ? '' : 'checked="checked"';
                            ?>
/>
                                <label for="<?php 
                            echo $prefix;
                            ?>
_published0">No</label>
                                <div class="spider_description"></div>
                              </td>                              
                            </tr>
                                <?php 
                            break;
                        default:
                            break;
                    }
                    ?>
                            <input type="hidden" name="<?php 
                    echo $prefix;
                    ?>
_type" id="<?php 
                    echo $prefix;
                    ?>
_type" value="<?php 
                    echo $layer->type;
                    ?>
" />
                          </tbody>
                          <?php 
                    $layer_ids_string .= $layer->id . ',';
                }
            }
            ?>
                    </table>
                    <input id="slide<?php 
            echo $slide_row->id;
            ?>
_layer_ids_string" name="slide<?php 
            echo $slide_row->id;
            ?>
_layer_ids_string" type="hidden" value="<?php 
            echo $layer_ids_string;
            ?>
" />
                    <input id="slide<?php 
            echo $slide_row->id;
            ?>
_del_layer_ids_string" name="slide<?php 
            echo $slide_row->id;
            ?>
_del_layer_ids_string" type="hidden" value="" />
                  </div>
                    <script>
                      jQuery(document).ready(function() {
                        image_for_next_prev_butt('<?php 
            echo $row->rl_butt_img_or_not;
            ?>
');
                        image_for_bull_butt('<?php 
            echo $row->bull_butt_img_or_not;
            ?>
');						
                        image_for_play_pause_butt('<?php 
            echo $row->play_paus_butt_img_or_not;
            ?>
');							
                        wds_whr('width');
                        wds_drag_layer('<?php 
            echo $slide_row->id;
            ?>
');
                        wds_layer_weights('<?php 
            echo $slide_row->id;
            ?>
');
                        <?php 
            if ($layers_row) {
                foreach ($layers_row as $key => $layer) {
                    if ($layer->type == 'image') {
                        $prefix = 'slide' . $slide_row->id . '_layer' . $layer->id;
                        ?>
                          wds_scale('#<?php 
                        echo $prefix;
                        ?>
_image_scale', '<?php 
                        echo $prefix;
                        ?>
');
                              <?php 
                    }
                }
            }
            ?>
                      });
                    </script>
                    <?php 
            $slide_ids_string .= $slide_row->id . ',';
        }
        ?>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="wds_task_cont">
        <input id="current_id" name="current_id" type="hidden" value="<?php 
        echo $row->id;
        ?>
" />
        <input id="slide_ids_string" name="slide_ids_string" type="hidden" value="<?php 
        echo $slide_ids_string;
        ?>
" />
        <input id="del_slide_ids_string" name="del_slide_ids_string" type="hidden" value="" />
        <input id="nav_tab" name="nav_tab" type="hidden" value="<?php 
        echo WDW_S_Library::get('nav_tab', 'global');
        ?>
" />
        <input id="tab" name="tab" type="hidden" value="<?php 
        echo WDW_S_Library::get('tab', 'slides');
        ?>
" />
        <input id="sub_tab" name="sub_tab" type="hidden" value="<?php 
        echo $sub_tab_type;
        ?>
" />
        <script>
          var spider_uploader = <?php 
        echo $row->spider_uploader;
        ?>
;
        </script>
      </div>
      <input id="task" name="task" type="hidden" value="" />
      <script>
        var wds_preview_url = "<?php 
        echo add_query_arg(array('action' => 'WDSPreview', 'slider_id' => $id ? $id : 'sliderID', 'width' => '700', 'height' => '550', 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
        ?>
";
        var uploader_href = '<?php 
        echo add_query_arg(array('action' => 'addImage', 'width' => '700', 'height' => '550', 'extensions' => 'jpg,jpeg,png,gif', 'callback' => 'wds_add_image', 'image_for' => 'add_update_slide', 'slide_id' => 'slideID', 'layer_id' => 'layerID', 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
        ?>
';		
        var fv = '<?php 
        echo $fv;
        ?>
';
        jQuery(document).ready(function() {
          wds_onload();
        });
        jQuery("#sliders_form").on("click", "a", function(e) {
          e.preventDefault();
        });
      </script>
      <div class="opacity_add_image_url opacity_add_video wds_opacity_video" onclick="jQuery('.opacity_add_video').hide();jQuery('.opacity_add_image_url').hide();"></div>
      <div class="opacity_add_video wds_add_video">
        <input type="text" id="video_url" name="video_url" value="" />
        <input type="button" id="add_video_button" class="button-primary" value="Add" />
        <input type="button" class="button-secondary" onclick="jQuery('.opacity_add_video').hide(); return false;" value="Cancel" />
        <div class="spider_description">Enter YouTube or Vimeo link here.</div>
      </div>
      <div class="opacity_add_image_url wds_resize_image">
        <input type="text" id="image_url_input" name="image_url_input" value="" />
        <input type="button" id="add_image_url_button" class="button-primary" value="Add" />
        <input type="button" class="button-secondary" onclick="jQuery('.opacity_add_image_url').hide(); return false;" value="Cancel" />
        <div class="spider_description">Enter absolute url of the image.</div>
      </div>
    </form>
    <?php 
    }
    public function display()
    {
        $slide_id = WDW_S_Library::get('slide_id', 0);
        if ($slide_id) {
            $single = 1;
        } else {
            $single = 0;
        }
        $search_value = isset($_POST['search_value']) ? esc_html(stripslashes($_POST['search_value'])) : '';
        $category_id = isset($_POST['category_id']) ? esc_html(stripslashes($_POST['category_id'])) : '';
        $asc_or_desc = isset($_POST['asc_or_desc']) ? esc_html(stripslashes($_POST['asc_or_desc'])) : 'ASC';
        $order_by = isset($_POST['order_by']) ? esc_html(stripslashes($_POST['order_by'])) : 'date';
        $count = isset($_GET['count']) ? esc_html(stripslashes($_GET['count'])) : 0;
        $order_class = 'manage-column column-title sorted ' . $asc_or_desc;
        $datas = $this->model->get_rows_data();
        $rows_data = $datas[0];
        $page_limit = $datas[2];
        wp_print_scripts('jquery');
        ?>
    <link media="all" type="text/css" href="<?php 
        echo get_admin_url();
        ?>
load-styles.php?c=1&amp;dir=ltr&amp;load=admin-bar,wp-admin,dashicons,buttons,wp-auth-check" rel="stylesheet">
    <?php 
        if (get_bloginfo('version') < '3.9') {
            ?>
    <link media="all" type="text/css" href="<?php 
            echo get_admin_url();
            ?>
css/colors<?php 
            echo get_bloginfo('version') < '3.8' ? '-fresh' : '';
            ?>
.min.css" id="colors-css" rel="stylesheet">
    <?php 
        }
        ?>
    <link media="all" type="text/css" href="<?php 
        echo WD_S_URL . '/css/wds_tables.css';
        ?>
" rel="stylesheet" />
    <script src="<?php 
        echo WD_S_URL . '/js/wds.js';
        ?>
" type="text/javascript"></script>
    <form class="wrap wp-core-ui" id="posts_form" method="post" action="<?php 
        echo add_query_arg(array('action' => 'WDSPosts', 'width' => '700', 'height' => '550', 'TB_iframe' => '1'), admin_url('admin-ajax.php'));
        ?>
" style="width:99%; margin: 0 auto;">
      <h2 style="float: left;">Posts</h2>
      <input type="button" class="button-primary" title="Add Post" onclick="wds_add_post(jQuery('#ids_string').val(), <?php 
        echo $count;
        ?>
);
                                                                            window.parent.tb_remove();" style="float: right; margin: 9px 0;" value="Add to slider" />
      <div class="tablenav top">
        <?php 
        WDW_S_Library::search('Title', $search_value, 'posts_form');
        wp_dropdown_categories(array('hide_empty' => 0, 'name' => 'category_id', 'orderby' => 'name', 'selected' => $category_id, 'hierarchical' => TRUE, 'show_option_none' => 'View all categories', 'class' => 'wds_category_name'));
        WDW_S_Library::html_page_nav($datas[1], $page_limit, 'posts_form');
        ?>
      </div>
      <div class="spider_message"><div class="updated"><p><strong>You can include only posts with featured image.</strong></p></div></div>
      <table class="wp-list-table widefat fixed pages">
        <thead>
          <th class="manage-column column-cb check-column table_small_col"><input id="check_all" type="checkbox" style="margin:0;" /></th>
          <th class="table_large_col">Featured image</th>
          <th class="<?php 
        if ($order_by == 'title') {
            echo $order_class;
        }
        ?>
">
            <a onclick="spider_set_input_value('order_by', 'title');
                        spider_set_input_value('asc_or_desc', '<?php 
        echo isset($_POST['asc_or_desc']) && isset($_POST['order_by']) && esc_html(stripslashes($_POST['order_by'])) == 'title' && esc_html(stripslashes($_POST['asc_or_desc'])) == 'asc' ? 'desc' : 'asc';
        ?>
');
                        spider_form_submit(event, 'posts_form')" href="">
              <span>Title</span><span class="sorting-indicator"></span>
            </a>
          </th>
          <th class="<?php 
        if ($order_by == 'author') {
            echo $order_class;
        }
        ?>
">
            <a onclick="spider_set_input_value('order_by', 'author');
                        spider_set_input_value('asc_or_desc', '<?php 
        echo isset($_POST['asc_or_desc']) && isset($_POST['order_by']) && esc_html(stripslashes($_POST['order_by'])) == 'author' && esc_html(stripslashes($_POST['asc_or_desc'])) == 'asc' ? 'desc' : 'asc';
        ?>
');
                        spider_form_submit(event, 'posts_form')" href="">
              <span>Author</span><span class="sorting-indicator"></span>
            </a>
          </th>
          <th class="table_small_col">Type</th>
          <th class="<?php 
        if ($order_by == 'date') {
            echo $order_class;
        }
        ?>
 table_large_col">
            <a onclick="spider_set_input_value('order_by', 'date');
                        spider_set_input_value('asc_or_desc', '<?php 
        echo isset($_POST['asc_or_desc']) && isset($_POST['order_by']) && esc_html(stripslashes($_POST['order_by'])) == 'date' && esc_html(stripslashes($_POST['asc_or_desc'])) == 'asc' ? 'desc' : 'asc';
        ?>
');
                        spider_form_submit(event, 'posts_form')" href="">
              <span>Date created</span><span class="sorting-indicator"></span>
            </a>
          </th>
          <th class="<?php 
        if ($order_by == 'modified') {
            echo $order_class;
        }
        ?>
 table_large_col">
            <a onclick="spider_set_input_value('order_by', 'modified');
                        spider_set_input_value('asc_or_desc', '<?php 
        echo isset($_POST['asc_or_desc']) && isset($_POST['order_by']) && esc_html(stripslashes($_POST['order_by'])) == 'modified' && esc_html(stripslashes($_POST['asc_or_desc'])) == 'asc' ? 'desc' : 'asc';
        ?>
');
                        spider_form_submit(event, 'posts_form')" href="">
              <span>Date modified</span><span class="sorting-indicator"></span>
            </a>
          </th>
        </thead>
        <tbody id="tbody_arr">
          <?php 
        $ids_string = '';
        if ($rows_data) {
            foreach ($rows_data as $row_data) {
                $alternate = !isset($alternate) || $alternate == 'class="alternate"' ? '' : 'class="alternate"';
                ?>
              <tr id="tr_<?php 
                echo $row_data->id;
                ?>
" <?php 
                echo $alternate;
                ?>
>
                <td class="table_small_col check-column"><input id="check_<?php 
                echo $row_data->id;
                ?>
" name="check_<?php 
                echo $row_data->id;
                ?>
" type="checkbox" /></td>
                <td class="table_large_col">
                  <img title="<?php 
                echo $row_data->title;
                ?>
" style="border: 1px solid #CCCCCC; max-width: 70px; max-height: 50px;" src="<?php 
                echo $row_data->thumb_url;
                ?>
" />
                </td>
                <td><a onclick="jQuery('#check_<?php 
                echo $row_data->id;
                ?>
').attr('checked', 'checked'); wds_add_post('<?php 
                echo $row_data->id;
                ?>
,', <?php 
                echo $single;
                ?>
); window.parent.tb_remove();" id="a_<?php 
                echo $row_data->id;
                ?>
" style="cursor: pointer;"><?php 
                echo $row_data->title;
                ?>
</a></td> 
                <td><?php 
                echo $row_data->author;
                ?>
</td>
                <td class="table_small_col"><?php 
                echo $row_data->type;
                ?>
</td>
                <td class="table_large_col"><?php 
                echo $row_data->date;
                ?>
</td>
                <td class="table_large_col"><?php 
                echo $row_data->modified;
                ?>
</td>
                <input type="hidden" name="wds_title_<?php 
                echo $row_data->id;
                ?>
" id="wds_title_<?php 
                echo $row_data->id;
                ?>
" value="<?php 
                echo $row_data->title;
                ?>
" />
                <input type="hidden" name="wds_image_url_<?php 
                echo $row_data->id;
                ?>
" id="wds_image_url_<?php 
                echo $row_data->id;
                ?>
" value="<?php 
                echo $row_data->image_url;
                ?>
" />
                <input type="hidden" name="wds_thumb_url_<?php 
                echo $row_data->id;
                ?>
" id="wds_thumb_url_<?php 
                echo $row_data->id;
                ?>
" value="<?php 
                echo $row_data->thumb_url;
                ?>
" />
                <input type="hidden" name="wds_link_<?php 
                echo $row_data->id;
                ?>
" id="wds_link_<?php 
                echo $row_data->id;
                ?>
" value="<?php 
                echo $row_data->link;
                ?>
" />
                <input type="hidden" name="wds_content_<?php 
                echo $row_data->id;
                ?>
" id="wds_content_<?php 
                echo $row_data->id;
                ?>
" value="<?php 
                echo esc_html($row_data->content);
                ?>
" />
              </tr>
              <?php 
                $ids_string .= $row_data->id . ',';
            }
        }
        ?>
        </tbody>
      </table>
      <input id="asc_or_desc" name="asc_or_desc" type="hidden" value="<?php 
        echo $asc_or_desc;
        ?>
" />
      <input id="order_by" name="order_by" type="hidden" value="<?php 
        echo $order_by;
        ?>
" />
      <input id="slide_id" name="slide_id" type="hidden" value="<?php 
        echo $slide_id;
        ?>
" />
      <input id="ids_string" name="ids_string" type="hidden" value="<?php 
        echo $ids_string;
        ?>
" />
      <input id="task" name="task" type="hidden" value="" />
    </form>
    <style>
      .wds_category_name {
        margin: 3px;
        <?php 
        echo get_bloginfo('version') > '3.7' ? ' height: 28px;' : '';
        ?>
      }
    </style>
    <script>
      jQuery(window).load(function () {
        jQuery(".wds_category_name").change(function () {
          jQuery("#page_number").val(1);
          jQuery("#search_or_not").val("search");
          jQuery("#posts_form").submit();
        });
        <?php 
        if ($count) {
            ?>
          jQuery("input[type='checkbox']").on("click", function() {
            jQuery("input[type='checkbox']").attr('checked', false);
            jQuery(this).attr('checked', true);
          });
          <?php 
        }
        ?>
      });
    </script>
    <script src="<?php 
        echo get_admin_url();
        ?>
load-scripts.php?c=1&load%5B%5D=common,admin-bar" type="text/javascript"></script>
    <?php 
        die;
    }
 public function execute()
 {
     $task = WDW_S_Library::get('task');
     $id = WDW_S_Library::get('slider_id', 0);
     $this->display();
 }