/**
 * @author trixta
 */
(function($){
	var tabI = ($.browser.msie) ?
				'tabIndex' :
				'tabindex';
	// Erstellen eines Prototypen-Objekts für Info-boxen
	$.simpleDescBox = {
		initDescBox: function(descBoxes){
			var self = this;
			descBoxes.each(function(){
				var descBox = $(this),
					head = $(':header:first', this)
					.attr(tabI, '-1'),
					headID = head
						.attr('id'),
					o = self.options,
					closeWrapper = $(o.appendCloseTo, this);
						
				if(!headID){
					headID = 'header-'+ new Date().getTime();
					head.attr('id', headID);
				}
				
				descBox
					.attr({
						'role': 'description',
						'aria-hidden': 'true',
						'aria-labeledby': headID
					})
					.addClass(self.widgetName+'-desc-box');
				
				$(o.closeHTML)
					.appendTo(closeWrapper[0])
					.attr({'role': 'button'})
					.bind('click', function(e){
						self.clearAll.call(self);
						self.closeDescBox.call(self, $(this).parents('.'+self.widgetName+'-desc-box:first'), e);
						return false;
					});
			});
		},
		openDescBox: function(descBox, opener, e){
			this.refocusElm = null;
			this.closeDescBox(this.descBoxes.filter('.active'), opener, e);
			
			this.propagate('beforeOpenBox', e, {descBox: descBox, opener: opener});
			
			this.refocusElm = opener;
			descBox
				.addClass('active')
				.stop()
				.animate({opacity: 0.9}, {duration: 200})
				.css({display: 'block'})
				.attr({'aria-hidden': 'false'});
			
			setTimeout(function(){
				 $(':header:first', descBox[0])[0].focus();
			}, 180);
		},
		closeDescBox: function(descBox, closer, e){
			var self = this;
			if(descBox && descBox[0]){
				this.propagate('boxClose', e, {descBox: descBox, closer: closer});
				descBox
					.animate({
						opacity: 0,
						duration: 200
					},{
						complete: function(){
							descBox.hide();
						}
					})
					.removeClass('active')
					.attr('aria-hidden', 'true');
				if(this.refocusElm){
					setTimeout(function(){
						self.refocusElm.focus();
						self.refocusElm = null;
					}, 1);
				}
			}
		}
	};
	
	$.simpleDescBoxDefaults = {
		closeHTML: '<a href="#" class="close">schliessen</a>',
		appendCloseTo: 'div.head'
	};
	
	//Erweitern eines leeren Objekts mit dem Canvasmap-Objekt, dem Info-Box-Prototypen sowie weiterer Custom-Methoden
	var canvasmapDescBox =  $.extend({}, $.ui.canvasmap.prototype, $.simpleDescBox,  {
		init: function(){
			//Aufruf der überschriebenen init-Methode
			$.ui.canvasmap.prototype.init.apply(this, arguments);
			
			var self = this;
			this.descBoxes = [];
			this.areas.each(function(){
				var jElm = $(this)
					.attr(tabI, '0'),
					id = jElm.attr('href'),
					descBox = $(id);
				jElm.attr({'aria-describedby': id.substr(1)});
				
				self.descBoxes.push(descBox[0]);
			});
			this.descBoxes = $(this.descBoxes);
			self.initDescBox(this.descBoxes);
		},
		clearAll: function(){
			this.clickArea = [];
			this.ctx.clearRect(0, 0, this.cWidth, this.cHeight);
		}
	});
	
	// Erstellen eines UI-Widgets
	$.widget("ui.canvasmapDescBox", canvasmapDescBox);
	$.ui.canvasmapDescBox.defaults = $.extend({}, $.ui.canvasmap.defaults, $.simpleDescBoxDefaults);
	
	/* Hinzufügen eines Plugins mit der UI-Plugin-API */
	
	$.extend($.ui.canvasmapDescBox.defaults, {
		descBox: true
	});
	
	$.ui.plugin.add("canvasmapDescBox", 'descBox', {
		click: function(e, ui){
			if(ui.area){
				var self = ui.instance,
					href = ui.area.attr('href'),
					box = $(href);
				self.openDescBox.call(self, box, ui.area[0], e);	
			}
		}
	});
	
})(jQuery);