////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// COUNTER [ JQUERY REQUIRED ]
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*@cc_on _d=document;eval('var document=_d')@*/



//CONSTRUCT
function Counter(_selector/*selector*/, _src/*String*/, _dw/*Number*/, _dh/*Number*/, _digit/*Number*/){
	
	var self = this;
	this.target = $(_selector);
	this.src = _src;
	this.digit = _digit;
	this.sy = 0;
	this.th = 0;
	this.dw = _dw;
	this.dh = _dh;
	this.numbers;
	this.init();
}




//INIT
Counter.prototype.init = function(){
	
	var htmlTag = '';
	var self = this;
	
	this.target.append('<ul></ul>');
	for(var i=0; i<=this.digit; i++) htmlTag += '<li></li>';
	this.target.html(htmlTag);
	this.target.find('li').css({
		'display' : 'block',
		'position': 'relative',
		'width'   : self.dw+'px',
		'height'  : self.dh+'px',
		'float'   : 'left',
		'margin'  : '0',
		'padding' : '0',
		'overflow': 'hidden',
		'list-style' : 'none',
		'background-repeat' : 'no-repeat',
		'background-image':'url(' + self.src + ')',
		'background-position':'0px 0px'
	});
	this.target.find('li').last().css({ 'background-position':'0px '+ (-1*this.dh*11) +'px' });
	this.numbers = this.target.find('li');
	this.startListen();
}





//LISTENERS
Counter.prototype.startListen = function(){
	var self = this;
	this.onResize();
	this.onScroll();
	$(window).bind('scroll', function(e){ self.onScroll(); });
	$(window).bind('resize', function(e){ self.onResize(); });
}
Counter.prototype.stopListen = function(){
	var self = this;
	$(window).unbind('scroll');
	$(window).unbind('resize');
}





//RESIZE
Counter.prototype.onResize = function(e){
	this.th = $(document).height() - $(window).height();
	this.onScroll();
}





//SCROLL
Counter.prototype.onScroll = function(e){
	
	var self = this;
	this.sy = $(document).scrollTop();
	var percent = this.sy/this.th*100;
	if(!percent) percent = 0;
	percent = percent.toFixed(this.digit);
	var per_str = String(percent);
	
	for(var i=0; i<this.digit; i++){
		var gy = 10;
		var no = per_str.charAt(i);
		if(no != '.') gy = no; 
		$(self.numbers[i]).css({ 'background-position': '0px '+(self.dh*gy*-1)+'px'});
	}
	
}

