/******************************************************************************
 *  @file    mapcontrols.js
 *  @brief   This JavaScript file creates custom controls
 *           that are used by the YMMaps class.
 *  @author  Kyle Overby
 *
 *  $Revision: YMmaps_Development_koverby/9 $
 *  $Date: 2008/12/05 01:59:25 $
 *  $LastEditedBy: koverby $
 *
 * $Copyright: 2007-2008, Southwest Research Institute.  All rights reserved. $
 *****************************************************************************/

/******************************************************************************
 *  $Log: mapcontrols.js $
 *  Revision YMmaps_Development_koverby/9 2008/12/05 01:59:25 koverby
 *     Added a new overlay titled Central Geology.
 *  
 *  Revision YMmaps_Development_koverby/8 2008/11/04 21:13:10 koverby
 *     Added a control for toggling the distance tool on
 *     and off.
 *
 *  Revision YMmaps_Development_koverby/7 2008/10/20 22:39:07 koverby
 *     Added the search tool widget creation code.
 *
 *  Revision YMmaps_Development_koverby/6 2008/08/30 02:54:16 koverby
 *     Fixed some minor display issues in IE6/IE7.
 *
 *     Made faults and labels not-transparent.
 *
 *  Revision YMmaps_Development_koverby/5 2008/08/29 01:02:05 koverby
 *     Changed some style formatting, moved to a new
 *     color them.  Change selection behavior.
 *
 *  Revision YMmaps_Development_koverby/4 2008/08/25 23:01:29 koverby
 *     Added the first revision of a transparency
 *     slider.  Updated the style based upon input
 *     from Mike Meadows.  Fixed some minor spacing
 *     issues.
 *
 *  Revision YMmaps_Development_koverby/3 2008/08/13 03:24:40 koverby
 *     Renamed Well List to Feature List.  Updated
 *     the size calculation code for the Feature List
 *     to take into account the bottom panel added
 *     to the sidepanel.
 *
 *  Revision YMmaps_Development_koverby/2 2008/08/02 20:59:42 koverby
 *     Added a control that displays the mouses current
 *     latitude and longitude.  Add tooltips via the
 *     alt tag for the various cusotm layers.
 *
 *
 *****************************************************************************/

/******************************************************************************
 * This function and class is used to create a small Google Map Control
 * that is used to toggle a list of widgets on and off.
 *****************************************************************************/

function ToggleFeaureListControl() {
}

ToggleFeaureListControl.prototype = new GControl();

/** Constructor */
ToggleFeaureListControl.prototype.initialize = function(map){

    var toggleButton = Builder.node("div");
    toggleButton.title = "Click to Show Feature List";
    toggleButton.innerHTML = "Show Feature List";
    this.setButtonStyle_(toggleButton);
    var container = Builder.node("div", [toggleButton]);
    map.getContainer().appendChild(container);

    /** Set control behvaior */
    GEvent.addDomListener(toggleButton, "click", function() {

        var width = 0;
        var height = 0;

        /** Code for all browser except IE */
        if( typeof( window.innerWidth ) == 'number' ) {
            width = window.innerWidth;
            height = window.innerHeight;
        }

        /** Code for IE6+ in standards compliant mode */
        else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            width = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight;
        }

        /** Code for older IE or non-compliant mode */
        else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            width = document.body.clientWidth;
            height = document.body.clientHeight;
        }

        width = width - widthAdjust;
        height = height - heightAdjust;

        map.toolContainer.setStyle({height: height+"px"});
        map.toolContainer.setStyle({width: width+"px"});

        if (map.sideBarPanel.visible()) {
            map.sideBarPanel.hide();

            map.mapPanel.setStyle({width: width+"px"});
            toggleButton.innerHTML = "Show Feature List";
            toggleButton.style.border = "2px outset";
        }
        else{
            map.sideBarPanel.setStyle({height: height+"px"});
            map.sideBarPanel.show();

            var sideBarPanelContentHeight = height - map.sideBarPanel.childElements()[0].getHeight();
            map.sideBarPanel.childElements()[1].setStyle({height: sideBarPanelContentHeight+"px"});

            var featureListHeight = height - map.sideBarPanel.childElements()[0].getHeight();
            map.sideBarPanel.childElements()[1].setStyle({height: sideBarPanelContentHeight+"px"});

            var featureListHeight = height - map.sideBarPanel.childElements()[0].getHeight() - map.sideBarPanel.childElements()[1].childElements()[1].getHeight();
            map.featureList.setStyle({height: featureListHeight+"px"});

            var mapPanelWidth = width - map.sideBarPanel.getWidth();
            map.mapPanel.setStyle({width: mapPanelWidth+"px"});

            toggleButton.innerHTML = "Hide Feature List";
            toggleButton.title = "Click to Hide Feature List";
            toggleButton.style.border = "2px inset";
        }

        /** Check Map Size */
       map.checkResize();
    });

    return container;
}

/** Set Style */
ToggleFeaureListControl.prototype.setButtonStyle_ = function(button) {
    button.style.color = "#000000";
    button.style.backgroundColor = "#E6EDEF";
    button.style.font = "small Arial";
    button.style.border = "2px outset";
    button.style.padding = "2px";
    button.style.marginBottom = "3px";
    button.style.textAlign = "center";
    button.style.width = "144px";
    button.style.cursor = "pointer";
}

/** Set Position */
ToggleFeaureListControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(7, 77));
}


function ToggleSearchToolControl() {
}

ToggleSearchToolControl.prototype = new GControl();

/** Constructor */
ToggleSearchToolControl.prototype.initialize = function(map){

    var toggleButton = Builder.node("div", {id: "searchToggleButton"});
    toggleButton.title = "Click to Open Search Tool";
    toggleButton.innerHTML = "Open Search Tool";
    this.setButtonStyle_(toggleButton);
    var container = Builder.node("div", [toggleButton]);
    map.getContainer().appendChild(container);

    return container;
}

/** Set Style */
ToggleSearchToolControl.prototype.setButtonStyle_ = function(button) {
    button.style.color = "#000000";
    button.style.backgroundColor = "#E6EDEF";
    button.style.font = "small Arial";
    button.style.border = "2px outset";
    button.style.padding = "2px";
    button.style.marginBottom = "3px";
    button.style.textAlign = "center";
    button.style.width = "144px";
    button.style.cursor = "pointer";
}

/** Set Position */
ToggleSearchToolControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(7, 137));
}

function ToggleDistanceToolControl() {
}

ToggleDistanceToolControl.prototype = new GControl();

/** Constructor */
ToggleDistanceToolControl.prototype.initialize = function(map){

    var toggleButton = Builder.node("div", {id: "distanceToggleButton"});
    toggleButton.title = "Click to Open Measure Tool";
    toggleButton.innerHTML = "Open Measure Tool";
    this.setButtonStyle_(toggleButton);
    var container = Builder.node("div", [toggleButton]);
    map.getContainer().appendChild(container);

    return container;
}

/** Set Style */
ToggleDistanceToolControl.prototype.setButtonStyle_ = function(button) {
    button.style.color = "#000000";
    button.style.backgroundColor = "#E6EDEF";
    button.style.font = "small Arial";
    button.style.border = "2px outset";
    button.style.padding = "2px";
    button.style.marginBottom = "3px";
    button.style.textAlign = "center";
    button.style.width = "144px";
    button.style.cursor = "pointer";
}

/** Set Position */
ToggleDistanceToolControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(7, 107));
}

function MouseCursorPosistionControl() {
}

MouseCursorPosistionControl.prototype = new GControl();

/** Constructor */
MouseCursorPosistionControl.prototype.initialize = function(map){
    var mousePositionBox = Builder.node("div");
    mousePositionBox.innerHTML = "Mouse Lat/Long";
    mousePositionBox.title = "Mouse Position in Decimal Degrees";
    this.setButtonStyle_(mousePositionBox);
    var container = Builder.node("div", [mousePositionBox]);
    map.getContainer().appendChild(container);

    /** Set control behvaior */
    GEvent.addDomListener(map, "mousemove", function(mousePoint) {
        mousePositionBox.innerHTML = mousePoint.lat().toFixed(4) + ', ' +  mousePoint.lng().toFixed(4);
    });

    return container;
}

/** Set Style */
MouseCursorPosistionControl.prototype.setButtonStyle_ = function(button) {
    button.style.color = "#000000";
    button.style.backgroundColor = "#E6EDEF";
    button.style.font = "small Arial";
    button.style.border = "1px solid black";
    button.style.padding = "2px";
    button.style.marginBottom = "3px";
    button.style.textAlign = "center";
    button.style.width = "144px";
}

/** Set Position */
MouseCursorPosistionControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(7, 47));
}


function TransparencySliderControl() {
}

TransparencySliderControl.prototype = new GControl();

/** Constructor */
TransparencySliderControl.prototype.initialize = function(map){

    var that = this;
    this.map = map;

    // Is this MSIE, if so we need to use AlphaImageLoader
    var agent = navigator.userAgent.toLowerCase();
    this.ie = false;

    if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1))
        this.ie = true;

    /** Create the slider graphic as a <div> containing an image */
    var container = Builder.node("div");

    this.setSliderStyle_(container);

    /** Handle transparent PNG files in MSIE */
    if (this.ie) {
        var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/track.png', sizingMethod='scale');";
        container.innerHTML = '<div style="height:20px; width:200px; ' +loader+ '" ></div>';
    } else {
        container.innerHTML = '<img src="images/track.png" width=200 height=20>';
    }

    /** Create the knob as a GDraggableObject */
    /** Handle transparent PNG files in MSIE */

    if (this.ie) {
        var loader = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/slider.png', sizingMethod='scale');";
        this.knob = Builder.node("div");
        this.knob.style.height = "19px";
        this.knob.style.width = "19px";
        this.knob.style.filter = loader;
        this.knob.title = "Slide Knob to Adjust Overlay Transparency";
    }
    else {
        this.knob = Builder.node("img");
        this.knob.src = "images/slider.png";
        this.knob.height = "20";
        this.knob.width = "20";
        this.knob.title = "Slide Knob to Adjust Overlay Transparency";
    }

    container.appendChild(this.knob);
    this.slide = new GDraggableObject(this.knob, {container:container});
    this.slide.setDraggableCursor("pointer");
    this.slide.setDraggingCursor("pointer");

    /** Set the container with the slider invisible by default */
    container.hide();

    /** Attach the control to the map */
    map.getContainer().appendChild(container);

    /** Listen for the slider being moved and set the zoom level */
    GEvent.addListener(this.slide, "dragend", function() {

        /** Calculate the new opacity value */
        var opacity = this.left/180;

        /** Get the current map type */
        var currentMapType = map.getCurrentMapType();

        /** Change the opacity of the custom tile layer */
        currentMapType.getTileLayers()[1].getOpacity = function () {return opacity;}

        /** Trigger a reload so the new opacity is displayed */
        map.setMapType(map.getMapTypes()[0]);
        map.setMapType(currentMapType);

        /** Set the sliders position */
        that.setSlider(map.getCurrentMapType().getTileLayers()[1].getOpacity());
    });

        /** Listen for the slider being moved and set the zoom level */
    GEvent.addListener(map, "maptypechanged", function() {
        var currentMapName = map.getCurrentMapType().getName();
        if (currentMapName == "Aeromagnetic" ||
            currentMapName == "Beatty Bedrock Geology" ||
            currentMapName == "Yucca Mountain Geology" ||
            currentMapName == "Central Block Bedrock Geology" ||
            currentMapName == "Yucca Mountain Topography") {

            /** Set the slider based on current layers opacity */
            that.setSlider(map.getCurrentMapType().getTileLayers()[1].getOpacity());

            /** Show the control if it is hidden */
            if (container.visible() == false)
                container.show();
        }
        else container.hide();
    });

    this.container = container;

    return container;
}

/** Set Slider */
TransparencySliderControl.prototype.setSlider = function(position) {
    var left = Math.round(position * 180);
    this.slide.left = left;
    this.knob.style.left = left+"px";
}

/** Set Style */
TransparencySliderControl.prototype.setSliderStyle_ = function(container) {
    container.style.width = "200px";
    container.style.height = "20px";
}

/** Set Position */
TransparencySliderControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(80, 4));
}