<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="T-shirt Mate" height="550" width="780" scrolling="true"
description="Help you to design your own favourite t-shirt, order at Teevn.com, share and discuss with your friends"
author="Nguyen Duy Hung"
author_email="hung2585@gmail.com"
author_aboutme="From teevn.com team, a PHP and Actionscript developer"
screenshot="http://teedesigner.appspot.com/tdesigner/images/t-shirt-mate-screenshot.jpg"
thumbnail="http://teedesigner.appspot.com/tdesigner/images/t-shirt-mate-thumb.jpg"
>
<Locale messages="http://teedesigner.appspot.com/tdesigner/lang/ALL_ALL.xml"/>
<Locale lang="vi" messages="http://teedesigner.appspot.com/tdesigner/lang/vi_ALL.xml"/>
<Require feature="opensocial-0.8"/>
<Require feature="flash" />
<Require feature="views" />
<Require feature="tabs"/>
<Require feature="minimessage"/>
<Require feature="dynamic-height"/>
</ModulePrefs>
<Content type="html" view="profile,canvas,home">
<![CDATA[

<style type="text/css">
.myTab{width:98%;margin:0 1%;padding:5px 0;}
a,p,div {font-size:12px;}
</style>

<div id="wrap">

<div id="intro1_div" style="text-align:center;display:none;">
<table width="250">
<tr>
<td align="center"><a href="#" style="font-size:20px;" onclick="javascript:navigateToCanvas();return false;">__MSG_start__</a></td>
<td align="center">
<a href="#" onclick="javascript:navigateToCanvas();return false;">
<img src="http://teedesigner.appspot.com/tdesigner/images/t-shirt-mate-thumb.jpg" alt="tdesigner intro" style="border:none" />
</a>
</td>
</tr>
<tr>
<td colspan="2">__MSG_intro1__</td>
</tr>
</table>
<div id="home_stats" style="text-align:left;width:250px;"></div>
</div>
<br />

<div id="intro2_div" style="text-align:center;display:none;">
<table width="500">
<tr>
<td align="center">
<a href="#" style="font-size:20px;" onclick="javascript:navigateToCanvas();return false;">__MSG_start__</a>
<br />
__MSG_intro1__
</td>
</tr>
</table>
</div>

<div id="tabs" style="display:none;">
<div id="tab1_ct" class="myTab" style="padding-top:20px;">
<div id="flashcontainer" style="text-align: left;" ></div>
<a href="#" onclick="saveShirt(960,'caaaaaaa',4,938)" ></a>
</div>
<div id="tab2_ct" class="myTab" style="padding-top:20px;">
<div id="my_shirt_div"></div>
</div>
<div id="tab3_ct" class="myTab" style="padding-top:20px;">
<div id="received"></div>
</div>
<div id="tab4_ct" class="myTab" style="padding-top:20px;">
<b>T-shirt Mate</b><br />
__MSG_version__: 0.8<br />
__MSG_author__: Nguyen Duy Hung<br />
__MSG_email__: hung2585@gmail.com<br />
__MSG_for_more_info__ <a href="http://teevn.com">teevn.com</a><br />
</div>
<form id="orderfrm" name="orderfrm" action="http://teevn.com/gio-hang" method="POST" target="_blank" >
<input type="hidden" name="item_id" />
<input type="hidden" name="size" />
<input type="hidden" name="price" />
</form>
</div>

</div>

<script type="text/javascript">
var curview = gadgets.views.getCurrentView().getName();
var prefs = new gadgets.Prefs();
var tabs = new gadgets.TabSet(__MODULE_ID__);
var myShirts ={};
var viewer ={};
var friends ={};
var givenShirts ={};
var viewerFriendData = {};

function navigateToCanvas(params)
{
if(!params){
params = {};
}
var canvas = gadgets.views.getSupportedViews()["canvas"];
gadgets.views.requestNavigateTo(canvas,params);
};
function showAlert(a1, a2)
{
alert(a1);
alert(a2);
};

function showMsg(content)
{
var msg = new gadgets.MiniMessage(__MODULE_ID__);
msg.createTimerMessage(content, 5);
};

function getInfo()
{
var req = opensocial.newDataRequest();
var opt_params = {};
opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 20;
var viewer = opensocial.newIdSpec({ "userId" : "VIEWER" } );
var viewerFriends = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" });

//req.add(req.newRemovePersonAppDataRequest("VIEWER", "myShirts"), "clear_data");

req.add(req.newFetchPersonAppDataRequest(viewer, 'myShirts', opt_params), 'myShirts');
req.add(req.newFetchPersonAppDataRequest(viewer, 'givenShirts', opt_params), 'givenShirts');
req.add(req.newFetchPersonAppDataRequest(viewerFriends, 'givenShirts', opt_params), 'viewerFriendData');

//req.add(req.newRemovePersonAppDataRequest("VIEWER", "givenShirts"), "clear_data");

req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "get_viewer");
req.add(req.newFetchPeopleRequest(viewerFriends, opt_params), "get_friends");

req.send(onGetInfo);

}
;

function onGetInfo(dataResponse)
{
//alert(gadgets.json.stringify(dataResponse));
viewer = dataResponse.get('get_viewer').getData();
friends = dataResponse.get('get_friends').getData();

// viewerFriendData
viewerFriendData = dataResponse.get('viewerFriendData').getData();
//alert(gadgets.json.stringify(viewerFriendData ));
var json = null;
// parse given shirt
var gShts = dataResponse.get('givenShirts').getData();
//alert(gadgets.json.stringify(gShts));
if (gShts[viewer.getId()]){
json = gShts[viewer.getId()]['givenShirts'];
}

if (!json){
givenShirts = {};
}
try{
givenShirts = gadgets.json.parse(gadgets.util.unescapeString(json));
}
catch (e){
givenShirts = {};
}

// parse my shirts
var shts = dataResponse.get('myShirts').getData();

if ( shts[viewer.getId()] ) {
json = shts[viewer.getId()]['myShirts'];
}
//alert(json);
if ( ! json){
myShirts = {};
}
try{
myShirts = gadgets.json.parse(gadgets.util.unescapeString(json));
}
catch (e){
myShirts = {};
}
bindData();
}
;

function bindData(){
if(curview == "home"){
var html = new Array();
html.push(prefs.getMsg("you_have_create").replace("%1",countMyShirts(myShirts)),' &nbsp;&nbsp;');
html.push('<a href="javascript:void(0)" onclick="navigateToCanvas({tab:1})" >',prefs.getMsg("view_all"),'</a>');
html.push('<br />');
html.push(prefs.getMsg("you_have_from_friends").replace("%1",countShirtsFromFriends(viewerFriendData)),' &nbsp;&nbsp;');
html.push('<a href="javascript:void(0)" onclick="navigateToCanvas({tab:2})" >',prefs.getMsg("view_all"),'</a>');
document.getElementById('home_stats').innerHTML = html.join('');
}
if(curview == "canvas"){
var envParams=gadgets.views.getParams();
var tab_sl = envParams['tab'];
var shirt_id = envParams['shirt_id'];
if(tab_sl){
tabs.setSelectedTab(tab_sl);
}
if(shirt_id){
showSWF(shirt_id);
}
}
//alert(tabs.getIndex());
if(curview == "profile" || curview == "preview"){
showListShirts(myShirts);
/*
if(tabs.getIndex() == 0){
}
if(tabs.getIndex() == 1){
showReceivedList(viewerFriendData);
}
*/
}
};

function countMyShirts(myShirts){
var shirt_ids = new Array();
for (i in myShirts){
if (i.hasOwnProperty){
shirt_ids.push(i);
}
}
return shirt_ids.length;
};

function countShirtsFromFriends(data){
var total_from_friends = 0;
friends.each(function(person) {
if (data[person.getId()]) {
var json = data[person.getId()]['givenShirts'];
var recievedShirts = {};
if (!json) {
recievedShirts = {};
}
try {
recievedShirts = gadgets.json.parse(gadgets.util.unescapeString(json));
} catch (e) {
recievedShirts = {};
}

for (j in recievedShirts) {
if (j.hasOwnProperty && j == viewer.getId()) {
for (i in recievedShirts[j]) {
if (i.hasOwnProperty) {
total_from_friends += 1;
}
}
}
}
}
});

return total_from_friends;
};

function showListShirts(myShirts)
{
document.getElementById('my_shirt_div').innerHTML = '';
var html = new Array();
html.push('<ul>');
var shirt_ids = new Array();
for (i in myShirts){
if (i.hasOwnProperty){
shirt_ids.push(i);
}
}
shirt_ids.reverse();
var total_saved_shirts = shirt_ids.length ;
if(curview == "profile" || curview == "preview"){
shirt_ids= shirt_ids.splice(0,2);
}
for (k = 0 ;k < shirt_ids.length ; k++){
i = shirt_ids[k];
html.push('<li>');
html.push('<div>', prefs.getMsg("price"), ': ', getPrice(myShirts[i]["price"]), '</div>');
html.push('<table><tr>');
for(var j = 1; j <= myShirts[i]["positions"]; j ++ ){
html.push('<td><img height=100 src="http://teevn.com/uploads/td_item/',i,'_',j,'.png?r=',Math.random(),'"', ' />', '</td>');
}
html.push('</tr></table>');
html.push('<div>');
html.push('<a href="#" onclick="goEdit(',i,');return false;">', prefs.getMsg("edit"), '</a>&nbsp;&nbsp;&nbsp;');
html.push('<a href="#" onclick="goDel(',i,');return false;">', prefs.getMsg("delete"), '</a>&nbsp;&nbsp;&nbsp;');
html.push(prefs.getMsg("size"), ':&nbsp;');
html.push('<select id="sl',i,'" name="sl',i,'">');
html.push('<option value="1">S</option>');
html.push('<option value="2">M</option>');
html.push('<option value="3" selected=selected>L</option>');
html.push('<option value="4">XL</option>');
html.push('<option value="5">XXL</option>');
html.push('</select>');
html.push('<a href="#" onclick="goBuy(',i,',',myShirts[i]["price"],');return false;">', prefs.getMsg("buy"), '</a>&nbsp;&nbsp;&nbsp;');
html.push('<a href="#" onclick="goEmail(',i,');return false;">', prefs.getMsg("share"), '</a>&nbsp;&nbsp;&nbsp;');
html.push('<span id="em',i,'"></span>');
html.push('</div>');
html.push('</li>');
}
html.push('</ul>');

if(curview == "canvas"){
if(total_saved_shirts == 0){
html.push(prefs.getMsg("havent_create_shirt"),' &nbsp;&nbsp;');
html.push('<a href="javascript:void(0)" onclick="tabs.setSelectedTab(0)" >',prefs.getMsg("create_now"),'</a>');
}
}
if(curview == "profile" || curview == "preview"){
html.push(prefs.getMsg("you_have_create").replace("%1",total_saved_shirts),' &nbsp;&nbsp;');
html.push('<a href="javascript:void(0)" onclick="navigateToCanvas({tab:1})" >',prefs.getMsg("view_all"),'</a>');
}
document.getElementById('my_shirt_div').innerHTML = html.join('');
}
;

function showReceivedList(data) {
var total_from_friends = 0;
//alert(gadgets.json.stringify(data));
var html = new Array();
html.push('<ul>');
friends.each(function(person) {
if (data[person.getId()]) {
var json = data[person.getId()]['givenShirts'];
var recievedShirts = {};
if (!json) {
recievedShirts = {};
}
try {
recievedShirts = gadgets.json.parse(gadgets.util.unescapeString(json));
} catch (e) {
recievedShirts = {};
}

for (j in recievedShirts) {
if (j.hasOwnProperty && j == viewer.getId()) {
for (i in recievedShirts[j]) {
if (i.hasOwnProperty) {
total_from_friends += 1;
var shirt = recievedShirts[j][i];
if( (curview == "profile" || curview == "preview") && total_from_friends > 2){
continue;
}
html.push('<li>');
html.push('<div>', prefs.getMsg("price"), ': ', getPrice(shirt["price"]),' (from ',person.getDisplayName(),')','</div>');
html.push('<table><tr>');
for(var k = 1; k <= shirt["positions"] ;k ++ )
{
html.push('<td><img height=100 src="http://teevn.com/uploads/td_item/',i,'_',k,'.png?r=',Math.random(),'"', ' />', '</td>');
}
html.push('</tr></table>');
html.push('<div>');
html.push('<a href="#" onclick="goEdit(',i,');return false;">', prefs.getMsg("edit"), '</a>&nbsp;&nbsp;&nbsp;');
html.push(prefs.getMsg("size"), ':&nbsp;');
html.push('<select id="sl',i,'" name="sl',i,'">');
html.push('<option value="1">S</option>');
html.push('<option value="2">M</option>');
html.push('<option value="3" selected=selected>L</option>');
html.push('<option value="4">XL</option>');
html.push('<option value="5">XXL</option>');
html.push('</select>');
html.push('<a href="#" onclick="goBuy(',i,',',shirt["price"],');return false;">', prefs.getMsg("buy"), '</a>&nbsp;&nbsp;&nbsp;');
html.push('</div>');
html.push('</li>');
}
}
}
}
}
});
html.push('</ul>');
if(curview == "canvas"){
//alert(total_from_friends);
if(total_from_friends == 0){
html.push(prefs.getMsg('havent_got_from_friends'));
}
}
if(curview == "profile" || curview == "preview"){
html.push(prefs.getMsg("you_have_from_friends").replace("%1",total_from_friends),' &nbsp;&nbsp;');
html.push('<a href="javascript:void(0)" onclick="navigateToCanvas({tab:2})" >',prefs.getMsg("view_all"),'</a>');
}
document.getElementById('received').innerHTML = html.join('');
};

function getPrice(price)
{
var lang = prefs.getLang();
if(lang == "vi")
{
return price + 'VND' ;
}
else
{
return '$' + Math.ceil(price / 16600 * 10) / 10 ;
}
};

function saveShirt(shirt_id, name, positions, price)
{
var newShirt = { "name" : name, "positions" : positions, "price" : price } ;

myShirts[shirt_id] = newShirt;

var json = gadgets.json.stringify(myShirts);

var req = opensocial.newDataRequest();
req.add(req.newUpdatePersonAppDataRequest("VIEWER", 'myShirts', json));
req.send(function(){});
}
;


function goDel(shirt_id)
{
if( ! confirm(prefs.getMsg("are_you_sure"))){
return;
}
// del trong myShirts
delete myShirts[shirt_id];
// del trong givenShirts
for (i in givenShirts) {
for (j in givenShirts[i]) {
if (j == shirt_id) {
delete givenShirts[i][j];
}
}
}
var onSaved = function(redata1)
{
var callback = function(data){
// alert('deleted');
};
showListShirts(myShirts);
var url = "http://teevn.com/Tdesigner/DelTee/id/" + shirt_id;
// alert(url);
var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
gadgets.io.makeRequest(url, callback, params);
};

var req = opensocial.newDataRequest();
req.add(req.newUpdatePersonAppDataRequest("VIEWER", 'myShirts', gadgets.json.stringify(myShirts)));
req.add(req.newUpdatePersonAppDataRequest("VIEWER", 'givenShirts', gadgets.json.stringify(givenShirts)));

req.send(onSaved);
}
;

function goEdit(shirt_id)
{
if(curview == "profile" || curview == "preview"){
var canvas = gadgets.views.getSupportedViews()["canvas"];
gadgets.views.requestNavigateTo(canvas,{"tab":0,"shirt_id":shirt_id});
}
if(curview == "canvas"){
tabs.setSelectedTab(0);
showSWF(shirt_id);
}
}
;

function goBuy(shirt_id, price)
{
// kiem tra xem da chon. size chua.
document.orderfrm.item_id.value = shirt_id;
document.orderfrm.price.value = price;
var sl = document.getElementById("sl" + shirt_id);
document.orderfrm.size.value = sl[sl.selectedIndex].value;
document.orderfrm.submit();
}
;

function goEmail(shirt_id)
{
// hide cac em div
for (i in myShirts)
{
if (i.hasOwnProperty)
{
document.getElementById("em" + i).innerHTML = "";
}
}

// show friends
html = new Array();

html.push('<select id="person">');
friends.each(function(person)
{
if (person.getId())
{
html.push('<option value="', person.getId(), '">', person.getDisplayName(), '</option>');
}
}
);
html.push('</select>');
html.push('<input type="button" value="',prefs.getMsg("send"),'" onclick="giveShirtToFriend(',shirt_id,')">');

document.getElementById('em' + shirt_id).innerHTML = html.join('');
}
;


function giveShirtToFriend(shirt_id)
{
var friend = document.getElementById('person').value;
//var shirt = {"id" : shirt_id, "name" : myShirts[shirt_id]["name"], "positions" : myShirts[shirt_id]["positions"], "price" : myShirts[shirt_id]["price"] };
if (!givenShirts) {
givenShirts= {};
}
if (!givenShirts[friend]) {
//givenShirts[friend] = new Array();
givenShirts[friend] = {};
}

//alert(gadgets.json.stringify(myShirts[shirt_id]));
givenShirts[friend][shirt_id] = myShirts[shirt_id];

var json = gadgets.json.stringify(givenShirts);
//alert(json);
var req = opensocial.newDataRequest();
req.add(req.newUpdatePersonAppDataRequest("VIEWER", 'givenShirts', json));

req.send(function(){});

postActivity(shirt_id, friend);

}
;

function postActivity(shirt_id, friend)
{
var title = 'gave ' + friends.getById(friend).getDisplayName() + ' this t-shirt';
// alert(title);
var activity_body = '';
activity_body += '<div>';
for(var i = 1; i <= myShirts[shirt_id]["positions"] ; i ++ )
{
activity_body += '<img height=80 src="http://teevn.com/uploads/td_item/' + shirt_id + '_' + i +'.png?r=' + Math.random() + ' "/>';
}
activity_body += '</div>';
var params = {};
params[opensocial.Activity.Field.TITLE] = title;
params[opensocial.Activity.Field.BODY] = activity_body;
var activity = opensocial.newActivity(params);
var cb = function (data){
showMsg("Sent to " + friends.getById(friend).getDisplayName());
document.getElementById("em" + shirt_id).innerHTML = "";
};
opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, cb );
}
;

function sendEmail(shirt_id)
{
var callback = function (data)
{
if (data.hadError())
{
alert("There was a problem:" + data.getErrorCode());
}
else
{
alert(prefs.getMsg("email_sent"));
}
}
;

var toUserId = document.getElementById("person").value;
var title = "Your received this t-shirt from " + viewer.getDisplayName();
var body = "Hi, you received this t-shirt from " + viewer.getDisplayName() + "<br /><br />";
body += "http://teevn.com/Tao-ao/item_id/" + shirt_id;
// alert(toUserId);
var params ={};
params[opensocial.Message.Field.TITLE] = title;
params[opensocial.Message.Field.TYPE] = opensocial.Message.Type.EMAIL;
var message = opensocial.newMessage(body, params);
var recipients = new Array();
recipients[0] = toUserId ;
// var recipient = "VIEWER";
// alert(toUserId );
opensocial.requestSendMessage(toUserId , message, callback);
// alert("a a a a");

}
;


function showSWF(load_item)
{
document.getElementById("flashcontainer").innerHTML = "";
var url = "http://teedesigner.appspot.com/tdesigner/gadget.swf";
var params =
{
swf_version : 9,
id : "tdesigner",
name : "tdesigner",
width : 770,
height : 520,
allowScriptAccess : "always"
}
;
params["flashVars"] = "lang=" + prefs.getLang();
if(load_item)
{
params["flashVars"] += "&item_id=" + load_item ;
}

_IG_EmbedFlash(url, "flashcontainer", params )
}
;

function getFlash(movieName)
{
if (navigator.appName.indexOf("Microsoft") != - 1)
{
return window[movieName];
}
else
{
return document[movieName];
}
}
;

function tab1_callback(){};
function tab2_callback()
{
showListShirts(myShirts);
};
function tab3_callback(){
showReceivedList(viewerFriendData);
};

function init()
{
if(curview == "canvas"){
getInfo();
//document.getElementById("tab_div").style.display = "block";
document.getElementById("tabs").style.display = "block";
// alert(gadgets.json.stringify(gadgets.views.getSupportedViews()));
tabs.alignTabs("left", 3 );
// add tabs
tabs.addTab(prefs.getMsg("design"),{
contentContainer : document.getElementById("tab1_ct"),
callback : tab1_callback,
tooltip : prefs.getMsg("design_your_shirt")
}
);

tabs.addTab(prefs.getMsg("saved_shirts"),{
contentContainer : document.getElementById("tab2_ct"),
callback : tab2_callback,
tooltip : prefs.getMsg("your_saved_shirts")
}
);

tabs.addTab(prefs.getMsg("from_friends"),{
contentContainer : document.getElementById("tab3_ct"),
callback : tab3_callback,
tooltip : prefs.getMsg("shirts_from_your_friend")
}
);

tabs.addTab(prefs.getMsg("about"),{
contentContainer : document.getElementById("tab4_ct")
}
);

showSWF();
}

if(curview == "profile" || curview == "preview"){
getInfo();
document.getElementById("tabs").style.display = "block";
document.getElementById("tab1_ct").style.display = "none";
document.getElementById("tab4_ct").style.display = "none";
document.getElementById("intro2_div").style.display = "block";
gadgets.window.adjustHeight(450);
tabs.alignTabs("left", 3 );
//tabs.setSelectedTab(1);
tabs.addTab(prefs.getMsg("saved_shirts"),{
contentContainer : document.getElementById("tab2_ct"),
callback : tab2_callback,
tooltip : prefs.getMsg("your_saved_shirts")
}
);

tabs.addTab(prefs.getMsg("from_friends"),{
contentContainer : document.getElementById("tab3_ct"),
callback : tab3_callback,
tooltip : prefs.getMsg("shirts_from_your_friend")
}
);
}

if(curview == "home"){
gadgets.window.adjustHeight(180);
getInfo();
document.getElementById("intro1_div").style.display = "block";
}

};

gadgets.util.registerOnLoadHandler(init);
</script>
]]>
</Content>

<Content type="html" view="preview">
<![CDATA[ <script type="text/javascript">
function navigateToCanvas() {
var canvas = gadgets.views.getSupportedViews()["canvas"];
gadgets.views.requestNavigateTo(canvas);
}
function init(){
gadgets.window.adjustHeight(300);
}
gadgets.util.registerOnLoadHandler(init);
</script>

<div
<a href="#" onclick="javascript:navigateToCanvas();return false;">
<img src="http://teedesigner.appspot.com/tdesigner/images/td-intro2.gif" alt="tdesigner intro" style="border:none" />
</a><br />
<table width="450">
<tr>
<td>__MSG_intro1__</td>
<td align="left"><a href="#" style="font-size:20px;" onclick="javascript:navigateToCanvas();return false;">__MSG_start__</a></td>
</tr>
</table>
</div> ]]>
</Content>

</Module>
