// Hotspot image properties
var hotspot_img_width = 36;
var hotspot_img_height = 33;

var Floorplan = Base.extend({
  constructor: function(floorplan_id) {
    this.floorplan = $('floorplan_' + floorplan_id);
    Event.observe(window, 'resize', function() { this.repositionHotspots(); }.bind(this));

    // Preload images
    this.photos = new Array;
    this.photo_count = 0;
  },

  repositionHotspots: function() {
    var floorplan_offset = this.floorplan.cumulativeOffset();

    for (var i = 1; i <= this.photo_count; i++) {
      var hotspot_image = $("hotspot_" + this.photos[i]['photo_id']);
      hotspot_image.style.left = floorplan_offset[0] + this.photos[i]['coord_x'] + 'px';
      hotspot_image.style.top = floorplan_offset[1] + this.photos[i]['coord_y'] + 'px';

    }
  },

  createHotspot: function(photo_id, coord_x, coord_y, title) {
    this.photo_count++;
    this.photos[this.photo_count] = new Array();
    this.photos[this.photo_count]['image'] = new Image;
    this.photos[this.photo_count]['image'].src = 'http://www.4virginiahomes.com/floorplans/images/plans/ph_' + photo_id + '_t.jpg';
    this.photos[this.photo_count]['photo_id'] = photo_id;
    this.photos[this.photo_count]['coord_x'] = coord_x;
    this.photos[this.photo_count]['coord_y'] = coord_y;
    this.photos[this.photo_count]['title'] = title;

    var floorplan_offset = this.floorplan.cumulativeOffset();

    var hotspot_link = document.createElement('a');
    hotspot_link.setAttribute('href', '/floorplans/images/plans/ph_' + photo_id + '.jpg');
    hotspot_link.setAttribute('rel', 'lightbox');
    hotspot_link.setAttribute('title', title);
    this.floorplan.appendChild(hotspot_link);

    var hotspot_image = new Image();
    hotspot_image.id = "hotspot_" + photo_id;
    hotspot_image.src = "http://www.4virginiahomes.com/floorplans/images/hotspot.png";
    hotspot_image.className = "hotspot";
    hotspot_image.style.border = "0px";
    hotspot_image.style.display = "block";
    hotspot_image.style.position = "absolute";
    hotspot_image.style.left = floorplan_offset[0] + coord_x + 'px';
    hotspot_image.style.top = floorplan_offset[1] + coord_y + 'px';
    hotspot_link.appendChild(hotspot_image);

    Event.observe("hotspot_" + photo_id, 'mouseover', function (event) { this.showThumbnail(photo_id, coord_x, coord_y, title); }.bind(this));
    Event.observe("hotspot_" + photo_id, 'mouseout', function (event) { this.hideThumbnail(photo_id); }.bind(this));
  },

  showThumbnail: function(photo_id, coord_x, coord_y, title) {
    var floorplan_offset = this.floorplan.cumulativeOffset();

    var hotspot = document.createElement('div');
    hotspot.id = "thumbnail_" + photo_id;
    hotspot.style.border = "1px solid #000000";
    hotspot.style.display = "block";
    hotspot.style.position = "absolute";
    hotspot.style.left = hotspot_img_width + floorplan_offset[0] + coord_x + 'px';
    hotspot.style.top = hotspot_img_height + floorplan_offset[1] + coord_y + 'px';
    this.floorplan.appendChild(hotspot);

    var hotspot_link = document.createElement('a');
    hotspot_link.setAttribute('href', 'http://www.4virginiahomes.com/floorplans/images/plans/ph_' + photo_id + '.jpg');
    hotspot_link.setAttribute('rel', 'lightbox');
    hotspot_link.setAttribute('title', title);
    hotspot.appendChild(hotspot_link);

    var hotspot_image = new Image();
    hotspot_image.id = "ph_" + photo_id;
    hotspot_image.src = "http://www.4virginiahomes.com/floorplans/images/plans/ph_" + photo_id + "_t.jpg";
    hotspot_image.style.position = "relative";
    hotspot_image.style.border = "0px";
    hotspot_image.style.display = "block";
    hotspot_link.appendChild(hotspot_image);

    var scrolltop = 0;
    var scrollleft = 0;
    var doc_w=0;
    var doc_h=0;

    if (window.event) {
      // IE
      scrolltop = window.document.body.scrollTop;
      scrollleft = window.document.body.scrollLeft;
      doc_w=window.document.body.clientWidth;
      doc_h=window.document.body.clientHeight;
    } else {
      // FF
      scrolltop = document.documentElement.scrollTop;
      scrollleft = document.documentElement.scrollLeft;
      doc_w = window.document.width;
      doc_h = window.document.height;
    }

    if ((doc_w + scrollleft) < (coord_x + floorplan_offset[0] + hotspot.offsetWidth + hotspot_img_width)) {
      hotspot.style.left = (coord_x + floorplan_offset[0] - hotspot.offsetWidth) + 'px';
    }

    if ((doc_h + scrolltop) < (coord_y + floorplan_offset[1] + hotspot.offsetHeight + hotspot_img_height)) {
      hotspot.style.top = (coord_y + floorplan_offset[1] - hotspot.offsetHeight) + 'px';
    }

  },

  hideThumbnail: function(photo_id) {
    $('thumbnail_' + photo_id).remove();
  },

  load: function(directory) {
    if (document.images) {
      names = load.arguments
      pictures=new Array;
      for (z = 1; z < names.length; z++) {
        pictures[z] = new Image;
        pictures[z].src = directory + names[z];
      }
    }    
  }

});