var KluunTwitter = KluunTwitter || function() {
	var page = 1;
	var tweets = [];
	var index = 0;
	var time = 500;
	var animating = false;

	function linkify(t) {
		if (!t) return t;

		t = t.replace(/((https?\:\/\/|ftp\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi, function(url) {
			var nice = url;
			if (url.match('^https?:\/\/')) nice = nice.replace(/^https?:\/\//i, '');
			else if (url.match('^ftp:\/\/')) nice = nice.replace(/^ftp:\/\//i, '');
			else url = 'http://' + url;
			return '<a href="'+ url +'" target="_blank">'+ nice.replace(/^www./i,'') +'</a>';
		});

		return t;
	}

	function padNumber(n) {
		return (n < 10) ? "0"+n : n;
	}

	function getTweets(n, handler) {
		if (tweets.length > n) {
			handler();
		} else {
			$("#twitter-image").attr({src: "images/kluun-twitter-laden.png"});

			$.getJSON("http://twitter.com/statuses/user_timeline/22975251.json?callback=?&count=10&page=" + page++, function(r) {
				$(r).each(function() {
					var d = new Date(Date.parse(this.created_at));//new Date(this.created_at);
					var s = "";
					if (!isNaN(d.getDate())) {

						s = d.getDate() + "-" + (d.getMonth()+1) + "-" + d.getFullYear() + " " + padNumber(d.getHours()) + ":" + padNumber(d.getMinutes());
						}
						else {s = this.created_at;}


					if (this.text.charAt(0) !== "@") tweets.push({text: this.text, date: s});
				});

				// tweets nog sorteren op datum?

				if (tweets.length > n) {$("#twitter-image").attr({src: "images/kluun-twitter.png"}); handler();}
				else getTweets(n, handler);

				//showTweets();
				//handler();
			});
		}
	}

	function showTweets() {
		if (index < 0) index = 0;
		if (index+3 > tweets.length) getTweets();
		else {
			$("#twitterbericht").empty();


			for (var i = index; i < index+3 && i < tweets.length; i++) {
				var d = $("<div>");
				$("<p>").append( $("<span>").html(linkify(tweets[i].text)).addClass("qtitel").css({"font-size": 8+(2-i+index)*8 + "pt", "line-height": 8+(2- i+index)*8 + "pt"}) ).appendTo(d);
				//$("<p><span class=\"qtitel\">"+linkify(tweets[i].text)+"</span></p>").appendTo("#twitterbericht");
				$("<p>").append( $("<span>").html(tweets[i].date + " ").addClass("tweet").css({"font-size": 6+(2-i+index)*2 + "pt", "line-height": 6+(2- i+index)*2 + "pt"} )).appendTo(d);
				$("#twitterbericht").append(d);
			}
		}
	}

	function resizeBox() {
		var total = 0;
		$("#twitterbericht div").each(function() {
			total += $(this).height();
		});

		$("#twitterbericht").animate({height: total + 70 + "px"}, time);//alert(total);
		checkArrow();
	}

	function checkArrow() {
		if (index > 0) $("#twittervorige").css({opacity: 1});
		else $("#twittervorige").css({opacity: 0.3});
	}

	return {
		InitOld: function() {
			$.getJSON("http://twitter.com/statuses/user_timeline/22975251.json?callback=?&count=3&page=3", function(r) {
				//$(r).map(function() {
				//	return $("<span class=\"qtitel\">" + linkify(this.text) + "</span><p><a href=\"http://twitter.com/ngagemedia/status/" + this.id  + "\" target=\"_blank\">twitter.com/ngagemedia</a></p>");
				//}).appendTo("#twitter");

				//var useStatus = 0;
				//while (r[useStatus].text.charAt(0) == "@" && useStatus < r.length) {useStatus++;}
				//if (useStatus == 10) useStatus = 0;

				$("#twitterbericht").empty();

				$(r).each(function() {
					$("<p>").append( $("<span>").html(linkify(this.text)).addClass("qtitel") ).appendTo("#twitterbericht");
					//$("<p>").append( $("<span>").html(s + " ").addClass("tweet").append( $("<a>").attr({"href": "http://twitter.com/kluun", "target": "_blank"}).text("reageer op twitter.com/kluun") )).appendTo("#twitterbericht");
				});



				//var d = new Date(r[useStatus].created_at);
				//var s = d.getDate() + "-" + (d.getMonth()+1) + "-" + d.getFullYear() + " " + padNumber(d.getHours()) + ":" + padNumber(d.getMinutes());

				//$("<p>").append( $("<span>").html(linkify(r[useStatus].text)).addClass("qtitel") ).appendTo("#twitterbericht");
				//$("<p>").append( $("<span>").html(s + " ").addClass("tweet").append( $("<a>").attr({"href": "http://twitter.com/kluun", "target": "_blank"}).text("reageer op twitter.com/kluun") )).appendTo("#twitterbericht");
				//$("<span class=\"qtitel\">" + linkify(this.text) + "</span><span class=\"tweet\"><a href=\"http://twitter.com/ngagemedia/status/" + this.id  + "\" target=\"_blank\">twitter.com/ngagemedia</a></p>");
			});
		},

		Init: function() {
			//$("#twitterbericht").empty();
			resizeBox();

			$("#twitterbericht").before(
				$("<div class='tw_before'><a id=\"twittervorige\" style='width: 100px; height: 25px;'></a></div>").css({opacity: 0.3}).attr({href: "#"}).click(function(event) {
					event.preventDefault();
					$(this).blur();

					if (!animating && index > 0) {
						animating = true;
						getTweets(index-1, function() {
							var d = $("<div>").css({"opacity": 0});
							$("<p>").append( $("<span>").html(linkify(tweets[index-1].text)).addClass("qtitel").css({"font-size": "24pt", "line-height": "24pt"}) ).appendTo(d);
							$("<p>").append( $("<span>").html(tweets[index-1].date + " ").addClass("tweet").css({"font-size": "10pt", "line-height": "10pt"})).appendTo(d);
							$("#twitterbericht").prepend(d);
							$("#twitterbericht div").css({top: "-" + ($("#twitterbericht div").eq(0).height()+13) + "px"});


							//var y = $("#twitterbericht div").eq(0).height();

							$("#twitterbericht div").eq(0).animate({
								//marginTop: "0px",
								top: 0,
								opacity: 1
							}, time);


							$("#twitterbericht div").eq(1).animate({top: "0px"}, time).find("p span").eq(0).animate({
								fontSize: "16pt",
								lineHeight: "16pt"
							}, time).parent().next().find("span").animate({
								fontSize: "8pt"
							}, time);

							$("#twitterbericht div").eq(2).animate({top: "0px"}, time).find("p span").eq(0).animate({
								fontSize: "8pt",
								lineHeight: "8pt"
							}, time).parent().next().find("span").animate({
								fontSize: "6pt"
							}, time);

							/*$("#twitterbericht div").eq(3).animate({opacity: 1}).find("p span").eq(0).animate({
								fontSize: "8pt",
								lineHeight: "8pt"//,
								//"opacity": 1
							}, time).parent().next().find("span").animate({
								fontSize: "6pt"
							}, time);*/


							$("#twitterbericht div").eq(3).animate({
								top: "0px",
								"opacity": 0
							}, time, function() {
								animating = false;
								$(this).remove();
								$("#twitterbericht div").css({top: 0});

								resizeBox();
							});

							index--;
						});
					}
				})
			);

			$("#twitterbericht").after(
				$("<div class='tw_after'><a style='height: 25px; width: 100px;'></a></div>").attr({href: "#"}).click(function(event) {
					event.preventDefault();
					$(this).blur();



					if (!animating) {
						animating = true;
						getTweets(index+3, function() {
							var d = $("<div>").css({"opacity": 0});
							$("<p>").append( $("<span>").html(linkify(tweets[index+3].text)).addClass("qtitel").css({"font-size": "6pt", "line-height": "6pt"}) ).appendTo(d);
							$("<p>").append( $("<span>").html(tweets[index+3].date + " ").addClass("tweet").css({"font-size": "4pt", "line-height": "4pt"}) ).appendTo(d);
							$("#twitterbericht").append(d);


							var w = $("#twitterbericht div").eq(3).height();

							var y = $("#twitterbericht div").eq(0).height();

							$("#twitterbericht div").eq(1).animate({top: "-" + (y+13) + "px"}, time).find("p span").eq(0).animate({
								fontSize: "24pt",
								lineHeight: "24pt"
							}, time).parent().next().find("span").animate({
								fontSize: "10pt"
							}, time);

							$("#twitterbericht div").eq(2).animate({top: "-" + (y+13) + "px"}, time).find("p span").eq(0).animate({
								fontSize: "16pt",
								lineHeight: "16pt"
							}, time).parent().next().find("span").animate({
								fontSize: "8pt"
							}, time);

							$("#twitterbericht div").eq(3).animate({opacity: 1,top: "-" + (y+13) + "px"}, time).find("p span").eq(0).animate({
								fontSize: "8pt",
								lineHeight: "8pt"//,
								//"opacity": 1
							}, time).parent().next().find("span").animate({
								fontSize: "6pt"
							}, time);


							$("#twitterbericht div").eq(0).animate({
								//marginTop: "-" + (y+13) + "px",
								//top: "-" + (y+13) + "px",
								"opacity": 0
								,top: "-" + (y+13) + "px"
							}, time, function() {
								animating = false;
								$(this).remove();
								$("#twitterbericht div").css({top: 0});

								resizeBox();
							});

							index++;
						});
					}

					//index++;
					//showTweets();
				})
			);

			$("#twitterbericht").after( $("<a>").css({background: "black", fontSize: "10pt"}).attr({"href": "http://twitter.com/kluun", "target": "_blank"}).text("reageer op twitter.com/kluun") );

			getTweets(2, function(){
				$("#twitterbericht").empty();

				for (var i = 0; i < 3; i++) {
					var d = $("<div>");
					$("<p>").append( $("<span>").html(linkify(tweets[i].text)).addClass("qtitel").css({"font-size": 8+(2-i+index)*8 + "pt", "line-height": 8+(2- i+index)*8 + "pt"}) ).appendTo(d);
					//$("<p><span class=\"qtitel\">"+linkify(tweets[i].text)+"</span></p>").appendTo("#twitterbericht");
					$("<p>").append( $("<span>").html(tweets[i].date + " ").addClass("tweet").css({"font-size": 6+(2-i+index)*2 + "pt", "line-height": 6+(2- i+index)*2 + "pt"})).appendTo(d);
					$("#twitterbericht").append(d);

					resizeBox();
				}
			});
			//showTweets();
		}
	}
}();

$(KluunTwitter.Init);