/**
  * Output a full Skin with items by data
  * @return    string	html
  */
 public function output_item_skin($demo = false, $choosen_skin = 0)
 {
     $base = new Essential_Grid_Base();
     $grid = new Essential_Grid();
     $m = new Essential_Grid_Meta();
     $is_post = !empty($this->layer_values) ? false : true;
     $this->import_google_fonts();
     $this->register_google_fonts();
     $layer_type = $base->getVar($this->params, 'choose-layout', 'even');
     $filters = '';
     if (!empty($this->filter)) {
         foreach ($this->filter as $filter) {
             $filters .= ' filter-' . sanitize_title($filter['slug']);
         }
     }
     if ($demo !== false && $demo !== 'preview') {
         //add favorite filter if we are in a demo
         if (isset($this->settings['favorite']) && $this->settings['favorite'] == true) {
             $filters .= ' filter-favorite';
         }
         if ($demo == 'skinchoose' && $choosen_skin == $this->id || $choosen_skin == '-1') {
             $filters .= ' filter-selectedskin';
         }
     }
     $sortings = '';
     if ($demo === false || $demo === 'preview') {
         if (!empty($this->sorting)) {
             foreach ($this->sorting as $handle => $value) {
                 $sortings .= ' data-' . esc_attr($handle) . '="' . sanitize_title($value) . '"';
             }
         }
     }
     $container_class = ' eg-' . esc_attr($this->handle) . '-container';
     $li_class = ' eg-' . esc_attr($this->handle) . '-wrapper';
     if ($is_post) {
         $li_class .= ' eg-post-id-' . @$this->post['ID'];
     }
     $container_background_color = $base->getVar($this->params, 'container-background-color', '#000');
     $container_background_color_transparency = $base->getVar($this->params, 'element-container-background-color-opacity', '1');
     //check for custom meta layout settings
     $meta_cover_bg_color = $this->get_meta_layout_change('cover-bg-color');
     $meta_cover_bg_opacity = $this->get_meta_layout_change('cover-bg-opacity');
     $meta_item_bg_color = $this->get_meta_layout_change('item-bg-color');
     $meta_content_bg_color = $this->get_meta_layout_change('content-bg-color');
     $meta_cover_style = '';
     if ($meta_cover_bg_color === false && $meta_cover_bg_opacity !== false) {
         //we only change opacity, use default background-color
         $meta_cover_style = ' style="background-color: ' . Essential_Grid_Base::hex2rgba($container_background_color, $meta_cover_bg_opacity) . ';"';
     } elseif ($meta_cover_bg_color !== false && $meta_cover_bg_opacity === false) {
         //we only change background-color, use default opacity
         $meta_cover_style = ' style="background-color: ' . Essential_Grid_Base::hex2rgba($meta_cover_bg_color, $container_background_color_transparency) . ';"';
     } elseif ($meta_cover_bg_color !== false && $meta_cover_bg_opacity !== false) {
         //we change both settings
         $meta_cover_style = ' style="background-color: ' . Essential_Grid_Base::hex2rgba($meta_cover_bg_color, $meta_cover_bg_opacity) . ';"';
     }
     $meta_content_style = '';
     if ($meta_content_bg_color !== false) {
         $meta_content_style = ' style="background-color: ' . $meta_content_bg_color . ';"';
     }
     $meta_item_style = '';
     if ($meta_item_bg_color !== false) {
         $meta_item_style = ' style="background-color: ' . $meta_item_bg_color . ';"';
     }
     $cover_type = $base->getVar($this->params, 'cover-type', 'full');
     $cover_animation_top = '';
     $cover_animation_delay_top = '';
     $cover_animation_center = '';
     $cover_animation_delay_center = '';
     $cover_animation_bottom = '';
     $cover_animation_delay_bottom = '';
     if ($cover_type == 'full') {
         //cover is for overlay container
         $cover_animation_center = ' esg-' . $base->getVar($this->params, 'cover-animation-center', 'fade') . $base->getVar($this->params, 'cover-animation-center-type', '');
         if ($cover_animation_center != ' esg-none' && $cover_animation_center != ' esg-noneout') {
             $cover_animation_delay_center = ' data-delay="' . round($base->getVar($this->params, 'cover-animation-delay-center', 0, 'i') / 100, 2) . '"';
         } else {
             $cover_animation_center = '';
         }
     } else {
         $cover_animation_top = ' esg-' . $base->getVar($this->params, 'cover-animation-top', 'fade') . $base->getVar($this->params, 'cover-animation-top-type', '');
         if ($cover_animation_top != ' esg-none' && $cover_animation_top != ' esg-noneout') {
             $cover_animation_delay_top = ' data-delay="' . round($base->getVar($this->params, 'cover-animation-delay-top', 0, 'i') / 100, 2) . '"';
         } else {
             $cover_animation_top = '';
         }
         $cover_animation_center = ' esg-' . $base->getVar($this->params, 'cover-animation-center', 'fade') . $base->getVar($this->params, 'cover-animation-center-type', '');
         if ($cover_animation_center != ' esg-none' && $cover_animation_center != ' esg-noneout') {
             $cover_animation_delay_center = ' data-delay="' . round($base->getVar($this->params, 'cover-animation-delay-center', 0, 'i') / 100, 2) . '"';
         } else {
             $cover_animation_center = '';
         }
         $cover_animation_bottom = ' esg-' . $base->getVar($this->params, 'cover-animation-bottom', 'fade') . $base->getVar($this->params, 'cover-animation-bottom-type', '');
         if ($cover_animation_bottom != ' esg-none' && $cover_animation_bottom != ' esg-noneout') {
             $cover_animation_delay_bottom = ' data-delay="' . round($base->getVar($this->params, 'cover-animation-delay-bottom', 0, 'i') / 100, 2) . '"';
         } else {
             $cover_animation_bottom = '';
         }
     }
     //group is for cover container
     $cover_group_animation_delay = '';
     $cover_group_animation = ' esg-' . $base->getVar($this->params, 'cover-group-animation', 'fade');
     if ($cover_group_animation != ' esg-none') {
         $cover_group_animation_delay = ' data-delay="' . round($base->getVar($this->params, 'cover-group-animation-delay', 0, 'i') / 100, 2) . '"';
     } else {
         $cover_group_animation = '';
     }
     //media is for media container
     $media_animation_delay = '';
     $media_animation = ' esg-' . $base->getVar($this->params, 'media-animation', 'fade');
     if ($media_animation != ' esg-none') {
         $media_animation_delay = ' data-delay="' . round($base->getVar($this->params, 'media-animation-delay', 0, 'i') / 100, 2) . '"';
     } else {
         $media_animation = '';
     }
     if ($this->load_more_element == true) {
         $li_class .= ' eg-newli';
     }
     //check if we are on cobble, if yes, get the data of entry for cobbles
     $cobbles_data = '';
     if ($this->grid_type == 'cobbles') {
         if ($this->layer_values === false) {
             //we are on post
             $cobbles = json_decode(get_post_meta($this->post['ID'], 'eg_cobbles', true), true);
             if (isset($cobbles[$this->grid_id]['cobbles']) && strpos($cobbles[$this->grid_id]['cobbles'], ':') !== false) {
                 $use_cobbles = $cobbles[$this->grid_id]['cobbles'];
             } else {
                 $use_cobbles = '1:1';
             }
         } else {
             //get the info from $this->layer_values
             $use_cobbles = $base->getVar($this->layer_values, 'cobbles-size', '1:1');
         }
         $use_cobbles = explode(':', $use_cobbles);
         $cobbles_data = ' data-cobblesw="' . $use_cobbles[0] . '" data-cobblesh="' . $use_cobbles[1] . '"';
     }
     echo '<!-- PORTFOLIO ITEM ' . $this->id . ' -->' . "\n";
     echo '<li class="filterall' . $filters . $li_class;
     if ($demo == 'custom') {
         echo ' eg-newli';
     }
     //neccesary for refresh of preview grid if new li will be added
     echo '"' . $sortings . $meta_item_style . $cobbles_data . '>' . "\n";
     if ($demo == 'overview' || $demo == 'skinchoose') {
         //check if fav or not
         $cl = $demo == 'skinchoose' ? 'esg-screenselect-toolbar eg-tooltip-wrap' : '';
         //show only in grid editor at skin chooser
         $cltitle = $demo == 'skinchoose' ? 'title="' . __('Select Skin', EG_TEXTDOMAIN) . '"' : '';
         //Show Title only at Skin Chooser
         echo '<div ' . $cltitle . ' class="' . $cl . '" style="display:block !important;width:100%;height:30px;top:0px;left:0px;position:relative;z-index:10;background-color: #3498DB; padding: 0;">' . "\n";
         echo '          <div class="btn-wrap-item-skin-overview-' . $this->id . '">' . "\n";
         echo '<div class="eg-item-skin-overview-name">' . $this->name . "</div>\n";
         if ($demo == 'overview') {
             $fav_class = !isset($this->settings['favorite']) || $this->settings['favorite'] == false ? 'eg-icon-star-empty' : 'eg-icon-star';
             echo '<a href="javascript:void(0);" title="' . __('Mark as Favorit', EG_TEXTDOMAIN) . '" class="eg-ov-1 eg-overview-button eg-btn-star-item-skin revyellow eg-tooltip-wrap" id="eg-star-' . $this->id . '"><i class="' . $fav_class . '"></i></a>';
             echo '<a href="' . Essential_Grid_Base::getViewUrl(Essential_Grid_Admin::VIEW_ITEM_SKIN_EDITOR, 'create=' . $this->id) . '" title="' . __('Edit Skin', EG_TEXTDOMAIN) . '" class="eg-tooltip-wrap eg-ov-2 eg-overview-button revgreen "><i class="eg-icon-cog"></i></a>';
             echo '<a href="javascript:void(0);" title="' . __('Duplicate Skin', EG_TEXTDOMAIN) . '" class="eg-ov-3 eg-overview-button eg-btn-duplicate-item-skin revcarrot eg-tooltip-wrap " id="eg-duplicate-' . $this->id . '"><i class="eg-icon-picture"></i></a>';
             echo '<a href="javascript:void(0);" title="' . __('Delete Skin', EG_TEXTDOMAIN) . '" class="eg-ov-4 eg-overview-button eg-btn-delete-item-skin revred eg-tooltip-wrap " id="eg-delete-' . $this->id . '"><i class="eg-icon-trash"></i></a>';
         } elseif ($demo == 'skinchoose') {
             echo '<div title="' . __('Select Skin', EG_TEXTDOMAIN) . '" class="eg-tooltip-wrap eg-fakeinput "></div>';
             echo '<input class="eg-tooltip-wrap " style="position: absolute; right: 0; top: 0;" type="radio" value="' . $this->id . '" title="' . __('Choose Skin', EG_TEXTDOMAIN) . '" name="entry-skin"';
             if ($choosen_skin == '-1') {
                 echo ' checked="checked"';
             } else {
                 checked($choosen_skin, $this->id);
             }
             //echo checked if it is current ID
             echo ' />';
         }
         echo '          </div>' . "\n";
         echo '          <div class="clear"></div>' . "\n\n";
         echo '       </div>' . "\n\n";
     } elseif ($demo == 'preview') {
         $is_visible = $grid->check_if_visible($this->post['ID'], $this->grid_id);
         $vis_icon = $is_visible ? 'eg-icon-eye' : 'eg-icon-eye-off';
         $vis_icon_color = $is_visible ? 'revblue' : 'revred';
         echo '<div class="esg-atoolbar" style="display:block !important;width:100%;height:30px;top:0px;left:0px;position:absolute;z-index:10; padding: 0;">' . "\n";
         echo '          <div class="btn-wrap-item-skin-overview-' . $this->post['ID'] . '">' . "\n";
         echo '<div class="eg-item-skin-overview-name">';
         echo '<a href="javascript:void(0);" class="eg-ov-2 eg-overview-button eg-btn-activate-post-item ' . $vis_icon_color . ' eg-tooltip-wrap" title="' . __('Show/Hide from Grid', EG_TEXTDOMAIN) . '" id="eg-act-post-item-' . $this->post['ID'] . '"><i class="' . $vis_icon . '"></i></a>';
         echo '<a href="' . get_edit_post_link($this->post['ID']) . '" class="eg-ov-3 eg-overview-button revyellow eg-tooltip-wrap" title="' . __('Edit Post', EG_TEXTDOMAIN) . '" target="_blank"><i class="eg-icon-pencil-1"></i></a>';
         echo '<a href="javascript:void(0);" class="eg-ov-4 eg-overview-button eg-btn-edit-post-item revgreen eg-tooltip-wrap" title="' . __('Edit Post Meta', EG_TEXTDOMAIN) . '" id="eg-edit-post-item-' . $this->post['ID'] . '"><i class="eg-icon-cog"></i></a>';
         echo '</div>' . "\n";
         echo '          </div>' . "\n";
         echo '          <div class="clear"></div>' . "\n\n";
         echo '       </div>' . "\n\n";
     } elseif ($demo == 'custom') {
         //add info of what items do exist in the layer that can be edited
         $custom_layer_elements = array();
         $custom_layer_data = array();
         if (!empty($this->layers)) {
             foreach ($this->layers as $layer) {
                 if (isset($layer['settings']['source'])) {
                     switch ($layer['settings']['source']) {
                         case 'post':
                             $custom_layer_elements[$layer['settings']['source-post']] = '';
                             break;
                         case 'woocommerce':
                             $custom_layer_elements[$layer['settings']['source-woocommerce']] = '';
                             break;
                     }
                 }
             }
         }
         if (!empty($this->layer_values)) {
             $custom_layer_data = $this->layer_values;
         }
         $custom_layer_elements = htmlentities(json_encode($custom_layer_elements));
         $custom_layer_data = htmlentities(json_encode($custom_layer_data));
         echo '<input type="hidden" name="layers[]" value="' . $custom_layer_data . '" />';
         //has the values for this entry
         echo '<div class="esg-data-handler" data-exists="' . $custom_layer_elements . '" style="display: none;"></div>';
         //has the information on what exists as layers in the skin #3498DB
         echo '<div class="esg-atoolbar" style="display:block !important;width:100%;height:30px;top:0px;left:0px;position:absolute;z-index:10;background-color: transparent; padding: 0;">' . "\n";
         echo '          <div class="btn-wrap-item-skin-overview-0">' . "\n";
         echo '<div class="eg-item-skin-overview-name">';
         echo '<a href="javascript:void(0);" title="' . __('Move', EG_TEXTDOMAIN) . '" style="cursor: move;" class="eg-ov-10 eg-overview-button revdarkblue eg-tooltip-wrap "><i class="eg-icon-menu"></i></a>';
         echo '<a href="javascript:void(0);" title="' . __('Move one before', EG_TEXTDOMAIN) . '" class="eg-ov-11 eg-overview-button eg-btn-move-before-custom-element revyellow eg-tooltip-wrap "><i class="eg-icon-angle-left"></i></a>';
         echo '<a href="javascript:void(0);" title="' . __('Move one after', EG_TEXTDOMAIN) . '" class="eg-ov-12 eg-overview-button eg-btn-move-after-custom-element revyellow eg-tooltip-wrap "><i class="eg-icon-angle-right"></i></a>';
         echo '<a href="javascript:void(0);" title="' . __('Move after #x', EG_TEXTDOMAIN) . '" class="eg-ov-13 eg-overview-button eg-btn-switch-custom-element revyellow eg-tooltip-wrap "><i class="eg-icon-angle-double-right"></i></a>';
         echo '<a href="javascript:void(0);" title="' . __('Delete Element', EG_TEXTDOMAIN) . '" class="eg-ov-4 eg-overview-button eg-btn-delete-custom-element revred eg-tooltip-wrap "><i class="eg-icon-trash"></i></a>';
         echo '<a href="javascript:void(0);" title="' . __('Duplicate Element', EG_TEXTDOMAIN) . '" class="eg-ov-3 eg-overview-button eg-btn-duplicate-custom-element revcarrot eg-tooltip-wrap "><i class="eg-icon-picture"></i></a>';
         echo '<a href="javascript:void(0);" title="' . __('Edit Element', EG_TEXTDOMAIN) . '" class="eg-ov-2 eg-overview-button eg-btn-edit-custom-element revgreen eg-tooltip-wrap "><i class="eg-icon-cog"></i></a>';
         echo '</div>' . "\n";
         echo '          </div>' . "\n";
         echo '          <div class="clear"></div>' . "\n\n";
         echo '       </div>' . "\n\n";
     }
     $c_layer = 0;
     $t_layer = 0;
     $b_layer = 0;
     $m_layer = 0;
     if (!empty($this->layers)) {
         foreach ($this->layers as $layer) {
             if (isset($layer['container'])) {
                 if (!isset($layer['settings']['position']) || $layer['settings']['position'] !== 'absolute') {
                     switch ($layer['container']) {
                         case 'c':
                             $c_layer++;
                             break;
                         case 'tl':
                             $t_layer++;
                             break;
                         case 'br':
                             $b_layer++;
                             break;
                         case 'm':
                             $m_layer++;
                             break;
                     }
                 } else {
                     //absolute element marking
                 }
             }
         }
     }
     $is_video = false;
     $is_iframe = false;
     $echo_media = '';
     if ($demo == false || $demo == 'preview' || $demo == 'custom') {
         $video_poster_src = '';
         //check for video poster image
         if (!empty($this->default_video_poster_order)) {
             foreach ($this->default_video_poster_order as $order) {
                 if ($order == 'no-image') {
                     //do not show image so set image empty
                     $video_poster_src = '';
                     break;
                 }
                 if (isset($this->media_sources[$order]) && $this->media_sources[$order] !== '' && $this->media_sources[$order] !== false) {
                     //found entry
                     $video_poster_src = $this->media_sources[$order];
                     break;
                 }
             }
         }
         if (!empty($this->default_media_source_order)) {
             //only show if something is checked
             foreach ($this->default_media_source_order as $order) {
                 //go through the order and set media as wished
                 if (isset($this->media_sources[$order]) && $this->media_sources[$order] !== '' && $this->media_sources[$order] !== false) {
                     //found entry
                     $do_continue = false;
                     switch ($order) {
                         case 'featured-image':
                         case 'alternate-image':
                         case 'content-image':
                             if ($this->lazy_load) {
                                 $echo_media = '<img src="' . EG_PLUGIN_URL . 'public/assets/images/300x200transparent.png" data-lazysrc="' . $this->media_sources[$order] . '" alt="' . $this->media_sources[$order . '-alt'] . '">';
                             } else {
                                 $echo_media = '<img src="' . $this->media_sources[$order] . '" alt="' . $this->media_sources[$order . '-alt'] . '">';
                             }
                             break;
                         case 'youtube':
                         case 'content-youtube':
                             //if we are masonry, we need to crop the image
                             $video_poster_src = $this->do_poster_cropping == true ? ess_aq_resize($video_poster_src, $this->video_sizes[$this->video_ratios['youtube']]['width'], $this->video_sizes[$this->video_ratios['youtube']]['height'], true, true, true) : $video_poster_src;
                             $echo_media = '<div class="esg-media-video" data-youtube="' . $this->media_sources[$order] . '" width="' . $this->video_sizes[$this->video_ratios['youtube']]['width'] . '" height="' . $this->video_sizes[$this->video_ratios['youtube']]['height'] . '" data-poster="' . $video_poster_src . '"></div>';
                             $is_video = true;
                             break;
                         case 'vimeo':
                         case 'content-vimeo':
                             //if we are masonry, we need to crop the image
                             $video_poster_src = $this->do_poster_cropping == true ? ess_aq_resize($video_poster_src, $this->video_sizes[$this->video_ratios['vimeo']]['width'], $this->video_sizes[$this->video_ratios['vimeo']]['height'], true, true, true) : $video_poster_src;
                             $echo_media = '<div class="esg-media-video" data-vimeo="' . $this->media_sources[$order] . '" width="' . $this->video_sizes[$this->video_ratios['vimeo']]['width'] . '" height="' . $this->video_sizes[$this->video_ratios['vimeo']]['height'] . '" data-poster="' . $video_poster_src . '"></div>';
                             $is_video = true;
                             break;
                         case 'html5':
                         case 'content-html5':
                             if ((!isset($this->media_sources[$order]['mp4']) || $this->media_sources[$order]['mp4'] == '') && (!isset($this->media_sources[$order]['webm']) || $this->media_sources[$order]['webm'] == '') && (!isset($this->media_sources[$order]['ogv']) || $this->media_sources[$order]['ogv'] == '')) {
                                 //not a single video is set, go to the next instead of the break
                                 $do_continue = true;
                                 continue;
                             }
                             //if we are masonry, we need to crop the image
                             $video_poster_src = $this->do_poster_cropping == true ? ess_aq_resize($video_poster_src, $this->video_sizes[$this->video_ratios['html5']]['width'], $this->video_sizes[$this->video_ratios['html5']]['height'], true, true, true) : $video_poster_src;
                             $echo_media = '<div class="esg-media-video" data-mp4="' . @$this->media_sources[$order]['mp4'] . '" data-webm="' . @$this->media_sources[$order]['webm'] . '" data-ogv="' . @$this->media_sources[$order]['ogv'] . '" width="' . $this->video_sizes[$this->video_ratios['html5']]['width'] . '" height="' . $this->video_sizes[$this->video_ratios['html5']]['height'] . '" data-poster="' . $video_poster_src . '"></div>';
                             $is_video = true;
                             break;
                         case 'soundcloud':
                         case 'content-soundcloud':
                             //if we are masonry, we need to crop the image
                             $video_poster_src = $this->do_poster_cropping == true ? ess_aq_resize($video_poster_src, $this->video_sizes[$this->video_ratios['soundcloud']]['width'], $this->video_sizes[$this->video_ratios['soundcloud']]['height'], true, true, true) : $video_poster_src;
                             $echo_media = '<div class="esg-media-video" data-soundcloud="' . $this->media_sources[$order] . '" width="' . $this->video_sizes[$this->video_ratios['soundcloud']]['width'] . '" height="' . $this->video_sizes[$this->video_ratios['soundcloud']]['height'] . '" data-poster="' . $video_poster_src . '"></div>';
                             $is_video = true;
                             break;
                         case 'iframe':
                             $echo_media = html_entity_decode($this->media_sources[$order]);
                             $is_iframe = true;
                             break;
                         case 'content-iframe':
                             $echo_media = html_entity_decode($this->media_sources[$order]);
                             $is_iframe = true;
                             break;
                     }
                     $echo_media = apply_filters('essgrid_set_media_source', $echo_media, $order, @$this->media_sources);
                     $is_iframe = apply_filters('essgrid_set_media_source_is_iframe', $is_iframe, $order);
                     $is_video = apply_filters('essgrid_set_media_source_is_video', $is_video, $order);
                     $video_poster_src = apply_filters('essgrid_set_media_source_video_poster_src', $video_poster_src, $order, @$this->video_sizes, @$this->video_ratios);
                     $do_continue = apply_filters('essgrid_set_media_source_do_continue', $do_continue, $order);
                     if ($do_continue) {
                         continue;
                     }
                     break;
                 }
             }
         }
         if ($echo_media == '') {
             //set default image if one is set
             if ($this->default_image !== '') {
                 $echo_media = '<img src="' . $this->default_image . '" />';
                 $this->item_media_type = 'default-image';
             }
         } else {
             $this->item_media_type = $order;
         }
     }
     //check if we have a full link
     $link_set_to = $base->getVar($this->params, 'link-set-to', 'none');
     $link_type_link = $base->getVar($this->params, 'link-link-type', 'none');
     $link_target = $base->getVar($this->params, 'link-target', '_self');
     if ($link_target !== 'disabled') {
         $link_target = ' target="' . $link_target . '"';
     } else {
         $link_target = '';
     }
     $link_wrapper = '';
     if ($link_set_to !== 'none') {
         switch ($link_type_link) {
             case 'post':
                 if ($demo === false) {
                     if ($is_post) {
                         $link_wrapper = '<a href="' . get_permalink($this->post['ID']) . '"' . $link_target . '>%REPLACE%</a>';
                     } else {
                         $get_link = $this->get_custom_element_value('post-link', '', '');
                         //get the post link
                         if ($get_link == '') {
                             $link_wrapper = '<a href="javascript:void(0);"' . $link_target . '>%REPLACE%</a>';
                         } else {
                             $link_wrapper = '<a href="' . $get_link . '"' . $link_target . '>%REPLACE%</a>';
                         }
                     }
                 } else {
                     $link_wrapper = '<a href="javasccript:void(0);"' . $link_target . '>%REPLACE%</a>';
                 }
                 break;
             case 'url':
                 $lurl = $base->getVar($this->params, 'link-url-link', 'javascript:void(0);');
                 if (strpos($lurl, '://') === false && trim($lurl) !== '' && $lurl !== 'javascript:void(0);') {
                     $lurl = is_ssl() ? 'https://' . $lurl : 'http://' . $lurl;
                 }
                 $link_wrapper = '<a href="' . $lurl . '"' . $link_target . '>%REPLACE%</a>';
                 break;
             case 'meta':
                 if ($demo === false) {
                     if ($is_post) {
                         $meta_key = $base->getVar($this->params, 'link-meta-link', 'javascript:void(0);');
                         $meta_link = $m->get_meta_value_by_handle($this->post['ID'], $meta_key);
                         if ($meta_link == '') {
                             // if empty, link to nothing
                             $link_wrapper = '<a href="javascript:void(0);"' . $link_target . '>%REPLACE%</a>';
                         } else {
                             $link_wrapper = '<a href="' . $meta_link . '"' . $link_target . '>%REPLACE%</a>';
                         }
                     } else {
                         $get_link = $this->get_custom_element_value('post-link', '', '');
                         //get the post link
                         if ($get_link == '') {
                             $link_wrapper = '<a href="javascript:void(0);"' . $link_target . '>%REPLACE%</a>';
                         } else {
                             $link_wrapper = '<a href="' . $get_link . '"' . $link_target . '>%REPLACE%</a>';
                         }
                     }
                 } else {
                     $link_wrapper = '<a href="javascript:void(0);"' . $link_target . '>%REPLACE%</a>';
                 }
                 break;
             case 'javascript':
                 $js_link = $base->getVar($this->params, 'link-javascript-link', 'void(0);');
                 $link_wrapper = '<a href="javascript:' . $js_link . '"' . $link_target . '>%REPLACE%</a>';
                 break;
             case 'lightbox':
                 if (!Essential_Grid_Jackbox::is_active() && !Essential_Grid_Social_Gallery::is_active()) {
                     //enqueue only if default LightBox is selected
                     wp_enqueue_script('themepunchboxext');
                     wp_enqueue_style('themepunchboxextcss');
                 }
                 $lb_source = '#';
                 $lb_class = '';
                 $lb_rel = $this->lb_rel !== false ? ' rel="' . $this->lb_rel . '"' : '';
                 if (!empty($this->default_lightbox_source_order)) {
                     //only show if something is checked
                     foreach ($this->default_lightbox_source_order as $order) {
                         //go through the order and set media as wished
                         if (isset($this->media_sources[$order]) && $this->media_sources[$order] !== '' && $this->media_sources[$order] !== false) {
                             //found entry
                             $do_continue = false;
                             if (!empty($this->lightbox_additions['items']) && $this->lightbox_additions['base'] == 'off') {
                                 $lb_source = $this->lightbox_additions['items'][0];
                                 $lb_class = ' esgbox';
                             } else {
                                 switch ($order) {
                                     case 'featured-image':
                                     case 'alternate-image':
                                     case 'content-image':
                                         if ($order == 'content-image') {
                                             $lb_source = $this->media_sources[$order];
                                         } else {
                                             $lb_source = $this->media_sources[$order . '-full'];
                                         }
                                         $lb_class = ' esgbox';
                                         break;
                                     case 'youtube':
                                         $http = is_ssl() ? 'https' : 'http';
                                         $lb_source = $http . '://www.youtube.com/watch?v=' . $this->media_sources[$order];
                                         $lb_class = ' esgbox';
                                         break;
                                     case 'vimeo':
                                         $http = is_ssl() ? 'https' : 'http';
                                         $lb_source = $http . '://vimeo.com/' . $this->media_sources[$order];
                                         $lb_class = ' esgbox';
                                         break;
                                     case 'iframe':
                                         //$lb_source = html_entity_decode($this->media_sources[$order]);
                                         //$lb_class = ' esgbox';
                                         break;
                                 }
                             }
                             if ($do_continue) {
                                 continue;
                             }
                             break;
                         }
                     }
                 }
                 if ($demo !== false) {
                     $lb_title = __('demo mode', EG_TEXTDOMAIN);
                 } else {
                     if ($is_post) {
                         $lb_title = $base->getVar($this->post, 'post_title', '');
                     } else {
                         $lb_title = $this->get_custom_element_value('title', '', '');
                     }
                     //the title from Post Title will be used
                 }
                 $link_wrapper = '<a class="' . $lb_class . '" href="' . $lb_source . '" lgtitle="' . $lb_title . '"' . $lb_rel . '>%REPLACE%</a>';
                 $this->load_lightbox = true;
                 //set that jQuery is written
                 break;
             case 'ajax':
                 $ajax_class = '';
                 if (!empty($this->default_ajax_source_order)) {
                     //only show if something is checked
                     $ajax_class = ' eg-ajaxclicklistener';
                     foreach ($this->default_ajax_source_order as $order) {
                         //go through the order and set media as wished
                         $do_continue = false;
                         if (isset($this->media_sources[$order]) && $this->media_sources[$order] !== '' && $this->media_sources[$order] !== false || $order == 'post-content') {
                             //found entry
                             switch ($order) {
                                 case 'youtube':
                                     $vid_ratio = $this->video_ratios['youtube'] == '0' ? '4:3' : '16:9';
                                     $ajax_attr = ' data-ajaxtype="youtubeid"';
                                     // postid, html5vid youtubeid vimeoid soundcloud revslider
                                     $ajax_attr .= ' data-ajaxsource="' . $this->media_sources[$order] . '"';
                                     //depending on type
                                     $ajax_attr .= ' data-ajaxvideoaspect="' . $vid_ratio . '"';
                                     //depending on type
                                     break;
                                 case 'vimeo':
                                     $vid_ratio = $this->video_ratios['vimeo'] == '0' ? '4:3' : '16:9';
                                     $ajax_attr = ' data-ajaxtype="vimeoid"';
                                     // postid, html5vid youtubeid vimeoid soundcloud revslider
                                     $ajax_attr .= ' data-ajaxsource="' . $this->media_sources[$order] . '"';
                                     //depending on type
                                     $ajax_attr .= ' data-ajaxvideoaspect="' . $vid_ratio . '"';
                                     //depending on type
                                     break;
                                 case 'html5':
                                     if ($this->media_sources[$order]['mp4'] == '' && $this->media_sources[$order]['webm'] == '' && $this->media_sources[$order]['ogv'] == '') {
                                         $do_continue = true;
                                     } else {
                                         //mp4/webm/ogv
                                         $vid_ratio = $this->video_ratios['html5'] == '0' ? '4:3' : '16:9';
                                         $ajax_attr = ' data-ajaxtype="html5vid"';
                                         // postid, html5vid youtubeid vimeoid soundcloud revslider
                                         $ajax_attr .= ' data-ajaxsource="';
                                         $ajax_attr .= @$this->media_sources[$order]['mp4'] . '|';
                                         $ajax_attr .= @$this->media_sources[$order]['webm'] . '|';
                                         $ajax_attr .= @$this->media_sources[$order]['ogv'];
                                         $ajax_attr .= '"';
                                         $ajax_attr .= ' data-ajaxvideoaspect="' . $vid_ratio . '"';
                                         //depending on type
                                     }
                                     break;
                                 case 'soundcloud':
                                     $ajax_attr = ' data-ajaxtype="soundcloudid"';
                                     // postid, html5vid youtubeid vimeoid soundcloud revslider
                                     $ajax_attr .= ' data-ajaxsource="' . $this->media_sources[$order] . '"';
                                     //depending on type
                                     break;
                                 case 'post-content':
                                     if ($is_post) {
                                         $ajax_attr = ' data-ajaxtype="postid"';
                                         // postid, html5vid youtubeid vimeoid soundcloud revslider
                                         $ajax_attr .= ' data-ajaxsource="' . @$this->post['ID'] . '"';
                                         //depending on type
                                     } else {
                                         $do_continue = true;
                                         //$ajax_class = '';
                                     }
                                     break;
                                 case 'featured-image':
                                 case 'alternate-image':
                                 case 'content-image':
                                     $img_url = '';
                                     if ($order == 'content-image') {
                                         $img_url = $this->media_sources[$order];
                                     } else {
                                         $img_url = $this->media_sources[$order . '-full'];
                                     }
                                     $ajax_attr = ' data-ajaxtype="imageurl"';
                                     // postid, html5vid youtubeid vimeoid soundcloud revslider
                                     $ajax_attr .= ' data-ajaxsource="' . $img_url . '"';
                                     //depending on type
                                     break;
                                 default:
                                     $ajax_class = '';
                                     $do_continue = true;
                                     break;
                             }
                             if ($do_continue) {
                                 continue;
                             }
                             break;
                         } else {
                             //some custom entry maybe
                             $postobj = $is_post ? $this->post : false;
                             $ajax_attr = apply_filters('essgrid_handle_ajax_content', $order, $this->media_sources, $postobj, $this->grid_id);
                             if (empty($ajax_attr)) {
                                 //$ajax_class = '';
                                 $do_continue = true;
                             }
                             if ($do_continue) {
                                 continue;
                             }
                             break;
                         }
                     }
                 }
                 if ($ajax_class !== '') {
                     //set ajax loading to true so that the grid can decide to put ajax container in top/bottom
                     $link_wrapper = '<a href="javascript:void(0);" ' . $ajax_attr . '>%REPLACE%</a>';
                     $this->ajax_loading = true;
                 }
                 break;
         }
     }
     if ($m_layer > 0) {
         $show_content = $base->getVar($this->params, 'show-content', 'bottom');
         if ($show_content == 'top') {
             self::insert_masonry_layer($demo, $meta_content_style, $is_video);
         }
     }
     if ($is_iframe != false) {
         //disable animation if we fill in iFrame
         $media_animation = '';
     }
     echo '    <!-- THE CONTAINER FOR THE MEDIA AND THE COVER EFFECTS -->' . "\n";
     echo '    <div class="esg-media-cover-wrapper">' . "\n";
     echo '            <!-- THE MEDIA OF THE ENTRY -->' . "\n";
     if ($demo == 'overview' || $demo == 'skinchoose') {
         echo '            <div class="esg-entry-media' . $media_animation . '"' . $media_animation_delay . '><img src="' . EG_PLUGIN_URL . 'admin/assets/images/' . $this->cover_image . '"></div>' . "\n\n";
     } else {
         $echo_media = '<div class="esg-entry-media' . $media_animation . '"' . $media_animation_delay . '>' . $echo_media . '</div>' . "\n\n";
         //echo media from top here
         if ($link_set_to == 'media' && $link_type_link !== 'none') {
             //set link on whole media
             $echo_media = str_replace('%REPLACE%', $echo_media, $link_wrapper);
         }
         echo $echo_media;
     }
     //add absolute positioned elements here
     $link_inserted = false;
     if ($is_iframe == false) {
         //if we are iFrame, no wrapper and no elements in media should be written
         echo '            <!-- THE CONTENT OF THE ENTRY -->' . "\n";
         if ($cover_type == 'full' && $c_layer > 0 || ($t_layer > 0 || $c_layer > 0 || $b_layer > 0)) {
             $cover_attr = '';
             if ($link_set_to == 'cover' && $link_type_link !== 'none') {
                 $cover_attr = ' data-clickable="on"';
             }
             echo '            <div class="esg-entry-cover' . $cover_group_animation . '"' . $cover_group_animation_delay . $cover_attr . '>' . "\n\n";
             echo '                <!-- THE COLORED OVERLAY -->' . "\n";
             if ($link_set_to == 'cover' && $link_type_link !== 'none') {
                 if (strpos($link_wrapper, 'class="') !== false) {
                     echo str_replace(array('%REPLACE%', 'class="'), array('', 'class="eg-invisiblebutton '), $link_wrapper);
                 } else {
                     echo str_replace(array('%REPLACE%', '<a '), array('', '<a class="eg-invisiblebutton" '), $link_wrapper);
                 }
                 $link_inserted = true;
             }
         }
         if ($cover_type == 'full') {
             $echo_c = '                <div class="esg-overlay' . $cover_animation_center . $container_class . '"' . $cover_animation_delay_center . $meta_cover_style . '></div>' . "\n\n";
             if ($link_set_to == 'cover' && $link_type_link !== 'none' && $link_inserted === false) {
                 //set link on whole cover
                 $echo_c = str_replace('%REPLACE%', $echo_c, $link_wrapper);
             }
             echo $echo_c;
         } else {
             if ($t_layer > 0) {
                 $echo_t = '                <div class="esg-overlay esg-top' . $cover_animation_top . $container_class . '"' . $cover_animation_delay_top . $meta_cover_style . '></div>' . "\n\n";
                 if ($link_set_to == 'cover' && $link_type_link !== 'none' && $link_inserted === false) {
                     //set link on whole cover
                     $echo_t = str_replace('%REPLACE%', $echo_t, $link_wrapper);
                 }
                 echo $echo_t;
             }
             if ($c_layer > 0) {
                 $echo_c = '                <div class="esg-overlay esg-center' . $cover_animation_center . $container_class . '"' . $cover_animation_delay_center . $meta_cover_style . '></div>' . "\n\n";
                 if ($link_set_to == 'cover' && $link_type_link !== 'none' && $link_inserted === false) {
                     //set link on whole cover
                     $echo_c = str_replace('%REPLACE%', $echo_c, $link_wrapper);
                 }
                 echo $echo_c;
             }
             if ($b_layer > 0) {
                 $echo_b = '                <div class="esg-overlay esg-bottom' . $cover_animation_bottom . $container_class . '"' . $cover_animation_delay_bottom . $meta_cover_style . '></div>' . "\n\n";
                 if ($link_set_to == 'cover' && $link_type_link !== 'none' && $link_inserted === false) {
                     //set link on whole cover
                     $echo_b = str_replace('%REPLACE%', $echo_b, $link_wrapper);
                 }
                 echo $echo_b;
             }
         }
         /*
         <!-- #########################################################################
         		THE CLASSES FOR THE ALIGNS OF ANY ELEMENT IS:
         
         		 esg-top, esg-topleft, esg-topright,
         		 esg-left, esg-right,  esg-center
         		 esg-bottom, esg-bottomleft, esg-bottomright
         
         		 IF YOU HAVE MORE THAN ONE ELEMENT IN THE SAME ALIGNED CONTAINER,
         		 THEY WILL BE ADDED UNDER EACH OTHER IN THE SAME ALIGNED CONTAINER
         #########################################################################  -->
         */
         if (!empty($this->layers)) {
             foreach ($this->layers as $layer) {
                 //add all but masonry elements
                 if (!isset($layer['container']) || $layer['container'] == 'm') {
                     continue;
                 }
                 $link_to = $base->getVar($layer['settings'], 'link-type', 'none');
                 $hide_on_video = $base->getVar($layer['settings'], 'hide-on-video', 'false');
                 if ($demo === false && $this->layer_values === false) {
                     //show element only if it is on sale or if featured
                     if (Essential_Grid_Woocommerce::is_woo_exists()) {
                         $show_on_sale = $base->getVar($layer['settings'], 'show-on-sale', 'false');
                         if ($show_on_sale == 'true') {
                             $sale = Essential_Grid_Woocommerce::check_if_on_sale($this->post['ID']);
                             if (!$sale) {
                                 continue;
                             }
                         }
                         $show_if_featured = $base->getVar($layer['settings'], 'show-if-featured', 'false');
                         if ($show_if_featured == 'true') {
                             $featured = Essential_Grid_Woocommerce::check_if_is_featured($this->post['ID']);
                             if (!$featured) {
                                 continue;
                             }
                         }
                     }
                 }
                 if ($link_to != 'embedded_video' && $hide_on_video == 'true' && $is_video == true) {
                     continue;
                 }
                 //this element is hidden if media is video
                 if ($demo == 'overview' || $demo == 'skinchoose' || $demo == 'custom') {
                     self::insert_layer($layer, $demo);
                 } else {
                     self::insert_layer($layer);
                 }
             }
         }
         if ($this->load_lightbox === true) {
             if (!empty($this->lightbox_additions['items'])) {
                 $lb_rel = $this->lb_rel !== false ? ' rel="' . $this->lb_rel . '"' : '';
                 echo '<div style="display: none">';
                 foreach ($this->lightbox_additions['items'] as $lb_key => $lb_img) {
                     if ($this->lightbox_additions['base'] == 'on' && $lb_key == 0) {
                         continue;
                     }
                     //if off, the first one is already written on the handle somewhere
                     echo '<a href="' . $lb_img . '" class="esgbox"' . $lb_rel . '></a>';
                 }
                 echo '</div>';
             }
         }
         if ($cover_type == 'full' && $c_layer > 0 || ($t_layer > 0 || $c_layer > 0 || $b_layer > 0)) {
             echo '           </div><!-- END OF THE CONTENT IN THE ENTRY -->' . "\n";
         }
     }
     if ($m_layer > 0) {
         if ($show_content == 'bottom') {
             self::insert_masonry_layer($demo, $meta_content_style, $is_video);
         }
     }
     echo '   </div><!-- END OF THE CONTAINER FOR THE MEDIA AND COVER/HOVER EFFECTS -->' . "\n\n";
     echo '</li><!-- END OF PORTFOLIO ITEM -->' . "\n";
 }