Ajax Polling

ajax polling

(function(exports, document, $) {

  var window = exports;

	var RecentGiftsController = function(mediator) {

		var mediator = mediator;
		var pollingProcess = null;
		var url = '/ajax/get-recent-gifts';
		var buffer = [];
		var bufferSize = 25;
		
		_.templateSettings = {
			interpolate: /\{\{=(.+?)\}\}/g,
			evaluate: /\{\{(.+?)\}\}/g
		};
		var el = $('#latest');
		
		
		var run = (function() {

			var poll = function() {
				$.ajax({
					url: url + '?num_gifts=' + bufferSize,
	      			cache: false,
	      			dataType: 'json',
	      			success: function(data) {
				        if (data.status == 'success') {
				        	var cards = data.cards;
				        	cards = cards.reverse();

				        	// not enough gifts in buffer
				        	if (cards.length < bufferSize) return;

				        	// initialize
				        	if (buffer.length == 0) {
				        		for (var i = 0; i < bufferSize; i++) {
				        			buffer.push(cards[i]);
				        		}
				        		
				        		startAnimation();

				        	// update
				        	} else {
				        		var latestHash = buffer[buffer.length - 1].hashcode;
				        		var j = bufferSize;
				        		while (j > 0 && cards[j - 1].hashcode != latestHash) {
				        			buffer.shift();
				        			buffer.push(cards[j - 1]);
				        			j--;
				        		}
				        	}

				        }

				        pollingProcess = setTimeout(poll, 3000);
				    },
					error: function(jqXRH, errorMsg) {
						//alert(jqXRH.responseText); //TODO: replace by error-handling function !!!
					}
			    });
			};

			var startAnimation = function() {
			  var template;
				
				template = _.template( $( "script.template" ).html() );
				
				var allRecentCards = {
					theCard : buffer
				}
				$('#latest-wrapper').prepend(template( allRecentCards ));
				
				var renderedCards = $('#latest .cell').length;
				
				$('#latest-wrapper').css({
					'width':(renderedCards*155)+75,
					'height': 120
				});
				

				var times = 20;
				//var allRecentGifts = $('#latest-wrapper .cell').length;
				//console.log(allRecentGifts);
				function animateGifts() {
					times--;
					//console.log(times);
					if(times === 0){
						clearInterval(loop);
					}			
					
					$('#latest-wrapper').animate({
						left: '-=157'
					}, function(){

						
					});
					}
					
				//}};

					
						var loop = setInterval(animateGifts, 4000);
						animateGifts();
				
				

				var pointer = 0;
				var tiles = el.find('.latest');

				var randomTileIndex = function() {
					return Math.floor(Math.random() * tiles.length);
				};

				var rotateTiles = function() {
					var randomIndex = randomTileIndex();
					var $randomTile = $(tiles[randomIndex]);
          
          var background_image_file = buffer[pointer].business_image;
          var background_image_style = "none";  // set default image here. this is displayed if no business_image is available.
          //if(background_image_file) background_image_style = 'url("' + background_image_file + '")';
          
					//$randomTile.find('p').html('<b>' + buffer[pointer].business_name + '</b><br /><small>' + buffer[pointer].business_address + '</small>');
					//$randomTile.find('.thumbnail .top').css({'background-image': background_image_style});
					$randomTile.find('.thumbnail .top').fadeIn('slow', function() {
						//$randomTile.find('.thumbnail .bottom').css({'background-image': background_image_style});
						$(this).hide();
						if (pointer++ >= tiles.length) pointer = 0;
						setTimeout(rotateTiles, 3000);
					});

				}

				var init = (function() {
					var numActive = 0;
					for (var i = 0; i < tiles.length; i++) {
						var $tile = $(tiles[i]);
            var background_image_file = buffer[i].business_image;
            var background_image_style = "none";
            var city_state = buffer[i].business_address;
    
						pointer++;
					}
					el.find('.thumbnail .bottom').fadeIn('slow', function() {
						numActive++;
						if (numActive == tiles.length) rotateTiles();
					});
				})();

			};

			poll();

		})();

		return {

		}

	};

	exports.RecentGiftsController = RecentGiftsController;

})(window, document, jQuery);