/*

<div class="timer">
	<ul>
		<li class="deal-js-days"></li>
		<li class="deal-js-hours"></li>
		<li class="deal-js-minutes"></li>
		<li class="deal-js-seconds"></li>
</div>

<script>
	$(function(){ $(.timer).dealtimer({ 
		utc_finish:12345678,
		url_utc_diff:'/urltojson'
	}) });
</script>

request url_utc_diff: send:{ utc:12345678 }, return:{ utc_diff:123 }

*/

if (typeof(dealpeck)=='udefined') var dealpeck= { utc_diff:null };

;(function($) {

	$.widget('dealp.dealptimer', {
	
		options:{
			utc_finish: null,
			utc_diff: null,
			css_finish: 'finished',
			css_running: 'running',
			selector_days: '.deal-js-days',
			selector_hours: '.deal-js-hours',
			selector_minutes: '.deal-js-minutes',
			selector_seconds: '.deal-js-seconds',
			url_utc_diff: '/test/dealtimer_utc_diff.json.json'
		},

		_init:function(){
			var utc_finish = $('input[name=utc_finish]:first',this.element).val();
			if (utc_finish) this.options.utc_finish = utc_finish;
			if (!this.options.utc_finish) return this;
			this.options._days = $(this.options.selector_days, this.element);
			this.options._hours = $(this.options.selector_hours, this.element);
			this.options._minutes = $(this.options.selector_minutes, this.element);
			this.options._seconds = $(this.options.selector_seconds, this.element);
			if (dealpeck.utc_diff !== null) this.options.utc_diff = dealpeck.utc_diff;
			if (this.options.utc_diff === null) this.load_utc_diff();	else this.start();
			return this;
		},
		
		load_utc_diff:function(){
			var self = this;
			$.ajax({
				url: this.options.url_utc_diff,
				type:'GET',
				data: { utc:(new Date()).getTime() },
				dataType: 'json',
				success:function(data){
					self.options.utc_diff = parseInt(data.utc_diff,10);
					dealpeck.utc_diff = self.options.utc_diff;
					//self.start();
				}
			});
			return this;
		},
					 
		start:function(){
			if (this.options.utc_diff==null) return this;
			var self = this;
			this.options._timer = setInterval(function(){ self.step(); }, 500);
			return this;
		},
		
		step:function(){
			//console.log(this.options.utc_finish);
			//console.log(this.options.utc_diff);
			//var ms_to_finish = this.options.utc_finish - this.options.utc_diff - (new Date()).getTime();
			var now = new Date()
			var ms_to_finish = this.options.utc_finish - now.getTime();
			delete now;
			if (ms_to_finish<=0) return this.finish();
			var days = Math.floor(ms_to_finish/(1000*60*60*24));
			var days_ms = days*1000*60*60*24;
			var hours = Math.floor((ms_to_finish-days_ms)/(1000*60*60));
			var hours_ms = days_ms + hours*1000*60*60;
			var minutes = Math.floor((ms_to_finish-hours_ms)/(1000*60));
			var minutes_ms = hours_ms + minutes*1000*60;
			var seconds = Math.floor((ms_to_finish-minutes_ms)/(1000));
			$(this.options._days).html((days<10)? '0' + days : days);
			$(this.options._hours).html((hours<10)? '0' + hours : hours);
			$(this.options._minutes).html((minutes<10)? '0' + minutes : minutes);
			$(this.options._seconds).html((seconds<10)? '0' + seconds : seconds);
			$(this.element).removeClass(this.options.css_finish).addClass(this.options.css_running);
			return this;
		},
					 
		finish: function(){
			if (this.options._timer) clearTimeout(this.options._timer);
			$(this.element).removeClass(this.options.css_running).addClass(this.options.css_finish);
			$(this.options._days).html('00');
			$(this.options._hours).html('00');
			$(this.options._minutes).html('00');
			$(this.options._seconds).html('00');
			return this;
		}

	});

})(jQuery);