var Hades = new Class({
	Implements: [Options],
	options: {
		height: 300,
		mediaWidth: 600,
		pause: 4000,
		selector: '',
		startItem: 0,
		textBackgroundColor: '#000',
		textBackgroundOpacity: 0.7,
		textHeight: 80,
		thumbHeight: 50,
		thumbOpacityOff: 0.4,
		thumbOpacityOn: 1,
		thumbWidth: 200,
		transition: 'expo:in:out',
		transitionDuration: 1000,
		width: 800
	},
	initialize: function(cOptions){
		this.setOptions(cOptions);
		
		// objects
		this.chainFx = new Chain();
		this.container = $(this.options.selector).parentNode;
		this.currentItemID = this.options.startItem;
		this.frame = [];
		this.isIE7 = false;
		this.mainThumbWrap = null;
		this.mainMediaWrap = null;
		this.mainMediaRibbon = null;
		this.nextItemID = 0;
		this.previousItemID = 0;
		this.thumb = [];
		
		this.isFirst = true;
		this.isRunning = true;
		
		this.mainFrame = new Element('div').addClass('hades').setStyles({
			'height': this.options.height,
			'overflow': 'hidden',
			'position': 'relative',
			'width': this.options.width
		}).inject(this.container, 'bottom');
		
		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');
		this.url = $$('#' + this.options.selector + ' LI A').getProperty('href');

		if(Browser.Engine.trident && Browser.Engine.version == 5 && !document.querySelectorAll){
			this.isIE7 = true;
		}
		
	},
	
	start: function(){
		var me = this;
		this.mainFrame.set('html', '');
		this.mainThumbWrap = new Element('div').addClass('thumb-wrap').setStyles({
			'height': this.options.height,
			'float': 'right',
			'overflow': 'hidden',
			'width': this.options.thumbWidth
		}).inject(this.mainFrame, 'bottom');
		
		this.mainMediaWrap = new Element('div').setStyles({
			'float': 'right',
			'height': this.options.height,
			'overflow': 'hidden',
			'position': 'relative',
			'width': this.options.mediaWidth
		}).inject(this.mainFrame, 'bottom');
		
		this.mainMediaRibbon = new Element('div').addClass('media-wrap').setStyles({
			'height': this.options.height,
			'position': 'relative',
			'width': this.options.mediaWidth * this.image.length
		}).set('morph', {
			'duration': this.options.transitionDuration, 
			'transition': this.options.transition, 
			'wait': true
		}).inject(this.mainMediaWrap, 'bottom');
		
		
		for(var nIndex = 0; nIndex < this.image.length; nIndex++){
			this.thumb[nIndex] = new Element('div').addClass('item').store('state', 'off').store('item-id', nIndex).setStyles({
				'background': 'url(\'/Thumb.aspx?filename=' + this.image[nIndex].src + '&width=' + this.options.thumbWidth + '\') no-repeat center center',
				'cursor': 'pointer',
				'height': this.options.thumbHeight,
				'opacity': this.options.thumbOpacityOff,
				'width': this.options.thumbWidth
			}).set('morph', {
				'duration': this.options.transitionDuration / 2, 
				'transition': 'linear', 
				'wait': true
			}).addEvents({
				'click': function(e){
					e.stop();
					me.switchMedia(this.retrieve('item-id'), true);
				},
				'mouseenter': function(e){
					e.stop();
					if(this.retrieve('state') == 'off') this.morph({'opacity': 1});
				},
				'mouseleave': function(e){
					e.stop();
					if(this.retrieve('state') == 'off') this.morph({'opacity': me.options.thumbOpacityOff});
				}
			}).inject(this.mainThumbWrap);
			
			this.frame[nIndex] = new Element('div').addClass('item').setProperty('id', 'hadesMedia' + nIndex).store('url', this.url[nIndex]).setStyles({
				'background': 'url(\'' + this.image[nIndex].src + '\') no-repeat center center',
				'float': 'right',
				'width': this.options.mediaWidth,
				'height': this.options.height
			}).inject(this.mainMediaRibbon);
			
			if(this.url[nIndex]){
				this.frame[nIndex].setStyle('cursor', 'pointer').addEvent('click', function(){
					location.href = this.retrieve('url');
				});
			}else this.image[nIndex].setStyle('cursor', 'default');
		}
		
		this.mainTextBG = new Element('div').setStyles({
			'background': this.options.textBackgroundColor,
			'height': this.options.textHeight,
			'opacity': this.options.textBackgroundOpacity,
			'position': 'absolute',
			'top': this.options.height - this.options.textHeight,
			'width': this.options.mediaWidth,
			'zIndex': 16
		}).set('morph', {
			'duration': this.options.transitionDuration / 2,
			'transition': this.options.transition, 
			'wait': true
		}).inject(this.mainMediaWrap, 'bottom');
		
		this.mainTextWrap = new Element('div').addClass('text-wrap').setStyles({
			'height': this.options.textHeight,
			'position': 'absolute',
			'top': this.options.height - this.options.textHeight,
			'width': this.options.mediaWidth,
			'zIndex': 17
		}).set('morph', {
			'duration': this.options.transitionDuration / 2,
			'transition': this.options.transition, 
			'wait': true
		}).set('html', '<h1>' + this.title[this.currentItemID] + '</h1><p>' + this.text[this.currentItemID] + '</p>').inject(this.mainMediaWrap, 'bottom');
		
		this.switchMedia(this.currentItemID, false);
	},
	
	switchMedia: function(nItemID, bIsClicked){
		var nPrevItemID = this.currentItemID;
		
		for(var nIndex = 0; nIndex < this.text.length; nIndex++){
			if(this.thumb[nIndex].retrieve('state') == 'on') nPrevItemID = nIndex;
		}
		
		this.mainMediaRibbon.morph({'right': [(this.currentItemID * this.options.mediaWidth) * -1, (nItemID * this.options.mediaWidth) * -1]});
		this.thumb[nPrevItemID].morph({'opacity': [this.options.thumbOpacityOn, this.options.thumbOpacityOff]}).store('state', 'off');
		this.thumb[nItemID].morph({'opacity': [this.options.thumbOpacityOff, this.options.thumbOpacityOn]}).store('state', 'on');
		
		this.mainTextBG.morph({'top': this.options.height - (this.options.textHeight * 0.3), 'opacity': 0});
		this.mainTextWrap.get('morph').start({'top': this.options.height - (this.options.textHeight * 0.3), 'opacity': 0}).chain(function(){
			this.mainTextWrap.set('html', '<h1>' + this.title[nItemID] + '</h1><p>' + this.text[nItemID] + '</p>');
			this.mainTextBG.morph({'top': this.options.height - this.options.textHeight, 'opacity': this.options.textBackgroundOpacity});
			this.mainTextWrap.morph({'top': this.options.height - this.options.textHeight, 'opacity': 1});
		}.bind(this));
		
		this.currentItemID = nItemID;
		
		
		if(bIsClicked) $clear(this.timeoutID)
		if(this.isRunning){
			this.timeoutID = this.next.delay(this.options.pause, this);
		}
	},
	
	next: function(){
		var nTemp = this.currentItemID + 1 < this.image.length ? this.currentItemID + 1 : 0;
		this.switchMedia(nTemp);
	},
	
	previous: function(){
		var nTemp = this.currentItemID - 1 >= 0 ? this.currentItemID - 1 : this.image.length - 1;
		this.switchMedia(nTemp);
	}

});