document.observe("dom:loaded", function(){
	bannerObj = new bannerClass();
	function recSlide(){
		 bannerObj.slide();
	} 
	new PeriodicalExecuter(recSlide, 6);
});

var bannerClass = {};
bannerClass = Class.create();
bannerClass.prototype = {
	initialize: function(){
		this.options = Object.extend({
			banner: "hpTeaserImg",
			item: "item",
			loop: false,
			none: true
        }, arguments[0] || { });

		this.mark = 0;
		this.initial();
	},

	initial: function(){
		if($(this.options.banner) && $(this.options.banner).select("."+this.options.item).length > 1){
			items = $(this.options.banner).select("."+this.options.item);

			items.each(function(item, i){
				item.setStyle({
					"zIndex": 10
				});
				item.hide();
				if(i == this.mark){
					item.setStyle({
						"zIndex": 20
					});
					item.show();
				}
			}.bind(this));
		}
	},

	slide: function(){
		if($(this.options.banner) && $(this.options.banner).select("."+this.options.item).length > 1){
			items = $(this.options.banner).select("."+this.options.item);

			this.next = this.mark + 1;
			if(!items[this.next]){
				if(!this.options.loop)
					return;

				this.next = 0;
			}

			items.each(function(item, i){
				item.setStyle({
					"zIndex": 10
				});
				item.hide();
				if(i == this.mark){
					item.setStyle({
						"zIndex": 20
					});
					item.show();
				}
				if(i == this.next){
					item.setStyle({
						"zIndex": 30
					});
					new Effect.Appear(item, {
						form: 0.0,
						to: 1.0,
						duration: 2.0
					});
				}
			}.bind(this));

			this.mark = this.next;
		}else{
			if($(this.options.banner))
				$(this.options.banner).hide();
		}
	},

	none: function(){
	}
}