/**
* the 'classic' ui, so-named because it was the first one.
*/

// *********************** original demo specific code *********************************

(function() {	
		
	var repaintFunction = function() { jsPlumb.repaintEverything(); };
	var resizeTimer = null;
    $(window).bind('resize', function() {
    	if (resizeTimer) clearTimeout(resizeTimer);
	    resizeTimer = setTimeout(repaintFunction, 100);
     });
	
	var _lang = function() {
		var l = window.navigator.language || navigator.userLanguage;
		return l.substring(0, 2);
	};
	
	jsPlumb.Defaults.Endpoint= ["Dot", {radius:5} ] ;
	jsPlumb.Defaults.EndpointStyle = {fillStyle:"#ccc"};
	jsPlumb.Defaults.EndpointHoverStyle = {fillStyle:"#ccc"};
	jsPlumb.Defaults.PaintStyle = { lineWidth: 1, strokeStyle:'#ccc' };
	jsPlumb.Defaults.HoverPaintStyle = { lineWidth: 3, strokeStyle:"#ffc171" };
	jsPlumb.Defaults.Connector = ["Bezier",{curviness:77}];
	jsPlumb.setDraggableByDefault(false);
	
	var HIGHLIGHT_PAINT_STYLE = { lineWidth: 2, strokeStyle:"#ffc171" },
	boxHighlight = "#ffc171",
	tagAnchors = [ [1,0.5,1,0],[0,0.5,-1,0]],
	userAnchors = [ [0,0.5,-1,0],[1,0.5,1,0]],
	curLang = _lang(),
	curIndex = 0,
	currentTweets = null,
	translate = function(text, callback, init) {
		var textLang = null;
		google.language.detect(text, function(result) {			
		    if (!result.error && result.language && curLang != result.language) {
		    	google.language.translate(text, "", curLang, function(result) {		    		
    				curIndex--;
            		if (result.translation) {
						var tagsAndUsersCorrected = result.translation.replace(/(@ )+/g, "@").replace(/(# )+/g, "#");
              			callback(tagsAndUsersCorrected, result.detectedSourceLanguage);		              			
            		}
					else callback(text, curLang);

            		if (curIndex == 0) init();
            	});
			}
			else {
				curIndex--;
				callback(text);
				if (curIndex == 0) init();
			}
		});	
	};	
	
	/**
	 * Callback for Twitter search call.  
	 * @param tweetSet
	 */
	var searchHandler = function(tweetSet) {		
		jsPlumb.reset();				
		$("#output").html(""); $("#users").html(""); $("#tags").html("");						
		var init = function() {			
			var ctx = $("#output")[0];
			$(".taggedUser").click(function(e) {			
				var html = $(this).html().trim();	
				TweetPlumb.search(html, true, e.ctrlKey);
				return false;
			});			
			$(".tag").click(function(e) {
				TweetPlumb.search($(this).html().trim(), true, e.ctrlKey);
				return false;
			});

			// should this be '@', or just a username?
			$(".from").click(function(e) {
				TweetPlumb.search("@" + $(this).html(), true, e.ctrlKey);
				return false;
			});						
			
			var _getAllConnections = function(id) {
				var cons = jsPlumb.getConnections({target:id }),
				cons2 = jsPlumb.getConnections({source:id });
				Array.prototype.push.apply(cons, cons2);
				return cons;
			};
	
			var _highlightTweet = function(id, hl) {
				var cons = _getAllConnections(id);
				for(var i = 0; i < cons.length; i++) {
					cons[i].setHover(hl);
					if (hl) {
						cons[i].source.addClass("hl");					
						cons[i].target.addClass("hl");
					} else {
						cons[i].source.removeClass("hl");					
						cons[i].target.removeClass("hl");
					}
				}

				if (hl) {
						$("#" + id).addClass("hl");					
						$("#" + id).addClass("hl");
					} else {
						$("#" + id).removeClass("hl");					
						$("#" + id).removeClass("hl");
					}

			};

			var unhl = function(id, ignoreOpacity) {
				_highlightTweet(id, false);
//				if(!ignoreOpacity) $(".aTweet, .aTag, .taggedUser").css("opacity","1");
			};
			var hl = function(id) {
				window.clearTimeout(hlint);
				if (hlid) unhl(hlid,true);
				hlid = null;
//				$(".aTweet").removeClass("hl");
				_highlightTweet(id, true);				
	//			$(".aTweet, .aTag, .taggedUser").not(".hl").css("opacity","0.4");
			};
			var hlint = null, hlid = null;
			
			$(".aTweet,#tagWrapper .tag,#users .taggedUser").hover(function() {
				hl($(this).attr("id"));
		//		$(this).css("opacity","1");
			}, function() {
				hlid = $(this).attr("id");
				hlint = window.setTimeout(function() { unhl(hlid); }, 100);
			});
						
			var _endpoints = {};
			var getEndpoint = function(elId, anchor) {
				var e = _endpoints[elId];
				if (!e) {
					e = jsPlumb.addEndpoint(elId, {anchor:anchor, maxConnections:-1});
					_endpoints[elId] = e;
				}
				return e;
			};
	
			currentTweets = tweetSet.getTweets();
			$.each(currentTweets, function(index) {
				var users = currentTweets[index].users.getData();
				var s = "tw_" + index;
				$.each(users, function(idx) {
					var t = "u_" + users[idx].substring(1),
					e = getEndpoint(s, userAnchors[0]),
					e2 = getEndpoint(t, userAnchors[1]),
					c = jsPlumb.connect({sourceEndpoint:e, targetEndpoint:e2});				
				});
		
				var tags = currentTweets[index].tags.getData();
				$.each(tags, function(idx) {
					var t = "t_" + tags[idx].substring(1),
					c = jsPlumb.connect({source:s,target:t,anchors:tagAnchors});					
				});
			});				
			
			if (TweetPlumb.isTranslateAutomatically()) {
				$(".langButtons").show();
				$(".langButtons span").click(function() {
					var s = $(this).attr("data-s");
					var h = $(this).attr("data-h");
					$("#" + s).show();$("#" + h).hide();
					$(this).siblings().show();
					$(this).hide();
					jsPlumb.repaint($(this).attr("data-i"));
				});
			} else {
				$(".langButtons").hide(); 
			}
			
			jsPlumb.repaintEverything();
		};
	
		// process users (page specific)
		var users = tweetSet.users.getDataInOrder();
		for (var i = 0; i < users.length; i++)
			$("#users").append(tmpl("user_tmpl", {user:users[i][1], index:i}));
	
		// now process tags (page specific)
		var tags = tweetSet.tags.getDataInOrder();
		for (var i = 0; i < tags.length; i++)
			$("#tags").append(tmpl("tag_tmpl", {tag:tags[i][1], index:i}));

		currentTweets = tweetSet.getTweets();
		var _doOne = function(index) {
			var tweet = currentTweets[index];
			tweet.data.language = curLang;
			tweet.data.translatedLanguage = curLang;
			if (TweetPlumb.isTranslateAutomatically()) {
				translate(tweet.data.text, function(result, language) {
					if (language) tweet.data.translatedLanguage = language.substring(0,2);
					tweet.data.originalText = tweet.data.text; 
					tweet.data.text = _expandEntities(result);
					var markup = markupTweet(tweet);
					$("#output").append(markup);
				}, init);
			} else {
				tweet.data.originalText = tweet.data.text;
				var markup = markupTweet(tweet);
				$("#output").append(markup);				
			}
		};
		curIndex = currentTweets.length;
		for(var index = 0; index < currentTweets.length; index++) {
			_doOne(index);			
		}	
		
		if (!TweetPlumb.isTranslateAutomatically()) init();
	};

	// click listener for recent search terms.
	$(".recent").live('click', function(e) {
		var h = $(this).html();			
		TweetPlumb.search(h, e.ctrlKey, e.ctrlKey);
		return false;
	});
	
	/**
	 * executes a search.
	 */
	var search = function( value, appendToRecent, appendToSearch ) {
		value = value || $("#txtInput")[0].value;
		if (appendToSearch) {
			value = TweetPlumb.getLastSearch() + " " + value;
		}
		if (value != null && value.length > 0) {
			$("#txtInput")[0].value = value;
			window.location.hash = encodeURIComponent(value);
			TweetPlumb.executeSearch(value, searchHandler);
			if (appendToRecent) {
				var recent = $("#recent .recent");
				for (var i = 0; i < recent.length; i++) {
					if (recent[i].innerHTML === value) return;
				}
				var evenodd = recent.length % 2 == 0 ? "even" : "odd";
				$("#recent").append(tmpl("recent_tmpl", {term:value, evenodd:evenodd}));
			}
		}
	};	
	
	/**
	* does markupTweet for a Tweet.  this involves adding anchors for users, tags and links.
	*/
	var markupTweet = function(tweet) {
		var h = tmpl("tweet_tmpl", tweet.data);
		h = h.replace(TweetPlumb.urlPattern, "<a title=\"click to view this link in a new tab\" target=\"_blank\" href=\"$1\">$1</a>");
		h = h.replace(TweetPlumb.userPattern, "<span title=\"click to search for $1. ctrl+click to add $1 to the current search.\" class=\"taggedUser\">$1</span>");
		h = h.replace(TweetPlumb.tagPattern, "<span title=\"click to search for $1. ctrl+click to add $1 to the current search.\" class=\"tag\">$1</span>");
		return h;
	};
	
	var appendTweet = function(markup) {
		$("#output").append(markup);			
	};
	
	TweetPlumb.search = search;	
	
	var _expandEntities = function(text) {
		return text.replace(/&#(\d+);/g, function() { return String.fromCharCode(arguments[1]); });
	};
	
})();
// ************************** end of page-specific code **********************************


// ************************** john resig's simple js templating **************************	
// ************************** also page-specific right now in fact. ***********************
// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};
 
  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :
     
      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
       
        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +
       
        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");
   
    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();