

function init() {
	
	new imageNavigator("headerimages","col-right");
	
}


var imageNavigator = function(id,target) {
	this.target = document.getElementById(target);
	this.container = document.getElementById(id);
	this.images = [];
	this.linkElements = []
	this.current = 0;
	var images = this.container.childNodes;
	if (images.length<=1) {
		return;
	}
	
	this.directLinks = document.createElement('UL');
	this.directLinks.className = "imageDirectLink";
	this.container.appendChild(this.directLinks);

	this.navLinks = document.createElement('UL');
	this.navLinks.className = "imageNavLink";
	var back = document.createElement('LI');
	back.id = "imageNavBack";
	back.innerHTML = "Zur&uuml;ck";
	this.navLinks.appendChild(back);
	YAHOO.util.Event.addListener(back,"click",this.back,null,this);


	var next = document.createElement('LI');
	next.id = "imageNavNext";
	next.innerHTML = "Weiter";
	this.navLinks.appendChild(next);
	YAHOO.util.Event.addListener(next,"click",this.next,null,this);

	this.container.appendChild(this.navLinks);



	for (var i=0;i<images.length;i++) {
		if (images[i].tagName != 'IMG') continue;
		this.addItem(images[i].src);
	}	
};

imageNavigator.prototype = {
	addItem: function(url) {
		this.images.push(url);

		var el = document.createElement('LI');
		var number = this.getCount();
		el.innerHTML = number;
		el.id = "imageLink"+number;
		if (number == 1) {
			YAHOO.util.Dom.addClass(el,"imageActive");
		}
		this.directLinks.appendChild(el);
		this.linkElements[number-1] = el;
		YAHOO.util.Event.addListener(el,"click",function(e,id){
			this.activate(id);										 
		},
		number-1,this);
	},
	getCount: function() {
		return this.images.length;
	},
	activate: function(id) {
		var url = this.images[id];
		YAHOO.util.Dom.setStyle(this.target,"background","url("+url+") no-repeat");
		YAHOO.util.Dom.removeClass(this.linkElements[this.current],"imageActive");
		this.current = id;
		YAHOO.util.Dom.addClass(this.linkElements[this.current],"imageActive");
	},
	back: function() {
		var id = this.current <= 0 ? this.getCount()-1 : this.current-1;
		this.activate(id);
	},
	next: function() {
		var id = this.current >= this.getCount()-1 ? 0 : this.current+1;
		this.activate(id);
	}
	
	
	
};
