var table;
var tableLength = 5;
var showMinRating = 0;
var numFriends = 1000;

var tabs_media = [{
	name: 'RATED',
	columns: [
    {p:'userProfileImage', className: 'data mouseover profileName', handler: getProfileName, title:'', colSpan: 5, type:'userProfileImage', sort:false},
		{p:'type', className:'data mouseover', rowColor: 'ccc', sort:false, type:'mediaFragment.mediatype', headerClassName:'hd-mediatype'},
    {handler: getNameTitle, sort:false, defaultsort:false, className: 'data mouseover'},
    {p:'rating', type:'mediaFragment.rating', className:'data mouseover ratingCol', sort:true, defaultsort:true, defaultdesc:false}
	],
	find: function(callback){return mediaFragmentsService.findRecentRatedMediafragmentsForFriends(profileName, showMinRating, tableLength, callback);},   
	count: function(c){c(1);},
	onrowclick: speler,
	sortOnLoad: false
}];

function init() {
	createHTML('friends');
  createHTML('following');
  createHTML('followers');
  
	attach("div#vrienden div.weblogpost.mouseover", highlight);

  table = new TabTable('mediaDiv', tabs_media);
  table.setHeaderRenderer(mediaHeader);
	table.setSortable(false);
  table.setId('mediafragments');
  table.show();
	
}

/**** tabTable stuff ***/

function getProfileName(param){
  var profile = param['profile'];
  var url, html = '';
  if(profile.showSite){
    url = profile.image ? profile.image.URL+'+s(30)+part(0x0x30x20)+s(!30x!20)+f(asis)' : '/pix/iconen/user-999-op-ccc.gif';
  }
  else{
    url = '/pix/iconen/user-999-op-fff.gif';
  }
  html += '<div class="profileImage mouseover" style="background-image: url(\''+url+'\')">';
	html += profile.profileName+'</div>';
  return html;
}

function getNameTitle(param){
	return  '<a href="/speler/ondemand/'+param['mediaFragment'].number+'" rel="speler">'+param['mediaFragment'].title+'</a>';
}

function speler(url){
  if (/\/speler\/ondemand\/\d+$/.test(url)){
    openSpeler('ondemand', {url: url})
  }
  else{
    document.location = url;
  }
  return false;
}

function mediaHeader(){
  return "NIEUWE BEOORDELINGEN IN HET NETWERK VAN "+profileName.toUpperCase();
}

/**** end tabTable stuff ***/

function handleClick(e){
	waitStart("666666");
	//var $img = $(e).attr('target');
	var $img = $(e);
  var $row = $img.parents('div.row');
	var name = $row.find('a.profileName').html();
  var what = $img.attr('alt');
  var $div, where; 
	
	switch(what){
		case 'friends':
    case 'following':
      profileService.endFriendship(name, done);
		break;
		case 'followers':
		  profileService.makeFriend(name, done);
		break;
	}
	
	function done(response){
    $row.fadeOut('slow', function(){
	    if($(this).siblings().length == 0){
	      $('div#div_'+what).fadeOut('fast');
	    }   
			$(this).remove();
		});
    
    where = what == 'followers' ? 'friends' : 'followers';
    $div = $('div#list_'+where);
    if($div && $div.length > 0){
			if(where == 'friends'){
			  profileService.getFriends(profileName, updateList);	
			}
      if(where == 'followers'){
        profileService.getFollowers(profileName, updateList); 
      }
		}
		else{
			createHTML(where);
			$('div#div_'+what).fadeIn('slow');
		}
	}

  function updateList(response){
		html = createListHTML(where, response);
		$div.fadeOut('fast', function(){
			$div.html(html).fadeIn('slow', function(){
				$div.find('div.clickable img').bind('click', function(){handleClick(this);});
			})
		});
		$('div#div_'+where).fadeIn('slow');
		waitStop();
	}

}

function createHTML(what){
  waitStart("666666");
	switch(what){
		case 'friends':
      profileService.getFriends(profileName, processList);
		break;
    case 'following':
      profileService.getFollowing(profileName, processList);
    break;
    case 'followers':
      profileService.getFollowers(profileName, processList);
    break;
	}
	
	function processList(response){
    var html = '';
		var list = response || [];
	  if(list.length > 0){
			var text = {
		    friends: 'Klik op het kruisje achter iemands naam om hem of haar uit deze lijst te verwijderen',
		    following: 'Klik op het kruisje achter iemands naam om hem of haar uit deze lijst te verwijderen',
		    followers: 'Klik op het plusje achter een naam om hem of haar toe te voegen aan je lijst van vrienden'
		  };  
		  var header = {
		    friends: 'VRIENDEN VAN '+profileName.toUpperCase()+':',
		    following: profileName.toUpperCase()+' VOLGT:',
		    followers: profileName.toUpperCase()+' WORDT GEVOLGD DOOR:'
		  };
		  html += '<div class="lijstje">';
		  html += '<h3>'+header[what]+'</h3>';
		  if(loggedin && isMijnProfiel){
		    html += '<div class="uitleg">'+text[what]+'</div>';
		  }
		  html += '<div id="list_'+what+'">';
		  html += createListHTML(what, list);
		  html += '</div>';
		  html += '</div>';
    }
			  
    $('div#div_'+what).html(html);
	  if(loggedin && isMijnProfiel){
      $('div#list_'+what+' div.clickable img').bind('click', function(){handleClick(this);});  
	  }
		attach('div.mouseover', highlight);
		waitStop();
	}
}

function createListHTML(what, list){
	var url, html = '';

	for (var i = 0, len = list.length; i < len; ++i) {
    if(!list[i].showSite){
			continue;
		}
		html += '<div class="row';
		html += (!isMijnProfiel) ? ' mouseover' : '';
		html += i == 0 ? ' first">' : '">';

    html += '<div class="mouseover info';
    html += loggedin && isMijnProfiel ? ' loggedin"' : '"';
    if(list[i].image){
      url = list[i].image.URL+'+s(30)+part(0x0x30x20)+s(!30x!20)+f(asis)';      
      html += ' style="background-image: url(\''+url+'\')">'; 
    }
    else{
      url = '/pix/iconen/user-lichtrood-op-fff.gif';
      html += ' style="background-image: url(\''+url+'\')" class="mouseoverIcon">';
    }
		html += '<a href="/mijn3voor12/'+list[i].profileName+'/profiel" class="profileName">'+list[i].profileName+'</a>';
    html += '</div>'; // profileName    

    if(loggedin && isMijnProfiel){
      html += '<div class="clickable '+what+'"><img src="/pix/iconen/click_'+what+'.png" class="png" width="20" height="20" alt="'+what+'" /></div>'
    }

		html += '</div>';
  }
	
	return html;
}