<?php

class Intense_Image_Compare extends Intense_Shortcode {

	function __construct() {
        parent::__construct();

		global $intense_visions_options;

		$this->title = __( 'Image Compare', 'intense' );
		$this->description = __( 'Compare two stacked images by dragging a slider back and forth with the image compare shortcode. Quickly see the difference between images. Great for showing before and after photos.
			<br><br>
			There are several options including: setting the before and after text, disabling the overlay which shows when the mouse is over, adding a shadow, setting the border radius, and more.', 'intense' );
		$this->category = __( 'Media', 'intense' );
		$this->show_preview = true;
	}

	function shortcode( $atts, $content = null ) {
		global $intense_visions_options;
		extract( shortcode_atts( $this->get_shortcode_defaults( null, $atts ), $atts ) );

		$output = '';

		$slider_offset *= 0.01;

		$container_id = ( !empty ( $id ) ) ? $id : 'img_compare_' . rand();
		$shadow_style = "margin-bottom: 0;";

		intense_add_style( 'twentytwenty' );
		intense_add_script( 'jquery.event.move' );
		intense_add_script( 'twentytwenty' );

		if ( is_numeric( $image1 ) ) {
			$image1_id = $image1;
		} else if ( !empty( $image1 ) ) {
			$image1_url = $image1;
		}

		if ( is_numeric( $image2 ) ) {
			$image2_id = $image2;
		} else if ( !empty( $image2 ) ) {
			$image2_url = $image2;
		}

		if ( $image1_id != '' ) {
			$photo = Intense_Photo_Source::get_wordpress_photo( $image1_id, $size );
			$photo1_url = $photo['url'];
		} else {
			$photo1_url = $image1_url;
		}

		if ( $image2_id != '' ) {
			$photo = Intense_Photo_Source::get_wordpress_photo( $image2_id, $size );
			$photo2_url = $photo['url'];
		} else {
			$photo2_url = $image2_url;
		}

		if ( $shadow ) {
			$output .= "<div><div style='$shadow_style'>";
		}

		$output .= "<div id='" . $container_id . "' style='" . ( isset( $border_radius ) ? "border-radius: " . $border_radius . "; " : "" ) . "' class='twentytwenty-container" . ( !empty( $class ) ? ' ' . $class : '' ) . "'>";

		if ( empty( $mode ) ) $mode = 'horizontal';
		if ( empty( $follow_mouse ) ) $follow_mouse = '0';
		if ( empty( $show_handle ) ) $show_handle = '0';

		$style = '';

		if ( $mode == 'horizontal' || $mode == 'vertical' ) {
			$output .= "<img src='" . $photo1_url . "'><img src='" . $photo2_url . "'>";
			$output .= '<script>
			jQuery(window).load(function() {
			  jQuery("#' . $container_id . '").twentytwenty({default_offset_pct: ' . $slider_offset . ', orientation: "' . $mode . '", follow_mouse: ' . $follow_mouse . '});
			  jQuery("#' . $container_id . '").width(jQuery("#' . $container_id . '").children().first().width());
			  jQuery("#' . $container_id . '").parent().parent().next(".intense.shadow").width(jQuery("#' . $container_id . '").children().first().width()).removeClass("hidden");
			  ' . ( !$show_overlay ? 'jQuery("#' . $container_id . '").children(".twentytwenty-overlay").remove();' : '' ) . '
				' . ( !$show_handle ? 'jQuery("#' . $container_id . '").find(".twentytwenty-handle").css({ "border": "none", "box-shadow": "none" }).children().remove();' : '' ) . '
			});</script>';
		} else if ( $mode == 'side_by_side' ) {
			$output .= do_shortcode('
			[intense_row margin_top="0" margin_bottom="0" padding_top="0" padding_bottom="0" nogutter="1"]
				[intense_column size="6" medium_size="6" small_size="6" extra_small_size="6" nogutter="1"]' . intense_run_shortcode( 'intense_image', array('image' => $image1, 'size' => $size ) ) . '[/intense_column]
				[intense_column size="6" medium_size="6" small_size="6" extra_small_size="6" nogutter="1"]' . intense_run_shortcode( 'intense_image', array('image' => $image2, 'size' => $size ) ) . '[/intense_column]
			[/intense_row]
			');

			$style .= '
				#' . $container_id . ' img {
					position: relative !important;
				}
				#' . $container_id . ' img:last-of-type{
					border-left: 3px solid #FFF;
					margin-left: -3px;
				}
			';
		} else if ( $mode == 'over_and_under' ) {
			$output .=
			intense_run_shortcode( 'intense_image', array('image' => $image1, 'size' => $size ) ) .
			intense_run_shortcode( 'intense_image', array('image' => $image2, 'size' => $size ) ) 
			;

			$style .= '
				#' . $container_id . ' img {
					position: relative !important;
				}
				#' . $container_id . ' img:last-of-type{
					border-top: 3px solid #FFF;
					margin-top: -3px;
				}
			';
		}

		$output .= '</div>';

		if ( $shadow ) {
			$output .= "</div><img src='" . INTENSE_PLUGIN_URL . "/assets/img/shadow{$shadow}.png' class='intense shadow hidden' style='" . ( isset( $width ) ? 'width: ' . $width . '; height: auto;' : '' ) . "vertical-align: top; border:0px; border-radius: 0px; box-shadow: 0 0 0;' alt='' /></div>";
		}



		if ( $show_overlay ) {
			$style .= '
				#' . $container_id . ' .twentytwenty-before-label:before {
					content: "' . $before_text . '";
				}
				#' . $container_id . ' .twentytwenty-after-label:before {
					content: "' . $after_text . '";
				}
			';
		}

		if ( !$show_handle && $mode == 'horizontal' ) {
			$style .= '
				#' . $container_id . ' .twentytwenty-handle:before {
					bottom: 0;
				}
				#' . $container_id . ' .twentytwenty-handle:after {
					top: 0;
				}
			';
		} else if ( !$show_handle && $mode == 'vertical' ) {
			$style .= '
				#' . $container_id . ' .twentytwenty-handle:before {
					left: 0;
					margin-left: 0;
				}
				#' . $container_id . ' .twentytwenty-handle:after {
					right: 0;
				}
			';
		}

		if ( !empty( $style ) ) {
			$output .= '<style>' . $style . '</style>';
		}

		return $output;
	}
}
