<?php 


class sauron_percent extends WP_Widget
{

    function __construct(){
		$widget_ops = array('description' => __('Displays Percent', "sauron"));
		$control_ops = array('width' => 400, 'height' => 500);
		parent::__construct(false,$name=__('Sauron Percent', "sauron"),$widget_ops,$control_ops);
	}

  /* Displays the Widget in the front-end */
    function widget($args, $instance){
		extract($args);

			$title = $instance['title'];
			$percent_type = (isset($instance['percent_type']) ? $instance['percent_type'] : "horizontal");
			$width = $instance['width'];
			$height = $instance['height'];
			$percent = $instance['percent'];
			$completed_color = substr($instance['completed_color'], 0, 1) == "#" ? $instance['completed_color'] : "#" . $instance['completed_color'];
			$to_do_color = substr($instance['to_do_color'], 0 ,1 ) == "#" ? $instance['to_do_color'] : "#" . $instance['to_do_color'];
			$percent_text_color = substr($instance['percent_text_color'], 0, 1) == "#" ? $instance['percent_text_color'] : "#". $instance['percent_text_color'];
			$time = $instance['time'];
			
		echo $before_widget;

		if ($title) {
		  echo $before_title . $title . $after_title;
		}
		$id = $this->get_field_id('title');
		preg_match_all('!\d+!', $id, $matches);
		$match = $matches[0][0];
		?>
<?php
 if($percent_type=="horizontal" || is_null($percent_type)){ ?>
<style>
@media only screen and (max-width: 640px) {
	.percent{
		margin: 0 auto;
		width: 100% !important;
	}
}
#wdwt_percent<?php echo $match; ?>{
	width:<?php echo esc_html($width/4); ?>%; 
	height: <?php echo esc_html($height); ?>px;
	background: <?php echo esc_html($to_do_color); ?>;
	-webkit-box-shadow: inset 0 17px 10px -22px rgba(0,0,0,0.8);
	-moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
	box-shadow: inset 0 17px 10px -22px rgba(0,0,0,0.8);
	margin: 5px 0px;
}
.phone #wdwt_percent<?php echo $match; ?>{
	height: <?php echo esc_html($height * 0.6); ?>px;
}
#wdwt_target<?php echo $match; ?>{
	font-size: 20px; 
	color: <?php echo esc_html($percent_text_color); ?> !important;
	float:right;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 90%;
	transform: translate(-64%, -50%);
	width: 80px;
	text-align: left;
}
.phone #wdwt_target<?php echo $match; ?>{
	font-size: 12px;
	width: 40px;
	left: 80%;
}

#wdwt_match<?php echo $match; ?>{
	background: #EFEFEF;
	float: right;
	width: 80px;
	height: 113%;
	position: relative;
	top: -3px;
	border-radius: 3px;
	box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.8);
}
.phone #wdwt_match<?php echo $match; ?>{
	width: 40px;
}
#wdwt_percent-<?php echo $match; ?> h3{
	margin: 0 !important;
}

#wdwt_widget_fill<?php echo $match; ?>{
	background: <?php echo esc_html($completed_color); ?>;
}

</style>
<div id="wdwt_percent<?php echo $match; ?>">
	<div id="wdwt_widget_fill<?php echo $match; ?>" style="width: 0px; height: 100%; background: #<?php echo $completed_color; ?>; position: relative; overflow: visible !important;">
		<div id="wdwt_match<?php echo $match; ?>">
			<div class="arrow-left"></div>
			<b id="wdwt_target<?php echo $match; ?>" class="percent_number">0%</b>
		</div>
	</div>
</div>
 <script>

 var wdwt_widget_y<?php echo $match; ?> = 0;

function wdwt_round_widget_<?php echo $match; ?>(){

	var wdwt_widget_height = jQuery(window).scrollTop();
	var wdwt_widget_height_canvas = jQuery('#wdwt_percent<?php echo $match; ?>').offset().top -jQuery(window).height();
	    if(wdwt_widget_height  > wdwt_widget_height_canvas) {
		if (wdwt_widget_y<?php echo $match; ?>==0){
	            wdwt_widget_y<?php echo $match; ?>++;		
	jQuery( "#wdwt_widget_fill<?php echo $match; ?>" ).animate({
	    width: <?php echo $percent; ?>+ '%',
	  }, <?php echo $time; ?>, function() {
	    // Animation complete.
	  });
	  
	  var wdwt_widget_decimal_places = 1;
	  var wdwt_widget_decimal_factor = wdwt_widget_decimal_places === 0 ? 1 : wdwt_widget_decimal_places * 10;

	  jQuery('#wdwt_target<?php echo $match; ?>').animateNumber(
	    {
	      number: <?php echo $percent; ?> * wdwt_widget_decimal_factor,
	      color: '<?php echo $percent_text_color; ?>',
	      numberStep: function(now, tween) {
	        floored_number = Math.floor(now) / wdwt_widget_decimal_factor,
	        target = jQuery(tween.elem);
	        if (wdwt_widget_decimal_places > 0) {
	          floored_number = floored_number;
	        }

	        target.text(floored_number + '%');
	      }
	    },
	    <?php echo $time; ?>
	  )}
	}

}

jQuery(document).ready(function(){
	wdwt_round_widget_<?php echo $match; ?>();
});

jQuery( window ).scroll(function() {
	 wdwt_round_widget_<?php echo $match; ?>();
});
</script>
	<?php
}
else{ ?>
<script>
function wdwt_round_widget(canvas_id,percent,color1,color2,textcolor,radius,line_width, time) {
		var canvas = document.getElementById(canvas_id);
		var context = canvas.getContext('2d');
		var x = canvas.width / 2;
		var y = canvas.height / 2;
		var radius = radius;
		var  i=0;
		context.font="20px arial";
		context.fillStyle = textcolor;
		context.fillText(0+"%",x-18,y);
		var sauron_round_diagram_interval= setInterval(function(){
			
			if(i>=percent){
				clearInterval(sauron_round_diagram_interval);
				return;
			}
			var startAngle = ((i/50)+1.5) * Math.PI;
			var endAngle = (((i+1.2)/50)+1.5) * Math.PI;
			var counterClockwise = false;
			context.beginPath();
			context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
			context.lineWidth = line_width;
			/* line color */
			context.strokeStyle = color1;
			context.stroke();
			context.clearRect(x-36,y-23,75,25)
			
			context.fillText(i+1+"%",x-18,y);
			i++; 
		},time)
		var startAngle = 0* Math.PI;
		var endAngle = 2 * Math.PI;
		var counterClockwise = false;
		context.beginPath();
		context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
		context.lineWidth = line_width;
		context.strokeStyle = color2;
		context.stroke();
	}
</script>
<div class="percent" style="width: <?php echo $width+21; ?>px;">
	<canvas id="wdwt_myCanvas<?php echo $id; ?>" width="<?php echo esc_attr($width); ?>" height="<?php echo esc_attr($width); ?>"></canvas>
	<div width="<?php echo esc_attr($width); ?>" style="text-align: center"><?php echo $title; ?> </div>
</div>

<script>   
	var wdwt_widget_y<?php echo $match; ?> = 0;
	jQuery(document).ready(function(){
		var wdwt_widget_height = jQuery(window).scrollTop();
		var wdwt_widget_height_canvas = jQuery('#wdwt_myCanvas<?php echo $id; ?>').offset().top -jQuery(window).height();
		if(wdwt_widget_height  > wdwt_widget_height_canvas) {
			if (wdwt_widget_y<?php echo $match; ?>==0){
					wdwt_widget_y<?php echo $match; ?>++;
			  wdwt_round_widget('wdwt_myCanvas<?php echo $id; ?>',<?php echo $percent; ?>,'<?php echo str_replace('#','', $completed_color); ?>','<?php echo str_replace('#','', $to_do_color); ?>','<?php echo str_replace('#','', $percent_text_color); ?>',<?php echo $width/2-20; ?>,<?php echo $height; ?>,<?php echo $time/100; ?>);
			}
		}
	});	

	jQuery( window ).scroll(function() {
		var wdwt_widget_height = jQuery(window).scrollTop();
		var wdwt_widget_height_canvas = jQuery('#wdwt_myCanvas<?php echo $id; ?>').offset().top -jQuery(window).height();
		if(wdwt_widget_height  > wdwt_widget_height_canvas) {
			if (wdwt_widget_y<?php echo $match; ?>==0){
					wdwt_widget_y<?php echo $match; ?>++;
			  wdwt_round_widget('wdwt_myCanvas<?php echo $id; ?>',<?php echo $percent; ?>,'<?php echo str_replace('#','', $completed_color); ?>','<?php echo str_replace('#','', $to_do_color); ?>','<?php echo str_replace('#','', $percent_text_color); ?>',<?php echo $width/2-20; ?>,<?php echo $height; ?>,<?php echo $time/100; ?>);
			}
		}
	});

</script>
<?php }	
		echo $after_widget;
				
		}

  /*Saves the settings. */
    function update($new_instance, $old_instance){
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['percent_type'] = strip_tags($new_instance['percent_type']);
		$instance['width'] = $new_instance['width'];
		$instance['height'] = $new_instance['height'];
		$instance['percent'] = $new_instance['percent'];
		$instance['completed_color'] = $new_instance['completed_color'];
		$instance['to_do_color'] = $new_instance['to_do_color'];
		$instance['percent_text_color'] = $new_instance['percent_text_color'];
		$instance['time'] = $new_instance['time'];
		return $instance;
		
		}

  /*Creates the form for the widget in the back-end. */
    function form($instance){
				//Defaults
		    $defaults = array(
			  'title' => '',
			  'percent_type' => 'horizontal',
			  'width' => '400',
			  'height' => '40',
			  'percent' => '75',
			  'completed_color' => 'a7797d',
			  'to_do_color' => 'a7a379',
			  'percent_text_color' => '171717',
			  'time' => '1000'
			);
		$instance = wp_parse_args((array)$instance, $defaults);

		$title = esc_attr( $instance['title'] );
		$percent_type = esc_attr( $instance['percent_type'] );
		$width = esc_attr( $instance['width'] );
		$height = esc_attr( $instance['height'] );
		$percent = esc_attr( $instance['percent'] );
		$completed_color = $instance['completed_color'];
		$to_do_color = $instance['to_do_color'];
		$percent_text_color = $instance['percent_text_color'];
		$time = $instance['time'];
		
		wp_enqueue_script('wp-color-picker');
		wp_enqueue_style( 'wp-color-picker' );
		?>
		<script>
			jQuery(document).ready(function() {
				jQuery('.wdwt_percent_color_input').wpColorPicker();
			});
		</script>
		<style>
	 .wp-color-result:focus{
		outline: none;
	 }
	 .wp-picker-container:has(.wp-picker-open) { color: red; }
	 #wd_admin_form .calendar .wd_button{
		display: table-cell !important;
	 }
	 
	 #wd_admin_form div.calendar{
		margin-left: -101px;
	 }
	 .paramlist_value{
		position: relative;
	 }
	 .wdwt_percent_color_input.wp-color-picker{
		  height: 23px;
	 }
	 .wp-picker-holder{
		top: -11px;
		position: relative;
		z-index: 3;
	 }
	 .wp-color-result:after{
		  width: 73px;
	 }
	 .paramlist_value > .wp-picker-container > a{
		left: -1px;
	 }
	 .wp-picker-container .wp-picker-container > a{
		  left: -11px !important;
	 }
	 .wp-color-result{
		  /*background-color: transparent !important;*/
		  left: -6px !important;
	 }
	 .wp-color-result:hover{
		  /*background-color: transparent;*/
		}
	 .color_for_this{
		  height: 24px;
		  top: 8px;
		  /*position: relative;*/
		  width: 35px;
		  left: 5px;
		  display: inline-block;
	 }
	 #repeat_rate_col .wp-picker-container .wp-picker-container > a{
		  left: -6px;
	 }
	 
	.wd_color_input label{
		display: inline-block;
	}
	 </style>
		<p>
		  <label for="<?php echo $this->get_field_id('title'); ?>"><?php echo __("Title:", "sauron"); ?></label>
		  <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $instance['title']; ?>"/>
		</p>
		
		<p>
		  <label for="<?php echo $this->get_field_id('percent_type'); ?>"><?php echo __("Percent Type:", "sauron"); ?></label>
		  <input type="radio" name="<?php echo $this->get_field_name('percent_type'); ?>" value="horizontal" <?php if($percent_type=="horizontal" || $percent_type=="") echo 'checked="checked"'; ?>><?php echo __("Horizontal", "sauron"); ?> &nbsp;&nbsp;&nbsp;
		  <input type="radio" name="<?php echo $this->get_field_name('percent_type'); ?>" value="circle" <?php if($percent_type=="circle" || $percent_type=="") echo 'checked="checked"'; ?>><?php echo __("Circle", "sauron"); ?>
		</p>
		
		<p>
			<label for="<?php echo $this->get_field_id('width'); ?>"><?php echo __("Width:", "sauron"); ?></label>
			<input id="<?php echo $this->get_field_id('width'); ?>" name="<?php echo  $this->get_field_name('width'); ?>" value="<?php echo $instance['width'];?>" size="4">px</input>
		</p>
		
		<p>
			<label for="<?php echo $this->get_field_id('height'); ?>"><?php echo __("Height:", "sauron"); ?></label>
			<input id="<?php echo $this->get_field_id('height'); ?>" name="<?php echo  $this->get_field_name('height'); ?>" value="<?php echo $instance['height'];?>" size="4">px</input>
		</p>
		
		<p>
			<label for="<?php echo $this->get_field_id('percent'); ?>"><?php echo __("Percent:", "sauron"); ?></label>
			<input id="<?php echo $this->get_field_id('percent'); ?>" name="<?php echo  $this->get_field_name('percent'); ?>" value="<?php echo $instance['percent'];?>" size="4">%</input>
		</p>
			
		<div class="wd_color_input">
			<label for="<?php echo $this->get_field_id('completed_color'); ?>"><?php echo __("Completed color:", "sauron"); ?></label>
			<div class="color_for_this" style="background-color: #<?php echo str_replace('#','',$instance['completed_color']);?>; left: 9px;">
				<input id="<?php echo $this->get_field_id('completed_color'); ?>" class="wdwt_percent_color_input wp-color-picker"  value="<?php echo $instance['completed_color'];?>" name="<?php echo  $this->get_field_name('completed_color'); ?>" type="text" ></input>
			</div>
		</div>
		<div class="wd_color_input">
			<label for="<?php echo $this->get_field_id('to_do_color'); ?>"><?php echo __("To do color:", "sauron"); ?></label>
			<div class="color_for_this" style="background-color: #<?php echo str_replace('#','',$instance['to_do_color']);?>; left: 41px;">
				<input id="<?php echo $this->get_field_id('to_do_color'); ?>" class="wdwt_percent_color_input wp-color-picker"  value="<?php echo $instance['to_do_color'];?>" name="<?php echo  $this->get_field_name('to_do_color'); ?>" ></input>
			</div>
		</div>
		<div class="wd_color_input">
			<label for="<?php echo $this->get_field_id('percent_text_color'); ?>"><?php echo __("Percent text color:", "sauron"); ?></label>
			<div class="color_for_this" style="background-color: #<?php echo str_replace('#','',$instance['percent_text_color']);?>">
				<input id="<?php echo $this->get_field_id('percent_text_color'); ?>" class="wdwt_percent_color_input wp-color-picker"  value="<?php echo $instance['percent_text_color'];?>" name="<?php echo  $this->get_field_name('percent_text_color'); ?>" ></input>
			</div>
		</div>
		<p>
			<label for="<?php echo $this->get_field_id('time'); ?>"><?php echo __("Time:", "sauron"); ?></label>
			<input id="<?php echo $this->get_field_id('time'); ?>" name="<?php echo  $this->get_field_name('time'); ?>" value="<?php echo $instance['time'];?>" size="4" >second</input>
		</p>
	<?php	
		}

}// end web_buis_adv class
add_action('widgets_init', create_function('', 'return register_widget("sauron_percent");'))
?>