/**
 * @author trixta
 */
(function($){

	$.createDescrBox = function(obj, descrBoxes, opts){
		var descBoxClass =  'descbox-' + new Date().getTime(),
			tabI = ($.browser.msie) ?
				'tabIndex' :
				'tabindex',
			reFocusElm = null;
			
		opts =  $.extend(obj.options, $.createDescrBox.defaults, opts);
		
		function init(){
			descrBoxes.each(function(){
				var descBox = $(this),
					closeParent = $(opts.appendCloseTo, descBox[0]),
					head = $(':header:first', descBox[0]),
					headID = head
						.attr(tabI, '-1')
						.attr('id');
					
				if(!headID){
					headID = 'header-'+ new Date().getTime();
					head.attr('id', headID);
				}
				
				descBox
					.attr({
						'role': 'description',
						'aria-hidden': 'true',
						'aria-labeledby': headID
					});
				
				$(opts.closeHTML)
					.appendTo(closeParent[0])
					.attr({'role': 'button'})
					.bind('click', function(e){
						
						obj.propagate('boxSelfClose', e, {descBox: descBox, closer: this});
						
						if(reFocusElm){
							setTimeout(function(){
								reFocusElm.focus();
								reFocusElm = null;
							}, 1);
						}
									
						close(descBox, this, e);
						return false;
					});
			});
		}
		
		
		function close(elm, closer, event){
			if (elm && elm[0]) {
				obj.propagate('boxClose', event, {descBox: elm, closer: closer});
				elm
					.animate({
						opacity: 0,
						duration: 200
					}, {
					complete: function(){
						elm.hide();
					}
					})
					.attr({'aria-hidden': 'true'})
					.removeClass('active');
			}
		}
						
		function open(box, opener, event){
			reFocusElm = null;
			close(descrBoxes.filter('.active'));		
			obj.propagate('beforeOpenBox', event, {descBox: box, opener: opener});
			
			box
				.addClass('active')
				.stop()
				.animate({
					opacity: 1
				})
				.css({display: 'block'})
				.attr({'aria-hidden': 'false'});
				
			setTimeout(function(){
				$(':header',box[0])[0].focus();
			}, 180);
			
			reFocusElm = opener;
		}
		
		init();
		
		obj.reFocusElm = reFocusElm;
		obj.closeDescBox = close;
		obj.openDescBox = open;
	};
	
	$.createDescrBox.defaults = {
		closeHTML: '<a href="#" class="close">schliessen</a>',
		appendCloseTo: 'div.head'
	};
	
	$.createCanvasMapInfoBox = function (mapSel, dialogOpts, canvasmapOpts){
		var obj;
		function init(){
			var map = $(mapSel)
				.bind('canvasmapinit', onMapInit)
				.canvasmap(canvasmapOpts)
				.bind('canvasmapclick', onMapClick)
				.bind('canvasmapboxSelfClose', onSelfClose);
			
			obj = $.data(map[0], 'canvasmap');
		}
		
		function onMapInit(e, eui, ui){
			var descBoxes = [];
			ui = ui || eui;
			ui.instance.areas.each(function(){
				var jElm = $(this),
					href = $(this).attr('href');
				jElm.attr({'aria-describedby': href.substr(1)});
				descBoxes.push($(href)[0]);
			});
			$.createDescrBox(ui.instance, $(descBoxes), dialogOpts);
		}
		
		function onSelfClose(){
			obj.clickArea = [];
			obj.ctx.clearRect(0, 0, obj.cWidth, obj.cHeight);
			return false;
		}
		
		function onMapClick(e, eui, ui){
			ui = ui || eui;
			obj.openDescBox($(ui.area.attr('href')), ui.area[0], e);
		}
		
		init() ;
	};
	
	
})(jQuery);