var layers = null;
var selectedButton = null;

function MapVisible(mapDivId, toolbar) {
    var map;

    if(toolbar != null){
        toolbar
            .append('<button id="style" gValue="roadmap" value="roadmap" title="'+LBL_JS_KAART_ROADMAP+'">' + LBL_JS_KAART_ROADMAP + '</button>'+
                    '<button id="style" gValue="satellite" value="satellite" title="'+LBL_JS_KAART_SATTELITE+'">' + LBL_JS_KAART_SATTELITE + '</button>'+
                    '<button id="style" gValue="terrain" value="terrain" title="'+LBL_JS_KAART_TERRAIN+'">' + LBL_JS_KAART_TERRAIN + '</button>'+
                    '<button id="style" gValue="hybrid" value="hybrid" title="'+LBL_JS_KAART_HYBRID+'">' + LBL_JS_KAART_HYBRID + '</button>');

	    toolbar.find('#style').click(function(){
                var $this = $(this);
                var gValue = $this.attr('gValue');
                map.setMapTypeId(gValue);
                toolbar.find('#style').each(function(){
                    if($(this).attr('gValue') == gValue){
                        $(this).css('background','#ff661a');
                    }else{
                        $(this).css('background','#ccc');
                    }
                });
            });
	    toolbar.find('#style:eq(0)').css('background','#ff661a');
    }
    
    var navigationControlOptions = {
		position: google.maps.ControlPosition. TOP_RIGHT,
		style: google.maps.NavigationControlStyle. DEFAULT
	};
    map = InitMap(mapDivId, navigationControlOptions);
    
    this.mapObject = function () {
        return map;
    };

    this.toolbarObject = function () {
//        /return toolbar;
    }; 
}

function createPeriodButtons(toolbar){
	var opt = {
	    	functionName: 'getRoadwokIntervalPeriod'
	    };
	
	var buttons = new Array();
	var buttonsIds = new Array();
	
	var initSelectButtonId = null;
	
	GetJSONObjectFromDBSyncron(opt, function(data){
		alert(data);
		return;
		
		var d = jQuery.parseJSON(data);
	  	
	  	var list = d.list;
	   	for(var i=0;i<list.length;i++){
	   		var interval = list[i];
	   		
	  		 toolbar.addButtonTwoState(interval.idObject, 2002 + interval.id, interval.value, BASEURL+"fw_images/werken_inuitvoering_schaduw_300dpi.gif", null);
	   		 toolbar.setItemToolTip(interval.idObject, interval.tooltip);

	   		 buttons.push(interval);
	  		 buttonsIds.push(interval.ibObject);
	   	}
	   	selectedButton = buttons[0];
	   	
	});
	
	toolbar.attachEvent("onStateChange", function(id ,state){
		if($.inArray(buttonsIds, id)){
			selectedButton = null;
			for(var i=0;i<buttons.length;i++){
				if(buttons[i].idObject != id){
					 toolbar.setItemState(buttons[i].idObject, false);
				}
				else{
					selectedButton = buttons[i];
				}
			}
			if(selectedButton != null){
				ShowLayersByType(selectedButton);
			}
		}
	});
}