var ge;
var placemarks = [];

//Note:
/*
    Latitude: Smaller number will move left, larger will move right
    Longitude: 
    zoom: smaller - zoom in, larger - zoom out
	Use google earth to help coordinate the finding process
*/

var properties = [];

properties['royal_hawaiian'] = {lat: 21.277199, lon: -157.828799, rotation: 0, altitude: 70, zoom: 200, 
    markers: [
        {label: 'The Royal Hawaiian', content: "The Royal Hawaiian", lat:  21.277199, lon: -157.828799}
    ]
};

window.addEvent('domready', function(){
    createNativeHTMLButton(100, 100, 210, 40); // x, y, width, height
});


currProperty = "";
google.load("earth", "1");

function loadGE(property) {
    currProperty = property;
    if(!properties[currProperty])
        return;
    
    document.getElementById('map3d').innerHTML = '';
    google.earth.createInstance('map3d', initCallback, failureCallback);
}

function initCallback(instance) {
    
    
    ge = instance;
    ge.getWindow().setVisibility(true);

    
    
    // add a navigation control
    ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

    // add some layers
    ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
    ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

    //fly to Hilton Anaheim
    var la = ge.createLookAt('');
    
    var property = properties[currProperty];
    
    la.set(property.lat, property.lon, 18, ge.ALTITUDE_RELATIVE_TO_GROUND, property.rotation, property.altitude, property.zoom);
    ge.getView().setAbstractView(la);

    ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);


    for(var i = 0; i < property.markers.length; i++)
    {
    
        var obj = property.markers[i];
        createPlacemark(obj.label, obj.content, obj.lat, obj.lon);
    }
    
    

}

function addDomListener(element, eventName, listener) {
  if (element.addEventListener)
    element.addEventListener(eventName, listener, false);
  else if (element.attachEvent)
    element.attachEvent('on' + eventName, listener);
}

 
function getElementRect(element) {
  var left = element.offsetLeft;
  var top = element.offsetTop;
  
  var p = element.offsetParent;
  while (p && p != document.body.parentNode) {
    if (isFinite(p.offsetLeft) && isFinite(p.offsetTop)) {
      left += p.offsetLeft;
      top += p.offsetTop;
    }
    
    p = p.offsetParent;
  }
  
  return { left: left, top: top,
           width: element.offsetWidth, height: element.offsetHeight };
}



function createNativeHTMLButton(x, y, width, height) {
  // create the button
  /*var mapContainer = $('map3d');
  var iframe = new Element('iframe', {
    src: '',
    frameBorder: 1,
    
  });*/
  
  /*var button = document.createElement('a');
  button.href = '#';
  button.style.backgroundColor = 'blue';
  
  // create an IFRAME shim for the button
  var iframeShim = document.createElement('iframe');
  iframeShim.frameBorder = 0;
  iframeShim.scrolling = 'no';
  iframeShim.src = (navigator.userAgent.indexOf('MSIE 6') >= 0) ?
      '' : 'javascript:void(0);';

  // position the button and IFRAME shim
  var pluginRect = getElementRect(document.getElementById('map3d'));
  button.style.position = iframeShim.style.position = 'absolute';
  button.style.left = iframeShim.style.left = (pluginRect.left + x) + 'px';
  button.style.top = iframeShim.style.top = (pluginRect.top + y) + 'px';
  button.style.width = iframeShim.style.width = width + 'px';
  button.style.height = iframeShim.style.height = height + 'px';
  
  // set up z-orders
  button.style.zIndex = 10;
  iframeShim.style.zIndex = button.style.zIndex - 1;
  
  // set up click handler
  addDomListener(button, 'click', function(evt) {
    alert('You clicked the native HTML button!');
    
    if (evt.preventDefault) {
      evt.preventDefault();
      evt.stopPropagation();
    }
    return false;
  });
  
  // add the iframe shim and button
  document.body.appendChild(button);
  document.body.appendChild(iframeShim);*/
}

function failureCallback(errorCode) {
}



function createPlacemark(label, content, lat, lon) {
    var placemark = ge.createPlacemark('');
    placemark.setName(label);
    ge.getFeatures().appendChild(placemark);
    placemark.setDescription(content);


    // Create style map for placemark
    var icon = ge.createIcon('');
    icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
    var style = ge.createStyle('');
    style.getIconStyle().setIcon(icon);
    placemark.setStyleSelector(style);

    // Create point
    var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
    var point = ge.createPoint('');
    point.setLatitude(lat);
    point.setLongitude(lon);
    placemark.setGeometry(point);
    
    google.earth.addEventListener(placemark, 'click', function(event) {
        // prevent the default balloon from popping up
        event.preventDefault();

        var balloon = ge.createHtmlStringBalloon('');
        balloon.setFeature(event.getTarget());
        balloon.setMaxWidth(300);
        balloon.setContentString(content);
        ge.setBalloon(balloon);
    });
}