<?php

class Intense_Chart extends Intense_Shortcode {

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

		global $intense_visions_options;

		$this->title = __( 'Chart', 'intense' );
		$this->description = __( 'Add professional charts to WordPress using the chart shortcode. There are several types to choose from:
			<ul>
			<li><strong>Line</strong> – displays a series of data points connected by straight lines</li>
			<li><strong>Bar</strong> – a chart with rectangular bars representing values in a series</li>
			<li><strong>Radar</strong> – shows angular spokes (radii) representing the data values</li>
			<li><strong>Polar Area</strong> – similar to the pie chart except the sectors have equal angles and extend out to represent the value of the sector</li>
			<li><strong>Pie</strong> – a circular chart with sectors that vary in size depending on the value of the sector</li>
			<li><strong>Doughnut</strong> – a pie chart with a hollowed out center</li>
			</ul>
			For each chart, you can control the width and height. The charts can also be animated when they come into view. There are also options to add text or an icon in the middle of the chart. This is most useful for the doughnut chart.', 'intense' );
		$this->category = __( 'Media', '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 ) );

		intense_add_script( 'chartjs'  );
		intense_add_script( 'intense_modernizr' );
		intense_add_script( 'intense.compatible.canvas' );
		intense_add_script( 'jquery.appear' );

		$type = strtolower( $type );
		$random = rand();
		$labels = explode( ",", str_replace( " ", "", $labels ) );
		$font_size = $height / 4;
		$icon = ( isset( $icon ) ? intense_run_shortcode( 'intense_icon', array( 'source' => $icon_source, 'type' => $icon ) ) : "" );

        $color = intense_get_plugin_color( $color );

        $id = ( !empty ( $id ) ) ? ' id="' . $id . '"' : '';

		$output = '<div' . $id . ' class="intense chart canvas-container' . ( !empty( $class ) ? ' ' . $class : '' ) . '" style="width:' . $width . 'px; height:' . $height . 'px; display: inline-block; position: relative; direction: ltr;">';
		$output .= '<div id="chart_text_' . $random . '" style="color: ' . $color . '; font-size: ' . $font_size . 'px; position: absolute;">' . $icon . ' ' . $text  . '</div>';
		$output .= '<canvas class="responsive-canvas" id="chart_' . $random . '" width="' . $width . '" height="' . $height . '"></canvas></div>';
		$output .= "<script> jQuery(function($){";
		$output .= '	$(window).load(function() {
    					var options = {
							animation: ' . ( $animation ? "true" : "false" ) . ',
							animationSteps: ' . $animation_steps . ',
							animationEasing: "' . $animation_easing . '",
							percentageInnerCutout: "' . $percentage_inner_cutout . '",
							showTooltips: ' . ( $show_tooltips ? "true" : "false" ) . ',
							bezierCurve: ' . ( $bezier ? "true" : "false" ) . ',
							pointDot: ' . ( $show_points ? "true" : "false" ) . ',
							tooltipTemplate: "' . $tooltip_template . '",
						};';

		if ( in_array( $type, array( "line", "bar", "radar" ) ) ) {
			$output .= 'var data = {';
			$output .= '	labels : [';

			foreach ( $labels as $label ) {
				$output .= "'$label',";
			}

			$output = rtrim( $output, "," );

			$output .= '],datasets : [';
			$output .= rtrim( rtrim( do_shortcode( $content ) ), "," );
			$output .= ']};';
		} else if ( in_array( $type, array( "polararea", "pie", "doughnut" ) ) ) {
			if ( $type == "polararea" ) $type = "PolarArea";
			$output .= 'var data = [';
			$output .= rtrim( rtrim( do_shortcode( $content ) ), "," );
			$output .= '];';
		}

		$output .= '		var $textBox = $("#chart_text_' . $random . '");';
		$output .= '		var $chartBox = $("#chart_text_' . $random . '").parent();';
		$output .= '		$textBox.css("top", (($chartBox.height() / 2) - ($textBox.height() / 2)) + "px");';
		$output .= '		$textBox.css("left", (($chartBox.width() / 2) - ($textBox.width() / 2)) + "px");';

		$output .= "		$('#chart_$random').appear(function() {";
		$output .= '			var canvas = $("#chart_' . $random . '").get(0);';
		$output .= '			var ctx = canvas.getContext("2d");';
		$output .= '			var chart = new Chart(ctx).' . ucfirst( $type ) . '(data, options);';
		$output .= '		},{accX: 0, accY: -' . $height / 3.5 . '});';
		$output .= "	});";
		$output .= "}); </script>";

		$output .= "<script>var compatibleCanvas = '" . INTENSE_PLUGIN_URL . '/assets/js/excanvas/excanvas.min.js' . "';</script>";

		return $output;
	}	
}
