var latest_output_area ="NONE"; // Jquery object for the DOM element of output area which was used most recently

function handle_output(out, block){
    var output = out.content.data["text/html"];
    latest_output_area.html(output);
}

function handle_click(canvas,coord) {
	console.log(canvas,coord);
	latest_output_area = $(canvas).parents('.output_subarea');
	$(canvas).parents('.output_subarea')
    var world_object_name = canvas.dataset.world_name;
    var command = world_object_name + ".handle_click(" + JSON.stringify(coord) + ")";
    console.log("Executing Command: " + command);
    var kernel = IPython.notebook.kernel;
    var callbacks = { 'iopub' : {'output' : handle_output}};
    kernel.execute(command,callbacks);
};


function generateGridWorld(state,size,elements)
{
	// Declaring array to store image object
	var $imgArray = new Object(), hasImg=false;
	// Loading images LOOP
	$.each(elements, function(i, val) {
	    // filtering for type img
	    if(val["type"]=="img") {
	    	// setting image load
	    	hasImg = true;
		    $imgArray[i] = $('').attr({height:size,width:size,src:val["source"]}).data({name:i,loaded:false}).load(function(){
		    	// Check for all image loaded
		    	var execute=true;
		    	$(this).data("loaded",true);
		    	$.each($imgArray, function(i, val) {
		    		if(!$(this).data("loaded")) {
		    			execute=false;
		    			// exit on unloaded image
		    			return false;
		    		}
		    	});	
		    	if (execute) {
		    		// Converting loaded image to canvas covering block size.
		    		$.each($imgArray, function(i, val) {
		    			$imgArray[i] = $('').attr({width:size,height:size}).get(0);
		    			$imgArray[i].getContext('2d').drawImage(val.get(0),0,0,size,size);
		    		});	
		    		// initialize the world
		    		initializeWorld();	
		    	}
		    });
	    }
	});

	if(!hasImg) {
		initializeWorld();
	}

	function initializeWorld(){
		var $parentDiv = $('div.map-grid-world');
		// remove object reference
		$('div.map-grid-world').removeClass('map-grid-world');
		// get some info about the canvas
		var row = state.length;
		var column = state[0].length;
		var canvas = $parentDiv.find('canvas').get(0);
		var ctx = canvas.getContext('2d');
		canvas.width =  size * column;
		canvas.height = size * row;
		
		//Initialize previous positions
		for(var i=0;i=0 && gx=0 && gy