<?php
	$cssClasses = array(
		'background-wrapper',
		'background-wrapper_'.$this->id,
		$this->class,
    $this->backgroundVariation,
	);
	if ($this->colorVariation) {
		$cssClasses[] = $this->colorVariation;
	}
	if ($this->height) {
    $cssClasses[] = $this->height;
	}
  if ($this->valign) {
    $cssClasses[] = $this->valign;
	}
  if ($this->width) {
    $cssClasses[] = '-width-expand';
  }
  /*if ($this->valignCenter) {
    $cssClasses[] = '-valign-center';
  }*/
  if ($this->shadow) {
    $cssClasses[] = '-shadow';
  }
  if ($this->textShadow) {
    $cssClasses[] = '-text-shadow';
  }
  if ($this->invert) {
  $cssClasses[] = '-invert';
  }
  if ($this->widthRestrict) {
    $cssClasses[] = '-bg-restraint';
  }

	$imageFiles = array();
	$videoFiles = array();
	if (is_array($this->backgroundImage)) {
		foreach (\FilesModel::findMultipleByUuids($this->backgroundImage) as $file) {
			if (in_array(
				$file->extension,
				array_map('trim', explode(',', \Config::get('validImageTypes')))
			)) {
				$imageFiles[] = $file;
			}
			else {
				$videoFiles[] = $file;
			}
		}
	}
	$backgroundStyle = '';
	if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)) {
		$backgroundStyle .= 'background-image: url("' . $image->src . '");';
    if ($this->height == '-bgimage')
    {
      $minHeight = round(100/$image->arrSize[0]*$image->arrSize[1]).'%';
    }
	}
	if ((count($imageFiles) || count($videoFiles)) && $this->backgroundSize) {
		$backgroundStyle .= 'background-size: ' . $this->backgroundSize . ';';
	}
	if ((count($imageFiles) || count($videoFiles)) && $this->backgroundPosition) {
		$backgroundStyle .= 'background-position: ' . $this->backgroundPosition . ';';
	}
  if ((count($imageFiles) || count($videoFiles)) && $this->backgroundOpacity) {
    $backgroundStyle .= 'opacity:' . $this->backgroundOpacity/100 . ';';
  }

	$style = '';
	if (!count($videoFiles) && !count($imageFiles)) {
		$style .= $backgroundStyle;
	}
?>

<div class="<?php echo implode(' ', $cssClasses) ?>" style="<?php echo htmlspecialchars($style) ?> <?php echo $this->style ?>"<?php echo $this->cssID ?>>

	<?php if (count($videoFiles)): ?>
		<div class="background-wrapper-background">
			<video class="no-mejs" autoplay loop <?php if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)): ?> poster="<?php echo $image->src ?>"<?php endif ?>>
				<?php foreach ($videoFiles as $video): ?>
					<source src="<?php echo TL_FILES_URL . $video->path ?>" type="video/<?php echo $video->extension ?>">
				<?php endforeach ?>
				<?php if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)): ?>
					<?php $this->insert('picture_default', $image->picture) ?>
				<?php endif ?>
			</video>
		</div>
	<?php elseif (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)): ?>
		<div class="background-wrapper-background" style="<?php echo htmlspecialchars($backgroundStyle) ?>" data-image-url="<?php echo $image->src ?>"></div>
    <?php if ($minHeight): ?>
      <style>.background-wrapper_<?= $this->id ?> .background-wrapper-helper:before { content: ""; display: table; padding-top: <?= $minHeight ?>; float: left; }</style>
    <?php endif; ?>
	<?php endif ?>

  <?php if ($this->overlay): ?>
    <div class="overlay"></div>
  <?php endif; ?>

	<div class="background-wrapper-helper"><div class="background-wrapper-inner<?php if ($this->padding): ?> <?= $this->padding ?><?php endif; ?> block">