/*
 *   © Marek Mojzík
 *     04.01.2011
 */

var Settings = {
  windDirections: {
    "J": "Južný",
    "JZ": "Juhozápadný",
    "Z": "Západný",
    "SZ": "Severozápadný",
    "S": "Severný",
    "SV": "Severovýchodný",
    "V": "Východný",
    "JV": "Juhovýchodný"

  },
  weathers: {
    "wetter1": "Polojasno",
    "wetter2": "Sníh",
    "wetter3": "Jasno"
  },
	rolloverSpeed: 17,
	rolloutSpeed: 8,
	translateAddress: function(adresa)
	{
		// tato funkce generuje adresy na datové skripty z hrefu odkazu
		//return (adresa.match(/\?data=([^&]+)/))[1] + ".js";
		// tato funkce generuje adresy na datové skripty z hrefu odkazu		
		var tmp = "";
		if (adresa.indexOf("region") !=-1) 
		{			
			tmp = (adresa.match(/\?data=([^&]+)/))[1] + ".js";
		}				
		else 
		{				
			tmp = (adresa.match(/\?data=([^&]+)/))[1];
			tmp = "mesto.js.php?id=" + tmp;
		}
		
		//alert(tmp);
		return "http://www.in-pocasie.sk/script/interactive-map/" + tmp;

	},
  defaultJS: "http://www.in-pocasie.sk/cache/mapa.js.cache.php"
};




var element = function(id)
{
	return document.getElementById(id);
};

var loadScript = function(url)
{
	url = Settings.translateAddress(url);
	var s = document.createElement("script");
	s.src = url;
	document.getElementsByTagName("head")[0].appendChild(s);
};

var temperature = function(t)
{
  return (t || 0).toString().replace("-", "\u2212") + " <b>°C</b>";
}


for(var i = 2; i < 4; i++)
{
	document.write('<div id="map_state' + i + '">\
		<a href="/" class="map_close" onclick="return !zavrit();">Zavrieť</a>\
	</div>');
}

(function()
{
	var s1 = element("map_state1");
	var area = s1.getElementsByTagName("area");
	var select = document.createElement("select");
  select.id = "set_region";
	for(var i = 0, a; a = area[i]; i++)
	{
		a.div = document.createElement("div");
		a.div.className = "map-sk";
		a.div.style.backgroundPosition = -(7 - i) * 631 + "px";
		a.stav = 0;
		a.smer = 0;
		s1.appendChild(a.div);
		var animace = function(a)
		{
			a.stav += a.smer;
			if(a.stav > 100 || a.stav < 0)
			{
				a.smer = 0;
				a.stav = Math.max(0, Math.min(100, a.stav));
			}
			try {
			if(typeof a.div.style.opacity != "undefined")
			{
				a.div.style.opacity = a.stav / 100;
			}
			else if(a.div.filters)
			{
				a.div.style.filter = "alpha(opacity=" + a.stav + ")";
			}
			} catch(e){
				a.smer *= 10;
			}
			a.div.style.display = (a.stav == 0) ? "" : "block";
			a.timeout = a.smer && setTimeout(function() { animace(a) }, 50);
		}
		a.onmouseover = a.onfocus = function()
		{
			var a = this;
			a.smer = Settings.rolloverSpeed;
			if(!a.timeout) animace(a);
		};
		a.onmouseout = a.onblur = function()
		{
			var a = this;
			a.smer = -Settings.rolloutSpeed;
			if(!a.timeout) animace(a);
		};
		a.onclick = function()
		{
			this.option.selected = true;
			this.select.refresh();
			loadScript(this.href);
			return false;
		};
		a.select = select;
		a.option = document.createElement("option");
		a.option.value = a.href;
		a.option.text = a.title;
		try
		{
			select.add(a.option);
		}
		catch(e)
		{
			select.add(a.option, null);
		}
	}
	element("map_state2").appendChild(select);
	select.onchange = function()
	{
		loadScript(this.options[this.selectedIndex].value);
	};

	var zavoj = document.createElement("div");
	zavoj.className = "zavoj";
	element("map_state3").appendChild(zavoj);

	var s = document.createElement("script");
	s.src = Settings.defaultJS;
	document.getElementsByTagName("head")[0].appendChild(s);
})();
var zavrit0 = function() { return true; };
var zavrit1 = zavrit0;
var zavrit2 = zavrit0;
var zavrit = zavrit0;

var days = [], daySelected;
var state1 = function(param)
{
  var ta = element("time_axis");
  var selected;
  var times = [];
  for(var i = 0, li; li = ta.getElementsByTagName("li")[i]; i++)
  {
    li.index = i;
    if(param.axisDays[i])
    {
      param.axisDays[i].day = li.getElementsByTagName("b")[0].innerHTML;
      days.push({ name: param.axisDays[i].day, date: param.axisDays[i].date })
    }
  }
  for(var i = 0, a; a = ta.getElementsByTagName("a")[i]; i++)
  {
    times.push(a);
    a.index = i;
    a.onclick = function()
    {
      times[selected].className = (selected % 2) ? "even" : "odd";
      selected = this.index;
      times[selected].className = ((selected % 2) ? "even" : "odd") + " selected";
      showTime(param.axisDays[this.parentNode.index], param.axisTimes[this.index])
      daySelected = this.parentNode.index;
      return false;
    }
    if(param.axisTimes[i]) param.axisTimes[i].time = a.innerHTML + ":00";
    if(a.className.indexOf("selected") > -1)
    {
      selected = i;
      daySelected = a.parentNode.index;
    }
  }
  var arrows = [document.createElement("a"), document.createElement("a")];
  for(var i = 0; i < 2; i++)
  {
    arrows[i].className = "time_axis_arrow_" + ["left", "right"][i];
    arrows[i].href = "javascript:;";
    ta.appendChild(arrows[i]);
    arrows[i].direction = [-1, 1][i];
    arrows[i].onmouseup = function()
    {
      var n = times[selected + this.direction];
      if(n) n.onclick();
      return false;
    };
  }
  
  var showTime = function(day, time)
  {
    if(day)
    {
      element("forecast_main_day").innerHTML = day.day;
      element("forecast_main_date").innerHTML = day.date;
      element("forecast_main_icon").src = "http://www.in-pocasie.sk/ikony/" + day.icon + ".png";
      element("forecast_main_icon").alt = element("forecast_main_icon").title = Settings.weathers[day.icon];

      element("forecast_main_temperature1").innerHTML = temperature(day.temperature[0]);
      element("forecast_main_temperature2").innerHTML = temperature(day.temperature[1]);
      element("forecast_main_text").innerHTML = day.text;
    }
    if(time)
    {
      for(var i = 0, t; t = time[i]; i++)
      {
        var te = element(t.id);
        te.getElementsByTagName("img")[0].src = "http://www.in-pocasie.sk/ikony/" + t.icon + "_small.png";
        te.getElementsByTagName("img")[0].alt = te.getElementsByTagName("img")[0].title = Settings.weathers[t.icon];
        te.getElementsByTagName("span")[0].innerHTML = temperature(t.temperature);        
      }
      if(time.time) {
      if(time.time == "06:00")element("forecast_main_time").innerHTML = "Ráno";
      if(time.time == "12:00")element("forecast_main_time").innerHTML = "Dopoludnie";
      if(time.time == "18:00")element("forecast_main_time").innerHTML = "Popoludnie";
      if(time.time == "00:00")element("forecast_main_time").innerHTML = "Noc";
      }
    }
  }
};

var state2 = function(param)
{
	zavrit1();
	element("map_state1").style.display = "none";
	element("map_state2").style.display = "block";
	element("map_state2").style.backgroundImage = "url('http://www.in-pocasie.sk/img/" + param.image + ".png')";
	element("map_state3").style.backgroundImage = "url('http://www.in-pocasie.sk/img/" + param.image + ".png')";

	var div = document.createElement("div");
	div.className = "map_state2-mesta";
	element("map_state2").appendChild(div);
	var selectMesta = document.createElement("select");
	selectMesta.id = "set_city";

	var select = document.createElement("select");
	var o = document.createElement("option");
	o.text = "Další města";
	o.value = "";
	try
	{
		selectMesta.add(o);
	}
	catch(e)
	{
		selectMesta.add(o, null);
	}
  
  //var h2 = document.createElement("h2");
  //h2.innerHTML = param.name;
  //div.appendChild(h2);
  
	for(var i = 0, m; m = param.cities[i]; i++)
	{
		var a = document.createElement("a");
		a.href = m.link;
    a.className = "map_city";
		a.innerHTML = "<span>" + m.name + "</span>";
		if(!m.x && !m.y)
		{
			var o = document.createElement("option");
			o.text = m.name;
			o.value = a.href;
			o.a = a;
			try
			{
				selectMesta.add(o);
			}
			catch(e)
			{
				selectMesta.add(o, null);
			}
		}
		else
		{
			a.style.left = m.x + "px";
			a.style.top = m.y + "px";
			a.onclick = function()
			{
				this.option.selected = true;
				this.select.refresh();
				loadScript(this.href);
				return false;
			};
			div.appendChild(a);
			a.select = select;
		}
		a.option = document.createElement("option");
		a.option.text = m.name;
		a.option.value = a.href;
		try
		{
			select.add(a.option);
		}
		catch(e)
		{
			select.add(a.option, null);
		}
	}
	element("map_state3").appendChild(select);
	select.onchange = function()
	{
		loadScript(this.options[this.selectedIndex].value);
	};
	createPseudoSelect(select);

	if(selectMesta.options.length > 1)
	{
		div.appendChild(selectMesta);
		selectMesta.onchange = function()
		{
			this.options[this.selectedIndex].a.option.selected = true;
			select.refresh();
			loadScript(this.options[this.selectedIndex].value);
		};
		createPseudoSelect(selectMesta);
	}


	zavrit1 = function()
	{
		element("map_state1").style.display = "";
		element("map_state2").style.display = "";
		element("map_state2").removeChild(div);
		select.pseudoSelect.parentNode.removeChild(select.pseudoSelect);
		zavrit = zavrit0;
		zavrit1 = zavrit0;
		return true;
	}
	zavrit = zavrit1;
}

state3 = function(param)
{
	zavrit2();
	element("map_state2").style.display = "";
	element("map_state3").style.display = "block";

	var div = document.createElement("div");
	div.className = "map_state3_city";
	element("map_state3").appendChild(div);

	var h = [];
  h.push("<h2>" + param.name + "</h2>");
  h.push("<p id=\"forecast_city_date\"></p>");
  h.push("<p id=\"forecast_city_main_text\"></p>");
  for(var i = 0; i < 4; i++)
  {
    h.push("<div>");
    h.push("<h3>" + ["Ráno", "Dopoludnia", "Odpoludnia", "Noc"][i] + "</h3>");
    h.push("<img src=\"img/blank.gif\" id=\"forecast_city" + i + "_icon\" style=\"margin-top: 25px;\"><br /><br />");
    h.push("<big><b id=\"forecast_city" + i + "_temperature1\">1</b> až <b id=\"forecast_city" + i + "_temperature2\">2</b></big>");
    h.push("<p><b>Rýchlosť vetra:</b><span id=\"forecast_city" + i + "_wind\">3</span></p>");
    h.push("<p><b>Smer vetra:</b><span id=\"forecast_city" + i + "_direction\">4</span></p>");
    h.push("</div>");
  }
  h.push("<ul id=\"time_axis_city\">");
  for(var i = 0; i < 6; i++)
  {
    h.push("<li><a href=\"\"" + (daySelected == i ? " class=\"selected\"" : "") + "><b>" + days[i].name + "</b>" + days[i].date + "</a>");
  }
  h.push("</ul>");
  
  var showCity = function(city)
  {
    element("forecast_city_main_text").innerHTML = city.text;
    element("forecast_city_date").innerHTML = city.date;
    for(var i = 0; i < 4; i++)
    {
      element("forecast_city" + i + "_icon").src = "http://www.in-pocasie.sk/ikony/" + city.forecast[i].icon + ".png";
      element("forecast_city" + i + "_icon").alt = city.forecast[i].icon;
      element("forecast_city" + i + "_icon").title = "";
      //element("forecast_city" + i + "_icon").title = Settings.weathers[city.forecast[i].icon];
      element("forecast_city" + i + "_temperature1").innerHTML = temperature(city.forecast[i].temperature[0]);
      element("forecast_city" + i + "_temperature2").innerHTML = temperature(city.forecast[i].temperature[1]);
      element("forecast_city" + i + "_wind").innerHTML = city.forecast[i].wind + " km/h";
      element("forecast_city" + i + "_direction").innerHTML = "<img src=\"http://www.in-pocasie.sk/ikony/vitr/" + city.forecast[i].direction + ".png\"> " + Settings.windDirections[city.forecast[i].direction];
    }
  }
	div.innerHTML = h.join("");

  var times = [];
  var ta = element("time_axis_city");
  for(var i = 0, a; a = ta.getElementsByTagName("a")[i]; i++)
  {
    times.push(a);
    a.index = i;
    a.onclick = function()
    {
      times[daySelected].className = "";
      daySelected = this.index;
      times[daySelected].className = "selected";
      showCity(param.days[daySelected])
      return false;
    }
    if(param.days[i]) param.days[i].date = days[i].name + ", " + days[i].date;
  }
  var arrows = [document.createElement("a"), document.createElement("a")];
  for(var i = 0; i < 2; i++)
  {
    arrows[i].className = "time_axis_arrow_" + ["left", "right"][i];
    arrows[i].href = "javascript:;";
    arrows[i].innerHTML = "<img src=\"img/timeaxis_" + ["left", "right"][i] + ".png\">";
    ta.appendChild(arrows[i]);
    arrows[i].direction = [-1, 1][i];
    arrows[i].onmouseup = function()
    {
      var n = times[daySelected + this.direction];
      if(n) n.onclick();
      return false;
    };
  }
  
  showCity(param.days[daySelected]);
/*  
	h.push("<tr><td>Ráno<td>Dopoledne<th>Odpoledne<th>Noc");
	for(var i = 0, d; d = param.dny[i]; i++)
	{
		if(i < 2)
		{
			h.push("<tr><th class=\"den\"><b>" + d.den + "</b><br>" + d.teplota);
			for(var j = 0; j < 4; j++) h.push("<td><img src=\"img/" + d.obrazek[j] + ".png\">");
		}
		else
		{
			h.push("<th class=\"dalsi-den\"><b>" + d.den + "</b><br>" + d.teplota);
			h2.push("<td><img src=\"img/" + d.obrazek + ".png\">");
		}
		if(i == 1) h.push("</table><table><tr><th class=\"mesto\">")
	}
	h.push(h2.join(""));
	h.push("</table>");
*/

	zavrit2 = function()
	{
		element("map_state2").style.display = "block";
		element("map_state3").style.display = "";
		element("map_state3").removeChild(div);
		zavrit = zavrit1;
		zavrit2 = zavrit0;
		return true;
	}
	zavrit = zavrit2;
}