home *** CD-ROM | disk | FTP | other *** search
/ Image Zone / ImageZone.iso / setup.exe / Graphics / html / js / extinfowindow.js < prev    next >
Encoding:
JavaScript  |  2009-12-10  |  23.9 KB  |  655 lines
  1. /*
  2. * ExtInfoWindow Class, v1.0 
  3. *  Copyright (c) 2007, Joe Monahan (http://www.seejoecode.com)
  4. * 
  5. * Licensed under the Apache License, Version 2.0 (the "License");
  6. * you may not use this file except in compliance with the License.
  7. * You may obtain a copy of the License at
  8. * 
  9. *       http://www.apache.org/licenses/LICENSE-2.0
  10. *
  11. * Unless required by applicable law or agreed to in writing, software
  12. * distributed under the License is distributed on an "AS IS" BASIS,
  13. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. * See the License for the specific language governing permissions and
  15. * limitations under the License.
  16. *
  17. * This class lets you add an info window to the map which mimics GInfoWindow
  18. * and allows for users to skin it via CSS.  Additionally it has options to
  19. * pull in HTML content from an ajax request, triggered when a user clicks on
  20. * the associated marker.
  21. */
  22.  
  23.  
  24. /**
  25.  * Creates a new ExtInfoWindow that will initialize by reading styles from css
  26.  *
  27.  * @constructor
  28.  * @param {GMarker} marker The marker associated with the info window
  29.  * @param {String} windowId The DOM Id we will use to reference the info window
  30.  * @param {String} html The HTML contents
  31.  * @param {Object} opt_opts A contianer for optional arguments:
  32.  *    {String} ajaxUrl The Url to hit on the server to request some contents 
  33.  *    {Number} paddingX The padding size in pixels that the info window will leave on 
  34.  *                    the left and right sides of the map when panning is involved.
  35.  *    {Number} paddingY The padding size in pixels that the info window will leave on 
  36.  *                    the top and bottom sides of the map when panning is involved.
  37.  *    {Number} beakOffset The repositioning offset for when aligning the beak element. 
  38.  *                    This is used to make sure the beak lines up correcting if the 
  39.  *                    info window styling containers a border.
  40.  */
  41. function ExtInfoWindow(marker, windowId, html, opt_opts) {
  42.   this.html_ = html;
  43.   this.marker_ = marker;
  44.   this.infoWindowId_ = windowId;
  45.  
  46.   this.options_ = opt_opts == null ? {} : opt_opts;
  47.   this.ajaxUrl_ = this.options_.ajaxUrl == null ? null : this.options_.ajaxUrl;
  48.   this.callback_ = this.options_.ajaxCallback == null ? null : this.options_.ajaxCallback;
  49.  
  50.   this.borderSize_ = this.options_.beakOffset == null ? 0 : this.options_.beakOffset;
  51.   this.paddingX_ = this.options_.paddingX == null ? 0 + this.borderSize_ : this.options_.paddingX + this.borderSize_;
  52.   this.paddingY_ = this.options_.paddingY == null ? 0 + this.borderSize_ : this.options_.paddingY + this.borderSize_;
  53.  
  54.   this.map_ = null;
  55.  
  56.   this.container_ = document.createElement('div');
  57.   this.container_.style.position = 'relative';
  58.   this.container_.style.display = 'none';
  59.  
  60.   this.contentDiv_ = document.createElement('div');
  61.   this.contentDiv_.id = this.infoWindowId_ + '_contents';
  62.   this.contentDiv_.innerHTML = this.html_;
  63.   this.contentDiv_.style.display = 'block';
  64.   this.contentDiv_.style.visibility = 'hidden';
  65.  
  66.   this.wrapperDiv_ = document.createElement('div');
  67. };
  68.  
  69. //use the GOverlay class
  70. ExtInfoWindow.prototype = new GOverlay();
  71.  
  72. /**
  73.  * Called by GMap2's addOverlay method.  Creates the wrapping div for our info window and adds
  74.  * it to the relevant map pane.  Also binds mousedown event to a private function so that they
  75.  * are not passed to the underlying map.  Finally, performs ajax request if set up to use ajax
  76.  * in the constructor.
  77.  * @param {GMap2} map The map that has had this extInfoWindow is added to it.
  78.  */
  79. ExtInfoWindow.prototype.initialize = function(map) {
  80.   this.map_ = map;
  81.  
  82.   this.defaultStyles = {
  83.     containerWidth: this.map_.getSize().width / 2,
  84.     borderSize: 1
  85.   };
  86.  
  87.   this.wrapperParts = {
  88.     tl:{t:0, l:0, w:0, h:0, domElement: null},
  89.     t:{t:0, l:0, w:0, h:0, domElement: null},
  90.     tr:{t:0, l:0, w:0, h:0, domElement: null},
  91.     l:{t:0, l:0, w:0, h:0, domElement: null},
  92.     r:{t:0, l:0, w:0, h:0, domElement: null},
  93.     bl:{t:0, l:0, w:0, h:0, domElement: null},
  94.     b:{t:0, l:0, w:0, h:0, domElement: null},
  95.     br:{t:0, l:0, w:0, h:0, domElement: null},
  96.     beak:{t:0, l:0, w:0, h:0, domElement: null},
  97.     close:{t:0, l:0, w:0, h:0, domElement: null}
  98.   };
  99.  
  100.   for (var i in this.wrapperParts ) {
  101.     var tempElement = document.createElement('div');
  102.     tempElement.id = this.infoWindowId_ + '_' + i;
  103.     tempElement.style.visibility = 'hidden';
  104.     document.body.appendChild(tempElement);
  105.     tempElement = document.getElementById(this.infoWindowId_ + '_' + i);
  106.     var tempWrapperPart = eval('this.wrapperParts.' + i);    
  107.     tempWrapperPart.w = parseInt(this.getStyle_(tempElement, 'width'));
  108.     tempWrapperPart.h = parseInt(this.getStyle_(tempElement, 'height'));
  109.     document.body.removeChild(tempElement);
  110.   }
  111.   for (var i in this.wrapperParts) {
  112.     if (i == 'close' ) {
  113.       //first append the content so the close button is layered above it
  114.       this.wrapperDiv_.appendChild(this.contentDiv_);
  115.     }
  116.     var wrapperPartsDiv = null;
  117.     if (this.wrapperParts[i].domElement == null) {
  118.       wrapperPartsDiv = document.createElement('div');
  119.       this.wrapperDiv_.appendChild(wrapperPartsDiv);
  120.     } else {
  121.       wrapperPartsDiv = this.wrapperParts[i].domElement;
  122.     }
  123.     wrapperPartsDiv.id = this.infoWindowId_ + '_' + i;
  124.     wrapperPartsDiv.style.position = 'absolute';
  125.     wrapperPartsDiv.style.width = this.wrapperParts[i].w + 'px';
  126.     wrapperPartsDiv.style.height = this.wrapperParts[i].h + 'px';
  127.     wrapperPartsDiv.style.top = this.wrapperParts[i].t + 'px';
  128.     wrapperPartsDiv.style.left = this.wrapperParts[i].l + 'px';
  129.     this.wrapperParts[i].domElement = wrapperPartsDiv;
  130.   }
  131.   
  132.   this.map_.getPane(G_MAP_FLOAT_PANE).appendChild(this.container_);
  133.   this.container_.id = this.infoWindowId_;
  134.   var containerWidth  = this.getStyle_(document.getElementById(this.infoWindowId_), 'width');
  135.   this.container_.style.width = (containerWidth == null ? this.defaultStyles.containerWidth : containerWidth);
  136.  
  137.   this.map_.getContainer().appendChild(this.contentDiv_);
  138.   this.contentWidth = this.getDimensions_(this.container_).width;
  139.   this.contentDiv_.style.width = this.contentWidth + 'px';
  140.   this.contentDiv_.style.position = 'absolute';
  141.  
  142.   this.container_.appendChild(this.wrapperDiv_);
  143.  
  144.   GEvent.bindDom(this.container_, 'mousedown', this,this.onClick_);
  145.   GEvent.bindDom(this.container_, 'dblclick', this,this.onClick_);
  146.   GEvent.bindDom(this.container_, 'DOMMouseScroll', this, this.onClick_);
  147.   
  148.  
  149.   GEvent.trigger(this.map_, 'extinfowindowopen');
  150.   if (this.ajaxUrl_ != null ) {
  151.     this.ajaxRequest_(this.ajaxUrl_);
  152.   }
  153. };
  154.  
  155. /**
  156.  * Private function to steal mouse click events to prevent it from returning to the map.
  157.  * Without this links in the ExtInfoWindow would not work, and you could click to zoom or drag 
  158.  * the map behind it.
  159.  * @private
  160.  * @param {MouseEvent} e The mouse event caught by this function
  161.  */
  162. ExtInfoWindow.prototype.onClick_ = function(e) {
  163.   if(navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) {
  164.     window.event.cancelBubble = true;
  165.     window.event.returnValue = false;
  166.   } else {
  167.     //e.preventDefault();
  168.     e.stopPropagation();
  169.   }
  170. };
  171.  
  172. /**
  173.  * Remove the extInfoWindow container from the map pane. 
  174.  */
  175. ExtInfoWindow.prototype.remove = function() {
  176.   if (this.map_.getExtInfoWindow() != null) {
  177.     GEvent.trigger(this.map_, 'extinfowindowbeforeclose');
  178.     
  179.     GEvent.clearInstanceListeners(this.container_);
  180.     if (this.container_.outerHTML) {
  181.       this.container_.outerHTML = ''; //prevent pseudo-leak in IE
  182.     }
  183.     if (this.container_.parentNode) {
  184.       this.container_.parentNode.removeChild(this.container_);
  185.     }
  186.     this.container_ = null;
  187.     GEvent.trigger(this.map_, 'extinfowindowclose');
  188.     this.map_.setExtInfoWindow_(null);
  189.   }
  190. };
  191.  
  192. /**
  193.  * Return a copy of this overlay, for the parent Map to duplicate itself in full. This
  194.  * is part of the Overlay interface and is used, for example, to copy everything in the 
  195.  * main view into the mini-map.
  196.  * @return {GOverlay}
  197.  */
  198. ExtInfoWindow.prototype.copy = function() {
  199.   return new ExtInfoWindow(this.marker_, this.infoWindowId_, this.html_, this.options_);
  200. };
  201.  
  202. /**
  203.  * Draw extInfoWindow and wrapping decorators onto the map.  Resize and reposition
  204.  * the map as necessary. 
  205.  * @param {Boolean} force Will be true when pixel coordinates need to be recomputed.
  206.  */
  207. ExtInfoWindow.prototype.redraw = function(force) {
  208.   if (!force || this.container_ == null) return;
  209.  
  210.   //set the content section's height, needed so  browser font resizing does not affect the window's dimensions
  211.   var contentHeight = this.contentDiv_.offsetHeight;
  212.   this.contentDiv_.style.height = contentHeight + 'px';
  213.  
  214.   //reposition contents depending on wrapper parts.
  215.   //this is necessary for content that is pulled in via ajax
  216.   this.contentDiv_.style.left = this.wrapperParts.l.w + 'px';
  217.   this.contentDiv_.style.top = this.wrapperParts.tl.h + 'px';
  218.   this.contentDiv_.style.visibility = 'visible';
  219.  
  220.   //Finish configuring wrapper parts that were not set in initialization
  221.   this.wrapperParts.tl.t = 0;
  222.   this.wrapperParts.tl.l = 0;
  223.   this.wrapperParts.t.l = this.wrapperParts.tl.w;
  224.   this.wrapperParts.t.w = (this.wrapperParts.l.w + this.contentWidth + this.wrapperParts.r.w) - this.wrapperParts.tl.w - this.wrapperParts.tr.w;
  225.   this.wrapperParts.t.h = this.wrapperParts.tl.h;
  226.   this.wrapperParts.tr.l = this.wrapperParts.t.w + this.wrapperParts.tl.w;
  227.   this.wrapperParts.l.t = this.wrapperParts.tl.h;
  228.   this.wrapperParts.l.h = contentHeight;
  229.   this.wrapperParts.r.l = this.contentWidth + this.wrapperParts.l.w;
  230.   this.wrapperParts.r.t = this.wrapperParts.tr.h;
  231.   this.wrapperParts.r.h = contentHeight;
  232.   this.wrapperParts.bl.t = contentHeight + this.wrapperParts.tl.h;
  233.   this.wrapperParts.b.l = this.wrapperParts.bl.w;
  234.   this.wrapperParts.b.t = contentHeight + this.wrapperParts.tl.h;
  235.   this.wrapperParts.b.w = (this.wrapperParts.l.w + this.contentWidth + this.wrapperParts.r.w) - this.wrapperParts.bl.w - this.wrapperParts.br.w;
  236.   this.wrapperParts.b.h = this.wrapperParts.bl.h;
  237.   this.wrapperParts.br.l = this.wrapperParts.b.w + this.wrapperParts.bl.w;
  238.   this.wrapperParts.br.t = contentHeight + this.wrapperParts.tr.h;
  239.   this.wrapperParts.close.l = this.wrapperParts.tr.l +this.wrapperParts.tr.w - this.wrapperParts.close.w - this.borderSize_;
  240.   this.wrapperParts.close.t = this.borderSize_;
  241.   this.wrapperParts.beak.l = this.borderSize_ + (this.contentWidth / 2) - (this.wrapperParts.beak.w / 2);
  242.   this.wrapperParts.beak.t = this.wrapperParts.bl.t + this.wrapperParts.bl.h - this.borderSize_;
  243.  
  244.   //create the decoration wrapper DOM objects
  245.   //append the styled info window to the container
  246.   for (var i in this.wrapperParts) {
  247.     if (i == 'close' ) {
  248.       //first append the content so the close button is layered above it
  249.       this.wrapperDiv_.insertBefore(this.contentDiv_, this.wrapperParts[i].domElement);
  250.     }
  251.     var wrapperPartsDiv = null;
  252.     if (this.wrapperParts[i].domElement == null) {
  253.       wrapperPartsDiv = document.createElement('div');
  254.       this.wrapperDiv_.appendChild(wrapperPartsDiv);
  255.     } else {
  256.       wrapperPartsDiv = this.wrapperParts[i].domElement;
  257.     }
  258.     wrapperPartsDiv.id = this.infoWindowId_ + '_' + i;
  259.     wrapperPartsDiv.style.position='absolute';
  260.     wrapperPartsDiv.style.width = this.wrapperParts[i].w + 'px';
  261.     wrapperPartsDiv.style.height = this.wrapperParts[i].h + 'px';
  262.     wrapperPartsDiv.style.top = this.wrapperParts[i].t + 'px';
  263.     wrapperPartsDiv.style.left = this.wrapperParts[i].l + 'px';
  264.     this.wrapperParts[i].domElement = wrapperPartsDiv;
  265.   }
  266.  
  267.   //add event handler for the close box
  268.   var currentMarker = this.marker_;
  269.   var thisMap = this.map_;
  270.   GEvent.addDomListener(this.wrapperParts.close.domElement, 'click', 
  271.     function() {
  272.       thisMap.closeExtInfoWindow();
  273.     }
  274.   );
  275.  
  276.   //position the container on the map, over the marker
  277.   var pixelLocation = this.map_.fromLatLngToDivPixel(this.marker_.getPoint());
  278.   this.container_.style.position = 'absolute';
  279.   var markerIcon = this.marker_.getIcon();
  280.   this.container_.style.left = (pixelLocation.x 
  281.     - (this.contentWidth / 2) 
  282.     - markerIcon.iconAnchor.x 
  283.     + markerIcon.infoWindowAnchor.x
  284.   ) + 'px';
  285.  
  286.   this.container_.style.top = (pixelLocation.y
  287.     - this.wrapperParts.bl.h
  288.     - contentHeight
  289.     - this.wrapperParts.tl.h
  290.     - this.wrapperParts.beak.h
  291.     - markerIcon.iconAnchor.y
  292.     + markerIcon.infoWindowAnchor.y
  293.     + this.borderSize_
  294.   ) + 'px';
  295.  
  296.   this.container_.style.display = 'block';
  297.  
  298.   if(this.map_.getExtInfoWindow() != null) {
  299.     this.repositionMap_();
  300.   }
  301. };
  302.  
  303. /**
  304.  * Determine the dimensions of the contents to recalculate and reposition the 
  305.  * wrapping decorator elements accordingly.
  306.  */
  307. ExtInfoWindow.prototype.resize = function(){
  308.   
  309.   //Create temporary DOM node for new contents to get new height
  310.   //This is done because if you manipulate this.contentDiv_ directly it causes visual errors in IE6
  311.   var tempElement = this.contentDiv_.cloneNode(true);
  312.   tempElement.id = this.infoWindowId_ + '_tempContents';
  313.   tempElement.style.visibility = 'hidden';    
  314.   tempElement.style.height = 'auto';
  315.   document.body.appendChild(tempElement);
  316.   tempElement = document.getElementById(this.infoWindowId_ + '_tempContents');
  317.   var contentHeight = tempElement.offsetHeight;
  318.   document.body.removeChild(tempElement);
  319.  
  320.   //Set the new height to eliminate visual defects that can be caused by font resizing in browser
  321.   this.contentDiv_.style.height = contentHeight + 'px';
  322.  
  323.   var contentWidth = this.contentDiv_.offsetWidth;
  324.   var pixelLocation = this.map_.fromLatLngToDivPixel(this.marker_.getPoint());
  325.  
  326.   var oldWindowHeight = this.wrapperParts.t.domElement.offsetHeight + this.wrapperParts.l.domElement.offsetHeight + this.wrapperParts.b.domElement.offsetHeight;    
  327.   var oldWindowPosTop = this.wrapperParts.t.domElement.offsetTop;
  328.  
  329.   //resize info window to look correct for new height
  330.   this.wrapperParts.l.domElement.style.height = contentHeight + 'px';
  331.   this.wrapperParts.r.domElement.style.height = contentHeight + 'px';
  332.   var newPosTop = this.wrapperParts.b.domElement.offsetTop - contentHeight;
  333.   this.wrapperParts.l.domElement.style.top = newPosTop + 'px';
  334.   this.wrapperParts.r.domElement.style.top = newPosTop + 'px';
  335.   this.contentDiv_.style.top = newPosTop + 'px';
  336.   windowTHeight = parseInt(this.wrapperParts.t.domElement.style.height);
  337.   newPosTop -= windowTHeight;
  338.   this.wrapperParts.close.domElement.style.top = newPosTop + this.borderSize_ + 'px';
  339.   this.wrapperParts.tl.domElement.style.top = newPosTop + 'px';
  340.   this.wrapperParts.t.domElement.style.top = newPosTop + 'px';
  341.   this.wrapperParts.tr.domElement.style.top = newPosTop + 'px';
  342.  
  343.   this.repositionMap_();
  344. };
  345.  
  346. /**
  347.  * Check to see if the displayed extInfoWindow is positioned off the viewable 
  348.  * map region and by how much.  Use that information to pan the map so that 
  349.  * the extInfoWindow is completely displayed.
  350.  * @private
  351.  */
  352. ExtInfoWindow.prototype.repositionMap_ = function(){
  353.   //pan if necessary so it shows on the screen
  354.   var mapNE = this.map_.fromLatLngToDivPixel(
  355.     this.map_.getBounds().getNorthEast()
  356.   );
  357.   var mapSW = this.map_.fromLatLngToDivPixel(
  358.     this.map_.getBounds().getSouthWest()
  359.   );
  360.   var markerPosition = this.map_.fromLatLngToDivPixel(
  361.     this.marker_.getPoint()
  362.   );
  363.  
  364.   var panX = 0;
  365.   var panY = 0;
  366.   var paddingX = this.paddingX_;
  367.   var paddingY = this.paddingY_;
  368.   var infoWindowAnchor = this.marker_.getIcon().infoWindowAnchor;
  369.   var iconAnchor = this.marker_.getIcon().iconAnchor;
  370.  
  371.   //test top of screen    
  372.   var windowT = this.wrapperParts.t.domElement;
  373.   var windowL = this.wrapperParts.l.domElement;
  374.   var windowB = this.wrapperParts.b.domElement;
  375.   var windowR = this.wrapperParts.r.domElement;
  376.   var windowBeak = this.wrapperParts.beak.domElement;
  377.  
  378.   var offsetTop = markerPosition.y - ( -infoWindowAnchor.y + iconAnchor.y +  this.getDimensions_(windowBeak).height + this.getDimensions_(windowB).height + this.getDimensions_(windowL).height + this.getDimensions_(windowT).height + this.paddingY_);
  379.   if (offsetTop < mapNE.y) {
  380.     panY = mapNE.y - offsetTop;
  381.   } else {
  382.     //test bottom of screen
  383.     var offsetBottom = markerPosition.y + this.paddingY_;
  384.     if (offsetBottom >= mapSW.y) {
  385.       panY = -(offsetBottom - mapSW.y);
  386.     }
  387.   }
  388.  
  389.   //test right of screen
  390.   var offsetRight = Math.round(markerPosition.x + this.getDimensions_(this.container_).width/2 + this.getDimensions_(windowR).width + this.paddingX_ + infoWindowAnchor.x - iconAnchor.x);
  391.   if (offsetRight > mapNE.x) {
  392.     panX = -( offsetRight - mapNE.x);
  393.   } else {
  394.     //test left of screen
  395.     var offsetLeft = - (Math.round( (this.getDimensions_(this.container_).width/2 - this.marker_.getIcon().iconSize.width/2) + this.getDimensions_(windowL).width + this.borderSize_ + this.paddingX_) - markerPosition.x - infoWindowAnchor.x + iconAnchor.x);
  396.     if( offsetLeft < mapSW.x) {
  397.       panX = mapSW.x - offsetLeft;
  398.     }
  399.   }
  400.  
  401.   if (panX != 0 || panY != 0 && this.map_.getExtInfoWindow() != null ) {
  402.     this.map_.panBy(new GSize(panX,panY));
  403.   }
  404. };
  405.  
  406. /**
  407.  * Private function that handles performing an ajax request to the server.  The response
  408.  * information is assumed to be HTML and is placed inside this extInfoWindow's contents region.
  409.  * Last, check to see if the height has changed, and resize the extInfoWindow accordingly.
  410.  * @private
  411.  * @param {String} url The Url of where to make the ajax request on the server
  412.  */
  413. ExtInfoWindow.prototype.ajaxRequest_ = function(url){
  414.   var thisMap = this.map_;
  415.   var thisCallback = this.callback_;
  416.   GDownloadUrl(url, function(response, status){
  417.     var infoWindow = document.getElementById(thisMap.getExtInfoWindow().infoWindowId_ + '_contents');
  418.     if (response == null || status == -1 ) {
  419.       infoWindow.innerHTML = '<span class="error">ERROR: The Ajax request failed to get HTML content from "' + url + '"</span>';
  420.     } else {
  421.       infoWindow.innerHTML = response;
  422.     }
  423.     if (thisCallback != null ) {
  424.       thisCallback();
  425.     }
  426.     thisMap.getExtInfoWindow().resize();
  427.     GEvent.trigger(thisMap, 'extinfowindowupdate');
  428.   });
  429. };
  430.  
  431. /**
  432.  * Private function derived from Prototype.js to get a given element's
  433.  * height and width
  434.  * @private
  435.  * @param {Object} element The DOM element that will have height and 
  436.  *                    width will be calculated for it.
  437.  * @return {Object} Object with keys: width, height
  438.  */
  439. ExtInfoWindow.prototype.getDimensions_ = function(element) {
  440.   var display = this.getStyle_(element, 'display');
  441.   if (display != 'none' && display != null) { // Safari bug
  442.     return {width: element.offsetWidth, height: element.offsetHeight};
  443.   }
  444.  
  445.   // All *Width and *Height properties give 0 on elements with display none,
  446.   // so enable the element temporarily
  447.   var els = element.style;
  448.   var originalVisibility = els.visibility;
  449.   var originalPosition = els.position;
  450.   var originalDisplay = els.display;
  451.   els.visibility = 'hidden';
  452.   els.position = 'absolute';
  453.   els.display = 'block';
  454.   var originalWidth = element.clientWidth;
  455.   var originalHeight = element.clientHeight;
  456.   els.display = originalDisplay;
  457.   els.position = originalPosition;
  458.   els.visibility = originalVisibility;
  459.   return {width: originalWidth, height: originalHeight};
  460. };
  461.  
  462. /**
  463.  * Private function derived from Prototype.js to get a given element's
  464.  * value that is associated with the passed style
  465.  * @private
  466.  * @param {Object} element The DOM element that will be checked.
  467.  * @param {String} style The style name that will be have it's value returned.
  468.  * @return {Object}
  469.  */
  470. ExtInfoWindow.prototype.getStyle_ = function(element, style) {
  471.   var found = false;
  472.   style = this.camelize_(style);
  473.   var value = element.style[style];
  474.   if (!value) {
  475.     if (document.defaultView && document.defaultView.getComputedStyle) {
  476.       var css = document.defaultView.getComputedStyle(element, null);
  477.       value = css ? css[style] : null;
  478.     } else if (element.currentStyle) {
  479.       value = element.currentStyle[style];
  480.     }
  481.   }
  482.   if((value == 'auto') && (style == 'width' || style == 'height') && (this.getStyle_(element, 'display') != 'none')) {
  483.     if( style == 'width' ) {
  484.       value = element.offsetWidth;
  485.     }else {
  486.       value = element.offsetHeight;
  487.     }
  488.   }
  489.   return (value == 'auto') ? null : value;
  490. };
  491.  
  492. /**
  493.  * Private function pulled from Prototype.js that will change a hyphened
  494.  * style name into camel case.
  495.  * @private
  496.  * @param {String} element The string that will be parsed and made into camel case
  497.  * @return {String}
  498.  */
  499. ExtInfoWindow.prototype.camelize_ = function(element) {
  500.   var parts = element.split('-'), len = parts.length;
  501.   if (len == 1) return parts[0];
  502.   var camelized = element.charAt(0) == '-'
  503.     ? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
  504.     : parts[0];
  505.  
  506.   for (var i = 1; i < len; i++) {
  507.     camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);
  508.   }
  509.   return camelized;
  510. };
  511.  
  512. GMap.prototype.ExtInfoWindowInstance_ = null;
  513. GMap.prototype.ClickListener_ = null;
  514. GMap.prototype.InfoWindowListener_ = null;
  515.  
  516. /**
  517.  * Creates a new instance of ExtInfoWindow for the GMarker.  Register the newly created 
  518.  * instance with the map, ensuring only one window is open at a time. If this is the first
  519.  * ExtInfoWindow ever opened, add event listeners to the map to close the ExtInfoWindow on 
  520.  * zoom and click, to mimic the default GInfoWindow behavior.
  521.  *
  522.  * @param {GMap} map The GMap2 object where the ExtInfoWindow will open
  523.  * @param {String} cssId The id we will use to reference the info window
  524.  * @param {String} html The HTML contents
  525.  * @param {Object} opt_opts A contianer for optional arguments:
  526.  *    {String} ajaxUrl The Url to hit on the server to request some contents 
  527.  *    {Number} paddingX The padding size in pixels that the info window will leave on 
  528.  *                    the left and right sides of the map when panning is involved.
  529.  *    {Number} paddingX The padding size in pixels that the info window will leave on 
  530.  *                    the top and bottom sides of the map when panning is involved.
  531.  *    {Number} beakOffset The repositioning offset for when aligning the beak element. 
  532.  *                    This is used to make sure the beak lines up correcting if the 
  533.  *                    info window styling containers a border.
  534.  */
  535.  
  536. GMarker.prototype.openExtInfoWindow = function(map, cssId, html, opt_opts) {
  537.  
  538.     if (map == null) {
  539.  
  540.         throw 'Error in GMarker.openExtInfoWindow: map cannot be null';
  541.  
  542.         return false;
  543.  
  544.     }
  545.  
  546.     if (cssId == null || cssId == '') {
  547.  
  548.         throw 'Error in GMarker.openExtInfoWindow: must specify a cssId';
  549.  
  550.         return false;
  551.  
  552.     }
  553.  
  554.  
  555.  
  556.     map.closeInfoWindow();
  557.  
  558.     if (map.getExtInfoWindow() != null) {
  559.  
  560.         map.closeExtInfoWindow();
  561.  
  562.     }
  563.  
  564.     if (map.getExtInfoWindow() == null) {
  565.  
  566.         map.setExtInfoWindow_(new ExtInfoWindow(
  567.  
  568.       this,
  569.  
  570.       cssId,
  571.  
  572.       html,
  573.  
  574.       opt_opts
  575.  
  576.     ));
  577.  
  578.         if (map.ClickListener_ == null) {
  579.  
  580.             //listen for map click, close ExtInfoWindow if open
  581.  
  582.             map.ClickListener_ = GEvent.addListener(map, 'click',
  583.  
  584.       function(event) {
  585.  
  586.           if (!event && map.getExtInfoWindow() != null) {
  587.  
  588.               map.closeExtInfoWindow();
  589.  
  590.           }
  591.  
  592.       }
  593.  
  594.       );
  595.  
  596.         }
  597.  
  598.         if (map.InfoWindowListener_ == null) {
  599.  
  600.             //listen for default info window open, close ExtInfoWindow if open
  601.  
  602.             map.InfoWindowListener_ = GEvent.addListener(map, 'infowindowopen',
  603.  
  604.       function(event) {
  605.  
  606.           if (map.getExtInfoWindow() != null) {
  607.  
  608.               map.closeExtInfoWindow();
  609.  
  610.           }
  611.  
  612.       }
  613.  
  614.       );
  615.  
  616.         }
  617.  
  618.         map.addOverlay(map.getExtInfoWindow());
  619.  
  620.     }
  621.  
  622. };
  623.  
  624. /**
  625.  * Remove the ExtInfoWindow instance
  626.  * @param {GMap2} map The map where the GMarker and ExtInfoWindow exist
  627.  */
  628. GMarker.prototype.closeExtInfoWindow = function(map) {
  629.   if( map.getExtInfWindow() != null ){
  630.     map.closeExtInfoWindow();
  631.   }
  632. };
  633.  
  634. /**
  635.  * Get the ExtInfoWindow instance from the map
  636.  */
  637. GMap2.prototype.getExtInfoWindow = function(){
  638.   return this.ExtInfoWindowInstance_;
  639. };
  640. /**
  641.  * Set the ExtInfoWindow instance for the map
  642.  * @private
  643.  */
  644. GMap2.prototype.setExtInfoWindow_ = function( extInfoWindow ){
  645.   this.ExtInfoWindowInstance_ = extInfoWindow;
  646. }
  647. /**
  648.  * Remove the ExtInfoWindow from the map
  649.  */
  650. GMap2.prototype.closeExtInfoWindow = function(){
  651.   if( this.getExtInfoWindow() != null ){
  652.     this.ExtInfoWindowInstance_.remove();
  653.   }
  654. };
  655.