var ftAccordeon = Class.create({
	initialize: function(container,picWidth,picHeight,duration,start,bgCol) {
		$(container).setStyle({height: picHeight+'px'});
		this.areaWidth = parseInt($(container).getStyle('width'));
		this.areaHeight = parseInt($(container).getStyle('height'));

		// set container to relative
		$(container).style.position='relative';

		this.picWidth = picWidth;
		this.picHeight = picHeight;
		this.bgCol = bgCol;
		this.duration = (duration!=undefined && duration!='' ? duration : 0.5);
		this.arrElements = $$('#'+container+' .ftAccordeon');
		
		/*********************************************************************************
		*	the first element is left-positioned and never changes.
		*	the remaining elements are right-positioned and therefore the list have to 
		*	be reversed that the html-order is correct. so take the first element out of 
		*	the list, put it at the end and reverse the list.
		*********************************************************************************/
		var firstElement = this.arrElements.shift();
		this.arrElements.push(firstElement);
		this.arrElements.reverse();
		
		this.size = this.arrElements.length;
		this.smallPicWidth = (this.areaWidth-this.picWidth)/(this.size-1);
		
		var offset = 0;
		var zindex = this.size+10;
		var owner = this;
		var id = 0;
		var bolStart = false;
		
		if(start!=undefined && start!='' && start>0) {
			id = this.size-start+1;
		}
		
		this.arrElements.each(function(element,index) {
			var css = element.style;
			
			// the first element is left-positioned and at the bottom
			if(index==0) {
				owner.current = element;
				css.width = owner.picWidth+'px';
				css.left = '0px';
				css.zIndex = 0;
			}
			// the remaining elements are right-positioned
			else {
				// the first one is doesn't count (because it's left-positioned)
				if(index==id) {
					bolStart = true;
					owner.setCurrent(element);
				}
				
				if(bolStart) css.width = owner.picWidth+'px';
				else css.width = owner.smallPicWidth+'px';
				
				css.right = offset+'px';
				css.zIndex = zindex;
				offset += owner.smallPicWidth;
			}
			
			css.position = 'absolute';
			css.height = (owner.picHeight)+'px';
			css.backgroundRepeat = 'no-repeat';
			css.overflow = 'hidden';
			css.cursor = 'pointer';
			css.paddingLeft = '1px';
			element.morph = null;
			
			if(owner.bgCol!=undefined && owner.bgCol!='') {
				css.backgroundColor = owner.bgCol;
			}
			
			zindex--;
			
			Event.observe(element,'mouseover',owner.activate.bind(owner,element),false);
			Event.observe(element,'click',owner.setCurrent.bind(owner,element),false);
		});
		
		Event.observe($(container),'mouseout',this.returnToCurrent.bind(this),false);
		
		if(start!=undefined && start!='') {
			var id = 0;
			
			// strange method to get the array position of the element (because of the different position settings)
			if(start>0) id = this.size-start+1;
			
			this.activate(this.arrElements[id]);
			this.setCurrent(this.arrElements[id]);
		}
		
		//this.debug();
		//this.info();
	},
	activate: function(obj) {
		var owner = this;
		var flagActivated = false;

		this.arrElements.each(function(element) {
			if(element.morph!=null) element.morph.cancel();
			// the first element is left-positioned and is always at the bottom and the whole size (no change)
			if(element!==owner.arrElements[0]) {
				// flag for the current image (mouseover)
				if(obj===element) flagActivated = true;

				if(flagActivated) {
					element.morph = new Effect.Morph(element,{style:'width:'+owner.picWidth+'px;',duration:owner.duration});
				} else {
					element.morph = new Effect.Morph(element,{style:'width:'+owner.smallPicWidth+'px;',duration:owner.duration});
				}
			}
		});
	},
	returnToCurrent: function() {
		this.activate(this.current);
	},
	setCurrent: function(obj) {
		this.current = obj;
		//this.info(); // <-- only for testing and debugging purpose
	},
	/*** TEST FUNCTIONS ***/
	/*debug: function() {
		var str = '';
			str += 'areaWidth: '+this.areaWidth+'<br>';
			str += 'areaHeight: '+this.areaHeight+'<br>';
			str += 'picWidth: '+this.picWidth+'<br>';
			str += 'picHeight: '+this.picHeight+'<br>';
			str += 'bgCol: '+this.bgCol+'<br>';
			str += 'duration: '+this.duration+'<br>';
			str += 'size: '+this.size+'<br>';
			str += 'smallPicWidth: '+this.smallPicWidth+'<br>';
		
		$('debug').update(str);
	},*/
	info: function() {
		var obj = this.current;
		var id = (this.arrElements.indexOf(obj)==0?this.arrElements.indexOf(obj):this.size-this.arrElements.indexOf(obj))+1;
		var str = '<b>current is #'+id+'</b><br>';
			//str += '<br>there is so much to read about this topic.';
			//str += '<br>i always wanted to use the .times() function of prototype!';
			//str += '<br>here it is:<code>(id+" ").times(30);</code><br>';
			//str += '<br>'+(id+' ').times(30);
		
		//$('info').update(str);
	}
});