var CzHtmlMap = new Class({
	
	options: {
		idUnsortedList: 'czhtmlmap-list',
		classListItem: 'czhtmlmap-listitem',
		idPopup: 'czhtmlmap-popup',
		idPopupContent: 'czhtmlmap-popup-content',
		idPopupClose: 'czhtmlmap-popup-close',
		classAjaxLoading: 'czhtmlmap-loading',
		closeText: 'close',
		selectorPopupId: null,
		parentWidth: 'auto',
		parentHeight: 'auto',
		popupWidth: 'auto',
		popupHeight: 'auto',
		popupAutoPosition: true,
		contentWhileLoading: '',
		distHorizontal: 4,
		distVertical: 4
	},

	popup: null,
	cache: new Array(),
	
	initialize: function(options){
		this.setOptions(options);
	
		//calculate width
		
		if(this.options.parentWidth == 'auto') {
			this.options.parentWidth = $(this.options.idUnsortedList).getStyle('width').toInt();
		}
		
		if(this.options.parentHeight == 'auto') {
			this.options.parentHeight = $(this.options.idUnsortedList).getStyle('height').toInt();
		}
		
		if(this.options.popupWidth == 'auto') {
			this.options.popupWidth = Math.round(this.options.parentWidth * 0.3);
		}
		
		if(this.options.popupHeight == 'auto') {
			this.options.popupHeight = Math.round(this.options.parentHeight * 0.3);
		}
		
		if(this.options.selectorPopup == null) {
			//add popup to dom
			this.popup = new Element('div', {'id': this.options.idPopup});
			this.popup.setStyles({
				'width': this.options.popupWidth,
				'height': this.options.popupHeight
			});
			
			this.popup.inject($(this.options.idUnsortedList), 'after');
		}else{
			this.popup = $(this.options.selectorPopup);
		}
		new Element('div', {'id': this.options.idPopupContent}).inject(this.popup);
		if(this.options.closeText != null) {
			new Element('a', {'id': this.options.idPopupClose, 'href' : 'javascript:void(0);', 'text': this.options.closeText}).addEvent('click', function(event){this.hidePopup();}.bind(this)).inject(this.popup, 'top');
		}
		
		//add events
		$$('.'+this.options.classListItem).each(function(el) {
			//avoid links being followed
			el.getElements('a').each(function(ela) { ela.erase('href')});
			el.addEvents({
				'click': this.request.bind(this, el)
			});
		}.bind(this));
	},
	
	request: function(el) {
		var uid = el.id.replace(new RegExp(this.options.classListItem), '');
		if(this.cache[uid.toString()] != undefined) {
			this.showPopup(el);
			$(this.options.idPopupContent).removeClass(this.options.classAjaxLoading);
			$(this.options.idPopupContent).set('html', this.cache[uid.toString()]);
		}
		else {
			var s = (window.location.href.match(/\?/) ? '&' : '?');
			new Request({
				url: window.location.href + s + 'type=544&uid=' +  uid,
				method: 'get',
				onRequest: function() {
					this.hidePopup();
					$(this.options.idPopupContent).addClass(this.options.classAjaxLoading);
					this.showPopup(el);
				}.bind(this),
				onSuccess: function(resp) {
					if(resp != undefined) {
						$(this.options.idPopupContent).removeClass(this.options.classAjaxLoading);
						this.cache[uid.toString()] = resp;
						$(this.options.idPopupContent).set('html', resp);
					}
				}.bind(this),
				onFailure: function() {
					$(this.options.idPopupContent).removeClass(this.options.classAjaxLoading);
				}.bind(this)
			}).send();
		}
	},
	
	hidePopup: function() {
		$(this.options.idPopupContent).setProperty('html', this.options.contentWhileLoading);
		this.popup.setStyle('display', 'none');
	},
	
	showPopup: function(el) {
		if(this.options.popupAutoPosition) {
			var dotLeft = el.getStyle('left').toInt();
			var dotTop = el.getStyle('top').toInt();
			if(dotLeft < this.options.parentWidth/2)
				this.popup.setStyle('left', dotLeft + this.options.distHorizontal);
			else
				this.popup.setStyle('left', dotLeft - this.options.popupWidth - this.options.distHorizontal);
			
			if(dotTop < this.options.parentHeight/2)
				this.popup.setStyle('top', dotTop + this.options.distVertical);
			else
				this.popup.setStyle('top', dotTop - this.options.popupHeight - this.options.distVertical);
			}
		this.popup.setStyle('display', 'block');
	}
}).implement(new Options);