<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Chat Tutorial" description="IM-Gadget" author="Tobias Günther" author_email="info@puremedia-online.de" author_affiliation="" author_location="Stuttgart, DE">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/effects.js"></script>
      <link href="http://www.puremedia-online.de/projekte/opensocial/chatprototype_v1/styles.css" rel="stylesheet" type="text/css"></link>
      <script type="text/javascript">
        gadgets.util.registerOnLoadHandler(function(){ PCH.initialize(); });
        // chat prototype namespace
        var PCH = {
              conf: {
                labels: {
                  no_chat_messages_yet: "No chat messages yet.",
                  chatting_with: "Chatting with "
                },
                uris : {
                  send_chat_message: 'http://www.puremedia-online.de/projekte/opensocial/chat_tutorial/chat_controller.php',
                  deliver_chat_message: 'http://www.puremedia-online.de/projekte/opensocial/chat_tutorial/chat_controller.php'
                }
              },
              cache : {
                friends: {},
                viewer: {}
              },
              initialize: function() {
                PCH.load_friends();
                setInterval(function(){
                  PCH.check_for_new_messages();
                }, 2000);
              },
              load_friends: function() {
                var req = opensocial.newDataRequest();
                req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer');
                var friends = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" });
                var req_params = {};
                req_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
                req.add(req.newFetchPeopleRequest(friends, req_params), 'viewer_friends');
                req.send(PCH.on_load_friends);
              },
              on_load_friends: function(data) {
                var viewer = data.get('viewer').getData();
                PCH.cache.viewer = {'name':viewer.getDisplayName(), 'id': viewer.getId()};
                var friends = data.get('viewer_friends').getData();
                
                var friends_html = '<ul>';
                var chatwindows_html = '';
                friends.each(function(friend) {
                  if (friend.getId()) {
                    PCH.cache.friends[friend.getId()] = {'name': friend.getDisplayName(), 'id': friend.getId()};
                    friends_html += '<li id="'+friend.getId()+'">\n\
                              <div class="friend_name"> '+ friend.getDisplayName()+ '</div>\n\
                            </li>';
                    chatwindows_html += '<div class="chatwindow" id="chat_'+friend.getId()+'" style="display:none;">\n\
                              <div class="chatwindow_messages">'+PCH.conf.labels.no_chat_messages_yet+'</div>\n\
                              <div class="chatwindow_input"><form><input type="text" id="chatinput_'+friend.getId()+'" /></form></div>\n\
                              </div>';
                  }
                });
                friends_html += '</ul>';

                // add friendslist to container
                $('friendslist').update(friends_html);
                // add chatwindows
                $('chatwindows').update(chatwindows_html);
                // add eventhandlers for friends
                $$('#friendslist li').each(function(li){
                  var person_name = $$('#' + li.id + ' .friend_name')[0].innerHTML;
                  li.observe('click', function(e){
                    PCH.show_chat_window(e, li.id, person_name);
                  });
                });
                // add eventhandlers for chatwindows
                $$('.chatwindow_input form').each(function(form){
                  form.observe('submit', PCH.submit_chat_message.bindAsEventListener(this, form.up('.chatwindow')));
                });
              },
              hide_all_content: function(){
                $('friendslist').hide();
                $('chatwindows').hide();
                $$('.chatwindow').each(function(cw){
                  cw.hide();
                });
                $('notice').update();
              },
              show_tab_content: function(tab, clicked){
                PCH.hide_all_content();
                $(tab).show();
                $$('#navlist li').each(function(li){ li.removeClassName('current')});
                $(clicked).up('li').addClassName('current');
              },
              show_chat_window: function(e, person_id, person_name){
                PCH.hide_all_content();
                $('chatwindows').show();
                $('chat_'+person_id).show();
                $('notice').update(PCH.conf.labels.chatting_with + person_name+'...');
              },
              submit_chat_message: function(e, chatwin){
                var now = new Date();
                var chatwindow = $(chatwin);
                var user_to = chatwindow.id.substr(5,chatwindow.id.length);
                var message = chatwindow.down('input').value;
                var message_container = chatwindow.down('.chatwindow_messages');
                if(message_container.innerHTML == PCH.conf.labels.no_chat_messages_yet){
                  message_container.innerHTML = '';
                }
                message_container.innerHTML += '<div class="chat_message_from_self">'+PCH.cache.viewer.name + ' ('+now.getHours()+':'+now.getMinutes()+')</div>';
                message_container.innerHTML += message +'<br />';
                chatwindow.down('input').value = '';
                Event.stop(e);
                PCH.send_message(message, user_to);
              },
              send_message: function(message, user_to){
                var post_data = { action: 'save_message', message: message, to_user: user_to, from_user: PCH.cache.viewer.id};
                post_data = gadgets.io.encodeValues(post_data);
                var params = {};
                params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT
                params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
                params[gadgets.io.RequestParameters.POST_DATA] = post_data;
                gadgets.io.makeRequest(PCH.conf.uris.send_chat_message, function(){}, params);
              },
              check_for_new_messages: function(){
                var post_data = { action: 'deliver_message', to_user: PCH.cache.viewer.id};
                post_data = gadgets.io.encodeValues(post_data);
                var params = {};
                params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON
                params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
                params[gadgets.io.RequestParameters.POST_DATA] = post_data;
                gadgets.io.makeRequest(PCH.conf.uris.send_chat_message, PCH.insert_new_messages, params);
              },
              insert_new_messages: function(resp){
                if(resp.data.status == 'ok' && resp.data.messages.length > 0){
                  for(var i=0, il=resp.data.messages.length; i<il; i++){
                    var chatwindow_messages = $('chat_'+resp.data.messages[i].from_user).down('.chatwindow_messages');
                    if(chatwindow_messages.innerHTML == PCH.conf.labels.no_chat_messages_yet){
                      chatwindow_messages.innerHTML = '';
                    }
                    var now = new Date();
                    chatwindow_messages.innerHTML += '<div class="chat_message_from_friend">'+PCH.cache.friends[resp.data.messages[i].from_user].name + ' ('+now.getHours()+':'+now.getMinutes()+')</div>';
                    chatwindow_messages.innerHTML += resp.data.messages[i].message + "<br />";
                  }
                }
              }
        }

      </script>

      <div id='main'>
        <div id="nav_container">
          <div id="notice"></div>
          <ul id="navlist">
            <li class="current"><a href="javascript:void(0)" onclick="PCH.show_tab_content('friendslist', this)">Friends</a></li>
          </ul>
        </div>
        <hr style="clear:both; visibility:hidden;" />
        <div id="content_container">
          <div id='friendslist'></div>
          <div id='chatwindows' style="display:none"></div>
        </div>
      </div>

    ]]>
  </Content>
</Module>
