function ShowLayer(id) {
    obj = document.getElementById('layer_' + id);
    if (obj.style.visibility == 'visible'){
    obj.style.visibility = 'hidden';
    }
    else {
    obj.style.visibility = 'visible';
    }
}

/**
 * @author AM
 */
var FwpHeader = new Class({
	Implements: [Options, Events],

	options: {
		teaserImg: [],
		naviImg:   [],
		naviId:    '',
		teaserId:  ''
	},

	links:      [],
	teasers:    [],
	naviStep:   0,
	teaserStep: 1,
	perio:      null,

	initialize: function(options) {
		this.setOptions(options);
		this.links = $$('#' + this.options.naviId + ' a');

		new Asset.images(this.options.teaserImg, {
			onProgress: function(count) {},
			onComplete: function() {}
		});

		for (var i = 1; i < this.links.length; i++) {
			this.links[i].fade(0).setStyle('display', 'block');
		}

		this.perio = this.changeHeader.periodical(4000, this);
	},

	changeHeader: function() {
		this.changeNavi();
		this.changeTeaser.delay(250, this);
	},

	changeTeaser: function() {
		$(this.options.teaserId).setStyle('background-image', 'url(' + this.options.teaserImg[this.teaserStep] + ')');

		// not nice, but ok for now.
		$('teaser_dlink').setStyle('display', this.teaserStep == 1 ? 'block' : 'none');
		$('teaser_dslink').setStyle('display', this.teaserStep == 1 ? 'block' : 'none');

		this.teaserStep++;

		if (this.teaserStep > this.options.teaserImg.length - 1) {
			this.teaserStep = 0;
		}
	},

	changeNavi: function() {
		this.links[this.naviStep].fade(0);
		this.naviStep++;

		if (this.naviStep > this.links.length - 1) {
			this.naviStep = 0;
		}

		this.links[this.naviStep].fade(1);
	}
});


window.addEvent('domready', function(e) {
	$$('.has-sub-menu').each(function(el) {
		el.addEvent('mouseover', function(e) {
			if ($defined(this.getChildren()[0])) {
				this.getChildren()[1].setStyle('display', 'block');
			}
		});

		el.addEvent('mouseout', function(e) {
			if ($defined(this.getChildren()[0])) {
				this.getChildren()[1].setStyle('display', 'none');
			}
		});
	});

	if ($defined($('teaser'))) {
		new FwpHeader({
			teaserImg: ['images/highlights_header.jpg', 'images/demoshop_header.jpg', 'images/support_header.jpg'],
			naviImg:   ['images/highlight.gif', 'images/demoshop.gif', 'images/support.gif'],
			naviId:    'teaser_navi',
			teaserId:  'teaser'
		});
	}
});

document.getElementsByClassName = function(cl) {
	var retnode 		= [];
	var myclass 	= new RegExp('\\b'+cl+'\\b');
	var elem 		= this.getElementsByTagName('*');

	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes))
			retnode.push(elem[i]);
		}
	return retnode;
};
var main = function () {
	showLayerBox();
}

var mousex;
var mousey;
function init() {
    if (window.event) {
        if (document.captureEvents){
          document.captureEvents(Event.MOUSEMOVE);
        } else {
          window.captureEvents(Event.MOUSEMOVE);
        }
    }
  document.onmousemove = getXY;
}

init();

function getXY(e) {
    if(!e) e = window.event;
    var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
    window.document.documentElement : window.document.body || null;

    mousey = e.pageY ? e.pageY : e.clientY + body.scrollTop;
    mousex = e.pageX ? e.pageX : e.clientX + body.scrollLeft;

}

function init() {
    if (window.event) {
        if (document.captureEvents){
          document.captureEvents(Event.MOUSEMOVE);
        } else {
          window.captureEvents(Event.MOUSEMOVE);
        }
    }
  document.onmousemove = getXY;
}
var makeLayer = function (obj, i) {
	var id=i+1;
	var layer_div = document.getElementById('layer_' + id)
	obj.onmouseover = function () {
		layer_div.style.left 		= mousex+15+'px';
		layer_div.style.top 		= mousey+'px';
		layer_div.style.position 	= 'absolute';
		layer_div.style.display 	= 'block';
	}
	obj.onmouseout = function () {
		layer_div.style.position 	= '';
		layer_div.style.display 	= 'none';
	}
}
var showLayerBox = function (e) {
	var layer = document.getElementsByClassName('ft_notation');
	if (layer.length > 0) {
		for (var i=0; i<layer.length; i++) {
			makeLayer(layer[i], i);
		}
	}
}
window.onload=main;