/* 
	Author: Jelle Akkerman
*/

var itemsQueue = {};
var hold = '';
var itemsperpage = 4;
var timeperslide = 10;
var i = 0;
var WebSocketURL = "ws://1.23hoeken.nl/stream/" + getUrlVars('customer');

function getUrlVars(varshow) {
	var map = {};
	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
		map[key] = value;
	});
	if (map[varshow] == null) {
		return "1";
	} else {
		return map[varshow];
	}
}

if ($("html").hasClass("websockets") === true && $("html").hasClass("webworkers") === true) {
	console.log("chrome detected");
} else {
	alert("Please use Google Chrome!");
}

function initJson(data) {
	if ($('#page').children().length !== 0) {
		$('#page').empty();	
	}
  var items = [];
	var notifications = [];
	
	hold = data;
	
	//	settings
	itemsperpage = data["settings"][0]["itemsperpage"];
	timeperslide = data["settings"][0]["timeperslide"];	
	if (data["settings"][0]["backgroundimg"] != null){
		$('body').css({'background-color':'white','background-image':'url('+ data["settings"][0]["backgroundimg"]+')'});
	}

	if(data['notifications'] != null){ //todo: or len(data['notifications'])==0
		$.each(data.notifications, function(key, val) {
			//items.push('<div class="sm_item">'+val+'</div>');
			notifications.push('<p id="'+val.id+'">'+ val.text +'</p>');
			// val.text, val.name, val.icon, humaneDate(val.datetime)
		});

		$('<div/>', {
			'class': 'notifications',
			html: notifications.join('')
		}).appendTo('#page');
	
	pageLoop();
	}
	else{
		console.log('invalid json, no queue found');
	}

	if (data["queue"] !== null) { //to	do: or len(data['queue'])==0
		$.each(data.queue, function(key, val) {
			var cssclass;
			var media = "";
			var handler_name = "";
			if (val.service_id === 1) {
				cssclass = "twitter_tweet";
				handler_name = "<span class=\"namehandler\"> (@"+val.handler_name+")</span>";
				if (val.item_media != null) {
					cssclass = "twitter_twitpic";
					media = "<p class=\"sm_item_twitpic\"><img src=\""+val.item_media+":large\"></p>"
				}
			else if (val.service_id === 2) {
				cssclass = "facebook_wallpost";
			}}

			items.push('<div class="sm_item '+ cssclass+'" id="' + val.item_id + '">'+media+'<p class="sm_item_text">' + val.item_text + '</p><div class="sender"><p class="sm_item_avatar"><img src="'+ val.avatar + '" alt="avatar"/></p><p class="sm_item_name"><span class="fullname">'+ val.name +'</span> '+ handler_name +'</p><p class="sm_item_date"><span title="'+ val.item_time + '"></span></p></div></div>');
		});
		$('<div/>', {
			'class': 'items',
			html: items.join('')
		}).appendTo('#page');
		//$('.sm_item_date span').humaneDates();
	}
	else{
		console.log("no queue found");
	}

	
}

function updateJson(data){
	$.each(data, function(key, val) {
		alert("bla");
	});
}

function newTweet(data){
	twitpic = "";
	cssclass = "twitter_tweet";
	if (data.message.entities.media != null){
		twitpic = "<p class=\"sm_item_twitpic\"><img src=\""+data.message.entities.media[0].media_url+":large\"></p>"
		cssclass = "twitter_twitpic";	
	}
	var item = ('<div class="sm_item '+ cssclass +'" id="' + data.message.id_str + '">'+twitpic+'<p class="sm_item_text">' +  data.message.text + '</p><div class="sender"><p class="sm_item_avatar"><img src="'+ data.message.profile_image_url+'" alt="avatar"/></p><p class="sm_item_name"><span class="fullname">'+  data.message.from_user_name +'</span><span class="fullname">(@'+  data.message.from_user +')</span></p><p class="sm_item_date"><span title="'+ data.message.created_at + '">'+ data.message.created_at + '</span></p></div></div>');
	$(item).appendTo('.items');
	//$('.sm_item_date span').humaneDates();
	deleteOldestItem();
}

function newFB_Wallpost(data){
	console.log(data);
	//var item = ('<div class="sm_item '+ cssclass +'" id="' + data.message.id_str + '"><p class="sm_item_text">' +  data.message.text + '</p><p class="sm_item_name"><span class="fullname">'+  data.message.from_user_name +'</span><span class="fullname">(@'+  data.message.from_user +')</span></p><p class="sm_item_avatar"><img src="'+ data.message.profile_image_url+'" alt="avatar"/></p><p class="sm_item_date"><span title="'+ data.message.created_at + '">'+ data.message.created_at + '</span></p></div>');
	//$(item).appendTo('.items');
	//$('span').humaneDates();
	//deleteOldestItem();
}


function addJson(data){
	if(data.type=="tweet"){
		console.log("new tweet!");
		newTweet(data);
	}
	if(data.type=="facebookwall"){
		console.log("new facebook wallpost!");
		//newFB_Wallpost(data);
	}
}

function deleteOldestItem(){
	if ($('.items').children().length > 15){
		console.log("removing: " + $($('.items').children())[0]);
		if ($($('.items').children()[0]).hasClass("show") !== true) {
			$($('.items').children()[0]).remove();
		} else {
			setTimeout('deleteOldestItem()', timeperslide*1000);
		}
	}
}

function startWebSocket(WebSocketLocation){
	var ws = new WebSocket(WebSocketLocation);

	ws.onopen = function() {
		$('body').addClass('online');
		$('body').removeClass('offline');
		console.log("Opened a websocket!");
		ws.send("INIT");
	};
	ws.onmessage = function (e) {
		var receivedjson = jQuery.parseJSON(e.data); 
		if(receivedjson.event == "init"){
			console.log("Initialising with brandnew Json!");
			initJson(receivedjson);
		}
		else if(receivedjson.event == "update"){
			console.log("Received a update by JSON!");		

			updateJson(receivedjson)
		}
		else if(receivedjson.event == "add"){
			//console.log("Received a add by JSON!");		

			addJson(receivedjson)
		}
		else if(receivedjson.event == "reboot"){
			console.log("Received a reboot by JSON!");		

			window.location.reload()
		}
		else if(receivedjson.event == "error"){
			document.write(receivedjson.error);		
			setTimeout('window.location.reload()',30000);
		}

		else{
		console.log(e.data);
		}
	};
	ws.onerror = function() {
		ws.onclose();
	}
	ws.onclose = function() {
		$('body').addClass('offline');
		$('body').removeClass('online');
		console.log("lost connection! reconnect in 10 secs");
		setTimeout('startWebSocket("'+WebSocketLocation+'")',10000);
	};
}
startWebSocket(WebSocketURL);

var currentpage=0;
var counter=2;
var currentnotification = 0;
function pageLoop(){
window.setInterval(function () {
	

	//NOTIFICATIONS
	if ($($('.notifications').children()).length > 1){
	if (counter==2) {
			if (currentnotification >= $('.notifications').children().length-1){
				currentnotification = 0; } else { currentnotification++; }
			$($('.notifications').children()).slideUp();
			$($('.notifications').children()).removeClass("show");
			$($('.notifications').children()[currentnotification]).slideDown();
			$($('.notifications').children()[currentnotification]).addClass("show");
	
		counter=0;
	} else { counter++; }}
	else{
	$($('.notifications').children()[0]).slideDown();
	$($('.notifications').children()[0]).addClass("show");
	}

	
	//ITEMS
	totalitems=$('.items').children().length;
	pages=Math.round(totalitems/itemsperpage-1);
	$($('.items').children()).slideUp();
	$($('.items').children()).removeClass("show");
	
	//$('.sm_item_date span').humaneDates();
	startpos = itemsperpage*currentpage;
	endpos = itemsperpage*currentpage+itemsperpage;
	for(i=startpos;i<endpos;i++){
		//console.log(i);
		$($('.items').children()[i]).slideDown();
		$($('.items').children()[i]).addClass("show");
	}
	if(currentpage>=pages){
		currentpage=0;
	}else{
		currentpage++;
	}
	
},timeperslide*1000); //todo: make time correct with jsontime
}