$(document).ready(function() {
	
	var startWidth = 0;	//초기값
	var endWidth = 0;
	var marginWidth = 0; //100을 넘길경우 여분값
	var percent = 0;
	var full = $('.stickGraph').width();
	var cnt = 0;

	$('.stick').css('width','0'); //'width','0' -> '0'이면 막대그래프의 시작이 왼쪽에서 올라감
	
	$('.stickGraph').each(function() {
		var stick = $('.stick', this);
		percent = stick.attr('title');
		if(parseInt(percent) > 100){	//100%를 오버했을경우
			endWidth = full;
			var minusWidth = Math.round((percent * full) / 100) - full;
			
			$(this).after('<div class="count_noBox">'+ percent +'%</div>');
			
			stick.animate({
				'width' : endWidth
			}, 1000, function(){
				var overWidth = full - minusWidth;
				stick.animate({
					'width' : overWidth + "px"
				}, 1000);
				$(this).parent().css({	// 100%넘을 경우 부모 엘리먼트배경색변경
					'background-color' : '#d14836'
				});

			});
			
		}else{	//일반 100%미만인 경우
			endWidth = Math.round((percent * full) / 100);	//백분율
			
			$(this).after('<div class="count_noBox">'+ percent +'%</div>')
			
			stick.animate({
				'width' : endWidth
			}, 1000);
		
		}
	});

});







 
function initialize() {
	divId = 'sample';
	thedivId = document.getElementById(divId);
	var percentage = thedivId.innerHTML;
	thedivId.style.backgroundColor="#FF710E";
	brim(divId,0,parseInt(percentage.substr(0, percentage.length-1)));
}


function setWidth(o, start) {
	o.style.width = start+"%";
}


function brim(Id,start,percentage) {
	if (document.getElementById) {
		o = document.getElementById(Id);
		if (start <= percentage) {
			setWidth(o, start);
			start += 1;
			document.getElementById('percentage').innerHTML = (start -1) + "%";
			window.setTimeout("brim('"+Id+"',"+start+","+percentage+")", 10);
		}
	}
}