/**
 * KnhBilderbuch
 * require protytpe 1.5.x 
 * copyright (c) 2007 Kindernothilfe e.V.
 * http://www.kindenrothilfe.de
 * @autor SL
 * @date 2007-06-12  
 */   
var KnhBilderbuch = {
	max_width : 300,
	max_height : 300,
	imagewin : "",

	setup : function(conf,elems) {

		if( (typeof Prototype=='undefined') || (typeof Element == 'undefined')
		 || (typeof Element.Methods=='undefined') )
			return;

		this.conf = Object.extend({
			/**
			 * @var string html-elem in dem das image eingefuegt wird
			 */
			image_wrapper : "",
			/**
			 * @var string html-elem in dem die infos zum bild angezeigt werden.
			 */
			info_wrapper : "",
			/**
			 * @var string html-elem in dem die bildernavigation angezeigt wird.
			 */
			navi_wrapper : ""
			},
			conf
		);

		if( elems.length == 0 )
			return;
			
		this.elems = elems;

		var dim = $( this.conf.image_wrapper ).getDimensions();
		this.max_width = dim.width;
		this.max_height = dim.height;
		this._create_navi();
	},
	
	navi_click : function(e) {
		this._change_pic( Event.element(e) );
		return false;
	},

	img_click : function (e) {
		var el = Event.element(e);
		this._open_image( this.elems[el.elemidx] );
	},
	
	_open_image : function(ds) {
		if( this.imagewin.closed == false )
			this.imagewin.close(); 
		this.imagewin = window.open(ds.link);
	},
	
	_create_navi : function() {
		var o = document.createElement('b');
		o.innerHTML = "Bild: | ";
		$(this.conf.navi_wrapper).appendChild(o);
		var self = this;
		var first = null;
		for(var i=0; i< this.elems.length; i++) {
			var o = document.createElement('a');
			Element.extend(o);
			o.title = this.elems[i].title;
			o.addClassName('quer');
			o.href="javascript:void(1);";
			o.elemidx = i;
			Event.observe(o,"click",this.navi_click.bindAsEventListener(this));
			o.update( (i+1) );
			$(this.conf.navi_wrapper).appendChild(o);
			if(i == 0) first = o;
			var o = document.createElement('b');
			o.innerHTML = " | ";
			$(this.conf.navi_wrapper).appendChild(o);
		}
		if( first != null )
			this._change_pic(first);
	},
	
	_change_pic : function(el) {
		$A( $(this.conf.navi_wrapper).getElementsByTagName('a') ).each( function(elem) {
			elem.className = 'quer';
		}	);
		el.className = 'quer-viw';
		this._show_pic( el.elemidx );
	},
	
	_show_pic : function(idx) {

		var ds = elems[idx];
		var pic = document.createElement('img');
		pic.title = ds.title;
		pic.alt = ds.title;
		pic.src = ds.url;
		pic.id = 'bb-image';
		pic.style.width = ds.size[0]+"px";
		pic.style.height = ds.size[1]+"px";
		pic.elemidx = idx;
		if( typeof ds.link != "undefined" )
			Event.observe(pic,"click", this.img_click.bindAsEventListener(this));
			
		$( this.conf.image_wrapper ).update();
		$( this.conf.image_wrapper ).appendChild(pic);
		
		var html = "<b>"+ ds.title +"<\/b><br \/>";
		html += ds.short;
		$( this.conf.info_wrapper ).update(html);
	}
}