var w = window.innerWidth;
var h = w/2.5;
var webTitles = []; 
var random, draw, makeArray;

	var svg = d3.select("article")
		.append("svg")
		.attr({
			width: w*.9, 
			height: h*.9
		})
		.append("g") // g element will hold the svg text
	    .attr("transform", "translate(32," + (h / 2) + ")");
	
	//get latest Global Development articles from the Guardian - the title of the article is its 'webTitle'
	d3.jsonp("http://content.guardianapis.com/search?section=global-development&show-tags=all&ids=global-development&api-key=qcpra5vyaq7srabthtyvhhxs&callback=makeArray"); 
	
	  
		makeArray = function (data){
			for(var i = 0; i < data.response.results.length; i++){
					webTitles.push(data.response.results[i].webTitle);
			}
	
		 random = function (){
			random = new Array(webTitles[Math.floor(Math.random()*webTitles.length)]);	
			return random;
		}
		
		random(); //initial webTitle to show
		
		draw = function(random){
			 	
			var text = svg.selectAll("text")
					.data(random)
					.enter()
					.append("text")
					.text(function(d){
						return d;
					})
					.attr({
						"fill":"white", 
						"font-weight":700
					})
			 };
			 
		 	draw(random);
		 	
		 	setInterval(function() {
		 		svg.select("text").remove();
		 		var random2 = new Array(webTitles[Math.floor(Math.random()*webTitles.length)]);
		 		draw(random2);
			}, 2500);
				
		};