// JavaScript Document

function TeamLineup(){
	
	/*set to true while an ajax request is in progress*/
	this.selection_in_progress = false;
	
	/*Max players per position*/
	this.max_players = {
		'coa':1,
		'keep':1,
		'def':5,
		'mid':5,
		'for':3
	}
	
	/*DOM template for player*/
	this.player_dom = '<div class="player">'
    	+ '<div class="info tooltip" style="background:url(images/player_info.png);">&nbsp;</div>'
		+ '<div class="remove" style="background:url(images/player_remove.png);">&nbsp;</div>'
		+ '<div class="shirt" style="background-image:url(images/shirt/shirt.png);">&nbsp;</div>'
        + '<div class="shirt_back" style="background-image:url(images/shirt/shirt_back.png);">&nbsp;</div>'
        + '<div class="name"><div class="name_text"></div>'
		+ '<div><span class="team"></span> - <span class="price"></span></div></div>'
        + '<div class="name_back">&nbsp;<br/>&nbsp;</div>'
    	+ '</div>';
	
	/*Holds the selected players*/
	this.players = {};
	
	/*players object grouped by position (referer of this.players)*/
	this.players_formation = function(){
		var me = this; /*set this to a var to be able to use it within the jQuery object*/
		tmp = {'coa':[], 'keep':[], 'def':[], 'mid':[], 'for':[]};
		$.each(this.players, function(key,val){
			if(val){
				tmp[val.pos][tmp[val.pos].length] = me.players[val.id];
			}
		});
		return tmp;
	};
	
	/*Calculate formation from selected players*/
	this.formation = function(){
		var tmp = this.players_formation();
		$('#formation').html( tmp['def'].length + '-' + tmp['mid'].length + '-' + tmp['for'].length );
		
		var players_missing = 11 - (tmp['keep'].length + tmp['def'].length + tmp['mid'].length + tmp['for'].length);
		var keeper_missing = 1 - tmp['keep'].length;
		var coach_missing = 1 - tmp['coa'].length;
		var tmp_html = '';
		
		if(players_missing + coach_missing <= 0){
			$('#lineup_msg').html('<div class="green">Team complete!</div>');
		}else{
			if(players_missing > 0){ tmp_html += '<div class="red">Select ' + players_missing + ' more player(s).</div>' };
			if(players_missing === 1 && keeper_missing === 1){tmp_html = '';}
			
			if(keeper_missing > 0){ tmp_html += '<div class="red">Select a keeper.</div>' };
			if(coach_missing > 0){ tmp_html += '<div class="red">Select a coach.</div>' };
			$('#lineup_msg').html(tmp_html);
		}
		
		
	}
	
	/*
	add_player(player1, [player2])
	player1: Player to set in
	player2: (optional) Player to substitute out
	
	player1, player2 should be: {name:'', team:'', price:'', id':'', 'pos':(coa,keep,for,mid,for)}
	
	When adding a player perform ajax request.
	The response should be a json object containing wither it was successful or not.
	response = {
		success: boolean,
		msg: [Error message],
		budget: updated budget,
		subst: substitutions left,
		loggedout: (set to true if user session is expired)
	}
	if success is true player is added to the field
	*/
	this.add_player = function(player1, player2){
		var me = this;
		if(me.selection_in_progress){return false;}
		var tmp_players_formation = me.players_formation();
		var x = 0;
		if(player2){
			x = (player1.pos === player2.pos) ? 1 : 0;
		}
		
		/*Checks if selection is valid. This is a client side check to reduce html requests*/
		if( me.players[player1.id] ){
			my_alert('This player is already in your selection.','Error <span>Could not add player</span>');
			return false;
		}else if( tmp_players_formation['def'].length + tmp_players_formation['mid'].length + tmp_players_formation['for'].length >= 10+x && (player1.pos === 'def' || player1.pos === 'mid' || player1.pos === 'for') ){
			my_alert('You cannot add more players.','Error <span>Could not add player</span>');
			return false;
		}else if( tmp_players_formation['def'].length + tmp_players_formation['mid'].length + tmp_players_formation['for'].length + tmp_players_formation['keep'].length + tmp_players_formation['coa'].length >= 12 ){
			my_alert('You cannot add more players.','Error <span>Could not add player</span>');
			return false;
		}else if( tmp_players_formation[player1.pos].length >= me.max_players[player1.pos]+x ){
			my_alert('You cannot add more players to this position.','Error <span>Could not add player</span>');
			return false;
		}else if( tmp_players_formation['def'].length + tmp_players_formation['mid'].length >= 9+x && (player1.pos === 'def' || player1.pos === 'mid') ){
			my_alert('This formation is not supported.','Error <span>Could not add player</span>');
			return false;
		}
		
		me.selection_in_progress = true;
		$.get(add_player_url.replace('[player1]',player1.id).replace('[player2]', ((player2)?player2.id:'')), function(data, textStatus){
			me.selection_in_progress = false;
			if(data.success){
				me.players[player1.id] = player1;
				
				if(player2){
					me.players[player2.id].dom.remove();
					me.players[player2.id] = false;
				}
				me.place_players();
				me.update_list();
				
				$('#budget').html(data.budget);
				$('#subst').html(data.subst);
			}else if(data.loggedout){
				login_box();
			}else{
				my_alert(data.msg, '&nbsp;');
			}
		},'json');
	}
	
	this.remove_player = function(id){
		var me = this;
		if(me.selection_in_progress){return false;}
		me.selection_in_progress = true;
		$.get(remove_player_url.replace('[player]',id), function(data, textStatus){
			me.selection_in_progress = false;
			if(data.success){
				me.players[id].dom.remove();
				me.players[id] = false;
				me.place_players();
				me.update_list();
				$('#budget').html(data.budget);
				$('#subst').html(data.subst);
			}else if(data.loggedout){
				login_box();
			}else{
				my_alert(data.msg, '&nbsp;');
			}
		},'json');
	}
	/*Update list. This function should be run after every time the right side list changes*/
	this.update_list = function(){
		var me = this;
		var tmp = me.players_formation();
		
		$('#player_list tbody tr').removeClass('selected disabled');
		
		$.each(me.players, function(key,val){
			$('#player_list #player_list_' + val.id).addClass('selected');
		});
		
		$.each(tmp, function(key,val){
			if( val.length >= me.max_players[key] ){
				$('#player_list .pos_' + key).addClass('disabled');	
			}
		});
		
		if( tmp['def'].length + tmp['mid'].length + tmp['for'].length >= 10 ){
			$('#player_list .pos_def, 	#player_list .pos_mid, #player_list .pos_for').addClass('disabled');
		}
	}
	
	/*Position players on the field*/
	this.place_players = function(id){
		var me = this;
		var tmp_players = me.players_formation();
		var tmpArray = [1, 1, tmp_players['def'].length, tmp_players['mid'].length, tmp_players['for'].length];
		
		$.each(['coa','keep','def','mid','for'], function(i,key){
			
			for(var x=1; x<=tmpArray[i]; x=x+1){
				var tmp_css = {
				   'top': me.positions.top[i], 
				   'left': me.positions.left[((key==='coa')?0:tmpArray[i])] + (me.positions.increment[tmpArray[i]]*(x-1))
				}

				if(tmp_players[key][x-1]){
					
					if(!tmp_players[key][x-1].dom){
						me.do_player_dom(tmp_players[key][x-1].id);
					}
					tmp_players[key][x-1].dom.css(tmp_css).appendTo('#visual_setup');

				}
				
			}
			
		});
		me.formation();
	}
	
	/*Create the player dom element*/
	this.do_player_dom = function(id){
		var me = this;
		if(!me.players[id].dom){
			me.players[id].dom = $(me.player_dom);
			me.players[id].dom.find('.info').attr('player', id);
			me.players[id].dom.data().id = id;
			me.players[id].dom.find('.name_text').text(me.players[id].name);
			me.players[id].dom.find('.price').text(me.players[id].price);
			me.players[id].dom.find('.team').text(me.players[id].team);
			me.players[id].dom.pngFix({'selector':'*', 'img':'img.pngfix'});
		}
		return me.players[id].dom;
	}
	
	
	/*Used to calculate positions*/
	this.positions = {
		'increment': 	[0,0,110,95,90,75],
		'left':		 	[27,186,131,91,50,36],
		'top':			[495,470,360,250,140]
	};
}


var tooltip_cache = {};
var tooltip_http;
var tooltip_player = 0;

function tooltip_load(e){
	var tmp_player = $(this).attr('player');
	if(tooltip_http && tmp_player != tooltip_player && tooltip_player != 0){tooltip_http.abort(); debug('abort');}
	if($('#tooltip').length === 0){
		$('<div>').attr('id','tooltip').appendTo(document.body);
	}
	var ee = e;
	
	tmp_url = player_tooltip_url.replace('[player]', tmp_player);
	if( !tooltip_cache[tmp_url] && tmp_player != tooltip_player){
		tooltip_player = tmp_player;
		$('#tooltip').html('loading...');
		tooltip_http = $.get(tmp_url, function(data,textStatus){
			tooltip_cache[tmp_url] = data;
			$('#tooltip').html( tooltip_cache[tmp_url] );
			
			tooltip(e);
		});
	}else{
		$('#tooltip').html( tooltip_cache[tmp_url] );
	}
}

function tooltip(e){
	if($('#tooltip').length === 0){
		$('<div>').attr('id','tooltip').appendTo(document.body);
	}
	
	$('#tooltip').css({
		'top': e.clientY - $('#tooltip').outerHeight() + $(window).scrollTop() - 10,
		'left': e.clientX - 55,
		'zIndex':'3000'
	}).show();
	
}
function tooltip_hide(){
	tooltip_player = 0;
	if(tooltip_http){tooltip_http.abort();}
	$('#tooltip').hide();
}

function login_box(){
	var div = $('<div>'
	+ '<div style="margin-bottom:10px;" id="login_box_text">You have been logged out.<br/>Please log in again.</div>'
	+ 'Username / Email:<br/>'
	+ '<input type="text" class="input" style="width:98%" id="login_username" /><br/>'
	+ 'Password:<br/>'
	+ '<input type="password" class="input" style="width:98%" id="login_password" /><br/>'
	+ '</div>');
	my_alert(div,'Login', [
		{
			'name': 'Login',
			'click': function(){
				$('#popup_box button').attr('disabled','true').css('opacity','0.5');
				
				var postvars = {'username': $('#login_username').val(), 'password': $('#login_password').val()};
				/*do login here*/
				$.post(login_url, postvars, function(data,textStatus){
					if(data.success){
						my_alert_hide();
					}else{
						$('#login_box_text').addClass('red').html(data.msg);
					}
					$('#popup_box button').attr('disabled','').css('opacity','1');
				},'json');
				//
			}
		}
		,
		{
			'name':'Cancel',
			'click': function(){window.location = 'index.php';}
		}
		]);
}

function my_alert(msg, title, buttons){
	var popup = $('#popup_box');
	if(typeof(msg)==='object'){
		popup.find('.content').html('').append(msg);
	}else{
		popup.find('.content').html(msg);
	}
	
	popup.find('.title').html(title);
	popup.find('.foot .inner').html('');
	if(!buttons){
		popup.find('.foot .inner').append('<button class="button" style="width:100px;" onclick="my_alert_hide();">Ok</button>');
	}else{
		$.each(buttons, function(key,val){
			var button = $('<button class="button" style="width:100px; margin:0 2px;">' + val.name + '</button>').bind('click', val.click);
			popup.find('.foot .inner').append(button);
		});
	}
	my_alert_pos();
	popup.fadeIn('fast');
	$('#screen_lock').fadeIn('fast');
	$(window).bind('resize', my_alert_pos).bind('scroll', my_alert_pos);
}
function my_alert_pos(){
	var popup = $('#popup_box');
	popup.css({
		left:	($(window).width()/2) - (popup.outerWidth()/2),
		top:	($(window).height()/2) - (popup.outerHeight()/2) + $(window).scrollTop()
	});
	$('#screen_lock').css({
		opacity: '0.3',
		top: $(window).scrollTop(),
		height:	$(window).height(),
		width:	$(window).width()
	});
}
function my_alert_hide(){
	$(window).unbind('resize').unbind('scroll');
	$('#popup_box, #screen_lock').fadeOut('fast');
}

function arraySum(array){
	return (! array.length) ? 0 : arraySum(array.slice(1)) + ((typeof array[0] == 'number') ? array[0] : 0);

}
/*Debug*/
function debug(obj){
	if( typeof(console) === 'object' ){
		if(typeof(console.debug)==='function'){
			console.debug(obj);
		}
	}
}