kff.widgets.Map = function(element, options)
{
	this.options = $.extend({
		scale: 7.2,
		mapUrl: BASE_HREF + "js/map-all.xml",
		loaderImageUrl: BASE_HREF + 'img/ajax-loader.gif',
		speed: 200,
		styleState: {
	        // fill: "#fff",
	        stroke: "#5F5047",
	        cursor: 'pointer',
	        "stroke-width": 0,
	        "stroke-linejoin": "round"
	    },
	    styleRegion: {
	        stroke: "#e4e0e0",
	        fill: "#b2acac",
	        cursor: 'pointer',
	        "stroke-width": 1,
	        "stroke-linejoin": "round"
	    },
	    styleRegionHover: {
	        fill: '#ed1c24'
		},
		id2Url: {
			'kraj-zlinsky': null,
			'kraj-ustecky': null,
			'kraj-stredocesky': null,
			'kraj-praha': null,
			'kraj-plzensky': null,
			'kraj-pardubicky': null,
			'kraj-moravskoslezsky': null,
			'kraj-olomoucky': null,
			'kraj-kralovehradecky': null,
			'kraj-karlovarsky': null,
			'kraj-liberecky': null,
			'kraj-vysocina': null ,
			'kraj-jihocesky': null,
			'kraj-jihomoravsky': null 
		}
	}, options);
	this.$element = $(element);
	this.scale = this.options.scale;
	this.$regions = $([]);
	this.$state = $([]);
};

kff.widgets.Map.prototype.init = function()
{
	this.$element.empty();
	this.$element.append('<img src="'+ this.options.loaderImageUrl + '" style="margin: 20px auto; display: block;" />');
	$.get(this.options.mapUrl, $.proxy(this.mapLoaded, this));
}

kff.widgets.Map.prototype.mapLoaded = function(svg)
{
	this.svg = svg;
	this.$element.empty();
	var $svg = $(this.svg).find('svg');
	
	this.width = $svg.attr('width') * this.options.scale; 
	this.height = $svg.attr('height') * this.options.scale;
	this.rcanvas = Raphael(this.$element.get(0), this.width, this.height);
	
	this.renderState($('g#layer1 path', svg));
	
	var that = this;

    $('g#layer2 path', svg).each(function()
	{
		that.renderRegion($(this));
	});
	
	this.$regions.bind('mouseenter', $.proxy(this.mouseEnterRegion, this)); 
	this.$regions.bind('mouseout', $.proxy(this.mouseOutRegion, this)); 
	this.$regions.bind('click', $.proxy(this.clickRegion, this)); 
}

kff.widgets.Map.prototype.mouseEnterRegion = function(event)
{
	event.currentTarget.raphael.stop().animate(this.options.styleRegionHover, this.options.speed);
}

kff.widgets.Map.prototype.mouseOutRegion = function(event)
{
	event.currentTarget.raphael.stop().animate(this.options.styleRegion, this.options.speed);
}

kff.widgets.Map.prototype.clickRegion = function(event)
{
	if(event.target.id && this.options.id2Url[event.target.id]) window.location = this.options.id2Url[event.target.id];
}

kff.widgets.Map.prototype.renderState = function($svgPath)
{
	if($svgPath.size())
	{
	  	var key = $svgPath.attr('id');
	  	var d = $svgPath.attr('d');
		var label = $svgPath.attr('inkscape:label');
	
		var path = this.rcanvas.path(d);
		path.scale(this.scale, this.scale, 0, 0);
		path.attr(this.options.styleState);
		path.attr('id', key);
		path.attr('title', label);
		
		this.$state = $(path.node);
	}
}

kff.widgets.Map.prototype.renderRegion = 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.scale(this.scale, this.scale, 0, 0);
	path.attr(this.options.styleRegion);
	$(path.node).attr('id', key);
	path.attr('title', label);

	this.$regions = this.$regions.add(path.node);
}