$(document).ready(
  function()
  {
  // cookie info
  var COOKIE_NAME = 'donut_cookie';
  var options = { path: '/', expires: 10 };
  
  // hide debug stuff
  $('span.bubble').hide();
  $('div#debug').hide();
  $('h2#status').hide();
  
  // Set character in the middle of the page
  var viewport_width = $(document).width();
  var viewport_height = $(document).height();
  var char_xtart_x = Math.round(viewport_width/2);
  var char_xtart_y = Math.round(viewport_height/2);
  $('div.container div.character').css("left",char_xtart_x+'px');
	$('div.container div.character').css("top",char_xtart_y+'px');
	
	// ...and now check positioning cookie if exist
	// if exist, place character, background, and turn character left or right
  if ($.cookie(COOKIE_NAME) && $.cookie(COOKIE_NAME) != null) {
  	var coordinates_array = $.cookie(COOKIE_NAME).split('|');
  	var new_left = Number(coordinates_array[0])+50;
  	var new_top = Number(coordinates_array[1])+50;
  	var new_bg_left = Number(coordinates_array[3])+200;
  	var new_bg_top = Number(coordinates_array[4])+1500;
  	$('div.character').css("left",new_left+"px");
		$('div.character').css("top",new_top+"px");
		$('div.bg').css("left",new_bg_left+"px");
		$('div.bg').css("top",new_bg_top+"px");
		if (coordinates_array[2] == 'l') {
    	$('div.character').removeClass("_lwalk").removeClass("_rwalk").removeClass("_rstatic").addClass("_lstatic");
    }
  };
	
	function deleteDeletable () {
		setTimeout(function() { $(".autoDelete").slideUp('slow'); }, 5000);
	};
	deleteDeletable();
	
		
	// Create x amount of jewels
	function createJewels(howMany) {
		var howMany = howMany;
		for (i=0; i<howMany; i++) {
			x_gem = Math.floor(Math.random()*1928);
			y_gem = Math.floor(Math.random()*1250);
			$('div.bg').append('<div class="gem value_10" id="gemid_'+i+'"><span>gemid_'+i+'</span></div>');
			$('div#gemid_'+i).offset({ top: x_gem, left: y_gem });
			$('div#gemid_'+i).css("z-index",y_gem);
			//returnDebug(i+': '+x_gem+'|'+y_gem);
		};
		returnDebug(howMany);
	}
		
	//createJewels(15);
	
	function createDialogue(title, text) {
		//returnDebug('Opening dialogue.');
		$('body').append('<div class="black"><div class="modal medium"><h2>'+title+'</h2><p>'+text+'</p><a href="#" class="closeModal"><span>OK</span></a></div></div>');
		$('a.closeModal').click(function() {
			//returnDebug('Closing dialogue.');
			$('div.black').remove();
			return false;
		});
		return false;
	};
	
	function createLogin(title, text) {
		//alert('xxx');
		$('div.black').remove();
		$('body').append('<div class="black"><div class="modal high"><h2>'+title+'</h2><p>'+text+'</p><a href="#" class="closeModal"><span>OK</span></a></div></div>');
		$('a.closeModal').click(function() {
			//returnDebug('Closing dialogue.');
			$('div.black').remove();
			return false;
		});
		return false;
	};
	
	// return debug
	function returnDebug(text) {
		$('#debug ul.debug-list').append('<li>'+text+'</li>');
		var n = $("#debug ul.debug-list").length;
		if (n>=25) {
			$("#debug ul.debug-list") = $("#debug ul.debug-list").slice(0, 24);
		}
		return false;
	};
	
	$('.login').click(function() {
	  return createLogin("Login", "Please insert your email and your password.");
	});
	
  // test animate
  /*
  $('div.character').click(function() {
		 	$(this).animate({
	    top: '+=180',
	    left: '+=100'
	  }, 2000, function() {
	    // Animation complete.
	  });
	});
	*/
	
	
	// grab cursor position, and add actions if required	
	$(document).mousemove(function(e){
			var clickX = e.pageX;
			var clickY = e.pageY;
			var positionChara = $('div.character').offset();
			var charaX = Math.round(positionChara.left)+40;
			var charaY = Math.round(positionChara.top)+40;
			
			function intersects(x, y, cx, cy, r) {
			    dx = x-cx
			    dy = y-cy
			    return dx*dx+dy*dy <= r*r
			}
			var intersects = intersects(charaX, charaY, clickX, clickY, 180);
			if (intersects == true) {
				$('span.area').addClass("view");
				$('div.character').css("cursor","pointer");
				isActive = true;
			} else {
				$('span.area').removeClass("view");
				$('div.character').css("cursor","default");
				isActive = false;
			}

      $('#status').html(clickX +', '+ clickY+' - '+intersects);
      
   }); 

	
	$('div.container').click(function(e) {
	
		$('a#chara-01-bubble').remove();
		
		function intersects(x, y, cx, cy, r) {
	    dx = x-cx
	    dy = y-cy
	    return dx*dx+dy*dy <= r*r
		}
			
		if (isActive == true) {
			var clickX = e.pageX;
			var clickY = e.pageY;
			var positionChara = $('div.character').offset();
			var charaX = Math.round(positionChara.left);
			var charaY = Math.round(positionChara.top);
			var charMoveX = clickX-charaX-50;
			var charMoveY = clickY-charaY-90;
			var charMoveXhalf = Math.round(charMoveX);
			var charMoveYhalf = Math.round(charMoveY);
			if (charMoveX<=0) {
				var horiz_move = "l";
				$('div.character').removeClass("_rwalk").removeClass("_lstatic").removeClass("_rstatic").addClass("_lwalk");
			} else {
				var horiz_move = "r";
				$('div.character').removeClass("_lwalk").removeClass("_rstatic").removeClass("_lstatic").addClass("_rwalk");
			};
			$('div.character').animate({
		    top: '+='+charMoveY,
		    left: '+='+charMoveX,
		  }, 1000, function() {
		    // Animation complete.
		    if (horiz_move == "l") {
		    	$('div.character').removeClass("_lwalk").addClass("_lstatic");
		    } else {
		    	$('div.character').removeClass("_rwalk").addClass("_rstatic");
		    }
		    
		     $('div.character').css("z-index",clickY);
		     $('div.container div.bg span#bg-item-04').css("z-index",clickY+1);
		     // now check if there is a collision with characters...
		     // should add a loop here, grabbing values from an array/object...
		     var positionChara01 = $('div#bg-item-04').offset();
				 var chara01X = Math.round(positionChara01.left);
				 var chara01Y = Math.round(positionChara01.top);
				 var chara01intersects = intersects(clickX, clickY, chara01X, chara01Y, 245);
				 if (chara01intersects == true) {
				 	//$('span.bubble').show();
				 	var positionChara01 = $('div#bg-item-04').offset();
				 	var positionChara01X = Math.round(positionChara01.left);
					var positionChara01Y = Math.round(positionChara01.top)-40;
				 	$('body').append('<a href="#"id="chara-01-bubble" class="bubble"></a>');
				 	$('a#chara-01-bubble').css("left",positionChara01X);
				 	$('a#chara-01-bubble').css("top",positionChara01Y);
				 	$('a#chara-01-bubble').click(function() {
				 		//returnDebug('Start dialogue...');
				 		createDialogue('Strange boy',"It's dangerous to walk alone here...<br />Maybe you should <a href=\"#\" class=\"login\">login</a> first.");
				 		$('.login').click(function() {
						  return createLogin("Login", "Please insert your email and your password.");
						});
						//$('#debug ul.debug-list').append('<li>Start dialogue...</li>');
						// start dialogue
					  return false;
					});
				 } else {
				 	$('span.bubble').hide();
				 	$('a#chara-01-bubble').remove();
				 }
		     
		      // grab all values for position updating...
		     var positionChara = $('div.character').offset();
				 var charaX = Math.round(positionChara.left);
				 var charaY = Math.round(positionChara.top);
				 var positionBg = $('div.bg').offset();
				 var bgX = Math.round(positionBg.left);
				 var bgY = Math.round(positionBg.top);
				 var posString = charaX+'|'+charaY+'|'+horiz_move+'|'+bgX+'|'+bgY;
				
					$.cookie(COOKIE_NAME, posString, options);

				
		  });
		  $('div.bg').animate({
		    top: '-='+charMoveYhalf,
		    left: '-='+charMoveXhalf,
		  }, 1000, function() {
		    // Animation complete.
		    //$('#debug ul.debug-list').append('<li> Animation complete X='+clickX+', Y='+clickY+'</li>');
		  });
		  $('div.bg div.gem').animate({
		    top: '-='+charMoveYhalf,
		    left: '-='+charMoveXhalf,
		  }, 1000, function() {
		    // Animation complete.
		    //$('#debug ul.debug-list').append('<li> Animation complete X='+clickX+', Y='+clickY+'</li>');
		  });
		} else {
			// no action.
		}
		

	});
  }
);