build v0.8.2

abort if console.log is found or if no entry for current version exists in CHANGELOG.md

CHANGELOG.md

@@ -1,3 +1,15 @@
+v0.8.2 / 2014-08-20
+===
+- fix use of custom username
+- write to console only if debug flag is set
+- allow string|boolean as config param
+- add translations
+
+v0.8.1 / 2014-08-12
+===
+- add user-defined xmpp options
+- fix login form without id submit
+
 v0.8.0 / 2014-07-02
 ===
 - add spanish translation

Gruntfile.js

@@ -46,6 +46,32 @@ module.exports = function(grunt) {
                to: "<%= app.version %>"
             } ]
          }
+      },
+      search: {
+         console: {
+            files: {
+               src: ['*.js']
+            },
+            options: {
+               searchString: /console\.log\((?!'[<>]|msg)/g,
+               logFormat: 'console',
+               failOnMatch: true
+            }
+         },
+         changelog: {
+            files: {
+               src: ['CHANGELOG.md']
+            },
+            options: {
+               searchString: "<%= app.version %>",
+               logFormat: 'console',
+               onComplete: function(m) {
+                  if(m.numMatches === 0) {
+                     grunt.fail.fatal("No entry in README.md for current version found.");
+                  }
+               }
+            }
+         }
       }
    });
 
@@ -55,8 +81,9 @@ module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-banner');
    grunt.loadNpmTasks('grunt-text-replace');
+   grunt.loadNpmTasks('grunt-search');
 
    // Default task.
-   grunt.registerTask('default', [ 'jshint', 'clean', 'copy', 'usebanner', 'replace' ]);
+   grunt.registerTask('default', [ 'jshint', 'search', 'clean', 'copy', 'usebanner', 'replace' ]);
 
 };

build/jsxc.css

@@ -91,22 +91,26 @@ p.jsxc_center {
 	border:1px solid red;
 }
 
-#jsxc_dialog .jsxc_fieldsetPriority {
-	width: 200px;
+#jsxc_dialog .jsxc_fieldset {
+	width: 280px;
 	padding: 10px;
 	border-radius: 3px;
 }
 
-#jsxc_dialog .jsxc_fieldsetPriority label {
+#jsxc_dialog .jsxc_fieldset label {
 	display: inline-block;
 	width: 100px;
 }
 
-#jsxc_dialog .jsxc_fieldsetPriority input[type="Number"] {
+#jsxc_dialog .jsxc_fieldset input[type="Number"] {
    display: inline-block;
    width: 50px;
 }
 
+#jsxc_dialog input[readonly] {
+	background-color: #efefef;
+}
+
 /*############################ 
  *########## Overall ######### 
  *############################*/
@@ -162,6 +166,7 @@ div#jsxc_roster {
 	z-index: 80;
 	margin-left: 10px;
 	box-shadow: 0px 0px 7px #000000;
+	background-color: #383C43;
 }
 
 div#jsxc_roster .slimScrollDiv {

build/jsxc.lib.js

@@ -1,5 +1,5 @@
 /**
- * jsxc v0.8.0 - 2014-07-02
+ * jsxc v0.8.2 - 2014-08-20
  * 
  * Copyright (c) 2014 Klaus Herberth <klaus@jsxc.org> <br>
  * Released under the MIT license
@@ -7,7 +7,7 @@
  * Please see http://www.jsxc.org/
  * 
  * @author Klaus Herberth <klaus@jsxc.org>
- * @version 0.8.0
+ * @version 0.8.2
  */
 
 var jsxc;
@@ -22,7 +22,7 @@ var jsxc;
     */
    jsxc = {
       /** Version of jsxc */
-      version: '0.8.0',
+      version: '0.8.2',
 
       /** True if i'm the master */
       master: false,
@@ -108,7 +108,9 @@ var jsxc;
          }
 
          if (data) {
-            console.log(msg, data);
+            if (jsxc.storage.getItem('debug') === true) {
+               console.log(msg, data);
+            }
 
             // try to convert data to string
             var d;
@@ -271,15 +273,61 @@ var jsxc;
 
                jsxc.gui.showWaitAlert(jsxc.l.please_wait_until_we_logged_you_in);
 
-               jsxc.options.xmpp.jid = jsxc.options.loginForm.preJid($(jsxc.options.loginForm.jid).val());
-               jsxc.options.xmpp.password = $(jsxc.options.loginForm.pass).val();
+               var username = $(jsxc.options.loginForm.jid).val();
+               var password = $(jsxc.options.loginForm.pass).val();
 
-               jsxc.triggeredFromForm = true;
+               if (typeof jsxc.options.loadSettings !== 'function') {
+                  jsxc.error('No loadSettings function given. Abort.');
+                  return;
+               }
 
-               jsxc.xmpp.login();
+               var settings = jsxc.options.loadSettings.call(this, username, password);
 
-               // Trigger submit in jsxc.xmpp.connected()
-               return false;
+               if (settings === null || typeof settings === 'undefined') {
+                  return true;
+               }
+
+               if (typeof settings.xmpp.username === 'string') {
+                  username = settings.xmpp.username;
+               }
+
+               var resource = (settings.xmpp.resource) ? '/' + settings.xmpp.resource : '';
+               var domain = settings.xmpp.domain;
+               var jid;
+
+               if (username.match(/@(.*)$/)) {
+                  jid = (username.match(/\/(.*)$/)) ? username : username + resource;
+               } else {
+                  jid = username + '@' + domain + resource;
+               }
+
+               if (typeof jsxc.options.loginForm.preJid === 'function') {
+                  jid = jsxc.options.loginForm.preJid(jid);
+               }
+
+               jsxc.cid = jsxc.jidToCid(jid);
+
+               settings.xmpp.username = jid.split('@')[0];
+               settings.xmpp.domain = jid.split('@')[1].split('/')[0];
+               settings.xmpp.resource = jid.split('@')[1].split('/')[1] || "";
+
+               $.each(settings, function(key, val) {
+                  jsxc.options.set(key, val);
+               });
+
+               jsxc.options.xmpp.jid = jid;
+               jsxc.options.xmpp.password = password;
+
+               if (settings.xmpp.onlogin === "true" || settings.xmpp.onlogin === true) {
+                  jsxc.triggeredFromForm = true;
+
+                  jsxc.xmpp.login();
+
+                  // Trigger submit in jsxc.xmpp.connected()
+                  return false;
+               }
+
+               return true;
             });
 
          } else {
@@ -476,7 +524,7 @@ var jsxc;
 
          if (!buddies || buddies.length === 0) {
             jsxc.debug('No saved buddylist.');
-            
+
             jsxc.gui.roster.empty();
 
             return;
@@ -531,7 +579,7 @@ var jsxc;
             form.submit(val);
          });
 
-         if (form.find('#submit')) {
+         if (form.find('#submit').length > 0) {
             form.find('#submit').click();
          } else {
             form.submit();
@@ -624,7 +672,9 @@ var jsxc;
       xmpp: {
          url: null,
          jid: null,
-         password: null
+         password: null,
+         overwrite: false,
+         onlogin: true
       },
 
       /** If all 3 properties are set, the login form is used */
@@ -703,6 +753,27 @@ var jsxc;
        */
       defaultAvatar: function() {
 
+      },
+
+      /**
+       * Returns permanent saved settings.
+       * 
+       * @memberOf jsxc.options
+       * @param username String username
+       * @param password String password
+       */
+      loadSettings: function() {
+
+      },
+
+      /**
+       * Call this function to save user settings permanent.
+       * 
+       * @memberOf jsxc.options
+       * @param data Holds all data as {key: value}
+       */
+      saveSettinsPermanent: function() {
+
       }
    };
 
@@ -952,6 +1023,8 @@ var jsxc;
             jsxc.options.xmpp.jid = $(this).find('#jsxc_username').val();
             jsxc.options.xmpp.password = $(this).find('#jsxc_password').val();
 
+            jsxc.cid = jsxc.jidToCid(jsxc.options.xmpp.jid);
+
             jsxc.triggeredFromBox = true;
             jsxc.options.loginForm.form = $(this);
 
@@ -1155,7 +1228,7 @@ var jsxc;
             jsxc.xmpp.addBuddy(username, alias);
 
             jsxc.gui.dialog.close();
-            
+
             return false;
          });
       },
@@ -1384,6 +1457,10 @@ var jsxc;
       showSettings: function() {
          jsxc.gui.dialog.open(jsxc.gui.template.get('settings'));
 
+         if (jsxc.options.get('xmpp').overwrite === 'false' || jsxc.options.get('xmpp').overwrite === false) {
+            $('.jsxc_fieldsetXmpp').hide();
+         }
+
          $('#jsxc_dialog form').each(function() {
             var self = $(this);
 
@@ -1391,11 +1468,18 @@ var jsxc;
                var id = this.id.split("-");
                var prop = id[0];
                var key = id[1];
+               var type = this.type;
 
                var data = jsxc.options.get(prop);
 
-               if (data && data[key]) {
-                  $(this).val(data[key]);
+               if (data && typeof data[key] !== 'undefined') {
+                  if (type === 'checkbox') {
+                     if (data[key] !== 'false' && data[key] !== false) {
+                        this.checked = 'checked';
+                     }
+                  } else {
+                     $(this).val(data[key]);
+                  }
                }
             });
          });
@@ -1409,7 +1493,14 @@ var jsxc;
                var id = this.id.split("-");
                var prop = id[0];
                var key = id[1];
-               var val = $(this).val();
+               var val;
+               var type = this.type;
+
+               if (type === 'checkbox') {
+                  val = this.checked;
+               } else {
+                  val = $(this).val();
+               }
 
                if (!data[prop]) {
                   data[prop] = {};
@@ -1422,9 +1513,11 @@ var jsxc;
                jsxc.options.set(key, val);
             });
 
+            var err = jsxc.options.saveSettinsPermanent.call(this, data);
+
             setTimeout(function() {
                self.find('input[type="submit"]').effect('highlight', {
-                  color: 'green'
+                  color: (err) ? 'green' : 'red'
                }, 4000);
             }, 200);
 
@@ -1630,7 +1723,7 @@ var jsxc;
             jsxc.gui.updateAvatar(bud, data.jid, data.avatar);
             return false;
          };
-         
+
          bud.find('.jsxc_control').click(expandClick);
          bud.dblclick(expandClick);
 
@@ -1826,13 +1919,13 @@ var jsxc;
             jsxc.gui.showLoginBox();
          }));
       },
-      
+
       /**
        * Shows a text with link to add a new buddy.
        * 
        * @memberOf jsxc.gui.roster
        */
-      empty: function() { console.trace(); 
+      empty: function() {
          var text = $('<p>' + jsxc.l.Your_roster_is_empty_add_a + '</p>');
          var link = $('<a>' + jsxc.l.new_buddy + '</a>');
 
@@ -2544,9 +2637,9 @@ var jsxc;
             </div>\
         </li>',
       loginBox: '<h3>%%Login%%</h3>\
-        <form method="get">\
+        <form>\
             <p><label for="jsxc_username">%%Username%%:</label>\
-               <input type="text" name="username" id="jsxc_username" required="required" value="{{my_jid}}"/></p>\
+               <input type="text" name="username" id="jsxc_username" required="required" pattern="[^@]+@[^@]+(/.+)?" value="{{my_jid}}"/></p>\
             <p><label for="jsxc_password">%%Password%%:</label>\
                <input type="password" name="password" required="required" id="jsxc_password" /></p>\
             <div class="bottom_submit_section">\
@@ -2606,13 +2699,25 @@ var jsxc;
       settings: '<h3>%%User_settings%%</h3>\
          <p></p>\
          <form>\
-            <fieldset class="jsxc_fieldsetPriority">\
+            <fieldset class="jsxc_fieldsetXmpp jsxc_fieldset">\
+               <legend>%%Login options%%</legend>\
+               <label for="xmpp-url">%%BOSH url%%</label><input type="text" id="xmpp-url" readonly="readonly"/><br />\
+               <label for="xmpp-username">%%Username%%</label><input type="text" id="xmpp-username"/><br />\
+               <label for="xmpp-domain">%%Domain%%</label><input type="text" id="xmpp-domain"/><br />\
+               <label for="xmpp-resource">%%Resource%%</label><input type="text" id="xmpp-resource"/><br />\
+               <label for="xmpp-onlogin">%%On login%%</label><input type="checkbox" id="xmpp-onlogin" /><br />\
+               <input type="submit" value="%%Save%%"/>\
+            </fieldset>\
+         </form>\
+         <p></p>\
+         <form>\
+            <fieldset class="jsxc_fieldsetPriority jsxc_fieldset">\
                <legend>%%Priority%%</legend>\
-               <label for="priority-online">%%Online%%</label><input type="number" value="0" id="priority-online" min="-128" max="127" step="1" required="required"/>\
-               <label for="priority-chat">%%Chatty%%</label><input type="number" value="0" id="priority-chat" min="-128" max="127" step="1" required="required"/>\
-               <label for="priority-away">%%Away%%</label><input type="number" value="0" id="priority-away" min="-128" max="127" step="1" required="required"/>\
-               <label for="priority-xa">%%Extended_away%%</label><input type="number" value="0" id="priority-xa" min="-128" max="127" step="1" required="required"/>\
-               <label for="priority-dnd">%%dnd%%</label><input type="number" value="0" id="priority-dnd" min="-128" max="127" step="1" required="required"/>\
+               <label for="priority-online">%%Online%%</label><input type="number" value="0" id="priority-online" min="-128" max="127" step="1" required="required"/><br />\
+               <label for="priority-chat">%%Chatty%%</label><input type="number" value="0" id="priority-chat" min="-128" max="127" step="1" required="required"/><br />\
+               <label for="priority-away">%%Away%%</label><input type="number" value="0" id="priority-away" min="-128" max="127" step="1" required="required"/><br />\
+               <label for="priority-xa">%%Extended_away%%</label><input type="number" value="0" id="priority-xa" min="-128" max="127" step="1" required="required"/><br />\
+               <label for="priority-dnd">%%dnd%%</label><input type="number" value="0" id="priority-dnd" min="-128" max="127" step="1" required="required"/><br />\
                <input type="submit" value="%%Save%%"/>\
             </fieldset>\
          </form>'
@@ -2636,7 +2741,7 @@ var jsxc;
          var sid = jsxc.storage.getItem('sid');
          var rid = jsxc.storage.getItem('rid');
          var jid = jsxc.storage.getItem('jid');
-         var url = jsxc.options.xmpp.url || jsxc.storage.getItem('boshUrl');
+         var url = jsxc.options.get('xmpp').url;
 
          // Register eventlistener
          $(document).on('connected.jsxc', jsxc.xmpp.connected);
@@ -2667,10 +2772,6 @@ var jsxc;
             };
          }
 
-         // Strophe.log = function(level, msg) {
-         // console.log(level + " " + msg);
-         // };
-
          var callback = function(status, condition) {
 
             jsxc.debug(Object.getOwnPropertyNames(Strophe.Status)[status] + ': ' + condition);
@@ -2799,7 +2900,7 @@ var jsxc;
             $(document).one('cloaded.roster.jsxc', jsxc.xmpp.sendPres);
 
             $('#jsxc_roster > p:first').remove();
-            
+
             var iq = $iq({
                type: 'get'
             }).c('query', {
@@ -2953,10 +3054,10 @@ var jsxc;
             jsxc.gui.roster.add(cid);
          });
 
-         if(buddies.length === 0) {
+         if (buddies.length === 0) {
             jsxc.gui.roster.empty();
          }
-         
+
          jsxc.storage.setUserItem('buddylist', buddies);
 
          jsxc.debug('Roster loaded');
@@ -3030,7 +3131,7 @@ var jsxc;
                }
             }
          });
-         
+
          if (!jsxc.storage.getUserItem('buddylist') || jsxc.storage.getUserItem('buddylist').length === 0) {
             jsxc.gui.roster.empty();
          } else {
@@ -4710,7 +4811,12 @@ var jsxc;
          A_fingerprint_: 'A fingerprint is used to make sure that the person you are talking to is who he or she is saying.',
          Your_roster_is_empty_add_a: 'Your roster is empty, add a ',
          new_buddy: 'new buddy',
-         is: 'is'
+         is: 'is',
+         Login_options: 'Login options',
+         BOSH_url: 'BOSH url',
+         Domain: 'Domain',
+         Resource: 'Resource',
+         On_login: 'On login'
       },
       de: {
          please_wait_until_we_logged_you_in: 'Bitte warte bis wir dich eingeloggt haben.',
@@ -4846,7 +4952,14 @@ var jsxc;
          Save: 'Speichern',
          User_settings: 'Benutzereinstellungen',
          A_fingerprint_: 'Ein Fingerabdruck wird dazu benutzt deinen Gesprächspartner zu identifizieren.',
-         is: 'ist'
+         Your_roster_is_empty_add_a: 'Deine Freundesliste ist leer, füge einen neuen Freund ',
+         new_buddy: 'hinzu',
+         is: 'ist',
+         Login_options: 'Anmeldeoptionen',
+         BOSH_url: 'BOSH url',
+         Domain: 'Domain',
+         Resource: 'Ressource',
+         On_login: 'Beim Anmelden'
       },
       es: {
          please_wait_until_we_logged_you_in: 'Por favor, espere...',
@@ -4945,7 +5058,7 @@ var jsxc;
          Confirm: 'Confirmar',
          Dismiss: 'Rechazar',
          Remove: 'Eliminar',
-         Online_help: 'Ayuda en línea', 
+         Online_help: 'Ayuda en línea',
          FN: 'Nombre completo ',
          N: ' ',
          FAMILY: 'Apellido',
@@ -4972,7 +5085,7 @@ var jsxc;
          DESC: 'Descripción',
          PHOTO: ' ',
          send_message: 'mandar un texto',
-         get_info: 'obtener información', 
+         get_info: 'obtener información',
          Settings: 'Ajustes',
          Priority: 'Prioridad',
          Save: 'Guardar',
@@ -4980,7 +5093,12 @@ var jsxc;
          A_fingerprint_: 'La huella digital se utiliza para que puedas estar seguro que la persona con la que estas hablando es quien realmente dice ser',
          Your_roster_is_empty_add_a: 'Tu lista de amigos esta vacia',
          new_buddy: 'Nuevo amigo',
-         is: 'es'
+         is: 'es',
+         Login_options: 'Opciones de login',
+         BOSH_url: 'BOSH url',
+         Domain: 'Dominio',
+         Resource: 'Recurso',
+         On_login: 'Iniciar sesión'
       }
    };
 }(jQuery));

build/jsxc.lib.webrtc.js

@@ -1,5 +1,5 @@
 /**
- * jsxc v0.8.0 - 2014-07-02
+ * jsxc v0.8.2 - 2014-08-20
  * 
  * Copyright (c) 2014 Klaus Herberth <klaus@jsxc.org> <br>
  * Released under the MIT license
@@ -7,7 +7,7 @@
  * Please see http://www.jsxc.org/
  * 
  * @author Klaus Herberth <klaus@jsxc.org>
- * @version 0.8.0
+ * @version 0.8.2
  */
 
 /* jsxc, Strophe, SDPUtil, getUserMediaWithConstraints, setupRTC, jQuery */
@@ -185,7 +185,7 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
       onAddRosterItem: function(event, cid, data, el) {
          var self = jsxc.webrtc;
          var videoIcon = $('<div class="jsxc_video jsxc_disabled" title="' + jsxc.l.Start_video_call + '"></div>');
-console.log(data);
+
          videoIcon.click(function() {
             self.startCall(data.jid);
             return false;

example/ajax/getturncredentials.json

@@ -0,0 +1 @@
+{"url":"numb.viagenie.ca","username":"webrtc@live.com","credential":"muazkh","ttl":43200}

example/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+	  <title>JSXC example application</title>
+	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	  
+	  <link href="../lib/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />
+	  <link href="../lib/jquery.mCustomScrollbar.css" media="all" rel="stylesheet" type="text/css" />
+	  <link href="../lib/jquery.colorbox.css" media="all" rel="stylesheet" type="text/css" />
+	  <link href="../jsxc.css" media="all" rel="stylesheet" type="text/css" />
+	  <link href="../jsxc.webrtc.css" media="all" rel="stylesheet" type="text/css" />
+	  
+	  <style type="text/css">
+	  body, * {font-size: 13px; font-family: "Helvetica Neue",Helvetica,Arial,FreeSans,sans-serif;}
+	  fieldset {float: left;}
+	  </style>
+	  
+	  <script src="../lib/jquery.min.js"></script>
+	  <script src="../lib/jquery.ui.min.js"></script>
+	  <script src="../lib/jquery.colorbox-min.js"></script>
+	  <script src="../lib/jquery.slimscroll.js"></script>
+	  <script src="../lib/jquery.fullscreen.js"></script>
+	  <script src="../lib/strophe.js"></script>
+	  <script src="../lib/strophe.muc.js"></script>
+	  <script src="../lib/strophe.disco.js"></script>
+	  <script src="../lib/strophe.caps.js"></script>
+	  <script src="../lib/strophe.vcard.js"></script>
+	  <script src="../lib/strophe.jingle/strophe.jingle.js"></script>
+	  <script src="../lib/strophe.jingle/strophe.jingle.session.js"></script>
+	  <script src="../lib/strophe.jingle/strophe.jingle.sdp.js"></script>
+	  <script src="../lib/strophe.jingle/strophe.jingle.adapter.js"></script>
+	  <script src="../lib/otr/build/dep/salsa20.js"></script>
+	  <script src="../lib/otr/build/dep/bigint.js"></script>
+	  <script src="../lib/otr/build/dep/crypto.js"></script>
+	  <script src="../lib/otr/build/dep/eventemitter.js"></script>
+	  <script src="../lib/otr/build/otr.js"></script>
+	  <script src="../jsxc.lib.js"></script>
+	  <script src="../jsxc.lib.webrtc.js"></script>
+	  
+	  <script src="js/example.js"></script>
+
+	</head>
+	
+	<body>
+	  <form id="form" method="post" action="login.html">
+		  <fieldset>
+		     <legend>Login</legend>
+		     <label for="username">Username:</label><input type="text" id="username" name="username" /><br />
+		     <label for="password">Password:</label><input type="password" id="password" name="password" /><br />
+		     <input type="submit" value="Log in" />
+		  </fieldset>
+	  </form>
+	</body>
+</html>

example/js/example.js

@@ -0,0 +1,33 @@
+$(function() {
+   jsxc.init({
+      loginForm: {
+         form: '#form',
+         jid: '#username',
+         pass: '#password'
+      },
+      logoutElement: $('#logout'),
+      checkFlash: false,
+      rosterAppend: 'body',
+      root: '/jsxc/',
+      turnCredentialsPath: 'ajax/getturncredentials.json',
+      displayRosterMinimized: function() {
+         return true;
+      },
+      otr: {
+         debug: true,
+         SEND_WHITESPACE_TAG: true,
+         WHITESPACE_START_AKE: true
+      },
+      loadSettings: function(username, password) {
+         return {
+            xmpp: {
+               url: '/http-bind/',
+               domain: 'localhost',
+               resource: 'example',
+               overwrite: true,
+               onlogin: true
+            }
+         };
+      }
+   });
+});

example/login.html

@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+   <head>
+     <title>JSXC example application</title>
+     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+     
+     <link href="../lib/jquery-ui.min.css" media="all" rel="stylesheet" type="text/css" />
+     <link href="../lib/jquery.mCustomScrollbar.css" media="all" rel="stylesheet" type="text/css" />
+     <link href="../lib/jquery.colorbox.css" media="all" rel="stylesheet" type="text/css" />
+     <link href="../jsxc.css" media="all" rel="stylesheet" type="text/css" />
+     <link href="../jsxc.webrtc.css" media="all" rel="stylesheet" type="text/css" />
+     
+     <style type="text/css">
+     body, * {font-size: 13px; font-family: "Helvetica Neue",Helvetica,Arial,FreeSans,sans-serif;}
+     fieldset {float: left;}
+     </style>
+     
+     <script src="../lib/jquery.min.js"></script>
+     <script src="../lib/jquery.ui.min.js"></script>
+     <script src="../lib/jquery.colorbox-min.js"></script>
+     <script src="../lib/jquery.slimscroll.js"></script>
+     <script src="../lib/jquery.fullscreen.js"></script>
+     <script src="../lib/strophe.js"></script>
+     <script src="../lib/strophe.muc.js"></script>
+     <script src="../lib/strophe.disco.js"></script>
+     <script src="../lib/strophe.caps.js"></script>
+     <script src="../lib/strophe.vcard.js"></script>
+     <script src="../lib/strophe.jingle/strophe.jingle.js"></script>
+     <script src="../lib/strophe.jingle/strophe.jingle.session.js"></script>
+     <script src="../lib/strophe.jingle/strophe.jingle.sdp.js"></script>
+     <script src="../lib/strophe.jingle/strophe.jingle.adapter.js"></script>
+     <script src="../lib/otr/build/dep/salsa20.js"></script>
+     <script src="../lib/otr/build/dep/bigint.js"></script>
+     <script src="../lib/otr/build/dep/crypto.js"></script>
+     <script src="../lib/otr/build/dep/eventemitter.js"></script>
+     <script src="../lib/otr/build/otr.js"></script>
+     <script src="../jsxc.lib.js"></script>
+     <script src="../jsxc.lib.webrtc.js"></script>
+     
+     <script src="js/example.js"></script>
+
+   </head>
+   
+   <body>
+     <h1>You are logged in :-).</h1>
+     
+     <a href="index.html" id="logout">Log out</a>
+   </body>
+</html>

jsxc.css

@@ -91,22 +91,26 @@ p.jsxc_center {
 	border:1px solid red;
 }
 
-#jsxc_dialog .jsxc_fieldsetPriority {
-	width: 200px;
+#jsxc_dialog .jsxc_fieldset {
+	width: 280px;
 	padding: 10px;
 	border-radius: 3px;
 }
 
-#jsxc_dialog .jsxc_fieldsetPriority label {
+#jsxc_dialog .jsxc_fieldset label {
 	display: inline-block;
 	width: 100px;
 }
 
-#jsxc_dialog .jsxc_fieldsetPriority input[type="Number"] {
+#jsxc_dialog .jsxc_fieldset input[type="Number"] {
    display: inline-block;
    width: 50px;
 }
 
+#jsxc_dialog input[readonly] {
+	background-color: #efefef;
+}
+
 /*############################ 
  *########## Overall ######### 
  *############################*/
@@ -162,6 +166,7 @@ div#jsxc_roster {
 	z-index: 80;
 	margin-left: 10px;
 	box-shadow: 0px 0px 7px #000000;
+	background-color: #383C43;
 }
 
 div#jsxc_roster .slimScrollDiv {

jsxc.lib.js

@@ -96,7 +96,9 @@ var jsxc;
          }
 
          if (data) {
-            console.log(msg, data);
+            if (jsxc.storage.getItem('debug') === true) {
+               console.log(msg, data);
+            }
 
             // try to convert data to string
             var d;
@@ -259,15 +261,61 @@ var jsxc;
 
                jsxc.gui.showWaitAlert(jsxc.l.please_wait_until_we_logged_you_in);
 
-               jsxc.options.xmpp.jid = jsxc.options.loginForm.preJid($(jsxc.options.loginForm.jid).val());
-               jsxc.options.xmpp.password = $(jsxc.options.loginForm.pass).val();
+               var username = $(jsxc.options.loginForm.jid).val();
+               var password = $(jsxc.options.loginForm.pass).val();
 
-               jsxc.triggeredFromForm = true;
+               if (typeof jsxc.options.loadSettings !== 'function') {
+                  jsxc.error('No loadSettings function given. Abort.');
+                  return;
+               }
 
-               jsxc.xmpp.login();
+               var settings = jsxc.options.loadSettings.call(this, username, password);
 
-               // Trigger submit in jsxc.xmpp.connected()
-               return false;
+               if (settings === null || typeof settings === 'undefined') {
+                  return true;
+               }
+
+               if (typeof settings.xmpp.username === 'string') {
+                  username = settings.xmpp.username;
+               }
+
+               var resource = (settings.xmpp.resource) ? '/' + settings.xmpp.resource : '';
+               var domain = settings.xmpp.domain;
+               var jid;
+
+               if (username.match(/@(.*)$/)) {
+                  jid = (username.match(/\/(.*)$/)) ? username : username + resource;
+               } else {
+                  jid = username + '@' + domain + resource;
+               }
+
+               if (typeof jsxc.options.loginForm.preJid === 'function') {
+                  jid = jsxc.options.loginForm.preJid(jid);
+               }
+
+               jsxc.cid = jsxc.jidToCid(jid);
+
+               settings.xmpp.username = jid.split('@')[0];
+               settings.xmpp.domain = jid.split('@')[1].split('/')[0];
+               settings.xmpp.resource = jid.split('@')[1].split('/')[1] || "";
+
+               $.each(settings, function(key, val) {
+                  jsxc.options.set(key, val);
+               });
+
+               jsxc.options.xmpp.jid = jid;
+               jsxc.options.xmpp.password = password;
+
+               if (settings.xmpp.onlogin === "true" || settings.xmpp.onlogin === true) {
+                  jsxc.triggeredFromForm = true;
+
+                  jsxc.xmpp.login();
+
+                  // Trigger submit in jsxc.xmpp.connected()
+                  return false;
+               }
+
+               return true;
             });
 
          } else {
@@ -464,7 +512,7 @@ var jsxc;
 
          if (!buddies || buddies.length === 0) {
             jsxc.debug('No saved buddylist.');
-            
+
             jsxc.gui.roster.empty();
 
             return;
@@ -519,7 +567,7 @@ var jsxc;
             form.submit(val);
          });
 
-         if (form.find('#submit')) {
+         if (form.find('#submit').length > 0) {
             form.find('#submit').click();
          } else {
             form.submit();
@@ -612,7 +660,9 @@ var jsxc;
       xmpp: {
          url: null,
          jid: null,
-         password: null
+         password: null,
+         overwrite: false,
+         onlogin: true
       },
 
       /** If all 3 properties are set, the login form is used */
@@ -691,6 +741,27 @@ var jsxc;
        */
       defaultAvatar: function() {
 
+      },
+
+      /**
+       * Returns permanent saved settings.
+       * 
+       * @memberOf jsxc.options
+       * @param username String username
+       * @param password String password
+       */
+      loadSettings: function() {
+
+      },
+
+      /**
+       * Call this function to save user settings permanent.
+       * 
+       * @memberOf jsxc.options
+       * @param data Holds all data as {key: value}
+       */
+      saveSettinsPermanent: function() {
+
       }
    };
 
@@ -940,6 +1011,8 @@ var jsxc;
             jsxc.options.xmpp.jid = $(this).find('#jsxc_username').val();
             jsxc.options.xmpp.password = $(this).find('#jsxc_password').val();
 
+            jsxc.cid = jsxc.jidToCid(jsxc.options.xmpp.jid);
+
             jsxc.triggeredFromBox = true;
             jsxc.options.loginForm.form = $(this);
 
@@ -1143,7 +1216,7 @@ var jsxc;
             jsxc.xmpp.addBuddy(username, alias);
 
             jsxc.gui.dialog.close();
-            
+
             return false;
          });
       },
@@ -1372,6 +1445,10 @@ var jsxc;
       showSettings: function() {
          jsxc.gui.dialog.open(jsxc.gui.template.get('settings'));
 
+         if (jsxc.options.get('xmpp').overwrite === 'false' || jsxc.options.get('xmpp').overwrite === false) {
+            $('.jsxc_fieldsetXmpp').hide();
+         }
+
          $('#jsxc_dialog form').each(function() {
             var self = $(this);
 
@@ -1379,11 +1456,18 @@ var jsxc;
                var id = this.id.split("-");
                var prop = id[0];
                var key = id[1];
+               var type = this.type;
 
                var data = jsxc.options.get(prop);
 
-               if (data && data[key]) {
-                  $(this).val(data[key]);
+               if (data && typeof data[key] !== 'undefined') {
+                  if (type === 'checkbox') {
+                     if (data[key] !== 'false' && data[key] !== false) {
+                        this.checked = 'checked';
+                     }
+                  } else {
+                     $(this).val(data[key]);
+                  }
                }
             });
          });
@@ -1397,7 +1481,14 @@ var jsxc;
                var id = this.id.split("-");
                var prop = id[0];
                var key = id[1];
-               var val = $(this).val();
+               var val;
+               var type = this.type;
+
+               if (type === 'checkbox') {
+                  val = this.checked;
+               } else {
+                  val = $(this).val();
+               }
 
                if (!data[prop]) {
                   data[prop] = {};
@@ -1410,9 +1501,11 @@ var jsxc;
                jsxc.options.set(key, val);
             });
 
+            var err = jsxc.options.saveSettinsPermanent.call(this, data);
+
             setTimeout(function() {
                self.find('input[type="submit"]').effect('highlight', {
-                  color: 'green'
+                  color: (err) ? 'green' : 'red'
                }, 4000);
             }, 200);
 
@@ -1618,7 +1711,7 @@ var jsxc;
             jsxc.gui.updateAvatar(bud, data.jid, data.avatar);
             return false;
          };
-         
+
          bud.find('.jsxc_control').click(expandClick);
          bud.dblclick(expandClick);
 
@@ -1814,13 +1907,13 @@ var jsxc;
             jsxc.gui.showLoginBox();
          }));
       },
-      
+
       /**
        * Shows a text with link to add a new buddy.
        * 
        * @memberOf jsxc.gui.roster
        */
-      empty: function() { console.trace(); 
+      empty: function() {
          var text = $('<p>' + jsxc.l.Your_roster_is_empty_add_a + '</p>');
          var link = $('<a>' + jsxc.l.new_buddy + '</a>');
 
@@ -2532,9 +2625,9 @@ var jsxc;
             </div>\
         </li>',
       loginBox: '<h3>%%Login%%</h3>\
-        <form method="get">\
+        <form>\
             <p><label for="jsxc_username">%%Username%%:</label>\
-               <input type="text" name="username" id="jsxc_username" required="required" value="{{my_jid}}"/></p>\
+               <input type="text" name="username" id="jsxc_username" required="required" pattern="[^@]+@[^@]+(/.+)?" value="{{my_jid}}"/></p>\
             <p><label for="jsxc_password">%%Password%%:</label>\
                <input type="password" name="password" required="required" id="jsxc_password" /></p>\
             <div class="bottom_submit_section">\
@@ -2594,13 +2687,25 @@ var jsxc;
       settings: '<h3>%%User_settings%%</h3>\
          <p></p>\
          <form>\
-            <fieldset class="jsxc_fieldsetPriority">\
+            <fieldset class="jsxc_fieldsetXmpp jsxc_fieldset">\
+               <legend>%%Login options%%</legend>\
+               <label for="xmpp-url">%%BOSH url%%</label><input type="text" id="xmpp-url" readonly="readonly"/><br />\
+               <label for="xmpp-username">%%Username%%</label><input type="text" id="xmpp-username"/><br />\
+               <label for="xmpp-domain">%%Domain%%</label><input type="text" id="xmpp-domain"/><br />\
+               <label for="xmpp-resource">%%Resource%%</label><input type="text" id="xmpp-resource"/><br />\
+               <label for="xmpp-onlogin">%%On login%%</label><input type="checkbox" id="xmpp-onlogin" /><br />\
+               <input type="submit" value="%%Save%%"/>\
+            </fieldset>\
+         </form>\
+         <p></p>\
+         <form>\
+            <fieldset class="jsxc_fieldsetPriority jsxc_fieldset">\
                <legend>%%Priority%%</legend>\
-               <label for="priority-online">%%Online%%</label><input type="number" value="0" id="priority-online" min="-128" max="127" step="1" required="required"/>\
-               <label for="priority-chat">%%Chatty%%</label><input type="number" value="0" id="priority-chat" min="-128" max="127" step="1" required="required"/>\
-               <label for="priority-away">%%Away%%</label><input type="number" value="0" id="priority-away" min="-128" max="127" step="1" required="required"/>\
-               <label for="priority-xa">%%Extended_away%%</label><input type="number" value="0" id="priority-xa" min="-128" max="127" step="1" required="required"/>\
-               <label for="priority-dnd">%%dnd%%</label><input type="number" value="0" id="priority-dnd" min="-128" max="127" step="1" required="required"/>\
+               <label for="priority-online">%%Online%%</label><input type="number" value="0" id="priority-online" min="-128" max="127" step="1" required="required"/><br />\
+               <label for="priority-chat">%%Chatty%%</label><input type="number" value="0" id="priority-chat" min="-128" max="127" step="1" required="required"/><br />\
+               <label for="priority-away">%%Away%%</label><input type="number" value="0" id="priority-away" min="-128" max="127" step="1" required="required"/><br />\
+               <label for="priority-xa">%%Extended_away%%</label><input type="number" value="0" id="priority-xa" min="-128" max="127" step="1" required="required"/><br />\
+               <label for="priority-dnd">%%dnd%%</label><input type="number" value="0" id="priority-dnd" min="-128" max="127" step="1" required="required"/><br />\
                <input type="submit" value="%%Save%%"/>\
             </fieldset>\
          </form>'
@@ -2624,7 +2729,7 @@ var jsxc;
          var sid = jsxc.storage.getItem('sid');
          var rid = jsxc.storage.getItem('rid');
          var jid = jsxc.storage.getItem('jid');
-         var url = jsxc.options.xmpp.url || jsxc.storage.getItem('boshUrl');
+         var url = jsxc.options.get('xmpp').url;
 
          // Register eventlistener
          $(document).on('connected.jsxc', jsxc.xmpp.connected);
@@ -2655,10 +2760,6 @@ var jsxc;
             };
          }
 
-         // Strophe.log = function(level, msg) {
-         // console.log(level + " " + msg);
-         // };
-
          var callback = function(status, condition) {
 
             jsxc.debug(Object.getOwnPropertyNames(Strophe.Status)[status] + ': ' + condition);
@@ -2787,7 +2888,7 @@ var jsxc;
             $(document).one('cloaded.roster.jsxc', jsxc.xmpp.sendPres);
 
             $('#jsxc_roster > p:first').remove();
-            
+
             var iq = $iq({
                type: 'get'
             }).c('query', {
@@ -2941,10 +3042,10 @@ var jsxc;
             jsxc.gui.roster.add(cid);
          });
 
-         if(buddies.length === 0) {
+         if (buddies.length === 0) {
             jsxc.gui.roster.empty();
          }
-         
+
          jsxc.storage.setUserItem('buddylist', buddies);
 
          jsxc.debug('Roster loaded');
@@ -3018,7 +3119,7 @@ var jsxc;
                }
             }
          });
-         
+
          if (!jsxc.storage.getUserItem('buddylist') || jsxc.storage.getUserItem('buddylist').length === 0) {
             jsxc.gui.roster.empty();
          } else {
@@ -4698,7 +4799,12 @@ var jsxc;
          A_fingerprint_: 'A fingerprint is used to make sure that the person you are talking to is who he or she is saying.',
          Your_roster_is_empty_add_a: 'Your roster is empty, add a ',
          new_buddy: 'new buddy',
-         is: 'is'
+         is: 'is',
+         Login_options: 'Login options',
+         BOSH_url: 'BOSH url',
+         Domain: 'Domain',
+         Resource: 'Resource',
+         On_login: 'On login'
       },
       de: {
          please_wait_until_we_logged_you_in: 'Bitte warte bis wir dich eingeloggt haben.',
@@ -4834,7 +4940,14 @@ var jsxc;
          Save: 'Speichern',
          User_settings: 'Benutzereinstellungen',
          A_fingerprint_: 'Ein Fingerabdruck wird dazu benutzt deinen Gesprächspartner zu identifizieren.',
-         is: 'ist'
+         Your_roster_is_empty_add_a: 'Deine Freundesliste ist leer, füge einen neuen Freund ',
+         new_buddy: 'hinzu',
+         is: 'ist',
+         Login_options: 'Anmeldeoptionen',
+         BOSH_url: 'BOSH url',
+         Domain: 'Domain',
+         Resource: 'Ressource',
+         On_login: 'Beim Anmelden'
       },
       es: {
          please_wait_until_we_logged_you_in: 'Por favor, espere...',
@@ -4933,7 +5046,7 @@ var jsxc;
          Confirm: 'Confirmar',
          Dismiss: 'Rechazar',
          Remove: 'Eliminar',
-         Online_help: 'Ayuda en línea', 
+         Online_help: 'Ayuda en línea',
          FN: 'Nombre completo ',
          N: ' ',
          FAMILY: 'Apellido',
@@ -4960,7 +5073,7 @@ var jsxc;
          DESC: 'Descripción',
          PHOTO: ' ',
          send_message: 'mandar un texto',
-         get_info: 'obtener información', 
+         get_info: 'obtener información',
          Settings: 'Ajustes',
          Priority: 'Prioridad',
          Save: 'Guardar',
@@ -4968,7 +5081,12 @@ var jsxc;
          A_fingerprint_: 'La huella digital se utiliza para que puedas estar seguro que la persona con la que estas hablando es quien realmente dice ser',
          Your_roster_is_empty_add_a: 'Tu lista de amigos esta vacia',
          new_buddy: 'Nuevo amigo',
-         is: 'es'
+         is: 'es',
+         Login_options: 'Opciones de login',
+         BOSH_url: 'BOSH url',
+         Domain: 'Dominio',
+         Resource: 'Recurso',
+         On_login: 'Iniciar sesión'
       }
    };
 }(jQuery));

jsxc.lib.webrtc.js

@@ -173,7 +173,7 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
       onAddRosterItem: function(event, cid, data, el) {
          var self = jsxc.webrtc;
          var videoIcon = $('<div class="jsxc_video jsxc_disabled" title="' + jsxc.l.Start_video_call + '"></div>');
-console.log(data);
+
          videoIcon.click(function() {
             self.startCall(data.jid);
             return false;

lib/jquery.colorbox.css

@@ -0,0 +1,189 @@
+/* Remove close button from firstrunwizard */
+#closeWizard {
+	display: none !important;
+}
+
+/*
+    Colorbox Core Style:
+    The following CSS is consistent between example themes and should not be altered.
+*/
+#colorbox,#cboxOverlay,#cboxWrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 9999;
+	overflow: hidden;
+}
+
+#cboxWrapper {
+	max-width: none;
+}
+
+#cboxOverlay {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+}
+
+#cboxMiddleLeft,#cboxBottomLeft {
+	clear: left;
+}
+
+#cboxContent {
+	position: relative;
+}
+
+#cboxLoadedContent {
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+#cboxTitle {
+	margin: 0;
+}
+
+#cboxLoadingOverlay,#cboxLoadingGraphic {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow {
+	cursor: pointer;
+}
+
+.cboxPhoto {
+	float: left;
+	margin: auto;
+	border: 0;
+	display: block;
+	max-width: none;
+	-ms-interpolation-mode: bicubic;
+}
+
+.cboxIframe {
+	width: 100%;
+	height: 100%;
+	display: block;
+	border: 0;
+}
+
+#colorbox,#cboxContent,#cboxLoadedContent {
+	box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+}
+
+/* 
+    User Style:
+    Change the following styles to modify the appearance of Colorbox.  They are
+    ordered & tabbed in a way that represents the nesting of the generated HTML.
+*/
+#cboxOverlay {
+	background: #000;
+}
+
+#colorbox {
+	
+}
+
+#cboxContent {
+	margin-top: 20px;
+}
+
+.cboxIframe {
+	background: #fff;
+}
+
+#cboxError {
+	padding: 50px;
+	border: 0px solid #ccc;
+}
+
+#cboxLoadedContent {
+	border: 0px solid #555;
+	background: #fff;
+	border-radius: 5px;
+}
+
+#cboxTitle {
+	position: absolute;
+	top: -20px;
+	left: 0;
+	color: #ccc;
+}
+
+#cboxCurrent {
+	position: absolute;
+	top: -20px;
+	right: 0px;
+	color: #ccc;
+}
+
+#cboxSlideshow {
+	position: absolute;
+	top: -20px;
+	right: 90px;
+	color: #fff;
+}
+
+#cboxPrevious:hover {
+	background-position: bottom left;
+}
+
+#cboxNext:hover {
+	background-position: bottom right;
+}
+
+#cboxLoadingOverlay {
+	background: #fff;
+}
+
+#cboxClose {
+   position: absolute;
+   top: 5px;
+   right: 5px;
+   display: block;
+   opacity: 0.5;
+   width: 19px !important;
+   height: 19px;
+   border: 0px;
+   text-indent: -9999px;
+   background-color: #fff;
+}
+#cboxClose:before {
+   content: '×';
+   position: absolute;
+   top: 0px;
+   left: 0px;
+   display: block;
+   width: 19px;
+   height: 19px;
+   opacity: 0.5;
+   text-indent: 0;
+   text-align: center;
+   line-height: 19px;
+   font-size: 19px;
+}
+
+#cboxClose:before:hover {
+   opacity: 1;
+}
+
+#cboxClose:hover {
+   background-position: right center !important;
+   opacity: 1.0;
+}
+
+/*
+  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
+  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
+  See: http://jacklmoore.com/notes/ie-transparency-problems/
+*/
+.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight
+	{
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,
+		endColorstr=#00FFFFFF);
+}

lib/jquery.mCustomScrollbar.css

@@ -0,0 +1,241 @@
+/* basic scrollbar styling */
+/* vertical scrollbar */
+.mCSB_container {
+	width: auto;
+	margin-right: 30px;
+	overflow: hidden;
+}
+
+.mCSB_container.mCS_no_scrollbar {
+	margin-right: 0;
+}
+
+.mCS_disabled .mCSB_container.mCS_no_scrollbar,.mCS_destroyed .mCSB_container.mCS_no_scrollbar
+	{
+	margin-right: 30px;
+}
+
+.mCustomScrollBox .mCSB_scrollTools {
+	width: 16px;
+	height: 100%;
+	top: 0;
+	right: 0;
+}
+
+.mCSB_scrollTools .mCSB_draggerContainer {
+	height: 100%;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.mCSB_scrollTools .mCSB_buttonUp+.mCSB_draggerContainer {
+	padding-bottom: 40px;
+}
+
+.mCSB_scrollTools .mCSB_draggerRail {
+	width: 2px;
+	height: 100%;
+	margin: 0 auto;
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	border-radius: 10px;
+}
+
+.mCSB_scrollTools .mCSB_dragger {
+	cursor: pointer;
+	width: 100%;
+	height: 30px;
+}
+
+.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
+	width: 4px;
+	height: 100%;
+	margin: 0 auto;
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	border-radius: 10px;
+	text-align: center;
+}
+
+.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_buttonDown {
+	height: 20px;
+	overflow: hidden;
+	margin: 0 auto;
+	cursor: pointer;
+}
+
+.mCSB_scrollTools .mCSB_buttonDown {
+	bottom: 0;
+	margin-top: -40px;
+}
+/* horizontal scrollbar */
+.mCSB_horizontal .mCSB_container {
+	height: auto;
+	margin-right: 0;
+	margin-bottom: 30px;
+	overflow: hidden;
+}
+
+.mCSB_horizontal .mCSB_container.mCS_no_scrollbar {
+	margin-bottom: 0;
+}
+
+.mCS_disabled .mCSB_horizontal .mCSB_container.mCS_no_scrollbar,.mCS_destroyed .mCSB_horizontal .mCSB_container.mCS_no_scrollbar
+	{
+	margin-right: 0;
+	margin-bottom: 30px;
+}
+
+.mCSB_horizontal.mCustomScrollBox .mCSB_scrollTools {
+	width: 100%;
+	height: 16px;
+	top: auto;
+	right: auto;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+}
+
+.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerContainer {
+	height: 100%;
+	width: auto;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft+.mCSB_draggerContainer
+	{
+	padding-bottom: 0;
+	padding-right: 20px;
+}
+
+.mCSB_horizontal .mCSB_scrollTools .mCSB_draggerRail {
+	width: 100%;
+	height: 2px;
+	margin: 7px 0;
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	border-radius: 10px;
+}
+
+.mCSB_horizontal .mCSB_scrollTools .mCSB_dragger {
+	width: 30px;
+	height: 100%;
+}
+
+.mCSB_horizontal .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
+	width: 100%;
+	height: 4px;
+	margin: 6px auto;
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	border-radius: 10px;
+}
+
+.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft,.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight
+	{
+	width: 20px;
+	height: 100%;
+	overflow: hidden;
+	margin: 0 auto;
+	cursor: pointer;
+	float: left;
+}
+
+.mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight {
+	right: 0;
+	bottom: auto;
+	margin-left: -40px;
+	margin-top: -16px;
+	float: right;
+}
+
+/* default scrollbar colors and backgrounds */
+.mCustomScrollBox .mCSB_scrollTools {
+	opacity: 0.75;
+}
+
+.mCustomScrollBox:hover .mCSB_scrollTools {
+	opacity: 1;
+}
+
+.mCSB_scrollTools .mCSB_draggerRail {
+	background: #000; /* rgba fallback */
+	background: rgba(0, 0, 0, 0.4);
+	filter: "alpha(opacity=40)";
+	-ms-filter: "alpha(opacity=40)"; /* old ie */
+}
+
+.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
+	background: #fff; /* rgba fallback */
+	background: rgba(255, 255, 255, 0.75);
+	filter: "alpha(opacity=75)";
+	-ms-filter: "alpha(opacity=75)"; /* old ie */
+}
+
+.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
+	background: rgba(255, 255, 255, 0.85);
+	filter: "alpha(opacity=85)";
+	-ms-filter: "alpha(opacity=85)"; /* old ie */
+}
+
+.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar
+	{
+	background: rgba(255, 255, 255, 0.9);
+	filter: "alpha(opacity=90)";
+	-ms-filter: "alpha(opacity=90)"; /* old ie */
+}
+
+.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight
+	{
+	background-image: url(mCSB_buttons.png);
+	background-repeat: no-repeat;
+	opacity: 0.4;
+	filter: "alpha(opacity=40)";
+	-ms-filter: "alpha(opacity=40)"; /* old ie */
+}
+
+.mCSB_scrollTools .mCSB_buttonUp {
+	background-position: 0 0;
+	/* 
+	sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) 
+	*/
+}
+
+.mCSB_scrollTools .mCSB_buttonDown {
+	background-position: 0 -20px;
+	/* 
+	sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) 
+	*/
+}
+
+.mCSB_scrollTools .mCSB_buttonLeft {
+	background-position: 0 -40px;
+	/* 
+	sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) 
+	*/
+}
+
+.mCSB_scrollTools .mCSB_buttonRight {
+	background-position: 0 -56px;
+	/* 
+	sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark) 
+	*/
+}
+
+.mCSB_scrollTools .mCSB_buttonUp:hover,.mCSB_scrollTools .mCSB_buttonDown:hover,.mCSB_scrollTools .mCSB_buttonLeft:hover,.mCSB_scrollTools .mCSB_buttonRight:hover
+	{
+	opacity: 0.75;
+	filter: "alpha(opacity=75)";
+	-ms-filter: "alpha(opacity=75)"; /* old ie */
+}
+
+.mCSB_scrollTools .mCSB_buttonUp:active,.mCSB_scrollTools .mCSB_buttonDown:active,.mCSB_scrollTools .mCSB_buttonLeft:active,.mCSB_scrollTools .mCSB_buttonRight:active
+	{
+	opacity: 0.9;
+	filter: "alpha(opacity=90)";
+	-ms-filter: "alpha(opacity=90)"; /* old ie */
+}

package.json

@@ -1,22 +1,23 @@
 {
-   "name": "jsxc",
-   "version": "0.8.0",
-   "description": "Real-time chat app",
-   "homepage": "http://www.jsxc.org/",
-   "bugs": "https://github.com/sualko/jsxc/issues",
-   "license": "MIT",
-   "author": "Klaus Herberth <klaus@jsxc.org>",
-   "repository": {
-       "type": "git",
-       "url": "https://github.com/sualko/jsxc"
-   },
-   "devDependencies": {
-       "grunt": "~0.4.4",
-       "grunt-cli": "~0.1.13",
-       "grunt-contrib-clean": "~0.5.0",
-       "grunt-contrib-jshint": "~0.9.2",
-       "grunt-contrib-copy": "~0.5.0",
-       "grunt-banner": "~0.2.2",
-       "grunt-text-replace": "~0.3.11"
-   }
+  "name": "jsxc",
+  "version": "0.8.2",
+  "description": "Real-time chat app",
+  "homepage": "http://www.jsxc.org/",
+  "bugs": "https://github.com/sualko/jsxc/issues",
+  "license": "MIT",
+  "author": "Klaus Herberth <klaus@jsxc.org>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sualko/jsxc"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.4",
+    "grunt-banner": "~0.2.2",
+    "grunt-cli": "~0.1.13",
+    "grunt-contrib-clean": "~0.5.0",
+    "grunt-contrib-copy": "~0.5.0",
+    "grunt-contrib-jshint": "~0.9.2",
+    "grunt-search": "^0.1.6",
+    "grunt-text-replace": "~0.3.11"
+  }
 }