var PlocTones = function() {
	var searchstring   = '#plocnoise';
	var refreshAfter   = 5000;
	var growDuration   = 1000;
	var fadeInDuration = 1000;
	var maxPages       = 10;

	var curPage;
	var winners = {};
	var objs = {};
	var invisibles = {};
	var updateEachSecond = {};
	var tmpWinners = {};
	var updateCounter = 0;
	var maxBeforeId = 0;
	var firstId = 0;
	var refreshUrl;
	var wonRefreshUrl;
	var first = true;
	var cboxOptions = {
		maxWidth: '80%',
		maxHeight: '80%'
	};
	function init() {
		if(document.frm && document.frm.search)
			document.frm.search.value = searchstring;
	}
	function search(txt) {
		searchstring = txt;
	}
	function format(diff) {
		var txt;
		if(diff < 60)
			txt = '' + diff + ' SECOND' + (diff != 1 ? 'S' : '');
		else {
			diff = Math.floor(diff / 60);
			if(diff < 60)
				txt = '' + diff + ' MINUTE' + (diff != 1 ? 'S' : '');
			else {
				diff = Math.floor(diff / 60);
				if(diff < 24)
					txt = '' + diff + ' HOUR' + (diff != 1 ? 'S' : '');
				else {
					diff = Math.floor(diff / 24);
					txt = '' + diff + ' DAY' + (diff != 1 ? 'S' : '');
				}
			}
		}
		return txt;
	}
	function update() {
		var now = new Date().getTime();
		if(++updateCounter == 30) {
			updateCounter = 0;
			for(var i in objs) {
				var obj = objs[i];
				var diff = Math.floor((now - obj.created) / 1000);
				var txt = format(diff);
				var div = jQuery('#lbl' + obj.id);
				if(div)
					div.empty().append('<nobr>' + txt + '</nobr>');
			}
		} else {
			for(var i in updateEachSecond) {
				var obj = updateEachSecond[i];
				var diff = Math.floor((now - obj.created) / 1000);
				var txt = format(diff);
				var div = jQuery('#lbl' + obj.id);
				if(div)
					div.empty().append('<nobr>' + txt + '</nobr>');
				if(diff >= 60)
					delete updateEachSecond[i];
			}
		}
		setTimeout(update, 1000);
	}
	function open(id) {
		var obj = objs[id];
		jQuery.fn.colorbox({href:'images/loading.gif', maxWidth:'90%', maxHeight:'90%'});
		var text = '"' + obj.text.replace(/(http:\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a target="_blank" href="$1">$1</a>') + '" <span class="user">' + obj.from_user + '</span>';
		cboxOptions.href = obj.bigurl;
		cboxOptions.title = text;
		jQuery.fn.colorbox(cboxOptions);
	}
	function visible(element) {
		return !(jQuery(window).height() + jQuery(window).scrollTop() <= jQuery(element).offset().top ||
				jQuery(window).scrollTop() >= jQuery(element).offset().top + jQuery(element).height() ||
				jQuery(window).width() + jQuery(window).scrollLeft() <= jQuery(element).offset().left ||
				jQuery(window).scrollLeft() >= jQuery(element).offset().left + jQuery(element).width());
	}
	function makeWinner(user, profileImageUrl, id, after) {
		var img = jQuery('<img/>');
		if(profileImageUrl)
			img.attr('src', profileImageUrl);
		var div = jQuery('<div/>').addClass('user').append(user);
		if(after)
			div = div.after(after);
		var txt = jQuery('<div/>').addClass('text').append('<center><strong></strong><br />We hebben <br />een winnaar!</strong><br /><br /></center>');
		var inner = jQuery('<div/>').append(txt).append(div).append(img).hide();
		var outer = jQuery('<div/>').attr('rel', '#a' + winners[id].winner).addClass('winner').mouseover(function() { jQuery(jQuery(this).attr('rel')).css({'border-color':'#ffffff'}); } ).mouseout(function() { jQuery(jQuery(this).attr('rel')).css({'border-color':'#223F43'}); } ).append(inner);
		outer.animate({'width':130}, growDuration, function() {
		inner.css({'opacity':0}).show().animate({'opacity':1}, fadeInDuration);
		});
		if(winners[id].winner != id)
			tmpWinners[winners[id].winner] = { image: img, user: div };
		winners[id].placed = true;
		return outer;
	}
	function add(url, result, after) {
		var date = new Date(result.created_at).getTime();
		result.created = date;
		var now = new Date().getTime();
		var diff = Math.floor((now - date) / 1000);
		var txt = format(diff);
		if(winners[result.id])
			maxBeforeId = Math.max(maxBeforeId, winners[result.id].before);
		var lbl = jQuery('<div/>').addClass('label').attr('id', 'lbl' + result.id).append('<nobr>' + txt + '</nobr>').css({'opacity':0.0}).hide();
		var img = jQuery('<img/>').attr('original', url).hide();
		jQuery(img).error(function() {
			jQuery('<div/>').attr('id', 'e' + result.id).addClass('error').append('Picture<br />temporarily<br />unavailable').insertAfter(jQuery(this)).css({'opacity':0}).animate({'opacity':1}, fadeInDuration);
		});
		jQuery(img).load(function() {
			jQuery(this).removeAttr('width').removeAttr('height').css({'width':'', 'height':''});
			var width = jQuery(this).width();
			var height = jQuery(this).height();
			var aspect = width / height;
			var newLeft, newTop, newWidth, newHeight;
			if(aspect < 1) {
				newWidth = 130;
				newHeight = Math.round(newWidth / aspect);
				newLeft = 0;
				newTop = (134 - newHeight) >> 1;
			} else {
				newHeight = 134;
				newWidth = Math.round(newHeight * aspect);
				newTop = 0;
				newLeft = (130 - newWidth) >> 1;
			}
			jQuery(this).css({'margin-left':newLeft, 'margin-top':newTop, 'width':newWidth, 'height':newHeight, 'opacity':0}).show().animate({'opacity':1}, fadeInDuration);
		});
		var div = jQuery('<a/>').addClass('a').attr('id', 'a' + result.id).attr('user', result.from_user).mouseover(function() { jQuery(this).css({'border-color':'#4f6C70'}); }).mouseout(function() { jQuery(this).css({'border-color':'#223F43'}); }).attr('title', result.from_user).attr('href', 'javascript:PlocTones.open(' + result.id + ')').append(img).append(lbl);
		if(first) {
			first = false;
			jQuery('#loading').hide();
			jQuery('#join').mouseover(function() { jQuery(this).css({'border-color':'#4f6C70'}); }).mouseout(function() { jQuery(this).css({'border-color':'#223F43'}); }).show().animate({'width':130}, growDuration);
			resize();
		}
		if(after)
			div.insertAfter(after);
		else {
			firstId = result.id;
			div.insertAfter('#join');
		}
		after = div;
		if(visible(div)) {
			img.attr('src', img.attr('original'));
			div.animate({'width':130}, growDuration, function() {
				jQuery('#lbl' + result.id).show();
			});
		} else {
			invisibles[result.id] = { container: div, image: img };
			div.css({'width':130});
			jQuery('#div' + result.id).show();
		}
		objs[result.id] = result;
		if(diff < 60)
			updateEachSecond[result.id] = result;
		if(tmpWinners[result.id]) {
			tmpWinners[result.id].image.attr('src', result.profile_image_url);
			tmpWinners[result.id].user.append('<center><span class="user">' + result.from_user + '</span></center>').after('<div class="text"><a href="javascript:PlocTones.open(' + result.id + ')"><center>Bekijk inzending</center></a></div>');
			delete tmpWinners[result.id];
		}
		if(winners[result.id]) {
			var user = winners[result.id].winner == result.id ? '<span class="user">' + result.from_user + '</span>': '';
			var w = makeWinner(user, winners[result.id].winner == result.id ? result.profile_image_url : null, result.id);
			w.insertBefore(after);
		}
		return after;
	}
	function addWinners() {
		if(first) {
			first = false;
			jQuery('#loading').hide();
		}
		for(var i in winners) {
			if(!winners[i].placed) {
				var a = jQuery('#a' + winners[i].winner);
				var user = '<span class="user">' + a.attr('user') + '</span>';
				var profileImageUrl = a.attr('profile_image_url');
				var w = makeWinner(user, profileImageUrl, winners[i].before, '<div class="text"><a href="javascript:PlocTones.open(' + winners[i].winner + ')">View submission</a></div>');
				w.prependTo('#results');
			}
		}
	}
	function query(url, last) {
		jQuery.getJSON(wonRefreshUrl ? 'won/' + wonRefreshUrl + '&callback=?' : 'won/?callback=?', function(data) {
			wonRefreshUrl = data.refresh_url;
			jQuery.each(data.winners, function(i, winner) {
				winners[winner.before] = winner;
			});
			query2(url, last);
		});
	}
	function query2(url, last) {
		var nextUrl = url ? url : (refreshUrl ? refreshUrl : 'http://www.ortnipiks.nl/ploctones/plocnoise/?callback=?');
		var lastInsert = last;
		var first = url ? false : true;
		try {
			jQuery.getJSON(nextUrl, function(data) {
				try {
					if(first) {
						curPage = 0;
						if(data.refresh_url)
							refreshUrl = 'http://www.ortnipiks.nl/ploctones/plocnoise/' + data.refresh_url + '&callback=?';
						first = false;
					} else
						if(++curPage >= maxPages) {
							setTimeout(function() { query(); }, refreshAfter);
							return;
						}
					nextUrl = data.next_page;
					jQuery.each(data.results, function(i, result) {
						var array;
						var url;
						url = 'http://www.ortnipiks.nl/ploctones/plocnoise/' + result.filename + '_thumb.jpg';
						result.bigurl = 'http://www.ortnipiks.nl/ploctones/plocnoise/' + result.filename + '_medium.jpg';
						lastInsert = add(url, result, lastInsert);
					});
					if(data.next_page)
						setTimeout(function() { query2('http://www.ortnipiks.nl/ploctones/plocnoise/' + nextUrl + '&callback=?', lastInsert); }, 10);
					else {
						addWinners();
						setTimeout(function() { query(); }, refreshAfter);
					}
				} catch(err) {
					addWinners();
					setTimeout(function() { query(); }, refreshAfter);
				}
			});
		} catch(err) {
			addWinners();
			setTimeout(function() { query(); }, refreshAfter);
		}
	}
	function scroll() {
		for(var i in invisibles) {
			var img = invisibles[i];
			if(visible(img.container)) {
				img.image.attr('src', img.image.attr('original'));
				delete invisibles[i];
			}
		}
	}
	function resize() {
		//jQuery('#join').css('left', 16 - (jQuery(window).width() % 143));
	}
	function help() {
		jQuery.fn.colorbox({width:600, height:370, inline:true, href:'#help'});
	}
	return {
		init   : init,
		search : search,
		open   : open,
		scroll : scroll,
		resize : resize,
		help   : help,
		query  : query,
		update : update
	}
}();
jQuery.noConflict();
jQuery(function() {
	jQuery(window).scroll(PlocTones.scroll);
	jQuery(window).resize(PlocTones.resize);
	if(location.search && location.search.substr(1).length) {
		var parts = location.search.substr(1).split('&');
		for(var i = 0; i < parts.length; i++) {
			var arr = parts[i].split('=');
			var key = arr[0];
			var val = arr[1];
			if(key == 'search')
				PlocTones.search(unescape(val));
		}
	}
	PlocTones.init();
	PlocTones.query();
	setTimeout(PlocTones.update, 1000);
});