<?php
if ( ! defined( 'ABSPATH' ) ) {
  die( '-1' );
}

$image =
$duration =
$delay =
$height =
$border_width =
$border_color =
$border_radius =
$link =
$transition =
$el_class =
$css = '';

$prefix = array(
  '-webkit-transition',
  '-o-transition',
  'transition',
);

$atts = vc_map_get_attributes( $this->getShortcode(), $atts );
extract( $atts ); // @codingStandardsIgnoreLine

$el_class = $this->getExtraClass( $el_class );

$css_classes = array(
  'vckit-scroller-image',
  $el_class,
  vc_shortcode_custom_css_class( $css ),
);

$image = esc_url( $this->getImageSrc( $image ) );

if ( 'yes' == $config_border ) {
  $border = 'border: ' . $border_width . 'px ' . $border_style . ' '
    . $border_color . '; border-radius: ' . $border_radius . 'px;';
} else {
  $border = '';
}

foreach ( $prefix as $pre ) {
  $transition .= ' ' . $pre . ': background-position ' . $duration . 's ' . $effect . ' ' . $delay . 's, box-shadow 0.2s ease;';
}

$style = 'height: ' . $height . 'px; background-image: url(' . $image . ');'
  . $transition . $border;
?>
<div
  class="<?php echo esc_attr( implode( ' ', $css_classes ) ); ?>"
  style="<?php echo esc_attr( $style ) ?>" >
  <?php if ( 'yes' == $enable_link ) { ?>
    <a href="<?php echo esc_attr( $link ) ?>" target="_blank"></a>
  <?php } ?>
</div>
