<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>OpenID Consumer</title>
<link href="/stylesheets/openid.css" rel="stylesheet" type="text/css"/>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/tabview/assets/skins/sam/tabview.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/imageloader/imageloader-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/tabview/tabview-min.js"></script>
<style type="text/css">
#MySpaceTabs {
margin:4em auto;
min-width:970px;
width:74.6em;
}
</style>
</head>
<body class="yui-skin-sam">
<!-- <div id="navbar"> -->
<!-- <a href="http://code.google.com/appengine/"> -->
<!-- <img src="/static/appengine_button_noborder.gif" -->
<!-- style="vertical-align: middle" /></a> -->
<!-- </div> -->
<div id="header">
<a href="/"><img id ="openid-logo" alt="OpenID" src="/images/openid-logo.png" /></a> <br/> <br/>
<p id="title">MySpaceID "Combined Consumer" - Demonstrates usage of MySpaceID, OpenID/oAuth "hybrid" extension and MySpace REST APIs to fetch a MySpace user's data</p>
</div>
<div id="body">
<form method="post"
action='<%= url_for :action => 'start' %>'>
<%= token_tag %>
Enter your MySpaceID Below:
<table><tr><td>
<!-- You can also use http://stage-api.myspace.com below -->
<p><input type="text" name="openid_identifier" id="openid" size="50" value="http://openid.myspace.com/<VANITY_NAME_HERE>" />
<input type="submit" value="Get MySpace Data" /></p>
</td><td>
<% if flash[:alert] %>
<span class='cancel'>
<%= h(flash[:alert]) %>
</span>
<% end %>
<% if flash[:error] %>
<span class='error'>
<%= h(flash[:error]) %>
</span>
<% end %>
<% if flash[:success] %>
<span class='success'>
<%= h(flash[:success]) %>
</span>
<% end %>
</td></tr></table>
</form>
</div>
<% if @profile_data %>
<div id="MySpaceTabs" class="yui-navset">
<ul class="yui-nav">
<li id='profileTab' class="selected"><a href="#tab1"><em>Profile</em></a></li>
<li id='friendsTab'><a href="#tab2"><em>Friends</em></a></li>
<li id='albumsTab'><a href="#tab3"><em>Albums</em></a></li>
</ul>
<div class="yui-content">
<div id='profileTabContent'>
<p><img src="<%= @profile_data['basicprofile']['image'] %>" /></p>
<p>Profile URL : <a href="<%= @profile_data['basicprofile']['webUri'] %>"> <%= @profile_data['basicprofile']['webUri'] %></a><p>
<p>Name: <strong> <%= @profile_data['basicprofile']['name'] %> </strong> </p>
<p>Gender: <strong> <%= @profile_data['gender'] %> </strong> </p>
<p>Age: <strong> <%= @profile_data['age'] %> </strong> </p>
<p>Marital Status: <strong> <%= @profile_data['maritalstatus'] %> </strong> </p>
<p>City: <strong> <%= @profile_data['city'] %> </strong> </p>
<p>Postal Code: <strong> <%= @profile_data['postalcode'] %> </strong> </p>
<p>Region: <strong> <%= @profile_data['region'] %> </strong> </p>
<p>Country: <strong> <%= @profile_data['country'] %> </strong> </p>
</div>
<div id='friendsTabContent'>
<% for friend in @friends_data['Friends'] %>
<a href='<%=friend['webUri']%>'>
<img id='<%=friend['name']%>' title='<%= friend['name'] %>' border='0'/>
</a>
<% end %>
</div>
<div id='albumsTabContent'>
<p>Photos Content Here<p>
</div>
</div>
</div>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("MySpaceTabs");
// Friends Tab Image Loader
var tabTwoImageGroup = new YAHOO.util.ImageLoader.group('friendsTab', 'mouseover');
<% for friend in @friends_data['Friends'] %>
tabTwoImageGroup.registerSrcImage('<%= friend['name'] %>', '<%= friend['image'] %>');
<% end %>
tabTwoImageGroup.addTrigger('friendsTab', 'focus');
tabTwoImageGroup.name = 'tab_two_group';
// Albums Tab Image Loader
</script>
<% end %>
</body>
</html>