var MediaSlide = new Class({
	
	Implements: [Options],
	
	options: {
		position: 0,
		mediaByView: 3,
		mediaCount: 0,
		slideWidth: 843,
		elementWidth: 281,
		url: '',
		overlay: null,
        text: '(trips [FROM]-[TO])'
	},
	
	elements: [],
	loaded: [],
	preload: [],
	
	initialize: function(element, options) {
		this.setOptions(options);
		this.element = $(element);
		this.currentPos = this.options.position;

		this.loaded[this.currentPos] = true;
		this.initDesc();
		this.initOverlay(this.options.overlay);
		this.slideFx = new Fx.Tween(element);
        this.slideFx.start('left',-1 * (this.currentPos *  this.options.slideWidth)).chain(function() {this.progress = false;}.bind(this));

		if (this.options.menu) {
			$$(this.options.menu).each(function(el) {
                el.getElement('.next').addEvent('click',function(e) {
					new Event(e).stop();
					this.next();
				}.bindWithEvent(this));
			}.bind(this));
			
			$$(this.options.menu).each(function(el) {
				el.getElement('.prev').addEvent('click',function(e) {
					new Event(e).stop();
					this.prev();
				}.bindWithEvent(this));
			}.bind(this));
		}
		
		this.preload(this.currentPos + 1);
        if (this.currentPos) this.preload(this.currentPos - 1);
	},
	
	initOverlay: function(overlay) {
		if (overlay) {
			this.overlay = new Element('div').addClass('overlay').adopt(
				new Element('div').addClass('back'),
				new Element('div').addClass('loader')
			).inject(document.body);
			
			var pos = overlay.getPosition();
			var size = overlay.getSize();

			this.overlay.setStyles({
				height: size.y,
				width: size.x,
				top:pos.y,
				left:pos.x});
		}
	},
	
	showOverlay: function() {
		if(this.overlay) {
			this.overlay.setStyle('display','block');
		}
	},
	
	hideOverlay: function() {
		if (this.overlay) {
			this.overlay.setStyle('display','none');
		}
	},
	
	initDesc: function() {
		this.elementWidth = (Math.ceil((this.options.mediaCount / this.options.mediaByView)) * this.options.slideWidth);
		this.element.setStyle('width',this.elementWidth + 'px');
		
	},
	slide: function(side) {
		if (!this.progress) {
			this.progress = true;
			this.currentPos = this.currentPos + side;
			if (0 && !this.loaded[this.currentPos]) {
				this.showOverlay();
				this.preload(this.currentPos)
			} else {
				this.doSlide()
			}
		}
	},
	
	doSlide: function() {
		this.slideFx.start('left',-1 * (this.currentPos *  this.options.slideWidth)).chain(function() {
            this.progress = false;
        }.bind(this));
		$$(this.options.menu).each(function(el) {
			var curr = (this.currentPos * this.options.mediaByView) + 1;
            var to = (this.options.mediaCount <= (curr + this.options.mediaByView - 1)) ? this.options.mediaCount : (curr + this.options.mediaByView - 1);
			if (this.options.textElement) {
                this.options.textElement.set('text',this.options.text.replace('[FROM]',curr).replace('[TO]',to));
            }
            
		}.bind(this));
		
		this.preload(this.currentPos + 1);
        if (this.currentPos) this.preload(this.currentPos - 1);
	},
	
	preload: function(offset) {
        
        if (!this.loaded[offset] && !this.preload[offset] && this.options.url) {
			this.preload[offset] = true;
			new Request.HTML({
				url: this.options.url,
				onComplete: function(tree,elements,html) {
					var imgs = [];
					if (tree.length) {
						var div = tree.item(0);
						div.getElements('li').each(function(photo) {
							photo.inject(this.element);
							var img = photo.getElement('img');
							if (img) imgs.push(img.get('src'));
						}.bind(this));
					}
                    
					if (imgs.length) {
						new Asset.images(imgs,{
							onComplete: function() {
								this.loaded[offset] = true;
								this.preload[offset] = false;
								this.hideOverlay();
								if (offset == this.currentPos) this.doSlide();	
							}.bind(this)
						});						
					}
				}.bind(this)
			}).get({offset: (offset * this.options.mediaByView )});
		}
	},
	
	next: function() {
		if ((this.currentPos * this.options.mediaByView ) < (this.options.mediaCount - this.options.mediaByView)) {
			$$(this.options.menu).each(function(el) {
				el.getElement('.prev').setStyle('visibility','visible');
			});
			if (((this.currentPos+2) * this.options.mediaByView ) >= (this.options.mediaCount)) {
				$$(this.options.menu).each(function(el) {
					el.getElement('.next').setStyle('visibility','hidden');
				});
			}
			this.slide(1);
			
		}
	},
	
	prev: function() {
		if (this.currentPos) {
			$$(this.options.menu).each(function(el) {
				el.getElement('.next').setStyle('visibility','visible');
			});
			if (!(this.currentPos - 1)) {
				$$(this.options.menu).each(function(el) {
					el.getElement('.prev').setStyle('visibility','hidden');
				});
			}
			this.slide(-1);
		}
	}
	
});