var frag = '';
var photoUrl = 'http://www.kwekker.nl/photo/';
var boxCount = 28;
var boxCounter = 0;
var adsenseAfterBox = 12;
var roomContainerIndex = 0;
var refreshRate = 5 * 1000;

var province = '';
var category = '';
var sexe = '';
var sex_pref = '';
var ageFrom = '';
var ageTill = '';


$(document).ready(function(){
	loadBoxes(true);

	$("#searchForm").submit(function(){
		tmp = $("#searchForm select[name='age']").val().split("-");
		ageFrom = tmp[0];
		ageTill = tmp[1];
		province = $("#searchForm select[name='prov']").val();
		category = $("#searchForm select[name='cat']").val();
		sexe = $("#searchForm select[name='sexe']").val();
		sex_pref = $("#searchForm select[name='sex_pref']").val();
		autoLoad = false;
		loadBoxes(false);
		return false;
	});
});


function loadBoxes(reload)
{
	frag = '';
	url = 'api/getOnlineUsers.php?r='+ Math.random();
	if(category != '' && category != undefined) 	url = url +'&cat='+ category;
	if(sexe != '' && sexe != undefined) 					url = url +'&sexe='+ sexe;
	if(sex_pref != '' && sex_pref != undefined) 	url = url +'&sex_pref='+ sex_pref;
	if(ageFrom != '' && ageFrom != undefined) 		url = url +'&ageFrom='+ ageFrom;
	if(ageTill != '' && ageTill != undefined) 		url = url +'&ageTill='+ ageTill;
	if(province != '' && province != undefined) 	url = url +'&location='+ province;

	$.ajax({
		url: url,
		dataType: "json",
		type: "GET",
		success: function(data)
		{
//			placeBox(0, '', '', '', '', '', 'roomSwf');
//			placeBox(1, '', '', '', '', '', 'roomApp');
//			boxCounter = 2;
			boxCounter = 0;
			if(data.boxes != null )
			{
				$.each(data.boxes, function( i, box )
				{
					boxCounter++;
					placeBox(i, box.username, box.age, box.picture, box.sexe, box.sexual_preference, '', box.update_date);
					switchBoxContainer(i);
				});
			}

			for(i=boxCounter;i<boxCount;i++)
			{
				placeBox(i, "", "", "", "", "", "roomFree");
				switchBoxContainer(i);
			}

			$("#boxCnt"+ roomContainerIndex).empty().append(frag);
			$(".goTen").click(function(){ document.location.href = 'ten.php';});
		},
		complete: function(r, s, e)
		{
			frag = '';
			roomContainerIndex = 0;
			if(false != reload)
			{
				setTimeout(function(){
					loadBoxes(true);
				}, refreshRate);
			}
		}
	});
}

function placeBox(i, name, age, photo, gender, sex_pref, type, update_dater)
{
	if(sex_pref == "hetero") { icon = 'icon_straight.gif'; icon_title = 'Hetero'; }
	else if(sex_pref != "hetero" && gender == "m") { icon = 'icon_gay.gif'; icon_title = 'Gay'; }
	else if(sex_pref != "hetero" && gender == "f") { icon = 'icon_lesbian.gif'; icon_title = 'Lesbisch'; }
	else { icon = ''; icon_title = ''; }

	if(type == "")
	{
		type = "roomSwf";	
	}
	

	frag = frag +'<div box="client" id="room_0_'+ i +'" title="Klik om met mij te chatten" class="goTen roomCommon '+ type +'">';

	
	if(name == "")
	{
		frag = frag +'  <span class="roomText1">:: vrij ::</span>';
		if(type == "roomFree") frag = frag +'  <img class="roomCommonImg" src="images/room_free_photo.jpg' +'" />';
		else frag = frag +'  <div class="roomCommonImg roomFreeImg"><div class="roomNoHost"><strong>VRIJ!</strong><br />neem plaats...</div></div>';
	}
	else if(update_dater == "0000-00-00 00:00:00")
	{
		frag = frag +'  <span class="roomText1">:: '+ name +' ('+ age +')</span>';
		frag = frag +'  <span class="roomText2">chatten</span>';
		frag = frag +'  <img class="roomCommonImg" src="http://www.kwekker.nl/images/room_free_photo.jpg" onerror="this.style.visibility=\'hidden\';" />';

		if(icon != '')
		{
			frag = frag +'  <img class="roomText3" src="images/'+ icon +'" title="'+ icon_title +'" />';
		}
	
	
	}
		
		
	else 
	{
		frag = frag +'  <span class="roomText1">:: '+ name +' ('+ age +')</span>';
		frag = frag +'  <span class="roomText2">chatten</span>';
		frag = frag +'  <img class="roomCommonImg" src="'+ photoUrl + photo.charAt(0) +'/'+ photo +'.jpg?rand='+update_dater+'' +'" onerror="this.style.visibility=\'hidden\';" />';

		if(icon != '')
		{
			frag = frag +'  <img class="roomText3" src="images/'+ icon +'" title="'+ icon_title +'" />';
		}
	}

	frag = frag +'  <span class="flashcode"></span></div>';
}

function switchBoxContainer(i)
{
	if((i+1) !== adsenseAfterBox)  return true;
	$("#boxCnt"+ roomContainerIndex).empty().append(frag);
	frag = '';
	roomContainerIndex++;
}