function ZangMapEditor(editAreaWidth,editAreaHeight,roomTypes){
 this.roomTypes=roomTypes;
 this.rooms;
 this.map_map=0;
 this.map_x=0;
 this.map_y=0;
 this.map_z=0;
 this.map_width=editAreaWidth;
 this.map_height=editAreaHeight;
 this.editRoomWidth=18;
 this.editRoomHeight=18;
 this.initialized=false;
}

ZangMapEditor.prototype._initialize=function(){
 if(!this.initialized){
  this.initialized=true;
  this._initializeStyles();
  var self=this;
  ["roomname","shortdesc","longdesc","roomcolour","buildernote"].each(function(v,i){
//   Event.observe(v,'focus',function(e){});
//   Event.observe(v,'change',function(e){self._roomInfoChanged();});
//   Event.observe(v,'blur',function(e){});
  });
 }
}

ZangMapEditor.prototype._roomInfoChanged=function(){

 alert('this.selectedRoom.id: '+this.selectedRoom.id
  +" roomid: "+$('roomid').value
 );
 var room_loc=this.selectedRoom.id.split("_");
 var room=this.rooms[room_loc[0]][room_loc[1]];

 var imageurl='zangroomdoors.php?exits='+room.exits;
// mapHTML.push('<div id="'+x+'_'+y+'" style="background-image:url('+imageurl+');background-color:#'+room.c.toHexColor()+'"></div>');

 alert('this.selectedRoom.style.backgroundImage: '+this.selectedRoom.style.backgroundImage);
 this.selectedRoom.style.backgroundImage="url("+imageurl+"&checked=1)";
 alert('this.selectedRoom.style.backgroundImage: '+this.selectedRoom.style.backgroundImage);
}

ZangMapEditor.prototype.setMapPos=function(map_map,map_x,map_y,map_z){
 this.map_map=parseInt(map_map);
 this.map_x=parseInt(map_x);
 this.map_y=parseInt(map_y);
 this.map_z=parseInt(map_z);
};

ZangMapEditor.prototype.setEditArea=function(editArea){
 this.editArea=$(editArea);
};

ZangMapEditor.prototype.loadRooms=function(firstLoad){
 if(!firstLoad || !this.initialized){
  $('loadbutton').value="Loading...";
  var self=this;
  new Ajax.Request("zangmapeditorserver.php",
   {method:"get"
   ,parameters:
     "map_map="+ this.map_map
    +"&map_x1="+ this.map_x
    +"&map_x2="+(this.map_x+this.map_width-1)
    +"&map_y1="+ this.map_y
    +"&map_y2="+(this.map_y+this.map_height-1)
    + "&map_z="+ this.map_z
   ,onComplete:function(resp){self._finishLoadRooms(resp);}
  });
  this._initialize();
 }
}

ZangMapEditor.prototype._finishLoadRooms=function(resp){
 this._initializeRooms(resp.responseText);
 this._initializeEditArea();
 $('loadbutton').value="Load map area";
}

ZangMapEditor.prototype._initializeRooms=function(jsonString){
 this.roomsJSON=eval("("+ jsonString +")");
 this.rooms=new Array();
 for(var x=0;x<this.map_width;x++){this.rooms[x]=new Array();}
 for(var i=0;i<this.roomsJSON.length;i++){
//  this.roomsJSON[i].c=this.roomsJSON[i].c.toHexColor();
  this.roomsJSON[i].x=parseInt(this.roomsJSON[i].x);
  this.roomsJSON[i].y=parseInt(this.roomsJSON[i].y);
  this.rooms[this.roomsJSON[i].x][this.roomsJSON[i].y]=this.roomsJSON[i];
 }
}

ZangMapEditor.prototype._initializeStyles=function(){
 Zangdom.appendStyle('div#editarea','display:block;width : '+this.map_width*this.editRoomWidth+'px; height : '+this.map_height*this.editRoomHeight+'px;');
 Zangdom.appendStyle('#editarea div','width : '+this.editRoomWidth+'px; height : '+this.editRoomHeight+'px;');
 Zangdom.appendStyle('.roomselector','display:none;width:'+(this.editRoomWidth-4)+'px !important;width /**/:'+this.editRoomWidth+'px; height:'+(this.editRoomHeight-4)+'px !important;height /**/:'+this.editRoomHeight+'px;');
 var map_pos=Position.cumulativeOffset(this.editArea);
 Zangdom.appendStyle('#roomedit','display:block;left:'+(map_pos[0]+this.map_width*this.editRoomWidth)+'px;top:'+map_pos[1]+'px');
 Element.show(this.editArea);
}

ZangMapEditor.prototype._initializeEditArea=function(){
 var mapHTML=new Array();
 for(var y=this.map_width-1;y>=0;y--){
  for(var x=0;x<this.map_height;x++){
   var room=this.rooms[x][y];
   if(room){
    var imageurl='zangroomdoors.php?exits='+room.exits;
    mapHTML.push('<div id="'+x+'_'+y+'" style="background-image:url('+imageurl+');background-color:#'+room.c+'"></div>');
   }else{
    mapHTML.push('<div id="'+x+'_'+y+'"></div>');
   }
  }
 }
 this.editArea.innerHTML=mapHTML.join("");
 var roomDivs=this.editArea.getElementsByTagName('div'); 
 var self=this;
 for(var i=0;i<roomDivs.length;i++){
  Event.observe(roomDivs[i],"click",function(e){self.selectRoom(e);});
 }
 this.selectRoom(roomDivs[0]);
}

ZangMapEditor.prototype._checkRoomChanged=function(e){
 if(this.selectedRoom){
  var room_loc=this.selectedRoom.id.split("_");
  var room=this.rooms[room_loc[0]][room_loc[1]];
  if(room){
   var changed=false;
   [["roomname","name"]
   ,["shortdesc","sde"]
   ,["longdesc","de"]
   ,["roomcolour","c"]
   ,["buildernote","bn"]].each(function(v,i){
    if($F(v[0])!=room[v[1]]){
     changed=true;
     room[v[1]]=$F(v[0]);
    }
   });
   if(changed){
    var imageurl='zangroomdoors.php?exits='+room.exits+"&checked=1";
    this.selectedRoom.style.backgroundImage="url("+imageurl+")";
   }
  }
 }
 self.roomInfoChanged=false;
}

ZangMapEditor.prototype.selectRoom=function(e){
 this._checkRoomChanged();
 if(e.type!=undefined){e=Event.element(e);}
 this.selectedRoom=e;
 var room_pos=Position.cumulativeOffset(e);
 $('selectedroom').style.left=room_pos[0]+"px";
 $('selectedroom').style.top=room_pos[1]+"px";
 $('selectedroom').style.display="block"
 var room_loc=e.id.split("_");
 var room=this.rooms[room_loc[0]][room_loc[1]];
 if(room){
  $('roomproperties').show();
  $('createroom').hide();
  $('roomid').value=e.id;
  $('roomname').value=room.name;
  $('shortdesc').value=room.sde;
  $('roomcolour').value=room.c;
  $('longdesc').value=room.de;
  $('buildernote').value=room.bn;
 }else{
//  Element.hide
//  $('roomproperties').hide();
//  $('createroom').show();

  $('roomid').value='';
  $('roomname').value='';
  $('shortdesc').value='';
  $('roomcolour').value='';
  $('longdesc').value='';
  $('buildernote').value='';

 }
}