var reserveCardW = 32;
var cardW = 96;

$(document).ready(function(){
	initFormation();
	
	pickerDrag($("#picker .joueurs img"));
	
	$("#terrain .joueur").droppable({
		drop: function(event, ui){
			var currentCard = $(this).find(".card img");
			
			// si on depose une carte qui provient du terrain, on repasse le z-index à 1
			if($(ui.draggable).parents("#terrain").length){
				$(ui.draggable).parent().parent().css("z-index","1");
			}
			
			// si il y a déja une carte à cet emplacement
			if(currentCard.length){
				// et que l'on essaye d'echanger deux cartes du terrain
				if($(ui.draggable).parents("#terrain").length){
					// on echange les cartes
					var img = $(document.createElement("img"));
					img.attr("src",$(ui.draggable).attr("src"));
					img.attr("width",$(ui.draggable).css("width"));
					img.attr("rel",$(ui.draggable).attr("rel"));
					$(this).find(".card").html(img);
					img.draggable({
						start: function(event, ui){
							$(this).parent().parent().css("z-index","2");
						},
						revert:'invalid'
					});
					
					$(ui.draggable).parent().html(currentCard);
					currentCard.draggable({
						start: function(event, ui){
							$(this).parent().parent().css("z-index","2");
						},
						revert:'invalid'
					});
				}
				// on ajoute une carte de la réserve:
				else{
					// on renvoi la carte actuelle à la réserve
					var img = $(document.createElement("img"));
					img.attr("src",currentCard.attr("src"));
					img.attr("width",reserveCardW+'px');
					$("#picker").find("div[rel='"+currentCard.attr("rel")+"']").append(img);
					img.draggable({
						revert:"invalid",
						helper:"clone",
						start: function(event, ui){
							$(ui.helper).animate({width : cardW+"px"}, 200);
							$(ui.helper).css("z-index","2");
						}
					});
					
					// puis on ajoute la nouvelle
					img = $(document.createElement("img"));
					img.attr("src",$(ui.draggable).attr("src"));
					img.attr("width",$(ui.helper).css("width"));
					img.attr("rel",$(ui.draggable).parent().attr("rel"));
					$(this).find(".card").html(img);
					img.draggable({
						start: function(event, ui){
							$(this).parent().parent().css("z-index","2");
						},
						revert:'invalid'
					});
					$(ui.draggable).remove();
				}
			}
			// si il n'y a pas encore de carte on l'ajoute
			else{
				var img = $(document.createElement("img"));
				img.attr("src",$(ui.draggable).attr("src"));
				img.attr("width",$(ui.helper).css("width"));
				img.attr("rel",$(ui.draggable).parent().attr("rel"));
				$(this).find(".card").html(img);
				img.draggable({
					start: function(event, ui){
						$(this).parent().parent().css("z-index","2");
					},
					revert:'invalid'
				});
				$(ui.draggable).remove();
			}
		}
	});
	$("#picker").droppable({
		accept: "#terrain .joueur .card img",
		drop:function(event,ui){
			$(ui.draggable).parent().parent().css("z-index","1");
			
			var img = $(document.createElement("img"));
			img.attr("src",$(ui.draggable).attr("src"));
			img.attr("width",reserveCardW+'px');
			$("#picker").find("div[rel='"+$(ui.draggable).attr("rel")+"']").append(img);
			pickerDrag(img);
			$(ui.draggable).remove();
		}
	});
	
	$(".entry a").fancybox();
	
	$(".metroBox").hover(function(){
		$(this).css("backgroundColor","#DDD");
		$(this).css("textShadow","#FFF 0 1px 0");
		$(this).find(".metroBoxIn").css("backgroundColor","#EEE");
		$(this).find(".metroBoxIn").css("borderTop","1px solid #BBB");
		$(this).find(".metroBoxIn").css("borderBottom","none");
		$(this).find(".metroBoxIn .calendar .line.pair").css("background","#FFF");
		$(this).find(".metroBoxIn .cat").css("backgroundImage","url('template/img/calendarCatW.png')");
		$(this).find(".metroBoxIn .catEnd").css("backgroundImage","url('template/img/calendarCatEndW.png')");
	},function(){
		$(this).css("backgroundColor","#222");
		$(this).css("textShadow","#000 0 1px 0");
		$(this).find(".metroBoxIn").css("backgroundColor","#111");
		$(this).find(".metroBoxIn").css("borderBottom","1px solid #333");
		$(this).find(".metroBoxIn").css("borderTop","none");
		$(this).find(".metroBoxIn .calendar .line.pair").css("background","#000");
		$(this).find(".metroBoxIn .cat").css("backgroundImage","url('template/img/calendarCatB.png')");
		$(this).find(".metroBoxIn .catEnd").css("backgroundImage","url('template/img/calendarCatEndB.png')");
	});
});

function initFormation(){
	placeXY("#joueur1",352,560);	//G
	placeXY("#joueur2",160,400);	//DC
	placeXY("#joueur3",352,400);	//DC
	placeXY("#joueur4",544,400);	//DC
	placeXY("#joueur5",139,170);	//MG
	placeXY("#joueur6",250,250);	//MDC
	placeXY("#joueur7",352,130);	//MOC
	placeXY("#joueur8",456,250);	//MDC
	placeXY("#joueur9",565,170);	//MDR
	placeXY("#joueur10",240,15);	//BU
	placeXY("#joueur11",464,15);	//BU
}

function placeXY(element,x,y){
	$(element).css("left", x + "px");
	$(element).css("top", y + "px");
}

function pickerDrag(element){
	element.draggable({
		revert:"invalid",
		helper:"clone",
		start: function(event, ui){
			$(ui.helper).animate({width : cardW+"px"}, 200);
			$(ui.helper).css("z-index","2");
		}
	});
}