var shoutbuffer = new Array;
shoutbuffer[1] = new Array;
shoutbuffer[2] = new Array;

var currentshout = new Array;
currentshout[1] = null;
currentshout[2] = null;

var shouttimer = null;

var INITIAL_OPACITY = 0.6;
var FADEOUT_DELAY = 10;
var FADEOUT_STEP_PCT = 0.1; // >0..100
var FADEOUT_MINIMUM_STEP = 0.05; // >0..1

var GROW_DELAY = 10;
var GROW_STEP_PCT = 0.25; // >0..100
var GROW_MINIMUM_STEP = 1; // >0..px

var SHOUT_NEXT_DELAY = 7000;

function getShouts() {
	new Ajax.Request('/sms/get', { asynchronous: true, onSuccess: updateShouts });
}

function updateShouts(req) {
	shoutbuffer[1] = new Array;
	shoutbuffer[2] = new Array;
	
	if (shouttimer) clearTimeout(shouttimer);
	shouts = $A(req.responseXML.getElementsByTagName('shout'));
	if (shouts.length > 0) {
		shouts.each( function(el) {
			shout = new Array
			shout['username'] = el.getAttribute('username');
			shout['avatar'] = el.getAttribute('avatar');
			shout['body'] = el.firstChild.nodeValue;
			shoutbuffer[parseInt(el.getAttribute('box'))].push(shout);
		} )
	}
	currentshout[1] = 0;
	currentshout[2] = 0;
	drawShouts();
}

function drawShouts() {
	
	showSms(1, shoutbuffer[2][currentshout[2]]['username'], shoutbuffer[2][currentshout[2]]['body'], shoutbuffer[2][currentshout[2]]['avatar']);
	showSms(2, shoutbuffer[1][currentshout[1]]['username'], shoutbuffer[1][currentshout[1]]['body'], shoutbuffer[1][currentshout[1]]['avatar']);
	
	currentshout[1]++;
	currentshout[2]++;
	
	if (currentshout[1] > shoutbuffer[1].length-1) {
		if (shouttimer) clearTimeout(shouttimer);
		window.setTimeout("getShouts()", SHOUT_NEXT_DELAY);
	} else {
		if (shouttimer) clearTimeout(shouttimer);
		shouttimer = window.setTimeout("drawShouts()", SHOUT_NEXT_DELAY);
	}

/*	if (currentshout[1] > shoutbuffer[1].length-1)
		currentshout[1] = 0;

	if (currentshout[2] > shoutbuffer[2].length-1)
		currentshout[2] = 0;
*/
}

//
// Animiatie
//

function showSms(target, sender, message, avatar) {
	var box = document.getElementById('sms_popup'+target);

	//
	// Data in array zetten zodat het nooit problemen
	// gaat opleveren met de window.setTimeout
	//
	boxdata[target]["sender"] = sender;
	boxdata[target]["message"] = message;
	boxdata[target]["avatar"] = avatar;
	//alert(message);

	// als de box al in het midden klein is niet eerst uitfaden :)
	if (box.style.left!="") {
		box_fadeout(target,0);
	} else {
		box_fadeout(target,INITIAL_OPACITY);
	}
}

function box_fadeout(target, current_opacity) {
	var box = document.getElementById('sms_popup'+target);
	var sender = boxdata[target]["sender"];
	var message = boxdata[target]["message"];
	var avatar = boxdata[target]["avatar"];

	if (current_opacity==0) {
		var img = '<img width="90" height="90" src="'+avatar+'" class="shoutavatar'+target+'" />';
		box.innerHTML='<div class="shout"><a href="/'+encodeURIComponent(sender)+'"><b>'+sender+'</b></div><div class="shout">'+img+message+'</a></div>';
		box.style.left = boxdata[target]["mid_left"]+"px";
		box.style.width = "1px";
		box.style.height = "1px";
		alpha(box,INITIAL_OPACITY);
		box_grow(target,0);
	} else {
		current_opacity -= Math.max(FADEOUT_MINIMUM_STEP,current_opacity*FADEOUT_STEP_PCT);
		if (current_opacity<0) current_opacity=0;
		alpha(box,current_opacity);
		window.setTimeout("box_fadeout("+target+","+current_opacity+");",FADEOUT_DELAY);
	}
}

function box_grow(target, current_pct) {
	var box = document.getElementById('sms_popup'+target);
	if (current_pct>=100) {
		box.style.left = "";
	} else {
		current_pct += Math.max(GROW_MINIMUM_STEP,current_pct*GROW_STEP_PCT);
		if (current_pct>100) current_pct=100;

		var rest_pct = 100 - current_pct;
		var left = (boxdata[target]["mid_left"]/100) * rest_pct;
		var width = (boxdata[target]["width"]/100) * current_pct;
		var height = (boxdata[target]["height"]/100) * current_pct;

		box.style.left = left+"px";
		box.style.width = width+"px";
		box.style.height = height+"px";

		window.setTimeout("box_grow("+target+","+current_pct+");",GROW_DELAY);

	}
}

var boxdata = new Array();

function init_shout_animation() {
	init_shout_animation_box(1);
	init_shout_animation_box(2);
}

function init_shout_animation_box(id) {
	var box = document.getElementById('sms_popup'+id);
	if (!box) return;

	//
	// even wat stuff bewaren
	//
	boxdata[id] = new Array();
	boxdata[id]["width"] = box.clientWidth;
	boxdata[id]["height"] = box.clientHeight;
	boxdata[id]["mid_left"] = Math.round(box.clientWidth / 2);

	//
	// Box klein maken, in het midden zetten e.d.
	//
	alpha(box,0);

	box.style.left = boxdata[id]["mid_left"]+"px";
	box.style.width = "1px";
	box.style.height = "1px";
	box.style.position="relative";
	box.style.visibility="visible";
	box.style.overflow="hidden";
}

function alpha(obj, opacity) {
	if (navigator.appName == "Microsoft Internet Explorer") {
		obj.style.filter = "alpha(opacity="+(opacity*100)+")";
	}
	obj.style.opacity = Math.round(opacity*10)/10;
	obj.style.MozOpacity=opacity;
}