window.onload = function () {

    var klik = false;
    var left = $("#mapa_left");
    var right = $("#mapa_right");
    var kraje = {};
    var ostatni = null;
    var attr = {
    	fill: "#fff",
    	stroke: "#666",
    	"stroke-width": 1,
    	//"stroke-linejoin": "round",
    	translation : "0 -144"
    };
    
    var re = Raphael("mapa", 990.00, 744.09);
    re.rect(0,0,895,596).attr({fill : '#7DBCDF'}).toBack();
    $.ajax({
    	url : '/mapa/show',
        dataType : 'json',
        async: false,
        success : function(data){
	    	$(data).each(function(){
	          	kraje[this.id] = {};
	           	kraje[this.id]['svg'] = re.path(this.svg);
	           	kraje[this.id]['nazwa'] = this.nazwa;
	           	kraje[this.id]['kontynent'] = this.kontynent;
	        });
    	}  	
    });
    
    for(var kraj in kraje){
    	if(kraj != 11){
            kraje[kraj]['svg'].attr(attr);
    	}else{
            kraje[kraj]['svg'].attr({
            	fill: "#D7EFA4",
            	stroke: "#666",
            	"stroke-width": 1/*,
            	"stroke-linejoin": "round"*/,
            	translation : "0 -144"
            });
    	}
        (function(id){
        	var kolor;
            if(id == 11){
            	kolor = '#D7EFA4';
            }else{
            	kolor = '#fff';
            }
            
            kraje[id]['svg'].hover(function (event) {
            	$('#path').html('<span id="path_kontynent">' + kraje[id]['kontynent'] + '</span> > <span id="path_kraj">' + kraje[id]['nazwa'] + '</span>');
            	this.attr({fill: "#FFE26F"});
            }, function (event) {
            	if(!klik){
            		$('#path').text("Europa"); 
            	}
            	this.attr({fill: kolor});
            });
            
            kraje[id]['svg'].click(function(){
            	$('#obiekt').text('region');
            	klik = true;
            	$('#mapa').css('display','none');
            	left.animate({left:0},1000,function(){
            		klik = false;
            		var path = $('#path').html();
            		$.ajax({
            			url: '/mapa/show',
            			dataType: 'json',
            			data: {typ:'kraj',kraj:id},
            			success : function(data){
		                    var attr = {
		                    	fill: "#fff",
		                    	stroke: "#666",
		                    	"stroke-width": 1/*,
		                      	"stroke-linejoin": "round"*/
		                    };
                    
		                    var kraj = {};
		                    var rp = Raphael("kraj", 596, 600);
		                    $(data).each(function(){
		                    	kraj[this.id] = {};
		                    	kraj[this.id]['maoddzialy'] = this.maoddzialy;
		                    	kraj[this.id]['svg'] = rp.path(this.svg).attr(attr);
		                    	if(kraj[this.id]['maoddzialy'] == '1'){
		                    		kraj[this.id]['svg'].attr('fill','#FFFEEF');
		                    	};
		                    	
		                    	kraj[this.id]['nazwa'] = this.nazwa;
		                    	kraj[this.id]['xy'] = {
		                    		xmin : this.x_min,
		                    		xmax : this.x_max,
		                    		ymin : this.y_min,
		                    		ymax : this.y_max
		                    	};
		                    });
		                    var mapa = rp.set();
		                    for(var region in kraj){
		                    	(function(i){
		                    		var kolor = kraj[i]['svg'].attr('fill');
		                    		kraj[i]['svg'].hover(function (event) {
		                    			$('#path').html(path + ' > <span>' + kraj[i]['nazwa'] + '</span>');
		                    			if(kolor == '#FFFEEF'){
		                    				this.attr({fill: "#FFE26F"});
		                    			}
		                    		}, function (event) {
		                    			this.attr({fill: kolor});
		                    		});
		                    		mapa.push(kraj[i]['svg']);
		                    		if(kraj[i]['maoddzialy'] == '1'){// jezeli ma oddzialy
		                    			kraj[i]['svg'].click(function(){
		                    				mapa.hide();
		                    				$('#obiekt').text('miasto');
		                    				var el = this;
		                    				$.ajax({
		                    					url: '/mapa/show',
		                    					dataType: 'json',
		                    					data: {typ:'region',region:i},
		                    					success : function(data){
		                    						var klon = el.clone();
		                    						mapa.hide();
		                    						var wymiary = el.getBBox();
		                    						var skala = 1;
		                    						var x = 0;
		                    						var y = 0;
		                    						if(wymiary.height > wymiary.width){
		                    							skala = 500/wymiary.height;
				                            		}else{
				                            			skala = 500/wymiary.width;
				                            		}
		                    						klon.scale(skala,skala);
		                    						var nowe_wymiary = el.getBBox();
		                    						klon.translate(nowe_wymiary.x * (-1) + (600 - nowe_wymiary.width)/2,nowe_wymiary.y * (-1) + (600 - nowe_wymiary.height)/2);
		                    						var region = rp.set();
		                    						var zamknij_region = function(){
		                    							$('#obiekt').text('region');
		                    							$('#szczegoly *').remove();
		                    							region.remove();
		                    							mapa.show();
		                    						};
				                            	  
		                    						klon.click(function(){
		                    							zamknij_region();
		                    						});
				                            	  
		                    						$('#path_kraj').live('click',function(){
		                    							zamknij_region();
		                    						});
		                    						var duzy_wymiary = klon.getBBox();
		                    						wskx = duzy_wymiary.width/(kraj[i]['xy'].xmax - kraj[i]['xy'].xmin);
		                    						wsky = duzy_wymiary.height/(kraj[i]['xy'].ymax - kraj[i]['xy'].ymin);
		                    						klon.attr({
		                    							fill:'#FFFEEF',
		                    							rotation: 2
		                    						});
		                    						region.push(klon);
		                    						var select = $(document.createElement('select'));
		                    						select.append('<option value="0">wybierz miasto</option>');
		                    						var miasta = rp.set();
		                    						var kolekcja_miasta = {};
		                    						$(data).each(function(){
		                    							var option = $(document.createElement('option'));
		                    							option.val(this.id).text(this.nazwa);
		                    							select.append(option);
		                    							var miasto = rp.circle((this.x - kraj[i]['xy'].xmin) * wskx + duzy_wymiary.x - 10,(this.y - kraj[i]['xy'].ymin) * wsky + duzy_wymiary.y + 10, 5).attr({fill:'#6FA3FF'});
		                    							region.push(miasto);
		                    							miasta.push(miasto);
		                    							kolekcja_miasta[this.id] = miasto;
		                    							var nazwa_miasta = this.nazwa; 
		                    							var id_miasto = this.id;
		                    							miasto.hover(function(){
		                    								if($('#szczegoly select option:selected').val() != id_miasto){
		                    									$('#path').html(path + ' > <span>' + kraj[i]['nazwa'] + '</span>' + ' > <span>' + nazwa_miasta + '</span>');
		                    									this.scale(2,2);
		                    								}
		                    							},function(){
		                    								if($('#szczegoly select option:selected').val() != id_miasto){
		                    									var miasto = '';
		                    									if($('#szczegoly select option:selected').val() != 0){
		                    										miasto = ' > <span>' + $('#szczegoly select option:selected').text() + '</span>';
		                    									}
		                    									$('#path').html(path + ' > <span>' + kraj[i]['nazwa'] + '</span>' + miasto);
		                    									this.scale(1,1);
		                    								}  
		                    							});
		                    							miasto.click(function(){
		                    								miasta.scale(1,1);
		                    								this.scale(3,3);
		                    								select.find('option[value=' + id_miasto + ']').attr('selected',true);
		                    								wybierz_miasto(select,path,kraj,i);
		                    							});
		                    						});
		                    						$('#szczegoly').append(select);
		                    						var lista = $(document.createElement('div'));
		                    						lista.attr('id','lista');
		                    						$('#szczegoly').append(lista);
		                    						select.change(function(){
		                    							miasta.scale(1,1);
		                    							if($(this).find('option:selected').val() != 0){
		                    								kolekcja_miasta[$(this).find('option:selected').val()].scale(3,3);
		                    							}
		                    							wybierz_miasto(this,path,kraj,i);
		                    						});
		                    					}
		                    				});
		                    			});
		                    		}//koniec jezeli ma oddzialy
		                    	})(region);
		                    }
            			} 
            		});
            	});
            	right.animate({left:600},1000);
            });
          })(kraj);
        }
        
    	var wybierz_miasto = function(el,path,kraj,i){
    	    var id_miasto = $(el).find(':selected').val();
    	    if(id_miasto != 0){
    	    	var id_miasto = $(el).find(':selected').val();
    	        var nazwa = $(el).find(':selected').text();
    	        $('#path').html(path + ' > <span>' + kraj[i]['nazwa'] + '</span>' + ' > <span>' + nazwa + '</span>');
    	        $.ajax({
    	        	url: '/mapa/show',
    	        	dataType: 'json',
    	        	data : {typ:'oddzial',miasto:id_miasto},
    	        	success: function(data){
    	        		var div = $(document.createElement('div'));
    	                $(data).each(function(){
    	                	var table = $(document.createElement('table'));
    	                	table.append('<tr><td colspan="2" class="nazwa">' + this.nazwa + '</td></tr>');
    	                	table.append('<tr><td colspan="2" class="adres">ul. ' + this.ulica + '<br/>' + this.kod + ' ' + nazwa + '</td></tr>');
    	                	table.append('<tr><td>telefon: </td><td>' + this.telefon + '</td></tr>');
    	                	table.append('<tr><td>fax:</td><td>' + this.fax + '</td></tr>');
    	                	table.append('<tr><td>email:</td><td>' + this.email + '</td></tr>');
    	                	table.append('<tr><td colspan="2">' + this.info + '</td></tr>');
    	                	div.append(table);
    	               	   	var odstep = $(document.createElement('div'));
    	               	   	div.append(odstep);
    	               	   	odstep.addClass('odstep');
    	                });
    	                $('#lista').html(div);
    	             }
    	        });
    	    }else{
    	    	$('#path').html(path + ' > <span>' + kraj[i]['nazwa'] + '</span>');
    	        $('#lista').html('');
    	    }
        };
        
        
        var zamknij = function(){
        	$('#path').html("Europa");
        	$('#kraj').html("");
        	$('#szczegoly').html("");
        	left.animate({left:-602},1000);
        	right.animate({left:945},1000,function(){
        		$('#mapa').css('display','block');
        	});
        
        };
        
        var zamknij_mape = function(){
        	zamknij();
        	$("#element_mapa").fadeOut(500,function(){
        		$(".overflow").remove();        		
        	});
        };
        
        $('#zamknij').live('click',function(){
        	zamknij();
        });
        
        $('#path_kontynent').live('click',function(){
        	zamknij();
        });
        $('#zamknij_mape').live('click',function(){
        	zamknij_mape();
        });
        
        $(".komponent.mapa").click(function(){
        	var div = $(document.createElement('div'));
        	div.addClass("overflow");
        	$('body').append(div);        	
            $('#element_mapa').fadeIn();    	
        });
      }