From 491f8bafd5d1a7978c476d3c6a74ea4cc0bf0460 Mon Sep 17 00:00:00 2001
From: clenclen <dannyphu@gmail.com>
Date: Thu, 3 Mar 2016 18:27:46 -0500
Subject: [PATCH] mashup

spotify + instagram
---
 index.html | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
diff --git a/index.html b/index.html
index 6524157..d05fd90 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,108 @@
 <html>
   <head>
     <title>Mashup</title>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+    <style>
+	    input {
+	    	margin: 10px; 
+	    }
+
+	    li{
+	    	list-style: none; 
+	    }
+
+	    .getimages {
+	    	width: 100px;
+	    	border : 1px solid black ;
+	    	cursor: pointer;
+	    	margin: 5px; 
+	    }
+
+	    .queriedImages {
+	    }
+
+    </style>
   </head>
+
   <body>
+ 	<input type = "text" class = "inputText"></input>
+ 	<button type = "submit"> Get images</button>
+ 	<button type = "reset"> Reset images</button>
+ 	<div class= "widget"></div>
+ 	<div class= "queriedImages"></div>
+
+
+  <script>
+	function loadImages(queryTag) {
+		$.ajax({
+		url: 'https://api.instagram.com/v1/tags/'+ queryTag +'/media/recent?client_id=ce95cb4e56c146c994457b48a839f6a8',
+		dataType: 'jsonp',
+		success: function(result) {
+		  for (var i = 0; i < result.data.length; i++) {
+		    var url = result.data[i].images.thumbnail.url;
+		    $('.queriedImages').append('<img class =\'EachImage\' src="' + url + '"/>');
+		  }
+		}
+		});
+	}
+
+	function searchArtist(query) {
+		$.ajax({
+			url:"https://api.spotify.com/v1/search?q="+ query +"&type=artist",
+			// Accept: application/json,
+			dataType: 'json',
+			success: function(result) {
+				console.log(result)
+				var name = result.artists.items[0].name
+				var id = result.artists.items[0].id
+				getArtistSongs(id)
+			}
+		});
+	}
+
+	function getArtistSongs(artistId) {
+		console.log("got the artistId:", artistId)
+		$.ajax({
+			url:"https://api.spotify.com/v1/artists/" + artistId + "/top-tracks?country=US",
+			dataType: 'json',
+			success: function(result) {
+		  		console.log("result", result)
+		  		
+		  		var track = result.tracks[0].id; 
+				widget(track)
+		  		// for (var i = 0; i < result.tracks.length; i++) {
+		  		// 	var track = result.tracks[i].id; 
+		  		// 	// console.log("track", track.name, track.id)
+		  		// 	widget(track)
+		  		// }
+
+			}
+		});
+	}
+
+	function widget(tracks) {
+		// var Playlist = $('<iframe src="https://embed.spotify.com/?uri=spotify:trackset:'+ tracks + 'frameborder="0" allowtransparency="true"></iframe>')
+		
+		var Playlist = $('<iframe src="https://embed.spotify.com/?uri=' + tracks +'" width="250" height="330" frameborder="0" allowtransparency="true"></iframe>')
+		var Playlist = $('<iframe class = \' widgetplay \' src="https://embed.spotify.com/?uri=spotify:track:' + tracks +'" frameborder="0" allowtransparency="true"></iframe>')
+
+		$(".widget").append(Playlist)	
+	}
+
+	$(document).ready(function() {	  	  
+		
+		$(":submit").click(function() {
+			var textValue = $(".inputText").val();
+			loadImages(textValue);
+			searchArtist(textValue) 	  
+		});
+
+		$(":reset").click(function() {
+			$(".inputText").val("");
+			$(".EachImage").remove(); 
+			$(".widgetplay").remove();
+		})
+	});
+  </script>
   </body>
 </html>
