var FairLaneStoreMap = Class.create( {
  initialize: function ( options ) {
    this.options = options || {};
    this.image   = $( this.options.image );
    if ( ! this.image )
      throw( new Error(
        'FairLaneStoreMap - no image element'
      ) );
    if ( ! this.image.useMap )
      throw( new Error(
        'FairLaneStoreMap - image is not a map'
      ) );
    var mapName = this.image.useMap.substr(
      this.image.useMap.indexOf( '#' ) + 1
    );
    var maps = document.getElementsByTagName( 'map' );
    for ( var i=0; i<maps.length; ++i )
      if ( maps[i].name == mapName ) {
        this.map = maps[i];
        break;
      }
    if ( ! this.map )
      throw( new Error(
        'FairLaneStoreMap - failed to find map'
      ) );
    this.map.onmouseover = this.mapMouseOver.bindAsEventListener( this );
    this.map.onmouseout  = this.mouseOut.bindAsEventListener(  this );
  },
  mapMouseOver: function ( e ) {
    var area = Event.element( e );
    if ( area.nodeType              != Node.ELEMENT_NODE ||
         area.tagName.toLowerCase() != 'area'            ||
         area.shape.toLowerCase()   != 'rect'            ||
         area.parentNode            != this.map
       ) return;
    if ( this.hideTimout ) {
      clearTimeout( this.hideTimout );
      delete this.hideTimout;
    }
    if ( ! this.hoverDiv )
      this.hoverDiv = document.body.appendChild(
        Element.create( 'div', {
          onmouseover: function () {
            if ( this.hideTimout ) {
              clearTimeout( this.hideTimout );
              delete this.hideTimout;
            }
          }.bind( this ),
          onmouseout: this.mouseOut.bindAsEventListener( this ),
          style: {
            position: 'absolute',
            left:     '0px',
            top:      '0px',
            width:    '10px',
            height:   '10px',
            zIndex:   4,
            display:  'none',
            backgroundColor: this.options.hoverColor || 'red'
          }
        } )
      );

    if ( ! area._coords ) {
      var coords = area.coords.split( ',' );
      for ( var i=0; i<coords.length; ++i )
        coords[i] = parseInt( coords[i] );
      area._coords = coords;
    }
    var coords = area._coords;

    var imgPos = Position.cumulativeOffset( this.image );

    Element.setStyle( this.hoverDiv, {
      left:   ( imgPos[0] + coords[0] ) + 'px',
      top:    ( imgPos[1] + coords[1] ) + 'px',
      width:  ( coords[2] - coords[0] ) + 'px',
      height: ( coords[3] - coords[1] ) + 'px'
    } );
    Element.show( this.hoverDiv );
    this.divShown = true;
    if ( this.options.onAreaHover )
      this.options.onAreaHover( area );
  },
  mouseOut: function ( e ) {
    if ( ! this.divShown ) return;
    if ( this.hideTimout ) {
      clearTimeout( this.hideTimout );
      delete this.hideTimout;
    }
    this.hideTimout = setTimeout(
      function () {
        delete this.hideTimout;
        Element.hide( this.hoverDiv );
      }.bind( this ), 100
    );
  }
} );