Adds presentations with Prezi.

app.js

@@ -9,6 +9,7 @@ var sharedKey = '';
 var roomUrl = null;
 var ssrc2jid = {};
 var localVideoSrc = null;
+var preziPlayer = null;
 
 /* window.onbeforeunload = closePageWarning; */
 
@@ -140,16 +141,14 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
 
     var container;
     var remotes = document.getElementById('remoteVideos');
+
     if (data.peerjid) {
         container  = document.getElementById('participant_' + Strophe.getResourceFromJid(data.peerjid));
         if (!container) {
             console.warn('no container for', data.peerjid);
             // create for now...
             // FIXME: should be removed
-            container = document.createElement('span');
-            container.id = 'participant_' + Strophe.getResourceFromJid(data.peerjid);
-            container.className = 'videocontainer';
-            remotes.appendChild(container);
+            container = addRemoteVideoContainer('participant_' + Strophe.getResourceFromJid(data.peerjid));
         } else {
             //console.log('found container for', data.peerjid);
         }
@@ -173,6 +172,7 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
         container.id = 'mixedstream';
         $(container).hide();
     }
+
     var sel = $('#' + id);
     sel.hide();
     RTC.attachMediaStream(sel, data.stream);
@@ -187,10 +187,12 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
             var pick = $('#remoteVideos>span[id!="mixedstream"]:visible:last>video').get(0);
             // mute if localvideo
             var isLocalVideo = false;
-            if (pick.src === localVideoSrc)
+            if (pick) {
+                 if (pick.src === localVideoSrc)
                  isLocalVideo = true;
-
-            updateLargeVideo(pick.src, isLocalVideo, pick.volume);
+                 
+                 updateLargeVideo(pick.src, isLocalVideo, pick.volume);
+            }
         }
         $('#' + id).parent().remove();
         resizeThumbnails();
@@ -217,7 +219,7 @@ $(document).bind('callactive.jingle', function (event, videoelem, sid) {
         resizeThumbnails();
 
         updateLargeVideo(videoelem.attr('src'), false, 1);
-                 
+
         showFocusIndicator();
     }
 });
@@ -238,16 +240,13 @@ $(document).bind('setLocalDescription.jingle', function (event, sid) {
         newssrcs[type] = ssrc;
     });
     console.log('new ssrcs', newssrcs);
-    // just blast off presence for everything -- TODO: optimize
-    var pres = $pres({to: connection.emuc.myroomjid });
-    pres.c('x', {xmlns: 'http://jabber.org/protocol/muc'}).up();
 
-    pres.c('media', {xmlns: 'http://estos.de/ns/mjs'});
+    var i = 0;
     Object.keys(newssrcs).forEach(function (mtype) {
-        pres.c('source', {type: mtype, ssrc: newssrcs[mtype]}).up();
+        i++;
+        connection.emuc.addMediaToPresence(i, mtype, newssrcs[mtype]);
     });
-    pres.up();
-    connection.send(pres);
+    connection.emuc.sendPresence();
 });
 
 $(document).bind('joined.muc', function (event, jid, info) {
@@ -256,22 +255,19 @@ $(document).bind('joined.muc', function (event, jid, info) {
         document.createTextNode(Strophe.getResourceFromJid(jid) + ' (you)')
     );
 
-    // Once we've joined the muc show the toolbar
-    showToolbar();
-
     if (Object.keys(connection.emuc.members).length < 1) {
         focus = new ColibriFocus(connection, config.hosts.bridge);
     }
+                 
+    // Once we've joined the muc show the toolbar
+    showToolbar();
 });
 
 $(document).bind('entered.muc', function (event, jid, info, pres) {
     console.log('entered', jid, info);
     console.log(focus);
-    var container = document.createElement('span');
-    container.id = 'participant_' + Strophe.getResourceFromJid(jid);
-    container.className = 'videocontainer';
-    var remotes = document.getElementById('remoteVideos');
-    remotes.appendChild(container);
+    
+    var container = addRemoteVideoContainer('participant_' + Strophe.getResourceFromJid(jid));
 
     var nickfield = document.createElement('span');
     nickfield.appendChild(document.createTextNode(Strophe.getResourceFromJid(jid)));
@@ -304,7 +300,7 @@ $(document).bind('left.muc', function (event, jid) {
     var container = document.getElementById('participant_' + Strophe.getResourceFromJid(jid));
     if (container) {
         // hide here, wait for video to close before removing
-        $(container).hide(); 
+        $(container).hide();
         resizeThumbnails();
     }
 
@@ -319,6 +315,10 @@ $(document).bind('left.muc', function (event, jid) {
             focus = new ColibriFocus(connection, config.hosts.bridge);
         }
     }
+    
+    if (connection.emuc.getPrezi(jid)) {
+        $(document).trigger('presentationremoved.muc', [jid, connection.emuc.getPrezi(jid)]);
+    }
 });
 
 $(document).bind('presence.muc', function (event, jid, info, pres) {
@@ -355,11 +355,156 @@ $(document).bind('passwordrequired.muc', function (event, jid) {
             });
 });
 
+/*
+ * Presentation has been removed.
+ */
+$(document).bind('presentationremoved.muc', function(event, jid, presUrl) {
+    console.log('presentation removed', presUrl);
+    var presId = getPresentationId(presUrl);
+    setPresentationVisible(false);
+    $('#participant_' + Strophe.getResourceFromJid(jid) + '_' + presId).remove();
+    $('#presentation>iframe').remove();
+    if (preziPlayer != null) {
+        preziPlayer.destroy();
+        preziPlayer = null;
+    }
+});
+
+/*
+ * Presentation has been added.
+ */
+$(document).bind('presentationadded.muc', function (event, jid, presUrl, currentSlide) {
+    console.log("presentation added", presUrl);
+
+    var presId = getPresentationId(presUrl);
+    var elementId = 'participant_' + Strophe.getResourceFromJid(jid) + '_' + presId;
+
+    var container = addRemoteVideoContainer(elementId);
+    resizeThumbnails();
+
+    var controlsEnabled = false;
+    if (jid === connection.emuc.myroomjid)
+        controlsEnabled = true;
+
+    setPresentationVisible(true);
+    $('#largeVideoContainer').hover(
+        function (event) {
+            if ($('#largeVideo').css('visibility') == 'hidden')
+                $('#reloadPresentation').css({display:'inline-block'});
+        },
+        function (event) {
+            if ($('#largeVideo').css('visibility') == 'visible')
+                $('#reloadPresentation').css({display:'none'});
+            else {
+                var e = event.toElement || event.relatedTarget;
+
+                while(e && e.parentNode && e.parentNode != window) {
+                    if (e.parentNode == this ||  e ==  this) {
+                        return false;
+                    }
+                    e = e.parentNode;
+                }
+                $('#reloadPresentation').css({display:'none'});
+            }
+        });
+
+    preziPlayer = new PreziPlayer(
+                'presentation',
+                {preziId: presId,
+                width: $('#largeVideoContainer').width(),
+                height: $('#largeVideoContainer').height(),
+                controls: controlsEnabled,
+                debug: true
+                });
+
+    $('#presentation>iframe').attr('id', preziPlayer.options.preziId);
+
+//    $('#presentation>iframe').load(function (){
+//        console.log("IFRAME LOADED!!!!!!!!!!!!!!!!");
+//    });
+//    $('#presentation>iframe').ready(function (){
+//        console.log("IFRAME READY!!!!!!!!!!!!!!!!");
+//    });
+                 
+    preziPlayer.on(PreziPlayer.EVENT_STATUS, function(event) {
+        console.log("prezi status", event.value);
+        if (event.value == PreziPlayer.STATUS_CONTENT_READY) {
+            if (jid != connection.emuc.myroomjid)
+                preziPlayer.flyToStep(currentSlide);
+        }
+    });
+
+    preziPlayer.on(PreziPlayer.EVENT_CURRENT_STEP, function(event) {
+        console.log("event value", event.value);
+        connection.emuc.addCurrentSlideToPresence(event.value);
+        connection.emuc.sendPresence();
+    });
+
+    $("#" + elementId).css('background-image','url(../images/avatarprezi.png)');
+    $("#" + elementId).click(
+        function () {
+            setPresentationVisible(true);
+        }
+    );
+});
+
+/*
+ * Indicates presentation slide change.
+ */
+$(document).bind('gotoslide.muc', function (event, jid, presUrl, current) {
+    if (preziPlayer) {
+        preziPlayer.flyToStep(current);
+    }
+});
+
+/**
+ * Returns the presentation id from the given url.
+ */
+function getPresentationId (presUrl) {
+    var presIdTmp = presUrl.substring(presUrl.indexOf("prezi.com/") + 10);
+    return presIdTmp.substring(0, presIdTmp.indexOf('/'));
+}
+
+/*
+ * Reloads the current presentation.
+ */
+function reloadPresentation() {
+    var iframe = document.getElementById(preziPlayer.options.preziId);
+    iframe.src = iframe.src;
+}
+
+/*
+ * Shows/hides a presentation.
+ */
+function setPresentationVisible(visible) {
+    if (visible) {
+        $('#largeVideo').fadeOut(300, function () {
+            $('#largeVideo').css({visibility:'hidden'});
+            $('#presentation>iframe').fadeIn(300, function() {
+                $('#presentation>iframe').css({opacity:'1'});
+            });
+        });
+    }
+    else {
+        if ($('#presentation>iframe')) {
+            $('#presentation>iframe').fadeOut(300, function () {
+                $('#presentation>iframe').css({opacity:'0'});
+                $('#largeVideo').fadeIn(300, function() {
+                    $('#largeVideo').css({visibility:'visible'});
+                });
+            });
+        }
+    }
+}
+
 /**
  * Updates the large video with the given new video source.
  */
 function updateLargeVideo(newSrc, localVideo, vol) {
     console.log('hover in', newSrc);
+
+    setPresentationVisible(false);
+
     if ($('#largeVideo').attr('src') != newSrc) {
 
         document.getElementById('largeVideo').volume = vol;
@@ -413,6 +558,9 @@ function resizeLarge() {
     if (availableWidth < 0 || availableHeight < 0) return;
     $('#largeVideo').parent().width(availableWidth);
     $('#largeVideo').parent().height(availableWidth / aspectRatio);
+    $('#presentation>iframe').width(availableWidth);
+    $('#presentation>iframe').height(availableWidth / aspectRatio);
+    
     resizeThumbnails();
 }
 
@@ -466,6 +614,9 @@ $(document).ready(function () {
 
     $('#usermsg').autosize();
 
+    // Set the defaults for prompt dialogs.
+    jQuery.prompt.setDefaults({persistent: false});
+
     resizeLarge();
     $(window).resize(function () {
         resizeLarge();
@@ -513,15 +664,8 @@ function dump(elem, filename){
             var session = connection.jingle.sessions[sid];
             if (session.peerconnection && session.peerconnection.updateLog) {
                 // FIXME: should probably be a .dump call
-                /* well, if I need to modify the output format anyway...
-                var stats = JSON.parse(JSON.stringify(session.peerconnection.stats));
-                Object.keys(stats).forEach(function (name) {
-                    stats[name].values = JSON.stringify(stats[name].values);
-                });
-                */
                 data["jingle_" + session.sid] = {
                     updateLog: session.peerconnection.updateLog,
-                    stats: session.peerconnection.stats,
                     url: window.location.href}
                 ;
             }
@@ -609,16 +753,16 @@ function openLockDialog() {
                      submit: function(e,v,m,f){
                      if(v)
                      {
-                     var lockKey = document.getElementById('lockKey');
+                        var lockKey = document.getElementById('lockKey');
                      
-                     if (lockKey.value)
-                     {
-                        setSharedKey(lockKey.value);
-                        lockRoom(true);
+                        if (lockKey.value)
+                        {
+                            setSharedKey(lockKey.value);
+                            lockRoom(true);
+                        }
                      }
                 }
-            }
-        });
+            });
     }
 }
 
@@ -637,11 +781,149 @@ function openLinkDialog() {
              });
 }
 
+/*
+ * Opens the settings dialog.
+ */
+function openSettingsDialog() {
+    $.prompt('<h2>Configure your conference</h2>' +
+             '<input type="checkbox" id="initMuted"> Participants join muted<br/>' +
+             '<input type="checkbox" id="requireNicknames"> Require nicknames<br/><br/>' +
+             'Set a secrect key to lock your room: <input id="lockKey" type="text" placeholder="your shared key" autofocus>',
+             {
+                persistent: false,
+                buttons: { "Save": true , "Cancel": false},
+                defaultButton: 1,
+                loaded: function(event) {
+                    document.getElementById('lockKey').focus();
+                },
+                submit: function(e,v,m,f){
+                    if(v)
+                    {
+                        if ($('#initMuted').is(":checked"))
+                        {
+                            // it is checked
+                        }
+
+                        if ($('#requireNicknames').is(":checked"))
+                        {
+                            // it is checked                        
+                        }
+             /*
+                        var lockKey = document.getElementById('lockKey');
+             
+                        if (lockKey.value)
+                        {
+                            setSharedKey(lockKey.value);
+                            lockRoom(true);
+                        }
+              */
+                    }
+                }
+             });
+}
+
+/*
+ * Opens the Prezi dialog, from which the user could choose a presentation to load.
+ */
+function openPreziDialog() {
+    var myprezi = connection.emuc.getPrezi(connection.emuc.myroomjid);
+    if (myprezi) {
+        $.prompt("Are you sure you would like to remove your Prezi?",
+                {
+                title: "Remove Prezi",
+                buttons: { "Remove": true, "Cancel": false},
+                defaultButton: 1,
+                submit: function(e,v,m,f){
+                if(v)
+                {
+                    connection.emuc.removePreziFromPresence();
+                    connection.emuc.sendPresence();
+                }
+            }
+        });
+    }
+    else if (preziPlayer != null) {
+        $.prompt("Another participant is already sharing a Prezi. This conference allows only one Prezi at a time.",
+                 {
+                 title: "Share a Prezi",
+                 buttons: { "Ok": true},
+                 defaultButton: 0,
+                 submit: function(e,v,m,f){
+                    $.prompt.close();
+                 }
+                 });
+    }
+    else {
+        var openPreziState = {
+        state0: {
+            html:   '<h2>Share a Prezi</h2>' +
+                    '<input id="preziUrl" type="text" placeholder="e.g. http://prezi.com/wz7vhjycl7e6/my-prezi" autofocus>',
+            persistent: false,
+            buttons: { "Share": true , "Cancel": false},
+            defaultButton: 1,
+            submit: function(e,v,m,f){
+                e.preventDefault();
+                if(v)
+                {
+                    var preziUrl = document.getElementById('preziUrl');
+
+                    if (preziUrl.value)
+                    {
+                        if (preziUrl.value.indexOf('http://prezi.com/') != 0
+                            && preziUrl.value.indexOf('https://prezi.com/') != 0)
+                        {
+                            $.prompt.goToState('state1');
+                            return false;
+                        }
+                        else {
+                            var presIdTmp = preziUrl.value.substring(preziUrl.value.indexOf("prezi.com/") + 10);
+                            if (presIdTmp.indexOf('/') < 2) {
+                                $.prompt.goToState('state1');
+                                return false;
+                            }
+                            else {
+                                connection.emuc.addPreziToPresence(preziUrl.value, 0);
+                                connection.emuc.sendPresence();
+                                $.prompt.close();
+                            }
+                        }
+                    }
+                }
+                else
+                    $.prompt.close();
+            }
+        },
+        state1: {
+            html:   '<h2>Share a Prezi</h2>' +
+                    'Please provide a correct prezi link.',
+            persistent: false,
+            buttons: { "Back": true, "Cancel": false },
+            defaultButton: 1,
+            submit:function(e,v,m,f) {
+                e.preventDefault();
+                if(v==0)
+                    $.prompt.close();
+                else
+                    $.prompt.goToState('state0');
+            }
+        }
+        };
+
+        var myPrompt = jQuery.prompt(openPreziState);
+        
+        myPrompt.on('impromptu:loaded', function(e) {
+                    document.getElementById('preziUrl').focus();
+                    });
+        myPrompt.on('impromptu:statechanged', function(e) {
+                    document.getElementById('preziUrl').focus();
+                    });
+    }
+}
+
 /*
  * Locks / unlocks the room.
  */
 function lockRoom(lock) {
-    console.log("LOCK", sharedKey);
     if (lock)
         connection.emuc.lockRoom(sharedKey);
     else
@@ -695,6 +977,11 @@ function openChat() {
  */
 function showToolbar() {
     $('#toolbar').css({visibility:"visible"});
+    if (focus != null)
+    {
+//        TODO: Enable settings functionality. Need to uncomment the settings button in index.html.
+//        $('#settingsButton').css({visibility:"visible"});
+    }
 }
 
 /*
@@ -745,6 +1032,15 @@ function showFocusIndicator() {
     }
 }
 
+function addRemoteVideoContainer(id) {
+    var container = document.createElement('span');
+    container.id = id;
+    container.className = 'videocontainer';
+    var remotes = document.getElementById('remoteVideos');
+    remotes.appendChild(container);
+    return container;
+}
+
 /*
  * Creates the element indicating the focus of the conference.
  */

css/main.css

@@ -21,14 +21,15 @@ html, body{
     margin-left: auto;
     margin-right: auto;
 }
-.videocontainer>video {
+#presentation, .videocontainer>video {
     position: absolute;
     left: 0px;
     top: 0px;
-    z-index: 0;
+    z-index: 1;
     width: 100%;
     height: 100%;
 }
+
 .videocontainer>span {
     display: none; /* enable when you want nicks to be shown */
     position: absolute;
@@ -39,9 +40,6 @@ html, body{
     font-size: 10pt;
 }
 
-#largeVideo {
-}
-
 #localVideo {
     -moz-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);
@@ -168,11 +166,6 @@ html, body{
     background-color:#087dba;
 }
 
-#toolbar {
-    visibility:hidden;
-    height:39px;
-}
-
 #left {
 	display:block;
     position: absolute;
@@ -207,6 +200,10 @@ html, body{
     visibility: hidden;
 }
 
+#settingsButton {
+    visibility: hidden;
+}
+
 .button {
     display: inline-block;
     position: relative;
@@ -274,7 +271,7 @@ a.button:hover {
     z-index:1;
 }
 
-input, textarea {
+input[type='text'], textarea {
     border: 0px none;
     display: inline-block;
     font-size: 14px;
@@ -292,7 +289,7 @@ input, textarea {
     resize: none; /* prevents the user-resizing, adjust to taste */
 }
 
-input, textarea:focus {
+input[type='text'], textarea:focus {
     box-shadow: inset 0 0 3px 2px #ACD8F0; /* provides a more style-able
                                          replacement to the outline */
 }
@@ -359,4 +356,22 @@ form {
     font-size: 11pt;
     text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
     border: 0px;
+    z-index: 2;
+}
+
+#reloadPresentation {
+    display: none;
+    position: absolute;
+    color: #FFFFFF;
+    top: 0;
+    right: 0;
+    padding: 10px 10px;
+    font-size: 11pt;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    background-clip: padding-box;
+    -webkit-border-radius: 5px;
+    -webkit-background-clip: padding-box;
+    z-index: 2;
 }

css/modaldialog.css

@@ -12,8 +12,11 @@
 }
 
 .jqistates input {
+    margin: 10px 0;
+}
+
+.jqistates input[type="text"] {
     width: 100%;
-    margin: 20px 0;
 }
 
 .jqibuttons button {

index.html

@@ -6,14 +6,15 @@
     <script src="libs/colibri.js?v=3"></script><!-- colibri focus implementation -->
     <script src="muc.js?v=3"></script><!-- simple MUC library -->
     <script src="estos_log.js?v=1"></script><!-- simple stanza logger -->
-    <script src="app.js?v=3"></script><!-- application logic -->
+    <script src="app.js?v=10"></script><!-- application logic -->
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=3"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=10"/>
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=2">
     <link rel="stylesheet" href="css/modaldialog.css?v=2">
     <script src="libs/jquery-impromptu.js"></script>
     <script src="libs/jquery.autosize.js"></script>
     <script src="config.js"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
+    <script src="libs/prezi_player.js"></script>
   </head>
   <body>
     <div id="header">
@@ -29,6 +30,12 @@
             <a class="button" onclick="openLinkDialog();"><i title="Invite others" class="fa fa-link fa-lg"></i></a>
             <div class="header_button_separator"></div>
             <a class="button" onclick='openChat();'><i id="chat" title="Open chat" class="fa fa-comments fa-lg"></i></a>
+            <div class="header_button_separator"></div>
+            <a class="button" onclick='openPreziDialog();'><i title="Share prezi" class="fa fa-desktop fa-lg"></i></a>
+            <!--span id="settingsButton">
+                <div class="header_button_separator"></div>
+                <a class="button" onclick='openSettingsDialog();'><i title="Settings" class="fa fa-cog fa-lg"></i></a>
+            </span-->
         </span>
     </div>
     <div id="settings">
@@ -43,8 +50,10 @@
 
     <div id="videospace">
         <div class="fade_line"></div>
-        <div class="videocontainer">
-          <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
+        <div id="largeVideoContainer" class="videocontainer">
+            <div id="reloadPresentation"><a onclick='reloadPresentation();'><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
+            <div id="presentation"></div>
+            <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
         </div>
         <div class="fade_line"></div>
         <div id="remoteVideos">

libs/prezi_player.js

@@ -0,0 +1,259 @@
+(function() {
+    "use strict";
+    var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
+    window.PreziPlayer = (function() {
+
+        PreziPlayer.API_VERSION = 1;
+        PreziPlayer.CURRENT_STEP = 'currentStep';
+        PreziPlayer.CURRENT_OBJECT = 'currentObject';
+        PreziPlayer.STATUS_LOADING = 'loading';
+        PreziPlayer.STATUS_READY = 'ready';
+        PreziPlayer.STATUS_CONTENT_READY = 'contentready';
+        PreziPlayer.EVENT_CURRENT_STEP = "currentStepChange";
+        PreziPlayer.EVENT_CURRENT_OBJECT = "currentObjectChange";
+        PreziPlayer.EVENT_STATUS = "statusChange";
+        PreziPlayer.EVENT_PLAYING = "isAutoPlayingChange";
+        PreziPlayer.EVENT_IS_MOVING = "isMovingChange";
+        PreziPlayer.domain = "http://prezi.com";
+        PreziPlayer.path = "/player/";
+        PreziPlayer.players = {};
+        PreziPlayer.binded_methods = ['changesHandler'];
+
+        PreziPlayer.createMultiplePlayers = function(optionArray){
+            for(var i=0; i<optionArray.length; i++) {
+                var optionSet = optionArray[i];
+                new PreziPlayer(optionSet.id, optionSet);
+            };
+        };
+
+        PreziPlayer.messageReceived = function(event){
+            var message, item, player;
+            try {
+                message = JSON.parse(event.data);
+            } catch (e) {}
+            if (message.id && (player = PreziPlayer.players[message.id])){
+                if (player.options.debug === true) {
+                    if (console && console.log) console.log('received', message);
+                }
+                if (message.type === "changes"){
+                    player.changesHandler(message);
+                }
+                for (var i=0; i<player.callbacks.length; i++) {
+                    item = player.callbacks[i];
+                    if (item && message.type === item.event){
+                        item.callback(message);
+                    }
+                }
+            }
+        };
+
+        function PreziPlayer(id, options) {
+            var params, paramString = "", _this = this;
+            if (PreziPlayer.players[id]){
+                PreziPlayer.players[id].destroy();
+            }
+            for(var i=0; i<PreziPlayer.binded_methods.length; i++) {
+                var method_name = PreziPlayer.binded_methods[i];
+                _this[method_name] = __bind(_this[method_name], _this);
+            };
+            options = options || {};
+            this.options = options;
+            this.values = {'status': PreziPlayer.STATUS_LOADING};
+            this.values[PreziPlayer.CURRENT_STEP] = 0;
+            this.values[PreziPlayer.CURRENT_OBJECT] = null;
+            this.callbacks = [];
+            this.id = id;
+            this.embedTo = document.getElementById(id);
+            if (!this.embedTo) {
+                throw "The element id is not available.";
+            }
+            this.iframe = document.createElement('iframe');
+            params = [
+                { name: 'oid', value: options.preziId },
+                { name: 'explorable', value: options.explorable ? 1 : 0 },
+                { name: 'controls', value: options.controls ? 1 : 0 }
+            ];
+            for(var i=0; i<params.length; i++) {
+                var param = params[i];
+                paramString += (i===0 ? "?" : "&") + param.name + "=" + param.value;
+            };
+            this.iframe.src = PreziPlayer.domain + PreziPlayer.path + paramString;
+            this.iframe.frameBorder = 0;
+            this.iframe.scrolling = "no";
+            this.iframe.width = options.width || 640;
+            this.iframe.height = options.height || 480;
+            this.embedTo.innerHTML = '';
+            try {
+                this.embedTo.appendChild(this.iframe);
+            }
+            catch (err) {
+                console.log("CATCH ERROR");
+            }
+                          
+
+            this.initPollInterval = setInterval(function(){
+                _this.sendMessage({'action': 'init'});
+            }, 200);
+            PreziPlayer.players[id] = this;
+        }
+
+        PreziPlayer.prototype.changesHandler = function(message) {
+            var key, value, j, item;
+            if (this.initPollInterval) {
+                clearInterval(this.initPollInterval);
+                this.initPollInterval = false;
+            }
+            for (key in message.data) {
+                if (message.data.hasOwnProperty(key)){
+                    value = message.data[key];
+                    this.values[key] = value;
+                    for (j=0; j<this.callbacks.length; j++) {
+                        item = this.callbacks[j];
+                        if (item && item.event === key + "Change"){
+                            item.callback({type: item.event, value: value});
+                        }
+                    }
+                }
+            }
+        };
+
+        PreziPlayer.prototype.destroy = function() {
+            if (this.initPollInterval) {
+                clearInterval(this.initPollInterval);
+                this.initPollInterval = false;
+            }
+            this.embedTo.innerHTML = '';
+        };
+
+        PreziPlayer.prototype.sendMessage = function(message) {
+            if (this.options.debug === true) {
+                if (console && console.log) console.log('sent', message);
+            }
+            message.version = PreziPlayer.API_VERSION;
+            message.id = this.id;
+            return this.iframe.contentWindow.postMessage(JSON.stringify(message), '*');
+        };
+
+        PreziPlayer.prototype.nextStep = /* nextStep is DEPRECATED */
+        PreziPlayer.prototype.flyToNextStep = function() {
+            return this.sendMessage({
+                'action': 'present',
+                'data': ['moveToNextStep']
+            });
+        };
+
+        PreziPlayer.prototype.previousStep = /* previousStep is DEPRECATED */
+        PreziPlayer.prototype.flyToPreviousStep = function() {
+            return this.sendMessage({
+                'action': 'present',
+                'data': ['moveToPrevStep']
+            });
+        };
+
+        PreziPlayer.prototype.toStep = /* toStep is DEPRECATED */
+        PreziPlayer.prototype.flyToStep = function(step) {
+            return this.sendMessage({
+                'action': 'present',
+                'data': ['moveToStep', step]
+            });
+        };
+
+        PreziPlayer.prototype.toObject = /* toObject is DEPRECATED */
+        PreziPlayer.prototype.flyToObject = function(objectId) {
+            return this.sendMessage({
+                'action': 'present',
+                'data': ['moveToObject', objectId]
+            });
+        };
+
+        PreziPlayer.prototype.play = function(defaultDelay) {
+            return this.sendMessage({
+                'action': 'present',
+                'data': ['startAutoPlay', defaultDelay]
+            });
+        };
+
+        PreziPlayer.prototype.stop = function() {
+            return this.sendMessage({
+                'action': 'present',
+                'data': ['stopAutoPlay']
+            });
+        };
+
+        PreziPlayer.prototype.pause = function(defaultDelay) {
+            return this.sendMessage({
+                'action': 'present',
+                'data': ['pauseAutoPlay', defaultDelay]
+            });
+        };
+
+        PreziPlayer.prototype.getCurrentStep = function() {
+            return this.values.currentStep;
+        };
+
+        PreziPlayer.prototype.getCurrentObject = function() {
+            return this.values.currentObject;
+        };
+
+        PreziPlayer.prototype.getStatus = function() {
+            return this.values.status;
+        };
+
+        PreziPlayer.prototype.isPlaying = function() {
+            return this.values.isAutoPlaying;
+        };
+
+        PreziPlayer.prototype.getStepCount = function() {
+            return this.values.stepCount;
+        };
+
+        PreziPlayer.prototype.getTitle = function() {
+            return this.values.title;
+        };
+
+        PreziPlayer.prototype.setDimensions = function(dims) {
+            for (var parameter in dims) {
+                this.iframe[parameter] = dims[parameter];
+            }
+        }
+
+        PreziPlayer.prototype.getDimensions = function() {
+            return {
+                width: parseInt(this.iframe.width, 10),
+                height: parseInt(this.iframe.height, 10)
+            }
+        }
+
+        PreziPlayer.prototype.on = function(event, callback) {
+            this.callbacks.push({
+                event: event,
+                callback: callback
+            });
+        };
+
+        PreziPlayer.prototype.off = function(event, callback) {
+            var j, item;
+            if (event === undefined) {
+                this.callbacks = [];
+            }
+            j = this.callbacks.length;
+            while (j--) {
+                item = this.callbacks[j];
+                if (item && item.event === event && (callback === undefined || item.callback === callback)){
+                    this.callbacks.splice(j, 1);
+                }
+            }
+        };
+
+        if (window.addEventListener) {
+            window.addEventListener('message', PreziPlayer.messageReceived, false);
+        } else {
+            window.attachEvent('onmessage', PreziPlayer.messageReceived);
+        }
+
+        return PreziPlayer;
+
+    })();
+
+})();

muc.js

@@ -7,13 +7,21 @@ Strophe.addConnectionPlugin('emuc', {
     roomjid: null,
     myroomjid: null,
     members: {},
+    presMap: {},
+    preziMap: {},
     joined: false,
     isOwner: false,
     init: function (conn) {
         this.connection = conn;
     },
+    initPresenceMap: function (myroomjid) {
+        this.presMap['to'] = myroomjid;
+        this.presMap['xns'] = 'http://jabber.org/protocol/muc';
+    },
     doJoin: function (jid, password) {
         this.myroomjid = jid;
+        this.initPresenceMap(this.myroomjid);
+
         if (!this.roomjid) {
             this.roomjid = Strophe.getBareJidFromJid(jid);
             // add handlers (just once)
@@ -30,11 +38,35 @@ Strophe.addConnectionPlugin('emuc', {
         this.connection.send(join);
     },
     onPresence: function (pres) {
+        console.log("PRESENCE", pres);
         var from = pres.getAttribute('from');
         var type = pres.getAttribute('type');
         if (type != null) {
             return true;
         }
+
+        var presentation = $(pres).find('>prezi');
+        if (presentation.length)
+        {
+            var url = presentation.attr('url');
+            var current = presentation.find('>current').text();
+            console.log('presentation info received from', from, url);
+
+            if (this.preziMap[from] == null) {
+                this.preziMap[from] = url;
+
+                $(document).trigger('presentationadded.muc', [from, url, current]);
+            }
+            else {
+                $(document).trigger('gotoslide.muc', [from, url, current]);
+            }
+        }
+        else if (this.preziMap[from] != null) {
+            var url = this.preziMap[from];
+            delete this.preziMap[from];
+            $(document).trigger('presentationremoved.muc', [from, url]);
+        }
+
         if ($(pres).find('>x[xmlns="http://jabber.org/protocol/muc#user"]>status[code="201"]').length) {
             // http://xmpp.org/extensions/xep-0045.html#createroom-instant
             this.isOwner = true;
@@ -110,7 +142,6 @@ Strophe.addConnectionPlugin('emuc', {
                     var formsubmit = $iq({to: ob.roomjid, type: 'set'}).c('query', {xmlns: 'http://jabber.org/protocol/muc#owner'});
                     formsubmit.c('x', {xmlns: 'jabber:x:data', type: 'submit'});
                     formsubmit.c('field', {'var': 'FORM_TYPE'}).c('value').t('http://jabber.org/protocol/muc#roomconfig').up().up();
-                    console.log("THE KEY TO SET", key);
                     formsubmit.c('field', {'var': 'muc#roomconfig_roomsecret'}).c('value').t(key).up().up();
                     // FIXME: is muc#roomconfig_passwordprotectedroom required?
                     this.connection.sendIQ(formsubmit,
@@ -129,6 +160,55 @@ Strophe.addConnectionPlugin('emuc', {
                 console.warn('setting password failed', err);
             }
         );
+    },
+    sendPresence: function () {
+        var pres = $pres({to: this.presMap['to'] });
+        pres.c('x', {xmlns: this.presMap['xns']}).up();
+        if (this.presMap['prezins']) {
+            pres.c('prezi', {xmlns: this.presMap['prezins'], 'url': this.presMap['preziurl']}).
+                            c('current').t(this.presMap['prezicurrent']).up().up();
+        }
+
+        if (this.presMap['medians'])
+        {
+            pres.c('media', {xmlns: this.presMap['medians']});
+            var sourceNumber = 0;
+            Object.keys(this.presMap).forEach(function (key) {
+                if (key.indexOf('source') >= 0) {
+                     sourceNumber++;
+                }
+            });
+            if (sourceNumber > 0)
+                for (var i = 1; i <= sourceNumber/2; i ++) {
+                    pres.c('source',
+                           {type: this.presMap['source' + i + '_type'],
+                           ssrc: this.presMap['source' + i + '_ssrc']}).up();
+                }
+        }
+        pres.up();
+        connection.send(pres);
+    },
+    addMediaToPresence: function (sourceNumber, mtype, ssrcs) {
+        if (!this.presMap['medians'])
+            this.presMap['medians'] = 'http://estos.de/ns/mjs';
+
+        this.presMap['source' + sourceNumber + '_type'] = mtype;
+        this.presMap['source' + sourceNumber + '_ssrc'] = ssrcs;
+    },
+    addPreziToPresence: function (url, currentSlide) {
+        this.presMap['prezins'] = 'http://jitsi.org/jitmeet/prezi';
+        this.presMap['preziurl'] = url;
+        this.presMap['prezicurrent'] = currentSlide;
+    },
+    removePreziFromPresence: function () {
+        delete this.presMap['prezins'];
+        delete this.presMap['preziurl'];
+        delete this.presMap['prezicurrent'];
+    },
+    addCurrentSlideToPresence: function (currentSlide) {
+        this.presMap['prezicurrent'] = currentSlide;
+    },
+    getPrezi: function (roomjid) {
+        return this.preziMap[roomjid];
     }
 });
-