/*
* SBMapTypeControl 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 SBMapTypeControl
 */
function SBMapTypeControl(mymap, opt_opts) {
  this.options = opt_opts || {};
  this.myMap = mymap;
}


SBMapTypeControl.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 SBMapTypeControl added to it.
 * @return {DOM Object} Div that holds the control
 */ 
SBMapTypeControl.prototype.initialize = function(map) {
  var container = document.createElement("div");
  var me = this;

  var elem = document.getElementById("gm-sidebar"+me.options['id']);
  if (me.options['dir']==0){ //right
  var w = '-' + parseInt(me.options['sidebarsize'])/2;
  var v = parseInt(me.options['sidebarsize'])/2;
  } else if (me.options['dir']==2){ //left
  var w = '-' + parseInt(me.options['sidebarsize']/2);
  var v = parseInt(me.options['sidebarsize']/2);//'-' + parseInt(me.options['sidebarsize']/2);
  }  else if (me.options['dir']==1){ //bottom
  var w = '-' + parseInt(me.options['sidebarsize']/2);
  var v = parseInt(me.options['sidebarsize']/2);//'-' + parseInt(me.options['sidebarsize']/2);
  } 
  
  
//alert(v);

 
  
 
  //alert(me.options['id']);
//container.style.cssFloat = "left";
//alert(me.options['left']);
  //container.style.marginRight = "200px";//"+me.options['left']+";
  var SBDiv = me.createButton_("Sidebar");
  //SBDiv.style.marginRight = "8px";
  GEvent.addDomListener(SBDiv, "click", function() {

  if(elem.style.display == 'none') {
    elem.style.display = 'block';
    
    if (me.options['dir']==1){
      map.panBy(new google.maps.Size(0, w));
      document.getElementById('mapDIV'+me.options['id']).style.height = me.options['mapsize'] +'px';
      map.checkResize();
    } else {
      map.panBy(new google.maps.Size(w, 0));
      document.getElementById('mapDIV'+me.options['id']).style.width = me.options['mapsize'] +'px';
      map.checkResize();
    }

    me.toggleButton_(SBDiv.firstChild, true);

  } else {
    elem.style.display = 'none';
    
    if (me.options['dir']==1){
      map.panBy(new google.maps.Size(0, v));
      document.getElementById('mapDIV'+me.options['id']).style.height = (parseInt(me.options['mapsize']) + parseInt(me.options['sidebarsize'])) + 'px';
      map.checkResize();
    } else {
      map.panBy(new google.maps.Size(v, 0));
      document.getElementById('mapDIV'+me.options['id']).style.width = (parseInt(me.options['mapsize']) + parseInt(me.options['sidebarsize'])) + 'px';
      map.checkResize();
    }
    
    me.toggleButton_(SBDiv.firstChild, false);

  }
 /*   if (me.SBLayer) {
      if (me.SBLayer.getEnabled()) {
        me.SBLayer.disable();
      } else {
        me.SBLayer.enable(map);
      }
    } else {
      me.SBLayer = new PanoramioLayer(map, me.options);
      me.SBLayer.enable(map);
    }
*/

    //me.toggleButton_(SBDiv.firstChild, me.SBLayer.getEnabled());

  });
  me.toggleButton_(SBDiv.firstChild, true);

 // var mapDiv = me.createButton_("Map");
 // var satDiv = me.createButton_("Satellite");
 // var hybDiv = me.createButton_("Hybrid");
 
 // me.assignButtonEvent_(mapDiv, map, G_NORMAL_MAP, [satDiv, hybDiv]);
 // me.assignButtonEvent_(satDiv, map, G_SATELLITE_MAP, [mapDiv, hybDiv]);
 // me.assignButtonEvent_(hybDiv, map, G_HYBRID_MAP, [satDiv, mapDiv]);
 // 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");
  //  }
  //});

  container.appendChild(SBDiv);
 // container.appendChild(mapDiv);
  //container.appendChild(satDiv);
 // container.appendChild(hybDiv);

  map.getContainer().appendChild(container);

  GEvent.trigger(map, "maptypechanged");
  return container;
}

/*
 * Creates simple buttons with text nodes. 
 * @param {String} text Text to display in button
 * @return {DOM Object} The div for the button.
 */
SBMapTypeControl.prototype.createButton_ = function(text) {
  var buttonDiv = document.createElement("div");
  this.setButtonStyle_(buttonDiv);
  buttonDiv.style.cssFloat = "left";
  buttonDiv.style.styleFloat = "left";
 
  var textDiv = document.createElement("div");
  textDiv.appendChild(document.createTextNode(text));
  textDiv.style.width = "7em";
  buttonDiv.appendChild(textDiv);
  return buttonDiv;
}

/*
 * 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
 */  
SBMapTypeControl.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].firstChild, false);
    }
    me.toggleButton_(div.firstChild, 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
 */
SBMapTypeControl.prototype.toggleButton_ = function(div, boolCheck) {
   div.style.fontWeight = boolCheck ? "bold" : "normal";
   div.style.border = "1px solid white";
   var shadows = boolCheck ? ["Top", "Left"] : ["Bottom", "Right"];
   for (var j = 0; j < shadows.length; j++) {
     div.style["border" + shadows[j]] = "1px solid #b0b0b0";
  } 
}

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

/*
 * Sets the proper CSS for the given button element.
 * @param {DOM Object} button Button div to set style for
 */
SBMapTypeControl.prototype.setButtonStyle_ = function(button) {
  button.style.color = "#000000";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";
  button.style.border = "1px solid black";
  button.style.padding = "0px";
  button.style.margin= "0px";
  button.style.textAlign = "center";
  button.style.fontSize = "12px"; 
  
   
  
  button.style.cursor = "pointer";
}