<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Gifter">
    <Require feature="opensocial-0.7"/>    
  <Require feature="views" />
  <Require feature="dynamic-height"/>
  </ModulePrefs>

  <Content type="html">

    <![CDATA[
<style type="text/css">
  div.main{
	background-color: #FFF0FF;
}
div.giftSelector{
	border: solid 1px black;
}
  /* General Links */
		a:link { text-decoration : none; color : #3366cc; border: 0px;}
		a:active { text-decoration : underline; color : #3366cc; border: 0px;}
		a:visited { text-decoration : none; color : #3366cc; border: 0px;}
		a:hover { text-decoration : underline; color : #ff5a00; border: 0px;}
		img { padding: 0px; margin: 0px; border: none;}

  </style>
  <div style="position: absolute;left:0; top: 0; background-color: #FFFFCC; layer-background-color: #FFFFCC; height: 100%; width: 100%; opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.8; -khtml-opacity: 0.8;z-index: 3" id="screen">
</div>
<div style="position: absolute;left: 200;top: 200;z-index: 4" id="prgBar">
  <span class="progressBar" id="prg">5%</span>
</div>

  <div id="main">
     <div id='give'>
          <form id='gift_form'>
            Give <span id='gifts'></span> 
             <div id="selGifts" style="float:left;">  
            Selected Gift: <div id="selectedGift" style="width:100px;height:100px;">&nbsp;</span>                       
            </div>
            <div id="next" style="float: none;">
            to <span id='friends'></span>. <a href="javascript:void(0);" onclick='giveGift();'>Give!</a>
            </div>
          </form>
   </div>
   <div id="given" style="float: none;padding-right:550px">
     </div>
   <div id="received"></div>
  </div>
  <div id="error" style="font-color: red"></div>
        <!-- jsProgressBarHandler prerequisites : prototype.js -->
	<script type="text/javascript" src="http://pr-gadget.googlecode.com/svn/trunk/pr-gadget/progressBar/js/prototype/prototype.js"></script>

	<!-- jsProgressBarHandler core -->
	<script type="text/javascript" src="http://pr-gadget.googlecode.com/svn/trunk/pr-gadget/progressBar/js/bramus/jsProgressBarHandler.js"></script>
  
    <script>  
     /**
* @author spradeep
*/
 gadgets.util.registerOnLoadHandler(init);
//var mode = opensocial.getEnvironment().getSurface();
//var modes = { canvas : 1, profile : 2 };
var imagesListLocation = 'http://pr-gadget.googlecode.com/svn/trunk/pr-gadget/images/paths.xml';
function getView() {
return gadgets.views.getCurrentView().getName();
}
function hideUnwantedViews(){
if (getView() == 'canvas') {
/* Do some canvas specific stuff here */

}

if (getView() == 'profile') {
_gel('give').style.display ='none';
}
}
var imgs = new Array();
      
function init() {
      
if (getView() == 'canvas') {


gadgets.io.makeRequest(imagesListLocation, function loadImages(obj){
myJsProgressBarHandler.setPercentage('prg','25');
var xmlobject = (new DOMParser()).parseFromString(obj.text.replace('\r','').replace('\n',''), "text/xml");

if (xmlobject == null || typeof(xmlobject ) != "object") {
_gel("main").innerHTML = "<i> Invalid data.</i>";
return;
}

var docRoot = xmlobject.getElementsByTagName("imageLocations")[0];
var images = docRoot.getElementsByTagName("image");
if(!(images == null || images.length==0)){

for(var i=0; i< images.length; ++i){
var image = images[i];
var url=image.firstChild.data;

imgs[i]=(url);
//imgs[i].style.height='100';
//imgs[i].style.width='100';
}
}
myJsProgressBarHandler.setPercentage('prg','40');
hideUnwantedViews();
loadFriends();
makeOptionsMenu();
myJsProgressBarHandler.setPercentage('prg','60');
},{ refreshInterval: 100});
}else
{
myJsProgressBarHandler.setPercentage('prg','50');
loadFriends();
myJsProgressBarHandler.setPercentage('prg','60');
}

}
var imgs = new Array();
 
function loadFriends() {

        var req = opensocial.newDataRequest();
        var opt_params = { };
        opt_params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
          opensocial.Person.Field.PROFILE_URL
        ];

        req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER), "viewer");
        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, opt_params), "viewer_friends");
        //req.send(response);
        req.add(req.newFetchPersonAppDataRequest('VIEWER', 'gifts'), 'data');
        req.add(req.newFetchPersonAppDataRequest('VIEWER_FRIENDS', 'gifts'), 'viewerFriendData');
        req.send(onLoadFriends);
        myJsProgressBarHandler.setPercentage('prg','70');
}
 //Adjust the height of this application  gadgets.window.adjustHeight();
function onLoadFriends(data) {
try{
  var viewer = data.get('viewer').getData();
  var viewerFriends = data.get('viewer_friends').getData();
  var giftData = data.get('data').getData();
 
  var viewerfriendData = data.get('viewerFriendData').getData();
  }
 catch(e){
    hidePrg();
    _gel('error').innerHTML=e.toString();
    return;

  }
var friends = new Array();
var html='<select id="person">';
viewerFriends.each(function(person) {

var thumb = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
// var profile = gadgets.util.getUrlParameters()["parent"] +
// person.getField(opensocial.Person.Field.PROFILE_URL);
html += '<option value="' + person.getId() + '">' + person.getDisplayName() +'<img src="' + thumb + '"/>'+ '</option>';
friends[person.getId()] = person.getDisplayName(); });
html+='</select>';
_gel('friends').innerHTML = html;
    myJsProgressBarHandler.setPercentage('prg','100');
updateGiftList(viewer, giftData, friends);
//updateReceivedList(viewer,viewerfriendData,viewerFriends);

      // Hide Progress Bars
      hidePrg();

}

function makeOptionsMenu() {

var html = new Array();

html.push('<div id="giftSelector" style="border: solid 1px black;width: 510px;height: 510px;float:left;">');
var k=0;
for(var i=0;i<5;++i){
html.push('<div id="row'+i+'">');
for(var j=0;j<5;++j,k++){
html.push('<div class="gift" id="col'+k+'" style="float: left;width: 100px;text-align: center;border: 1px solid white;">');
//html.push(i*j+'');
html.push('<img src="'+imgs[k]+'" width="99" height="99" id="image'+k+'"/>');
//html.push(imgs[k].innerHMTL);
html.push('</div>');
}
html.push('</div><br/>');
}

html.push('</div>');


_gel('gifts').innerHTML = html.join('');
decorateDivs();
}
function decorateDivs(){
for(var i=0;i<25;++i){

if(_gel('col'+i).addEventListener){
// FF
_gel('col'+i).setAttribute('onmouseover',"this.style.borderColor = 'black';");
_gel('col'+i).setAttribute('onmouseout',"this.style.borderColor = 'white';");
_gel('col'+i).setAttribute('onmouseup',"toggleBold(this);");
}
else{ 

// IE
_gel('col'+i).onmouseover = function(){

//this.style.backgroundColor = 'gray';
//this.style.borderWidth = '1px';
this.style.borderColor = 'black';
//this.style.borderStyle = 'solid';
}
_gel('col'+i).onmouseout = function(){
//this.style.backgroundColor = '';
//this.style.borderWidth = '';
this.style.borderColor = 'white';
//this.style.borderStyle = '';
}
_gel('col'+i).onmouseup =function(){
toggleBold(this);
}
}


}}
var selectedImg = '';
function toggleBold(obj){
      
     _gel('selectedGift').innerHTML=obj.innerHTML;
     selectedImg = obj.firstChild.id;
     
}

var givenGifts = {};

function giveGift() {
if(selectedImg == null)
  return;
  

var friend = _gel('person').value;

givenGifts[friend] = selectedImg;
var json = gadgets.json.stringify(givenGifts);

var req = opensocial.newDataRequest();
req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER, 'gifts', json));
req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends');
req.add(req.newFetchPersonAppDataRequest('VIEWER', 'gifts'), 'data');
req.add(req.newFetchPersonAppDataRequest('VIEWER_FRIENDS', 'gifts'), 'viewerFriendData');
req.send(onLoadFriends);
}

function updateGiftList(viewer, data, friends) {
var json = data[viewer.getId()]['gifts'];

if (!json) {
givenGifts = {};
}
try {
givenGifts = gadgets.json.parse(json);
} catch (e) {
givenGifts = {};
}


var html = new Array();
html.push('You have given:');
html.push('<ul>');
for (i in givenGifts) {
if (+(i) > 0) {
html.push('<li>' + friends[i] + ' received <img src="' + imgs[givenGifts[i].replace('image','')] + '" width="100" height="100"/></li>');
}
}
html.push('</ul>');
_gel('given').innerHTML = html.join('');
}

function updateReceivedList(viewer, data, friends) {
if(data==null || data.length==null){
_gel('received').innerHTML = 'You have not yet received any gifts';
return;
}
var viewerId = viewer.getId();

var html = new Array();
html.push(viewer.getDisplayName()+'has received : <ul>');
friends.each(function(person) {
var personData = data[person.getId()];
if (personData) {
var json = data[person.getId()]['gifts'];

var gifts = {}
if (!json) {
gifts = {};
}
try {
gifts = gadgets.json.parse(json);
} catch (e) {
gifts = {};
}

for (i in gifts) {
if (+(i) > 0 && i == viewerId) {
html.push('<li><img src="' + imgs[gifts[i].replace('image','')] + '" width="100" height="100"/> from ' + person.getDisplayName() + '</li>');
}
}
}
});
html.push('</ul>');
_gel('received').innerHTML = html.join('');
}

function hidePrg(){
	 	document.getElementById('prgBar').style.display = 'none';
	 	document.getElementById('screen').style.display = 'none';
	 }

</script>



    ]]>

  </Content>

</Module>  