var hide_year = 2000;
var hide_month = 0;

var hide_year1 = hide_year;
var hide_month1 = hide_month;

var hide_year2 = hide_year;
var hide_month2 = hide_month;

var max_year = 2011;


$(function(){
	initDots(dots);
	$('#time_walk').slider({
		orientation: 'vertical',
		min: 0,
		max: 143,
		step: 1,
		value: 125,
		slide: function(event,ui) {showDotsfromList(parseInt(ui.value/12)+2000,ui.value%12);}
	});
	showDotsfromList(active_year,active_month);
	$('#pagination_navi').html($('#time_helper').remove().html());
	$('#pagination_navi').hover(function(){$(this).children('a').fadeIn();},function(){$(this).children('a').fadeOut();});
});



function initDots(dots)
	{
	dot_area = document.getElementById("dots");
	for(var i=2000;i<=max_year;i++) {
		for(var n=0;n<dots[i].length;n++) {
			for(var m=0;m<dots[i][n].length;m++) {
				dot_area.appendChild(dots[i][n][m].html);
				}
			}
		}
	}


function stepMonth(d)
	{
	if(d>0)
		{
		active_month++;
		if(active_month>11)
			{
			if(active_year<max_year)
				{
				active_month=0;
				active_year++;
				}
			else active_month=11;
			}
		}
	else
		{
		active_month--;
		if(active_month<0)
			{
			if(active_year>2000)
				{
				active_month=11;
				active_year--;
				}
			else active_month = 0;
			}
		}
	$('#time_walk').slider('value',12*(active_year-2000)+active_month);
	showDotsfromList(active_year,active_month);
	}

function addTooltip(dot)
	{
	$(dot).tooltip({offset: [1, 1], relative: true, tipClass:'tooltip',
		onShow:function()
			{
			var imgscroll = this.getTip().children('.autoscroller');
			if(imgscroll.length>0){
				imgscroll = imgscroll.children('img').get(0)
				if(parseInt(imgscroll.style.top)<10) $(imgscroll).animate({top:0},7000);
				else $(imgscroll).animate({top:-(parseInt(imgscroll.height)-60)},7000);
				}
			}
	});
	}

function showDotsfromList(year,month)
	{
	active_year = year;
	active_month= month;
	
	$('#time_display').html(active_year+" / "+(active_month+1+'').replace(/^(\d)$/,'0$1'));
	
	for(var n=0;n<dots[hide_year2][hide_month2].length;n++)	{dots[hide_year2][hide_month2][n].hide();}
	
	for(var n=0;n<dots[year][month].length;n++)					{dots[year][month][n].show();}

	//a bit like a stack, only uglier. needs 3 calls until dots get hidden.

	hide_year2 = hide_year1;
	hide_month2 = hide_month1;

	hide_year1 = hide_year;
	hide_month1 = hide_month;

	hide_year = year;
	hide_month = month;
	}

function Dot(x,y,description,city)
	{

	this.html = document.createElement("div");

	var dot_pos = document.createAttribute("style");
	dot_pos.nodeValue = "top:"+y+"px;left:"+x+"px;";
	this.html.setAttributeNode(dot_pos);


	var citytip = document.createElement("span");
	var citytip_class = document.createAttribute("class");
	citytip_class.nodeValue = "city";
	citytip.setAttributeNode(citytip_class);
	citytip.appendChild(document.createTextNode(city));


	var tooltip = document.createElement("div");

	var tooltip_class = document.createAttribute("class");
	tooltip_class.nodeValue = "tooltip";
	tooltip.setAttributeNode(tooltip_class);
    $(tooltip).append(description);

	var smalldot = document.createElement("img");

	var imgclass = document.createAttribute("class");
	imgclass.nodeValue = "dot";
	smalldot.setAttributeNode(imgclass);


	var imgsrc = document.createAttribute("src");
	imgsrc.nodeValue = public_dir+"images/greendot_kl.png";
	smalldot.setAttributeNode(imgsrc);

	var fade_dot = document.createElement("img");

	var imgclass2 = document.createAttribute("class");
	imgclass2.nodeValue = "dot";
	fade_dot.setAttributeNode(imgclass2);

	var imgsrc2 = document.createAttribute("src");
	imgsrc2.nodeValue = public_dir+"images/greendot.png";
	fade_dot.setAttributeNode(imgsrc2);

	this.html.appendChild(fade_dot);
	this.html.appendChild(smalldot);
	this.html.appendChild(tooltip);
    this.html.appendChild(citytip);

	this.show = function(){
		$(smalldot).css({"opacity":1});
        $(citytip).css({"opacity":1});
		$(fade_dot).css({"opacity":0.5});
		$(smalldot).animate({"height":21,"width":21,"top":-10.5,"left":-10.5},200,function(){addTooltip(this);});
		$(fade_dot).animate({"height":100,"width":100,"top":-50,"left":-50,"opacity":0},600,function(){$(fade_dot).hide();});
		}

	this.hide = function(){
		$(smalldot).animate({"height":1,"width":1,"top":-0.5,"left":-0.5,"opacity":0},200);
		$(fade_dot).css({"height":1,"width":1,"top":-0.5,"left":-0.5});
        $(citytip).css({"opacity":0});
		}

	return(this);
	}