var Venus = new Class({
	Implements: [Options],
	options: {
		bubbleWidth: 200,
		bubbleHeight: 100,
		bubbleLeftOffset: 50,
		bubbleOpacity: 0.8,
		bubbltTopOffset: 0,
		pagerButtonHeight: 20,
		pause: 4000,
		selector: 'IMG',
		showStripe: true,
		showBubble: true,
		stripeHeight: 80,
		stripeTopOffset: 0,
		stripeColor: '#FFF',
		stripeBackgroundColor: '#000',
		stripeOpacity: 0.8,
		transitionBubble: 'expo:out',
		transitionBubbleDuration: 500,
		transitionImage: 'linear',
		transitionImageDuration: 500,
		transitionStripe: 'expo:out',
		transitionStripeDuration: 500
	},
	initialize: function(cOptions){
		this.setOptions(cOptions);
		
		// objects
		this.imageFx = null;
		this.bubble = null;
		this.bubbleFx = null;
		this.bubbleText = null;
		this.bubbleTextFx = null;
		this.buttonNext = null;
		this.buttonPrevious = null;
		this.containerElement = $(this.options.selector).parentNode;
		this.currentImageID = 0;
		this.nextImageID = 0;
		this.pager = null;
		this.pagerButton = [];
		this.previousImageID = 0;
		this.stripe = null;
		this.stripeFx = null;
		
		this.isFirst = true;
		this.isRunning = true;
		
		this.mainFrame = new Element('div').addClass('venusWrap').setStyles({
			width: this.options.width,
			height: this.options.height,
            position: 'relative'
		}).inject(this.containerElement, 'top');
		
		this.image = new Asset.images($$('#' + this.options.selector + ' LI IMG').getProperty('src'), {
			onProgress: function(nImages, nIndex){
				this.mainFrame.set('html', '<h3>טוען תמונה ' + (nImages + 1) + ' מתוך ' + $$('#' + this.options.selector + ' LI IMG').length + '</h3>');
			}.bind(this),
			onComplete: function(){
				$(this.options.selector).destroy();
				this.start();
			}.bind(this)
		});
		
		this.title = $$('#' + this.options.selector + ' LI H1').get('html');
		this.text = $$('#' + this.options.selector + ' LI P').get('html');
		
	},
	
	start: function(){
		this.mainFrame.set('html', '');
		this.renderImage(this.currentImageID);
		
		if(this.options.showStripe){
			this.stripe = new Element('div', {'id':'stripe'}).setStyles({
				position: 'absolute',
				opacity: 0,
				border: 'none',
				height: this.options.stripeHeight,
				left: this.mainFrame.getPosition(this.mainFrame).x + 8,
				color: this.options.stripeColor,
				background: this.options.stripeBackgroundColor,
				zIndex: '11'
			}).inject(this.mainFrame);
			
			this.stripeFx = new Fx.Morph(this.stripe, {
				duration: this.options.transitionStripeDuration, 
				transition: this.options.transitionStripe,
				wait: true
			});
			
			this.buttonNext = new Element('div').addClass('right').setStyles({
				opacity: 0,
				height: this.options.stripeHeight,
				zIndex: '12'
			}).addEvents({'click': function(oEvent){
				oEvent.stop();
				$clear(this.timeoutID);
				this.isRunning = false;
				this.next();
			}.bind(this)}).inject(this.mainFrame);
			
			this.buttonPrevious = new Element('div').addClass('left').setStyles({
				opacity: 0,
				height: this.options.stripeHeight,
				zIndex: '12'
			}).addEvents({'click': function(oEvent){
				oEvent.stop();
				$clear(this.timeoutID);
				this.isRunning = false;
				this.previous();
			}.bind(this)}).inject(this.mainFrame);
		}
		
		if(this.options.showBubble){
			this.pager = new Element('div').setStyles({
				position: 'absolute',
				opacity: 0,
				width: this.options.width - this.buttonPrevious.getSize().x - this.buttonNext.getSize().x - 20,
				height: this.options.pagerButtonHeight,
				zIndex: '12'
			}).inject(this.mainFrame);
			
			this.image.each(function(oItem, nIndex){
				this.pagerButton[nIndex] = new Element('div').addClass('pagerButton').addClass('off').setStyles({
					width: this.options.pagerButtonHeight,
					lineHeight: this.options.pagerButtonHeight
				}).addEvents({
					'click': function(oEvent){
						oEvent.stop();
						$clear(this.timeoutID);
						this.isRunning = false;
						this.renderImage(nIndex);
					}.bind(this)
				}).set('html', nIndex + 1).inject(this.pager);
			}.bind(this));
			
			this.bubble = new Element('div').addClass('bubble').setStyles({
				opacity: 0,
				width: this.options.bubbleWidth,
				height: this.options.bubbleHeight,
				left: this.mainFrame.getPosition(this.mainFrame).x + this.options.bubbleLeftOffset,
				zIndex: '12'
			}).inject(this.mainFrame);
			
			this.bubbleFx = new Fx.Morph(this.bubble, {
				duration: this.options.transitionBubbleDuration, 
				transition: this.options.transitionBubble,
				wait: true
			});
			
			this.bubbleText = new Element('div').addClass('bubbleText').setStyles({
				opacity: 0,
				width: this.options.bubbleWidth,
				height: this.options.bubbleHeight,
				left: this.mainFrame.getPosition(this.mainFrame).x + this.options.bubbleLeftOffset,
				zIndex: '13'
			}).inject(this.mainFrame);
			
			this.bubbleTextFx = new Fx.Morph(this.bubbleText, {
				duration: this.options.transitionBubbleDuration, 
				transition: this.options.transitionBubble,
				wait: true
			});
			
			this.pagerButton[this.currentImageID].removeClass('off').addClass('on');
		}
		
		if(this.isRunning && this.image.length > 1) this.timeoutID = this.next.delay(this.options.pause, this);
	},
	
	renderImage: function(nImageID){
		this.injectImage(nImageID);
		
		var oImage = new Element('div').setProperty('id', 'venusFrame' + nImageID).setStyles({
			position: 'absolute',
			opacity: 0, 
			background: 'url(' + this.image[nImageID].src + ') center center',
			top: this.mainFrame.getPosition(this.mainFrame).y,
			left: this.mainFrame.getPosition(this.mainFrame).x,
			width: this.options.width,
			height: this.options.height,
			zIndex: '10'
		}).inject(this.mainFrame);

		this.imageFx = new Fx.Morph(oImage, {
			duration: this.options.transitionImageDuration, 
			transition: this.options.transitionImage,
			wait: true
		});
		
		if(this.isFirst){
			this.isFirst = false;
			this.imageFx.start({opacity: [0, this.options.bubbleOpacity]}).chain(function(){
				this.renderCommandLayer();
				if(this.title[nImageID].length > 0 || this.title[nImageID].length > 0) this.renderBubble();
			}.bind(this));
		}else{
			if(this.bubbleText.getStyle('opacity') > 0) this.bubbleTextFx.start({
				opacity: [1, 0],
				top: [this.mainFrame.getPosition(this.mainFrame).y + (this.mainFrame.getSize().y / 2 - this.options.bubbleHeight / 2) + this.options.bubbleTopOffset, this.mainFrame.getPosition(this.mainFrame).y + (this.mainFrame.getSize().y / 2 - this.options.bubbleHeight / 2) + this.options.bubbleTopOffset + 20]
			});
			if(this.bubbleText.getStyle('opacity') > 0){
				this.bubbleFx.start({
					opacity: [this.options.bubbleOpacity, 0],
					top: [this.mainFrame.getPosition(this.mainFrame).y + (this.mainFrame.getSize().y / 2 - this.options.bubbleHeight / 2) + this.options.bubbleTopOffset, this.mainFrame.getPosition(this.mainFrame).y + (this.mainFrame.getSize().y / 2 - this.options.bubbleHeight / 2) + this.options.bubbleTopOffset + 20]
				}).chain(function(){
					this.bubbleText.set('html', '');
					this.switchImage(nImageID);
				}.bind(this));
			}else{
				this.switchImage(nImageID);
			}
		}
		this.setPager(nImageID);
	},
	switchImage: function(nImageID){
		var oPrevImage = $('venusFrame' + this.currentImageID);
		var oPrevImageFx = new Fx.Morph(oPrevImage, {
			duration: this.options.transitionImageDuration, 
			transition: this.options.transitionImage,
			wait: true
		});
		this.imageFx.start({opacity: [0, 1]}).chain(function(){
			if($('venusFrame' + this.currentImageID)) $('venusFrame' + this.currentImageID).destroy();
			if($('venusTemp' + this.currentImageID)) $('venusTemp' + this.currentImageID).destroy();
			this.currentImageID = nImageID;
			if(this.title[nImageID].length > 0 || this.text[nImageID].length > 0) this.renderBubble();
		}.bind(this));
	},
	injectImage: function(nImageID){
		this.image[nImageID].setStyles({
			position: 'absolute',
			top: '0px',
			left: '0px',
			zIndex: '10',
			visibility: 'hidden'
		}).setProperty('id', 'venusTemp' + nImageID).inject(document.body, 'bottom');
	},
	
	renderCommandLayer: function(){
		if(this.options.showStripe) this.renderStripe();
	},
	
	hideCommandLayer: function(){
		if(this.options.showStripe) this.hideStripe();
	},
	
	renderStripe: function(){
		
		this.stripe.setStyles({
			opacity: 0,
			width: this.mainFrame.getSize().x - 15
		});
		
		this.stripeFx.start({
			opacity: [0, this.options.stripeOpacity],
			top: [this.mainFrame.getPosition(this.mainFrame).y + this.mainFrame.getSize().y - this.options.stripeHeight + 6, this.mainFrame.getPosition(this.mainFrame).y+this.mainFrame.getSize().y - this.options.stripeHeight - this.options.stripeTopOffset]
		}).chain(function(){
			this.buttonPrevious.setStyles({
				opacity: 1,
				left: this.stripe.getPosition(this.mainFrame).x + 5,
				top: this.stripe.getPosition(this.mainFrame).y
			});
			this.buttonNext.setStyles({
				opacity: 1,
				left: this.buttonPrevious.getPosition(this.mainFrame).x + this.buttonNext.getSize().x + 5,
				top: this.stripe.getPosition(this.mainFrame).y
			});
			if(this.pager){
				this.pager.setStyles({
					opacity: 1,
					left: this.buttonNext.getPosition(this.mainFrame).x + this.buttonNext.getSize().x + 20,
					top: this.stripe.getPosition(this.mainFrame).y + ((this.options.stripeHeight - this.options.pagerButtonHeight) / 2) - 1
				});
			}
		}.bind(this));
	},
	
	hideStripe: function(){
		this.buttonNext.setStyles({opacity: 0});
		this.buttonPrevious.setStyles({opacity: 0});
		this.stripeFx.start({
			opacity: [this.options.stripeOpacity, 0],
			top: [this.mainFrame.getSize().y - this.options.stripeHeight - 3, this.mainFrame.getSize().y - this.options.stripeHeight + 3]
		});
	},
	
	renderBubble: function(){
		if(this.bubble){
			this.bubbleText.set('html', '<h1>' + this.title[this.currentImageID] + '</h1><p>' + this.text[this.currentImageID] + '</p>');
			this.bubbleTextFx.start({
				opacity: [0, 1],
				top: [this.mainFrame.getPosition(this.mainFrame).y + (this.mainFrame.getSize().y / 2 - this.options.bubbleHeight / 2) + this.options.bubbleTopOffset - 20, this.mainFrame.getPosition(this.mainFrame).y + (this.mainFrame.getSize().y / 2 - this.options.bubbleHeight / 2) + this.options.bubbleTopOffset]
			});
			this.bubbleFx.start({
				opacity: [0, this.options.bubbleOpacity],
				top: [this.mainFrame.getPosition(this.mainFrame).y + (this.mainFrame.getSize().y / 2 - this.options.bubbleHeight / 2) + this.options.bubbleTopOffset - 20, this.mainFrame.getPosition(this.mainFrame).y + (this.mainFrame.getSize().y / 2 - this.options.bubbleHeight / 2) + this.options.bubbleTopOffset]
			});
		}
	},
	
	setPager: function(nIndex){
		if(this.pagerButton.length > 0){
			this.pagerButton.each(function(oItem, nIndex){
				oItem.removeClass('on');
				if(!oItem.hasClass('off')) oItem.addClass('off');
			});
			this.pagerButton[nIndex].removeClass('off').addClass('on');
		}
	},
	
	next: function(){
		var nTemp = this.currentImageID + 1 < this.image.length ? this.currentImageID + 1 : 0;
		this.renderImage(nTemp);
		if(this.isRunning) this.timeoutID = this.next.delay(this.options.pause, this)
	},
	
	previous: function(){
		var nTemp = this.currentImageID - 1 >= 0 ? this.currentImageID - 1 : this.image.length - 1;
		this.renderImage(nTemp);
	}

});