initial commit

LICENSE

@@ -1,6 +1,7 @@
 The MIT License (MIT)
 
 Copyright (c) 2013 ESTOS GmbH
+Copyright (c) 2013 BlueJimp SARL
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,4 +1,5 @@
-meet
+meet - a colibri.js sample application
 ====
+A WebRTC-powered multi-user videochat. For a live demo, check out either https://meet.estos.de/ or https://meet.jit.si/.
 
-colibri.js sample application
+Built using [colibri.js](https://github.com/ESTOS/colibri.js) and [strophe.jingle](https://github.com/ESTOS/strophe.jingle), powered by the [jitsi-videobridge](https://github.com/jitsi/jitsi-videobridge) and [prosody](http://prosody.im/).

app.js

@@ -0,0 +1,427 @@
+/* jshint -W117 */
+/* application specific logic */
+var connection = null;
+var focus = null;
+var RTC;
+var RTCPeerConnection = null;
+var nickname = null;
+var sharedKey = '';
+var roomUrl = null;
+
+function init() {
+    RTC = setupRTC();
+    if (RTC === null) {
+        window.location.href = '/webrtcrequired.html';
+        return;
+    } else if (RTC.browser != 'chrome') {
+        window.location.href = '/chromeonly.html';
+        return;
+    }
+    RTCPeerconnection = RTC.peerconnection;
+
+    connection = new Strophe.Connection(document.getElementById('boshURL').value || config.bosh || '/http-bind');
+    /*
+    connection.rawInput = function (data) { console.log('RECV: ' + data); };
+    connection.rawOutput = function (data) { console.log('SEND: ' + data); };
+    */
+    connection.jingle.pc_constraints = RTC.pc_constraints;
+
+    var jid = document.getElementById('jid').value || config.hosts.domain || window.location.hostname;
+
+    connection.connect(jid, document.getElementById('password').value, function (status) {
+        if (status == Strophe.Status.CONNECTED) {
+            console.log('connected');
+            getUserMediaWithConstraints(['audio', 'video'], '360');
+            document.getElementById('connect').disabled = true;
+        } else {
+            console.log('status', status);
+        }
+    });
+}
+
+function doJoin() {
+    var roomnode = null;
+    var path = window.location.pathname;
+    var roomjid;
+    if (path.length > 1) {
+        roomnode = path.substr(1).toLowerCase();
+    } else {
+        roomnode = Math.random().toString(36).substr(2, 20);
+        window.history.pushState('VideoChat', 'Room: ' + roomnode, window.location.pathname + roomnode);
+    }
+    roomjid = roomnode + '@' + config.hosts.muc;
+
+    if (config.useNicks) {
+        var nick = window.prompt('Your nickname (optional)');
+        if (nick) {
+            roomjid += '/' + nick;
+        } else {
+            roomjid += '/' + Strophe.getNodeFromJid(connection.jid);
+        }
+    } else {
+        roomjid += '/' + Strophe.getNodeFromJid(connection.jid);
+    }
+    connection.emuc.doJoin(roomjid);
+}
+
+$(document).bind('mediaready.jingle', function (event, stream) {
+    connection.jingle.localStream = stream;
+    RTC.attachMediaStream($('#localVideo'), stream);
+    document.getElementById('localVideo').muted = true;
+    document.getElementById('localVideo').autoplay = true;
+    document.getElementById('localVideo').volume = 0;
+
+    document.getElementById('largeVideo').volume = 0;
+    document.getElementById('largeVideo').src = document.getElementById('localVideo').src;
+    doJoin();
+});
+
+$(document).bind('mediafailure.jingle', function () {
+    // FIXME
+});
+  
+$(document).bind('remotestreamadded.jingle', function (event, data, sid) {
+    function waitForRemoteVideo(selector, sid) {
+        var sess = connection.jingle.sessions[sid];
+        videoTracks = data.stream.getVideoTracks();
+        if (videoTracks.length === 0 || selector[0].currentTime > 0) {
+            RTC.attachMediaStream(selector, data.stream); // FIXME: why do i have to do this for FF?
+            $(document).trigger('callactive.jingle', [selector, sid]);
+            console.log('waitForremotevideo', sess.peerconnection.iceConnectionState, sess.peerconnection.signalingState);
+        } else {
+            setTimeout(function () { waitForRemoteVideo(selector, sid); }, 100);
+        }
+    }
+    var sess = connection.jingle.sessions[sid];
+    var vid = document.createElement('video');
+    var id = 'remoteVideo_' + sid + '_' + data.stream.id;
+    vid.id = id;
+    vid.autoplay = true;
+    vid.oncontextmenu = function () { return false; };
+    var remotes = document.getElementById('remoteVideos');
+    remotes.appendChild(vid);
+    var sel = $('#' + id);
+    sel.hide();
+    RTC.attachMediaStream(sel, data.stream);
+    waitForRemoteVideo(sel, sid);
+    data.stream.onended = function () {
+        console.log('stream ended', this.id);
+        var src = $('#' + id).attr('src');
+        $('#' + id).remove();
+        if (src === $('#largeVideo').attr('src')) {
+            // this is currently displayed as large
+            // pick the last visible video in the row
+            // if nobody else is left, this picks the local video
+            var pick = $('#remoteVideos :visible:last').get(0);
+            // mute if localvideo
+            document.getElementById('largeVideo').volume = pick.volume;
+            document.getElementById('largeVideo').src = pick.src;
+        }
+        resizeThumbnails();
+    };
+    sel.click(
+        function () {
+            console.log('hover in', $(this).attr('src'));
+            var newSrc = $(this).attr('src');
+            if ($('#largeVideo').attr('src') != newSrc) {
+                document.getElementById('largeVideo').volume = 1;
+                $('#largeVideo').fadeOut(300, function () {
+                    $(this).attr('src', newSrc);
+                    $(this).fadeIn(300);
+                });
+            }
+        }
+    );
+});
+
+$(document).bind('callincoming.jingle', function (event, sid) {
+    var sess = connection.jingle.sessions[sid];
+    // TODO: check affiliation and/or role
+    console.log('emuc data for', sess.peerjid, connection.emuc.members[sess.peerjid]);
+    sess.sendAnswer();
+    sess.accept();
+});
+
+$(document).bind('callactive.jingle', function (event, videoelem, sid) {
+    console.log('call active');
+    if (videoelem.attr('id').indexOf('mixedmslabel') == -1) {
+        // ignore mixedmslabela0 and v0
+        videoelem.show();
+        resizeThumbnails();
+
+        document.getElementById('largeVideo').volume = 1;
+        $('#largeVideo').attr('src', videoelem.attr('src'));
+    }
+});
+
+$(document).bind('callterminated.jingle', function (event, sid, reason) {
+    // FIXME
+});
+
+
+$(document).bind('joined.muc', function (event, jid, info) {
+    console.log('onJoinComplete', info);
+    updateRoomUrl(window.location.href);
+    if (Object.keys(connection.emuc.members).length < 1) {
+        focus = new ColibriFocus(connection, config.hosts.bridge);
+        return;
+    }
+});
+
+$(document).bind('entered.muc', function (event, jid, info) {
+    console.log('entered', jid, info);
+    console.log(focus);
+    if (focus !== null) {
+        // FIXME: this should prepare the video
+        if (focus.confid === null) {
+            console.log('make new conference with', jid);
+            focus.makeConference(Object.keys(connection.emuc.members));
+        } else {
+            console.log('invite', jid, 'into conference');
+            focus.addNewParticipant(jid);
+        }
+    }
+});
+
+$(document).bind('left.muc', function (event, jid) {
+    console.log('left', jid);
+    connection.jingle.terminateByJid(jid);
+    // FIXME: this should actually hide the video already for a nicer UX
+
+    if (Object.keys(connection.emuc.members).length === 0) {
+        console.log('everyone left');
+        if (focus !== null) {
+            // FIXME: closing the connection is a hack to avoid some 
+            // problemswith reinit
+            if (focus.peerconnection !== null) {
+                focus.peerconnection.close();
+            }
+            focus = new ColibriFocus(connection, config.hosts.bridge);
+        }
+    }
+});
+
+function toggleVideo() {
+    if (!(connection && connection.jingle.localStream)) return;
+    for (var idx = 0; idx < connection.jingle.localStream.getVideoTracks().length; idx++) {
+        connection.jingle.localStream.getVideoTracks()[idx].enabled = !connection.jingle.localStream.getVideoTracks()[idx].enabled;
+    }
+}
+
+function toggleAudio() {
+    if (!(connection && connection.jingle.localStream)) return;
+    for (var idx = 0; idx < connection.jingle.localStream.getAudioTracks().length; idx++) {
+        connection.jingle.localStream.getAudioTracks()[idx].enabled = !connection.jingle.localStream.getAudioTracks()[idx].enabled;
+    }
+}
+
+function resizeLarge() {
+    var availableHeight = window.innerHeight;
+    var chatspaceWidth = $('#chatspace').width();
+
+    var numvids = $('#remoteVideos>video:visible').length;
+    if (numvids < 5)
+        availableHeight -= 100; // min thumbnail height for up to 4 videos
+    else
+        availableHeight -= 50; // min thumbnail height for more than 5 videos
+
+    availableHeight -= 79; // padding + link ontop
+    var availableWidth = window.innerWidth - chatspaceWidth;
+    var aspectRatio = 16.0 / 9.0;
+    if (availableHeight < availableWidth / aspectRatio) {
+        availableWidth = Math.floor(availableHeight * aspectRatio);
+    }
+    if (availableWidth < 0 || availableHeight < 0) return;
+    $('#largeVideo').width(availableWidth);
+    $('#largeVideo').height(availableWidth / aspectRatio);
+    resizeThumbnails();
+}
+
+function resizeThumbnails() {
+    // Calculate the available height, which is the inner window height minus 39px for the header
+    // minus 4px for the delimiter lines on the top and bottom of the large video,
+    // minus the 36px space inside the remoteVideos container used for highlighting shadow.
+    var availableHeight = window.innerHeight - $('#largeVideo').height() - 79;
+    var numvids = $('#remoteVideos>video:visible').length;
+    // Remove the 1px borders arround videos.
+    var availableWinWidth = $('#remoteVideos').width() - 2 * numvids;
+    var availableWidth = availableWinWidth / numvids;
+    var aspectRatio = 16.0 / 9.0;
+    var maxHeight = Math.min(160, availableHeight);
+    availableHeight = Math.min(maxHeight, availableWidth / aspectRatio);
+    if (availableHeight < availableWidth / aspectRatio) {
+        availableWidth = Math.floor(availableHeight * aspectRatio);
+    }
+    // size videos so that while keeping AR and max height, we have a nice fit
+    $('#remoteVideos').height(availableHeight + 36); // add the 2*18px border used for highlighting shadow.
+    $('#remoteVideos>video:visible').width(availableWidth);
+    $('#remoteVideos>video:visible').height(availableHeight);
+}
+
+$(document).ready(function () {
+    $('#nickinput').keydown(function(event) {
+        if (event.keyCode == 13) {
+            event.preventDefault();
+            var val = this.value;
+            this.value = '';
+            if (!nickname) {
+                nickname = val;
+                $('#nickname').css({visibility:"hidden"});
+                $('#chatconversation').css({visibility:'visible'});
+                $('#usermsg').css({visibility:'visible'});
+                $('#usermsg').focus();
+                return;
+            }
+        }
+    });
+
+    $('#usermsg').keydown(function(event) {
+        if (event.keyCode == 13) {
+            event.preventDefault();
+            var message = this.value;
+            $('#usermsg').val('').trigger('autosize.resize');
+            this.focus();
+            connection.emuc.sendMessage(message, nickname);
+        }
+    });
+
+    $('#usermsg').autosize();
+
+    resizeLarge();
+    $(window).resize(function () {
+        resizeLarge();
+    });
+    if (!$('#settings').is(':visible')) {
+        console.log('init');
+        init();
+    } else {
+        loginInfo.onsubmit = function (e) {
+            if (e.preventDefault) e.preventDefault();
+            $('#settings').hide();
+            init();
+        };
+    }
+});
+
+$(window).bind('beforeunload', function () {
+    if (connection && connection.connected) {
+        // ensure signout
+        $.ajax({
+            type: 'POST',
+            url: config.bosh,
+            async: false,
+            cache: false,
+            contentType: 'application/xml',
+            data: "<body rid='" + (connection.rid || connection._proto.rid) + "' xmlns='http://jabber.org/protocol/httpbind' sid='" + (connection.sid || connection._proto.sid) + "' type='terminate'><presence xmlns='jabber:client' type='unavailable'/></body>",
+            success: function (data) {
+                console.log('signed out');
+                console.log(data);
+            },
+            error: function (XMLHttpRequest, textStatus, errorThrown) {
+                console.log('signout error', textStatus + ' (' + errorThrown + ')');
+            }
+        });
+    }
+});
+
+function updateChatConversation(nick, message)
+{
+    var divClassName = '';
+    if (nickname == nick)
+        divClassName = "localuser";
+    else
+        divClassName = "remoteuser";
+    
+    $('#chatconversation').append('<div class="' + divClassName + '"><b>' + nick + ': </b>' + message + '</div>');
+    $('#chatconversation').animate({ scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
+}
+
+function buttonClick(id, classname) {
+    $(id).toggleClass(classname); // add the class to the clicked element
+}
+
+function openLockDialog() {
+    if (sharedKey)
+        $.prompt("Are you sure you would like to remove your secret key?",
+        {
+            title: "Remove secrect key",
+            persistent: false,
+            buttons: { "Remove": true, "Cancel": false},
+            defaultButton: 1,
+            submit: function(e,v,m,f){
+                if(v)
+                {
+                    sharedKey = '';
+                    lockRoom();
+                }
+            }
+            });
+    else
+        $.prompt('<h2>Set a secrect key to lock your room</h2>' +
+                 '<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)
+                    {
+                        var lockKey = document.getElementById('lockKey');
+
+                    if (lockKey.value != null)
+                    {
+                        sharedKey = lockKey.value;
+                        lockRoom(true);
+                    }
+                }
+            }
+        });
+}
+
+function openLinkDialog() {
+    $.prompt('<input id="inviteLinkRef" type="text" value="' + roomUrl + '" onclick="this.select();">',
+             {
+             title: "Share this link with everyone you want to invite",
+             persistent: false,
+             buttons: { "Cancel": false},
+             loaded: function(event) {
+             document.getElementById('inviteLinkRef').select();
+             }
+             });
+}
+
+function lockRoom(lock) {
+    connection.emuc.lockRoom(sharedKey);
+    
+    buttonClick("#lockIcon", "fa fa-unlock fa-lg fa fa-lock fa-lg");
+}
+
+function openChat() {
+    var chatspace = $('#chatspace');
+    var videospace = $('#videospace');
+    var chatspaceWidth = chatspace.width();
+
+    if (chatspace.css("opacity") == 1) {
+        chatspace.animate({opacity: 0}, "fast");
+        chatspace.animate({width: 0}, "slow");
+        videospace.animate({right: 0, width:"100%"}, "slow");
+    }
+    else {
+        chatspace.animate({width:"20%"}, "slow");
+        chatspace.animate({opacity: 1}, "slow");
+        videospace.animate({right:chatspaceWidth, width:"80%"}, "slow");
+    }
+    
+    // Request the focus in the nickname field or the chat input field.
+    if ($('#nickinput').is(':visible'))
+        $('#nickinput').focus();
+    else
+        $('#usermsg').focus();
+}
+
+function updateRoomUrl(newRoomUrl) {
+    roomUrl = newRoomUrl;
+}

chromeonly.html

@@ -0,0 +1 @@
+Sorry, this currently only works with chrome because it uses "Plan B".

config.js

@@ -0,0 +1,9 @@
+var config = {
+    hosts: {
+        domain: 'your.domain.example',
+        muc: 'conference.your.domain.example', // FIXME: use XEP-0030
+        bridge: 'jitsi-videobridge.your.domain.example' // FIXME: use XEP-0030
+    },
+    useNicks: false,
+    bosh: '/http-bind' // FIXME: use xep-0156 for that
+};

css/jquery-impromptu.css

@@ -0,0 +1,125 @@
+/*
+------------------------------
+	Impromptu
+------------------------------
+*/
+.jqifade{
+	position: absolute; 
+	background-color: #000;
+}
+div.jqi{ 
+	width: 400px; 
+	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
+	position: absolute; 
+	background-color: #ffffff; 
+	font-size: 11px; 
+	text-align: left; 
+	border: solid 1px #eeeeee;
+	border-radius: 6px;
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+	padding: 7px;
+}
+div.jqi .jqicontainer{ 
+}
+div.jqi .jqiclose{ 
+	position: absolute;
+	top: 4px; right: -2px; 
+	width: 18px; 
+	cursor: default; 
+	color: #bbbbbb; 
+	font-weight: bold; 
+}
+div.jqi .jqistate{
+	background-color: #fff;
+}
+div.jqi .jqititle{
+	padding: 5px 10px;
+	font-size: 16px; 
+	line-height: 20px; 
+	border-bottom: solid 1px #eeeeee;
+}
+div.jqi .jqimessage{ 
+	padding: 10px; 
+	line-height: 20px; 
+	color: #444444; 
+}
+div.jqi .jqibuttons{ 
+	text-align: right; 
+	margin: 0 -7px -7px -7px;
+	border-top: solid 1px #e4e4e4; 
+	background-color: #f4f4f4;
+	border-radius: 0 0 6px 6px;
+	-moz-border-radius: 0 0 6px 6px;
+	-webkit-border-radius: 0 0 6px 6px;
+}
+div.jqi .jqibuttons button{ 
+	margin: 0;
+	padding: 5px 20px;
+	background-color: transparent;
+	font-weight: normal; 
+	border: none;
+	border-left: solid 1px #e4e4e4; 
+	color: #777; 
+	font-weight: bold; 
+	font-size: 12px; 
+}
+div.jqi .jqibuttons button.jqidefaultbutton{
+	color: #489afe;
+}
+div.jqi .jqibuttons button:hover,
+div.jqi .jqibuttons button:focus{
+	color: #287ade;
+	outline: none;
+}
+.jqiwarning .jqi .jqibuttons{ 
+	background-color: #b95656;
+}
+
+/* sub states */
+div.jqi .jqiparentstate::after{ 
+	background-color: #777;
+	opacity: 0.6;
+	filter: alpha(opacity=60);
+	content: '';
+	position: absolute;
+	top:0;left:0;bottom:0;right:0;
+	border-radius: 6px;
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+}
+div.jqi .jqisubstate{
+	position: absolute;
+	top:0;
+	left: 20%;
+	width: 60%;
+	padding: 7px;
+	border: solid 1px #eeeeee;
+	border-top: none;
+	border-radius: 0 0 6px 6px;
+	-moz-border-radius: 0 0 6px 6px;
+	-webkit-border-radius: 0 0 6px 6px;
+}
+div.jqi .jqisubstate .jqibuttons button{
+	padding: 10px 18px;
+}
+
+/* arrows for tooltips/tours */
+.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}
+
+.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
+.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
+.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }
+
+.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
+.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
+.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }
+
+.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
+.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
+.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }
+
+.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
+.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
+.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }
+

css/main.css

@@ -0,0 +1,318 @@
+html, body{
+    margin:0px;
+    height:100%;
+    color: #424242;
+    font-family:'YanoneKaffeesatzLight',Verdana,Tahoma,Arial;
+	font-weight: 400;
+    background: #e9e9e9;
+}
+
+
+#videospace {
+    display: block;
+    position: absolute;
+    top: 39px;
+    left: 0px;
+    right: 0px;
+    float: left;
+}
+
+#largeVideo {
+    display:block;
+    position:relative;
+    width:1280px;
+    height:720px;
+    margin-left:auto;
+    margin-right:auto;
+    z-index: 0;
+}
+
+#remoteVideos {
+    display:block;
+    position:relative;
+    text-align:center;
+    height:196px;
+    width:auto;
+    overflow: hidden;
+    border:1px solid transparent;
+    font-size:0;
+    z-index: 2;
+}
+
+#remoteVideos video {
+    position:relative;
+    top:18px;
+    height:160px;
+    width:auto;
+    z-index:0;
+    border:1px solid #FFFFFF;
+}
+
+#remoteVideos video:hover {
+    cursor: pointer;
+    cursor: hand;
+    transform:scale(1.08, 1.08);
+    -webkit-transform:scale(1.08, 1.08);
+    transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    background-color: #FFFFFF;
+    -webkit-animation-name: greyPulse;
+    -webkit-animation-duration: 2s;
+    -webkit-animation-iteration-count: 1;
+    -webkit-box-shadow: 0 0 18px #515151;
+    border:1px solid #FFFFFF;
+    z-index: 10;
+}
+
+#chatspace {
+    display:block;
+    position:absolute;
+    float: right;
+    top: 40px;
+    bottom: 0px;
+    right: 0px;
+    width:0;
+    opacity: 0;
+    overflow: hidden;
+    background-color:#f6f6f6;
+    border-left:1px solid #424242;
+}
+
+#chatconversation {
+    display:block;
+    position:relative;
+    top: -120px;
+    float:top;
+    text-align:left;
+    line-height:20px;
+    font-size:14px;
+    padding:5px;
+    height:90%;
+    overflow:scroll;
+    visibility:hidden;
+}
+
+div.localuser {
+    color: #087dba;
+}
+
+div.remoteuser {
+    color: #424242;
+}
+
+#usermsg {
+    position:absolute;
+    bottom: 5px;
+    left: 5px;
+    right: 5px;
+    width: 95%;
+    height: 40px;
+    z-index: 5;
+    visibility:hidden;
+    max-height:150px;
+}
+
+#nickname {
+    position:relative;
+    text-align:center;
+    color: #9d9d9d;
+    font-size: 18;
+    top: 100px;
+    left: 5px;
+    right: 5px;
+    width: 95%;
+}
+
+#nickinput {
+    margin-top: 20px;
+    font-size: 14;
+}
+
+div#spacer {
+    height:5px;
+}
+
+#settings {
+    display:none;
+}
+
+#nowebrtc {
+    display:none;
+}
+
+div#header{
+	display:block;
+    position:relative;
+	width:100%;
+    height:39px;
+    z-index: 1;
+    text-align:center;
+    background-color:#087dba;
+}
+
+div#left {
+	display:block;
+    position: absolute;
+	left: 0px;
+    top: 0px;
+    width: 100px;
+    height: 39px;
+	background-image:url(../images/left1.png);
+	background-repeat:no-repeat;
+	margin: 0;
+	padding: 0;
+}
+
+div#leftlogo {
+    position:absolute;
+    top: 5px;
+    left: 15px;
+    background-image:url(../images/jitsilogo.png);
+    background-repeat:no-repeat;
+    height: 31px;
+    width: 68px;
+    z-index:1;
+}
+
+div#link {
+    display:block;
+    position:relative;
+    height:39px;
+    width:auto;
+    overflow: hidden;
+    z-index:0;
+}
+
+.button {
+    display: inline-block;
+    position: relative;
+    color: #FFFFFF;
+    top: 0;
+    padding: 10px 0px;
+    height: 19px;
+    width: 39px;
+    cursor: pointer;
+    font-size: 19px;
+    text-align: center;
+    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
+}
+
+a.button:hover {
+    top: 0;
+    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;
+}
+
+.no-fa-video-camera, .fa-microphone-slash {
+    color: #636363;
+}
+
+.fade_line {
+    height: 1px;
+    background: black;
+    background: -webkit-gradient(linear, 0 0, 100% 0, from(#e9e9e9), to(#e9e9e9), color-stop(50%, black));
+}
+
+.header_button_separator {
+    display: inline-block;
+    position:relative;
+    top: 7;
+    width: 1px;
+    height: 25px;
+    background: white;
+    background: -webkit-gradient(linear, 0 0, 0 100%, from(#087dba), to(#087dba), color-stop(50%, white));
+}
+
+div#right {
+	display:block;
+    position:absolute;
+    right: 0px;
+    top: 0px;
+	background-image:url(../images/right1.png);
+	background-repeat:no-repeat;
+	margin:0;
+	padding:0;
+	width:100px;
+    height:39px;
+}
+div#rightlogo {
+    position:absolute;
+    top: 6px;
+    right: 15px;
+    background-image:url(../images/estoslogo.png);
+    background-repeat:no-repeat;
+    height: 25px;
+    width: 62px;
+    z-index:1;
+}
+
+input, textarea {
+    border: 0px none;
+    display: inline-block;
+    font-size: 14px;
+    padding: 5px;
+    background: #f3f3f3;
+    border-radius: 3px;
+    font-weight: 100;
+    line-height: 20px;
+    height: 40px;
+    color: #333;
+    font-weight: bold;
+    text-align: left;
+    border:1px solid #ACD8F0;
+    outline: none; /* removes the default outline */
+    resize: none; /* prevents the user-resizing, adjust to taste */
+}
+
+input, textarea:focus {
+    box-shadow: inset 0 0 3px 2px #ACD8F0; /* provides a more style-able
+                                         replacement to the outline */
+}
+
+textarea {
+    overflow: hidden;
+    word-wrap: break-word;
+    resize: horizontal;
+}
+
+button.no-icon {
+    padding: 0 1em;
+}
+
+button {
+    border: none;
+    height: 35px;
+    padding: 0 1em 0 2em;
+    position: relative;
+    border-radius: 3px;
+    font-weight: bold;
+    color: #fff;
+    line-height: 35px;
+    background: #2c8ad2;
+}
+
+button, input, select, textarea {
+    font-size: 100%;
+    margin: 0;
+    vertical-align: baseline;
+}
+
+button, input[type="button"], input[type="reset"], input[type="submit"] {
+    cursor: pointer;
+    -webkit-appearance: button;
+}
+
+form {
+    display: block;
+}
+
+/* Animated text area. */
+.animated {
+    -webkit-transition: height 0.2s;
+    -moz-transition: height 0.2s;
+    transition: height 0.2s;
+}

css/modaldialog.css

@@ -0,0 +1,22 @@
+.jqistates h2 {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+    font-size: 18px;
+    line-height: 25px;
+    text-align: center;
+    color: #424242;
+}
+
+.jqistates input {
+    width: 100%;
+    margin: 20px 0;
+}
+
+.jqibuttons button {
+    margin-right: 5px;
+    float:right;
+}
+
+button.jqidefaultbutton #inviteLinkRef {
+    color: #2c8ad2;
+}

index.html

@@ -0,0 +1,68 @@
+<html>
+  <head>
+    <title>WebRTC, meet the Jitsi Videobridge</title>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+    <script src="libs/strophejingle.bundle.js"></script><!-- strophe.jingle bundle -->
+    <script src="libs/colibri.js"></script><!-- colibri focus implementation -->
+    <script src="muc.js"></script><!-- simple MUC library -->
+    <script src="app.js"></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" />
+    <link rel="stylesheet" href="css/jquery-impromptu.css">
+    <link rel="stylesheet" href="css/modaldialog.css">
+    <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 -->
+  </head>
+  <body>
+    <div id="header">
+        <a href="http://jitsi.org" target="_blank"><div id="leftlogo"></div></a>
+        <a href="http://www.estos.com/" target="_blank"><div id="rightlogo"></div></a>
+        <div id="link">
+            <a class="button" onclick='buttonClick("#mute", "fa fa-microphone fa-lg fa fa-microphone-slash fa-lg");toggleAudio();'><i id="mute" title="Mute / unmute" class="fa fa-microphone fa-lg"></i></a>
+            <div class="header_button_separator"></div>
+            <a class="button" onclick='buttonClick("#video", "fa fa-video-camera fa-lg fa fa-video-camera no-fa-video-camera fa-lg");toggleVideo();'><i id="video" title="Start / stop camera" class="fa fa-video-camera fa-lg"></i></a>
+            <div class="header_button_separator"></div>
+            <a class="button" onclick="openLockDialog();"><i id="lockIcon" title="Lock/unlock room" class="fa fa-unlock fa-lg"></i></a>
+            <div class="header_button_separator"></div>
+            <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>
+            <!--i class='fa fa-external-link'>&nbsp;</i>Others can join you by just going to <span id='roomurl'></span-->
+        </div>
+    </div>
+    <div id="settings">
+      <h1>Connection Settings</h1>
+      <form id="loginInfo">
+        <label>JID: <input id="jid" type="text" name="jid" placeholder="me@example.com"/></label>
+        <label>Password: <input id="password" type="password" name="password" placeholder="secret"/></label>
+        <label>BOSH URL: <input id="boshURL" type="text" name="boshURL" placeholder="/http-bind"/></label>
+        <input id="connect" type="submit" value="Connect" />
+      </form>
+    </div>
+
+    <div id="videospace">
+        <div class="fade_line"></div>
+        <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
+        <div class="fade_line"></div>
+        <div id="remoteVideos">
+            <video id="localVideo" autoplay oncontextmenu="return false;" muted/>
+        </div>
+    </div>
+    <div id="chatspace">
+        <div id="nickname">
+            Enter a nickname in the box below
+            <form>
+                <input type='text' id="nickinput" placeholder='Choose a nickname' autofocus>
+            </form>
+        </div>
+        
+        <!--div><i class="fa fa-comments">&nbsp;</i><span class='nick'></span>:&nbsp;<span class='chattext'></span></div-->
+        <div id="chatconversation"></div>
+        <textarea id="usermsg" class= "animated" placeholder='Enter text...' autofocus></textarea>
+    </div>
+
+    <script>
+    </script>
+  </body>
+</html>

libs/colibri.js

@@ -0,0 +1,814 @@
+/* colibri.js -- a COLIBRI focus 
+ * The colibri spec has been submitted to the XMPP Standards Foundation
+ * for publications as a XMPP extensions:
+ * http://xmpp.org/extensions/inbox/colibri.html
+ *
+ * colibri.js is a participating focus, i.e. the focus participates
+ * in the conference. The conference itself can be ad-hoc, through a
+ * MUC, through PubSub, etc.
+ *
+ * colibri.js relies heavily on the strophe.jingle library available 
+ * from https://github.com/ESTOS/strophe.jingle
+ * and interoperates with the Jitsi videobridge available from
+ * https://jitsi.org/Projects/JitsiVideobridge
+ */
+/*
+Copyright (c) 2013 ESTOS GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+/* jshint -W117 */
+function ColibriFocus(connection, bridgejid) {
+    this.connection = connection;
+    this.bridgejid = bridgejid;
+    this.peers = [];
+    this.confid = null;
+
+    this.peerconnection = null;
+
+    this.sid = Math.random().toString(36).substr(2, 12);
+    this.connection.jingle.sessions[this.sid] = this;
+    this.mychannel = [];
+    this.channels = [];
+    this.remotessrc = {};
+
+    // ssrc lines to be added on next update
+    this.addssrc = [];
+    // ssrc lines to be removed on next update
+    this.removessrc = [];
+
+    // silly wait flag
+    this.wait = true;
+}
+
+// creates a conferences with an initial set of peers
+ColibriFocus.prototype.makeConference = function (peers) {
+    var ob = this;
+    if (this.confid !== null) {
+        console.error('makeConference called twice? Ignoring...');
+        // FIXME: just invite peers?
+        return;
+    }
+    this.confid = 0; // !null
+    this.peers = [];
+    peers.forEach(function (peer) {
+        ob.peers.push(peer);
+        ob.channels.push([]);
+    });
+
+    this.peerconnection = new RTC.peerconnection(this.connection.jingle.ice_config, this.connection.jingle.pc_constraints);
+    this.peerconnection.addStream(this.connection.jingle.localStream);
+    this.peerconnection.oniceconnectionstatechange = function (event) {
+        console.warn('ice connection state changed to', ob.peerconnection.iceConnectionState);
+        /*
+        if (ob.peerconnection.signalingState == 'stable' && ob.peerconnection.iceConnectionState == 'connected') {
+            console.log('adding new remote SSRCs from iceconnectionstatechange');
+            window.setTimeout(function() { ob.modifySources(); }, 1000);
+        }
+        */
+    };
+    this.peerconnection.onsignalingstatechange = function (event) {
+        console.warn(ob.peerconnection.signalingState);
+        /*
+        if (ob.peerconnection.signalingState == 'stable' && ob.peerconnection.iceConnectionState == 'connected') {
+            console.log('adding new remote SSRCs from signalingstatechange');
+            window.setTimeout(function() { ob.modifySources(); }, 1000);
+        }
+        */
+    };
+    this.peerconnection.onaddstream = function (event) {
+        ob.remoteStream = event.stream;
+        $(document).trigger('remotestreamadded.jingle', [event, ob.sid]);
+    };
+    this.peerconnection.onicecandidate = function (event) {
+        ob.sendIceCandidate(event.candidate);
+    };
+    this.peerconnection.createOffer(
+        function (offer) {
+            ob.peerconnection.setLocalDescription(
+                offer,
+                function () {
+                    // success
+                    // FIXME: could call _makeConference here and trickle candidates later
+                },
+                function (error) {
+                    console.log('setLocalDescription failed', error);
+                }
+            );
+        },
+        function (error) {
+            console.warn(error);
+        }
+    );
+    this.peerconnection.onicecandidate = function (event) {
+        console.log('candidate', event.candidate);
+        if (!event.candidate) {
+            console.log('end of candidates');
+            ob._makeConference();
+            return;
+        }
+    };
+};
+
+ColibriFocus.prototype._makeConference = function () {
+    var ob = this;
+    var elem = $iq({to: this.bridgejid, type: 'get'});
+    elem.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri'});
+
+    var localSDP = new SDP(this.peerconnection.localDescription.sdp);
+    var contents = SDPUtil.find_lines(localSDP.raw, 'a=mid:').map(SDPUtil.parse_mid);
+    localSDP.media.forEach(function (media, channel) {
+        var name = SDPUtil.parse_mid(SDPUtil.find_line(media, 'a=mid:'));
+        elem.c('content', {name: name});
+        elem.c('channel', {initiator: 'false', expire: '15'});
+
+        // FIXME: should reuse code from .toJingle
+        var mline = SDPUtil.parse_mline(media.split('\r\n')[0]);
+        for (var j = 0; j < mline.fmt.length; j++) {
+            var rtpmap = SDPUtil.find_line(media, 'a=rtpmap:' + mline.fmt[j]);
+            elem.c('payload-type', SDPUtil.parse_rtpmap(rtpmap));
+            elem.up();
+        }
+
+        // FIXME: should reuse code from .toJingle
+        elem.c('transport', {xmlns: 'urn:xmpp:jingle:transports:ice-udp:1'});
+        var tmp = SDPUtil.iceparams(media, localSDP.session);
+        if (tmp) {
+            elem.attrs(tmp);
+            var fingerprints = SDPUtil.find_lines(media, 'a=fingerprint:', localSDP.session);
+            fingerprints.forEach(function (line) {
+                tmp = SDPUtil.parse_fingerprint(line);
+                //tmp.xmlns = 'urn:xmpp:tmp:jingle:apps:dtls:0';
+                tmp.xmlns = 'urn:xmpp:jingle:apps:dtls:0';
+                elem.c('fingerprint').t(tmp.fingerprint);
+                delete tmp.fingerprint;
+                line = SDPUtil.find_line(media, 'a=setup:', ob.session);
+                if (line) {
+                    tmp.setup = line.substr(8);
+                }
+                elem.attrs(tmp);
+                elem.up();
+            });
+            // XEP-0176
+            if (SDPUtil.find_line(media, 'a=candidate:', localSDP.session)) { // add any a=candidate lines
+                lines = SDPUtil.find_lines(media, 'a=candidate:', localSDP.session);
+                for (j = 0; j < lines.length; j++) {
+                    tmp = SDPUtil.candidateToJingle(lines[j]);
+                    elem.c('candidate', tmp).up();
+                }
+            }
+            elem.up(); // end of transport
+        }
+        elem.up(); // end of channel
+        for (j = 0; j < ob.peers.length; j++) {
+            elem.c('channel', {initiator: 'true', expire:'15' }).up();
+        }
+        elem.up(); // end of content
+    });
+
+    this.connection.sendIQ(elem,
+        function (result) {
+            ob.createdConference(result);
+        },
+        function (error) {
+            console.warn(error);
+        }
+    );
+};
+
+// callback when a conference was created
+ColibriFocus.prototype.createdConference = function (result) {
+    console.log('created a conference on the bridge');
+    var tmp;
+
+    this.confid = $(result).find('>conference').attr('id');
+    var remotecontents = $(result).find('>conference>content').get();
+    for (var i = 0; i < remotecontents.length; i++) {
+        tmp = $(remotecontents[i]).find('>channel').get();
+        this.mychannel.push($(tmp.shift()));
+        for (j = 0; j < tmp.length; j++) {
+            if (this.channels[j] === undefined) {
+                this.channels[j] = [];
+            }
+            this.channels[j].push(tmp[j]);
+        }
+    }
+    console.log('remote channels', this.channels);
+
+    // establish our channel with the bridge
+    // static answer taken from chrome M31, should be replaced by a 
+    // dynamic one that is based on our offer FIXME
+    var bridgeSDP = new SDP('v=0\r\no=- 5151055458874951233 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\nm=audio 1 RTP/SAVPF 111 103 104 0 8 106 105 13 126\r\nc=IN IP4 0.0.0.0\r\na=rtcp:1 IN IP4 0.0.0.0\r\na=mid:audio\r\na=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level\r\na=sendrecv\r\na=rtpmap:111 opus/48000/2\r\na=fmtp:111 minptime=10\r\na=rtpmap:103 ISAC/16000\r\na=rtpmap:104 ISAC/32000\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:106 CN/32000\r\na=rtpmap:105 CN/16000\r\na=rtpmap:13 CN/8000\r\na=rtpmap:126 telephone-event/8000\r\na=maxptime:60\r\nm=video 1 RTP/SAVPF 100 116 117\r\nc=IN IP4 0.0.0.0\r\na=rtcp:1 IN IP4 0.0.0.0\r\na=mid:video\r\na=extmap:2 urn:ietf:params:rtp-hdrext:toffset\r\na=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\r\na=sendrecv\r\na=rtpmap:100 VP8/90000\r\na=rtcp-fb:100 ccm fir\r\na=rtcp-fb:100 nack\r\na=rtcp-fb:100 goog-remb\r\na=rtpmap:116 red/90000\r\na=rtpmap:117 ulpfec/90000\r\n');
+    // get the mixed ssrc
+    for (var channel = 0; channel < remotecontents.length; channel++) {
+        tmp = $(this.mychannel[channel]).find('>source[xmlns="urn:xmpp:jingle:apps:rtp:ssma:0"]');
+        // FIXME: check rtp-level-relay-type
+        if (tmp.length) {
+            bridgeSDP.media[channel] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'cname:mixed' + '\r\n';
+            bridgeSDP.media[channel] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'label:mixedlabela0' + '\r\n';
+            bridgeSDP.media[channel] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'msid:mixedmslabela0 mixedlabela0' + '\r\n';
+            bridgeSDP.media[channel] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'mslabel:mixedmslabela0' + '\r\n';
+        } else {
+            // make chrome happy... '3735928559' == 0xDEADBEEF
+            bridgeSDP.media[channel] += 'a=ssrc:' + '3735928559' + ' ' + 'cname:mixed' + '\r\n';
+            bridgeSDP.media[channel] += 'a=ssrc:' + '3735928559' + ' ' + 'label:mixedlabelv0' + '\r\n';
+            bridgeSDP.media[channel] += 'a=ssrc:' + '3735928559' + ' ' + 'msid:mixedmslabelv0 mixedlabelv0' + '\r\n';
+            bridgeSDP.media[channel] += 'a=ssrc:' + '3735928559' + ' ' + 'mslabel:mixedmslabelv0' + '\r\n';
+        }
+
+        // FIXME: should take code from .fromJingle
+        tmp = $(this.mychannel[channel]).find('>transport[xmlns="urn:xmpp:jingle:transports:ice-udp:1"]');
+        if (tmp.length) {
+            bridgeSDP.media[channel] += 'a=ice-ufrag:' + tmp.attr('ufrag') + '\r\n';
+            bridgeSDP.media[channel] += 'a=ice-pwd:' + tmp.attr('pwd') + '\r\n';
+            tmp.find('>candidate').each(function () {
+                bridgeSDP.media[channel] += SDPUtil.candidateFromJingle(this);
+            });
+            tmp = tmp.find('>fingerprint');
+            if (tmp.length) {
+                bridgeSDP.media[channel] += 'a=fingerprint:' + tmp.attr('hash') + ' ' + tmp.text() + '\r\n';
+                if (tmp.attr('setup')) {
+                    bridgeSDP.media[channel] += 'a=setup:' + tmp.attr('setup') + '\r\n';
+                }
+            }
+        }
+    }
+    bridgeSDP.raw = bridgeSDP.session + bridgeSDP.media.join('');
+
+    var ob = this;
+    this.peerconnection.setRemoteDescription(
+        new RTCSessionDescription({type: 'answer', sdp: bridgeSDP.raw}),
+        function () {
+            console.log('setRemoteDescription success');
+            // remote channels == remotecontents length - 1!
+            for (var i = 0; i < remotecontents.length - 1; i++) {
+                ob.initiate(ob.peers[i], true);
+            }
+        },
+        function (error) {
+            console.log('setRemoteDescription failed');
+        }
+    );
+
+};
+
+// send a session-initiate to a new participant
+ColibriFocus.prototype.initiate = function (peer, isInitiator) {
+    var participant = this.peers.indexOf(peer);
+    console.log('tell', peer, participant);
+    var sdp;
+    if (this.peerconnection != null && this.peerconnection.signalingState == 'stable') {
+        sdp = new SDP(this.peerconnection.remoteDescription.sdp);
+        var localSDP = new SDP(this.peerconnection.localDescription.sdp);
+        // throw away stuff we don't want
+        // not needed with static offer
+        sdp.removeSessionLines('a=group:');
+        sdp.removeSessionLines('a=msid-semantic:'); // FIXME: not mapped over jingle anyway...
+        for (var i = 0; i < sdp.media.length; i++) {
+            sdp.removeMediaLines(i, 'a=rtcp-mux');
+            sdp.removeMediaLines(i, 'a=ssrc:');
+            sdp.removeMediaLines(i, 'a=crypto:');
+            sdp.removeMediaLines(i, 'a=candidate:');
+            sdp.removeMediaLines(i, 'a=ice-options:google-ice');
+            sdp.removeMediaLines(i, 'a=ice-ufrag:');
+            sdp.removeMediaLines(i, 'a=ice-pwd:');
+            sdp.removeMediaLines(i, 'a=fingerprint:');
+            sdp.removeMediaLines(i, 'a=setup:');
+
+            // re-add all remote a=ssrcs
+            for (var jid in this.remotessrc) {
+                if (jid == peer) continue;
+                sdp.media[i] += this.remotessrc[jid][i];
+            }
+            // and local a=ssrc lines
+            sdp.media[i] += SDPUtil.find_lines(localSDP.media[i], 'a=ssrc').join('\r\n') + '\r\n';
+        }
+        sdp.raw = sdp.session + sdp.media.join('');
+    } else {
+        console.error('can not initiate a new session without a stable peerconnection');
+        return;
+    }
+
+    // add stuff we got from the bridge
+    for (var j = 0; j < sdp.media.length; j++) {
+        var chan = $(this.channels[participant][j]);
+        console.log('channel id', chan.attr('id'));
+
+        tmp = chan.find('>source[xmlns="urn:xmpp:jingle:apps:rtp:ssma:0"]');
+        if (tmp.length) {
+            sdp.media[j] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'cname:mixed' + '\r\n';
+            sdp.media[j] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'label:mixedlabela0' + '\r\n';
+            sdp.media[j] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'msid:mixedmslabela0 mixedlabela0' + '\r\n';
+            sdp.media[j] += 'a=ssrc:' + tmp.attr('ssrc') + ' ' + 'mslabel:mixedmslabela0' + '\r\n';
+        } else {
+            // make chrome happy... '3735928559' == 0xDEADBEEF
+            sdp.media[j] += 'a=ssrc:' + '3735928559' + ' ' + 'cname:mixed' + '\r\n';
+            sdp.media[j] += 'a=ssrc:' + '3735928559' + ' ' + 'label:mixedlabelv0' + '\r\n';
+            sdp.media[j] += 'a=ssrc:' + '3735928559' + ' ' + 'msid:mixedmslabelv0 mixedlabelv0' + '\r\n';
+            sdp.media[j] += 'a=ssrc:' + '3735928559' + ' ' + 'mslabel:mixedmslabelv0' + '\r\n';
+        }
+
+        tmp = chan.find('>transport[xmlns="urn:xmpp:jingle:transports:ice-udp:1"]');
+        if (tmp.length) {
+            if (tmp.attr('ufrag'))
+                sdp.media[j] += 'a=ice-ufrag:' + tmp.attr('ufrag') + '\r\n';
+            if (tmp.attr('pwd'))
+                sdp.media[j] += 'a=ice-pwd:' + tmp.attr('pwd') + '\r\n';
+            // and the candidates...
+            tmp.find('>candidate').each(function () {
+                sdp.media[j] += SDPUtil.candidateFromJingle(this);
+            });
+            tmp = tmp.find('>fingerprint');
+            if (tmp.length) {
+                sdp.media[j] += 'a=fingerprint:' + tmp.attr('hash') + ' ' + tmp.text() + '\r\n';
+                /*
+                if (tmp.attr('direction')) {
+                    sdp.media[j] += 'a=setup:' + tmp.attr('direction') + '\r\n';
+                }
+                */
+                sdp.media[j] += 'a=setup:actpass\r\n';
+            }
+        }
+    }
+    // make a new colibri session and configure it
+    // FIXME: is it correct to use this.connection.jid when used in a MUC?
+    var sess = new ColibriSession(this.connection.jid,
+                                  Math.random().toString(36).substr(2, 12), // random string
+                                  this.connection);
+    sess.initiate(peer);
+    sess.colibri = this;
+    sess.localStream = this.connection.jingle.localStream;
+    sess.media_constraints = this.connection.jingle.media_constraints;
+    sess.pc_constraints = this.connection.jingle.pc_constraints;
+    sess.ice_config = this.connection.ice_config;
+
+    this.connection.jingle.sessions[sess.sid] = sess;
+    this.connection.jingle.jid2session[sess.peerjid] = sess;
+
+    // send a session-initiate
+    var init = $iq({to: peer, type: 'set'})
+        .c('jingle',
+            {xmlns: 'urn:xmpp:jingle:1',
+             action: 'session-initiate',
+             initiator: sess.me,
+             sid: sess.sid
+            }
+    );
+    sdp.toJingle(init, 'initiator');
+    this.connection.sendIQ(init,
+        function (res) {
+            console.log('got result');
+        },
+        function (err) {
+            console.log('got error');
+        }
+    );
+};
+
+// pull in a new participant into the conference
+ColibriFocus.prototype.addNewParticipant = function (peer) {
+    var ob = this;
+    if (this.confid === 0) {
+        // bad state
+        console.log('confid does not exist yet, postponing', peer);
+        window.setTimeout(function () {
+            ob.addNewParticipant(peer);
+        }, 250);
+        return;
+    }
+    var index = this.channels.length;
+    this.channels.push([]);
+    this.peers.push(peer);
+
+    var elem = $iq({to: this.bridgejid, type: 'get'});
+    elem.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
+    var localSDP = new SDP(this.peerconnection.localDescription.sdp);
+    var contents = SDPUtil.find_lines(localSDP.raw, 'a=mid:').map(SDPUtil.parse_mid);
+    contents.forEach(function (name) {
+        elem.c('content', {name: name});
+        elem.c('channel', {initiator: 'true', expire:'15'});
+        elem.up(); // end of channel
+        elem.up(); // end of content
+    });
+
+    this.connection.sendIQ(elem,
+        function (result) {
+            var contents = $(result).find('>conference>content').get();
+            for (var i = 0; i < contents.length; i++) {
+                tmp = $(contents[i]).find('>channel').get();
+                ob.channels[index][i] = tmp[0];
+            }
+            ob.initiate(peer, true);
+        },
+        function (error) {
+            console.warn(error);
+        }
+    );
+};
+
+// update the channel description (payload-types + dtls fp) for a participant
+ColibriFocus.prototype.updateChannel = function (remoteSDP, participant) {
+    console.log('change allocation for', this.confid);
+    var change = $iq({to: this.bridgejid, type: 'set'});
+    change.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
+    for (channel = 0; channel < this.channels[participant].length; channel++) {
+        change.c('content', {name: channel === 0 ? 'audio' : 'video'});
+        change.c('channel', {id: $(this.channels[participant][channel]).attr('id')});
+
+        var rtpmap = SDPUtil.find_lines(remoteSDP.media[channel], 'a=rtpmap:');
+        rtpmap.forEach(function (val) {
+            // TODO: too much copy-paste
+            var rtpmap = SDPUtil.parse_rtpmap(val);
+            change.c('payload-type', rtpmap);
+            // 
+            // put any 'a=fmtp:' + mline.fmt[j] lines into <param name=foo value=bar/>
+            /*
+            if (SDPUtil.find_line(remoteSDP.media[channel], 'a=fmtp:' + rtpmap.id)) {
+                tmp = SDPUtil.parse_fmtp(SDPUtil.find_line(remoteSDP.media[channel], 'a=fmtp:' + rtpmap.id));
+                for (var k = 0; k < tmp.length; k++) {
+                    change.c('parameter', tmp[k]).up();
+                }
+            }
+            */
+            change.up();
+        });
+
+        // now add transport
+        change.c('transport', {xmlns: 'urn:xmpp:jingle:transports:ice-udp:1'});
+        var fingerprints = SDPUtil.find_lines(remoteSDP.media[channel], 'a=fingerprint:', remoteSDP.session);
+        fingerprints.forEach(function (line) {
+            tmp = SDPUtil.parse_fingerprint(line);
+            tmp.xmlns = 'urn:xmpp:jingle:apps:dtls:0';
+            change.c('fingerprint').t(tmp.fingerprint);
+            delete tmp.fingerprint;
+            line = SDPUtil.find_line(remoteSDP.media[channel], 'a=setup:', remoteSDP.session);
+            if (line) {
+                tmp.setup = line.substr(8);
+            }
+            change.attrs(tmp);
+            change.up();
+        });
+        var candidates = SDPUtil.find_lines(remoteSDP.media[channel], 'a=candidate:', remoteSDP.session);
+        candidates.forEach(function (line) {
+            var tmp = SDPUtil.candidateToJingle(line);
+            change.c('candidate', tmp).up();
+        });
+        tmp = SDPUtil.iceparams(remoteSDP.media[channel], remoteSDP.session);
+        if (tmp) {
+            change.attrs(tmp);
+
+        }
+        change.up(); // end of transport
+        change.up(); // end of channel
+        change.up(); // end of content
+    }
+    this.connection.sendIQ(change,
+        function (res) {
+            console.log('got result');
+        },
+        function (err) {
+            console.log('got error');
+        }
+    );
+};
+
+// tell everyone about a new participants a=ssrc lines (isadd is true)
+// or a leaving participants a=ssrc lines
+// FIXME: should not take an SDP, but rather the a=ssrc lines and probably a=mid
+ColibriFocus.prototype.sendSSRCUpdate = function (sdp, exclude, isadd) {
+    var ob = this;
+    this.peers.forEach(function (peerjid) {
+        if (peerjid == exclude) return;
+        console.log('tell', peerjid, 'about ' + (isadd ? 'new' : 'removed') + ' ssrcs from', exclude);
+        if (!ob.remotessrc[peerjid]) {
+            // FIXME: this should only send to participants that are stable, i.e. who have sent a session-accept
+            // possibly, this.remoteSSRC[session.peerjid] does not exist yet
+            console.warn('do we really want to bother', peerjid, 'with updates yet?');
+        }
+        var channel;
+        var peersess = ob.connection.jingle.jid2session[peerjid];
+        var modify = $iq({to: peerjid, type: 'set'})
+            .c('jingle', {
+                xmlns: 'urn:xmpp:jingle:1',
+                action: isadd ? 'addsource' : 'removesource',
+                initiator: peersess.initiator,
+                sid: peersess.sid
+            }
+        );
+        for (channel = 0; channel < sdp.media.length; channel++) {
+            tmp = SDPUtil.find_lines(sdp.media[channel], 'a=ssrc:');
+            modify.c('content', {name: SDPUtil.parse_mid(SDPUtil.find_line(sdp.media[channel], 'a=mid:'))});
+            modify.c('source', { xmlns: 'urn:xmpp:jingle:apps:rtp:ssma:0' });
+            // FIXME: not completly sure this operates on blocks and / or handles different ssrcs correctly
+            tmp.forEach(function (line) {
+                var idx = line.indexOf(' ');
+                var linessrc = line.substr(0, idx).substr(7);
+                modify.attrs({ssrc: linessrc});
+
+                var kv = line.substr(idx + 1);
+                modify.c('parameter');
+                if (kv.indexOf(':') == -1) {
+                    modify.attrs({ name: kv });
+                } else {
+                    modify.attrs({ name: kv.split(':', 2)[0] });
+                    modify.attrs({ value: kv.split(':', 2)[1] });
+                }
+                modify.up();
+            });
+            modify.up(); // end of source
+            modify.up(); // end of content
+        }
+        ob.connection.sendIQ(modify,
+            function (res) {
+                console.warn('got modify result');
+            },
+            function (err) {
+                console.warn('got modify error');
+            }
+        );
+    });
+};
+
+ColibriFocus.prototype.setRemoteDescription = function (session, elem, desctype) {
+    var participant = this.peers.indexOf(session.peerjid);
+    console.log('Colibri.setRemoteDescription from', session.peerjid, participant);
+    var ob = this;
+    var remoteSDP = new SDP('');
+    var tmp;
+    var channel;
+    remoteSDP.fromJingle(elem);
+
+    // ACT 1: change allocation on bridge
+    this.updateChannel(remoteSDP, participant);
+
+    // ACT 2: tell anyone else about the new SSRCs
+    this.sendSSRCUpdate(remoteSDP, session.peerjid, true);
+
+    // ACT 3: note the SSRCs
+    this.remotessrc[session.peerjid] = [];
+    for (channel = 0; channel < this.channels[participant].length; channel++) {
+        this.remotessrc[session.peerjid][channel] = SDPUtil.find_lines(remoteSDP.media[channel], 'a=ssrc:').join('\r\n') + '\r\n';
+    }
+
+    // ACT 4: add new a=ssrc lines to local remotedescription
+    for (channel = 0; channel < this.channels[participant].length; channel++) {
+        if (!this.addssrc[channel]) this.addssrc[channel] = '';
+        this.addssrc[channel] += SDPUtil.find_lines(remoteSDP.media[channel], 'a=ssrc:').join('\r\n') + '\r\n';
+    }
+    this.modifySources();
+};
+
+// relay ice candidates to bridge using trickle
+ColibriFocus.prototype.addIceCandidate = function (session, elem) {
+    var ob = this;
+    var participant = this.peers.indexOf(session.peerjid);
+    console.log('change transport allocation for', this.confid, session.peerjid, participant);
+    var change = $iq({to: this.bridgejid, type: 'set'});
+    change.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
+    $(elem).each(function () {
+        var name = $(this).attr('name');
+        var channel = name == 'audio' ? 0 : 1; // FIXME: search mlineindex in localdesc
+
+        change.c('content', {name: name});
+        change.c('channel', {id: $(ob.channels[participant][channel]).attr('id')});
+        $(this).find('>transport').each(function () {
+            change.c('transport', {
+                ufrag: $(this).attr('ufrag'),
+                pwd: $(this).attr('pwd'),
+                xmlns: $(this).attr('xmlns')
+            });
+
+            $(this).find('>candidate').each(function () {
+                /* not yet
+                if (this.getAttribute('protocol') == 'tcp' && this.getAttribute('port') == 0) {
+                    // chrome generates TCP candidates with port 0
+                    return;
+                }
+                */
+                var line = SDPUtil.candidateFromJingle(this);
+                change.c('candidate', SDPUtil.candidateToJingle(line)).up();
+            });
+            change.up(); // end of transport
+        });
+        change.up(); // end of channel
+        change.up(); // end of content
+    });
+    // FIXME: need to check if there is at least one candidate when filtering TCP ones
+    this.connection.sendIQ(change,
+        function (res) {
+            console.log('got result');
+        },
+        function (err) {
+            console.warn('got error');
+        }
+    );
+};
+
+// send our own candidate to the bridge
+ColibriFocus.prototype.sendIceCandidate = function (candidate) {
+    //console.log('candidate', candidate);
+    if (!candidate) {
+        console.log('end of candidates');
+        return;
+    }
+    var mycands = $iq({to: this.bridgejid, type: 'set'});
+    mycands.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
+    mycands.c('content', {name: candidate.sdpMid });
+    mycands.c('channel', {id: $(this.mychannel[candidate.sdpMLineIndex]).attr('id')});
+    mycands.c('transport', {xmlns: 'urn:xmpp:jingle:transports:ice-udp:1'});
+    tmp = SDPUtil.candidateToJingle(candidate.candidate);
+    mycands.c('candidate', tmp).up();
+    this.connection.sendIQ(mycands,
+        function (res) {
+            console.log('got result');
+        },
+        function (err) {
+            console.warn('got error');
+        }
+    );
+};
+
+ColibriFocus.prototype.terminate = function (session, reason) {
+    console.log('remote session terminated from', session.peerjid);
+    var participant = this.peers.indexOf(session.peerjid);
+    if (!this.remotessrc[session.peerjid] || participant == -1) {
+        return;
+    }
+    console.log('remote ssrcs:', this.remotessrc[session.peerjid]);
+    var ssrcs = this.remotessrc[session.peerjid];
+    for (var i = 0; i < ssrcs.length; i++) {
+        if (!this.removessrc[i]) this.removessrc[i] = '';
+        this.removessrc[i] += ssrcs[i];
+    }
+    // remove from this.peers
+    this.peers.splice(participant, 1);
+    // expire channel on bridge
+    var change = $iq({to: this.bridgejid, type: 'set'});
+    change.c('conference', {xmlns: 'http://jitsi.org/protocol/colibri', id: this.confid});
+    for (var channel = 0; channel < this.channels[participant].length; channel++) {
+        change.c('content', {name: channel === 0 ? 'audio' : 'video'});
+        change.c('channel', {id: $(this.channels[participant][channel]).attr('id'), expire: '0'});
+        change.up(); // end of channel
+        change.up(); // end of content
+    }
+    this.connection.sendIQ(change,
+        function (res) {
+            console.log('got result');
+        },
+        function (err) {
+            console.log('got error');
+        }
+    );
+    // and remove from channels
+    this.channels.splice(participant, 1);
+
+    // tell everyone about the ssrcs to be removed
+    var sdp = new SDP('');
+    var localSDP = new SDP(this.peerconnection.localDescription.sdp);
+    var contents = SDPUtil.find_lines(localSDP.raw, 'a=mid:').map(SDPUtil.parse_mid);
+    for (var j = 0; j < ssrcs.length; j++) {
+        sdp.media[j] = 'a=mid:' + contents[j] + '\r\n';
+        sdp.media[j] += ssrcs[j];
+        this.removessrc[j] += ssrcs[j];
+    }
+    this.sendSSRCUpdate(sdp, session.peerjid, false);
+
+    delete this.remotessrc[session.peerjid];
+    this.modifySources();
+};
+
+ColibriFocus.prototype.modifySources = function () {
+    var ob = this;
+    if (!(this.addssrc.length || this.removessrc.length)) return;
+    if (this.peerconnection.signalingState == 'closed') return;
+
+    // FIXME: this is a big hack
+    // https://code.google.com/p/webrtc/issues/detail?id=2688
+    if (!(this.peerconnection.signalingState == 'stable' && this.peerconnection.iceConnectionState == 'connected')) {
+        console.warn('modifySources not yet', this.peerconnection.signalingState, this.peerconnection.iceConnectionState);
+        window.setTimeout(function () { ob.modifySources(); }, 250);
+        this.wait = true;
+        return;
+    }
+    if (this.wait) {
+        window.setTimeout(function () { ob.modifySources(); }, 2500);
+        this.wait = false;
+        return;
+    }
+    var sdp = new SDP(this.peerconnection.remoteDescription.sdp);
+
+    // add sources
+    this.addssrc.forEach(function (lines, idx) {
+        sdp.media[idx] += lines;
+    });
+    this.addssrc = [];
+
+    // remove sources
+    this.removessrc.forEach(function (lines, idx) {
+        lines = lines.split('\r\n');
+        lines.pop(); // remove empty last element;
+        lines.forEach(function (line) {
+            sdp.media[idx] = sdp.media[idx].replace(line + '\r\n', '');
+        });
+    });
+    this.removessrc = [];
+
+    sdp.raw = sdp.session + sdp.media.join('');
+    this.peerconnection.setRemoteDescription(
+        new RTCSessionDescription({type: 'offer', sdp: sdp.raw }),
+        function () {
+            console.log('setModifiedRemoteDescription ok');
+            ob.peerconnection.createAnswer(
+                function (modifiedAnswer) {
+                    console.log('modifiedAnswer created');
+                    // FIXME: pushing down an answer while ice connection state 
+                    // is still checking is bad...
+                    console.log(ob.peerconnection.iceConnectionState);
+                    ob.peerconnection.setLocalDescription(modifiedAnswer,
+                        function () {
+                            console.log('setModifiedLocalDescription ok');
+                        },
+                        function (error) {
+                            console.log('setModifiedLocalDescription failed');
+                        }
+                    );
+                },
+                function (error) {
+                    console.log('createModifiedAnswer failed');
+                }
+            );
+        },
+        function (error) {
+            console.log('setModifiedRemoteDescription failed');
+        }
+    );
+};
+
+
+// A colibri session is similar to a jingle session, it just implements some things differently
+// FIXME: inherit jinglesession, see https://github.com/legastero/Jingle-RTCPeerConnection/blob/master/index.js
+function ColibriSession(me, sid, connection) {
+    this.me = me;
+    this.sid = sid;
+    this.connection = connection;
+    //this.peerconnection = null;
+    //this.mychannel = null;
+    //this.channels = null;
+    this.peerjid = null;
+
+    this.colibri = null;
+}
+
+// implementation of JingleSession interface
+ColibriSession.prototype.initiate = function (peerjid, isInitiator) {
+    this.peerjid = peerjid;
+};
+
+ColibriSession.prototype.sendOffer = function (offer) {
+    console.log('ColibriSession.sendOffer');
+};
+
+
+ColibriSession.prototype.accept = function () {
+    console.log('ColibriSession.accept');
+};
+
+ColibriSession.prototype.terminate = function (reason) {
+    this.colibri.terminate(this, reason);
+};
+
+ColibriSession.prototype.active = function () {
+    console.log('ColibriSession.active');
+};
+
+ColibriSession.prototype.setRemoteDescription = function (elem, desctype) {
+    this.colibri.setRemoteDescription(this, elem, desctype);
+};
+
+ColibriSession.prototype.addIceCandidate = function (elem) {
+    this.colibri.addIceCandidate(this, elem);
+};
+
+ColibriSession.prototype.sendAnswer = function (sdp, provisional) {
+    console.log('ColibriSession.sendAnswer');
+};
+
+ColibriSession.prototype.sendTerminate = function (reason, text) {
+    console.log('ColibriSession.sendTerminate');
+};

libs/jquery-impromptu.js

@@ -0,0 +1,666 @@
+/*! jQuery-Impromptu - v5.1.1
+* http://trentrichardson.com/Impromptu
+* Copyright (c) 2013 Trent Richardson; Licensed MIT */
+(function($) {
+	"use strict";
+
+	/**
+	* setDefaults - Sets the default options
+	* @param message String/Object - String of html or Object of states
+	* @param options Object - Options to set the prompt
+	* @return jQuery - container with overlay and prompt 
+	*/
+	$.prompt = function(message, options) {
+		// only for backwards compat, to be removed in future version
+		if(options !== undefined && options.classes !== undefined && typeof options.classes === 'string'){
+			options = { box: options.classes };
+		}
+
+		$.prompt.options = $.extend({},$.prompt.defaults,options);
+		$.prompt.currentPrefix = $.prompt.options.prefix;
+		
+		// Be sure any previous timeouts are destroyed
+		if($.prompt.timeout){
+			clearTimeout($.prompt.timeout);
+		}
+		$.prompt.timeout = false;
+
+		var opts = $.prompt.options,
+			$body = $(document.body),
+			$window = $(window);
+					
+		//build the box and fade
+		var msgbox = '<div class="'+ $.prompt.options.prefix +'box '+ opts.classes.box +'">';
+		if(opts.useiframe && ($('object, applet').length > 0)) {
+			msgbox += '<iframe src="javascript:false;" style="display:block;position:absolute;z-index:-1;" class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></iframe>';
+		} else {
+			msgbox +='<div class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></div>';
+		}
+		msgbox += '<div class="'+ opts.prefix +' '+ opts.classes.prompt +'">'+
+					'<form action="javascript:false;" onsubmit="return false;" class="'+ opts.prefix +'form">'+
+						'<div class="'+ opts.prefix +'close '+ opts.classes.close +'">'+ opts.closeText +'</div>'+
+						'<div class="'+ opts.prefix +'states"></div>'+
+					'</form>'+
+				'</div>'+
+			'</div>';
+
+		$.prompt.jqib = $(msgbox).appendTo($body);
+		$.prompt.jqi = $.prompt.jqib.children('.'+ opts.prefix);//.data('jqi',opts);
+		$.prompt.jqif = $.prompt.jqib.children('.'+ opts.prefix +'fade');
+
+		//if a string was passed, convert to a single state
+		if(message.constructor === String){
+			message = {
+				state0: {
+					title: opts.title,
+					html: message,
+					buttons: opts.buttons,
+					position: opts.position,
+					focus: opts.focus,
+					submit: opts.submit
+				}
+			};
+		}
+
+		//build the states
+		$.prompt.options.states = {};
+		var k,v;
+		for(k in message){
+			v = $.extend({},$.prompt.defaults.state,{name:k},message[k]);
+			$.prompt.addState(v.name, v);
+
+			if($.prompt.currentStateName === ''){
+				$.prompt.currentStateName = v.name;
+			}
+		}
+
+		// Go ahead and transition to the first state. It won't be visible just yet though until we show the prompt
+		var $firstState = $.prompt.jqi.find('.'+ opts.prefix +'states .'+ opts.prefix +'state').eq(0);
+		$.prompt.goToState($firstState.data('jqi-name'));
+
+		//Events
+		$.prompt.jqi.on('click', '.'+ opts.prefix +'buttons button', function(e){
+			var $t = $(this),
+				$state = $t.parents('.'+ opts.prefix +'state'),
+				stateobj = $.prompt.options.states[$state.data('jqi-name')],
+				msg = $state.children('.'+ opts.prefix +'message'),
+				clicked = stateobj.buttons[$t.text()] || stateobj.buttons[$t.html()],
+				forminputs = {};
+
+			// if for some reason we couldn't get the value
+			if(clicked === undefined){
+				for(var i in stateobj.buttons){
+					if(stateobj.buttons[i].title === $t.text() || stateobj.buttons[i].title === $t.html()){
+						clicked = stateobj.buttons[i].value;
+					}
+				}
+			}
+
+			//collect all form element values from all states.
+			$.each($.prompt.jqi.children('form').serializeArray(),function(i,obj){
+				if (forminputs[obj.name] === undefined) {
+					forminputs[obj.name] = obj.value;
+				} else if (typeof forminputs[obj.name] === Array || typeof forminputs[obj.name] === 'object') {
+					forminputs[obj.name].push(obj.value);
+				} else {
+					forminputs[obj.name] = [forminputs[obj.name],obj.value];	
+				} 
+			});
+
+			// trigger an event
+			var promptsubmite = new $.Event('impromptu:submit');
+			promptsubmite.stateName = stateobj.name;
+			promptsubmite.state = $state;
+			$state.trigger(promptsubmite, [clicked, msg, forminputs]);
+			
+			if(!promptsubmite.isDefaultPrevented()){
+				$.prompt.close(true, clicked,msg,forminputs);
+			}
+		});
+
+		// if the fade is clicked blink the prompt
+		var fadeClicked = function(){
+			if(opts.persistent){
+				var offset = (opts.top.toString().indexOf('%') >= 0? ($window.height()*(parseInt(opts.top,10)/100)) : parseInt(opts.top,10)),
+					top = parseInt($.prompt.jqi.css('top').replace('px',''),10) - offset;
+
+				//$window.scrollTop(top);
+				$('html,body').animate({ scrollTop: top }, 'fast', function(){
+					var i = 0;
+					$.prompt.jqib.addClass(opts.prefix +'warning');
+					var intervalid = setInterval(function(){
+						$.prompt.jqib.toggleClass(opts.prefix +'warning');
+						if(i++ > 1){
+							clearInterval(intervalid);
+							$.prompt.jqib.removeClass(opts.prefix +'warning');
+						}
+					}, 100);
+				});
+			}
+			else {
+				$.prompt.close(true);
+			}
+		};
+		
+		// listen for esc or tab keys
+		var keyPressEventHandler = function(e){
+			var key = (window.event) ? event.keyCode : e.keyCode;
+			
+			//escape key closes
+			if(key===27) {
+				fadeClicked();	
+			}
+			
+			//constrain tabs, tabs should iterate through the state and not leave
+			if (key === 9){
+				var $inputels = $('input,select,textarea,button',$.prompt.getCurrentState());
+				var fwd = !e.shiftKey && e.target === $inputels[$inputels.length-1];
+				var back = e.shiftKey && e.target === $inputels[0];
+				if (fwd || back) {
+					setTimeout(function(){ 
+						if (!$inputels){
+							return;
+						}
+						var el = $inputels[back===true ? $inputels.length-1 : 0];
+
+						if (el){
+							el.focus();
+						}
+					},10);
+					return false;
+				}
+			}
+		};
+		
+		$.prompt.position();
+		$.prompt.style();
+		
+		$.prompt.jqif.click(fadeClicked);
+		$window.resize({animate:false}, $.prompt.position);
+		$.prompt.jqi.find('.'+ opts.prefix +'close').click($.prompt.close);
+		$.prompt.jqib.on("keydown",keyPressEventHandler)
+					.on('impromptu:loaded', opts.loaded)
+					.on('impromptu:close', opts.close)
+					.on('impromptu:statechanging', opts.statechanging)
+					.on('impromptu:statechanged', opts.statechanged);
+
+		// Show it
+		$.prompt.jqif[opts.show](opts.overlayspeed);
+		$.prompt.jqi[opts.show](opts.promptspeed, function(){
+			$.prompt.jqib.trigger('impromptu:loaded');
+		});
+		
+		// Timeout
+		if(opts.timeout > 0){
+			$.prompt.timeout = setTimeout(function(){ $.prompt.close(true); },opts.timeout);
+		}
+
+		return $.prompt.jqib;
+	};
+	
+	$.prompt.defaults = {
+		prefix:'jqi',
+		classes: {
+			box: '',
+			fade: '',
+			prompt: '',
+			close: '',
+			title: '',
+			message: '',
+			buttons: '',
+			button: '',
+			defaultButton: ''
+		},
+		title: '',
+		closeText: '&times;',
+		buttons: {
+			Ok: true
+		},
+		loaded: function(e){},
+		submit: function(e,v,m,f){},
+		close: function(e,v,m,f){},
+		statechanging: function(e, from, to){},
+		statechanged: function(e, to){},
+		opacity: 0.6,
+		zIndex: 999,
+		overlayspeed: 'slow',
+		promptspeed: 'fast',
+		show: 'fadeIn',
+		focus: 0,
+		defaultButton: 0,
+		useiframe: false,
+		top: '15%',
+		position: { 
+			container: null, 
+			x: null, 
+			y: null,
+			arrow: null,
+			width: null
+		},
+		persistent: true,
+		timeout: 0,
+		states: {},
+		state: {
+			name: null,
+			title: '',
+			html: '',
+			buttons: {
+				Ok: true
+			},
+			focus: 0,
+			defaultButton: 0,
+			position: { 
+				container: null, 
+				x: null, 
+				y: null,
+				arrow: null,
+				width: null
+			},
+			submit: function(e,v,m,f){
+				return true;
+			}
+		}
+	};
+	
+	/**
+	* currentPrefix String - At any time this show be the prefix 
+	* of the current prompt ex: "jqi"
+	*/
+	$.prompt.currentPrefix = $.prompt.defaults.prefix;
+	
+	/**
+	* currentStateName String - At any time this is the current state
+	* of the current prompt ex: "state0"
+	*/
+	$.prompt.currentStateName = "";
+		
+	/**
+	* setDefaults - Sets the default options
+	* @param o Object - Options to set as defaults
+	* @return void
+	*/
+	$.prompt.setDefaults = function(o) {
+		$.prompt.defaults = $.extend({}, $.prompt.defaults, o);
+	};
+	
+	/**
+	* setStateDefaults - Sets the default options for a state
+	* @param o Object - Options to set as defaults
+	* @return void
+	*/
+	$.prompt.setStateDefaults = function(o) {
+		$.prompt.defaults.state = $.extend({}, $.prompt.defaults.state, o);
+	};
+
+	/**
+	* position - Repositions the prompt (Used internally)
+	* @return void
+	*/
+	$.prompt.position = function(e){
+		var restoreFx = $.fx.off,
+			$state = $.prompt.getCurrentState(),
+			stateObj = $.prompt.options.states[$state.data('jqi-name')],
+			pos = stateObj? stateObj.position : undefined,
+			$window = $(window),
+			bodyHeight = document.body.scrollHeight, //$(document.body).outerHeight(true),
+			windowHeight = $(window).height(),
+			documentHeight = $(document).height(),
+			height = bodyHeight > windowHeight ? bodyHeight : windowHeight,
+			top = parseInt($window.scrollTop(),10) + ($.prompt.options.top.toString().indexOf('%') >= 0? 
+					(windowHeight*(parseInt($.prompt.options.top,10)/100)) : parseInt($.prompt.options.top,10));
+
+		// when resizing the window turn off animation
+		if(e !== undefined && e.data.animate === false){
+			$.fx.off = true;
+		}
+		
+		$.prompt.jqib.css({
+			position: "absolute",
+			height: height,
+			width: "100%",
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0
+		});
+		$.prompt.jqif.css({
+			position: "fixed",
+			height: height,
+			width: "100%",
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0
+		});
+
+		// tour positioning
+		if(pos && pos.container){
+			var offset = $(pos.container).offset();
+			
+			if($.isPlainObject(offset) && offset.top !== undefined){
+				$.prompt.jqi.css({
+					position: "absolute"
+				});
+				$.prompt.jqi.animate({
+					top: offset.top + pos.y,
+					left: offset.left + pos.x,
+					marginLeft: 0,
+					width: (pos.width !== undefined)? pos.width : null
+				});
+				top = (offset.top + pos.y) - ($.prompt.options.top.toString().indexOf('%') >= 0? (windowHeight*(parseInt($.prompt.options.top,10)/100)) : parseInt($.prompt.options.top,10));
+				$('html,body').animate({ scrollTop: top }, 'slow', 'swing', function(){});
+			}
+		}
+		// custom state width animation
+		else if(pos && pos.width){
+			$.prompt.jqi.css({
+					position: "absolute",
+					left: '50%'
+				});
+			$.prompt.jqi.animate({
+					top: pos.y || top,
+					left: pos.x || '50%',
+					marginLeft: ((pos.width/2)*-1),
+					width: pos.width
+				});
+		}
+		// standard prompt positioning
+		else{
+			$.prompt.jqi.css({
+				position: "absolute",
+				top: top,
+				left: '50%',//$window.width()/2,
+				marginLeft: (($.prompt.jqi.outerWidth(false)/2)*-1)
+			});
+		}
+
+		// restore fx settings
+		if(e !== undefined && e.data.animate === false){
+			$.fx.off = restoreFx;
+		}
+	};
+	
+	/**
+	* style - Restyles the prompt (Used internally)
+	* @return void
+	*/
+	$.prompt.style = function(){
+		$.prompt.jqif.css({
+			zIndex: $.prompt.options.zIndex,
+			display: "none",
+			opacity: $.prompt.options.opacity
+		});
+		$.prompt.jqi.css({
+			zIndex: $.prompt.options.zIndex+1,
+			display: "none"
+		});
+		$.prompt.jqib.css({
+			zIndex: $.prompt.options.zIndex
+		});
+	};
+
+	/**
+	* get - Get the prompt
+	* @return jQuery - the prompt
+	*/
+	$.prompt.get = function(state) {
+		return $('.'+ $.prompt.currentPrefix);
+	};
+
+	/**
+	* addState - Injects a state into the prompt
+	* @param statename String - Name of the state
+	* @param stateobj Object - options for the state
+	* @param afterState String - selector of the state to insert after
+	* @return jQuery - the newly created state
+	*/
+	$.prompt.addState = function(statename, stateobj, afterState) {
+		var state = "",
+			$state = null,
+			arrow = "",
+			title = "",
+			opts = $.prompt.options,
+			$jqistates = $('.'+ $.prompt.currentPrefix +'states'),
+			defbtn,k,v,i=0;
+
+		stateobj = $.extend({},$.prompt.defaults.state, {name:statename}, stateobj);
+
+		if(stateobj.position.arrow !== null){
+			arrow = '<div class="'+ opts.prefix + 'arrow '+ opts.prefix + 'arrow'+ stateobj.position.arrow +'"></div>';
+		}
+		if(stateobj.title && stateobj.title !== ''){
+			title = '<div class="lead '+ opts.prefix + 'title '+ opts.classes.title +'">'+  stateobj.title +'</div>';
+		}
+		state += '<div id="'+ opts.prefix +'state_'+ statename +'" class="'+ opts.prefix + 'state" data-jqi-name="'+ statename +'" style="display:none;">'+ 
+					arrow + title +
+					'<div class="'+ opts.prefix +'message '+ opts.classes.message +'">' + stateobj.html +'</div>'+
+					'<div class="'+ opts.prefix +'buttons '+ opts.classes.buttons +'"'+ ($.isEmptyObject(stateobj.buttons)? 'style="display:none;"':'') +'>';
+		
+		for(k in stateobj.buttons){
+			v = stateobj.buttons[k],
+			defbtn = stateobj.focus === i || (isNaN(stateobj.focus) && stateobj.defaultButton === i) ? ($.prompt.currentPrefix + 'defaultbutton ' + opts.classes.defaultButton) : '';
+
+			if(typeof v === 'object'){
+				state += '<button class="'+ opts.classes.button +' '+ defbtn;
+				
+				if(typeof v.classes !== "undefined"){
+					state += ' '+ ($.isArray(v.classes)? v.classes.join(' ') : v.classes) + ' ';
+				}
+				
+				state += '" name="' + opts.prefix + '_' + statename + '_button' + v.title.replace(/[^a-z0-9]+/gi,'') + '" id="' + opts.prefix + '_' + statename + '_button' + v.title.replace(/[^a-z0-9]+/gi,'') + '" value="' + v.value + '">' + v.title + '</button>';
+				
+			} else {
+				state += '<button class="'+ opts.classes.button +' '+ defbtn +'" name="' + opts.prefix + '_' + statename + '_button' + k + '" id="' + opts.prefix +  '_' + statename + '_button' + k + '" value="' + v + '">' + k + '</button>';
+				
+			}
+			i++;
+		}
+		state += '</div></div>';
+		
+		$state = $(state);
+
+		$state.on('impromptu:submit', stateobj.submit);
+
+		if(afterState !== undefined){
+			$jqistates.find('#'+ $.prompt.currentPrefix +'state_'+ afterState).after($state);
+		}
+		else{
+			$jqistates.append($state);
+		}
+
+		$.prompt.options.states[statename] = stateobj;
+
+		return $state;
+	};
+	
+	/**
+	* removeState - Removes a state from the promt
+	* @param state String - Name of the state
+	* @return Boolean - returns true on success, false on failure
+	*/
+	$.prompt.removeState = function(state) {
+		var $state = $.prompt.getState(state),
+			rm = function(){ $state.remove(); };
+
+		if($state.length === 0){
+			return false;
+		}
+
+		// transition away from it before deleting
+		if($state.is(':visible')){
+			if($state.next().length > 0){
+				$.prompt.nextState(rm);
+			}
+			else{
+				$.prompt.prevState(rm);
+			}
+		}
+		else{
+			$state.slideUp('slow', rm);
+		}
+
+		return true;
+	};
+
+	/**
+	* getState - Get the state by its name
+	* @param state String - Name of the state
+	* @return jQuery - the state
+	*/
+	$.prompt.getState = function(state) {
+		return $('#'+ $.prompt.currentPrefix +'state_'+ state);
+	};
+	$.prompt.getStateContent = function(state) {
+		return $.prompt.getState(state);
+	};
+	
+	/**
+	* getCurrentState - Get the current visible state
+	* @return jQuery - the current visible state
+	*/
+	$.prompt.getCurrentState = function() {
+		return $.prompt.getState($.prompt.getCurrentStateName());
+	};
+		
+	/**
+	* getCurrentStateName - Get the name of the current visible state
+	* @return String - the current visible state's name
+	*/
+	$.prompt.getCurrentStateName = function() {
+		return $.prompt.currentStateName;
+	};
+	
+	/**
+	* goToState - Goto the specified state
+	* @param state String - name of the state to transition to
+	* @param subState Boolean - true to be a sub state within the currently open state
+	* @param callback Function - called when the transition is complete
+	* @return jQuery - the newly active state
+	*/	
+	$.prompt.goToState = function(state, subState, callback) {
+		var $jqi = $.prompt.get(),
+			jqiopts = $.prompt.options,
+			$state = $.prompt.getState(state),
+			stateobj = jqiopts.states[$state.data('jqi-name')],
+			promptstatechanginge = new $.Event('impromptu:statechanging');
+
+		// subState can be ommitted
+		if(typeof subState === 'function'){
+			callback = subState;
+			subState = false;
+		}
+
+		$.prompt.jqib.trigger(promptstatechanginge, [$.prompt.getCurrentStateName(), state]);
+		
+		if(!promptstatechanginge.isDefaultPrevented() && $state.length > 0){
+			$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'parentstate').removeClass($.prompt.currentPrefix +'parentstate');
+
+			if(subState){ // hide any open substates
+				// get rid of any substates
+				$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'substate').not($state)
+					.slideUp(jqiopts.promptspeed)
+					.removeClass('.'+ $.prompt.currentPrefix +'substate')
+					.find('.'+ $.prompt.currentPrefix +'arrow').hide();
+
+				// add parent state class so it can be visible, but blocked
+				$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'state:visible').addClass($.prompt.currentPrefix +'parentstate');
+
+				// add substate class so we know it will be smaller
+				$state.addClass($.prompt.currentPrefix +'substate');
+			}
+			else{ // hide any open states
+				$.prompt.jqi.find('.'+ $.prompt.currentPrefix +'state').not($state)
+					.slideUp(jqiopts.promptspeed)
+					.find('.'+ $.prompt.currentPrefix +'arrow').hide();
+			}
+			$.prompt.currentStateName = stateobj.name;
+
+			$state.slideDown(jqiopts.promptspeed,function(){
+				var $t = $(this);
+
+				// if focus is a selector, find it, else its button index
+				if(typeof(stateobj.focus) === 'string'){
+					$t.find(stateobj.focus).eq(0).focus();
+				}
+				else{
+					$t.find('.'+ $.prompt.currentPrefix +'defaultbutton').focus();
+				}
+
+				$t.find('.'+ $.prompt.currentPrefix +'arrow').show(jqiopts.promptspeed);
+				
+				if (typeof callback === 'function'){
+					$.prompt.jqib.on('impromptu:statechanged', callback);
+				}
+				$.prompt.jqib.trigger('impromptu:statechanged', [state]);
+				if (typeof callback === 'function'){
+					$.prompt.jqib.off('impromptu:statechanged', callback);
+				}
+			});
+			if(!subState){
+				$.prompt.position();
+			}
+		}
+		return $state;
+	};
+
+	/**
+	* nextState - Transition to the next state
+	* @param callback Function - called when the transition is complete
+	* @return jQuery - the newly active state
+	*/	
+	$.prompt.nextState = function(callback) {
+		var $next = $('#'+ $.prompt.currentPrefix +'state_'+ $.prompt.getCurrentStateName()).next();
+		return $.prompt.goToState( $next.attr('id').replace($.prompt.currentPrefix +'state_',''), callback );
+	};
+	
+	/**
+	* prevState - Transition to the previous state
+	* @param callback Function - called when the transition is complete
+	* @return jQuery - the newly active state
+	*/	
+	$.prompt.prevState = function(callback) {
+		var $prev = $('#'+ $.prompt.currentPrefix +'state_'+ $.prompt.getCurrentStateName()).prev();
+		$.prompt.goToState( $prev.attr('id').replace($.prompt.currentPrefix +'state_',''), callback );
+	};
+	
+	/**
+	* close - Closes the prompt
+	* @param callback Function - called when the transition is complete
+	* @param clicked String - value of the button clicked (only used internally)
+	* @param msg jQuery - The state message body (only used internally)
+	* @param forvals Object - key/value pairs of all form field names and values (only used internally)
+	* @return jQuery - the newly active state
+	*/	
+	$.prompt.close = function(callCallback, clicked, msg, formvals){
+		if($.prompt.timeout){
+			clearTimeout($.prompt.timeout);
+			$.prompt.timeout = false;
+		}
+
+		$.prompt.jqib.fadeOut('fast',function(){
+
+			if(callCallback) {
+				$.prompt.jqib.trigger('impromptu:close', [clicked,msg,formvals]);
+			}
+			$.prompt.jqib.remove();
+			
+			$(window).off('resize',$.prompt.position);
+		});
+	};
+	
+	/**
+	* Enable using $('.selector').prompt({});
+	* This will grab the html within the prompt as the prompt message
+	*/
+	$.fn.prompt = function(options){
+		if(options === undefined){
+			options = {};
+		}
+		if(options.withDataAndEvents === undefined){
+			options.withDataAndEvents = false;
+		}
+		
+		$.prompt($(this).clone(options.withDataAndEvents).html(),options);
+	};
+	
+})(jQuery);

libs/jquery.autosize.js

@@ -0,0 +1,250 @@
+/*!
+	Autosize v1.18.1 - 2013-11-05
+	Automatically adjust textarea height based on user input.
+	(c) 2013 Jack Moore - http://www.jacklmoore.com/autosize
+	license: http://www.opensource.org/licenses/mit-license.php
+*/
+(function ($) {
+	var
+	defaults = {
+		className: 'autosizejs',
+		append: '',
+		callback: false,
+		resizeDelay: 10
+	},
+
+	// border:0 is unnecessary, but avoids a bug in Firefox on OSX
+	copy = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
+
+	// line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
+	typographyStyles = [
+		'fontFamily',
+		'fontSize',
+		'fontWeight',
+		'fontStyle',
+		'letterSpacing',
+		'textTransform',
+		'wordSpacing',
+		'textIndent'
+	],
+
+	// to keep track which textarea is being mirrored when adjust() is called.
+	mirrored,
+
+	// the mirror element, which is used to calculate what size the mirrored element should be.
+	mirror = $(copy).data('autosize', true)[0];
+
+	// test that line-height can be accurately copied.
+	mirror.style.lineHeight = '99px';
+	if ($(mirror).css('lineHeight') === '99px') {
+		typographyStyles.push('lineHeight');
+	}
+	mirror.style.lineHeight = '';
+
+	$.fn.autosize = function (options) {
+		if (!this.length) {
+			return this;
+		}
+
+		options = $.extend({}, defaults, options || {});
+
+		if (mirror.parentNode !== document.body) {
+			$(document.body).append(mirror);
+		}
+
+		return this.each(function () {
+			var
+			ta = this,
+			$ta = $(ta),
+			maxHeight,
+			minHeight,
+			boxOffset = 0,
+			callback = $.isFunction(options.callback),
+			originalStyles = {
+				height: ta.style.height,
+				overflow: ta.style.overflow,
+				overflowY: ta.style.overflowY,
+				wordWrap: ta.style.wordWrap,
+				resize: ta.style.resize
+			},
+			timeout,
+			width = $ta.width();
+
+			if ($ta.data('autosize')) {
+				// exit if autosize has already been applied, or if the textarea is the mirror element.
+				return;
+			}
+			$ta.data('autosize', true);
+
+			if ($ta.css('box-sizing') === 'border-box' || $ta.css('-moz-box-sizing') === 'border-box' || $ta.css('-webkit-box-sizing') === 'border-box'){
+				boxOffset = $ta.outerHeight() - $ta.height();
+			}
+
+			// IE8 and lower return 'auto', which parses to NaN, if no min-height is set.
+			minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset || 0, $ta.height());
+
+			$ta.css({
+				overflow: 'hidden',
+				overflowY: 'hidden',
+				wordWrap: 'break-word', // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width
+				resize: ($ta.css('resize') === 'none' || $ta.css('resize') === 'vertical') ? 'none' : 'horizontal'
+			});
+
+			// The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value.
+			function setWidth() {
+				var style, width;
+				
+				if ('getComputedStyle' in window) {
+					style = window.getComputedStyle(ta, null);
+					width = ta.getBoundingClientRect().width;
+
+					$.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){
+						width -= parseInt(style[val],10);
+					});
+
+					mirror.style.width = width + 'px';
+				}
+				else {
+					// window.getComputedStyle, getBoundingClientRect returning a width are unsupported and unneeded in IE8 and lower.
+					mirror.style.width = Math.max($ta.width(), 0) + 'px';
+				}
+			}
+
+			function initMirror() {
+				var styles = {};
+
+				mirrored = ta;
+				mirror.className = options.className;
+				maxHeight = parseInt($ta.css('maxHeight'), 10);
+
+				// mirror is a duplicate textarea located off-screen that
+				// is automatically updated to contain the same text as the
+				// original textarea.  mirror always has a height of 0.
+				// This gives a cross-browser supported way getting the actual
+				// height of the text, through the scrollTop property.
+				$.each(typographyStyles, function(i,val){
+					styles[val] = $ta.css(val);
+				});
+				$(mirror).css(styles);
+
+				setWidth();
+
+				// Chrome-specific fix:
+				// When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space
+				// made available by removing the scrollbar. This workaround triggers the reflow for Chrome.
+				if (window.chrome) {
+					var width = ta.style.width;
+					ta.style.width = '0px';
+					var ignore = ta.offsetWidth;
+					ta.style.width = width;
+				}
+			}
+
+			// Using mainly bare JS in this function because it is going
+			// to fire very often while typing, and needs to very efficient.
+			function adjust() {
+				var height, original;
+
+				if (mirrored !== ta) {
+					initMirror();
+				} else {
+					setWidth();
+				}
+
+				mirror.value = ta.value + options.append;
+				mirror.style.overflowY = ta.style.overflowY;
+				original = parseInt(ta.style.height,10);
+
+				// Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied
+				mirror.scrollTop = 0;
+
+				mirror.scrollTop = 9e4;
+
+				// Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding.
+				height = mirror.scrollTop;
+
+				if (maxHeight && height > maxHeight) {
+					ta.style.overflowY = 'scroll';
+					height = maxHeight;
+				} else {
+					ta.style.overflowY = 'hidden';
+					if (height < minHeight) {
+						height = minHeight;
+					}
+				}
+
+				height += boxOffset;
+
+				if (original !== height) {
+					ta.style.height = height + 'px';
+					if (callback) {
+						options.callback.call(ta,ta);
+					}
+				}
+			}
+
+			function resize () {
+				clearTimeout(timeout);
+				timeout = setTimeout(function(){
+					var newWidth = $ta.width();
+
+					if (newWidth !== width) {
+						width = newWidth;
+						adjust();
+					}
+				}, parseInt(options.resizeDelay,10));
+			}
+
+			if ('onpropertychange' in ta) {
+				if ('oninput' in ta) {
+					// Detects IE9.  IE9 does not fire onpropertychange or oninput for deletions,
+					// so binding to onkeyup to catch most of those occasions.  There is no way that I
+					// know of to detect something like 'cut' in IE9.
+					$ta.on('input.autosize keyup.autosize', adjust);
+				} else {
+					// IE7 / IE8
+					$ta.on('propertychange.autosize', function(){
+						if(event.propertyName === 'value'){
+							adjust();
+						}
+					});
+				}
+			} else {
+				// Modern Browsers
+				$ta.on('input.autosize', adjust);
+			}
+
+			// Set options.resizeDelay to false if using fixed-width textarea elements.
+			// Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize.
+
+			if (options.resizeDelay !== false) {
+				$(window).on('resize.autosize', resize);
+			}
+
+			// Event for manual triggering if needed.
+			// Should only be needed when the value of the textarea is changed through JavaScript rather than user input.
+			$ta.on('autosize.resize', adjust);
+
+			// Event for manual triggering that also forces the styles to update as well.
+			// Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method.
+			$ta.on('autosize.resizeIncludeStyle', function() {
+				mirrored = null;
+				adjust();
+			});
+
+			$ta.on('autosize.destroy', function(){
+				mirrored = null;
+				clearTimeout(timeout);
+				$(window).off('resize', resize);
+				$ta
+					.off('autosize')
+					.off('.autosize')
+					.css(originalStyles)
+					.removeData('autosize');
+			});
+
+			// Call adjust in case the textarea already contains text.
+			adjust();
+		});
+	};
+}(window.jQuery || window.$)); // jQuery or jQuery-like library, such as Zepto

muc.js

@@ -0,0 +1,139 @@
+/* jshint -W117 */
+/* a simple MUC connection plugin 
+ * can only handle a single MUC room
+ */
+Strophe.addConnectionPlugin('emuc', {
+    connection: null,
+    roomjid: null,
+    myroomjid: null,
+    members: {},
+    isOwner: false,
+    init: function (conn) {
+        this.connection = conn;
+    },
+    doJoin: function (jid, password) {
+        this.myroomjid = jid;
+        if (!this.roomjid) {
+            this.roomjid = Strophe.getBareJidFromJid(jid);
+            // add handlers (just once)
+            this.connection.addHandler(this.onPresence.bind(this), null, 'presence', null, null, this.roomjid, {matchBare: true});
+            this.connection.addHandler(this.onPresenceUnavailable.bind(this), null, 'presence', 'unavailable', null, this.roomjid, {matchBare: true});
+            this.connection.addHandler(this.onPresenceError.bind(this), null, 'presence', 'error', null, this.roomjid, {matchBare: true});
+            this.connection.addHandler(this.onMessage.bind(this), null, 'message', null, null, this.roomjid, {matchBare: true});
+        }
+
+        var join = $pres({to: this.myroomjid }).c('x', {xmlns: 'http://jabber.org/protocol/muc'});
+        if (password !== null) {
+            join.c('password').t(password);
+        }
+        this.connection.send(join);
+    },
+    onPresence: function (pres) {
+        var from = pres.getAttribute('from');
+        var type = pres.getAttribute('type');
+        if (type != null) {
+            return true;
+        }
+        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;
+            var create = $iq({type: 'set', to: this.roomjid})
+                    .c('query', {xmlns: 'http://jabber.org/protocol/muc#owner'})
+                    .c('x', {xmlns: 'jabber:x:data', type: 'submit'});
+            this.connection.send(create); // fire away
+        }
+
+        var member = {};
+        member.show = $(pres).find('>show').text();
+        member.status = $(pres).find('>status').text();
+        var tmp = $(pres).find('>x[xmlns="http://jabber.org/protocol/muc#user"]>item');
+        member.affilication = tmp.attr('affiliation');
+        member.role = tmp.attr('role');
+        if (from == this.myroomjid) {
+            $(document).trigger('joined.muc', [from, member]);
+        } else if (this.members[from] === undefined) {
+            // new participant
+            this.members[from] = member;
+            $(document).trigger('entered.muc', [from, member]);
+        } else {
+            console.log('presence change from', from);
+        }
+        return true;
+    },
+    onPresenceUnavailable: function (pres) {
+        var from = pres.getAttribute('from');
+        delete this.members[from];
+        $(document).trigger('left.muc', [from]);
+        return true;
+    },
+    onPresenceError: function (pres) {
+        var from = pres.getAttribute('from');
+        if ($(pres).find('>error[type="auth"]>not-authorized[xmlns="urn:ietf:params:xml:ns:xmpp-stanzas"]').length) {
+            $(document).trigger('passwordrequired.muc', [from]);
+
+            // FIXME: remove once moved to passwordrequired which should reuse dojoin
+            var ob = this;
+            window.setTimeout(function () {
+                var given = window.prompt('Password required');
+                if (given != null) {
+                    // FIXME: reuse doJoin?
+                    ob.connection.send($pres({to: ob.myroomjid }).c('x', {xmlns: 'http://jabber.org/protocol/muc'}).c('password').t(given));
+                } else {
+                    // user aborted
+                }
+            }, 50);
+        } else {
+            console.warn('onPresError ', pres);
+        }
+        return true;
+    },
+    sendMessage: function (body, nickname) {
+        var msg = $msg({to: this.roomjid, type: 'groupchat'});
+        msg.c('body', body).up();
+        if (nickname) {
+            msg.c('nick', {xmlns: 'http://jabber.org/protocol/nick'}).t(nickname).up().up();
+        }
+        this.connection.send(msg);
+    },
+    onMessage: function (msg) {
+        var txt = $(msg).find('>body').text();
+        // TODO: <subject/>
+        // FIXME: this is a hack. but jingle on muc makes nickchanges hard
+        var nick = $(msg).find('>nick[xmlns="http://jabber.org/protocol/nick"]').text() || Strophe.getResourceFromJid(msg.getAttribute('from'));
+        if (txt) {
+            console.log('chat', nick, txt);
+
+            updateChatConversation(nick, txt);
+        }
+        return true;
+    },
+    lockRoom: function (key) {
+        //http://xmpp.org/extensions/xep-0045.html#roomconfig
+        var ob = this;
+        this.connection.sendIQ($iq({to: this.roomjid, type: 'get'}).c('query', {xmlns: 'http://jabber.org/protocol/muc#owner'}),
+            function (res) {
+                if ($(res).find('>query>x[xmlns="jabber:x:data"]>field[var="muc#roomconfig_roomsecret"]').length) {
+                    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();
+                    formsubmit.c('field', {'var': 'muc#roomconfig_roomsecret'}).c('value').t(key).up().up();
+                    // FIXME: is muc#roomconfig_passwordprotectedroom required?
+                    this.connection.sendIQ(formsubmit,
+                        function (res) {
+                            console.log('set room password');
+                        },
+                        function (err) {
+                            console.warn('setting password failed', err);
+                        }
+                    );
+                } else {
+                    console.warn('room passwords not supported');
+                }
+            },
+            function (err) {
+                console.warn('setting password failed', err);
+            }
+        );
+    }
+});
+

webrtcrequired.html

@@ -0,0 +1 @@
+Sorry, webrtc is required for this and your browser does not seem to support it.