var ge;
var gex;
var photoOverlays;

var fullScreenState = false;
var noFullScreenIcon = null;
var fullScreenIcon = null;

google.load("earth", "1");
google.load("maps", "2");

google.setOnLoadCallback(init);

function init() {
    var content = document.getElementById('content');
    google.earth.createInstance('content', initCB, failureCB);

}

function initCB(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);

    gex = new GEarthExtensions(ge);

    createFullScreenIcon();
    createNormalScreenIcon();

    google.earth.addEventListener(ge.getWindow(), "click", handleMouseClick);
	
	      // fly to Santa Cruz
      var la = ge.createLookAt('');
      la.set(51.508962818286, -0.127997696399689,
        0, // altitude
        ge.ALTITUDE_RELATIVE_TO_GROUND,
        0, // heading
        0, // straight-down tilt
        27500000 // range (inverse of zoom)
        );
      ge.getView().setAbstractView(la);

    // create the photo overlay by fetching it out of a KML file
    /*
    var href = 'http://www.360cities.net/ge_kml/' +
               'image/red-phone-box.kml';
    */
    var url = encodeURI("http://www.vrwebdesign.co.uk/london-google-earth-tour/tom-mills.kml");

    // alert("Loading KML from "+url);    
    google.earth.fetchKml(ge, url, function(kmlObject) {

        if (!kmlObject) {
            // wrap alerts in API callbacks and event handlers
            // in a setTimeout to prevent deadlock in some browsers
            setTimeout(function() {
                alert('Bad or null KML.');
            }, 0);
            return;
        }

        // Show the entire KML file in the plugin.
        ge.getFeatures().appendChild(kmlObject);

        photoOverlays = [];

        // Walk the DOM looking for a KmlPhotoOverlay
        gex.dom.walk({
            rootObject: kmlObject,
            visitCallback: function(context) {

                if (this.getType() == 'KmlPhotoOverlay') {
                    photoOverlays.push({ name: this.getName(), kmlObject: this });
                    context.walkChildren = false;
                }                
            }
        });

        buildControls();
    });

    /*
    document.getElementById('installed-plugin-version').innerHTML =
        ge.getPluginVersion().toString();
    */
}

function buildControls() {
    var controls = $('#controls');
    $("#controls").append('<ul id="menu"></ul>');
    $("#menu > li").remove();
    
    var menu = $('#menu');
    for(var i = 0; i < photoOverlays.length; i++) {
        menu.append('<li><a href="" onclick="enterPhotoOverlay('+i+'); return false;">'+
                        photoOverlays[i].name+'</a></li>');
		     // re-initialize graphical checkboxes
            $('#menu').removeClass('jqtransformdone');
			$('#menu').jqTransform();
            // re-initialize scroll pane to update height
            $("#menuBox").jScrollPane();
    }
}

    function updateEarthOptions() {
        var options = ge.getOptions();
        var form = $("#earthSetup")[0];

        ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, form.opt_borders.checked);

        options.setStatusBarVisibility(form.opt_statusbar.checked);
        options.setGridVisibility(form.opt_grid.checked);
        options.setOverviewMapVisibility(form.opt_overview.checked);
        options.setScaleLegendVisibility(form.opt_scaleLegend.checked);
        options.setAtmosphereVisibility(form.opt_atmosphere.checked);
        options.setMouseNavigationEnabled(form.opt_mouseNav.checked);

        if (form.opt_nav.checked) {
            ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
        } else {
            ge.getNavigationControl().setVisibility(ge.VISIBILITY_HIDE);
        }
    }
function failureCB(errorCode) {
}

function enterPhotoOverlay(index) {
    if (index == undefined) {
        alert('No photo overlay specified!');
        return;
    }

    ge.getPhotoOverlayViewer().setPhotoOverlay(photoOverlays[index].kmlObject);
}

function exitPhotoOverlay() {
    // just like setBalloon(null)
    ge.getPhotoOverlayViewer().setPhotoOverlay(null);
}


function handleMouseClick(event){
    var INSET_PIXELS_X = document.getElementById("content").offsetWidth - event.getClientX();
    var INSET_PIXELS_Y = event.getClientY();
    if (INSET_PIXELS_X < 32){
        if (INSET_PIXELS_Y < 32){ toggleFullScreen();}
    }
}

function toggleFullScreen(){
    if (fullScreenState == true) {makeNormalScreen();}
    else {makeFullScreen();}
}

function makeFullScreen(){
    var samplecontainer = document.getElementById('fullscreencontainer');
    var container = document.getElementById('content');
    container.style.left = 0;
    container.style.top = 0;
    container.style.width = samplecontainer.offsetWidth + 'px';
    container.style.height = samplecontainer.offsetHeight + 'px';
    fullScreenState = true;
    noFullScreenIcon.setVisibility(fullScreenState);
    fullScreenIcon.setVisibility(!fullScreenState);
}

function makeNormalScreen(){
    var samplecontainer = document.getElementById('sizecontainer');
    var container = document.getElementById('content');
    container.style.left = samplecontainer.style.left;
    container.style.top = samplecontainer.style.top;
    container.style.width = samplecontainer.offsetWidth + 'px';
    container.style.height = samplecontainer.offsetHeight + 'px';
    fullScreenState = false;
    noFullScreenIcon.setVisibility(fullScreenState);
    fullScreenIcon.setVisibility(!fullScreenState);
}

function createFullScreenIcon() {
    // create an image for the screen overlay
    var icon = ge.createIcon('');
    icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png');
    // create the screen overlay
    fullScreenIcon = ge.createScreenOverlay('');
    fullScreenIcon.setDrawOrder(60);
    fullScreenIcon.setIcon(icon);
    // anchor point in top left of icon.
    fullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
    fullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
    fullScreenIcon.getScreenXY().setX(1);
    fullScreenIcon.getScreenXY().setY(1);
    // place icon in top left of screen.
    fullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
    fullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
    fullScreenIcon.getOverlayXY().setX(2);
    fullScreenIcon.getOverlayXY().setY(4);
    // Set icon size.
    fullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
    fullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
    fullScreenIcon.getSize().setY(32);
    fullScreenIcon.getSize().setX(32);
    // add the screen overlay to Earth
    ge.getFeatures().appendChild(fullScreenIcon);
}

function createNormalScreenIcon() {
    // create an image for the screen overlay
    var icon = ge.createIcon('');
    icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tonormal.png');
    // create the screen overlay
    noFullScreenIcon = ge.createScreenOverlay('');
    noFullScreenIcon.setDrawOrder(62);
    noFullScreenIcon.setIcon(icon);
    // anchor point in top left of icon.
    noFullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
    noFullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
    noFullScreenIcon.getScreenXY().setX(1);
    noFullScreenIcon.getScreenXY().setY(1);
    // place icon in top right of screen.
    noFullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
    noFullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
    noFullScreenIcon.getOverlayXY().setX(2);
    noFullScreenIcon.getOverlayXY().setY(4);
    // Set icon size.
    noFullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
    noFullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
    noFullScreenIcon.getSize().setY(32);
    noFullScreenIcon.getSize().setX(32);
    noFullScreenIcon.setVisibility(false);
    // add the screen overlay to Earth
    ge.getFeatures().appendChild(noFullScreenIcon);
}

function handleFullScreen(){
    if (window.innerWidth == screen.width){
        if (window.innerHeight > screen.height - 10){
            //this is likely caused by pressing F11 on the browser
            makeFullScreen();
        } else if (fullScreenState == true) { makeNormalScreen();}
    } else {makeNormalScreen();}
}