var FeatureShow = Class.create();
	FeatureShow.prototype = {
		
		initialize: function(element, options) {
			this.options = Object.extend({
				defaultPanel: '',
				ajaxUrls: 			{},
				ajaxLoadingText: 	'Loading...'	
			}, options || {});
			this.minFeature = 0;
			this.maxFeature = 3;
			this.currentFeatureNumber = this.minFeature;
			this.previousFeatureNumber = this.maxFeature;
			this.rate = 6;
			
			opacity('featureImage_0', 0, 100, 500);
			this.executer = new PeriodicalExecuter(function(pe){
				this.jumpForward('fade');
			}.bind(this), this.rate);	
		},
		
		jumpForward: function(fadeType){
			featureNumber = this.currentFeatureNumber;			
			if(featureNumber >= this.maxFeature){
				featureNumber = this.minFeature;
			}else{
				featureNumber++;
			}
			
			if(fadeType == "fade"){
				this.fadeFeature(featureNumber);
			}else{
				this.swithFeature(featureNumber);
			}
		},
		
		jumpBack: function(){
					
			featureNumber = this.currentFeatureNumber;
			if(featureNumber <= this.minFeature){
				featureNumber = this.maxFeature;
			}else{
				featureNumber--;
			}
			
			this.swithFeature(featureNumber);
		},
		
		pause: function(){
			if(this.executer != null){
				this.executer.stop();
				this.executer = null;
			}else{
				//resume
				this.executer = new PeriodicalExecuter(function(pe){
					this.jumpForward('fade');
				}.bind(this), this.rate);
			}
			$('pauseButton').toggle();
			$('playButton').toggle();
		},

		swithFeature: function(featureNumber){
			this.previousFeatureNumber = this.currentFeatureNumber;
			this.currentFeatureNumber = featureNumber;

//			opacity('featureImage_' + this.previousFeatureNumber, 100, 0, 500)
			opacity('featureImage_' + this.currentFeatureNumber, 0, 100, 500)
			$('featureImage_' + this.previousFeatureNumber).hide();
			$('featureButton_' + this.previousFeatureNumber).hide();
			$('featureImage_' + this.currentFeatureNumber).show();
			$('featureButton_' + this.currentFeatureNumber).show();

		},
		
		fadeFeature: function(featureNumber){
			this.previousFeatureNumber = this.currentFeatureNumber;
			this.currentFeatureNumber = featureNumber;
			$('featureImage_' + this.previousFeatureNumber).hide();
			$('featureButton_' + this.previousFeatureNumber).hide();
			opacity('featureImage_' + this.currentFeatureNumber,  0, 100, 1000);
			$('featureButton_' + this.currentFeatureNumber).show();

		}
	};
	
	function opacity(id, opacStart, opacEnd, millisec) {
		//speed for each frame
		var speed = Math.round(millisec / 100);
		var timer = 0;
	
		//determine the direction for the blending, if start and end are the same nothing happens
		if(opacStart > opacEnd) {
			for(i = opacStart; i >= opacEnd; i--) {
				setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
				timer++;
			}
			$('featureImage_' + this.previousFeatureNumber).hide();
		} else if(opacStart < opacEnd) {
			$(id).show();
			for(i = opacStart; i <= opacEnd; i++)
				{
				setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
				timer++;
			}
			
		}
//		$('featureImage_' + this.currentFeatureNumber).show();
	

	}

	//change the opacity for different browsers
	function changeOpac(opacity, id) {
		var object = document.getElementById(id).style;
		object.opacity = (opacity / 100);
		object.MozOpacity = (opacity / 100);
		object.KhtmlOpacity = (opacity / 100);
		object.filter = "alpha(opacity=" + opacity + ")";
	} 
	
	function blendimage(divid, imageid, imagefile, millisec) {
		var speed = Math.round(millisec / 100);
		var timer = 0;
		
		//set the current image as background
		document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
		
		//make image transparent
		changeOpac(0, imageid);
		
		//make new image
		document.getElementById(imageid).src = imagefile;
	
		//fade in image
		for(i = 0; i <= 100; i++) {
			setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
			timer++;
		}
	}