/*
 * Constructor for TrafficMapTypeControl (traffic)
 */
var trafficInfo = null;

function TrafficMapTypeControl(opt_opts) {
  this.options = opt_opts || {};
}

TrafficMapTypeControl.prototype = new GControl();
TrafficMapTypeControl.prototype.initialize = function(map) {
  var trafficContainer = document.createElement("div");
  var me = this;
  
  if (me.options.showTraffic) {
    var trafficDiv = me.createButton_("Traffic");
    trafficDiv.style.marginRight = "8px";
    trafficDiv.firstChild.style.cssFloat = "left";
    trafficDiv.firstChild.style.styleFloat = "left";
    
    // Sending true makes overlay hidden by default
    trafficInfo = new GTrafficOverlay({hide:true});
    trafficInfo.hidden = true;
    var toggleState = 0;
    
    function toggleTraffic() {
      if (toggleState == 1) {
        trafficInfo.hidden = true;
        trafficInfo.hide();
        me.toggleTrafficButton_(trafficDiv.firstChild, false);
        toggleState = 0;
      } else {
        trafficInfo.hidden = false;
        trafficInfo.show();
        me.toggleTrafficButton_(trafficDiv.firstChild, true);
        toggleState = 1;
      }
    }
    
    // We have to do this so that we can sense if traffic is in view
    GEvent.addListener(trafficInfo, "changed", function(hasTrafficInView) {
      if (hasTrafficInView) {
        trafficDiv.style.visibility = 'visible';
      } else {
        trafficDiv.style.visibility = 'hidden';
      }
    });
  
    GEvent.addDomListener(trafficDiv.firstChild, "click", function() {
        toggleTraffic();
    });

    if (me.options.showTrafficKey) {
      keyDiv = document.createElement("div");
      keyDiv.style.cssFloat = "left";
      keyDiv.style.styleFloat = "left";
      keyDiv.innerHTML = " ? ";

      var keyExpandedDiv = document.createElement("div");
      keyExpandedDiv.style.clear = "both";
      keyExpandedDiv.style.padding = "2px";
      var keyInfo = [{"color": "#30ac3e", "text": "> 50 MPH"},
                     {"color": "#ffcf00", "text": "25-50 MPH"},
                     {"color": "#ff0000", "text": "< 25 MPH"},
                     {"color": "#c0c0c0", "text": "No data"}];
      for (var i = 0; i < keyInfo.length; i++) {
        keyExpandedDiv.innerHTML += "<div style='text-align: left'><span style='background-color: " + keyInfo[i].color + "'>&nbsp;&nbsp</span>"
            +  "<span style='color: " + keyInfo[i].color + "'> " + keyInfo[i].text + " </span>" + "</div>"; 
      }
      keyExpandedDiv.style.display = "none";

      GEvent.addDomListener(keyDiv, "click", function() {
        if (me.keyExpanded) {
          me.keyExpanded = false;
          keyExpandedDiv.style.display = "none";
        } else {
          me.keyExpanded = true;
          keyExpandedDiv.style.display = "block";
        }
        me.toggleTrafficButton_(keyDiv, me.keyExpanded);
      });

      me.toggleTrafficButton_(keyDiv, me.keyExpanded);
    } //End showTrafficKey option
    
    var separatorDiv = document.createElement("div");
    separatorDiv.style.clear = "both";

    if (me.options.showTrafficKey) trafficDiv.appendChild(keyDiv);
    trafficDiv.appendChild(separatorDiv);
    if (me.options.showTrafficKey) trafficDiv.appendChild(keyExpandedDiv);
    me.toggleTrafficButton_(trafficDiv.firstChild, false);
  
    trafficContainer.appendChild(trafficDiv);
  } //End showTraffic option
  
  map.getContainer().appendChild(trafficContainer);
  
  return trafficContainer;
} //End TrafficMapTypeControl

TrafficMapTypeControl.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 = "6em";
  buttonDiv.appendChild(textDiv);
  return buttonDiv;
}

TrafficMapTypeControl.prototype.toggleTrafficButton_ = function(div, boolCheck) {
   div.style.fontWeight = boolCheck ? "bold" : "";
   div.style.backgroundColor = boolCheck ? "#cccccc" : "";
   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";
  } 
}

TrafficMapTypeControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(255, 7));
}

TrafficMapTypeControl.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";
}