// Setup a trim function String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g,""); } // Array implode function Array.prototype.implode = function(join) { var ret = this[0]; for (var i=1; ispan').text(locales[locale].name); $('#primary-locale li').removeClass('set'); $('#' + locale + '-primary').addClass('set'); }, locale_compare : function(locale) { var components = parent.location.hash.replace("#", '').split('|'); components[2] = locale; parent.location.hash = components.implode('|'); $('#secondary-locale>span').text(locales[locale].name); $('#secondary-locale li').removeClass('set'); $('#' + locale + '-secondary').addClass('set'); } } var cookie = { create : function(name,value,days){ if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; }, read : function(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }, erase : function(name) { cookie.create(name,"",-1); } }; var draw = function(phrase, start, level) { sets.level[level] = r.set(); spinner = r.image('/spinner.gif', start.x + 20, start.y - 8, 16, 16); if (permalink.length == 0){ var new_path = original_phrase; var remainder = phrase.replace(original_phrase, ''); if (remainder.length != 0) { new_path += ','+remainder.trim().replace(/\s+/g, ','); } set.path(new_path); } $('#phrase').html(phrase); document.title = phrase + ' :: What do you suggest?'; var suggest_callback = function (data, compare) { if (data[1].length == 0) { search(phrase.trim()); // Scroll to make search term centeredish $('body,html').animate({scrollLeft: Math.max(0, $('#canvas').offset().left + start.x - $(window).width()*0.9)}, 1000); return } spinner.remove(); // Get rid of search results completely $('#search-results').slideUp(300); // Adjust canvas width appropriately r.setSize(start.x + level_spacing*2 + canvas_padding, r.height); // Scroll to make things visible // BUG: r.width is reported as 1000 in IE regarless. $('body,html').animate({scrollLeft: Math.max(0, $('#canvas').offset().left + start.x + font_size/1.5*3 + level_spacing * 2 - $(window).width()*0.9)}, 1000); data = data[1]; if (compare) { compare = compare[1]; for (var i=0; i < compare.length; i++) { compare[i][4] = 'secondary'; data[data.length] = compare[i]; } } var next = []; var words = {}; var max = 0; var min = 0; // Organise the data for (var i = 0, ii = data.length, j = 0; i < ii; i++) { // Replace the original phrase (and anything before it) var response = data[i][0].substr(data[i][0].indexOf(phrase)+phrase.length); var split = response.split(" "); // Find the next word (or final portion of beginning word) if there is one. var word = ''; if (split[0] == '') { if (split[1] == undefined) { continue; } word = ' ' + split[1]; } else { word = split[0]; } // Find the results count for this suggestion. var count = data[i][1].replace(' results', '').replace(/,/gi, ''); // Check if this word has been suggested already. if (words[word] == undefined) { words[word] = j; next[j] = {word:word, count: Number(count), locale : (data[i][4]) ? 'secondary' : 'primary'}; if (min == 0) {min=count;} max = Math.max(max, count); min = Math.min(min, count); j++; } else { // Has been suggested before. var old_count = next[words[word]].count; next[words[word]].word = word next[words[word]].count += Number(count); if (data[i][4] && next[words[word]].locale != data[i][4]) { next[words[word]].locale = 'both'; } if (min == 0 || min == old_count) {min = next[words[word]].count;} max = Math.max(max, next[words[word]].count); } } // Variables var end = {x: start.x + level_spacing, y: Math.max(node_margin, start.y - (Object.size(next)-1)*node_margin)}; i = 0; var draw_path = function() { // Stop if there's nowhere to go. if (next[i] == undefined) { return; } // Normalize the result numbers var factor = (next[i].count - min)/(max-min); var line_weight = 9*factor+1; var p = r.path("M"+start.x+','+start.y+"L"+start.x+','+start.y); sets.all.push(p); sets.level[level].push(p); var path_string = "M"+start.x+','+start.y+'C'+(start.x+control_pt)+','+(start.y)+','+(end.x-control_pt)+','+end.y+','+end.x+','+end.y; var this_word = next[i].word; var attach_word = function() { var word = r.text(0, 0, next[i].word.toUpperCase()) .attr({ 'font-size':font_size, 'fill': (next[i].locale == 'both') ? '#fff' : '#222', x: end.x+font_size/1.5, y: end.y, "text-anchor": "start" }); // Resize stupidly long words. var this_font_size = font_size; while (word.getBBox().width > level_spacing) { this_font_size--; word.attr({'font-size': this_font_size} ); } // Run the getBBox function just once so we can use the values later. var wordBBox = word.getBBox(); var c = r.rect( wordBBox.x-font_size/1.5, wordBBox.y-font_size/3, wordBBox.width+font_size/1.5*2, wordBBox.height+font_size/3*2, font_size/2); word.toFront(); // Add new elements to some sets for selection later. sets.all.push(c, word, count); sets.level[level].push(c, word, count); var box_colour = ''; switch (next[i].locale) { case 'both' : box_colour = '#888'; break; case 'primary' : box_colour = '#cceeff'; break; default : box_colour = '#ffdddd'; } c.attr({fill: box_colour, "stroke":"none", "stroke-width": font_size/6}); word.hover(function() { this.animate({stroke: '#222', "stroke-width":font_size/8}, "bounce", 200); },function(){ this.animate({"stroke-width": 0}, 200); }); $(word.node).hover(function(){ $(this).css('cursor','pointer'); }) // Give the words their click listeners word.click(clicked); // Adjust the canvas height appropriately if (wordBBox.y+50 > r.height) { // Make the canvas taller. r.setSize(r.width, wordBBox.y+50); } // Load permalink if there's anything left if (permalink.length == 1) { // Clears permalink if there was only one level (because it will already have been loaded. permalink = []; } if (permalink[level+1] != undefined && permalink[level+1].toLowerCase().trim() == this_word.toLowerCase().trim()) { draw(phrase+this_word+' ', {x:word.getBBox().x+word.getBBox().width+font_size/1.5, y:word.getBBox().y+word.getBBox().height/2}, level+1); // We're at the end of permalink levels so clear it out and record that we've loaded it. if (level == permalink.length - 2) { permalink=[]; // Add some tracking if (pageTracker) { pageTracker._trackEvent('Load Permalink', phrase + this_word, unescape(parent.location.href)); } } } // Setup for next run end.y += node_margin*2; i++; // Run it again draw_path(); }; // Attach word p.attr({stroke:'#666'}); p.animate({path:path_string, "stroke-width": line_weight, 'stroke':'#666'}, 80, '<>', attach_word); var clicked = function() { fix_header(); var i = level+1; while (sets.level[i] != undefined){ sets.level[i].remove(); i++; } if (pageTracker) { pageTracker._trackEvent('Explore', this_word, phrase+this_word); } draw(phrase+this_word+' ', {x:this.getBBox().x+this.getBBox().width+font_size/1.5, y:this.getBBox().y+this.getBBox().height/2}, level+1); }; } draw_path(); } // $.getJSON callback $.getJSON("http://" + locales[get.locale()].domain + "/complete/search?q=" + phrase + '&callback=?', function (data) { if ( get.locale_compare() != 'default' ) { $.getJSON("http://" + locales[get.locale_compare()].domain + "/complete/search?q=" + phrase + '&callback=?', function (data2) { suggest_callback(data, data2); }); } else { suggest_callback(data); } }); }; // draw var fix_header = function() { $('header').css({'position':'fixed', 'left':'0'}); } var search = function (phrase) { // Setup the UI $('#search-results .result').slideUp(300, function(){ $(this).remove(); }); var $results = $('#search-results').slideDown(300); gs = null; gs = new google.search.WebSearch(); gs.setRestriction(google.search.Search.RESTRICT_EXTENDED_ARGS, {gl: get.locale()}); gs.setSearchCompleteCallback(this, function(){ var articles_html = ''; for (var i=0, ii=gs.results.length; i'+gs.results[i].title+' ' + gs.results[i].visibleUrl + ''; } spinner.remove(); $(articles_html).hide().appendTo($results).slideDown(300, function() { if ($('header').height() > $(window).height()) { $('header').css({ 'position': 'absolute', 'left' : $('header').offset().left, 'top' : $('header').offset().top }).animate({'top': 0}); } }); $('.result a').click(function(){ // Add some tracking if (pageTracker) { pageTracker._trackEvent('Exit', 'Search Result Clicked', $(this).attr("href")); } }); }); gs.execute(phrase); // Add some tracking if (pageTracker) { pageTracker._trackEvent('Search', phrase); } }; // search var seed = function(phrase) { // If there's no seed, don't bother if (phrase.trim().length == 0) return; // Tidy a few UI things up permalink = []; fix_header(); close_help(); $('#twitter-cta, footer, #share, #home-link').fadeIn(2000); sets.all.remove(); r.setSize(500,500); $('header h1').slideUp(); // Start drawing original_phrase = phrase; var start_phrase = r.text(0, 0, original_phrase.toUpperCase()) .attr({ 'font-size':font_size, 'fill':'#ddd', x: start.x+font_size, y: start.y, "text-anchor": "start" }); var origin = r.rect( start_phrase.getBBox().x-font_size, start_phrase.getBBox().y-font_size/3, start_phrase.getBBox().width+font_size*2, start_phrase.getBBox().height+font_size/3*2, font_size/2 ).attr({ fill: '#666', "stroke":"#000", "stroke-width": 0 }); start_phrase.toFront(); // Add it to a set sets.all.push(origin, start_phrase); draw(original_phrase, {x: origin.getBBox().x+origin.getBBox().width, y: origin.getBBox().y+origin.getBBox().height/2}, 0); } // Constructor code sets.level = []; r = Raphael('canvas', 500, 500); sets.all = r.set(); $('#form').submit(function(){ var seed_phrase = $('#start').val(); seed(seed_phrase); // Add some tracking if (pageTracker) { pageTracker._trackEvent('Seed', "Manual", seed_phrase); } return false; }); // Setup random word $('#word').click(function(){ // Get the words list for the relevant language - if available (fallback to english). var words = (seeds[locales[get.locale()].lang] == undefined || seeds[locales[get.locale()].lang].words == undefined) ? seeds['en'].words : seeds[locales[get.locale()].lang].words; var seed_phrase = words[Math.floor(Math.random() * (words.length))] + " "; $('#start').val(seed_phrase); seed(seed_phrase); // Add some tracking if (pageTracker) { pageTracker._trackEvent('Seed', "Random Word", seed_phrase); } return false; }); $('#letter').click(function(){ var seed_phrase = english_letters[Math.floor(Math.random() * (english_letters.length))]; $('#start').val(seed_phrase); seed(seed_phrase); // Add some tracking if (pageTracker) { pageTracker._trackEvent('Seed', "Random Letter", seed_phrase); } return false; }); $('#question').click(function(){ var seed_phrase = english_questions[Math.floor(Math.random() * (english_questions.length))] + " " + english_letters[Math.floor(Math.random() * (english_letters.length))]; $('#start').val(seed_phrase); seed(seed_phrase); // Add some tracking if (pageTracker) { pageTracker._trackEvent('Seed', "Random Question", seed_phrase); } return false; }); $('.track').click(function(){ var $this = $(this); if (pageTracker) { pageTracker._trackEvent('Exit', $this.attr("title"), $this.attr("href")); } }); $('#help-open').click(function(){ var $help = $('#help'); $('#help-close').remove(); $help.css({'position': 'fixed', 'right': 5, 'top': 5, 'left': 'auto'}); $help .append($('X').click(close_help)) .fadeIn(500, function(){ if ($help.outerHeight() > $(window).height()) { $help.css({'position': 'absolute', 'left': $help.offset().left, 'top': $help.offset().top, 'right': 'auto'}); } }); return false; }); $('#star-it').click(function(){ $.getJSON('/ajax.php', {action: 'star', permalink: unescape(parent.location.hash)}, function(data, status) { if (data.result == 'success') { $notify = $('
Starred
'); $notify.css({ position: 'fixed', top: '50px', right: '50px', 'text-align': 'center', width: '200px', color: '#fff', background: '#000', padding: '40px', "border-radius": '20px' }).hide().appendTo('body').show().fadeOut(function(){$(this).remove();}); } }); return false; }); $('.select').hover(function(){$('ol', this).show(); $(this).addClass('hover')}, function(){$('ol', this).hide(); $(this).removeClass('hover')}) $('.select ol li').click(function(){ // Figure out the country and the dropdown IDs var ids = this.id.split('-'); var new_locale = ids[0]; var locale_function = (ids[1] == 'primary') ? 'locale' : 'locale_compare'; if ( new_locale != get[locale_function]() ) { set[locale_function](new_locale); load_permalink(); $('.select ol').hide(); // Record the new comparison if (pageTracker) { pageTracker._trackEvent('Compare', locales[get.locale()].name + ' - ' + locales[get.locale_compare()].name, get.path(true)); } } }); var close_help = function() { $('#help').fadeOut(600, function() { $('#help').css({'position': 'fixed', 'right': 5, 'top': 5, 'left': 'auto'}); }); return false; }; $('#tweet-this').click(function(){ $.getJSON('http://json-tinyurl.appspot.com/?url='+escape(parent.location.href)+'&callback=?', function (data){ parent.location = 'http://twitter.com/home?status=' + escape($('#phrase').text() + ' ' + data.tinyurl + ' #wdys'); }); if (pageTracker) { pageTracker._trackEvent('Exit', "Tweet this", $('#phrase').text()); } return false; }); $(window).scroll(function(){ if ($('header').css('position') == 'absolute') { $('header').stop().animate({'left': $(window).scrollLeft()}); } var $help = $('#help'); if ($help.css('position') == 'absolute') { if ($help.offset().top > $(window).scrollTop()) { $help.queue(function(next){ $help.stop().animate({'left': $(window).scrollLeft()+$(window).width() - $help.outerWidth() - 5, 'top': $(window).scrollTop()+5}); next(); }); } else { $help.queue(function(next){ $help.stop().animate({'left': $(window).scrollLeft()+$(window).width() - $help.outerWidth() - 5}); next(); }); } } }); // Check for a selected locale if (!get.locale()) { set.locale('default'); // Also encode the path because chances are we're loading an old link set.path(get.path(false)); } else { set.locale(get.locale()); } if (!get.locale_compare()) { set.locale_compare('default'); } else { set.locale_compare(get.locale_compare()); } var load_permalink = function() { permalink = get.path().split(','); if (permalink[0].length == 0) { permalink = []; return; } $('#start').val(unescape(permalink[0])); seed(unescape(permalink[0])); } // Are we loading a permalink? if (get.path().length > 0) { load_permalink(); } else if (!cookie.read('returning')) { $('#help-open').click(); } cookie.create('returning', 'true', 365); $('#start').focus(); return { // Public vars // Public methods } };