$(document).ready(
  function()
  {
  
  var howMany = 15;
  var marginLeft = 150;
  var marginRight = 150;
  var marginTop = 150;
  var marginBottom = 100;
  
  function randomXToY(minVal,maxVal,floatVal)
	{
	  var randVal = minVal+(Math.random()*(maxVal-minVal));
	  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
	}

  function createChars (howMany,marginLeft,marginRight,marginTop,marginBottom) {
  	for (i=0; i<howMany; i++) {
  		var id = i+1;
  		var x_pos = randomXToY(150,$(window).width()-150);
  		var y_pos = randomXToY(150,$(window).height()-150);
  		$('ul#chara-list').append('<li id="chara-'+id+'" class="character"><span class="shadow"></span><span class="legs legs-'+randomXToY(1,2)+'"></span><span class="torso torso-'+randomXToY(1,4)+'"></span><span class="head head-'+randomXToY(1,6)+'"></span><span class="bubble"></span><span id="info-'+id+'" class="info">'+id+'</span></li>');
  		$('#chara-'+id).css('left', x_pos+'px');
  		$('#chara-1'+id).css('top', y_pos+'px');
  		$('#chara-1'+id).css('z-index', y_pos);
  		$('#info-1'+id).text("new text.");
  	}
  	moveChars(howMany,marginLeft,marginRight,marginTop,marginBottom);
  }
  
  function moveChars (howMany,marginLeft,marginRight,marginTop,marginBottom) {
  	for (i=0; i<howMany; i++) {
  	
  		var id = i+1;
  		var whichMove = randomXToY(1,30);
  		var $chara_id = $('#chara-'+id);
			var x = $chara_id.position().left;
			var y = $chara_id.position().top;
			var distance = 42*randomXToY(1,5);
  		var speed = distance*10;
  		
  		if (x <= marginRight) {
  			whichMove = 1;	
  		} else if ( x>= $(window).width()-marginLeft) {
  			whichMove = 2;
  		};
  		if (y <= marginTop) {
  			whichMove = 3;	
  		} else if (y >= $(window).height()-marginBottom) {
  			whichMove = 4;	
  		}
  		
  		if (whichMove == 1) {
  			$('#chara-'+id).children('.legs').addClass('walk');
	  		$('#chara-'+id).children('.head').addClass('walk');
	  		$('#chara-'+id).animate({
			    left: '+='+distance
			  }, speed, function() {
			    // Animation complete.
			    $(this).children('.legs').removeClass('walk');
		    	$(this).children('.head').removeClass('walk');
			  });
  		} else if (whichMove == 2) {
  			$('#chara-'+id).children('.legs').addClass('walk');
	  		$('#chara-'+id).children('.head').addClass('walk');
	  		$('#chara-'+id).animate({
			    left: '-='+distance
			  }, speed, function() {
			    // Animation complete.
			    $(this).children('.legs').removeClass('walk');
		    	$(this).children('.head').removeClass('walk');
			  });
  		} else if (whichMove == 3) {
  			$('#chara-'+id).children('.legs').addClass('walk');
	  		$('#chara-'+id).children('.head').addClass('walk');
	  		$('#chara-'+id).animate({
			    top: '+='+distance
			  }, speed, function() {
			    // Animation complete.
			    $(this).children('.legs').removeClass('walk');
		    	$(this).children('.head').removeClass('walk');
					//$(this).css('z-index', $(this).position.top);
			  });
  		} else if (whichMove == 4) {
  			$('#chara-'+id).children('.legs').addClass('walk');
	  		$('#chara-'+id).children('.head').addClass('walk');
	  		$('#chara-'+id).animate({
			    top: '-='+distance
			  }, speed, function() {
			    // Animation complete.
			    $(this).children('.legs').removeClass('walk');
		    	$(this).children('.head').removeClass('walk');
		    	//$(this).css('z-index', $(this).position.top);
			  });
  		} else if (whichMove == 5) {
  			$('#chara-'+id).children('.bubble').addClass('bubble-1');
  		} else if (whichMove == 6) {
  			$('#chara-'+id).children('.bubble').addClass('bubble-2');
  		} else {
  			$('#chara-'+id).children('.bubble').removeClass('bubble-1');
  			$('#chara-'+id).children('.bubble').removeClass('bubble-2');
  		}
  		
  	}
  	setTimeout(function(){ moveChars (howMany,marginLeft,marginRight,marginTop,marginBottom); }, 3000 );	
  };
  
  function checkZsort (howMany) {
  	for (i=0; i<howMany; i++) {
  		var id = i+1;
  		var pos_t = Math.round($('#chara-'+id).position().top);
  		//$('#chara-'+id).children('.info').text(pos_t);
  		$('#chara-'+id).children('.info').text('');
  		$('#chara-'+id).css('z-index',pos_t);
  	};
  	setTimeout(function(){ checkZsort  (howMany); }, 500 );	
  }
  
  createChars (howMany,marginLeft,marginRight,marginTop,marginBottom) ;
  checkZsort (howMany);
  
  $(window).resize(function() {
  	//createChars (15);
	});
	
	$('.generateNew').click(function() {
		$('#nav_debug a').removeClass('active');
		$(this).addClass('active');
  	var quantity = Number($(this).attr("id").substr(4));
  	$('.character').remove();
		createChars (quantity) ;
  	checkZsort (quantity);
  	return false;
	});


  
  //makeWalk ($('.character'),20);

});