$(document).click(function(e){
	var $coll = $("div.dropdown-alt-shown");
	var $excl = $(e.target).closest(".dropdown-alt-shown");
	if($excl.length) {
		$coll = $coll.not($excl);
	}
	$coll.removeClass("dropdown-alt-shown");
});

function regionsControl() {
	this.container = $("#selectCurRegion");

	var current = null
	var tmp = Regions.current['parent'];
	if(tmp) {
		for(i in Regions.region) {
			if(Regions.region[i]['id'] == tmp) {
				current = Regions.region[i];
			}
		}

	}

	this.options = {
		name: 'region',
		region: (Regions.current['parent'] == null) ? Regions.current  : current,
		city: (Regions.current['parent'] == null) ? null : Regions.current,
		data: null
	}
}

regionsControl.prototype = {
	init: function() {
		this.options.data = Regions[this.options.name];
		this.createSelector();

		this.options.name = 'city';
		this.options.data = Regions[this.options.name];
		this.createSelector();
	},

	createSelector: function() {
		var name = this.options.name;
		var current = this.options[name];
		var $parent = $("<div class=\"dropdown-alt\"></div>");
		this.container.append($parent);
		$parent.attr("id", ((name=="")?(""):("dropdown-alt-for-" + name + "-selector")));

		var curSel = $("<span class=\"dropdown-alt-value\"></span>");
		var  select = (current && current['title']) ? current['title'] : '';
		curSel.click(function(e){
			$(this).parents("div.dropdown-alt").eq(0).toggleClass("dropdown-alt-shown");
		}).append(["<span class=\"dc\"></span><span class=\"dr\"></span><span class=\"value\">", select, "</span>"].join(''));
		$parent.append(curSel);

		var dropdown = $("<div class=\"dropdown-alt-cont\"></div>");
		var ul = $("<ul class=\"dropdown-alt-values\"></ul>");
		ul.attr('rel', this.options.name);
		dropdown.append(ul);
		dropdown.append("<div class=\"d\"><span class=\"dr\"></span><span class=\"dc\"></span></div>");
		$parent.append(dropdown)
		this.bildList(ul);
		$parent.addClass("dropdown-altered");
	},

	bildList: function(ul) {
		ul.html('');
		var id = (this.options[this.options.name] != null && this.options[this.options.name]['id']) ? this.options[this.options.name]['id'] : null;

		for(i in this.options.data) {
			var region = this.options.data[i];

			region['title'] = (region['title'] == null) ? ':))' : region['title'];
			ul.append('<li value="' + region['id'] + '"'
					+ (id == region['id'] ? ' class="current"':'')
					+ '>' + region['title'].replace('&nbsp;', ' ') + '</li>'
			);
		}

		this.currentLi(ul);
	},

	currentLi: function(ul) {
		var regionC = this;
		var nameAction = this.options.name;

		ul.find("li").hover(function(){
			$(this).addClass("hovered");

		}, function(){
			$(this).removeClass("hovered");

		}).click(function(){
			$(this).addClass("current")
				.siblings("li").removeClass("current");

			$(this).parents("div.dropdown-alt-cont").eq(0)
				.siblings("span.dropdown-alt-value")
					.html("<span class=\"dc\"></span><span class=\"dr\"></span><span class=\"value\">" + $(this).html() +  "</span>").end()

			$(this).parents("div.dropdown-alt").eq(0).removeClass("dropdown-alt-shown");

			regionC.sendRequest($(this).attr('value'), $(this).parents("ul.dropdown-alt-values").eq(0).attr('rel'));
		});
	},

	sendRequest: function(val, name) {
		if(val == null) {
			return;
		}
		var children = 0;
		for(i in Regions.region) {
			if(Regions.region[i]['id'] == val) {
				children = Regions.region[i]['children'];
			}
		}
		var regions = this;
		name = (name == 'region' && children == 0) ? 'city' : name;
		$.getJSON('/regions.action',
			{
				action: name,
				region: val,
				sid: document.getElementsByTagName('body')[0].getAttribute('pp:sid'),
				json: true
			},
			function(json){
				if(name == 'city' && children == 0) {
					window.location =  json;
				} else {
					regions.options.name = name;
					regions.options.data = json;
					$("#dropdown-alt-for-city-selector span.dropdown-alt-value span.value").eq(0).html('');
					regions.bildList($("#dropdown-alt-for-city-selector ul.dropdown-alt-values").eq(0));
					$("#dropdown-alt-for-city-selector").addClass("dropdown-alt-shown");
				}
		});
	}
};

(new regionsControl()).init();