wss://node.dev.seoheap.com:6443<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
var useragent='test';

jQuery(document).ready(function($) {
    var content=$('#screen');
	var opened=false;
    var ws=null;
	var attempts=0;
	var sendqueue={};
	var messid=0;
	var timer=null;
	
	var send=function(obj,queue) {
		var j=JSON.stringify(obj);
		if (!ws) {
			if (queue)
				sendqueue[messid]=obj;
			opensocket();
			return;
		}
		ws.send(j);
		messid+=1;
	}

	var opensocket=function(cb) {
		ws=new WebSocket("wss:\/\/node.dev.seoheap.com:6443");
	    ws.onopen=function() {
			attempts=0;
    	    console.log('Connected');
			opened=true;
			timer=setInterval(function() {
				send({task:'poll'});
			},10000);
			send({task:'login',group:['Sales'],client:'seoheap',uid:42,browser:useragent,key:'password',online:1},false);
    	};
		ws.onclose=function() {
			console.log(arguments);
			if (timer)
				clearInterval(timer);
			timer=null;
			ws=null;
		}
    	ws.onmessage = function(msg) {
       		console.log('Received message from server: ' + msg.data);
        	addMessage(msg.data);
    	}
		

	}
	
	opensocket();
	
	function status(m) {
		console.log(m);
	}
	var cringing=0;
	var showtitle='Ring Ring....';
	
	function triggerringing() {
		if (cringing!=0)
			return;
		cringing=setInterval(function() {
			if (document.title.indexOf(showtitle)==-1)
				document.title=showtitle+document.title;
			else
				document.title=document.title.replace(showtitle,'');
			console.log('Ring Ring');
			$('#chatbox').toggleClass('ringring',!$('#chatbox').hasClass('ringring'));
		},800);
		$('#chatbox').addClass('isringing');
	}
	function triggerstopringing() {
		if (cringing==0)
			return;
		if (document.title.indexOf(showtitle)!=-1)
			document.title=document.title.replace(showtitle,'');
		clearInterval(cringing);
		cringing=0;
		$('#chatbox').removeClass('isringing').removeClass('ringring');
	}
	function ringing(j) {
		var d=$('<div class="ringing"/>');
		d.attr('data-operator',j.opid);
		d.attr('data-ringingid',j.id);
		var r=$('<div class="answer"><img src="/images/ringing.gif"/></div>');
		r.click(function() {
			send({task:'answer',id:j.id,opid:j.opid});
			d.removeClass('ringing');
			boxchanged();
		});
		d.append(r);
		$('#sessions').append(d);
		boxchanged();
	}
	function stopringing(d) {
		$('#sessions > div.ringing[data-ringingid="'+d.id+'"]').remove();
		boxchanged();
	}
	function boxchanged() {
		if ($('#sessions .ringing').length==0) {
			$('#chatbox').removeClass('isringing');
			triggerstopringing();
		} else {
			triggerringing();		
		}
	}
	function answered(j) {
		var i=$('#sessions > div[data-ringingid="'+j.ringingid+'"]');
		if (i.length==0)
			return;
		i.addClass('answered');
		i.removeAttr('data-ringingid');
		i.attr('data-chatid',j.id);
	}
    function addMessage(message,waiting) {
		var j=JSON.parse(message);
		if (!j || !j.task)
			return;
		switch (j.task) {
			case 'ringing':
				ringing(j);
				break;				
			case 'alreadyanswered':
				status('Already Answered');
				break;
			case 'stopringing':
				stopringing(j);
				break;				
			case 'connected':
				status('Connected'+((j.name) ? ' with '+j.name : ''));
				break;
			case 'closed':
				status('Closed');
				break;
			case 'answered':
				answered(j);
				break;
			case 'theyretyping':
				status('Typing');
				break;
			case 'nottyping':
				status('Not Typing');			
		}
		console.log(j);
        //content.prepend('<p><span>' + message + '</span></p>');
    }
});
</script>

<style>
#chatbox {
	position:fixed;
	bottom:0px;
	left:30px;
	padding:10px;
	border:1px solid #06F;
}
#chatbox.minimized #sessions {
	display:none;	
}
#chathead > h3 {
	display:block;
	margin:0;
}
#chatbox.minimized.ringring #chathead > h3 {
	background:#06F;
	color:#fff;
}
#chatbox.minimized #chathead > h3 {
	display:block;
	cursor:pointer;
}
#chatbox.minimized .buttons {
	display:none;
}
.answer {
	display:none;	
}
.ringing > .answer {
	display:block;	
}
</style>
<div id="chatbox" class="minimized">
<div id="chathead">
<h3>Chat</h3>
<div class="buttons"></div>
</div>
<div id="sessions">
</div>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#chathead > h3').click(function() {
		var c=$('#chatbox');
		c.toggleClass('minimized');
		if (c.hasClass('ringing')) {
			var tab=$('#sessions > .ringing:eq(0)');
		}
	});
});
</script>