<?php

class Intense_Timeline extends Intense_Shortcode {

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

		global $intense_visions_options;

		$this->title = __( 'Timeline', 'intense' );
		$this->description = __( 'Use the timeline shortcode to create your own vertical list of events. You can also use the timeline layout in many of the post types. Find out more at the Blog shortcode page.
<br><br>
There are four different layout options to choose from:
<ul>
<li><strong>dual</strong> – events are staggered left and right with the date line centered</li>
<li><strong>left</strong> – events will float left with the date line on the right</li>
<li><strong>right</strong> – events will float right with the date line on the left</li>
<li><strong>center</strong> – events will be full-width with the date line centered</li>
</ul>
You can animate the event as it comes into view on scroll. There are a number of options to choose from when creating your list of events.', 'intense' );
		$this->category = __( 'Layout', 'intense' );
		$this->show_preview = true;
		$this->is_container = true;
	}

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

		global $showyear;
		global $event_number;
		global $currentYear;

		$output = '';

		$mode = 'timeline';

		//TODO: allow the user to choose which animation is used.
		intense_load_animation_CSS( $animation_type );

		$showyear = $show_year;

		$currentYear = '';
		$event_number = 0;

		$id = ( !empty ( $id ) ) ? $id : 'timeline_' . rand();
		$timeline_events = do_shortcode( $content );
		$timeline_events = str_replace( '<br />', '', $timeline_events );
		$timeline_events = str_replace( '<p>', '', $timeline_events );
		$timeline_events = str_replace( '</p>', '', $timeline_events );

		if ( strlen( $timeline_events ) > 0 )
			$timeline_events = substr( trim( $timeline_events ), 0, -1 );
		
		if ( $column_mode == 'left' ) {
			$mode = 'timeline_left';
		} elseif ( $column_mode == 'right' ) {
			$mode = 'timeline_right';
		} elseif ( $column_mode == 'center' ) {
			$mode = 'timeline_center';
		}

		$output .= "<ul id='" . $id . "' class='intense " . $mode . ( !empty( $class ) ? ' ' . $class : '' ) ."' style='display: none;'>" . $timeline_events . "</ul>";
		$output .= "<script> jQuery(function($){";
		$output .= " $(document).ready(function() {";	
		$output .= "	$('#" . $id . "').show().addClass('animated').addClass('" . $animation_type . "');";

		if ( $column_mode == 'dual' ) {
			$output .= "    var isIE8 = $('#intense-browser-check').hasClass('ie8');";	
			$output .= "	if (isIE8) { var float = 'right';";
			$output .= "		$('#" . $id . " > li').each(function() {
									var element = $(this);

									if (element.hasClass('year')) {
										float = 'right';
										element.css('clear', 'both');
									} else {
										element.css('float', float);

										if (float == 'left') {
											element.css('clear', 'left');
										}
									}							

									if (float == 'left') {
										float = 'right';
									} else {
										float = 'left';
									}
								});";
			$output .= "	}";
		}
		$output .= " })";
		$output .= "})";
		$output .= "</script>";

		return $output;
	}
}
