var Atlas = new Class({
	Implements: [Options],
	options: {
		itemWidth: 200,
		itemHeight: 300,
		itemDelay: 500,
		linkText: 'Read more...',
		pause: 4000,
		selector: 'atlas',
		selectorImage: 'IMG',
		selectorTitle: 'H1',
		selectorText: 'P',
		selectorLink: 'A',
		showStripe: true,
		showText: true,
		stripeHeight: 50,
		stripeTopOffset: 0,
		stripeLeftOffset: 0,
		stripeWidthOffset: 0,
		stripeColor: '#FFF',
		stripeBackgroundColor: '#000',
		stripeOpacity: 0.8,
		textHeight: 100,
		transition: 'expo:out',
		transitionDuration: 500
	},
	
	initialize: function(cOptions){
		this.setOptions(cOptions);

		this.containerElement = $(this.options.selector);
		this.currentImageID = 0;
		this.image = [];
		this.imageContainer = [];
		this.item = [];
		this.loadingCounter = 0
		this.nextImageID = 0;
		this.previousImageID = 0;
		this.slide = [];
		this.stripe = [];
		this.stripeText = [];
		this.title = [];
		this.text = [];
		this.textContainer = [];
		
		if(this.containerElement){
			this.counter = new Element('div').set('html', 'טוען...').inject(this.containerElement, 'top');
			$$('#' + this.options.selector + ' LI').each(function(oItem, nIndex){
				this.image[nIndex] = new Asset.images(oItem.getElements(this.options.selectorImage).getProperty('src'), {
					onProgress: function(nImages, nSubIndex){
						this.counter.set('html', '<h3>טוען תמונה ' + (nImages + 1) + ' מתוך ' + $$('#' + this.options.selector + ' LI ' + this.options.selectorImage + '').length + '</h3>');
						//console.log('טוען תמונה ' + (nImages + 1) + ' מתוך ' + $$('#' + this.options.selector + ' LI ' + this.options.selectorImage + '').length + '');
					}.bind(this),
					onComplete: function(){
						this.loadingCounter += 1;
						if(this.loadingCounter >= $$('#' + this.options.selector + ' LI').length) this.start();
					}.bind(this)
				});
			}.bind(this));
			this.title = $$('#' + this.options.selector + ' LI ' + this.options.selectorTitle + '').get('html');
			this.text = $$('#' + this.options.selector + ' LI ' + this.options.selectorText + '').get('html');
			this.url = $$('#' + this.options.selector + ' LI ' + this.options.selectorLink + '').getProperty('href');

		}else alert('Container element not found');
	},
	
	start: function(){
		this.counter.destroy();
		$$('#' + this.options.selector + ' LI').each(function(oItem, nIndex){
			this.item[nIndex] = new Element('div').addClass('cell').setStyles({
				'float': 'right',
				'width': this.options.itemWidth + 'px',
				'height': (this.options.itemHeight + this.options.textHeight) + 'px'
			}).inject(this.containerElement, 'bottom');
			
			this.imageContainer[nIndex] = new Element('div').addClass('rotator').setStyles({
				'height': this.options.itemHeight + 'px',
				'overflow': 'hidden',
				'position': 'relative',
				'zIndex': '1'
			}).inject(this.item[nIndex], 'bottom');
			
			this.textContainer[nIndex] = new Element('div').addClass('text').setStyles({
				'height': this.options.textHeight
			}).set('html', '<p>' + this.text[nIndex] + '</p>').inject(this.item[nIndex], 'bottom');
			
			new Element('a').setProperty('href', this.url[nIndex]).set('html', this.options.linkText).inject(this.textContainer[nIndex], 'bottom');
			
			this.slide[nIndex] = [];
			for(var nSubIndex = 0; nSubIndex < this.image[nIndex].length; nSubIndex++){
				this.slide[nIndex][nSubIndex] = new Element('div').setStyles({
					'background': 'url(\'' + this.image[nIndex][nSubIndex].src + '\') no-repeat center center',
					'cursor': 'pointer',
					'opacity': nSubIndex > 0 ? 0 : 1,
					'position': 'absolute',
					'top': 0,
					'left': 0,
					'width': this.options.itemWidth,
					'height': this.options.itemHeight
				}).addEvent('click', function(){location.href = this.url[nIndex]}.bind(this)).set('morph', {duration: this.options.transitionDuration, transition: this.options.transition, wait: false}).inject(this.imageContainer[nIndex], 'bottom');
			}
			
			if(this.options.showStripe){
				this.stripe[nIndex] = new Element('div').setStyles({
					'background': this.options.stripeBackgroundColor,
					'height': this.options.stripeHeight,
					'left': (this.imageContainer[nIndex].getPosition().x + this.options.stripeLeftOffset) + 'px',
					'opacity': this.options.stripeOpacity,
					'position': 'absolute',
					'top': (this.imageContainer[nIndex].getPosition().y + this.imageContainer[nIndex].getSize().y - this.options.stripeHeight + this.options.stripeTopOffset) + 'px',
					'width': this.options.itemWidth + this.options.stripeWidthOffset,
					'zIndex': '10'
				}).inject(this.item[nIndex], 'bottom');
				this.stripeText[nIndex] = new Element('div').setStyles({
					'color': this.options.stripeColor,
					'height': this.options.stripeHeight,
					'left': (this.imageContainer[nIndex].getPosition().x + 1) + 'px',
					'overflow': 'hidden',
					'position': 'absolute',
					'top': (this.imageContainer[nIndex].getPosition().y + this.imageContainer[nIndex].getSize().y - this.options.stripeHeight) + 'px',
					'width': this.options.itemWidth,
					'zIndex': '11'
				}).set('html', '<a href="' + this.url[nIndex] + '"><h1>' + this.title[nIndex] + '</h1></a>').inject(this.item[nIndex], 'bottom');
			}
		}.bind(this));
		new Element('div').setStyle('clear', 'both').inject(this.containerElement, 'bottom');
		
		this.next.delay(this.options.pause, this);
	},
	
	switchImage: function(nSlideID){
		nCurImageID = 0;
		for(var nIndex = 0 ; nIndex < this.slide[nSlideID].length; nIndex++){
			if(this.slide[nSlideID][nIndex].getStyle('opacity') > 0){
				this.slide[nSlideID][nIndex].morph({'opacity': [1, 0]});
				nCurImageID = nIndex;
			}
		}
		
		nCurImageID++;
		if(nCurImageID >= this.slide[nSlideID].length) nCurImageID = 0;
		
		this.slide[nSlideID][nCurImageID].morph({'opacity': [0, 1]});
	},
	
	next: function(){
		for(var nIndex = 0; nIndex < this.slide.length; nIndex++){
			this.switchImage.delay(nIndex * this.options.itemDelay, this, nIndex);
		}
		this.next.delay(this.options.pause, this);
	}

});