var MediaSlide = new Class({

	Implements: [Options],

	options: {
		position: 0,
		mediaByView: 5,
		mediaCount: 0,
		slideWidth: 475,
		elementWidth: 95,
		url: '',
		overlay: null
	},

	elements: [],
	loaded: [],
	preload: [],

	initialize: function(element, options) {
		this.setOptions(options);
		this.element = $(element);
		this.currentPos = 0;
		this.loaded[0] = true;
		this.initOverlay(this.options.overlay);

		this.elementWidth = (Math.ceil((this.options.mediaCount / this.options.mediaByView)) * this.options.slideWidth);
		this.element.setStyle('width',this.elementWidth + 'px');

		this.slideFx = new Fx.Tween(element);

		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);
	},

	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');
		}
	},

	slide: function(side) {
		if (!this.progress) {
			this.progress = true;
			this.currentPos = this.currentPos + side;
			if (!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;
			//el.getElement('.current').set('text','Photos ' + curr + ' to ' + (curr + 14));
		}.bind(this));

		this.preload(this.currentPos + 1);
	},

	preload: function(offset) {
		if (this.options.url && !this.loaded[offset] && !this.preload[offset]) {
			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);
						//var photoList = new Element('div').addClass('photo-list');
						div.getElements('li').each(function(photo) {
							//photo.inject(photoList);
							photo.inject(this.element);
							var img = photo.getElement('img');
							if (img) imgs.push(img.get('src'));
						}.bind(this));
						//photoList.inject(this.element);
					}
					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 )});
		} else if (!this.options.url) {
            this.loaded[offset] = true;
        }
	},

	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);
		}
	}

});