/*
* ExtMapTypeControl Class 
*  Copyright (c) 2007, Google 
*  Author: Pamela Fox, others
* 
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* 
*       http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* This class lets you add a control to the map which mimics GMapTypeControl
*  and allows for the addition of a traffic button/traffic key.
*/

/*
 * Constructor for ExtMapTypeControl, which uses an option hash
 * to decide what elements to put in the control.
 * @param {opt_opts} Named optional arguments:
 *   opt_opts.showTraffic {Boolean} Controls whether traffic button is shown
 *   opt_opts.showTrafficKey {Boolean} Controls whether traffic key is shown
 */
 
  
function ExtMapTypeControl(opt_opts) {
  this.options = opt_opts || {};
}


ExtMapTypeControl.prototype = new GControl();



            

/**
 * Is called by GMap2's addOverlay method. Creates the button 
 *  and appends to the map div.
 * @param {GMap2} map The map that has had this ExtMapTypeControl added to it.
 * @return {DOM Object} Div that holds the control
 */ 
ExtMapTypeControl.prototype.initialize = function(map) {

    var templateRoot = $("#template_root").val()+"scripts/maps_pix";
    var container = document.createElement("div");
    container.style.height = "10px";
    var me = this;
    
    //speziell buttons for the iqonia project
    //var routeberechnenDiv = me.createButton_("routeBerechnen");
    //var kartenansichtDiv = me.createButton_("kartenAnsicht");
    //var mehrinformationenDiv = me.createButton_("mehrInformationen");
    
    var satDiv = me.createButton_("Satellite");
    var mapDiv = me.createButton_("Map");
    var hybDiv = me.createButton_("Hybrid");
    var phyDiv = me.createButton_("Gelaende");
		if (typeof(this.options.show_earth) != 'undefined') {
			var earthDiv = me.createButton_("3D");
		}
    
    me.assignButtonEvent_(satDiv, map, G_SATELLITE_MAP, [mapDiv, satDiv]);
    me.assignButtonEvent_(hybDiv, map, G_HYBRID_MAP, [satDiv, mapDiv]);
    me.assignButtonEvent_(mapDiv, map, G_NORMAL_MAP, [satDiv, hybDiv]);
    me.assignButtonEvent_(phyDiv, map, G_PHYSICAL_MAP, [mapDiv, phyDiv]);
		if (typeof(this.options.show_earth) != 'undefined') {
      me.assignButtonEvent_(earthDiv, map, G_SATELLITE_3D_MAP, [mapDiv, earthDiv]);
    }
      
	  if (typeof(this.options.show_earth) != 'undefined') {
			GEvent.addListener(map, "maptypechanged", function() {
          if (map.getCurrentMapType() == G_NORMAL_MAP) {
              GEvent.trigger(mapDiv, "click"); 
          } else if (map.getCurrentMapType() == G_SATELLITE_MAP) {
              GEvent.trigger(satDiv, "click");
          } else if (map.getCurrentMapType() == G_HYBRID_MAP) {
              GEvent.trigger(hybDiv, "click");
          } else if (map.getCurrentMapType() == G_PHYSICAL_MAP) {
              GEvent.trigger(phyDiv, "click");
          } else if (map.getCurrentMapType() == G_SATELLITE_3D_MAP) {
              GEvent.trigger(earthDiv, "click");
							map.getEarthInstance(function(ge){initEarth(ge);});
				  } 
		  });
		} else {
			GEvent.addListener(map, "maptypechanged", function() {
          if (map.getCurrentMapType() == G_NORMAL_MAP) {
              GEvent.trigger(mapDiv, "click"); 
          } else if (map.getCurrentMapType() == G_SATELLITE_MAP) {
              GEvent.trigger(satDiv, "click");
          } else if (map.getCurrentMapType() == G_HYBRID_MAP) {
              GEvent.trigger(hybDiv, "click");
          } else if (map.getCurrentMapType() == G_PHYSICAL_MAP) {
              GEvent.trigger(phyDiv, "click");
          } 
      });
		}
	    
    
    var labels = new Array('kartenansichtLabel', 'mehrInformationenLabel', 'routeBerechnenLabel');
    var mapButton = new Array('kartenAnsicht', 'mehrInformationen', 'routeBerechnen');
    var mapButtonImage = new Array('kartenansicht', 'mehr_informationen', 'route_berechnen');
    
    //special adjustments for the Kartenansicht Button
    //var kartenansichtLabelDiv = me.createDiv_("kartenansichtLabel");
    /*
GEvent.addDomListener(kartenansichtDiv, "click", function() {
        for(i=0; i<=labels.length-1; i++) {
            if (labels[i] == "kartenansichtLabel" && document.getElementById(labels[i]).style.display != "block") {
                document.getElementById(labels[i]).style.display = "block";
                document.getElementById(mapButton[i]).style.backgroundImage = "url("+templateRoot+"/"+mapButtonImage[i]+"_active.png)";
            } else {
                document.getElementById(labels[i]).style.display = "none";
                document.getElementById(mapButton[i]).style.backgroundImage = "url("+templateRoot+"/"+mapButtonImage[i]+".png)";
            }   
        }
    });
*/
    
    //special adjustments for the mehrInformationen Button
    //var mehrInformationenLabelDiv = me.createDiv_("mehrInformationenLabel");
   /*
 GEvent.addDomListener(mehrinformationenDiv, "click", function() {
        for(i=0; i<=labels.length-1; i++) {
            if (labels[i] == "mehrInformationenLabel" && document.getElementById(labels[i]).style.display != "block" ) {
                document.getElementById(labels[i]).style.display = "block";
                document.getElementById(mapButton[i]).style.backgroundImage = "url("+templateRoot+"/"+mapButtonImage[i]+"_active.png)";
            } else {
                document.getElementById(labels[i]).style.display = "none";
                document.getElementById(mapButton[i]).style.backgroundImage = "url("+templateRoot+"/"+mapButtonImage[i]+".png)";
            }   
        }
    });
*/

    //special adjustments for the routeBerechnenLabel Button
    /*
var routeBerechnenLabelDiv = me.createDiv_("routeBerechnenLabel");
    GEvent.addDomListener(routeberechnenDiv, "click", function() {
        document.getElementById('toAddress').value = document.getElementById("address").value;
        for(i=0; i<=labels.length-1; i++) {
            if (labels[i] == "routeBerechnenLabel" && document.getElementById(labels[i]).style.display != "block") {
                document.getElementById(labels[i]).style.display = "block";
                document.getElementById(mapButton[i]).style.backgroundImage = "url("+templateRoot+"/"+mapButtonImage[i]+"_active.png)";
            } else {
                document.getElementById(labels[i]).style.display = "none";
                document.getElementById(mapButton[i]).style.backgroundImage = "url("+templateRoot+"/"+mapButtonImage[i]+".png)";
            }   
        }
    });
*/
    
    if (me.options.showTraffic) {
        var trafficDiv = me.createButton_("Traffic");
        trafficDiv.style.marginRight = "8px";
        trafficDiv.style.visibility = 'hidden';
        trafficDiv.firstChild.style.cssFloat = "left";
        trafficDiv.firstChild.style.styleFloat = "left";
        // Sending true makes overlay hidden by default
        me.trafficInfo = new GTrafficOverlay(true);
        me.trafficInfo.hidden = true;
        // We have to do this so that we can sense if traffic is in view
        GEvent.addListener(me.trafficInfo, "changed", function(hasTrafficInView) {
            if (hasTrafficInView) {
                trafficDiv.style.visibility = 'visible';
            } else {
                trafficDiv.style.visibility = 'hidden';
            }
        });
        map.addOverlay(me.trafficInfo);
        GEvent.addDomListener(document.getElementById("trafficDiv"), "click", function() {
            if (me.trafficInfo.hidden) {
                me.trafficInfo.hidden = false;
                me.trafficInfo.show();
            } else {
                me.trafficInfo.hidden = true;
                me.trafficInfo.hide();
            }
            me.toggleButton_(trafficDiv, !me.trafficInfo.hidden);
        });
        
        me.toggleButton_(trafficDiv, false);
        container.appendChild(trafficDiv);
    }

    //container.appendChild(routeberechnenDiv);
    //container.appendChild(kartenansichtDiv);
    //container.appendChild(mehrinformationenDiv);
    //container.appendChild(kartenansichtLabelDiv);
    //container.appendChild(mehrInformationenLabelDiv);
    //container.appendChild(routeBerechnenLabelDiv);

    map.getContainer().appendChild(container);
  
     //if there is a click on the radio button of the kartenansicht div change the button
    GEvent.addDomListener(document.getElementById("mapKarte"), "click", function() {
        GEvent.trigger(mapDiv, "click");
    });
    GEvent.addDomListener(document.getElementById("mapSatellit"), "click", function() {
        GEvent.trigger(satDiv, "click");
    });
    GEvent.addDomListener(document.getElementById("mapHybrid"), "click", function() {
        GEvent.trigger(hybDiv, "click");
    });
    GEvent.addDomListener(document.getElementById("mapGelaende"), "click", function() {
        GEvent.trigger(phyDiv, "click");
    });
			
    if (typeof(this.options.show_earth) != 'undefined') {
		  GEvent.addDomListener(document.getElementById("map3D"), "click", function(){
		  	GEvent.trigger(earthDiv, "click");
		  });
  	}
  
    container.id = 'theContainer';
    return container;
}

/*
 * Creates simple buttons with text nodes. 
 * @param {String} text Text to display in button
 * @return {DOM Object} The div for the button.
 */
ExtMapTypeControl.prototype.createButton_ = function(text) {

    if (text == "routeBerechnen") {
        var realText = "Route berechnen";
    } else if (text == "kartenAnsicht") {
        var realText = "Kartenansicht";       
    } else if (text == "mehrInformationen") {
        var realText = "Mehr Informationen";    
    } else {
        //textDiv.style.width = "6em";
    }

    var buttonDiv = document.createElement("div");
    buttonDiv.id = text;
    buttonDiv.mapType = text;
    this.setButtonStyle_(buttonDiv, text);
    buttonDiv.style.cssFloat = "left";
    buttonDiv.style.styleFloat = "left";
    var textDiv = document.createElement("div");
    textDiv.appendChild(document.createTextNode(realText));  
    buttonDiv.appendChild(textDiv);
    return buttonDiv;
}
 
/*
 * Creates simple div element with text nodes. 
 * @param {String} text Text to display in button
 * @return {DOM Object} The div for the button.
 */
ExtMapTypeControl.prototype.createDiv_ = function(div, show_earth) {

    var templateRoot = $("#template_root").val()+"scripts/maps_pix";
    var theDiv = document.createElement("div");
    theDiv.id = div;
    theDiv.mapType = div;
    this.setButtonStyle_(theDiv, div);
    if (div == "kartenansichtLabel") {
        theDiv.innerHTML = "<form><table style='font-size:12px; padding: 0 0 0 5px'>\
                                <tr>\
                                    <td><input type='radio' name='maptype[]' id='mapKarte' checked='checked'></td>\
                                    <td style='padding: 0 0 0 2px'><label for='mapKarte'>Karte</label></td>\
                                </tr>\
                                <tr>\
                                    <td><input type='radio' name='maptype[]' id='mapSatellit'></td>\
                                    <td style='padding: 0 0 0 2px'><label for='mapSatellit'>Satellit</label></td>\
                                </tr>\
                                <tr>\
                                    <td><input type='radio' name='maptype[]' id='mapGelaende'></td>\
                                    <td style='padding: 0 0 0 2px'><label for='mapGelaende'>Gelände</label></td>\
                                </tr></table></form>";
    }
    if (div == "routeBerechnenLabel") {
        theDiv.innerHTML = "<form name='routeBerechnenForm' id='routeBerechnenForm' action='#' onsubmit='setDirections(this.from.value, this.to.value, this.locale.value); return false'>\
                                <table style='font-size:12px; padding: 0 5px 0 8px; width: 220px'>\
                                    <input type='hidden' name='locale' value='de' />\
                                    <tr>\
                                        <td>von</td>\
                                        <td><input type='text' id='fromAddress' name='from' style='width:175px' value='' /></td>\
                                        <td>\
                                            <div id='arrows'>\
                                                <div id='arrow_left'><a href='javascript:toggleElement(\"routeBerechnenLabel\", 1)'></a></div>\
                                            </div>\
                                        </td>\
                                    <tr>\
                                    <tr>\
                                        <td>nach</td>\
                                        <td><input type='text' id='toAddress' name='to' style='width:175px' /></td>\
                                        <td></td>\
                                    </tr>\
                                </table>\
                                <table style='font-size:12px; width:220px; padding: 0 0 0 8px'>\
                                    <tr>\
                                        <td>\
                                            <select name='travelmode'>\
                                                <option value='1' selected='selected'>Mit dem Auto</option>\
                                                <option value='2'>Fußweg</option>\
                                            </select>\
                                        </td>\
                                        <td align='right'><input type='submit' value='los' /></td>\
                                    <tr>\
                                </table>\
                            </form>\
                            <div id='directions' style='height:192px; width:239px; font-size:10px; overflow-y:scroll'></div>";
    }
    if (div == "mehrInformationenLabel") {
        theDiv.innerHTML = "<form>\
                                <table style='font-size:12px; padding: 0 0 0 5px'>\
                                    <tr>\
                                        <td style='width: 15px'><input type='checkbox' name='infotype[]' id='mapTraffic'></td>\
                                        <td><label for='mapTraffic'>Verkehr</label></td>\
                                    </tr>\
                                    <tr>\
                                        <td style='width: 15px'><input type='checkbox' name='infotype[]' id='mapWeather'></td>\
                                        <td><label for='mapWeather'>Wetter</label></td>\
                                    </tr>\
                                </table>\
                                <table style='font-size:12px; padding: 0 0 0 5px; display: none' id='weatherTime'>\
                                    <tr>\
                                        <td style='width: 15px'>&nbsp;</td>\
                                        <td>"+weatherTimesSelect+"</td>\
                                    </tr>\
                                </table>\
                            </form>";
    }
    return theDiv;
    
}

/*
 * Assigns events to MapType buttons to change maptype
 *  and toggle button styles correctly for all buttons
 *  when button is clicked.
 *  @param {DOM Object} div Button's div to assign click to
 *  @param {GMap2} Map object to change maptype of.
 *  @param {Object} mapType GMapType to change map to when clicked
 *  @param {Array} otherDivs Array of other button divs to toggle off
 */  
ExtMapTypeControl.prototype.assignButtonEvent_ = function(div, map, mapType, otherDivs) {
  var me = this;

  GEvent.addDomListener(div, "click", function() {
    for (var i = 0; i < otherDivs.length; i++) {
      me.toggleButton_(otherDivs[i], false);
    }
    me.toggleButton_(div, true);
    map.setMapType(mapType);
  });
}

/*
 * Changes style of button to appear on/off depending on boolean passed in.
 * @param {DOM Object} div  Button div to change style of
 * @param {Boolean} boolCheck Used to decide to use on style or off style
 */
ExtMapTypeControl.prototype.toggleButton_ = function(div, boolCheck) {
    var templateRoot = $("#template_root").val()+"scripts/maps_pix";
    var add = boolCheck ? "_down" : "";
    div.style.background = "url("+templateRoot+"/map_controls_view.png)";
}

/*
 * Required by GMaps API for controls. 
 * @return {GControlPosition} Default location for control
 */
ExtMapTypeControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}


/*
 * Sets the proper CSS for the given button element.
 * @param {DOM Object} button Button div to set style for
 */
ExtMapTypeControl.prototype.setButtonStyle_ = function(button, label) {

    var buttonDisplay = "block";
    var buttonBackgroundPic = true;
    var templateRoot = $("#template_root").val()+"scripts/maps_pix";
    if (label == "kartenAnsicht") {
        var pic = "kartenansicht.png";
        var buttonWidth = "124px";
        var buttonHeight = "20px";
        var buttonMargin = "0 0 0 200px";
    } else if (label == "routeBerechnen") {
        var pic = "route_berechnen.png";
        var buttonWidth = "141px";
        var buttonHeight = "20px";
        var buttonMargin = "0 0 0 0";
    } else if (label == "mehrInformationen") {
        var pic = "mehr_informationen.png";
        var buttonWidth = "159px";
        var buttonHeight = "20px";
        var buttonMargin = "0 0 0 20px";  
    } else if (label == "kartenansichtLabel") {
        var pic = "kartenansicht_label.png";
        var buttonWidth = "124px";
        var buttonHeight = "69px";
        var buttonMargin = "22px 0 0 341px";
        var buttonDisplay = "none";
    } else if (label == "mehrInformationenLabel") {
        var pic = "mehrinformationen_label.png";
        var buttonWidth = "159px";
        var buttonHeight = "158px";
        var buttonMargin = "22px 0 0 486px";
        var buttonDisplay = "none";
    } else if (label == "routeBerechnenLabel") {
        var pic = "route_dropdown_bg.png";
        var buttonWidth = "250px";
        var buttonHeight = "304px";
        var buttonMargin = "22px 0 0 0px";
        var buttonDisplay = "none";
    } else {
        var pic = "map_controls_view.png";
        var buttonWidth = "124px";
        var buttonHeight = "23px";
        var buttonMargin = "0 0 0 0";
    }
    
    button.style.color = "#000000";
    button.style.backgroundColor = "white";
    if (buttonBackgroundPic) {
        button.style.background = "url("+templateRoot+"/"+pic+")";
    }
    button.style.width = buttonWidth;
    button.style.height = buttonHeight;
    //button.style.font = "small Arial";
    //button.style.border = "1px solid black";
    button.style.padding = "3px 0 0 0";
    button.style.margin = buttonMargin;
    button.style.textAlign = "center";
    button.style.fontSize = "12px"; 
    button.style.cursor = "pointer";
    button.style.display = buttonDisplay;
    button.style.innerHTML = label;
}