var mapMyObj = new Object();

/* default values */
mapMyObj.depth = 7; /* map joom level */
mapMyObj.lat = 37.4416; /* map lat */
mapMyObj.lon = -122.1516; /* mat lng */
mapMyObj.polylineColor = "#ffDD00";       
mapMyObj.polylineWidth = 8;

/* set to view current route*/
mapMyObj.currentRoute = "none";

/* store marker object */
mapMyObj.markerObj1 = "";
mapMyObj.markerObj2 = "";
mapMyObj.polylineObj = "";

var jsonMapData = "";

function showGmap(){
    if (GBrowserIsCompatible()) {
        mapMyObj.map = new GMap2(document.getElementById("map_canvas"));
        mapMyObj.map.setCenter(new GLatLng(mapMyObj.lat, mapMyObj.lon), mapMyObj.depth);
        mapMyObj.map.setUIToDefault();

        showRouteInMap(jsonMapData);
    }
}

function resizeDiv(myval){
    var width = $("#map_canvas").css("width");
    var height = $("#map_canvas").css("height");
    width = width.substr(0, width.indexOf('p'));
    height = height.substr(0, height.indexOf('p'));

    if(myval == "+"){
        height *= 1.2;
        width *= 1.2;
    }

    if(myval == "-"){
        height /= 1.2;
        width /= 1.2;
    }
    $("#map_canvas").css("height", height);
    $("#map_canvas").css("width", width);

    mapMyObj.lat = parseFloat(mapMyObj.map.getCenter().lat());
    mapMyObj.lon = parseFloat(mapMyObj.map.getCenter().lng());

    /* call to display map */
    showGmap();
}

function addResizeButton(){
    $("#divresizebutton").html("<input type='button' name='btn' value='Increase' onclick=\"resizeDiv('+');\">&nbsp;&nbsp;<input type='button' name='btn' value='Decrease' onclick=\"resizeDiv('-');\">&nbsp;&nbsp;");
}

function setData(datos) {
    jsonMapData = datos;
}


function setPointByLatLng(lat, lng){
    var point = new GLatLng(lat, lng);
    return point;
}

function createMarker(lat, lng, myText) {
    var point = setPointByLatLng(lat, lng);
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
        mapMyObj.map.openInfoWindowHtml(point, myText);
    });
    mapMyObj.map.addOverlay(marker);
    //mapMyObj.map.setCenter(point, mapMyObj.depth);
    return marker;
}


function drawPolyline(pointInArray, polylineColor, polylineWidth, routeText){
    var polylineWidth = (polylineWidth == "") ? mapMyObj.polylineWidth : polylineWidth;
    var polylineColor = (polylineColor == "") ? mapMyObj.polylineColor : polylineColor;

    var polyline = new GPolyline(pointInArray, polylineColor, polylineWidth);

    GEvent.addListener(polyline, "click", function(latlng) {
        mapMyObj.map.openInfoWindowHtml(latlng, routeText);
    });

    mapMyObj.map.addOverlay(polyline);

    GEvent.addListener(polyline, "mouseover", function(){

    });

    GEvent.addListener(polyline, "mouseout", function(){

    });
    return polyline;
}



function showRouteInMap(mydata){
    //var myval = 0;
    if(mydata == ""){
        return false;
    }

    var myPtsArr = new Array();

    var j = 0;
    for(var i=0; i<jsonMapData.routes.length; i++)
    {
        //myval = i;

        /* start location */
        var lat = jsonMapData.routes[i].startLocation.lat;
        var lng = jsonMapData.routes[i].startLocation.lng;
        var infoText = jsonMapData.routes[i].startLocation.infoText;
        infoText = "<div class='markerContainer'>"+infoText+"</div>";

        /*if(mapMyObj.markerObj1 != "")
        {
            //mapMyObj.map.removeOverlay(mapMyObj.markerObj1);
        }*/
        mapMyObj.markerObj1 = createMarker(lat, lng, infoText);


        /* end location */
        var lat1 = jsonMapData.routes[i].endLocation.lat;
        var lng1 = jsonMapData.routes[i].endLocation.lng;
        var infoText = jsonMapData.routes[i].endLocation.infoText;
        infoText = "<div class='markerContainer'>"+infoText+"</div>";

        /*if(mapMyObj.markerObj2 != "")
        {
           mapMyObj.map.removeOverlay(mapMyObj.markerObj2);
        }*/
        mapMyObj.markerObj2 = createMarker(lat1, lng1, infoText);

        /* draw polyline */
        /*if(mapMyObj.polylineObj != "")
        {
           mapMyObj.map.removeOverlay(mapMyObj.polylineObj);
        }*/
        var routeInfoText = "<div class='polylineContainer'>"+jsonMapData.routes[i].routeInfo.infoText+"</div>";
        var routeColor = jsonMapData.routes[i].routeInfo.routeColor;
        var routeWidth = jsonMapData.routes[i].routeInfo.routeWidth;

        var polylinePts = [setPointByLatLng(lat, lng), setPointByLatLng(lat1, lng1)];
        mapMyObj.polylineObj = drawPolyline(polylinePts, routeColor, routeWidth, routeInfoText);

        myPtsArr[j] = polylinePts[0];
        j++;
        myPtsArr[j] = polylinePts[1];
        j++;
    }

    var latlngbounds = new GLatLngBounds( );
    for ( var i = 0; i < myPtsArr.length; i++ )
    {
        latlngbounds.extend( myPtsArr[ i ] );
    }
    mapMyObj.map.setCenter( latlngbounds.getCenter( ), mapMyObj.map.getBoundsZoomLevel( latlngbounds ) );

}


/*

$(document).ready(function() {
    $.getJSON("map_json_data.php", parseMapJson);
    showGmap();
    addResizeButton();

});*/