var presbeton = window.presbeton = window.presbeton || {};

presbeton.MapController = function(element, options)
{
	this.options = $.extend({
		mapUrlAll: BASE_HREF + "js/map-all.xml",
		mapUrlCs: BASE_HREF + "js/map-cs.xml",
		mapUrlSk: BASE_HREF + "js/map-sk.xml",
		loaderImageUrl: BASE_HREF + 'img/ajax-loader.gif',
		activeState: null,
		activeSubRegion: null,
		id2Url: {},
		speedOut: 250,
		speedIn: 100,
		styleState: {
	        fill: "#f8f8f8",
	        stroke: "#555",
	        cursor: 'pointer',
	        "stroke-width": 1,
	        "stroke-linejoin": "round"
	    },
		styleStateHover: {
	        fill: '#85f4af'
	    },	
		styleStateOutline: {
	        stroke: "#555",
	        "stroke-width": 2,
	        "stroke-linejoin": "round"
	    },  	    
	    styleRegion: {
	        stroke: "#555",
	        "stroke-width": 0.8,
	        "stroke-linejoin": "round"
	    },
	    styleSubRegion: {
	        stroke: "#555",
	        fill: "#f8f8f8",
	        cursor: 'pointer',
	        "stroke-width": 0.3,
	        "stroke-linejoin": "round"
	    },
	    styleSubRegionHover: {
	        fill: '#85f4af'
		},
		styleSubRegionActive: {
	        fill: '#29C05B'
		}
	}, options);
	
	this.$element = $(element);
	this.activeSubRegion = this.options.activeSubRegion;
};

presbeton.MapController.prototype.init = function()
{
	this.$element.empty();
	this.showLoader();
	
	if(this.options.activeState == 'cs')
	{
		this.loadCs();
	}
	
	if(this.options.activeState == 'sk')
	{
		this.loadSk();
	}

	if(this.options.activeState == null)
	{
		$.get(this.options.mapUrlAll, $.proxy(function(svg){
			this.svgAll = svg;
			this.showAll();
		}, this));
	}	
	
	/*
	$('#map-menu a#mm-cs').bind('click', $.proxy(function(){ this.loadCs(); return false; }, this));
	$('#map-menu a#mm-sk').bind('click', $.proxy(function(){ this.loadSk(); return false; }, this));
	*/
}

presbeton.MapController.prototype.showLoader = function()
{
	this.$element.append('<div class="loader" />');
}

presbeton.MapController.prototype.showAll = function()
{
	this.$element.empty();
	var $svg = $(this.svgAll).find('svg');
	
	this.width = $svg.attr('width'); 
	this.height = $svg.attr('height');
	this.rcanvas = Raphael(this.$element.get(0), this.width, this.height);
	
	var that = this;

    $svg.find('#cs-state, #sk-state').each(function()
	{
		that.renderState($(this));		
	});
}

presbeton.MapController.prototype.loadCs = function()
{
	this.$element.empty();
	if(this.svgCs) this.showCs();
	else
	{
		this.showLoader();
		$.get(this.options.mapUrlCs, $.proxy(function(svg){
			this.svgCs = svg;
			this.showCs();
		}, this));
	}
	$('#map-menu a').removeClass('active');
	$('#map-menu a#mm-cs').addClass('active');
}

presbeton.MapController.prototype.showCs = function()
{
	this.$element.empty();
	var $svg = $(this.svgCs).find('svg');
	
	this.width = $svg.attr('width'); 
	this.height = $svg.attr('height');
	this.rcanvas = Raphael(this.$element.get(0), this.width, this.height);
	
	var that = this;
	
	$svg.find('path[id^=okres]').each(function()
	{
		that.renderSubRegion($(this));
	});

	$svg.find('path[id^=kraj]').each(function()
	{
		that.renderRegion($(this));
	});
	
	$svg.find('path#cs-state').each(function()
	{
		that.renderStateOutline($(this));
	});

}

presbeton.MapController.prototype.loadSk = function()
{
	this.$element.empty();
	if(this.svgSk) this.showSk();
	else
	{
		this.showLoader();
		$.get(this.options.mapUrlSk, $.proxy(function(svg){
			this.svgSk = svg;
			this.showSk();
		}, this));
	}
	$('#map-menu a').removeClass('active');
	$('#map-menu a#mm-sk').addClass('active');
}

presbeton.MapController.prototype.showSk = function()
{
	this.$element.empty();
	var $svg = $(this.svgSk).find('svg');
	
	this.width = $svg.attr('width'); 
	this.height = $svg.attr('height');
	this.rcanvas = Raphael(this.$element.get(0), this.width, this.height);
	
	var that = this;

	$svg.find('path[id^=sk-okres]').each(function()
	{
		that.renderSubRegion($(this));
	});

	$svg.find('path[id^=sk-kraj]').each(function()
	{
		that.renderRegion($(this));
	});
	
	$svg.find('path#sk-state').each(function()
	{
		that.renderStateOutline($(this));
	});

}

presbeton.MapController.prototype.mouseEnterState = function(event)
{
	event.currentTarget.raphael.animate(this.options.styleStateHover, this.options.speedIn);
}

presbeton.MapController.prototype.mouseOutState = function(event)
{
	event.currentTarget.raphael.animate(this.options.styleState, this.options.speedOut);	
}

presbeton.MapController.prototype.mouseEnterSubRegion = function(event)
{
	if(this.activeSubRegion != event.currentTarget.id) event.currentTarget.raphael.animate(this.options.styleSubRegionHover, this.options.speedIn);
}

presbeton.MapController.prototype.mouseOutSubRegion = function(event)
{
	if(this.activeSubRegion != event.currentTarget.id) event.currentTarget.raphael.animate(this.options.styleSubRegion, this.options.speedOut);	
}

presbeton.MapController.prototype.clickSubRegion = function(event)
{
	var activeElement = document.getElementById(this.activeSubRegion); 
	if(activeElement) activeElement.raphael.animate(this.options.styleSubRegion, 0);
	
	this.activeSubRegion = event.currentTarget.id;
	event.currentTarget.raphael.animate(this.options.styleSubRegionActive, 0);

	if(event.target.id && this.options.id2Url[event.target.id]) window.location = this.options.id2Url[event.target.id];
}

presbeton.MapController.prototype.clickState = function(event)
{
	switch(event.target.id)
	{
		case 'cs-state':
			window.location = $('#map-menu a#mm-cs').attr('href');
			// this.loadCs();		
			break;
		case 'sk-state':
			window.location = $('#map-menu a#mm-sk').attr('href');
			//this.loadSk();		
			break;
	}
}

presbeton.MapController.prototype.renderState = function($svgPath)
{
  	var key = $svgPath.attr('id');
  	var d = $svgPath.attr('d');
	var label = $svgPath.attr('inkscape:label');

	var path = this.rcanvas.path(d);
	path.attr(this.options.styleState);
	$(path.node).attr('id', key);
	$(path.node).attr('title', label);

	$(path.node).bind('click', $.proxy(this.clickState, this));		
	$(path.node).bind('mouseenter', $.proxy(this.mouseEnterState, this)); 
	$(path.node).bind('mouseout', $.proxy(this.mouseOutState, this)); 		
}

presbeton.MapController.prototype.renderStateOutline = function($svgPath)
{
  	var d = $svgPath.attr('d');
	var label = $svgPath.attr('inkscape:label');

	var path = this.rcanvas.path(d);
	path.attr(this.options.styleStateOutline);
}

presbeton.MapController.prototype.renderRegion = function($svgPath)
{
  	var d = $svgPath.attr('d');
	var label = $svgPath.attr('inkscape:label');
	
	var path = this.rcanvas.path(d);
	path.attr(this.options.styleRegion);
}

presbeton.MapController.prototype.renderSubRegion = function($svgPath)
{
  	var id = $svgPath.attr('id');
  	var d = $svgPath.attr('d');
	var label = $svgPath.attr('inkscape:label');
	
	var path = this.rcanvas.path(d);	
	path.attr(this.options.styleSubRegion);
	if(id == this.activeSubRegion) path.attr(this.options.styleSubRegionActive);
	$(path.node).attr('id', id);
	path.attr('title', label);
	
	$(path.node).bind('mouseenter', $.proxy(this.mouseEnterSubRegion, this)); 
	$(path.node).bind('mouseout', $.proxy(this.mouseOutSubRegion, this)); 
	$(path.node).bind('click', $.proxy(this.clickSubRegion, this));
	
	// console.log('"' + $svgPath.attr('id') + '": ' + '"' + $svgPath.attr('inkscape:label') + '",');
	 
}