(function($) {

	jQuery.fn.progressBar = function( options ) {

		//Default values for progress_bar
		var defaults = {
			height : "30",
			backgroundColor : "#E0E0E0",
			barColor : "#F97352",
			targetBarColor : "#CCC",
			percentage : true,
			shadow : false,
			border : false,
			animation : false,
			animateTarget : false,
		};
		var settings = $.extend( {}, defaults, options );

		return this.each( function() {
			var elem = $( this );
			$.fn.replaceProgressBar( elem, settings );
		});
	};

	$.fn.replaceProgressBar = function( item, settings ) {
		var skill		= item.text();
		var progress	= item.data( 'width' );
		var target		= item.data ( 'target' );
		var bar_classes = ' ';
		var animation_class = '';
		var bar_styles	= 'background-color:' + settings.backgroundColor + ';height:' + settings.height + 'px;';
		if ( settings.shadow ) { bar_classes += 'shadow'; }
		if ( settings.border ) { bar_classes += ' border'; }
		if ( settings.animation ) { animation_class = ' animate'; }

		var overlay = '<div class="sonny_progressbar' + animation_class + '" data-width="' + progress + '">';
		overlay += '<p class="title">' + skill + '</p>';
		overlay += '<div class="bar-container' + bar_classes + '" style="' + bar_styles + '">';

		// Render the progress bar background
		overlay += '<span class="backgroundBar"></span>';

		// Display target bar only if set
		if ( target ) {
			if ( settings.animateTarget ) {
				overlay += '<span class="targetBar loader" style="width:' + target + '%;background-color:' + settings.targetBarColor + ';"></span>';
			}
			else {
				overlay += '<span class="targetBar" style="width:' + target + '%;background-color:' + settings.targetBarColor + ';"></span>';
			}
		}

		// Render the progress bar
		if ( settings.animation ) {
			overlay += '<span class="bar" style="background-color:' + settings.barColor + ';"></span>';
		}
		else {
			overlay += '<span class="bar" style="width:' + progress + '%;background-color:' + settings.barColor + ';"></span>';
		}

		// Render the percentage if enabled
		if ( settings.percentage ) {
			overlay += '<span class="progress-percent" style="line-height:' + settings.height + 'px;">' + progress + '%</span>';
		}

		// End
		overlay += '</div></div>';

		// Render the progress bar on the page
		$( item ).replaceWith( overlay );

	};

	var animate = function() {

		var doc_height = $(window).height();

		$( '.sonny_progressbar.animate' ).each( function() {
			var position = $( this ).offset().top;

			if ( ( $(window).scrollTop() + doc_height - 60 ) > position ) {
				var progress = $( this ).data( 'width' ) + "%";

				$( this ).removeClass( 'animate' );
				$( this ).find( '.bar' ).css('opacity', '0.1');

				$( this ).find( '.bar' ).animate({
					width : progress,
					opacity : 1
				}, 3000 );
			}

		});

	};

	// Looking for an animation element in the view
	$(window).scroll(function() {

		if ( $( '.sonny_progressbar.animate' ).length < 1 ) {
			return;
		}

		// If there is an animate element visible on the page, trigger the animation
		animate();
	});


})(jQuery);

/* Dashboard CIrcle Progress Bar Script */
// function makesvg(percentage, inner_text=""){
//
//   var abs_percentage = Math.abs(percentage).toString();
//   var percentage_str = percentage.toString();
//   var classes = ""
//
//   if(percentage < 0){
//     classes = "danger-stroke circle-chart__circle--negative";
//   } else if(percentage > 0 && percentage <= 30){
//     classes = "warning-stroke";
//   } else{
//     classes = "success-stroke";
//   }
//
//  var svg = '<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" xmlns="http://www.w3.org/2000/svg">'
//      + '<circle class="circle-chart__background" cx="16.9" cy="16.9" r="15.9" />'
//      + '<circle class="circle-chart__circle '+classes+'"'
//      + 'stroke-dasharray="'+ abs_percentage+',100"    cx="16.9" cy="16.9" r="15.9" />'
//      + '<g class="circle-chart__info">'
//      + '   <text class="circle-chart__percent" x="17.9" y="15.5">'+percentage_str+'%</text>';
//
//   if(inner_text){
//     svg += '<text class="circle-chart__subline" x="16.91549431" y="22">'+inner_text+'</text>'
//   }
//
//   svg += ' </g></svg>';
//
//   return svg
// }

(function( $ ) {

    $.fn.circlechart = function() {
        this.each(function() {
            var percentage = $(this).data("percentage");
            var inner_text = $(this).text();
            // $(this).html(makesvg(percentage, inner_text));
        });
        return this;
    };

}( jQuery ));


/* ----- Job List V3 Page On Click SIdebar ----- */
function openNav() {
document.getElementById("mySidenav").style.width = "300px";
    document.getElementById("mySidenav").style.marginLeft = "0px";
    document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "rgba(250,250,250,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
    document.getElementById("mySidenav").style.marginLeft= "-30px";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "white";
}