var SliderImg = new Class({
	
	Implements : Options,
	
	options: {
		imagesSet: '.mainPicts li',
		tabSet: '.boxContent'
	},
	
	initialize : function(options){
		this.setOptions(options);
		this.crt=3;
		this.images = $$(this.options.imagesSet);
		this.tabs = $$(this.options.tabSet);
		this.fx = new Array();
		this.container = this.images[0].getParent();
		this.initImg();
		this.initTab();
	},
	
	initImg : function() {
		this.images.each(function(el,i){
			//if(el.get('tag') != 'img') el.getElement('img').setStyle('display','block');
			el.setStyle('display','block');
			this.fx[i] = new Fx.Tween(el, {
				property:'opacity',
				duration: 500,
				onComplete: function(){
					this.images[i].setStyle('opacity',1).inject(this.container,'top');
				}.bind(this)
			});
		}.bind(this));
		this.images[3].inject(this.container);
	},
	
	initTab : function() {
		$$(this.tabs).each(function(tab,i){
			tab.addEvents({
				'mouseenter': function() {
					$clear(this.timerLeave);
					$(tab.id + 'Effect').fade(1);
					this.showImg(i);
				}.bind(this),
				'mouseleave': function() {

					$(tab.id + 'Effect').fade(0);
					this.timerLeave = function() {
						this.showImg(3);
					}.bind(this).delay(200);
				}.bind(this)
			})
		}.bind(this));
	},
	
	showImg : function(index) {
		this.images[index].inject(this.container.getLast(),'before');
		this.fx[this.crt].start(1,0);
		this.crt = index;
	}
});