var mbpCVar;
//animation variables
var anicount=0;
var timeout_id;
var sat_loaded=0; 
var nsat_img=8; //how many images to loop for satellite animation
satimages = new Array(nsat_img);
var nrain_img=15; //how many images for rainforecast loop animation
rainimages = new Array(nrain_img);
var rain_loaded=0;



// current display timestep, note that each timeline (1-3 and 4-6 stores its own current timesteps)
mbpCTime  = new Array(2);
var mbpCTimeObs  = '012';

// EINSTELLUNGEN 
// Das IMG-Element, in dem das Bild erscheint.
var mbpImgObjName = 'mbpImage';

// Das HTML-Element, in dem die Legende erscheint (<div>-Tag, nicht das eigentliche <img>).
var mbpLegObjName = 'mbpLegend';


// Prefix for Rain
var mbpPrefRain = '05SPCP03';

// Prefix for Wind
var mbpPrefWind = '05SWND03';

// Prefix for Pictogramme
var mbpPrefPicto = '05SWEATH';

//Prefix fuer Risk overview
var mbpPrefRisk = '05SRISK';

// Prefix for observed metar temp
var mbpPrefObs = '05MT_temp';

// Prefix for satellite images
var mbpPrefSat = '05EUMETSAT_italy';

// width of normal maps with space for legend (mapwidth)
var imgsize = 550;
//full width for images in bluebox if no legend is shown (basically width of bluebox)
var imgfullsize = 610;


//Timepanel status 1=1-3  2=4-6
var timepanelStat = '1';

// which min/max temperature image is currently shown
current_temp_image = new Array(2);
current_temp_time = new Array(2);
current_obs_image = new Array(2);
current_obs_time = new Array(2);
current_sat_time = new Array(2);
current_risk_time = new Array(2);
current_weather_time = new Array(2);
current_weather_image = new Array(2);


// CSS-Klasse for inaktive Variablen-Tabs (obere Menuleiste... Niederschlag, Temp etc.)
var mbpVarInactiveClass = 'inactive';

// CSS-Klasse for aktive Variablen-Tabs
var mbpVarActiveClass = 'active';
var mbpVarActive1Class = 'active1';
var mbpVarActive2Class = 'active2';

var mbpTimInactiveClass = 'mbpTimInactive';
var mbpTimActiveClass = 'mbpTimActive';

var loadstatustext = 'loading please wait...';


// relative path to images use this in all js  functions 
var imagePath='uploads/meteobluedata/pub/nmm4/maps/';
var meteogramPath='uploads/meteobluedata/pub/nmm4/meteograms/'


// change variables (if tabs are clicked)
// imgfile is only needed for meteograms / Radar

function mbpswapVar(prefix,imgfile)
	{
	 if(timeout_id !=null) clearInterval(timeout_id);    //kill animation        

	tabs = document.getElementById('mbpVarMenu').getElementsByTagName('li');
	var activeTab;
	for (i=0;i<tabs.length;i++)
		{
		tabs[i].className = mbpVarInactiveClass; // alle Tabs auf inaktiv setzen.
		}
	
	var timepanel1 = document.getElementById('mbpTimeLine1');
        var timepanel2 = document.getElementById('mbpTimeLine2');
        var timepanelTemperature1 = document.getElementById('mbpTimeLineTmprt1');
        var timepanelTemperature2 = document.getElementById('mbpTimeLineTmprt2');
        var timepanelobs = document.getElementById('mbpTimeLineObs');
        var timepanelsat = document.getElementById('mbpTimeLineSat');
        var timepanelRisk1 = document.getElementById('mbpTimeLineRisk1');
        var timepanelRisk2 = document.getElementById('mbpTimeLineRisk2');
        var timepanelRadar = document.getElementById('mbpTimeLineRadar');
        var timepanelWeather1 = document.getElementById('mbpTimeLineWeather1');
        var timepanelWeather2 = document.getElementById('mbpTimeLineWeather2');
      

	var legpanel = document.getElementById('mbpLegPanel');
	legpanel.style.display = 'inline';
	var imgdiv = document.getElementById('mbpImgPanel');
	// eher ungeschickt: weil img dann an zwei stellene rstezt werden muss.
	document.getElementById('mbpImgPanel').innerHTML = '<img name="mbpImage" src="'+imagePath+'null.gif" alt="">';
	
	switch (prefix)
		{
		case 'RAIN':
			activeTab = 1;
			mbpToggleLegend('RAIN');
			mbpCVar = mbpPrefRain;
                        timepanelTemperature1.style.display = 'none';
                        timepanelTemperature2.style.display = 'none';
                        if (timepanelobs != null) timepanelobs.style.display = 'none'; 
                        if (timepanelsat != null) timepanelsat.style.display = 'none'; 
                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        if (timepanelRadar != null) timepanelRadar.style.display = 'none'; 
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 
                        imgdiv.style.width=imgsize;

                        toggleDays('mbpTimeLine');
                        mbpUpdatePanel();
			load_rain_ani();
         		timeout_id=setInterval(rain_ani,500);
			 
			break;

		case 'TEMP':
			activeTab = 2;
			mbpToggleLegend('TEMP');
                        timepanel1.style.display = 'none';
                        timepanel2.style.display = 'none';
                        if (timepanelobs != null) timepanelobs.style.display = 'none'; 
                        if (timepanelsat != null) timepanelsat.style.display = 'none'; 
                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        if (timepanelRadar != null) timepanelRadar.style.display = 'none'; 
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 

                       imgdiv.style.width=imgsize;

                        toggleDays('mbpTimeLineTmprt');
                        mbpchgTime(current_temp_time[parseInt(timepanelStat)-1] ,'mbpTimeLineTmprt' ,current_temp_image[parseInt(timepanelStat)-1] );
			break;

		case 'PICTO':
			activeTab = 0;
			mbpToggleLegend('PICTO');
                        //legpanel.style.display = 'none';
			mbpCVar = mbpPrefPicto;
                        timepanelTemperature1.style.display = 'none';
                        timepanelTemperature2.style.display = 'none';
                        if (timepanelobs != null) timepanelobs.style.display = 'none'; 
                        if (timepanelsat != null) timepanelsat.style.display = 'none'; 
                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        if (timepanelRadar != null) timepanelRadar.style.display = 'none'; 
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 

                        imgdiv.style.width=imgsize;

                        toggleDays('mbpTimeLine');
                        mbpUpdatePanel();
			break;

		case 'WEATHER':
			activeTab = 0;
			mbpToggleLegend('PICTO');
                        timepanel1.style.display = 'none';
                        timepanel2.style.display = 'none';
                        timepanelTemperature1.style.display = 'none';
                        timepanelTemperature2.style.display = 'none';
                        if (timepanelobs != null) timepanelobs.style.display = 'none'; 
                        if (timepanelsat != null) timepanelsat.style.display = 'none'; 
                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        if (timepanelRadar != null) timepanelRadar.style.display = 'none'; 
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 

                        imgdiv.style.width=imgsize;

                        toggleDays('mbpTimeLineWeather');
                        mbpchgTime(current_weather_time[parseInt(timepanelStat)-1] ,'mbpTimeLineWeather' ,current_weather_image[parseInt(timepanelStat)-1] );
			break;


		case 'WIND':
			activeTab = 3;
			mbpToggleLegend('WIND');
			mbpCVar = mbpPrefWind;
                        timepanelTemperature1.style.display = 'none';
                        timepanelTemperature2.style.display = 'none';
                        if (timepanelobs != null) timepanelobs.style.display = 'none'; 
                        if (timepanelsat != null) timepanelsat.style.display = 'none'; 
                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        if (timepanelRadar != null) timepanelRadar.style.display = 'none'; 
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 
                        imgdiv.style.width=imgsize;

                        toggleDays('mbpTimeLine');
                        mbpUpdatePanel();
			 
			break;


		case 'RISK':
			activeTab = 4;
			mbpToggleLegend('RISK');
			mbpCVar = mbpPrefRisk;
                        timepanel1.style.display = 'none';
                        timepanel2.style.display = 'none';
                        timepanelTemperature1.style.display = 'none';
                        timepanelTemperature2.style.display = 'none';
                        if (timepanelobs != null) timepanelobs.style.display = 'none'; 
                        if (timepanelsat != null) timepanelsat.style.display = 'none'; 
                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        if (timepanelRadar != null) timepanelRadar.style.display = 'none'; 
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 

                        imgdiv.style.width=imgsize;

                        toggleDays('mbpTimeLineRisk');
			    //mbpchgTime(current_risk_time[parseInt(timepanelStat)-1] ,'mbpTimeLineRisk'  );
			mbpUpdateRiskPanel();
			break;
			
		case 'METEOGRAM':
			activeTab = 5;
                        timepanelTemperature1.style.display = 'none';
                        timepanelTemperature2.style.display = 'none';
                        timepanel1.style.display = 'none';
                        timepanel2.style.display = 'none';
                        imgdiv.style.width=imgfullsize;

                        if (timepanelobs != null) timepanelobs.style.display = 'none';
                        if (timepanelsat != null) timepanelsat.style.display = 'none';  
                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        if (timepanelRadar != null) timepanelRadar.style.display = 'none'; 
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 
			legpanel.style.display = 'none';
			lp_sync(meteogramPath+imgfile, 'mbpImgPanel');
			break;

                case 'OBS':
			activeTab = 6;
                        mbpCVar = mbpPrefObs;
                        timepanelTemperature1.style.display = 'none';
                        timepanelTemperature2.style.display = 'none';
                        timepanel1.style.display = 'none';
                        timepanel2.style.display = 'none';
                        imgdiv.style.width=imgfullsize;

                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        if (timepanelobs != null) timepanelobs.style.display = 'block'; 
                        if (timepanelRadar != null) timepanelRadar.style.display = 'none'; 
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 
          
			legpanel.style.display = 'none';		 
                        if (timepanelsat != null) timepanelsat.style.display = 'none'; 
                        mbpchgTime(current_obs_time[0] ,'mbpTimeLineObs'  );
			break;

                
                case 'SAT':
			activeTab = 7;
                        mbpCVar = mbpPrefSat;
                        timepanelTemperature1.style.display = 'none';
                        timepanelTemperature2.style.display = 'none';
                        timepanel1.style.display = 'none';
                        timepanel2.style.display = 'none';
                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        if (timepanelobs != null) timepanelobs.style.display = 'none'; 
                        if (timepanelRadar != null) timepanelRadar.style.display = 'none'; 
          
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 
                        timepanelsat.style.display = 'block'; 
			legpanel.style.display = 'none';		 
                        imgdiv.style.width=imgfullsize;

                      
                        mbpchgTime(current_sat_time[0] ,'mbpTimeLineSat'  );
			load_sat_ani();
         		timeout_id=setInterval(sat_ani,500);

			break;

	             case 'RADAR':
			activeTab = 8;
                        timepanelTemperature1.style.display = 'none';
                        timepanelTemperature2.style.display = 'none';
                        timepanel1.style.display = 'none';
                        timepanel2.style.display = 'none';
                        if (timepanelRisk1 != null) timepanelRisk1.style.display = 'none'; 
                        if (timepanelRisk2 != null) timepanelRisk2.style.display = 'none'; 
                        imgdiv.style.width=imgfullsize;

                        if (timepanelobs != null) timepanelobs.style.display = 'none';
                        if (timepanelsat != null) timepanelsat.style.display = 'none';  
                        if (timepanelWeather1 != null) timepanelWeather1.style.display = 'none'; 
                        if (timepanelWeather2 != null) timepanelWeather2.style.display = 'none'; 
			legpanel.style.display = 'none';
                        timepanelRadar.style.display = 'block'; 
			  mbpUpdateRadarPanel(imgfile);
			    //     mbpchgTime(current_obs_time[0] ,'mbpTimeLineRadar',imgfile  );
                 	break;

			
		}
	
	if (activeTab==0) tabs[activeTab].className = mbpVarActiveClass;
	else if (activeTab>0 && activeTab<tabs.length) tabs[activeTab].className = mbpVarActive1Class;
	else tabs[activeTab].className = mbpVarActive2Class;
	
        
	}


function mbpUpdatePanel()
	{
	if(timeout_id !=null) clearInterval(timeout_id);    //kill animation
	var mbpimg = document.images[mbpImgObjName];
	var imgFile = imagePath+mbpCVar + '_' + mbpCTime[parseInt(timepanelStat)-1] + '.jpg';
	//document.getElementById('status').innerHTML = imgFile;
	mbpimg.src = imgFile;
	}

function mbpUpdateRiskPanel()
	{
	var mbpimg = document.images[mbpImgObjName];
	var imgFile = imagePath+mbpCVar + '_' + current_risk_time[parseInt(timepanelStat)-1] + '.jpg';
	mbpimg.src = imgFile;
	}

function mbpUpdateObsPanel()
	{
	var mbpimg = document.images[mbpImgObjName];
	var imgFile = imagePath+mbpCVar + '_' + mbpCTimeObs + '.jpg';
	mbpimg.src = imgFile;
	}

function mbpUpdateSatPanel()
	{
	if(timeout_id !=null) clearInterval(timeout_id);    //kill animation
	var mbpimg = document.images[mbpImgObjName];
	var imgFile = imagePath+mbpCVar + '_' + mbpCTimeSat + '.jpg';
	mbpimg.src = imgFile;
	}

function mbpUpdateRadarPanel(imgFile)
	{
	var mbpimg = document.images[mbpImgObjName];
	mbpimg.src = imgFile;
	}


 
//update min-max temperatures
function mbpUpdateTemperaturePanel(imgfile)
	{
	var mbpimg = document.images[mbpImgObjName];
	var imgFile = imagePath+imgfile+ '.jpg';
	mbpimg.src = imgFile;
	}


//imgfile is optional input (for min max temperatures)		
function mbpchgTime(time,timeline,imgfile)
	{
        
        if (timeline == 'mbpTimeLineObs' || timeline == 'mbpTimeLineSat' || timeline == 'mbpTimeLineRadar' ) {
         var times = document.getElementById(timeline).getElementsByTagName('a');
        }
        else {
          var times = document.getElementById(timeline+timepanelStat).getElementsByTagName('a');
        }


	for (i=0;i<times.length;i++)
		{
		if (times[i].attributes)
			{
			var mbpAttr = times[i].getAttribute("mbp");
			mbpAttr = String(mbpAttr);
			
  		if (mbpAttr == String(time))
  			{
  			times[i].className = mbpTimActiveClass;
  			} else {
  			times[i].className = mbpTimInactiveClass;
  			}
			}
		}
	    if (imgfile == null || timeline == 'mbpTimeLineRadar' ){
	    if (timeline != 'mbpTimeLineObs' && timeline != 'mbpTimeLineSat' && timeline != 'mbpTimeLineRadar' ){
              mbpCTime[parseInt(timepanelStat)-1] = time;
               mbpUpdatePanel();
            }
            if (timeline == 'mbpTimeLineObs'){
               mbpCTimeObs = time;
               mbpUpdateObsPanel();  
            }
            if ( timeline == 'mbpTimeLineSat'){
               mbpCTimeSat = time;
               mbpUpdateSatPanel();  
            }
            if ( timeline == 'mbpTimeLineRadar'){
               mbpCTimeSat = time;
               mbpUpdateRadarPanel(imgfile);  
            }
	   }else {
	    if ( timeline == 'mbpTimeLineTmprt'){
              current_temp_image[parseInt(timepanelStat)-1] = imgfile; 
              current_temp_time[parseInt(timepanelStat)-1]= time;
              mbpUpdateTemperaturePanel(imgfile);
            }
	    if ( timeline == 'mbpTimeLineWeather'){
              current_weather_image[parseInt(timepanelStat)-1] = imgfile; 
              current_weather_time[parseInt(timepanelStat)-1]= time;
              mbpUpdateTemperaturePanel(imgfile);
            }


	   }
           
	}


// highlight the right time panel and	
//switch between days 1-3 and 4-6 (if timeind is supplied)

function toggleDays(timeline,timeind){

 if (timeind != null) timepanelStat =timeind;

 var tmnline1 = timeline+'1';
 var tmnline2 = timeline+'2';
 var timepanel1 = document.getElementById(tmnline1);
 var timepanel2 = document.getElementById(tmnline2);
 timepanel1.style.display = 'none';
 timepanel2.style.display = 'none';

 if (timepanelStat == '1') timepanel1.style.display = 'block';
 if (timepanelStat == '2') timepanel2.style.display = 'block';


// note that for the min max temperature picture we have to remember the filenames for each timeline
 if (timeline == 'mbpTimeLineTmprt'){
   mbpUpdateTemperaturePanel(current_temp_image[parseInt(timepanelStat)-1]);}
 else if (timeline == 'mbpTimeLineRisk') mbpUpdateRiskPanel();
 else if (timeline == 'mbpTimeLineWeather')mbpUpdateTemperaturePanel(current_weather_image[parseInt(timepanelStat)-1]);
 else mbpUpdatePanel();
  
}


//switch the legend
function mbpToggleLegend(mode)
	{
	var legpanel = document.getElementById('mbpLegPanel');
	
	switch (mode)
		{
		case 'RAIN':
			legpanel.innerHTML = '<img src="../../images_bluebox/legende_rain.gif" alt="">';
			break;
		
		case 'TEMP':
			legpanel.innerHTML = '<img src="../../images_bluebox/legende_temp.gif" alt="">';
			break;

		case 'WIND':
			legpanel.innerHTML = '<img src="../../images_bluebox/legende_wind.gif" alt="">';
			break;

			
		case 'PICTO':
			legpanel.innerHTML = '<a href="symbols"></a>';
			break;

	        case 'RISK':
			legpanel.innerHTML = '<img src="../../images_bluebox/legende_risk.gif" alt="">';
			break;
		}
	}


//animate satellite images
function sat_ani(){

    mbpsatimg = document.images[mbpImgObjName];
    mbpsatimg.src = satimages[anicount].src;  
    anicount = anicount+1;
    if (anicount == nsat_img)anicount=0;  
}

function load_sat_ani(){
    if (sat_loaded ==0){

     //figure out dt of images
     times = document.getElementById('mbpTimeLineSat').getElementsByTagName('a');
     t0 = times[0].getAttribute("mbp");
     t1 = times[1].getAttribute("mbp");
     dt1 = Math.abs(t1-t0)
     t0 = times[2].getAttribute("mbp");
     t1 = times[3].getAttribute("mbp");
     dt2 = Math.abs(t1-t0)
     dt = Math.min(dt1,dt2)
	 
	 if (dt < 6){
     for (var i=0;i<nsat_img;i++){
	satimages[i] = new Image();
        lasttime=current_sat_time[0];
        time = (lasttime-nsat_img*dt+(i+1)*dt +24) % 24;
        if (time <10) time='0'+time;

        mbpsat = document.images[mbpImgObjName];
        satFile = imagePath+mbpCVar + '_' + time + '.jpg';
        mbpsat.src = satFile;
        satimages[i].src = satFile;
     }
	 }
     sat_loaded=1;
    }
}

//animate satellite images
function rain_ani(){

    mbpimg = document.images[mbpImgObjName];
    mbpimg.src = rainimages[anicount].src;  
    anicount = anicount+1;
    if (anicount == nrain_img)anicount=0;  
}

function load_rain_ani(){
    if (rain_loaded ==0){

     //figure out filename of animation images.. has to be SPCP01.jpg
	dt=1;      
        varname=mbpCVar.substr(0,6)+'01'; //go from SPCP03 to SPCP01
        filename=imagePath+varname + '_014.jpg';
	ok= isFile(filename);
        if (ok) {

     for (var i=0;i<=nrain_img;i++){
	rainimages[i] = new Image();
        lasttime=24;//last rain image to show in sequence
        time = (lasttime-nrain_img*dt+(i+1)*dt );
        if (time <10) time='0'+time;
        if (time <100) time='0'+time;

        mbpimg = document.images[mbpImgObjName];
        rainFile = imagePath+varname + '_' + time + '.jpg';
        mbpimg.src = rainFile;
        rainimages[i].src = rainFile;
     }
	 }
     rain_loaded=1;
    }
}


// function to check if a file exists.. returns true if it does

function isFile(str){
    var O= AJ();
    if(!O) return false;
    try
    {
        O.open("HEAD", str, false);
        O.send(null);
        return (O.status==200) ? true : false;
    }
    catch(er)
    {
        return false;
    }
}
function AJ()
{
    var obj;
    if (window.XMLHttpRequest)
    {
        obj= new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        try
        {
            obj= new ActiveXObject('MSXML2.XMLHTTP.3.0');
        }
        catch(er)
        {
            obj=false;
        }
    }
    return obj;
}




	
function lp_sync(url, containerid)
	{
    var page_request = false
    	if (window.XMLHttpRequest) // if Mozilla, Safari etc
    		page_request = new XMLHttpRequest()
    		else if (window.ActiveXObject){ // if IE
      		try {
      			page_request = new ActiveXObject("Msxml2.XMLHTTP")
      			} 
      			catch (e){
      		try{
      			page_request = new ActiveXObject("Microsoft.XMLHTTP")
      			}
      			catch (e){}
    		}
    	}
    	else
    	return false
    document.getElementById(containerid).innerHTML=loadstatustext
    
    /*
		var today=new Date()
    var s=today.getSeconds()
    cacheurl = url+'&'+s
		*/
		cacheurl = url;
    page_request.open('GET', cacheurl, false)
    page_request.send(null)
    document.getElementById(containerid).innerHTML=page_request.responseText
	}