JavaScript/Ajax mouse selectable objects

I want to implement a JavaScript/Ajax-based client side script/module that would allow me to do the following:

1. On an html page lay out a “floor plan”, with color rectangles representing “rooms”
2. On each rectangle I need to display its number, its status (vacant or taken) and the time remaining if taken (the time counting will be done on the server, hence the Ajax)

What I need is a recommendation of a tutorial/manual that explains the graphical part of the above; that is how to draw the mouse selectable rectangl开发者_StackOverflow社区es; respond to mouse events, update the text fields.

Flash and Action Script would be more suitable for that task...

If want to stick to Javascript only I suggest to generate flor plan as set of divs with specific IDs (like room ID) and execute AJAX request for status onmouseover (could be overkill) or onclick

So you need the ability to create clickable rectangles. You may wish to use jQuery as it is a very fast and flexible dom manipulation library. Every dom element is capable of capturing a dom event (like click). The floor plan sounds like a good use case for the position : absolute css rule. So maybe think of it like the following:

/**
 * Room class represents the room.
 */
var url = "/room/rent";
function Room( id, dimensions, position, color ) {
  // keep track of the state inside the closure
  var status = 'vacant',
      id = 0,
      dom = $('#room-template').clone().attr('id', 'room-' + id ),
      remaining = null;

  function start_timer( callback ){

    var room = this;
    // the url would be the end point in your server to get the time to expire
    $.post( url, { id : id }, {
      success : function occupied( end ){
        start = new Date().getTime();
        if( start < end ){
          remaining = end - start;
          room.render();
          setTimeout( occupied, 1, end );
          return;
        }
        callback.call(room);
      },
      error : function(){
        // since we know we don't have anything working 
        // we can just try and fake it with 5 seconds
        end = new Date().getTime() + 5000;
        function occupied( end ){
          start = new Date().getTime();
          if( start < end ){
            remaining = end - start;
            room.render();
            setTimeout( occupied, 1, end );
            return;
          }
          callback.call(room);
        }
      }
    });
  }
  this.render = function(){
    dom.find('status').text(status)
       .find('remaining').text(remaining || '');
  };
  this.enter = function( event ){
    status = 'occupied';
    start_timer( this.exit );
  };
  this.exit = function(){
    remaining = null;
    status = 'vacant';
    this.render();
  };
  dom.css({'background-color': color, 
            height : dimensions.height, 
            width : dimensions.width,
            top : position.top,
            left : position.left})
     .appendTo('#floor-plan')
     .bind('click', this.enter)
     .find('.id').text('id:' + id);
}

var x = new Room(0, {width : 100, height : 100}, {top : 20, left : 30}, 'red');

the above JavaScript will get you started (requires jQuery, though this can easily be replaced). After that you need to get a basic html template.

//////////////////////HTML TEMPLATE////////////////////////////

<div id="room-template" class="room">
  <span class="id"></span>
  <span class="status"></span>
  <span class="remaining"></span>
</div>

great, now that is done you need the basic style for the room.

/////////////// CSS FILE ///////////////
.room {
  position : absolute;
}

So now that we have a basic skeleton for how this might work we could implement it with some data like this:

var floor_plan = [
  {width : 100, height: 100, top : 0, left : 0, color : 'red' },
  {width : 100, height: 100, top : 0, left : 100, color : 'blue' },
  {width : 100, height: 100, top : 0, left : 200, color : 'gray' },
  {width : 100, height: 100, top : 100, left : 0, color : 'pink' },
  {width : 100, height: 100, top : 100, left : 100, color : 'orange' },
  {width : 100, height: 100, top : 100, left : 200, color : 'green' }
];

for( var i = 0, room; room = floor_plan[i]; i++) {
  var x = new Room( i, 
                   {width : room.width, height : room.width}, 
                   {top : room.top, left : room.left}, 
                   room.color);
  floor_plan[i] = x;
}

There is a bit of a test implementation running at http://jsfiddle.net/Wurd5/4/