// Constructor.
function Map(id, caption,latitude,longitude) {
    if (id != UI_NO_INIT_ID) {
        this.init(id,caption,latitude,longitude);
    }
}

// Map inherits from Control.
Map.prototype = new Control(UI_NO_INIT_ID);


Map.prototype.latitude = null;
Map.prototype.longitude = null;
Map.prototype.markersStr = "";
Map.prototype.zoom = null;
Map.prototype.mapImage = null;


Map.prototype.init = function(id,caption,latitude,longitude){
    uiLogger.debug("Map.init(" + id + ", " + caption + ")");
    
    Control.prototype.init.call(this, id, caption);
    
    this.setCenter(latitude,longitude);
    // create content element
    this.contentElement = document.createElement("div");
    this.controlElement.appendChild(this.contentElement);
}

Map.prototype.setCenter = function(latitude, longitude){
    this.latitude = latitude;
    this.longitude = longitude;
}

//The second parameter is the size of the markers (tiny,mid,small)
//The third parameter is the color of the markers (black, brown, green, purple, yellow, blue, gray, orange, red, white)
//See Google Maps Static API for more details
Map.prototype.setMarkers = function(markers,size,color){
    this.markersStr = "";
    if(markers != null){
        var i;
        for(i = 0;i < markers.length;i++){
            this.markersStr = this.markersStr.concat(markers[i].latitude);
            this.markersStr = this.markersStr.concat(",");
            this.markersStr = this.markersStr.concat(markers[i].longitude);
            this.markersStr = this.markersStr.concat(",");
            this.markersStr = this.markersStr.concat(size);
            this.markersStr = this.markersStr.concat(color);
            this.markersStr = this.markersStr.concat(markers[i].char);
            this.markersStr = this.markersStr.concat("|"); 
        }
    }else{
        this.markersStr = "";
    }
}

//Decreases the zoom and update the map url
Map.prototype.lowZoom = function(){
    if(this.zoom == null){
        this.zoom = 8;
    }else if(this.zoom > 0){
        this.zoom = this.zoom - 1;
    }
    this.mapImage.src = this.updateMapURL();
}

//Increases the zoom and update the map url.
Map.prototype.highZoom = function(){
    if(this.zoom == null){
        this.zoom = 8;
    }else if(this.zoom < 17){
        this.zoom = this.zoom + 1;
    }
    this.mapImage.src = this.updateMapURL();
}

//Generates the map URL using the attributes of the class
//latitude and longitude attributes to mark the center of the Map
//
Map.prototype.updateMapURL = function(){
    var url = "http://maps.google.com/staticmap?center=";
    url = url.concat(this.latitude);
    url = url.concat(",");
    url = url.concat(this.longitude);
    if(this.zoom != null){
        url = url.concat("&zoom=");
        url = url.concat(this.zoom);
    }
    url = url.concat("&size=300x300&maptype=mobile&key=MAPS_API_KEY&markers=");
    url = url.concat(this.markersStr);
    url = url.concat(this.latitude);
    url = url.concat(",");
    url = url.concat(this.longitude);
    url = url.concat(",midredy");
    return url;
} 

Map.prototype.reloadMap = function(caption){
    this.setCaption(caption,false);
    
    this.mapImage = document.createElement("img");
    this.mapImage.src = this.updateMapURL();
    
    this.controlElement.align = "center";
    this.controlElement.appendChild(this.mapImage);
    this.controlElement.appendChild(document.createElement("br"));
}

// Updates the style of the control to reflects the state of the control.
Map.prototype.updateStyleFromState = function() {
    uiLogger.debug("Map.updateStyleFromState()");
    
    this.setClassName(this.captionElement, "ControlCaptionMap ControlCaption ControlCaptionNormal");
    this.setClassName(this.contentElement, "ControlMap ControlElement ControlElementNormal");

}