var hpslider = Class.create({

	initialize: function(sliderid) {
		this.elem    = $(sliderid);
		
		this.bannercontainer = this.elem.down('div.cssclass_hpbanners');
		this.banners = this.bannercontainer.select('a.cssclass_hpbanner');
		this.slide   = this.bannercontainer.down('div.cssclass_hpslide');
		
		this.active  = this.bannercontainer.down('a.cssclass_hpbanner.cssclass_active');
		this.next    = this.active.next('a.cssclass_hpbanner') || this.banners[0];
		this.dest    = null;
		
		this.timeout = null;
		this.fadefx = null;
		this.mode = 'pause';
		
		this.controlcontainer = this.elem.down('div.cssclass_hpbanners_control');
		this.controls         = this.controlcontainer.select('a.cssclass_hpbanner_control');
		this.buttoncontainer  = this.elem.down('span.cssclass_hpbanner_control_pause');
		this.buttons          = this.buttoncontainer.select('a');
		
		this.fadelength = 2.5 ;
		this.interval = 2.5 ;
		
		this.registerCallBacks();
		
		if (this.banners.length>1) this.launch(2000);
	},
	
	registerCallBacks: function() {
		var zcontrols = this.controls;
		var nb_zcontrols = zcontrols.length;
		for (var i=0; i<nb_zcontrols; i++) {
			zcontrol = zcontrols[i];
			zcontrol.observe('click', this.onBannerChoice.bind(this));
		}
		
		var zbuttons = this.buttons;
		var nb_zbuttons = zbuttons.length;
		for (var i=0; i<nb_zbuttons; i++) {
			zbutton = zbuttons[i];
			zbutton.observe('click', this.onBannerControl.bind(this));
		}
	},
	
	launch: function(laps) {
		this.mode = 'play';
		this.timeout = window.setTimeout(function() { ecommerce.hpslider.rotate() ; }, laps);
	},
	
	// from active to next
	rotate: function() {
		this.dest = this.next;
		this.rotateToDest();
	},
	
	// from active to dest
	rotateToDest: function() {
		if (this.timeout==null) return;
		this.fading = true;
		
		var zimg = this.dest.down('img').readAttribute('src');
		var zval = 'url(\''+zimg+'\')';
		this.bannercontainer.setStyle({background: zval});
		
		this.fadefx = new Effect.Fade(this.slide, { duration: this.fadelength, afterFinish: function() { ecommerce.hpslider.rotateFinished(zval); } });

		var zidx = this.banners.indexOf(this.dest);
		this.controls.each(function(el) { el.removeClassName('cssclass_active'); });
		this.controls[zidx].addClassName('cssclass_active');
	},
	
	rotateFinished: function(zval) {
		this.fadefx = null;
		this.slide.setStyle({background: zval});
		this.slide.show();
		
		this.active.removeClassName('cssclass_active');
		this.dest.addClassName('cssclass_active');
		this.active.hide();
		this.dest.show();
		
		this.active  = this.dest;
		this.next    = this.active.next('a.cssclass_hpbanner') || this.banners[0];

		if (this.mode=='play') {
			this.launch(this.interval*1000);
		} else {
			this.timeout = null ;
		}
	},
	
	onBannerChoice: function(event) {
		this.timeout = null;
		if (this.fadefx!=null) {
			this.fadefx.cancel();
			this.fadefx = null;
		}
		
		var element = Event.element(event);
		
		var type    = event.type;
		var zidx = this.controls.indexOf(element);
		this.dest = this.banners[zidx];

		this.controls.each(function(el) { el.removeClassName('cssclass_active'); });
		this.controls[zidx].addClassName('cssclass_active');
		
		var zimg = this.dest.down('img').readAttribute('src');
		var zval = 'url(\''+zimg+'\')';
		this.bannercontainer.setStyle({background: zval});

		this.slide.setStyle({background: zval, opacity: 1.0});
		this.slide.show();
		
		this.active.removeClassName('cssclass_active');
		this.dest.addClassName('cssclass_active');
		this.active.hide();
		this.dest.show();
		
		this.active  = this.dest;
		this.next    = this.active.next('a.cssclass_hpbanner') || this.banners[0];
		
		this.pause();
	},
	
	onBannerControl: function(event) {
		var element = Event.element(event);
		if (element.hasClassName('cssclass_pause')) {
			this.pause();
		} else {
			this.play();
		}
	},
	
	pause: function() {
		this.mode = 'pause';
		this.buttoncontainer.down('a.cssclass_pause').removeClassName('cssclass_active');
		this.buttoncontainer.down('a.cssclass_play').addClassName('cssclass_active');
	},
	
	play: function() {
		this.mode = 'play';
		this.buttoncontainer.down('a.cssclass_play').removeClassName('cssclass_active');
		this.buttoncontainer.down('a.cssclass_pause').addClassName('cssclass_active');
		this.launch(10);
	}
});