var xr_map = {};

xr_map.gm = {}; //global_map
xr_map._pc_ = 1;
xr_map._cp_ = 1;
xr_map.levels = {}; //levels
xr_map.init = function(){
this.gm = global_map;
var gr = this.gm.bound_rect;

gr.width = gr.x2-gr.x1;
gr.height = gr.y2-gr.y1;
this.gm.global_rect = gr;
var img=$('<img>').attr('src', this.gm.texture).css({opacity: 1, zIndex: -1, position: 'absolute', left:0, top:0, width: gr.width, height: gr.height}).appendTo($('body'));
img.attr('id', 'img_global_map');
$('#global_map_div').css({width: gr.width, height: gr.height});

this.levels = levels;
for (var i in this.levels)
{
  var l = this.levels[i];
  gr = l.global_rect;
  gr.width = gr.x2-gr.x1;
  gr.height = gr.y2-gr.y1;
  
  l.global_rect = gr;
  this.levels[i]=l;
  
  var div=$('<div>').addClass('ui_map').css({left: gr.x1, top: gr.y1, width: gr.width, height: gr.height});
  var img = $('<img>').attr('src', l.texture).attr('alt', i).css({width: gr.width, height: gr.height});
  img.appendTo(div);
  var in_border_div = $('<div>').addClass('inborder_div').css({width: gr.width-2, height: gr.height-2});
  in_border_div.appendTo(div);
  div.attr('id', 'div_' + i);
  div.appendTo($('#global_map_div'));
  $('<div>').addClass('ui_map_info').attr('level_name', i).html(i).css({left: 0, top: 0}).appendTo(div);
  div.draggable({ containment: '#global_map_div',
				drag: function(event, ui) {
        	var info = $('.ui_map_info', event.target);
        	var ln = info.attr('level_name');
          xr_map.levels[ln].global_rect.x1 = ui.position.left;
          xr_map.levels[ln].global_rect.y1 = ui.position.top;
          xr_map.levels[ln].global_rect.x2 = xr_map.levels[ln].global_rect.x1 + xr_map.levels[ln].global_rect.width;
          xr_map.levels[ln].global_rect.y2 = xr_map.levels[ln].global_rect.y1 + xr_map.levels[ln].global_rect.height;
          xr_map.updateLevelInfo(ln);
				}
  });
	div.resizable({
//		helper: 'ui-resizable-helper',
		resize: function(event, ui) {
		  $('img', event.target).width(ui.size.width).height(ui.size.height);
		  
      $('.inborder_div', event.target).css({width: ui.size.width-2, height: ui.size.height-2});
		  
    	var info = $('.ui_map_info', event.target);
    	var ln = info.attr('level_name');
    	xr_map.levels[ln].global_rect.width = ui.size.width;
    	xr_map.levels[ln].global_rect.height = ui.size.height;
      xr_map.levels[ln].global_rect.x2 = xr_map.levels[ln].global_rect.x1 + xr_map.levels[ln].global_rect.width;
      xr_map.levels[ln].global_rect.y2 = xr_map.levels[ln].global_rect.y1 + xr_map.levels[ln].global_rect.height;
    	xr_map.updateLevelInfo(ln);
		},
//    alsoResize: '#div_' + i + ' img',
		stop: function(event, ui) {
		  $('img', event.target).width(ui.size.width).height(ui.size.height);
		  $('.inborder_div', event.target).css({width: ui.size.width-2, height: ui.size.height-2});
		  
    	var info = $('.ui_map_info', event.target);
    	var ln = info.attr('level_name');
    	xr_map.levels[ln].global_rect.width = ui.size.width;
    	xr_map.levels[ln].global_rect.height = ui.size.height;
      xr_map.levels[ln].global_rect.x2 = xr_map.levels[ln].global_rect.x1 + xr_map.levels[ln].global_rect.width;
      xr_map.levels[ln].global_rect.y2 = xr_map.levels[ln].global_rect.y1 + xr_map.levels[ln].global_rect.height;
    	xr_map.updateLevelInfo(ln);
		}
	});
  
	$('#viz_levels_div').append($('<p>' + i + '</p>').attr('level_name', i).click(function(){
	  var display;
	  if (this.lvl_active=='none')
	  {
    	display = '';
    	$(this).removeClass('lvl_inactive');
    	$(this).addClass('lvl_active');
	  }
	  else
	  {
    	display = 'none';
    	$(this).removeClass('lvl_active');
    	$(this).addClass('lvl_inactive');
	  }
	  this.lvl_active = display;
	  var ln = $(this).attr('level_name');
	  $('#div_' + ln).css({display: display});
	}));
	
  xr_map.updateLevelInfo(i);
}

$('#viz_levels_div').show();

};

xr_map.updateLevelInfo = function(ln)
{
	var text = '';
	var l = xr_map.levels[ln];
	
	var info = $('#div_' + ln + ' .ui_map_info');
	text += ln;
	text += ' gr:<br />';
	text += l.global_rect.x1 + ',';
	text += l.global_rect.y1 + ',';
	text += l.global_rect.x2 + ',';
	text += l.global_rect.y2 + '';
	
	// x
	var bw = 0;//l.bound_rect.x2 - l.bound_rect.x1;
	var bh = 0;//l.bound_rect.y2 - l.bound_rect.y1;
	
	var gw = l.global_rect.x2 - l.global_rect.x1;
	var gh = l.global_rect.y2 - l.global_rect.y1;
	text += '&nbsp; (';
//	text += Math.floor((gw/bw)*100)/100;
	text += Math.floor(gw);
	text += 'x';
//	text += Math.floor((gh/bh)*100)/100;
  text += Math.floor(gh);
	text += ')';
	
	
	text += '<br />';
	info.html(text);
}

xr_map.toint = function(x){return parseInt(x);};
xr_map.tofloat = function(x){return parseFloat(x);};
xr_map.gr_to_c = function(l)
{
  var p={};
  var wp = (l.global_rect.x1 - this.gm.global_rect.x1) / this.gm.global_rect.width;
  window.console.log(wp);
  return p;
}
xr_map.c_to_p = function(c)
{
//  var p={};
//  var wp = c.x / this.gm.width;
//  window.console.log(wp);
//  var p.x = wp * this.gm.bound_rect.width;
}

xr_map.generate_ltx = function()
{
	var ltx = '';
	
	for (var i in this.levels)
	{
		var l = this.levels[i];
		gr = l.global_rect;
		ltx += '[' + i + "]\n";
		ltx += "global_rect = ";
		ltx += gr.x1+ ",";
		ltx += gr.y1+ ",";
		ltx += gr.x2+ ",";
		ltx += gr.y2+ "\n";
		ltx += "\n";
		ltx += "\n";
	}
	
	$('#myta').val(ltx);
}

xr_map.load_js = function()
{
  var new_js = $('#myta').val();
  eval(new_js);
  $('#global_map_div').html("");
  $('#viz_levels_div').html("");
  xr_map.init();
}

xr_map.generate_js = function()
{
  var ltx = '';
  for (var i in xr_map.levels)
  {
    var l = xr_map.levels[i];
    var br = levels[i].bound_rect;
    var gr = l.global_rect;
    ltx += 'levels.' + i + "={\n";
    ltx += "texture:'" +l.texture+ "',\n";
    if (br) ltx += "bound_rect: {x1: " +br.x1+ ", y1: " +br.y1+ ", x2: " +br.x2+ ", y2: " +br.y2+ "},\n";
    ltx += "global_rect: {x1: " +gr.x1+ ", y1: " +gr.y1+ ", x2: " +gr.x2+ ", y2: " +gr.y2+ "}\n";
    ltx += "}\n";
  }
  $('#myta').val(ltx);
}



$(function() {
  xr_map.init();
});