var _imageMapTips;
window.addEvent('domready', function() {
	new ImageMapTips();
	new MzsTabs();
});


var MzsTabs = new Class({
	initialize: function(){
		this.createHeadlines();
		this.createTabs();
	},
	createHeadlines: function(){
		$$('.tabbing').each(function(single){
			var box = new Element('ul');
			box.addClass('tabbingTabs');
			box.inject(single, 'before');
			$(single).getChildren().each(function(item){
				var listItem = new Element('li');
				var listTitle = item.getFirst('h2.tabbingTabsTitle').get('text')
				listItem.set('html', '<a class="tabbingTabsItem" href="#"><span>'+listTitle+'</span></a>');
				box.adopt(listItem);
			})
		});
	},
	createTabs: function(){
		var items = $$('.tabbingContentItem');
		items.addClass('tabbingContentItemIndexed');
		if (items[0] != null)
		{
			items[0].getParent().setStyle('height', (items[0].getCoordinates().height+22));
			var tabs = new MGFX.Tabs('.tabbingTabsItem','.tabbingContentItem',{
				autoplay: false,
				transitionDuration:500,
				slideInterval:3000,
				hover:true
			});
			tabs.addEvent('onShowSlide', function(e){
				var items = $$('.tabbingContentItem');
				if (items[e] == null || e == null || e == 'undefined') e = 0;
				items[e].getParent().setStyle('height', (items[e].getCoordinates().height+22));
			});
		}
	}

});

var ImageMapTips = new Class({
    	initialize: function(){
		this.findAreas();
    	},
	findAreas: function(){
		$$('area').each(function(single){
			var boxId;
			if (single.getProperty('href') != null)
			{
				boxId = single.getProperty('href').split('#');
				boxId = boxId[1];
				single.removeProperty('href');
			}
			if (boxId != null && $(boxId) != null){
				var tipContent = new ToolTipContent(boxId);
				var content;
				if ($(boxId).getElement('h2') != null)
				{
					var headline =$(boxId).getElement('h2');
					content = headline.getParent().getAllNext(); //.getChildren();
					headline = tipContent.setHeadline(headline);
				}							
				else {
					content = $(boxId).getElements();						
				}
				content.each(function(singleContent){					
					 tipContent.addContent(singleContent);
				});
				getToolTipHandler().addTip(tipContent);
				single.setStyle('cursor', 'pointer');
				single.addEvents({
					'click': function(e){						
						getToolTipHandler().holdTip(tipContent, e.page);
					},
					'mouseenter':function(e){
						getToolTipHandler().showTip(tipContent, e.page);
					},
					'mouseleave':function(e){
						getToolTipHandler().hideTip(tipContent, e.page);
					}
				});
				$(boxId).setStyle('display', 'none');
			}
		});
	}
});

var toolTipHandler;
function getToolTipHandler()
{
	if (toolTipHandler == null) toolTipHandler = new ToolTips();
	return toolTipHandler;
};


var ToolTips = new Class({
	initialize: function(){
		this.tips = new Hash({});
		this.wrapper = new Element('div').inject(document.body, 'top');
	},
	addTip: function(tip){
		if (this.tips.get(tip.id) == null)
		{
			var tipContent = this.createTipContent(tip);
			this.wrapper.adopt(tipContent);
			this.tips.set(tip.getId(), tipContent);
		}
	},
	createTipContent: function(tip){
		var html = new Element('div');
			html.fade('hide');
			html.addClass('csc-frame-frame1');
			html.setStyle('position', 'absolute')
				.setStyle('font-size', '80%')
				.setStyle('text-align', 'left')
				.setStyle('z-index', '99');
			var inner = new Element('div').addClass('inner').inject(html);
			new Element('h2').set('text',tip.getHeadline()).inject(inner);
			new Element('div').addClass('text').adopt( tip.getContent()).inject(inner);
		return html;
	},
	showTip: function(tip, position){
		this.tips.get(tip.id).fade('in');
		this.moveTip(tip, position);
		//console.log(position);
	},
	hideTip: function(tip, position){
		if (this.tips.get(tip.id).getProperty('hold') != 'true')
		{
			this.tips.get(tip.id).fade('out');
			//this.moveTip(tip,position);
		}
	},
	holdTip: function(tip, position){
		if (this.tips.get(tip.id).getProperty('hold') == 'true') return false;
		var self = this;
		this.showTip(tip, null);
		this.tips.get(tip.id)
			.setProperty('hold', 'true');
		var closer = new Element('span')
			.set('text', 'close')
			.setStyle('cursor', 'pointer')
			.addEvent('click', function(e){
				self.tips.get(tip.id)
					.setProperty('hold', 'false');
				self.hideTip(tip, position);
				this.destroy();				
			});
		this.tips.get(tip.id).adopt(closer);
		
	},
	moveTip: function(tip, position){
		if (position != null && this.tips.get(tip.id) != null && this.tips.get(tip.id).getProperty('hold') != 'true')
		{
			this.tips.get(tip.id).setStyle('top', position.y);
			this.tips.get(tip.id).setStyle('left', position.x);
		}
	}
});

var ToolTipContent = new Class({
	initialize: function(id){
		this.id = id;
		this.headline = 'keine Headline angegeben';
		this.content;
	},
	getId: function(){return this.id;},
	setHeadline: function(headline){
		if ($type(headline) == 'element') headline = headline.get('text');
		if ($type(headline) == 'string'){
			this.headline = headline;
		}
		return this.headline;
	},
	getHeadline: function(){
		return this.headline;
	},
	addContent: function(singleContent){
		if (this.content == null) this.content = new Array();
		this.content.include(singleContent); //+= singleContent;
	},
	getContent: function(){
		return this.content;
	}
	
});