build v0.8.0-betav0.8.0-beta

21 files changed, 1230 insertions, 384 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be9fd9cd..5f607eac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,18 @@
+v0.8.0 / 2014-??-??
+===
+- add spanish translation
+- add vCard view
+- add more emoticons
+- add grayscale to buddies without subscription
+- add settings for priorities
+- add hint if roster is empty
+- add sound files
+- new chat window design
+- enhanced roster design
+- fix emoticon replacement (XEP-0038)
+- fix some ui issues (explanations,...)
+- fix issue with password only field
+
 v0.7.2 / 2014-05-28
 ===
 - fix login issue
@@ -69,4 +84,4 @@ v0.5.1 / 2014-01-27
 - handle already attached submit events on login form
 - style changes
 - fix webrtc startup
-- don't block application on dsa key generation
\ No newline at end of file
+- don't block application on dsa key generation
diff --git a/Gruntfile.js b/Gruntfile.js
index 3f8e9608..7b51af56 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -20,7 +20,7 @@ module.exports = function(grunt) {
          main: {
             files: [ {
                expand: true,
-               src: [ 'lib/strophe.jingle/*.js', 'lib/otr/build/**', 'lib/otr/lib/dsa-webworker.js', 'lib/otr/lib/sm-webworker.js', 'lib/otr/lib/const.js', 'lib/otr/lib/helpers.js', 'lib/otr/lib/dsa.js', 'lib/otr/vendor/*.js', 'lib/*.js', 'jsxc.lib.js', 'jsxc.lib.webrtc.js', '*.css', 'LICENSE', 'img/**' ],
+               src: [ 'lib/strophe.jingle/*.js', 'lib/otr/build/**', 'lib/otr/lib/dsa-webworker.js', 'lib/otr/lib/sm-webworker.js', 'lib/otr/lib/const.js', 'lib/otr/lib/helpers.js', 'lib/otr/lib/dsa.js', 'lib/otr/vendor/*.js', 'lib/*.js', 'jsxc.lib.js', 'jsxc.lib.webrtc.js', '*.css', 'LICENSE', 'img/**', 'sound/**' ],
                dest: 'build/'
             } ]
          }
diff --git a/build/img/camera_icon_grey.svg b/build/img/camera_icon_grey.svg
index f1e578c7..0228619a 100644
--- a/build/img/camera_icon_grey.svg
+++ b/build/img/camera_icon_grey.svg
@@ -1,97 +1,34 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="535.00458"
-   height="510.4368"
-   id="svg3896"
    version="1.1"
-   inkscape:version="0.48+devel r"
-   sodipodi:docname="camera_icon_grey.svg">
-  <defs
-     id="defs3898" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.35"
-     inkscape:cx="369.28572"
-     inkscape:cy="50.436783"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="954"
-     inkscape:window-height="711"
-     inkscape:window-x="129"
-     inkscape:window-y="144"
-     inkscape:window-maximized="0" />
+   id="svg2"
+   width="20"
+   height="20">
   <metadata
-     id="metadata3901">
+     id="metadata10">
     <rdf:RDF>
       <cc:Work
          rdf:about="">
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
+  <defs
+     id="defs8" />
   <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-5.7142771,-72.362177)">
-    <rect
-       style="fill:#808080;stroke:none;stroke-width:1.6172694;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="rect3904"
-       width="290.51404"
-       height="294.08438"
-       x="86.054779"
-       y="292.97778" />
+     transform="matrix(0.03788594,0,0,0.03788594,-0.41340793,-2.6310716)">
     <path
-       style="fill:#808080;stroke:none"
-       d="m 292.28572,420.35915 229.57599,-101.39986 0,232.54576 -233.04644,-102.93271 z"
        id="path3906"
-       inkscape:connector-curvature="0" />
-    <path
-       sodipodi:type="arc"
-       style="fill:#808080;stroke:none"
-       id="path3908"
-       sodipodi:cx="242.85715"
-       sodipodi:cy="315.21933"
-       sodipodi:rx="117.14286"
-       sodipodi:ry="117.14286"
-       d="M 360.00001,315.21933 A 117.14286,117.14286 0 0 1 242.85715,432.36219 117.14286,117.14286 0 0 1 125.71429,315.21933 117.14286,117.14286 0 0 1 242.85715,198.07647 117.14286,117.14286 0 0 1 360.00001,315.21933 Z"
-       transform="matrix(1.1334136,0,0,1.1663886,-136.76164,-155.82534)" />
-    <a
-       id="a3912"
        style="fill:#808080;stroke:none"
-       transform="matrix(0.86859739,0,0,0.89386794,47.913668,10.526572)">
-      <path
-         sodipodi:type="arc"
-         style="fill:#808080;stroke:none"
-         id="path3910"
-         sodipodi:cx="242.85715"
-         sodipodi:cy="315.21933"
-         sodipodi:rx="117.14286"
-         sodipodi:ry="117.14286"
-         d="M 360.00001,315.21933 A 117.14286,117.14286 0 0 1 242.85715,432.36219 117.14286,117.14286 0 0 1 125.71429,315.21933 117.14286,117.14286 0 0 1 242.85715,198.07647 117.14286,117.14286 0 0 1 360.00001,315.21933 Z"
-         transform="matrix(1.304878,0,0,1.304878,3.67247,-186.10345)" />
-    </a>
+       d="m 361.65148,313.51768 177.16074,-131.78516 0,302.22999 L 358.97338,350.18517 Z M 10.911922,182.40634 l 378.372678,0 0,302.65582 -378.372678,0 z" />
   </g>
 </svg>
diff --git a/build/img/camera_icon_white.svg b/build/img/camera_icon_white.svg
index 7d65bb64..da48b07f 100644
--- a/build/img/camera_icon_white.svg
+++ b/build/img/camera_icon_white.svg
@@ -13,8 +13,8 @@
    height="510.4368"
    id="svg3896"
    version="1.1"
-   inkscape:version="0.48.3.1 r9886"
-   sodipodi:docname="camera_icon.svg">
+   inkscape:version="0.48+devel r"
+   sodipodi:docname="camera_icon_white.svg">
   <defs
      id="defs3898" />
   <sodipodi:namedview
@@ -24,9 +24,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="0.35"
-     inkscape:cx="369.28572"
-     inkscape:cy="50.436783"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="353.91934"
+     inkscape:cy="233.8456"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
@@ -34,11 +34,11 @@
      fit-margin-left="0"
      fit-margin-right="0"
      fit-margin-bottom="0"
-     inkscape:window-width="954"
-     inkscape:window-height="711"
-     inkscape:window-x="833"
-     inkscape:window-y="106"
-     inkscape:window-maximized="0" />
+     inkscape:window-width="1855"
+     inkscape:window-height="1056"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1" />
   <metadata
      id="metadata3901">
     <rdf:RDF>
@@ -57,41 +57,16 @@
      id="layer1"
      transform="translate(-5.7142771,-72.362177)">
     <rect
-       style="fill:#ffffff;stroke:#ffffff;stroke-width:1.61726940000000008;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       style="fill:#ffffff;stroke:none;stroke-width:1.6172694;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect3904"
-       width="290.51404"
-       height="294.08438"
-       x="86.054779"
-       y="292.97778" />
+       width="378.37268"
+       height="302.65582"
+       x="10.911922"
+       y="182.40634" />
     <path
        style="fill:#ffffff;stroke:none"
-       d="m 292.28572,420.35915 229.57599,-101.39986 0,232.54576 -233.04644,-102.93271 z"
+       d="m 361.65148,313.51768 177.16074,-131.78516 0,302.22999 -179.83884,-133.77734 z"
        id="path3906"
        inkscape:connector-curvature="0" />
-    <path
-       sodipodi:type="arc"
-       style="fill:#ffffff;stroke:none"
-       id="path3908"
-       sodipodi:cx="242.85715"
-       sodipodi:cy="315.21933"
-       sodipodi:rx="117.14286"
-       sodipodi:ry="117.14286"
-       d="m 360.00001,315.21933 a 117.14286,117.14286 0 1 1 -234.28572,0 117.14286,117.14286 0 1 1 234.28572,0 z"
-       transform="matrix(1.1334136,0,0,1.1663886,-136.76164,-155.82534)" />
-    <a
-       id="a3912"
-       style="fill:#ffffff"
-       transform="matrix(0.86859739,0,0,0.89386794,47.913668,10.526572)">
-      <path
-         sodipodi:type="arc"
-         style="fill:#ffffff;stroke:none"
-         id="path3910"
-         sodipodi:cx="242.85715"
-         sodipodi:cy="315.21933"
-         sodipodi:rx="117.14286"
-         sodipodi:ry="117.14286"
-         d="m 360.00001,315.21933 c 0,64.69622 -52.44665,117.14286 -117.14286,117.14286 -64.69622,0 -117.14286,-52.44664 -117.14286,-117.14286 0,-64.69622 52.44664,-117.14286 117.14286,-117.14286 64.69621,0 117.14286,52.44664 117.14286,117.14286 z"
-         transform="matrix(1.304878,0,0,1.304878,3.67247,-186.10345)" />
-    </a>
   </g>
 </svg>
diff --git a/build/img/emotions/thumbsdown.png b/build/img/emotions/thumbsdown.png
new file mode 100644
index 00000000..d9809cb7
--- /dev/null
+++ b/build/img/emotions/thumbsdown.png
diff --git a/build/img/padlock_close_green.svg b/build/img/padlock_close_green.svg
index d3d22f6c..8a4ac0ab 100644
--- a/build/img/padlock_close_green.svg
+++ b/build/img/padlock_close_green.svg
@@ -14,7 +14,7 @@
    inkscape:version="0.48+devel r"
    width="15"
    height="15"
-   sodipodi:docname="padlock_open-white.svg">
+   sodipodi:docname="padlock_close_green.svg">
   <metadata
      id="metadata3047">
     <rdf:RDF>
@@ -42,25 +42,45 @@
      inkscape:window-height="1056"
      id="namedview3043"
      showgrid="false"
-     inkscape:zoom="44.500587"
-     inkscape:cx="6.292871"
-     inkscape:cy="6.4926565"
+     inkscape:zoom="32"
+     inkscape:cx="12.823367"
+     inkscape:cy="8.9449238"
      inkscape:window-x="65"
      inkscape:window-y="24"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg3041"
      borderlayer="true" />
   <rect
-     style="fill:#009800;stroke:#009800;stroke-width:0.92522794"
+     style="fill:#44aa00;stroke:#44aa00;stroke-width:0.92522794"
      id="rect3051"
      width="10.232394"
      height="6.4687548"
      x="2.5534275"
      y="8.074255" />
   <path
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-color:currentColor;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:#009800;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.90384686;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     d="M 7.5078125,2.6797098 C 5.0260054,2.6797098 3.491603,3.472493 2.75,4.621116 2.008397,5.7697391 2.0878906,7.0238438 2.0878906,7.699241 l 1.9042969,0 c 0,-0.7329344 0.013699,-1.5125503 0.3574219,-2.0449218 0.3437231,-0.5323715 1.0433343,-1.0703125 3.1582031,-1.0703125 2.0264219,0 2.9669635,0.6265545 3.4326915,1.3827484 0.465728,0.7561939 0.400333,1.7142789 0.400333,1.7142789 0.04517,1.7732263 -0.06599,4.303173 0.0049,5.535784 l 0.05274,0.898438 0.898437,0 0.945445,-0.0031 0.01,-6.4361369 c 0,0 0.06201,-1.6621328 -0.685321,-2.8754827 C 11.819768,3.587152 10.078064,2.6797098 7.5078125,2.6797098 Z"
-     id="path3848"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="ssccssscccccccs" />
+     style="fill:none;fill-opacity:1;stroke:#44aa00;stroke-width:2.08827519;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path4101"
+     sodipodi:type="arc"
+     sodipodi:cx="7.6713805"
+     sodipodi:cy="6.7928491"
+     sodipodi:rx="4.534133"
+     sodipodi:ry="4.5301714"
+     sodipodi:start="3.1415927"
+     sodipodi:end="0"
+     d="M 3.1372476,6.7928489 A 4.534133,4.5301714 0 0 1 7.6713806,2.2626777 4.534133,4.5301714 0 0 1 12.205513,6.7928491"
+     sodipodi:open="true" />
+  <rect
+     style="fill:#44aa00;fill-opacity:1;stroke:none;stroke-width:1.39526081;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect4153"
+     width="2.0906768"
+     height="1.0984892"
+     x="2.0913804"
+     y="6.7554431" />
+  <rect
+     y="6.7632556"
+     x="11.157786"
+     height="1.0984892"
+     width="2.0906768"
+     id="rect4155"
+     style="fill:#44aa00;fill-opacity:1;stroke:none;stroke-width:1.39526081;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 </svg>
diff --git a/build/img/padlock_close_grey.svg b/build/img/padlock_close_grey.svg
index b28e74c5..a09d4c61 100644
--- a/build/img/padlock_close_grey.svg
+++ b/build/img/padlock_close_grey.svg
@@ -14,7 +14,7 @@
    inkscape:version="0.48+devel r"
    width="15"
    height="15"
-   sodipodi:docname="padlock_open-white.svg">
+   sodipodi:docname="padlock_close_grey.svg">
   <metadata
      id="metadata3047">
     <rdf:RDF>
@@ -42,9 +42,9 @@
      inkscape:window-height="1056"
      id="namedview3043"
      showgrid="false"
-     inkscape:zoom="44.500587"
-     inkscape:cx="6.292871"
-     inkscape:cy="6.4926565"
+     inkscape:zoom="32"
+     inkscape:cx="12.792117"
+     inkscape:cy="8.9449238"
      inkscape:window-x="65"
      inkscape:window-y="24"
      inkscape:window-maximized="1"
@@ -57,10 +57,38 @@
      height="6.4687548"
      x="2.5534275"
      y="8.074255" />
-  <path
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-color:currentColor;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.90384686;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     d="M 7.5078125,2.6797098 C 5.0260054,2.6797098 3.491603,3.472493 2.75,4.621116 2.008397,5.7697391 2.0878906,7.0238438 2.0878906,7.699241 l 1.9042969,0 c 0,-0.7329344 0.013699,-1.5125503 0.3574219,-2.0449218 0.3437231,-0.5323715 1.0433343,-1.0703125 3.1582031,-1.0703125 2.0264219,0 2.9669635,0.6265545 3.4326915,1.3827484 0.465728,0.7561939 0.400333,1.7142789 0.400333,1.7142789 0.04517,1.7732263 -0.06599,4.303173 0.0049,5.535784 l 0.05274,0.898438 0.898437,0 0.945445,-0.0031 0.01,-6.4361369 c 0,0 0.06201,-1.6621328 -0.685321,-2.8754827 C 11.819768,3.587152 10.078064,2.6797098 7.5078125,2.6797098 Z"
-     id="path3848"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="ssccssscccccccs" />
+  <a
+     id="a4157"
+     style="fill:none;stroke:#808080">
+    <path
+       sodipodi:open="true"
+       d="M 3.1372476,6.7928489 A 4.534133,4.5301714 0 0 1 7.6713806,2.2626777 4.534133,4.5301714 0 0 1 12.205513,6.7928491"
+       sodipodi:end="0"
+       sodipodi:start="3.1415927"
+       sodipodi:ry="4.5301714"
+       sodipodi:rx="4.534133"
+       sodipodi:cy="6.7928491"
+       sodipodi:cx="7.6713805"
+       sodipodi:type="arc"
+       id="path4101"
+       style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:2.08827519;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </a>
+  <g
+     id="g4170"
+     style="fill:#808080">
+    <rect
+       y="6.7554431"
+       x="2.0913804"
+       height="1.0984892"
+       width="2.0906768"
+       id="rect4153"
+       style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:1.39526081;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:1.39526081;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4155"
+       width="2.0906768"
+       height="1.0984892"
+       x="11.157786"
+       y="6.7632556" />
+  </g>
 </svg>
diff --git a/build/img/padlock_close_orange.svg b/build/img/padlock_close_orange.svg
index 47b72cc7..3338356c 100644
--- a/build/img/padlock_close_orange.svg
+++ b/build/img/padlock_close_orange.svg
@@ -14,7 +14,7 @@
    inkscape:version="0.48+devel r"
    width="15"
    height="15"
-   sodipodi:docname="padlock_open-white.svg">
+   sodipodi:docname="padlock_close_orange.svg">
   <metadata
      id="metadata3047">
     <rdf:RDF>
@@ -42,25 +42,53 @@
      inkscape:window-height="1056"
      id="namedview3043"
      showgrid="false"
-     inkscape:zoom="44.500587"
-     inkscape:cx="6.292871"
-     inkscape:cy="6.4926565"
+     inkscape:zoom="32"
+     inkscape:cx="12.792117"
+     inkscape:cy="8.9449238"
      inkscape:window-x="65"
      inkscape:window-y="24"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg3041"
      borderlayer="true" />
   <rect
-     style="fill:#ff9955;stroke:#ff9955;stroke-width:0.92522794"
+     style="fill:#ff7f2a;stroke:#ff7f2a;stroke-width:0.92522794"
      id="rect3051"
      width="10.232394"
      height="6.4687548"
      x="2.5534275"
      y="8.074255" />
-  <path
-     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-color:currentColor;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:#ff9955;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.90384686;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     d="M 7.5078125,2.6797098 C 5.0260054,2.6797098 3.491603,3.472493 2.75,4.621116 2.008397,5.7697391 2.0878906,7.0238438 2.0878906,7.699241 l 1.9042969,0 c 0,-0.7329344 0.013699,-1.5125503 0.3574219,-2.0449218 0.3437231,-0.5323715 1.0433343,-1.0703125 3.1582031,-1.0703125 2.0264219,0 2.9669635,0.6265545 3.4326915,1.3827484 0.465728,0.7561939 0.400333,1.7142789 0.400333,1.7142789 0.04517,1.7732263 -0.06599,4.303173 0.0049,5.535784 l 0.05274,0.898438 0.898437,0 0.945445,-0.0031 0.01,-6.4361369 c 0,0 0.06201,-1.6621328 -0.685321,-2.8754827 C 11.819768,3.587152 10.078064,2.6797098 7.5078125,2.6797098 Z"
-     id="path3848"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="ssccssscccccccs" />
+  <a
+     id="a4157"
+     style="fill:none;stroke:#ff7f2a">
+    <path
+       sodipodi:open="true"
+       d="M 3.1372476,6.7928489 A 4.534133,4.5301714 0 0 1 7.6713806,2.2626777 4.534133,4.5301714 0 0 1 12.205513,6.7928491"
+       sodipodi:end="0"
+       sodipodi:start="3.1415927"
+       sodipodi:ry="4.5301714"
+       sodipodi:rx="4.534133"
+       sodipodi:cy="6.7928491"
+       sodipodi:cx="7.6713805"
+       sodipodi:type="arc"
+       id="path4101"
+       style="fill:none;fill-opacity:1;stroke:#ff7f2a;stroke-width:2.08827519;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </a>
+  <g
+     id="g4170"
+     style="fill:#ff7f2a">
+    <rect
+       y="6.7554431"
+       x="2.0913804"
+       height="1.0984892"
+       width="2.0906768"
+       id="rect4153"
+       style="fill:#ff7f2a;fill-opacity:1;stroke:none;stroke-width:1.39526081;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       style="fill:#ff7f2a;fill-opacity:1;stroke:none;stroke-width:1.39526081;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4155"
+       width="2.0906768"
+       height="1.0984892"
+       x="11.157786"
+       y="6.7632556" />
+  </g>
 </svg>
diff --git a/build/img/smiley.png b/build/img/smiley.png
new file mode 100644
index 00000000..9a720677
--- /dev/null
+++ b/build/img/smiley.png
diff --git a/build/img/speech_balloon_white.svg b/build/img/speech_balloon_white.svg
new file mode 100644
index 00000000..465f4a84
--- /dev/null
+++ b/build/img/speech_balloon_white.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="25"
+   height="25"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48+devel r"
+   viewBox="0 0 25 25.000001"
+   sodipodi:docname="speech_balloon_white.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.4"
+     inkscape:cx="25.186628"
+     inkscape:cy="14.479999"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1855"
+     inkscape:window-height="1056"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-228.24219,-320.66798)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 240.77627,324.02578 a 12.489309,7.9254426 0 0 0 -12.48944,7.92538 12.489309,7.9254426 0 0 0 5.26146,6.45637 c -0.17862,1.91196 -1.06119,3.95363 -3.14604,4.64437 2.54121,-0.11444 5.60026,-1.93057 7.47209,-3.40137 a 12.489309,7.9254426 0 0 0 2.90193,0.22616 12.489309,7.9254426 0 0 0 12.48928,-7.92553 12.489309,7.9254426 0 0 0 -12.48928,-7.92538 z"
+       id="path4101"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/build/jsxc.css b/build/jsxc.css
index 2d139c84..29125167 100644
--- a/build/jsxc.css
+++ b/build/jsxc.css
@@ -38,6 +38,10 @@ p.jsxc_center {
 	min-width: 300px;
 }
 
+#jsxc_dialog p {
+	margin-bottom: 1em;
+}
+
 #jsxc_dialog h3 {
 	font-size: 120%;
 	font-weight: bold;
@@ -48,7 +52,11 @@ p.jsxc_center {
 #jsxc_dialog p input {
 	margin-bottom: 5px;
 	width: 60%;
-    outline: none;
+	outline: none;
+}
+
+#jsxc_dialog p input[type="submit"] {
+	width: auto;
 }
 
 #jsxc_dialog p label {
@@ -63,7 +71,40 @@ p.jsxc_center {
 }
 
 #jsxc_dialog p.jsxc_maxWidth {
-   max-width: 500px;
+	max-width: 500px;
+}
+
+#jsxc_dialog fieldset {
+	border: 2px solid #ccc;
+}
+
+#jsxc_dialog legend {
+	padding: 0px 10px;
+	font-weight: bold;
+}
+
+#jsxc_dialog input {
+	outline: none;
+}
+
+#jsxc_dialog input:invalid {
+	border:1px solid red;
+}
+
+#jsxc_dialog .jsxc_fieldsetPriority {
+	width: 200px;
+	padding: 10px;
+	border-radius: 3px;
+}
+
+#jsxc_dialog .jsxc_fieldsetPriority label {
+	display: inline-block;
+	width: 100px;
+}
+
+#jsxc_dialog .jsxc_fieldsetPriority input[type="Number"] {
+   display: inline-block;
+   width: 50px;
 }
 
 /*############################ 
@@ -76,8 +117,11 @@ li .jsxc_name {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+li .jsxc_name:hover {
+   color: #FAFAFA;
+}
 
-.jsxc_avatar, ul#jsxc_buddylist li:hover .jsxc_avatar {
+.jsxc_avatar,ul#jsxc_buddylist li:hover .jsxc_avatar {
 	width: 25px;
 	height: 25px;
 	line-height: 25px;
@@ -150,10 +194,11 @@ div#jsxc_roster .jsxc_wait h3 {
 /** Input field for alias renaming */
 #jsxc_roster input {
 	position: absolute;
+	top: 50%;
 	left: 31px;
-	top: 2px;
 	width: 157px;
-	height: 22px;
+	height: 18px;
+	margin-top: -11px;
 	padding: 2px;
 	border: 0px;
 	background-image: none;
@@ -162,11 +207,22 @@ div#jsxc_roster .jsxc_wait h3 {
 	-moz-box-shadow: inset 0 0 5px #888;
 	-webkit-box-shadow: inset 0 0 5px #888;
 	box-shadow: inner 0 0 5px #888;
-    outline: none;
+	outline: none;
+}
+
+#jsxc_roster .jsxc_expand input {
+   left: 51px;
+   width: 137px;
 }
 
 div#jsxc_roster p {
 	color: #939393;
+	padding: 10px;
+}
+
+div#jsxc_roster p a {
+	color: #b1b1b1;
+	text-decoration: underline;
 }
 
 div#jsxc_roster>.jsxc_bottom {
@@ -219,7 +275,7 @@ div#jsxc_roster>.jsxc_bottom li {
 	white-space: nowrap;
 }
 
-div#jsxc_roster>.jsxc_bottom li:hover:not(.jsxc_disabled) {
+div#jsxc_roster>.jsxc_bottom li:hover:not(.jsxc_disabled ) {
 	color: #fff;
 	background-color: #3F8FBA;
 }
@@ -238,6 +294,7 @@ div#jsxc_roster>.jsxc_bottom ul li:last-child {
 	width: 30px;
 }
 
+/** own avatar */
 #jsxc_avatar {
 	float: left;
 	margin: 0px 2px;
@@ -311,61 +368,130 @@ ul#jsxc_buddylist li {
 	line-height: 30px;
 	padding-left: 3px;
 	z-index: 85;
+	overflow: hidden;
+}
+
+ul#jsxc_buddylist li.jsxc_expand {
+	height: 54px;
+}
+
+ul#jsxc_buddylist li.jsxc_expand .jsxc_avatar, ul#jsxc_buddylist li.jsxc_expand .jsxc_avatar img {
+	width: 48px;
+	height: 48px;
+}
+
+#jsxc_buddylist .jsxc_options {
+    height: 20px;
+    float: left;
+    border-radius:2px;
+    background-color: rgba(150, 150, 150, 0.5);
+}
+#jsxc_buddylist .jsxc_options > div {
+    height: 20px;
+    width: 20px;
+    float: left;
+    margin-right:0px 1px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    opacity: 0.6;
+    cursor: pointer;
+}
+#jsxc_buddylist .jsxc_options > div:hover {
+	opacity: 1;
+}
+#jsxc_buddylist .jsxc_chaticon {	
+	background-image: url('img/speech_balloon_white.svg');
+	background-size: 15px 15px;
+}
+#jsxc_buddylist .jsxc_videoicon { 
+   background-image: url('img/camera_icon_white.svg');
+   background-size: 13px 13px;
+}
+#jsxc_buddylist .jsxc_vcardicon {
+    font-size: 15px;
+    line-height: 20px;
+    text-align: center;
+    color: #fff;
+    font-weight: bold;
+    font-family: serif;
 }
 
 ul#jsxc_buddylist li:hover {
-	color: #FAFAFA;
+	
 }
 
-ul#jsxc_buddylist li.jsxc_oneway {
+ul#jsxc_buddylist .jsxc_oneway {
 	opacity: 0.7;
 }
-
-ul#jsxc_buddylist .jsxc_options {
-	height: 30px;
+.jsxc_oneway .jsxc_avatar {
+	-webkit-filter: grayscale(100%);
+   -moz-filter: grayscale(100%);
+   -ms-filter: grayscale(100%);
+   -o-filter: grayscale(100%);
+   filter: grayscale(100%);
+}
+ul#jsxc_buddylist .jsxc_right {
+	float:left;
+}
+ul#jsxc_buddylist .jsxc_right {
 	float: right;
-	overflow: hidden;
-	transition: width 2s;
-	width: 0px;
-	-webkit-transition: width .5s; /* Safari */
-	white-space: nowrap;
+	margin-right: 6px;
 }
 
-ul#jsxc_buddylist .jsxc_options div {
-	line-height: 30px;
-	height: 30px;
-	width: 20px;
-	cursor: pointer;
-	opacity: 0.7;
-	display: inline-block;
+ul#jsxc_buddylist .jsxc_right div {
 	font-weight: bold;
 	text-align: center;
-	font-size: 17px;
-	overflow: hidden;
+	font-size: 13px;
+	line-height: 20px;
+	color: #fff;
 }
 
-ul#jsxc_buddylist li[data-type="chat"]:hover .jsxc_options {
-	width: 50px;
+ul#jsxc_buddylist li[data-type!="chat"] .jsxc_right {
+	display: none;
 }
 
-ul#jsxc_buddylist .jsxc_options div:hover {
+ul#jsxc_buddylist .jsxc_right div:hover {
 	opacity: 1.0;
 }
 
 ul#jsxc_buddylist .jsxc_rename {
-	/*    background-image: url('../img/edit.png'); */
-	/*    background-repeat: no-repeat; */
-	/*    background-position: center center; */
-	/*    background-size: 15px 15px; */
-	transform: scaleX(-1);
+
 }
 
 ul#jsxc_buddylist .jsxc_delete {
-	/*    text-transform: lowercase; */
-	/*    font-weight: bold; */
-	/*    vertical-align: middle; */
-	/*    font-size: 17px; */
-	
+
+}
+
+#jsxc_roster .jsxc_avatar {
+   position: relative;
+   cursor: pointer;
+}
+#jsxc_roster .jsxc_avatar img {
+   cursor: pointer;
+}
+
+#jsxc_roster .jsxc_avatar:after {
+   content: '▼';
+   display: block;
+   text-align: center;
+   width: 10px;
+   height: 10px;
+   line-height: 10px;
+   font-size: 8px;
+   position: absolute;
+   bottom: 0px;
+   right: 0px;
+   border-radius: 2px;
+   color:#000;
+   background-color: #fff;
+   opacity: 0;
+}
+
+#jsxc_roster .jsxc_avatar:hover:after {
+   opacity: 1.0 !important;
+}
+#jsxc_roster li:hover .jsxc_avatar:after {
+   opacity: 0.6;
 }
 
 div#jsxc_toggleRoster {
@@ -409,29 +535,32 @@ div#jsxc_windowList>ul>li {
 	margin: 0px;
 	display: block;
 	float: right;
-	width: 200px;
+	width: 250px;
 	background-color: #282323;
 	height: 30px;
 	position: relative;
 	overflow: visible;
 	margin-right: 5px;
-	box-shadow: 0px 0px 5px #000;
 	cursor: pointer;
 }
 
+div#jsxc_windowList>ul>li.jsxc_min {
+	width: 200px;
+}
+
 /*############################ 
  *######### Window ########### 
  *############################*/
 div.jsxc_bar {
+	background-color: #282323;
 	cursor: pointer;
 	height: 30px;
-	line-height: 30px;
-	margin-left: 2px;
+	line-height: 26px;
+	padding: 2px;
 	color: #939393;
-}
-
-div.jsxc_bar:hover {
-	color: #FAFAFA;
+	width: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
 }
 
 div.jsxc_cycle {
@@ -453,64 +582,135 @@ div#jsxc_windowList>ul>li.jsxc_unreadMsg .jsxc_cycle {
 
 /** Contains text area */
 div.jsxc_window {
-	display: none;
-	width: 200px;
-	height: 255px;
 	position: absolute;
-	bottom: 30px;
+	bottom: 0px;
+	left: 0px;
 	right: 0px;
+	height: auto;
 	background-color: #A4A4A4;
-	box-shadow: 0px 0px 5px #000;
 	z-index: 80;
-    cursor: default;
+	cursor: default;
 }
 
-div.jsxc_window .jsxc_tools {
+div.jsxc_window .jsxc_emoticons {
+	height: 30px;
+	width: 30px;
+	position: absolute;
+	top: 240px;
+	right: 0px;
+	cursor: pointer;
+}
+
+div.jsxc_window .jsxc_emoticons:after {
+	content: ' ';
+	background-image: url('img/smiley.png');
+	background-position: center center;
+	background-repeat: no-repeat;
+	height: 30px;
+	width: 30px;
+	opacity: 0.3;
 	position: absolute;
 	top: 0px;
 	left: 0px;
-	width: 200px;
-	height: 23px;
-	background-color: #282323;
-	box-shadow: 0px 5px 5px -5px #000;
-	z-index: 100;
 }
 
-div.jsxc_window .jsxc_textarea {
-	width: 200px;
-	height: 200px;
-	overflow: hidden;
+div.jsxc_window .jsxc_emoticons:hover:after {
+	opacity: 0.5;
 }
 
-div.jsxc_window .slimScrollDiv {
+div.jsxc_window .jsxc_emoticons ul {
+	display: none;
 	position: absolute;
-	top: 22px;
+	bottom: 33px;
+	right: 3px;
+	width: 210px;
+	background-color: rgba(40, 35, 35, 0.8);
+	padding: 3px;
+	border-radius: 3px;
+	z-index: 200;
+}
+
+div.jsxc_window .jsxc_emoticons ul:after {
+	content: '';
+	position: absolute;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 6px solid rgba(40, 35, 35, 0.8);
+	display: block;
+	width: 0;
+	z-index: 1;
+	right: 6px;
+	bottom: -6px;
+}
+
+div.jsxc_window .jsxc_emoticons li {
+	float: right;
+	cursor: pointer;
+}
+
+div.jsxc_window .jsxc_emoticons img {
+	cursor: pointer;
+	border-radius: 3px;
+}
+
+div.jsxc_window .jsxc_emoticons img:hover {
+	background-color: rgba(255, 255, 255, 0.8);
+}
+
+/** groups elements, which will be hidden, if the window is minimized. */
+.jsxc_window .jsxc_fade {
+	position: relative;
+}
+
+.jsxc_window .jsxc_gradient {
+	position: absolute;
+	top: 0px;
 	left: 0px;
+	right: 0px;
+	height: 15px;
+	z-index: 100;
+	background: -moz-linear-gradient(top, rgba(164, 164, 164, 1) 0%,
+		rgba(40, 35, 35, 0) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(164,
+		164, 164, 1)), color-stop(100%, rgba(40, 35, 35, 0)));
+	/* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, rgba(164, 164, 164, 1) 0%,
+		rgba(40, 35, 35, 0) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, rgba(164, 164, 164, 1) 0%,
+		rgba(40, 35, 35, 0) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, rgba(164, 164, 164, 1) 0%,
+		rgba(40, 35, 35, 0) 100%); /* IE10+ */
+	background: linear-gradient(to bottom, #a4a4a4 0%, rgba(40, 35, 35, 0)
+		100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4a4a4',
+		endColorstr='#00282323', GradientType=0); /* IE6-9 */
+}
+
+div.jsxc_window .jsxc_avatar {
+	margin-top: 1px;
 }
 
-div.jsxc_chatmessage,input.jsxc_chatmessage {
-	margin: 5px;
-	border-radius: 5px !important;
+div.jsxc_window .jsxc_textarea {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
 	padding: 3px;
-	width: 157px;
-	word-wrap: break-word;
-	background-color: #fff;
-	position: relative;
-    outline: none;
 }
 
-div.jsxc_chatmessage.jsxc_received {
-	
+div.jsxc_window .slimScrollDiv {
+	margin: 0px 0px 6px 0px;
 }
 
-div.jsxc_chatmessage.jsxc_received:before {
-	content: '✓';
-	position: absolute;
-	bottom: 2px;
-	left: 4px;
-	font-size: 10px;
-	line-height: 10px;
-	color: green;
+div.jsxc_chatmessage {
+	margin: 3px;
+	padding: 4px;
+	padding-right: 10px;
+	max-width: 76%;
+	word-wrap: break-word;
+	background-color: #fff;
+	position: relative;
+	outline: none;
+	clear: both;
 }
 
 div.jsxc_chatmessage a {
@@ -524,66 +724,131 @@ div.jsxc_chatmessage img {
 }
 
 /** incoming message */
-div.jsxc_in,input.jsxc_in {
-	text-align: left;
-	margin-right: 30px;
-	border: 1px solid blue;
+div.jsxc_in {
+	float: left;
+	position: relative;
+	margin-left: 10px;
+	background: #f1f7fd;
+	border: solid 1px #a6b8c9;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+}
+
+div.jsxc_in:after {
+	content: '';
+	position: absolute;
+	border-style: solid;
+	border-width: 5px 6px 5px 0;
+	border-color: transparent #f1f7fd;
+	display: block;
+	width: 0;
+	z-index: 1;
+	left: -6px;
+	bottom: 10px;
+}
+
+div.jsxc_out.jsxc_received:before {
+	content: '✓';
+	position: absolute;
+	bottom: 2px;
+	right: 2px;
+	font-size: 12px;
+	line-height: 12px;
+	color: green;
 }
 
 /** outgoing message */
-div.jsxc_out,input.jsxc_out {
-	text-align: right;
-	margin-left: 30px;
-	border: 1px solid green !important;
+div.jsxc_out {
+	float: right;
+	position: relative;
+	margin-right: 10px;
+	background: #e6ffd1;
+	border: solid 1px #b4d89f;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+}
+
+div.jsxc_out:after {
+	content: '';
+	position: absolute;
+	border-style: solid;
+	border-width: 5px 0 5px 6px;
+	border-color: transparent #e6ffd1;
+	display: block;
+	width: 0;
+	z-index: 1;
+	right: -6px;
+	bottom: 10px;
 }
 
 /** system message */
 div.jsxc_sys {
-	width: 182px;
-	border: 1px solid black;
+	width: auto;
+	max-width: none;
+	padding-right: 4px;
+	box-sizing: border-box;
+	margin-right: 3px;
+	border-radius: 3px;
 }
 
 .jsxc_window input.jsxc_textinput {
-	position: absolute;
-	top: 226px;
-	left: 30px;
-	width: 157px;
-	height: 16px;
+	width: 100%;
+	height: 30px;
 	margin: 0px;
-	line-height: 16px;
-    outline:none;
+	padding: 3px;
+	padding-right: 40px;
+	outline: none;
+	border-radius: 0px;
+	box-sizing: border-box;
+	text-align: right;
 }
 
-.jsxc_window .jsxc_close {
-	text-transform: uppercase;
-	color: #939393;
-	font-family: Arial;
-	font-weight: bold;
-	line-height: 17px;
-	cursor: pointer;
+.jsxc_window ::-webkit-input-placeholder {
+	color: #000;
+	opacity: 0.3;
+}
+
+.jsxc_window ::-moz-placeholder {
+	color: #000;
+	opacity: 0.3;
+} /* firefox 19+ */
+.jsxc_window :-ms-input-placeholder {
+	color: rgba(0, 0, 0, 0.4);
+} /* ie */
+.jsxc_window input:-moz-placeholder {
+	color: #000;
+	opacity: 0.3;
+}
+
+div.jsxc_window .jsxc_tools {
+	height: 26px;
 	float: right;
-	padding: 3px;
 }
 
-.jsxc_window .jsxc_close:hover {
-	color: #FAFAFA;
+.jsxc_min .jsxc_tools {
+	display: none;
+}
+
+div.jsxc_window .jsxc_tools > div {
+	width: 17px;
+   height: 26px;
+   display: block;
+   float: left;
+   color: #939393;
+   font-family: Arial;
+   line-height: 26px;
+   cursor: pointer;
+   text-align: center;
 }
 
 div.jsxc_settings {
-	color: #939393;
-	font-family: Arial;
-	line-height: 17px;
-	cursor: pointer;
 	background-image: url('img/gear_grey.svg');
 	background-size: 15px 15px;
 	background-repeat: no-repeat;
 	background-position: center center;
-	width: 17px;
-	height: 17px;
-	display: block;
-	float: left;
 	overflow: visible;
-	padding: 3px;
 }
 
 div.jsxc_settings:hover,div.jsxc_settings.hover {
@@ -595,10 +860,10 @@ div.jsxc_settings ul {
 	padding: 0px;
 	margin: 0px;
 	position: absolute;
-	top: 23px;
+	top: 30px;
 	left: 0px;
 	box-shadow: 0px 5px 5px -5px #000;
-	z-index: 90;
+	z-index: 110;
 	overflow: visible;
 	background-color: #282323;
 	display: none;
@@ -610,13 +875,14 @@ div.jsxc_settings li {
 	padding-left: 10px;
 	height: 30px;
 	line-height: 30px;
+	text-align: left;
 }
 
 div.jsxc_settings li:first-child {
 	border-top: 1px solid #ccc;
 }
 
-div.jsxc_settings li:hover:not(.jsxc_disabled){
+div.jsxc_settings li:hover:not(.jsxc_disabled ){
 	color: #fff;
 	background-color: #3F8FBA;
 }
@@ -627,15 +893,14 @@ div.jsxc_settings li.jsxc_disabled {
 }
 
 div.jsxc_transfer {
-	padding: 3px;
-	width: 17px;
-	height: 17px;
 	background-image: url('img/padlock_open_grey.svg');
 	background-repeat: no-repeat;
 	background-position: center center;
-	background-size: 15px 15px;
-	cursor: pointer;
-	float: left;
+	background-size: 12px 12px;
+}
+
+div.jsxc_transfer:hover {
+	background-image: url('img/padlock_open_white.svg');
 }
 
 div.jsxc_transfer.jsxc_fin {
@@ -650,6 +915,39 @@ div.jsxc_transfer.jsxc_enc.jsxc_trust {
 	background-image: url('img/padlock_close_green.svg');
 }
 
-#colorbox, #cboxWrapper {
-    outline: none;
+.jsxc_window .jsxc_close {
+	font-size: 20px;
+}
+
+.jsxc_window .jsxc_close:hover {
+	color: #FAFAFA;
+}
+
+#colorbox,#cboxWrapper {
+	outline: none;
+}
+
+/*############################ 
+ *######### Other ############ 
+ *############################*/
+ul.jsxc_vCard {
+	min-width: 400px;
+}
+
+ul.jsxc_vCard ul {
+	margin-left: 20px;
+}
+
+ul.jsxc_vCard li {
+	cursor: default !important;
+}
+
+ul.jsxc_vCard strong {
+	
+}
+
+img.jsxc_vCard {
+	float: right;
+	max-width: 200px;
+	max-height: 200px;
 }
diff --git a/build/jsxc.lib.js b/build/jsxc.lib.js
index 23aea806..eb62e683 100644
--- a/build/jsxc.lib.js
+++ b/build/jsxc.lib.js
@@ -1,5 +1,5 @@
 /**
- * jsxc v0.7.2 - 2014-05-28
+ * jsxc v0.8.0-beta - 2014-06-27
  * 
  * 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.7.2
+ * @version 0.8.0-beta
  */
 
 var jsxc;
@@ -22,7 +22,7 @@ var jsxc;
     */
    jsxc = {
       /** Version of jsxc */
-      version: '0.7.2',
+      version: '0.8.0-beta',
 
       /** True if i'm the master */
       master: false,
@@ -234,7 +234,7 @@ var jsxc;
          if (!jsxc.storage.getItem('rid') || !jsxc.storage.getItem('sid') || !jsxc.restore) {
 
             // Looking for a login form
-            if (!jsxc.options.loginForm.form || !jsxc.el_exists(jsxc.options.loginForm.form)) {
+            if (!jsxc.options.loginForm.form || !(jsxc.el_exists(jsxc.options.loginForm.form) && jsxc.el_exists(jsxc.options.loginForm.jid) && jsxc.el_exists(jsxc.options.loginForm.pass))) {
 
                if (jsxc.options.displayRosterMinimized()) {
                   // Show minimized roster
@@ -474,8 +474,11 @@ var jsxc;
       restoreRoster: function() {
          var buddies = jsxc.storage.getUserItem('buddylist');
 
-         if (!buddies) {
+         if (!buddies || buddies.length === 0) {
             jsxc.debug('No saved buddylist.');
+            
+            jsxc.gui.roster.empty();
+
             return;
          }
 
@@ -539,6 +542,7 @@ var jsxc;
        * Escapes some characters to HTML character
        */
       escapeHTML: function(text) {
+         text = text.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
          return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
       },
 
@@ -709,7 +713,7 @@ var jsxc;
     */
    jsxc.gui = {
       /** Smilie token to file mapping */
-      emotions: [ [ ':-) :)', 'smile.png' ], [ ':-D :D', 'grin.png' ], [ ':-( :(', 'sad.png' ], [ ';-) ;)', 'wink.png' ], [ ':-P :P', 'tonguesmile.png' ], [ '=-O', 'surprised.png' ], [ ':kiss: :-*', 'kiss.png' ], [ '8-) :cool:', 'sunglassess.png' ], [ ':\'-(', 'crysad.png' ], [ ':-/', 'doubt.png' ], [ 'O:-) O:)', 'angel.png' ], [ ':-X :X', 'zip.png' ], [ '>:o', 'angry.png' ], [ ':yes:', 'thumbsup.png' ], [ ':beer:', 'beer.png' ], [ ':devil:', 'devil.png' ], [ ':kissing:', 'kissing.png' ], [ ':love:', 'love.png' ], [ ':zzz:', 'tired.png' ] ],
+      emotions: [ [ 'O:-) O:)', 'angel.png' ], [ '>:-( >:( &gt;:-( &gt;:(', 'angry.png' ], [ ':-) :)', 'smile.png' ], [ ':-D :D', 'grin.png' ], [ ':-( :(', 'sad.png' ], [ ';-) ;)', 'wink.png' ], [ ':-P :P', 'tonguesmile.png' ], [ '=-O', 'surprised.png' ], [ ':kiss: :-*', 'kiss.png' ], [ '8-) :cool:', 'sunglassess.png' ], [ ':\'-( :\'( :&amp;apos;-(', 'crysad.png' ], [ ':-/', 'doubt.png' ], [ ':-X :X', 'zip.png' ], [ ':yes:', 'thumbsup.png' ], [ ':no:', 'thumbsdown.png' ], [ ':beer:', 'beer.png' ], [ ':devil:', 'devil.png' ], [ ':kiss: :kissing:', 'kissing.png' ], [ '@->-- :rose: @-&gt;--', 'rose.png' ], [ ':music:', 'music.png' ], [ ':love:', 'love.png' ], [ ':zzz:', 'tired.png' ] ],
 
       /**
        * Creates application skeleton.
@@ -719,12 +723,15 @@ var jsxc;
       init: function() {
          $('body').append($(jsxc.gui.template.get('windowList')));
 
+         jsxc.gui.tooltip('#jsxc_windowList');
+
          jsxc.gui.roster.init();
 
          // prepare regexp for emotions
          $.each(jsxc.gui.emotions, function(i, val) {
+            // escape characters
             var reg = val[0].replace(/(\/|\||\*|\.|\+|\?|\^|\$|\(|\)|\[|\]|\{|\})/g, '\\$1');
-            reg = '(' + reg.split(' ').join(')|(') + ')';
+            reg = '(' + reg.split(' ').join('|') + ')';
             jsxc.gui.emotions[i][2] = new RegExp(reg, 'g');
          });
 
@@ -734,6 +741,23 @@ var jsxc;
       },
 
       /**
+       * Init tooltip plugin for given jQuery selector.
+       * 
+       * @param {String} selector jQuery selector
+       * @memberOf jsxc.gui
+       */
+      tooltip: function(selector) {
+         $(selector).tooltip({
+            show: {
+               delay: 600
+            },
+            content: function() {
+               return $(this).attr('title').replace(/\n/g, '<br />');
+            }
+         });
+      },
+
+      /**
        * Updates Information in roster and chatbar
        * 
        * @param {String} cid CSS compatible jid
@@ -784,14 +808,14 @@ var jsxc;
          if (data.trust) {
             we.find('.jsxc_transfer').addClass('jsxc_trust').attr('title', jsxc.l.your_buddy_is_verificated);
          } else {
-            we.find('.jsxc_transfer').removeClass('jsxc_trust').attr('title', '');
+            we.find('.jsxc_transfer').removeClass('jsxc_trust');
          }
 
          // update gui according to subscription state
          if (data.sub && data.sub !== 'both') {
-            ri.addClass('jsxc_oneway');
+            ue.addClass('jsxc_oneway');
          } else {
-            ri.removeClass('jsxc_oneway');
+            ue.removeClass('jsxc_oneway');
          }
 
          var info = '<b>' + Strophe.getBareJidFromJid(data.jid) + '</b>\n';
@@ -967,9 +991,7 @@ var jsxc;
             return;
          }
 
-         jsxc.gui.dialog.open(jsxc.gui.template.get('authenticationDialog', cid), {
-            'noClose': true
-         });
+         jsxc.gui.dialog.open(jsxc.gui.template.get('authenticationDialog', cid));
 
          // Add handler
 
@@ -1112,7 +1134,7 @@ var jsxc;
             }
          });
 
-         $('#jsxc_dialog .creation').click(function() {
+         $('#jsxc_dialog form').submit(function() {
             var username = $('#jsxc_username').val();
             var alias = $('#jsxc_alias').val();
 
@@ -1133,6 +1155,8 @@ var jsxc;
             jsxc.xmpp.addBuddy(username, alias);
 
             jsxc.gui.dialog.close();
+            
+            return false;
          });
       },
 
@@ -1269,6 +1293,146 @@ var jsxc;
       },
 
       /**
+       * Show vCard of user with the given bar jid.
+       * 
+       * @memberOf jsxc.gui
+       * @param {String} bjid Bar jid
+       */
+      showVcard: function(bjid) {
+         jsxc.gui.dialog.open(jsxc.gui.template.get('vCard', jsxc.jidToCid(bjid)));
+
+         var printProp = function(el, depth) {
+            var content = '';
+
+            el.each(function() {
+               var item = $(this);
+               var children = $(this).children();
+
+               content += '<li>';
+
+               var prop = jsxc.translate('%%' + item[0].tagName + '%%');
+
+               if (prop !== ' ') {
+                  content += '<strong>' + prop + ':</strong> ';
+               }
+
+               if (item[0].tagName === 'PHOTO') {
+
+               } else if (children.length > 0) {
+                  content += '<ul>';
+                  content += printProp(children, depth + 1);
+                  content += '</ul>';
+               } else if (item.text() !== '') {
+                  content += jsxc.escapeHTML(item.text());
+               }
+
+               content += '</li>';
+
+               if (depth === 0 && $('#jsxc_dialog ul.jsxc_vCard').length > 0) {
+                  $('#jsxc_dialog ul.jsxc_vCard').append(content);
+                  content = '';
+               }
+            });
+
+            if (depth > 0) {
+               return content;
+            }
+         };
+
+         var failedToLoad = function() {
+            if ($('#jsxc_dialog ul.jsxc_vCard').length === 0) {
+               return;
+            }
+
+            $('#jsxc_dialog p').remove();
+
+            var content = '<p>';
+            content += jsxc.translate('%%Sorry, we couldn\'t load any vCard.%%');
+            content += '</p>';
+
+            $('#jsxc_dialog').append(content);
+         };
+
+         jsxc.xmpp.conn.vcard.get(function(stanza) {
+
+            if ($('#jsxc_dialog ul.jsxc_vCard').length === 0) {
+               return;
+            }
+
+            if ($(stanza).find('vCard').length === 0) {
+               failedToLoad();
+               return;
+            }
+
+            $('#jsxc_dialog p').remove();
+
+            var photo = $(stanza).find("vCard > PHOTO");
+
+            if (photo.length > 0) {
+               var img = photo.find('BINVAL').text();
+               var type = photo.find('TYPE').text();
+               var src = 'data:' + type + ';base64,' + img;
+
+               $('#jsxc_dialog h3').prepend('<img class="jsxc_vCard" src="' + src + '" alt="avatar" />');
+            }
+
+            printProp($(stanza).find('vcard > *'), 0);
+
+         }, bjid, failedToLoad);
+      },
+
+      showSettings: function() {
+         jsxc.gui.dialog.open(jsxc.gui.template.get('settings'));
+
+         $('#jsxc_dialog form').each(function() {
+            var self = $(this);
+
+            self.find('input[type!="submit"]').each(function() {
+               var id = this.id.split("-");
+               var prop = id[0];
+               var key = id[1];
+
+               var data = jsxc.options.get(prop);
+
+               if (data && data[key]) {
+                  $(this).val(data[key]);
+               }
+            });
+         });
+
+         $('#jsxc_dialog form').submit(function() {
+
+            var self = $(this);
+            var data = {};
+
+            self.find('input[type!="submit"]').each(function() {
+               var id = this.id.split("-");
+               var prop = id[0];
+               var key = id[1];
+               var val = $(this).val();
+
+               if (!data[prop]) {
+                  data[prop] = {};
+               }
+
+               data[prop][key] = val;
+            });
+
+            $.each(data, function(key, val) {
+               jsxc.options.set(key, val);
+            });
+
+            setTimeout(function() {
+               self.find('input[type="submit"]').effect('highlight', {
+                  color: 'green'
+               }, 4000);
+            }, 200);
+
+            return false;
+         });
+      },
+
+      /**
        * Change own presence to pres.
        * 
        * @memberOf jsxc.gui
@@ -1337,6 +1501,10 @@ var jsxc;
             $('#jsxc_buddylist').addClass('jsxc_hideOffline');
          }
 
+         $('#jsxc_menu .jsxc_settings').click(function() {
+            jsxc.gui.showSettings();
+         });
+
          $('#jsxc_menu .jsxc_hideOffline').click(function() {
             var hideOffline = !jsxc.options.get('hideOffline');
 
@@ -1418,14 +1586,7 @@ var jsxc;
             jsxc.gui.updateAvatar($('#jsxc_avatar'), jsxc.storage.getItem('jid'), 'own');
          });
 
-         $('#jsxc_roster').tooltip({
-            show: {
-               delay: 600
-            },
-            content: function() {
-               return $(this).attr('title').replace(/\n/g, '<br />');
-            }
-         });
+         jsxc.gui.tooltip('#jsxc_roster');
 
          jsxc.notice.load();
 
@@ -1447,6 +1608,10 @@ var jsxc;
             jsxc.gui.window.open(cid);
          });
 
+         bud.find('.jsxc_chaticon').click(function() {
+            jsxc.gui.window.open(cid);
+         });
+
          bud.find('.jsxc_rename').click(function() {
             jsxc.gui.roster.rename(cid);
             return false;
@@ -1457,12 +1622,28 @@ var jsxc;
             return false;
          });
 
+         bud.find('.jsxc_avatar').click(function() {
+            bud.trigger('extra.jsxc');
+
+            bud.toggleClass('jsxc_expand');
+
+            jsxc.gui.updateAvatar(bud, data.jid, data.avatar);
+            return false;
+         });
+
+         bud.find('.jsxc_vcardicon').click(function() {
+            jsxc.gui.showVcard(data.jid);
+            return false;
+         });
+
          jsxc.gui.update(cid);
 
          // update scrollbar
          $('#jsxc_buddylist').slimScroll({
             scrollTo: '0px'
          });
+
+         $(document).trigger('add.roster.jsxc', [ cid, data, bud ]);
       },
 
       /**
@@ -1638,9 +1819,27 @@ var jsxc;
          $('#jsxc_roster .slimScrollDiv').remove();
          $('#jsxc_roster > .jsxc_bottom').remove();
 
-         $('#jsxc_roster').append($(document.createElement('p')).text(jsxc.l.no_connection).append($(document.createElement('a')).attr('href', '#').text(jsxc.l.relogin).click(function() {
+         $('#jsxc_roster').append($('<p>' + jsxc.l.no_connection + '</p>').append(' <a>' + jsxc.l.relogin + '</a>').click(function() {
             jsxc.gui.showLoginBox();
-         })));
+         }));
+      },
+      
+      /**
+       * Shows a text with link to add a new buddy.
+       * 
+       * @memberOf jsxc.gui.roster
+       */
+      empty: function() { console.trace(); 
+         var text = $('<p>' + jsxc.l.Your_roster_is_empty_add_a + '</p>');
+         var link = $('<a>' + jsxc.l.new_buddy + '</a>');
+
+         link.click(function() {
+            jsxc.gui.showContactDialog();
+         });
+         text.append(link);
+         text.append('.');
+
+         $('#jsxc_roster').prepend(text);
       }
    };
 
@@ -1771,6 +1970,10 @@ var jsxc;
             jsxc.gui.window.clear(cid);
          });
 
+         win.find('.jsxc_tools').click(function() {
+            return false;
+         });
+
          win.find('.jsxc_textinput').keyup(function(ev) {
             var body = $(this).val();
 
@@ -1792,11 +1995,11 @@ var jsxc;
          });
 
          win.find('.jsxc_textarea').slimScroll({
-            height: '200px',
+            height: '234px',
             distance: '3px'
          });
 
-         win.find('.jsxc_window').hide();
+         win.find('.jsxc_fade').hide();
 
          win.find('.jsxc_name').disableSelection();
 
@@ -1820,6 +2023,18 @@ var jsxc;
             }
          }
 
+         $.each(jsxc.gui.emotions, function(i, val) {
+            var ins = val[0].split(' ')[0];
+            var li = $('<li><img alt="' + ins + '" title="' + ins + '" src="' + jsxc.options.root + '/img/emotions/' + val[1] + '"/></li>');
+            li.click(function() {
+               win.find('input').val(win.find('input').val() + ins);
+               win.find('input').focus();
+            });
+            win.find('.jsxc_emoticons ul').append(li);
+         });
+
+         jsxc.gui.toggleList.call(win.find('.jsxc_emoticons'));
+
          jsxc.gui.window.restoreChat(cid);
 
          jsxc.gui.update(cid);
@@ -1886,7 +2101,7 @@ var jsxc;
        * @param {String} cid CSS compatible jid
        */
       toggle: function(cid) {
-         if (jsxc.gui.getWindow(cid).find('.jsxc_window').is(':hidden')) {
+         if (jsxc.gui.getWindow(cid).find('.jsxc_fade').is(':hidden')) {
             jsxc.gui.window.show(cid);
          } else {
             jsxc.gui.window.hide(cid);
@@ -1913,7 +2128,8 @@ var jsxc;
        */
       _show: function(cid) {
          var win = jsxc.gui.getWindow(cid);
-         $('#jsxc_window_' + cid + ' .jsxc_window').slideDown();
+         $('#jsxc_window_' + cid + ' .jsxc_fade').slideDown();
+         win.removeClass('jsxc_min');
 
          // remove unread flag
          win.removeClass('jsxc_unreadMsg');
@@ -1945,7 +2161,9 @@ var jsxc;
        * @param {String} cid
        */
       _hide: function(cid) {
-         $('#jsxc_window_' + cid + ' .jsxc_window').slideUp();
+         $('#jsxc_window_' + cid + ' .jsxc_fade').slideUp();
+         $('#jsxc_window_' + cid).addClass('jsxc_min');
+
          jsxc.gui.getWindow(cid).trigger('hidden.window.jsxc');
       },
 
@@ -1955,9 +2173,13 @@ var jsxc;
        * @param {type} cid
        */
       highlight: function(cid) {
-         $('#jsxc_window_' + cid + ' ').effect('highlight', {
-            color: 'orange'
-         }, 2000);
+         var el = $('#jsxc_window_' + cid + ' .jsxc_bar');
+
+         if (!el.is(':animated')) {
+            el.effect('highlight', {
+               color: 'orange'
+            }, 2000);
+         }
       },
 
       /**
@@ -2031,7 +2253,7 @@ var jsxc;
          }
 
          if (direction === 'out' && jsxc.master) {
-            jsxc.buddyList[cid].sendMsg(msg, uid);
+            jsxc.buddyList[cid].sendMsg(html_msg, uid);
          }
 
          jsxc.gui.window._postMessage(cid, post);
@@ -2070,7 +2292,17 @@ var jsxc;
          });
 
          $.each(jsxc.gui.emotions, function(i, val) {
-            msg = msg.replace(val[2], '<img alt="$1" title="$1" src="' + jsxc.options.root + '/img/emotions/' + val[1] + '"/>');
+            msg = msg.replace(val[2], function(match, p1) {
+
+               // escape value for alt and title, this prevents double
+               // replacement
+               var esc = '', i;
+               for (i = 0; i < p1.length; i++) {
+                  esc += '&#' + p1.charCodeAt(i) + ';';
+               }
+
+               return '<img alt="' + esc + '" title="' + esc + '" src="' + jsxc.options.root + '/img/emotions/' + val[1] + '"/>';
+            });
          });
 
          var msgDiv = $("<div>");
@@ -2082,12 +2314,16 @@ var jsxc;
             msgDiv.addClass('jsxc_received');
          }
 
+         if (direction === 'sys') {
+            $('#jsxc_window_' + cid + ' .jsxc_textarea').append('<div style="clear:both"/>');
+         }
+
          $('#jsxc_window_' + cid + ' .jsxc_textarea').append(msgDiv);
 
          jsxc.gui.window.scrollDown(cid);
 
          // if window is hidden set unread flag
-         if (win.find('.jsxc_window').is(':hidden') && jsxc.restoreCompleted && !restore) {
+         if (win.find('.jsxc_fade').is(':hidden') && jsxc.restoreCompleted && !restore) {
             win.addClass('jsxc_unreadMsg');
             jsxc.storage.updateUserItem('window_' + cid, 'unread', true);
          }
@@ -2219,33 +2455,38 @@ var jsxc;
               <p class="jsxc_right"><a href="#" class="button jsxc_close">%%Close%%</a> <a href="#" class="button creation">%%Compare%%</a></p>\
             </div>',
       fingerprintsDialog: '<div>\
+          <p class="jsxc_maxWidth">%%A_fingerprint_%%</p>\
           <p><strong>%%Your_fingerprint%%</strong><br />\
           <span style="text-transform:uppercase">{{my_priv_fingerprint}}</span></p>\
           <p><strong>%%Buddy_fingerprint%%</strong><br />\
           <span style="text-transform:uppercase">{{cid_priv_fingerprint}}</span></p><br />\
           <p class="jsxc_right"><a href="#" class="button jsxc_close">%%Close%%</a></p>\
         </div>',
-      chatWindow: '<li>\
-            <div class="jsxc_bar">\
-                <div class="jsxc_avatar">☺</div>\
-                <div class="jsxc_name"/>\
-                <div class="jsxc_cycle"/>\
-            </div>\
+      chatWindow: '<li class="jsxc_min">\
             <div class="jsxc_window">\
-                <div class="jsxc_tools">\
-                    <div class="jsxc_settings">\
-                        <ul>\
-                            <li class="jsxc_fingerprints">%%Fingerprints%%</li>\
-                            <li class="jsxc_verification">%%Authentifikation%%</li>\
-                            <li class="jsxc_transfer">%%start_private%%</li>\
-                            <li class="jsxc_clear">%%clear_history%%</li>\
-                        </ul>\
-                    </div>\
-                    <div class="jsxc_transfer"/>\
-                    <div class="jsxc_close">X</div>\
+                <div class="jsxc_bar">\
+                     <div class="jsxc_avatar">☺</div>\
+                     <div class="jsxc_tools">\
+                           <div class="jsxc_settings">\
+                               <ul>\
+                                   <li class="jsxc_fingerprints">%%Fingerprints%%</li>\
+                                   <li class="jsxc_verification">%%Authentifikation%%</li>\
+                                   <li class="jsxc_transfer">%%start_private%%</li>\
+                                   <li class="jsxc_clear">%%clear_history%%</li>\
+                               </ul>\
+                           </div>\
+                           <div class="jsxc_transfer"/>\
+                           <div class="jsxc_close">×</div>\
+                     </div>\
+                     <div class="jsxc_name"/>\
+                     <div class="jsxc_cycle"/>\
+                </div>\
+                <div class="jsxc_fade">\
+                   <div class="jsxc_gradient"/>\
+                   <div class="jsxc_textarea"/>\
+                   <div class="jsxc_emoticons"><ul/></div>\
+                   <input type="text" class="jsxc_textinput" placeholder="...%%Message%%" />\
                 </div>\
-                <div class="jsxc_textarea"/>\
-                <input type="text" class="jsxc_textinput jsxc_chatmessage jsxc_out" placeholder="...%%Message%%"/>\
             </div>\
         </li>',
       roster: '<div id="jsxc_roster">\
@@ -2257,6 +2498,7 @@ var jsxc;
               <div id="jsxc_menu">\
                  <span></span>\
                  <ul>\
+                     <li class="jsxc_settings">%%Settings%%</li>\
                      <li class="jsxc_muteNotification">%%Mute%%</li>\
                      <li class="jsxc_addBuddy">%%Add_buddy%%</li>\
                      <li class="jsxc_hideOffline">%%Hide offline%%</li>\
@@ -2287,11 +2529,15 @@ var jsxc;
         </div>',
       rosterBuddy: '<li>\
             <div class="jsxc_avatar">☺</div>\
-            <div class="jsxc_options">\
+            <div class="jsxc_name"/>\
+            <div class="jsxc_options jsxc_right">\
                 <div class="jsxc_rename" title="%%rename_buddy%%">✎</div>\
                 <div class="jsxc_delete" title="%%delete_buddy%%">✘</div>\
             </div>\
-            <div class="jsxc_name"/>\
+            <div class="jsxc_options jsxc_left">\
+                <div class="jsxc_chaticon" title="%%send_message%%"/>\
+                <div class="jsxc_vcardicon" title="%%get_info%%">i</div>\
+            </div>\
         </li>',
       loginBox: '<h3>%%Login%%</h3>\
         <form method="get">\
@@ -2306,13 +2552,15 @@ var jsxc;
         </form>',
       contactDialog: '<h3>%%Add_buddy%%</h3>\
          <p class=".jsxc_explanation">%%Type_in_the_full_username_%%</p>\
+         <form>\
          <p><label for="jsxc_username">* %%Username%%:</label>\
-            <input type="text" name="username" id="jsxc_username" required="required" /></p>\
+            <input type="email" name="username" id="jsxc_username" required="required" /></p>\
          <p><label for="jsxc_alias">%%Alias%%:</label>\
             <input type="text" name="alias" id="jsxc_alias" /></p>\
          <p class="jsxc_right">\
-            <a href="#" class="button jsxc_close">%%Close%%</a> <a href="#" class="button creation">%%Add%%</a>\
-         </p>',
+            <input class="button" type="submit" value="%%Add%%" />\
+         </p>\
+         <form>',
       approveDialog: '<h3>%%Subscription_request%%</h3>\
         <p>%%You_have_a_request_from%% <b class="jsxc_their_jid"></b>.</p>\
         <p class="jsxc_right"><a href="#" class="button jsxc_deny">%%Deny%%</a> <a href="#" class="button creation jsxc_approve">%%Approve%%</a></p>',
@@ -2347,7 +2595,23 @@ var jsxc;
          <br />\
          <b>Credential: </b> <a href="http://www.beepzoid.com/old-phones/" target="_blank">David English (Ringtone)</a>,\
          <a href="https://soundcloud.com/freefilmandgamemusic/ping-1?in=freefilmandgamemusic/sets/free-notification-sounds-and" target="_blank">CameronMusic (Ping)</a></p>\
-         <p class="jsxc_right"><a class="button jsxc_debuglog" href="#">Show debug log</a></p>'
+         <p class="jsxc_right"><a class="button jsxc_debuglog" href="#">Show debug log</a></p>',
+      vCard: '<h3>vCard %%from%% {{cid_name}}</h3>\
+         <ul class="jsxc_vCard"></ul>\
+         <p><img src="{{root}}/img/loading.gif" alt="wait" width="32px" height="32px" /> %%Please_wait%%...</p>',
+      settings: '<h3>%%User_settings%%</h3>\
+         <p></p>\
+         <form>\
+            <fieldset class="jsxc_fieldsetPriority">\
+               <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"/>\
+               <input type="submit" value="%%Save%%"/>\
+            </fieldset>\
+         </form>'
    };
 
    /**
@@ -2530,6 +2794,8 @@ var jsxc;
             // pres first after roster is ready
             $(document).one('cloaded.roster.jsxc', jsxc.xmpp.sendPres);
 
+            $('#jsxc_roster > p:first').remove();
+            
             var iq = $iq({
                type: 'get'
             }).c('query', {
@@ -2579,8 +2845,8 @@ var jsxc;
             pres.c('show').t(presState).up();
          }
 
-         var priority = jsxc.storage.getUserItem('priority');
-         if (priority !== null) {
+         var priority = jsxc.options.get('priority');
+         if (priority && typeof priority[presState] !== 'undefined' && parseInt(priority[presState]) !== 0) {
             pres.c('priority').t(priority[presState]).up();
          }
 
@@ -2683,6 +2949,10 @@ var jsxc;
             jsxc.gui.roster.add(cid);
          });
 
+         if(buddies.length === 0) {
+            jsxc.gui.roster.empty();
+         }
+         
          jsxc.storage.setUserItem('buddylist', buddies);
 
          jsxc.debug('Roster loaded');
@@ -2756,6 +3026,12 @@ var jsxc;
                }
             }
          });
+         
+         if (!jsxc.storage.getUserItem('buddylist') || jsxc.storage.getUserItem('buddylist').length === 0) {
+            jsxc.gui.roster.empty();
+         } else {
+            $('#jsxc_roster > p:first').remove();
+         }
 
          // preserve handler
          return true;
@@ -3603,7 +3879,7 @@ var jsxc;
                   data.fingerprint = jsxc.buddyList[cid].their_priv_pk.fingerprint();
                   data.msgstate = OTR.CONST.MSGSTATE_ENCRYPTED;
 
-                  var msg = (jsxc.buddyList[cid].trust ? jsxc.l.Verified : jsxc.l.Unverified) + ' ' + jsxc.l.private_conversation_started + data.jid;
+                  var msg = (jsxc.buddyList[cid].trust ? jsxc.l.Verified : jsxc.l.Unverified) + ' ' + jsxc.l.private_conversation_started;
                   jsxc.gui.window.postMessage(cid, 'sys', msg);
                   break;
                case OTR.CONST.STATUS_END_OTR:
@@ -3856,7 +4132,7 @@ var jsxc;
                // try to create web-worker
 
                try {
-                  worker = new Worker(jsxc.options.root + '/js/jsxc/lib/otr/build/dsa-webworker.js');
+                  worker = new Worker(jsxc.options.root + '/lib/otr/build/dsa-webworker.js');
                } catch (err) {
                   jsxc.warn('Couldn\'t create web-worker.', err);
                }
@@ -3882,7 +4158,7 @@ var jsxc;
 
                // start worker
                worker.postMessage({
-                  imports: [ jsxc.options.root + '/js/jsxc/lib/otr/vendor/salsa20.js', jsxc.options.root + '/js/jsxc/lib/otr/vendor/bigint.js', jsxc.options.root + '/js/jsxc/lib/otr/vendor/crypto.js', jsxc.options.root + '/js/jsxc/lib/otr/vendor/eventemitter.js', jsxc.options.root + '/js/jsxc/lib/otr/lib/const.js', jsxc.options.root + '/js/jsxc/lib/otr/lib/helpers.js', jsxc.options.root + '/js/jsxc/lib/otr/lib/dsa.js' ],
+                  imports: [ jsxc.options.root + '/lib/otr/vendor/salsa20.js', jsxc.options.root + '/lib/otr/vendor/bigint.js', jsxc.options.root + '/lib/otr/vendor/crypto.js', jsxc.options.root + '/lib/otr/vendor/eventemitter.js', jsxc.options.root + '/lib/otr/lib/const.js', jsxc.options.root + '/lib/otr/lib/helpers.js', jsxc.options.root + '/lib/otr/lib/dsa.js' ],
                   seed: BigInt.getSeed(),
                   debug: true
                });
@@ -4314,7 +4590,7 @@ var jsxc;
          trying_to_start_private_conversation: 'Trying to start private conversation!',
          Verified: 'Verified',
          Unverified: 'Unverified',
-         private_conversation_started: 'private conversation started with ',
+         private_conversation_started: 'private conversation started.',
          private_conversation_aborted: 'Private conversation aborted!',
          your_buddy_closed_the_private_conversation_you_should_do_the_same: 'Your buddy closed the private conversation! You should do the same.',
          conversation_is_now_verified: 'Conversation is now verified.',
@@ -4368,6 +4644,9 @@ var jsxc;
          New_message_from: 'New message from',
          Should_we_notify_you_: 'Should we notify you about new messages in the future?',
          Please_accept_: 'Please click the "Allow" button at the top.',
+         Hide_offline: 'Hide offline',
+         Show_offline: 'Show offline',
+         About: 'About',
          dnd: 'Do Not Disturb',
          Mute: 'Mute',
          Unmute: 'Unmute',
@@ -4392,7 +4671,41 @@ var jsxc;
          Confirm: 'Confirm',
          Dismiss: 'Dismiss',
          Remove: 'Remove',
-         Online_help: 'Online help'
+         Online_help: 'Online help',
+         FN: 'Full Name',
+         N: ' ',
+         FAMILY: 'Family Name',
+         GIVEN: 'Given Name',
+         NICKNAME: 'Nickname',
+         URL: 'URL',
+         ADR: 'Address',
+         STREET: 'Street Address',
+         EXTADD: 'Extended Address',
+         LOCALITY: 'Locality',
+         REGION: 'Region',
+         PCODE: 'Postal Code',
+         CTRY: 'Country',
+         TEL: 'Telephone',
+         NUMBER: 'Number',
+         EMAIL: 'Email',
+         USERID: ' ',
+         ORG: 'Organization',
+         ORGNAME: 'Name',
+         ORGUNIT: 'Unit',
+         TITLE: 'Job Title',
+         ROLE: 'Role',
+         BDAY: 'Birthday',
+         DESC: 'Description',
+         PHOTO: ' ',
+         send_message: 'send message',
+         get_info: 'get info',
+         Settings: 'Settings',
+         Priority: 'Priority',
+         Save: 'Save',
+         User_settings: 'User settings',
+         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'
       },
       de: {
          please_wait_until_we_logged_you_in: 'Bitte warte bis wir dich eingeloggt haben.',
@@ -4413,7 +4726,7 @@ var jsxc;
          trying_to_start_private_conversation: 'Versuche private Konversation zu starten.',
          Verified: 'Verifiziert',
          Unverified: 'Unverifiziert',
-         private_conversation_started: 'Private Konversation gestartet mit ',
+         private_conversation_started: 'Private Konversation gestartet.',
          private_conversation_aborted: 'Private Konversation abgebrochen.',
          your_buddy_closed_the_private_conversation_you_should_do_the_same: 'Dein Freund hat die private Konversation beendet. Das solltest du auch tun!',
          conversation_is_now_verified: 'Konversation ist jetzt verifiziert',
@@ -4495,7 +4808,115 @@ var jsxc;
          Confirm: 'Bestätigen',
          Dismiss: 'Ablehnen',
          Remove: 'Löschen',
-         Online_help: 'Online Hilfe'
+         Online_help: 'Online Hilfe',
+         Settings: 'Einstellungen',
+         Priority: 'Priorität',
+         Save: 'Speichern',
+         User_settings: 'Benutzereinstellungen',
+         A_fingerprint_: 'Ein Fingerabdruck wird dazu benutzt deinen Gesprächspartner zu identifizieren.'
+      },
+      es: {
+         please_wait_until_we_logged_you_in: 'Por favor, espere...',
+         your_connection_is_unencrypted: 'Su conexión no está cifrada.',
+         your_connection_is_encrypted: 'Su conexión está cifrada.',
+         your_buddy_closed_the_private_connection: 'Su amigo ha cerrado la conexión privada.',
+         start_private: 'Iniciar privado',
+         close_private: 'Cerrar privado',
+         your_buddy_is_verificated: 'Tu amigo está verificado.',
+         you_have_only_a_subscription_in_one_way: 'Sólo tienes una suscripción de un modo.',
+         verification_query_sent: 'Consulta de verificación enviada.',
+         your_message_wasnt_send_please_end_your_private_conversation: 'Su mensaje no fue enviado. Por favor, termine su conversación privada.',
+         unencrypted_message_received: 'Mensaje no cifrado recibido:',
+         your_message_wasnt_send_because_you_have_no_valid_subscription: 'Su mensaje no se ha enviado, porque usted no tiene suscripción válida.',
+         no_available: 'No disponible',
+         no_connection: 'Sin conexión!',
+         relogin: 'iniciar sesión nuevamente',
+         trying_to_start_private_conversation: 'Intentando iniciar una conversación privada!',
+         Verified: 'Verificado',
+         Unverified: 'No verificado',
+         private_conversation_started: 'se inició una conversación privada.',
+         private_conversation_aborted: 'Conversación privada abortada!',
+         your_buddy_closed_the_private_conversation_you_should_do_the_same: 'Su amigo cerró la conversación privada! Usted debería hacer lo mismo.',
+         conversation_is_now_verified: 'La conversación es ahora verificada.',
+         verification_fails: 'Fallo la verificación.',
+         your_buddy_is_attempting_to_determine_: 'Tu amigo está tratando de determinar si él o ella está realmente hablando con usted.',
+         to_authenticate_to_your_buddy: 'Para autenticar a su amigo, ',
+         enter_the_answer_and_click_answer: 'introduce la respuesta y haga clic en Contestar.',
+         enter_the_secret: 'especifique el secreto.',
+         now_we_will_create_your_private_key_: 'Ahora vamos a crear su clave privada. Esto puede tomar algún tiempo.',
+         Authenticating_a_buddy_helps_: 'Autenticación de un amigo ayuda a garantizar que la persona que está hablando es quien él o ella está diciendo.',
+         How_do_you_want_to_authenticate_your_buddy: '¿Cómo desea autenticar {{cid_name}} (<b>{{cid_jid}}</b>)?',
+         Select_method: 'Escoja un método...',
+         Manual: 'Manual',
+         Question: 'Pregunta',
+         Secret: 'Secreto',
+         To_verify_the_fingerprint_: 'Para verificar la firma digital, póngase en contacto con su amigo a través de algún otro canal autenticado, como el teléfono.',
+         Your_fingerprint: 'Tu firma digital',
+         Buddy_fingerprint: 'firma digital de tu amigo',
+         Close: 'Cerrar',
+         Compared: 'Comparado',
+         To_authenticate_using_a_question_: 'Para autenticar mediante una pregunta, elegir una pregunta cuya respuesta se conoce sólo usted y su amigo.',
+         Ask: 'Preguntar',
+         To_authenticate_pick_a_secret_: 'Para autenticar, elija un secreto conocido sólo por usted y su amigo.',
+         Compare: 'Comparar',
+         Fingerprints: 'Firmas digitales',
+         Authentifikation: 'Autenticación',
+         Message: 'Mensaje',
+         Add_buddy: 'Añadir amigo',
+         rename_buddy: 'renombrar amigo',
+         delete_buddy: 'eliminar amigo',
+         Login: 'Iniciar Sesión',
+         Username: 'Usuario',
+         Password: 'Contraseña',
+         Cancel: 'Cancelar',
+         Connect: 'Conectar',
+         Type_in_the_full_username_: 'Escriba el usuario completo y un alias opcional.',
+         Alias: 'Alias',
+         Add: 'Añadir',
+         Subscription_request: 'Solicitud de suscripción',
+         You_have_a_request_from: 'Tienes una petición de',
+         Deny: 'Rechazar',
+         Approve: 'Aprobar',
+         Remove_buddy: 'Eliminar amigo',
+         You_are_about_to_remove_: 'Vas a eliminar a {{cid_name}} (<b>{{cid_jid}}</b>) de tu lista de amigos. Todas las conversaciones relacionadas serán cerradas.',
+         Continue: 'Continuar',
+         Please_wait: 'Espere por favor',
+         Login_failed: 'Fallo el inicio de sesión',
+         Sorry_we_cant_authentikate_: 'Lo sentimos, no podemos autentificarlo en nuestro servidor de chat. ¿Tal vez la contraseña es incorrecta?',
+         Retry: 'Reintentar',
+         clear_history: 'Borrar el historial',
+         New_message_from: 'Nuevo mensaje de',
+         Should_we_notify_you_: '¿Debemos notificarle sobre nuevos mensajes en el futuro?',
+         Please_accept_: 'Por favor, haga clic en el botón "Permitir" en la parte superior.',
+         dnd: 'No Molestar',
+         Mute: 'Desactivar sonido',
+         Unmute: 'Activar sonido',
+         Subscription: 'Suscripción',
+         both: 'ambos',
+         Status: 'Estado',
+         online: 'en línea',
+         chat: 'chat',
+         away: 'ausente',
+         xa: 'mas ausente',
+         offline: 'desconectado',
+         none: 'nadie',
+         Unknown_instance_tag: 'Etiqueta de instancia desconocida.',
+         Not_of_our_latest_keys: 'No de nuestra ultima tecla.',
+         Received_an_unreadable_encrypted_message: 'Se recibió un mensaje cifrado ilegible.',
+         Online: 'En linea',
+         Chatty: 'Hablador',
+         Away: 'Ausente',
+         Extended_away: 'Mas ausente',
+         Offline: 'Desconectado',
+         Friendship_request: 'Solicitud de amistad',
+         Confirm: 'Confirmar',
+         Dismiss: 'Rechazar',
+         Remove: 'Eliminar',
+         Online_help: 'Ayuda en línea',
+         Settings: 'Ajustes',
+         Priority: 'Prioridad',
+         Save: 'Guardar',
+         User_settings: 'Configuración de usuario'
       }
    };
 }(jQuery));
diff --git a/build/jsxc.lib.webrtc.js b/build/jsxc.lib.webrtc.js
index 8f086784..52087538 100644
--- a/build/jsxc.lib.webrtc.js
+++ b/build/jsxc.lib.webrtc.js
@@ -1,5 +1,5 @@
 /**
- * jsxc v0.7.2 - 2014-05-28
+ * jsxc v0.8.0-beta - 2014-06-27
  * 
  * 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.7.2
+ * @version 0.8.0-beta
  */
 
 /* jsxc, Strophe, SDPUtil, getUserMediaWithConstraints, setupRTC, jQuery */
@@ -173,6 +173,32 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
       },
 
       /**
+       * Add "video" button to roster
+       * 
+       * @private
+       * @memberOf jsxc.webrtc
+       * @param event
+       * @param cid cid of roster item
+       * @param data data wich belongs to cid
+       * @param el the roster item
+       */
+      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;
+         });
+
+         el.find('.jsxc_options.jsxc_left').append(videoIcon);
+
+         el.on('extra.jsxc', function() {
+            self.updateIcon(cid);
+         });
+      },
+
+      /**
        * Add "video" button to window menu.
        * 
        * @private
@@ -193,27 +219,26 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
          var div = $('<div>').addClass('jsxc_video');
          win.find('.jsxc_transfer:eq(1)').after(div);
 
-         self.updateWindow(win);
+         self.updateIcon(jsxc.jidToCid(win.data('jid')));
       },
 
       /**
-       * Enable or disable "video" button and assign full jid.
+       * Enable or disable "video" icon and assign full jid.
        * 
        * @memberOf jsxc.webrtc
-       * @param win jQuery window object
+       * @param cid CSS conform jid
        */
-      updateWindow: function(win) {
-         if (!win || win.length === 0) {
-            return;
-         }
+      updateIcon: function(cid) {
 
          var self = jsxc.webrtc;
-         var jid = win.data('jid');
-         var li = win.find('.jsxc_video');
+         var win = jsxc.gui.getWindow(cid);
+         var jid = win.data('jid') || jsxc.storage.getUserItem('buddy_' + cid).jid;
+
+         var el = win.find('.jsxc_video').add('#' + cid + ' .jsxc_video');
 
          // only start video call to a full jid
          if (Strophe.getResourceFromJid(jid) === null) {
-            var cid = jsxc.jidToCid(jid);
+
             var res = jsxc.storage.getUserItem('buddy_' + cid).res;
 
             if (Array.isArray(res) && res.length === 1) {
@@ -221,19 +246,19 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
             }
          }
 
-         li.off('click');
+         el.off('click');
 
          if (self.conn.caps.hasFeatureByJid(jid, self.reqVideoFeatures)) {
-            li.click(function() {
+            el.click(function() {
                self.startCall(jid);
             });
-            li.removeClass('jsxc_disabled');
+            el.removeClass('jsxc_disabled');
 
-            li.attr('title', jsxc.translate('%%Start video call%%'));
+            el.attr('title', jsxc.translate('%%Start video call%%'));
          } else {
-            li.addClass('jsxc_disabled');
+            el.addClass('jsxc_disabled');
 
-            li.attr('title', jsxc.translate('%%Video call not possible.%%'));
+            el.attr('title', jsxc.translate('%%Video call not possible.%%'));
          }
       },
 
@@ -250,7 +275,7 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
          var bJid = Strophe.getBareJidFromJid(from);
 
          if (self.chatJids[bJid] !== from) {
-            self.updateWindow(jsxc.gui.getWindow(jsxc.jidToCid(bJid)));
+            self.updateIcon(jsxc.jidToCid(bJid));
             self.chatJids[bJid] = from;
          }
       },
@@ -312,11 +337,8 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
        */
       onCaps: function(event, jid) {
          var self = jsxc.webrtc;
-         var win = jsxc.gui.getWindow(jsxc.jidToCid(jid));
 
-         if (win.length > 0) {
-            self.updateWindow(win);
-         }
+         self.updateIcon(jsxc.jidToCid(jid));
       },
 
       /**
@@ -799,13 +821,14 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
       if (RTC !== null) {
          RTCPeerconnection = RTC.peerconnection;
 
+         $(document).on('add.roster.jsxc', jsxc.webrtc.onAddRosterItem);
          $(document).on('init.window.jsxc', jsxc.webrtc.initWindow);
          $(document).on('attached.jsxc', jsxc.webrtc.init);
       }
    });
 
    $.extend(jsxc.l10n.en, {
-      Please_allow_access_to_microphone_and_camera: 'Please allow access to microphone and camera.',
+      Please_allow_access_to_microphone_and_camera: 'Please click the "Allow" button at the top, to allow access to microphone and camera.',
       Incoming_call: 'Incoming call',
       from: 'from',
       Do_you_want_to_accept_the_call_from: 'Do you want to accept the call from',
@@ -826,7 +849,7 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
    });
 
    $.extend(jsxc.l10n.de, {
-      Please_allow_access_to_microphone_and_camera: 'Bitte erlaube den Zugriff auf Kamera und Mikrofon.',
+      Please_allow_access_to_microphone_and_camera: 'Bitte klick auf den "Zulassen" Button oben, um den Zugriff auf Kamera und Mikrofon zu erlauben.',
       Incoming_call: 'Eingehender Anruf',
       from: 'von',
       Do_you_want_to_accept_the_call_from: 'Möchtest Du den Anruf annehmen von',
@@ -845,4 +868,25 @@ jsxc.gui.template.videoWindow = '<div class="jsxc_webrtc">\
       Video_call_not_possible: 'Videoanruf nicht verfügbar',
       Start_video_call: 'Starte Videoanruf'
    });
+
+   $.extend(jsxc.l10n.es, {
+      Please_allow_access_to_microphone_and_camera: 'Por favor, permitir el acceso al micrófono y la cámara.',
+      Incoming_call: 'Llamada entrante',
+      from: 'de',
+      Do_you_want_to_accept_the_call_from: 'Desea aceptar la llamada de',
+      Reject: 'Rechazar',
+      Accept: 'Aceptar',
+      hang_up: 'colgar',
+      snapshot: 'instantánea',
+      mute_my_audio: 'silenciar mi audio',
+      pause_my_video: 'pausar mi vídeo',
+      fullscreen: 'pantalla completa',
+      Info: 'Info',
+      Local_IP: 'IP local',
+      Remote_IP: 'IP remota',
+      Local_Fingerprint: 'Firma digital local',
+      Remote_Fingerprint: 'Firma digital remota',
+      Video_call_not_possible: 'Llamada de vídeo no es posible',
+      Start_video_call: 'Iniciar llamada de vídeo'
+   });
 }(jQuery));
diff --git a/build/jsxc.webrtc.css b/build/jsxc.webrtc.css
index 79470ccf..06c908e2 100644
--- a/build/jsxc.webrtc.css
+++ b/build/jsxc.webrtc.css
@@ -115,17 +115,17 @@ div:fullscreen.jsxc_localvideo {
 
 .jsxc_chatarea {
 	position: relative;
-	height: 255px;
+	height: 270px;
 	display: none;
 	background-color: #A4A4A4;
 }
 
-.jsxc_chatarea ul {
+.jsxc_chatarea > ul {
 	position: absolute;
 	left: 50%;
 	top: 0px;
-	width: 200px;
-	height: 255px;
+	width: 250px;
+	height: 270px;
 	list-style: none;
 	padding: 0px;
 	margin: 0px 0px 0px -100px;
@@ -153,18 +153,21 @@ div:fullscreen.jsxc_localvideo {
 }
 
 div.jsxc_video {
-   padding: 3px;
-   width: 17px;
-   height: 17px;
    background-image: url('img/camera_icon_grey.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 15px 15px;
-   cursor: pointer;
-   float: left;
+}
+
+div.jsxc_video:not(.jsxc_disabled):hover, #jsxc_buddylist .jsxc_options .jsxc_video {
+    background-image: url('img/camera_icon_white.svg');
 }
 
 div.jsxc_video.jsxc_disabled {
 	opacity: 0.5;
-	cursor: default;
+	cursor: default !important;
+}
+
+#jsxc_buddylist .jsxc_options .jsxc_video.jsxc_disabled {
+	opacity: 0.2;
 }
\ No newline at end of file
diff --git a/build/sound/Ping1.mp3 b/build/sound/Ping1.mp3
new file mode 100644
index 00000000..d429eee7
--- /dev/null
+++ b/build/sound/Ping1.mp3
diff --git a/build/sound/Rotary-Phone6.mp3 b/build/sound/Rotary-Phone6.mp3
new file mode 100644
index 00000000..c978c8d1
--- /dev/null
+++ b/build/sound/Rotary-Phone6.mp3
diff --git a/build/sound/credential b/build/sound/credential
new file mode 100644
index 00000000..522d7cee
--- /dev/null
+++ b/build/sound/credential
@@ -0,0 +1,11 @@
+Rotary-Phone6.mp3
+===
+Creator: David English
+Source: http://www.beepzoid.com/old-phones/
+License: unknown
+
+Ping1.mp3
+===
+Creator: CameronMusic
+Source: https://soundcloud.com/freefilmandgamemusic/ping-1?in=freefilmandgamemusic/sets/free-notification-sounds-and
+License: cc 3.0, http://creativecommons.org/licenses/by/3.0/
\ No newline at end of file
diff --git a/build/sound/incomingMessage.wav b/build/sound/incomingMessage.wav
new file mode 100644
index 00000000..012dbab1
--- /dev/null
+++ b/build/sound/incomingMessage.wav
diff --git a/jsxc.lib.js b/jsxc.lib.js
index 4fc27353..02acedd4 100755
--- a/jsxc.lib.js
+++ b/jsxc.lib.js
@@ -1388,7 +1388,7 @@ var jsxc;
             });
          });
 
-         $('#jsxc_dialog form').submit(function(e) {
+         $('#jsxc_dialog form').submit(function() {
 
             var self = $(this);
             var data = {};
diff --git a/jsxc.lib.webrtc.js b/jsxc.lib.webrtc.js
index abf909cb..c772a948 100644
--- a/jsxc.lib.webrtc.js
+++ b/jsxc.lib.webrtc.js
@@ -173,9 +173,9 @@ 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(jid);
+            self.startCall(data.jid);
             return false;
          });
 
diff --git a/package.json b/package.json
index b4b2a5af..824798a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "jsxc",
-   "version": "0.7.2",
+   "version": "0.8.0-beta",
    "description": "Real-time chat app",
    "homepage": "http://www.jsxc.org/",
    "bugs": "https://github.com/sualko/jsxc/issues",