X-Git-Url: https://cgit.babelmonkeys.de/?a=blobdiff_plain;f=scripts%2Fbasic.js;h=4b0c0d0956c2fdae27853af2aa6b2facc1c18492;hb=HEAD;hp=a4b4a186717282899f116943ca279dd01739a530;hpb=9c8e638b6a3ff798e86cdfc576336ad4faced97c;p=socialXMPP.git

diff --git a/scripts/basic.js b/scripts/basic.js
index a4b4a18..4b0c0d0 100644
--- a/scripts/basic.js
+++ b/scripts/basic.js
@@ -1,16 +1,19 @@
-var NS_VCARD = 'vcard-temp';
-var NS_CAPS= 'http://jabber.org/protocol/caps';
-var NS_PEP = 'http://jabber.org/protocol/pubsub#event';
-var NS_TUNE = 'http://jabber.org/protocol/tune';
-var BOSH_SERVICE = 'http://localhost:5280/http-bind/';
+var DEBUG = false;
+var BOSH_SERVICE = '/http-bind/';
 
-var connection   = null;
-var show_log     = true;
+Strophe.addNamespace('VCARD', 'vcard-temp');
+Strophe.addNamespace('CAPS', 'http://jabber.org/protocol/caps');
+Strophe.addNamespace('PEP', 'http://jabber.org/protocol/pubsub#event');
+Strophe.addNamespace('TUNE', 'http://jabber.org/protocol/tune');
 
-var features = new Array(NS_CAPS, NS_TUNE+'+notify', Strophe.NS.DISCO_INFO);
+var localJID = null;
+var connection = null;
+var show_log = true;
+
+var features = [Strophe.NS.CAPS, Strophe.NS.TUNE + '+notify', Strophe.NS.DISCO_INFO];
 var appName = 'socialXMPP';
 
-var roster = new Array();
+var roster = [];
 
 function log(msg) {
     var entry = $('<div></div>').append(document.createTextNode(msg));
@@ -30,45 +33,75 @@ function jid2id(jid) {
     return jid.split('@').join('-').split('.').join('-');
 }
 
+function genCaps() {
+    var S = '', i;
+    S += 'client/web//' + appName + '<';
+    features.sort();
+    for (i = 0; i < features.length; i++) {
+        S += features[i] + '<';
+    }
+    return b64_sha1(S);
+}
+
 function populateVCard(e, jid) {
-    var easy_cases = new Array('FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID');
-    for (var i=0; i<easy_cases.length; i++) {
-	var text = e.getElementsByTagName(easy_cases[i])[0];
-	if (text) {
-	    text = Strophe.getText(text);
-	    $('#'+easy_cases[i]).append(Strophe.xmlTextNode(text));
-	}
+    var easy_cases = ['FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID'], i, text, avatar, mime, binval;
+    for (i = 0; i < easy_cases.length; i++) {
+        text = e.getElementsByTagName(easy_cases[i])[0];
+        if (text) {
+            text = Strophe.getText(text);
+            $('#' + easy_cases[i]).append(Strophe.xmlTextNode(text));
+        }
     }
-    var avatar = e.getElementsByTagName('PHOTO')[0];
+    avatar = e.getElementsByTagName('PHOTO')[0];
     if (avatar) {
-	var mime = Strophe.getText(avatar.getElementsByTagName('TYPE')[0]);
-	var binval = Strophe.getText(avatar.getElementsByTagName('BINVAL')[0]);
+        mime = Strophe.getText(avatar.getElementsByTagName('TYPE')[0]);
+        binval = Strophe.getText(avatar.getElementsByTagName('BINVAL')[0]);
 
-	$("#"+jid2id(jid)+" img").attr('src', 'data:'+mime+';base64,'+binval);
-	$("#PHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
+        $("#"+jid2id(jid)+" img").attr('src', 'data:'+mime+';base64,'+binval);
+        $("#PHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
     }
     $(e).find('TEL:has(HOME)').each(function() {
+        $('#TELHOME').append(' ');
         $('#TELHOME').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
     });
     $(e).find('TEL:has(WORK)').each(function() {
+        $('#TELWORK').append(' ');
         $('#TELWORK').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
     });
     $(e).find('EMAIL:has(HOME)').each(function() {
+        $('#EMAILHOME').append(' ');
         $('#EMAILHOME').append(Strophe.xmlTextNode($(this).find('USERID').text()));
     });
     $(e).find('EMAIL:has(WORK)').each(function() {
+        $('#EMAILWORK').append(' ');
         $('#EMAILWORK').append(Strophe.xmlTextNode($(this).find('USERID').text()));
     });
+
+    if (!roster[jid2id(jid)].tune.isEmpty()) {
+        $('#vCard ul').append('<li id="tune"><span class="vCardName">Tune: </span>Listening to '+
+                        roster[jid2id(jid)].tune.title + ' by ' + roster[jid2id(jid)].tune.artist +
+                        ' from ' + roster[jid2id(jid)].tune.source + '</li>');
+    }
+
+    $('#vCard').click(function () {
+        $('#vCard_container').slideUp("normal", function() {
+                $('#box-overlay').hide();
+        });
+        roster[jid2id(jid)].visible = false;
+      });
+
+    $('#box-overlay').show();
     $('#vCard_container').slideDown("normal");
+    roster[jid2id(jid)].visible = true;
 }
 
 function _cbVCard(e) {
     var jid = e.getAttribute('from');
-    if (roster[jid2id(jid)].vCard == "") {
-	roster[jid2id(jid)].vCard = e;
+    if (roster[jid2id(jid)].vCard === "") {
+        roster[jid2id(jid)].vCard = e;
     }
     if ($('#vCard_container').is(':visible')) {
-	$('#vCard_container').hide();
+        $('#vCard_container').hide();
     }
     $('#vCard_container').empty();
     $('#vCard_container').load('vCard.html #vCard', function() {populateVCard(e, jid);});
@@ -77,25 +110,22 @@ function _cbVCard(e) {
 }
 
 function _cbOwnVCard(e) {
+    var easy_cases = ['FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID'], i, text, avatar, mime, binval;
     $('#ownInfo').empty();
-    $('#ownInfo').load('vCard.html #vCard', function() {
-    $('#ownInfo').find('div').each(function() {
-	$(this).attr('id', 'own' + $(this).attr('id'));
-    });
-    var easy_cases = new Array('FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID');
-    for (var i=0; i<easy_cases.length; i++) {
-	var text = e.getElementsByTagName(easy_cases[i])[0];
-	if (text) {
-	    text = Strophe.getText(text);
-	    $('#own'+easy_cases[i]).append(Strophe.xmlTextNode(text));
-	}
+    $('#ownInfo').load('vCard.html #ownvCard', function() {
+    for (i = 0; i < easy_cases.length; i++) {
+        text = e.getElementsByTagName(easy_cases[i])[0];
+        if (text) {
+            text = Strophe.getText(text);
+            $('#own' + easy_cases[i]).append(Strophe.xmlTextNode(text));
+        }
     }
-    var avatar = e.getElementsByTagName('PHOTO')[0];
+    avatar = e.getElementsByTagName('PHOTO')[0];
     if (avatar) {
-	var mime = Strophe.getText(avatar.getElementsByTagName('TYPE')[0]);
-	var binval = Strophe.getText(avatar.getElementsByTagName('BINVAL')[0]);
+        mime = Strophe.getText(avatar.getElementsByTagName('TYPE')[0]);
+        binval = Strophe.getText(avatar.getElementsByTagName('BINVAL')[0]);
 
-	$("#ownPHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
+        $("#ownPHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
     }
     $(e).find('TEL:has(HOME)').each(function() {
         $('#ownTELHOME').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
@@ -116,177 +146,201 @@ function _cbOwnVCard(e) {
 }
 
 function getVCard(jid) {
-    var id = 'getvCard'+jid2id(jid);
-    if (roster[jid2id(jid)].vCard == "") {
-	var vCardiq = $iq({'to':jid,
-			'id':id,
-			'type':'get'}
-		).c('vCard', {'xmlns':NS_VCARD});
-	connection.addHandler(_cbVCard, null, 'iq', 'result', id);
-	connection.send(vCardiq.tree());
+    var id = connection.getUniqueId('vCardGet'), vCardiq;
+    if (roster[jid2id(jid)].vCard === "") {
+        vCardiq = $iq({'to':jid,
+                        'id':id,
+                        'type':'get'}
+                ).c('vCard', {'xmlns': Strophe.NS.VCARD});
+        connection.addHandler(_cbVCard, null, 'iq', 'result', id);
+        connection.send(vCardiq.tree());
     } else {
-	_cbVCard(roster[jid2id(jid)].vCard);
+        _cbVCard(roster[jid2id(jid)].vCard);
     }
 }
 
 function getOwnInfo() {
-    var id = 'getvCard'+jid2id(connection.jid);
-    var vCardiq = $iq({'to': Strophe.getBareJidFromJid(connection.jid),
-		'id': id,
-		'type': 'get'}
-	).c('vCard', {'xmlns':NS_VCARD});
+    var id = connection.getUniqueId('vCardGet'),
+    vCardiq = $iq({'id': id, 'type': 'get'}
+        ).c('vCard', {'xmlns': Strophe.NS.VCARD});
     connection.addHandler(_cbOwnVCard, null, 'iq', 'result', id);
     connection.send(vCardiq.tree());
 }
 
+function createBubble(jid) {
+    var id = jid2id(jid) + 'Chat';
+    $('body').append('<div class="chat" id="' + id + '" onmousedown="startDrag(this)"><a href="#" onclick="$(' + "'#" + id + "'" + ').hide()">Close</a>' +
+                    '<span class ="chatTitle"> ' + jid + '</span><p></p></div>');
+    $('#' + id).append('<form id="' + id + 'Form" class="chatForm" onsubmit="return sendMessage(this, \'' + jid + '\');" action="#"><input type="text" name="text" id="' + id + 'Text" class="chatForm" /></form>');
+    if ($('#' + jid2id(jid)).length > 0) {
+        $('#' + id).css( 'top', $('#' + jid2id(jid)).position().top + 40);
+        $('#' + id).css( 'left', $('#' + jid2id(jid)).position().left + 40);
+    }
+}
+
 function addFriend(jid, nick) {
     roster[jid2id(jid)] = new Buddy(nick, jid);
-    $('#friends').append('<div class="friend" id="'+jid2id(jid)+'"><img src="imgs/none.png" /><br /><span class="nick">'+nick+'</span></div>');
-    $('#'+jid2id(jid)).click(function() {
-    	getVCard(jid);
+    $('#friends').append('<div class="friend" id="'+jid2id(jid)+'"><img src="imgs/none.png" /><br /><a class="nick">'+nick+'</a></div>');
+    $('#' + jid2id(jid) + ' img').click(function() {
+        getVCard(jid);
+    });
+    $('#' + jid2id(jid) + ' a').click(function() {
+        var id = jid2id(jid) + 'Chat';
+        if ($('#' + id).length <= 0) {
+            createBubble(jid);
+        }
+        $('#' + id).show();
     });
+
+}
+
+function handleTune(jid, tuneXML) {
+    var tune = new Tune();
+    if (tuneXML.childNodes.length > 0) {
+        tune.artist = Strophe.getText(tuneXML.getElementsByTagName('artist')[0]);
+        tune.length= Strophe.getText(tuneXML.getElementsByTagName('length')[0]);
+        tune.rating= Strophe.getText(tuneXML.getElementsByTagName('rating')[0]);
+        tune.source= Strophe.getText(tuneXML.getElementsByTagName('source')[0]);
+        tune.title= Strophe.getText(tuneXML.getElementsByTagName('title')[0]);
+        tune.track= Strophe.getText(tuneXML.getElementsByTagName('track')[0]);
+        tune.uri= Strophe.getText(tuneXML.getElementsByTagName('uri')[0]);
+        if (roster[jid2id(jid)].visible === true) {
+            if ( $('#tune').length > 0) {
+                $('#tune').empty();
+                $('#tune').append('<span class="vCardName">Tune: </span>');
+                $('#tune').append(Strophe.xmlTextNode('Listening to '+ tune.title +
+                        ' by ' + tune.artist + ' from ' + tune.source));
+            } else {
+                $('#vCard ul').append('<li id="tune"><span class="vCardName">Tune: </span>Listening to '+ tune.title +
+                        ' by ' + tune.artist + ' from ' + tune.source + '</li>');
+            }
+        }
+    } else {
+        $('#tune').remove();
+    }
+    roster[jid2id(jid)].tune = tune;
+}
+
+function _cbPEP(e) {
+    var from = e.getAttribute('from'), items;
+    if (Strophe.getBareJidFromJid(from) == Strophe.getBareJidFromJid(connection.jid)) {
+        return true; // Drop own PEP events
+    }
+    items = e.getElementsByTagName('items')[0];
+    // Handle Tune
+    if (items.getAttribute('node') == Strophe.NS.TUNE) {
+        handleTune(from, items.getElementsByTagName('tune')[0]);
+    }
+    return true;
 }
 
 function _cbRoster(e) {
-    var query = e.getElementsByTagName('query')[0];
-    var entries = query.getElementsByTagName('item');
-    for (var item=0; item<entries.length; item++) {
-	nick = entries[item].getAttribute('name');
-	if (!nick) {
-	    nick = entries[item].getAttribute('jid').split('@')[0];
-	}
-	addFriend(entries[item].getAttribute('jid'), nick);
+    var query = e.getElementsByTagName('query')[0],
+    entries = query.getElementsByTagName('item'), item, nick, initialPresence;
+    for (item = 0; item < entries.length; item++) {
+        nick = entries[item].getAttribute('name');
+        if (!nick) {
+            nick = entries[item].getAttribute('jid').split('@')[0];
+        }
+        addFriend(entries[item].getAttribute('jid'), nick);
     }
-    connection.addHandler(_cbPEP, NS_PEP, 'message');
-    var initialPresence = $pres().c('c', {xmlns: NS_CAPS, hash: 'sha-1', node: 'http://jabber.babelmonkeys.de', ver: genCaps()}).up();
+    connection.addHandler(_cbPEP, Strophe.NS.PEP, 'message');
+    initialPresence = $pres().c('show').t('online').up().c('status').t('Hy, I am an socialXMPP instance').up().c('priority').t('-1').up().c('c', {xmlns: Strophe.NS.CAPS, hash: 'sha-1', node: 'http://jabber.babelmonkeys.de', ver: genCaps()}).up();
     connection.send(initialPresence.tree());
 
+    $('#friends').css('display', 'table');
+
     return false;
 }
 
 function getRoster() {
-    var id = 'getRoster';
+    var id, rosteriq;
+    id = connection.getUniqueId('roster');
 
-    var rosteriq = $iq({'id':id,
-			'type':'get'}
-	).c('query', {'xmlns':Strophe.NS.ROSTER});
+    rosteriq = $iq({'id':id,
+                        'type':'get'}
+        ).c('query', {'xmlns':Strophe.NS.ROSTER});
 
     connection.addHandler(_cbRoster, null, 'iq', 'result', id);
     connection.send(rosteriq.tree());
 }
 
 function _cbDisco(e) {
-    var id = e.getAttribute('id');
-    var jid = e.getAttribute('from');
+    var i, id, jid, response, query, response;
+    id = e.getAttribute('id');
+    jid = e.getAttribute('from');
 
-    var response = $iq({id: id, type: 'result', to: jid});
-    var query = response.c('query', {xmlns: Strophe.NS.DISCO_INFO})
+    if (jid) {
+        response = $iq({id: id, type: 'result', to: jid});
+    } else {
+        response = $iq({id: id, type: 'result'});
+    }
+    query = response.c('query', {xmlns: Strophe.NS.DISCO_INFO});
     query.c('identity', {category: 'client', type: 'web', name: appName}).up();
-    for (var i = 0; i < features.length; i++) {
-	query.c('feature', {'var': features[i]}).up();
+    for (i = 0; i < features.length; i++) {
+        query.c('feature', {'var': features[i]}).up();
     }
     connection.send(response.tree());
 
     return true;
 }
 
+function sendMessage(form, to) {
+    var id, message;
+    if (form.text.value) {
+        id = jid2id(to) + 'Chat';
+        message = $msg({'type': 'chat', 'to': to}).c('body').t(form.text.value);
+        connection.send(message.tree());
+        if ($('#' + id + ' p *').length > 0) {
+            $('#' + id + ' p').append('<br/>');
+        }
+        $('#' + id + ' p').append('<span class="receiver">' + localJID + ': </span>');
+        $('#' + id + ' p').append(form.text.value);
+        form.text.value = '';
+    }
+
+    return false;
+}
+
 function _cbMessage(msg) {
-    var jid = $(msg).attr('from');
-    var id = jid2id($(msg).attr('from')) + 'Chat';
-    var body = $(msg).find('body:first').text();
+    var id, jid, body;
+    if ($(msg).attr('type') != 'chat') {
+        return true;
+    }
+    jid = $(msg).attr('from');
+    id = jid2id(jid) + 'Chat';
+    body = $(msg).find('body:first').text();
     body = escape(body);
     body = body.replace(/%0A/g, '<br/>');
     body = body.replace(/%3C/g, '&lt;');
     body = body.replace(/%3E/g, '&gt;');
     body = body.replace(/%26/g, '&amp;');
     body = unescape(body);
-    if ($('#' + id).length > 0) {
-	$('#' + id + ' p').append('<br/>');
-	$('#' + id + ' p').append('<span class="sender">' + jid + ': </span>');
-	$('#' + id + ' p').append(body);
-    } else {
-	$('body').append('<div class="chat" id="' + id + '"><p><span class="sender">' + jid + ': </span>' + body + '</p></div>');
+    if ($('#' + id).length <= 0) {
+        createBubble(jid);
     }
-
-    return true;
-}
-
-function genCaps() {
-    var S = '';
-    S += 'client/web//' + appName + '<'
-    features.sort();
-    for (var i = 0; i < features.length; i++) {
-	S += features[i] + '<';
+    if ($('#' + id + ' p *').length > 0) {
+        $('#' + id + ' p').append('<br/>');
     }
-    return b64_sha1(S);
-}
+    $('#' + id + ' p').append('<span class="sender">' + jid + ': </span>');
+    $('#' + id + ' p').append(body);
+    $('#' + id).show();
 
-function _cbPEP(e) {
-    var from = e.getAttribute('from');
-    if (Strophe.getBareJidFromJid(from) == Strophe.getBareJidFromJid(connection.jid)) {
-	return true; // Drop own PEP events
-    }
-    var items = e.getElementsByTagName('items')[0];
-    // Handle Tune
-    if (items.getAttribute('node') == NS_TUNE) {
-	var tune = new Tune();
-	if (items.getElementsByTagName('tune')[0].childNodes.length > 0) {
-	    tune.artist = Strophe.getText(items.getElementsByTagName('artist')[0]);
-	    tune.length= Strophe.getText(items.getElementsByTagName('length')[0]);
-	    tune.rating= Strophe.getText(items.getElementsByTagName('rating')[0]);
-	    tune.source= Strophe.getText(items.getElementsByTagName('source')[0]);
-	    tune.title= Strophe.getText(items.getElementsByTagName('title')[0]);
-	    tune.track= Strophe.getText(items.getElementsByTagName('track')[0]);
-	    tune.uri= Strophe.getText(items.getElementsByTagName('uri')[0]);
-	    if ( $('#'+jid2id(from)+' .tune').length > 0 ) {
-		$('#'+jid2id(from)+' .tune').empty();
-		$('#'+jid2id(from)+' .tune').append(Strophe.xmlTextNode('Listening to '+ tune.title + ' by ' + tune.artist + ' from ' + tune.source));
-	    } else {
-		$('#'+jid2id(from)).append('<br /><span class="tune">Listening to '+ tune.title + ' by ' + tune.artist + ' from ' + tune.source + '</span>');
-	    }
-	} else {
-	    if ( $('#'+jid2id(from)+' .tune').length > 0 ) {
-		$('#'+jid2id(from)+' .tune').empty();
-	    }
-	}
-	roster[jid2id(from)].tune = tune;
-    }
     return true;
 }
 
-function onConnect(status) {
-    if (status == Strophe.Status.CONNECTING) {
-	log('Strophe is connecting.');
-    } else if (status == Strophe.Status.CONNFAIL) {
-	log('Strophe failed to connect.');
-	showConnect();
-    } else if (status == Strophe.Status.DISCONNECTING) {
-	log('Strophe is disconnecting.');
-    } else if (status == Strophe.Status.DISCONNECTED) {
-	log('Strophe is disconnected.');
-	showConnect();
-    } else if (status == Strophe.Status.AUTHFAIL) {
-	log('Authentication failed.');
-	connection.disconnect();
-	showConnect();
-    } else if (status == Strophe.Status.CONNECTED) {
-	log('Strophe is connected.');
-	getOwnInfo();
-	getRoster();
-	connection.addHandler(_cbDisco, Strophe.NS.DISCO_INFO, 'iq', 'get');
-	connection.addHandler(_cbMessage, Strophe.NS.CLIENT, 'message');
-    }
-}
-
 function showConnect() {
-    var jid = $('#jid');
-    var pass = $('#pass');
-    var button = $('#connect').get(0);	
+    var jid, pass, button;
+    jid = $('#jid');
+    pass = $('#pass');
+    button = $('#connect').get(0);
 
     $('#log').empty();
+    $('#ownInfo').empty();
     $('#ownInfo').hide();
     $('#vCard_container').empty();
     $('#friends').empty();
+    $('#friends').hide();
     $('.chat').remove();
     $('label').show();
     jid.show();
@@ -295,10 +349,36 @@ function showConnect() {
     return false;
 }
 
+function onConnect(status) {
+    if (status == Strophe.Status.CONNECTING) {
+        log('Strophe is connecting.');
+    } else if (status == Strophe.Status.CONNFAIL) {
+        log('Strophe failed to connect.');
+        showConnect();
+    } else if (status == Strophe.Status.DISCONNECTING) {
+        log('Strophe is disconnecting.');
+    } else if (status == Strophe.Status.DISCONNECTED) {
+        log('Strophe is disconnected.');
+        showConnect();
+    } else if (status == Strophe.Status.AUTHFAIL) {
+        log('Authentication failed');
+        if (connection) {
+            connection.disconnect();
+        }
+    } else if (status == Strophe.Status.CONNECTED) {
+        log('Strophe is connected.');
+        getOwnInfo();
+        getRoster();
+        connection.addHandler(_cbDisco, Strophe.NS.DISCO_INFO, 'iq', 'get');
+        connection.addHandler(_cbMessage, Strophe.NS.CLIENT, 'message');
+    }
+}
+
 function showDisconnect() {
-    var jid = $('#jid');
-    var pass = $('#pass');
-    var button = $('#connect').get(0);	
+    var jid, pass, button;
+    jid = $('#jid');
+    pass = $('#pass');
+    button = $('#connect').get(0);
 
     button.value = 'disconnect';
     pass.hide();
@@ -308,32 +388,69 @@ function showDisconnect() {
 }
 
 $(document).ready(function () {
+    var button, jid, pass;
+    if (DEBUG) {
+        $('#log_container').show();
+    }
     connection = new Strophe.Connection(BOSH_SERVICE);
     connection.rawInput = rawInput;
     connection.rawOutput = rawOutput;
 
     $("#log_toggle").click(function () {
-	$("#log").toggle();	
-      });
-      
-    $('#vCard_container').click(function () {
-        $('#vCard_container').slideUp("normal");
+        $("#log").toggle();
       });
 
     $('#cred').bind('submit', function () {
-	var button = $('#connect').get(0);
-	var jid = $('#jid');
-	var pass = $('#pass');	
-	
-	if (button.value == 'connect') {
- 	    showDisconnect();
-	    connection.connect(jid.get(0).value,
-			       pass.get(0).value,
-			       onConnect);
-	} else {
-	    connection.disconnect();
-	    showConnect();
-	}
-	return false;
+        button = $('#connect').get(0);
+        jid = $('#jid');
+        pass = $('#pass');
+        localJID = jid.get(0).value;
+
+        if (button.value == 'connect') {
+            showDisconnect();
+            connection.connect(localJID,
+                               pass.get(0).value,
+                               onConnect);
+        } else {
+            connection.disconnect();
+        }
+        return false;
     });
 });
+
+// Element moving
+var dragElement = null;
+var mouseX = 0;
+var mouseY = 0;
+var offX = 0;
+var offY = 0;
+
+function startDrag(element) {
+    dragElement = element;
+    offX = mouseX - dragElement.offsetLeft;
+    offY = mouseY - dragElement.offsetTop;
+}
+
+function doDrag(eve) {
+    mouseX = eve.pageX;
+    mouseY = eve.pageY;
+
+    if (dragElement) {
+        dragElement.style.left = (mouseX - offX) + 'px';
+        dragElement.style.top = (mouseY - offY) + 'px';
+    }
+}
+
+function stopDrag(eve) {
+    dragElement = null;
+}
+
+onunload = function() {
+    if (connection) {
+        connection.disconnect();
+    }
+};
+
+onmousemove = doDrag;
+onmouseup = stopDrag;
+