Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
    <link href="music_universe_css.css" rel="stylesheet"  media="screen" />
    <script src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1-api.js"></script>
    <script type="text/javascript" src="jscript.js"></script>
</head>
<body>

    <table id="tableLogoEinput">
        <tr>
            <th>
                <table id="tableLogo">
                    <tr>
                        <th>
                            <img id= "logo" src="http://i1369.photobucket.com/albums/ag202/iKaelyn/GGG_zps5274496a.png" align="right">
                        </th>
                        <th>
                            <h1>Music Universe</h1>
                        </th>
                    </tr>
                </table>
            </th>
            <th>
                <input type="text" name="Username" placeholder="Username" id="search-text" required/>
                <button type="button" id="go"/>Go!</button>
    </th>
</tr>
<tr>
    <td>
        <button type="button" id="Artists"/>Artists</button>
</td>
<td>
<div id="status"></div>
<div id="tabela"></div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
    <button type="button" id="Friends"/>Common with Friends</button>
</td>
<td>
</td>
</tr>
</table>

</body>
</html>

/*jslint browser: true*/
/*global $, jQuery, alert*/

/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
/*global define */

// URL base para pedidos à API do Last.fm
var base_url = "http://ws.audioscrobbler.com/2.0/";

// chave API
var apikey = ****;

// URL base para pedidos à API do Last.fm - concatenar em cada pedido com nome do método a invocar e parâmetros do mesmo
var base_request = "http://ws.audioscrobbler.com/2.0/?api_key=****&format=json&method=";


// Nome do utilizador a analisar
var username;

// Array associativo com nome do utilizador como chave e valor de amizade como valor
var amigos = {};

var procura, getUserInfo, processUserInfo, log, logError, Artists, processArtists, ComumComAmigos, searching, searchAgain, getUserFriends, processUserFriends;


$(function () {
'use strict';
$("#go").click(procura);
});

function procura() {
'use strict';
username = $("#search-text").val();
searching();
getUserInfo();
}

function getUserInfo() {

'use strict';

var data = {
    api_key: apikey,
    method: "user.getInfo",
    user: username,
    format: "json"
};
$.get(base_url, data).done(processUserInfo).fail(logError("Loading information of " + username));

log("Loading information");
}

function processUserInfo(info) {

'use strict';

if (info.error) {

    log("User " + username + " doesn't exists!<br/>Try again...");
    searchAgain();
    return;
}

username = info.user.name;
var realname = info.user.realname,
    pais = info.user.country,
    age = info.user.age,
    genero = info.user.gender,
    playlist = info.user.playlists;


$("#tabela").html("Username: " + username + " <br>Name:" + realname + " <br> Country:" + pais + " <br> Age:" + age + " <br> Gender:" + genero + "<br>Playlists:" + playlist + "<br/><table></table>");

$("#Artists").click(Artists);
$("#Friends").click(ComumComAmigos);
getUserFriends();

}

function getUserFriends(pageNumber) {
'use strict';
var data = {
    api_key: apikey,
    method: "user.getFriends",
    user: username,
    page: pageNumber,
    format: "json"
};

$.get(base_url, data).done(processUserFriends).fail(logError("obter amigos do utilizador " + username));

console.log("Pedida informação de amigos do utilizador " + username + "...");


}


function Artists() {

'use strict';

var data = {
    api_key: apikey,
    method: "user.getInfo",
    user: username,
    format: "json"
};
$.get(base_url, data).done(processArtists).fail(logError("Loading information"));

log("Loading information");
}

function processArtists() {
'use strict';

}

function ComumComAmigos() {
'use strict';
}

function searching() {
'use strict';
$("#status").empty();
log("Procurando informação sobre " + username);
}

function searchAgain() {

'use strict';
$("#procura").show();
}


function log(message) {

'use strict';

$("#status").append(message + "<br/>");
}

function logError(actividade) {
'use strict';
return function (data) {
    $("#status").append("Error " + actividade + ": " + data.statusText + "<br/>");
};
}