var weatherload = 0, radarload = 0, sevendayload=0, threedayload=0,tidesload = 0, regionsload = 0, imageload = 0 ,currentview, lastview, updatedcache=0,IntervalId = 0, play = 0 ,currentimage = 0 ,imglength=0,myRegion, proxy = "proxy.jsp",expiredays = 360,c_name = "NZMET_Region", localForecastURI = "http://www.metservice.co.nz/publicData/localForecast", localObsURI ="http://www.metservice.co.nz/publicData/localObs",radarURI="http://www.metservice.co.nz/publicData/rainRadarAllNz",ObsListURI="obs.json",regionURI="regions.json",radarpicsURI="http://www.metservice.co.nz",rainFor7DayURI="http://www.metservice.com/publicData/rainForecast7Day",rainFor3DayURI="http://www.metservice.com/publicData/rainForecast3Day",satvisURI="http://www.metservice.co.nz/publicData/nzVisibleSatelliteLatest";
var debug=false; //debug option
function radarImageHandler(imagetype) {
    if (play == 1 && IntervalId==0) {
        if (debug) console.log("Start the timer");
        IntervalId = setInterval("rotateImg('" + imagetype + "')", 500);
		console.log(imagetype+'stop');
        document.getElementById(imagetype + 'stop').className ='playstop';
        document.getElementById(imagetype + 'play').className ='playstop displayoff';
    }
    if (play==0) {
    	if (debug) console.log("clear the timer");
        clearTimeout(IntervalId);
        IntervalId = 0;
		if (imagetype != null) {
			document.getElementById(imagetype + 'stop').className = 'playstop displayoff';
			document.getElementById(imagetype + 'play').className = 'playstop';
		}
    }
}

function rotateImg(imagetype){
	///if (imglength == 0) 
		imglength = document.getElementById(imagetype).childNodes.length - 1;
	if (currentimage == imglength) 
		currentimage = 0;
	
	if (imagetype == 'radarpics') {
		var imgs = $('img.radarpics');
		var times = $('p.radartime');
	}
		if (imagetype == 'sevendaypics') {
		var imgs = $('img.sevendaypic');
		var times = $('p.sevendaytime');
	}
		if (imagetype == 'threedaypics') {
		var imgs = $('img.threedaypic');
		var times = $('p.threedaytime');
	}
	
    //turn all the radar pics off
	$(imgs).each(function(){
        $(this).addClass("displayoff");
		$(this).removeClass("displayon");
      });
	$(times).each(function(){
        $(this).addClass("displayoff");
		$(this).removeClass("displayon");
      });
    // turn current the radar pic on
    var ia = $('img.radarpics');
    var ta = $('p.radartime');
    var e=imgs[currentimage];
    var te=times[currentimage];
    $(e).addClass("displayon");
    $(e).removeClass("displayoff");
    $(te).addClass("displayon");
    $(te).removeClass("displayoff");
    /// turn all the sliders white.
	if (imagetype == 'sevendaypics') {
		var s = $('.sevendayslidericon');
	}
	if (imagetype == 'threedaypics') {
		var s = $('.threedayslidericon');
	}
	if (imagetype == 'radarpics') {
		var s = $('.radarslidericon');
	}
	
    $(s).each(function(){
		$(this).attr("src","images/slidewh.png");
      });
    //turn the current slider grey
    $(s[currentimage]).attr("src", "images/slidegr.png");
if (currentimage != imglength) currentimage = ++currentimage;   
}

function init() {
		/// not running as an installed app					
		document.getElementById('footer').className = 'displayoff';
		document.getElementById('weather').className = 'fadeAway displayoff subcontainer';
		document.getElementById('installation').className = 'displayon';
	if (!window.navigator.standalone) {
		drawArrow('arrow');
	}
	else {
		//do some tidy up
		document.getElementById('footer').className = '';
		document.getElementById('installation').className = 'displayoff';
		
		///setup events listeners
		var weatherDom = document.getElementById("weather");
		weatherDom.addEventListener('webkitTransitionEnd', function(event){
			setFadeOut();
		}, false);
		var weatherDom = document.getElementById("settings");
		weatherDom.addEventListener('webkitTransitionEnd', function(event){
			setFadeOut();
		}, false);
		var weatherDom = document.getElementById("sevenday");
		weatherDom.addEventListener('webkitTransitionEnd', function(event){
			setFadeOut();
		}, false);
		var weatherDom = document.getElementById("threeday");
		weatherDom.addEventListener('webkitTransitionEnd', function(event){
			setFadeOut();
		}, false);
		if (debug) 
			console.log("init()");
		myRegion = getCookie();
		// if no region set then go to page ...
		if (myRegion == null) {
			settingTouch();
			return;
		}
		weatherTouch();
	//setTimeout("$('#aframe0').hide('slow');", 4000);
	}
}

function settingTouch() {
	///setActiveIcon('settingsicon');
    play = 0; 
    radarImageHandler();
    setFade('settings');
    getRegions();
}

function radarTouch() {
	///setActiveIcon('radaricon');
	$('#aframe0').show('slow');
    if (currentview != 'radar') {
		if (debug) console.log("clear the timer . currentview not radar");
		clearTimeout(IntervalId);
		IntervalId = 0;
		play = 1;
		currentimage =0;
		radarImageHandler('radarpics');	
		getRadar();
	}
	setFade('radar');
}

function sevendayTouch() {
	///setActiveIcon('radaricon');
	if (currentview != 'sevenday') {
		if (debug) console.log("clear the timer . currentview not sevenday");
        clearTimeout(IntervalId);
		IntervalId = 0;
		play = 1;
		currentimage =0;
		radarImageHandler('sevendaypics');
		get7day();
	} 
	setFade('sevenday'); 
}
function threedayTouch(){
	///setActiveIcon('radaricon');	
	if (currentview != 'threeday') {
		if (debug) console.log("clear the timer . currrentview not 3 day");
        clearTimeout(IntervalId);
		IntervalId = 0;
	play = 1;
	currentimage =0;
	radarImageHandler('threedaypics');
	get3day();
	}
	setFade('threeday');
}
function weatherTouch(obj) {
	///setActiveIcon('weathericon');
	 if (myRegion == null) { alert('select your region on the settings page');settingTouch();  return; } ///no region setup
    play = 0;
    radarImageHandler();
	getWeather(); 
	if(debug) console.log('setfade[weather]');
    setFade('weather');
}

//not currently used
function setActiveIcon(obj){
	document.getElementById('weathericon').className='icon';
	document.getElementById('radaricon').className='icon';
	document.getElementById('settingsicon').className='icon';
	document.getElementById(obj).className='icon iconselected';
}

function setFade(view) {
    if (view == currentview) return;
    document.getElementById("radarpics").className = 'radarpics displayoff';
	document.getElementById("sevendaypics").className = 'sevendaypics displayoff';
	document.getElementById("threedaypics").className = 'threedaypics displayoff'; 
    lastview = currentview;
    currentview = view;
	if (debug){
		console.log('currentview=' + currentview);
		console.log('lastview=' + lastview);
	}
    if (currentview != 'settings' || lastview != 'settings') {
		if(debug) console.log('fadeaway');
		if (lastview != null) document.getElementById(lastview).className = 'fadeAway subcontainer';
        if(debug) console.log('fadein');
		document.getElementById(view).className = 'fadeIn subcontainer';
    }
    if (lastview == 'settings')
    document.getElementById(lastview).className = 'fadeDownAway subcontainersettings';
    if (currentview == 'settings')
    document.getElementById(view).className = 'fadeDownIn  subcontainersettings'; 
}

function setFadeOut() {
    if (currentview == "radar")
        document.getElementById("radarpics").className = 'radarpics displayon';        
}

function getmyData(myfunction, url) {
	document.getElementById("loading").className='displayon';
   
   $.getJSON(url, function(o) { 
    	myfunction(o);}
        ); 
     
       
 //   new io(url, {
 //       format: 'json', 
 //       onSuccess: function(o) { 
 //   	myfunction(o);
 //       }, 
 //       onFailure: function() { 
 //       	if (debug) console.log("network offline or internet issue?");
 //           if (typeof(textStatus) != "undefined")  if (debug) console.log(textStatus.toString());
 //           if (typeof(errorThrown) != "undefined")  if (debug) console.log(errorThrown.toString());
 //           document.getElementById("loading").innerHTML='Data error, :(';
            //document.getElementById("loading").className='displayoff';
 //           return;
 //       }
 //   });
};

function getWeather() {
    if (weatherload != 0)return; //already got (1) or getting (2)
    weatherload =2;
    //updating forecast
    document.getElementById("weather").style.visibility="hidden";
    //clean up existing
    document.getElementById("dayslist").innerHTML="<li></li><li></li><li></li><li></li>";
    document.getElementById("home").innerHTML="<div id='todayicon'><img  alt='' src='' /></div><div class='now'><span id='todaynow' class='todaynow'></span><span id='todaydegrees' class='todaydegrees'>&nbsp;</span></div><div id='windToday' class='todaywind'>&nbsp;<br />&nbsp;<br />&nbsp;</div><div class='labeltemptoday'><span class='htoday'>High <span id='htemptoday' class='htemptoday'></span><span class='todaydegrees'>&deg; </span></span><span class='ltoday'> Low <span id='ltemptoday' class='ltemptoday'></span><span class='todaydegrees'>&deg;</span></span></div><div id='town'></div><div id='tdesc' class='tdesc'></div>";

    if (myRegion.indexOf(' ') == -1)
        getmyData(weatherData, proxy + "?uri=" + localForecastURI + myRegion);
    else {
        ///cater for regions with spaces
        getmyData(weatherData, proxy + "?uri=" + localForecastURI + myRegion.replace(' ', '-'));
    }
    ///get observations data
     ObsData(myRegion);
};

function ObsData(region){
	/// get the latest list of obs
	getmyData(returnObs , ObsListURI );
}

function returnObs(data){
	var Obsval;
	if (debug) console.log("town length" + data.towns.length);
	try {
	for (var i = 0; i < data.towns.length; i++) {
		if (data.towns[i].town == myRegion)
			{ Obsval = data.towns[i].obs;};
	}
	
	if (typeof(Obsval)!= 'undefined')
	{
		if (debug) console.log("ObsRegion=" + Obsval);
		getmyData(weatherDataToday, proxy +"?uri=" + localObsURI + Obsval);
	}
	} catch (e) {};
}


function weatherDataToday(data) {
	try {
    ///set today highs etc
    document.getElementById("todaynow").innerHTML = data.threeHour.temp;
    document.getElementById("todaydegrees").innerHTML="&deg;";
    ///wind stuff
    document.getElementById('windToday').innerHTML=
    "Wind:<br/><span id='windDirection'>" +data.threeHour.windDirection +
    "</span><br/><span id='windSpeed'>" +data.threeHour.windSpeed+
    "</span><span> km/h</span>";
	}
	catch (e){};
    document.getElementById("loading").className='displayoff';
};

function weatherData(data) {
		document.getElementById("dayslist").innerHTML="";
		document.getElementById("dayslist2").innerHTML="";
		try {
        ///set today highs etc
		document.getElementById("ltemptoday").innerHTML=data.days[0].min;
		document.getElementById("htemptoday").innerHTML=data.days[0].max;
        document.getElementById("todayicon").innerHTML = "<img src='" + lookupWeatherImage(data.days[0].forecastWord, true)+ "' title ='" + data.days[0].forecastWord+ "' alt='" + data.days[0].forecastWord +"' />";
        document.getElementById("tdesc").innerHTML= data.days[0].forecast;
        var max,min;
        for (var i = 0; i < 7; i++) {
		// for (var i = 0; i < data.days.length; i++) {
        if (i != 0) {
        	max = data.days[i].max;
        	min =  data.days[i].min;
        	var newHTML ="<li class='item'><div class='daylabel'>" + data.days[i].dow + "</div><div class='labeltemp'><span class='l'><span class='ltemp'>"+min+"&deg;</span></span><span class='h'><span class='htemp'>" + max +"&deg;</span></span></div><div class='wicon'><img title='"+data.days[i].forecastWord+"' alt='"+data.days[i].forecastWord+"' src='"+lookupWeatherImage(data.days[i].forecastWord, false)+"' height='32' width='32' /></div><div class='wdesc'>" + data.days[i].forecast + "</div></li>";
        	var dayslist = document.getElementById("dayslist");
			var dayslist2 = document.getElementById("dayslist2");
			if (i < 4)
        	$(dayslist).append(newHTML);
			if (i > 3)
        	$(dayslist2).append(newHTML);
        }
    }
    document.getElementById("town").innerHTML=data.location.substring(0,12);
    var d = new Date();
    document.getElementById("updated").innerHTML= "* Updated " + d.toLocaleDateString() + " " + d.toLocaleTimeString();
    weatherload = 1;
		} catch (e) {
			document.getElementById("loading").innerHTML='Data error, try again :)';
		};
  /// turn off loading;
    document.getElementById("weather").style.visibility="visible";
    document.getElementById("loading").className='displayoff';
};

function getRadar() {
    if (radarload != 0)return; //already got (1) or getting (2)
    radarload= 2;
    getmyData(radarData, proxy +"?uri=" + radarURI);
};
function get7day() {
    if (sevendayload != 0)return; //already got (1) or getting (2)
    sevendayload= 2;
    getmyData(sevendayData, proxy +"?uri=" + rainFor7DayURI);
};
function get3day() {
    if (threedayload != 0)return; //already got (1) or getting (2)
    threedayload= 2;
    getmyData(threedayData, proxy +"?uri=" + rainFor3DayURI);
};


function threedayData(data) {
	var slidegr = "<img class='threedayslidericon' src='images/slidegr.png' />";
	var slidewh = "<img class='threedayslidericon' src='images/slidewh.png' />";
	var threedayslider = document.getElementById("threedayslider");
	var threedaypics = document.getElementById("threedaypics");
	var threedaytime = document.getElementById("threedaytime");
	try {
	$('#threedayslider').append(slidegr);
    for (var i = 0; i < data.length; i++) {
        /// fill in the img tags for each radar
        	var pic0 = "<img class='threedaypic' alt='' src='"+ radarpicsURI + data[data.length-1].url+"' title='"+data[data.length-1].shortDateTime+"' />";
        	var pic1 = "<img class='threedaypic displayoff' alt='' src='"+ radarpicsURI + data[data.length-1-i].url+"' title='"+data[data.length-1-i].shortDateTime+"' />";
        	var time0 = "<p class='threedaytime'>" + data[data.length-1].shortDateTime + "</p>";
        	var time1 = "<p class='threedaytime displayoff'>" + data[data.length-1-i].shortDateTime + "</p>";
        	if (i == 0) {
        		$(threedaypics).append(pic0);
        		$(threedaytime).append(time0);
        	}
        	if (i != 0){
        	$(threedaypics).append(pic1);
        	$(threedaytime).append(time1);
        	$(threedayslider).append(slidewh);
        	}
    }
    var d = new Date();
    document.getElementById("updated").innerHTML="* Updated " + d.toLocaleDateString() + " " + d.toLocaleTimeString();
    threedayload = 1;
	} catch (e) {
		document.getElementById("loading").innerHTML='Data error, try again :)';
    };
    //updated
    document.getElementById("loading").className='displayoff';
};

function sevendayData(data) {
	var slidegr = "<img class='sevendayslidericon' src='images/slidegr.png' />";
	var slidewh = "<img class='sevendayslidericon' src='images/slidewh.png' />";
	var sevendayslider = document.getElementById("sevendayslider");
	var sevendaypics = document.getElementById("sevendaypics");
	var sevendaytime = document.getElementById("sevendaytime");
	try {
	$('#sevendayslider').append(slidegr);
    for (var i = 0; i < data.length; i++) {
        /// fill in the img tags for each radar
        	var pic0 = "<img class='sevendaypic' alt='' src='"+ radarpicsURI + data[data.length-1].url+"' title='"+data[data.length-1].longDateTime+"' />";
        	var pic1 = "<img class='sevendaypic displayoff' alt='' src='"+ radarpicsURI + data[data.length-1-i].url+"' title='"+data[data.length-1-i].longDateTime+"' />";
        	var time0 = "<p class='sevendaytime'>" + data[data.length-1].longDateTime + "</p>";
        	var time1 = "<p class='sevendaytime displayoff'>" + data[data.length-1-i].longDateTime + "</p>";
        	if (i == 0) {
        		$(sevendaypics).append(pic0);
        		$(sevendaytime).append(time0);
        	}
        	if (i != 0){
        	$(sevendaypics).append(pic1);
        	$(sevendaytime).append(time1);
        	$(sevendayslider).append(slidewh);
        	}
    }
    var d = new Date();
    document.getElementById("updated").innerHTML="* Updated " + d.toLocaleDateString() + " " + d.toLocaleTimeString();
    sevendayload = 1;
	} catch (e) {
		document.getElementById("loading").innerHTML='Data error, try again :)';
    };
    //updated
    document.getElementById("loading").className='displayoff';
};

function radarData(data) {
	var slidegr = "<img class='radarslidericon' src='images/slidegr.png' />";
	var slidewh = "<img class='radarslidericon' src='images/slidewh.png' />";
	var radarslider = document.getElementById("radarslider");
	var radarpics = document.getElementById("radarpics");
	var radartime = document.getElementById("radartime");
	try {
	$(radarslider).append(slidegr);
    for (var i = 0; i < data.length; i++) {
        /// fill in the img tags for each radar
        	var pic0 = "<img class='radarpics' alt='' src='"+ radarpicsURI + data[data.length-1].url+"' title='"+data[data.length-1].shortDateTime+"' />";
        	var pic1 = "<img class='radarpics displayoff' alt='' src='"+ radarpicsURI + data[data.length-1-i].url+"' title='"+data[data.length-1-i].shortDateTime+"' />";
        	var time0 = "<p class='radartime'>" + data[data.length-1].shortDateTime + "</p>";
        	var time1 = "<p class='radartime displayoff'>" + data[data.length-1-i].shortDateTime + "</p>";
        	if (i == 0) {
        		$(radarpics).append(pic0);
        		$(radartime).append(time0);
        	}
        	if (i != 0){
        	$(radarpics).append(pic1);
        	$(radartime).append(time1);
        	$(radarslider).append(slidewh);
        	}
    }
    var d = new Date();
    document.getElementById("updated").innerHTML="* Updated " + d.toLocaleDateString() + " " + d.toLocaleTimeString();
    radarload = 1;
	} catch (e) {
		document.getElementById("loading").innerHTML='Data error, try again :)';
    };
    //updated
    document.getElementById("loading").className='displayoff';
};

function getRegions() {
    if (regionsload != 0) return; //already got (1) or getting (2)
    regionsload = 2;
    getmyData(regionsData, regionURI ); 
};

function regionsData(data) {
	try {
    var h = "<div class='regionName'><select name='selectregion' onchange='javascript:setCookie(this.value);myRegion=this.value;weatherload=0;imageload=0;weatherTouch();window.scrollTo(0,1);' ><option value=''>select a region</option>";
    for (var i = 0; i < data.length; i++) {
      h +=("<option value='" + data[i].location + "'>" + data[i].location + "</option>");
    };
	h += "</div>"
    var regionlist = document.getElementById("regionlist");
    $(regionlist).append(h);
	  //regionlist.appendChild((h+"</div>").toHTML()[0]);
    regionsload = 1;
	} catch (e){
		document.getElementById("loading").innerHTML='Data error, try again :)';
	};
    /// turn off loading;
    document.getElementById("loading").className='displayoff';
};

function lookupWeatherImage(_1c, _1d) {
    var _1e = "images/met/";
    if (_1d) {
        switch (_1c) {
            case "Cloudy":
                _1e += "cloudy_wht.gif";
                break;
            case "Drizzle":
                _1e += "drizzle_wht.gif";
                break;
            case "Fine":
                _1e += "fine_wht.gif";
                break;
            case "Fog":
                _1e += "fog_wht.gif";
                break;
            case "Fewshowers":
            case "Few showers":
                _1e += "few-showers_wht.gif";
                break;
            case "Hail":
                _1e += "hail_wht.gif";
                break;
            case "Partcloudy":
            case "Partly cloudy":
                _1e += "partly-cloudy_wht.gif";
                break;
            case "Rain":
                _1e += "rain_wht.gif";
                break;
            case "Showers":
                _1e += "showers_wht.gif";
                break;
            case "Snow":
                _1e += "snow_wht.gif";
                break;
            case "Thunder":
                _1e += "thunder_wht.gif";
                break;
            case "Wind":
            case "Windy":
                _1e += "wind_wht.gif";
                break;
            default:
                _1e += "unavailable_wht.gif";
        }
    } else {
        switch (_1c) {
            case "Cloudy":
                _1e += "cloudy_wht.gif";
                break;
            case "Drizzle":
                _1e += "drizzle_wht.gif";
                break;
            case "Fine":
                _1e += "fine_wht.gif";
                break;
            case "Fog":
                _1e += "fog_wht.gif";
                break;
            case "Fewshowers":
            case "Few showers":
                _1e += "few-showers_wht.gif";
                break;
            case "Hail":
                _1e += "hail_wht.gif";
                break;
            case "Partcloudy":
            case "Partly cloudy":
                _1e += "partly-cloudy_wht.gif";
                break;
            case "Rain":
                _1e += "rain_wht.gif";
                break;
            case "Showers":
                _1e += "showers_wht.gif";
                break;
            case "Snow":
                _1e += "snow_wht.gif";
                break;
            case "Thunder":
                _1e += "thunder_wht.gif";
                break;
            case "Wind":
            case "Windy":
                _1e += "wind_wht.gif";
                break;
            default:
                _1e += "unavailable_wht.gif";
        }
    }
    return _1e;
};

//cookie functions
function getCookie() {
    	var defaultValue = null;
        var re          = new RegExp(c_name+'=(.*)');
        var value       = re.exec(document.cookie);
        return (value) ? value[1].split(';')[0] : defaultValue;
}

function setCookie(value) {
        document.cookie = c_name+'='+value+';path=/;expires='+cookieTime(expiredays);
}

function cookieTime(days){
  var now = new Date();
  var exp = new Date();
  var x   = Date.parse(now) + days*24*60*60*1000;
  exp.setTime(x);
  str = exp.toUTCString();
  re = '/(\d\d)\s(\w\w\w)\s\d\d(\d\d))/';
  return str.replace(re,"$1-$2-$3");
}
function drawArrow(id)
{
	var ctx = document.getCSSCanvasContext("2d", id, 30, 30);
	ctx.fillStyle = "rgb(171,173,176)";
	ctx.beginPath();
		ctx.moveTo(0, 0);
		ctx.lineTo(30, 0);
		ctx.lineTo(15, 23);
	ctx.closePath();
	ctx.fill();
}

function next()
{
	
	//toggle the views
	$('#dayslist').slideToggle('slow');
	$('#next').replaceWith("<div id='prev' onclick='void(0);' onmousedown='prev();'>prev ...</div>");
	$('#dayslist2').slideToggle('slow');
}

function prev()
{
	
	//toggle the views
	$('#dayslist').slideToggle('slow');
	$('#prev').replaceWith("<div id='next' onclick='void(0);' onmousedown='next();'>next ...</div>");
	$('#dayslist2').slideToggle('slow');
}