var MtvSlideShow = new Class({
	Implements: Options,
	
	options: {
		duration: 'normal',
		transition: 'linear',
		onShowStart: $empty,
		onShowComplete: $empty,
		waitIcon: 'images/loading.gif',
		errorIcon: 'images/error.png',
		slideClass: 'slideBox',
		activeItemClass: 'active'
	},
	
	initialize: function( name, container, links, previous, next, title, text, options ){
		this.setOptions(options);
		this.id = 0;
		this.container = container;
		this.links = links;
		this.next = next;
		this.previous = previous;
		this.title = title;
		this.text = text;
		this.slides = $H();
		this.shown = 0;
		this.name = name;

		this.pleaseWait = new Element('div', {
			styles: {
				zIndex: 10,
				position: 'absolute',
				opacity: 0.8,
				backgroundColor: '#ffffff',
				backgroundImage: 'url(' + this.options.waitIcon + ')',
				backgroundRepeat: 'no-repeat',
				backgroundPosition: 'center center',
				display: 'none'
			}
		});
		
		this.links.each(function(link){
			this.prepareLink(link);
		}, this);

		if( this.previous )
			this.previous.addEvent('click', function(evt, link){
				new Event(evt).stop();
//				document.fireEvent('click');
				this.navigate(-1);
			}.bindWithEvent(this, this.previous) );

		if( this.next )
			this.next.addEvent('click', function(evt, link){
				new Event(evt).stop();
//				document.fireEvent('click');
				this.navigate(1);
			}.bindWithEvent(this, this.next) );

		this.show( 0 );
	},

	_getElId: function( idx )
	{
		return this.name + 'Elm' + idx;
	},

	prepareLink: function(link){
		var id = this.id++;

		this.slides[id] = $H({
			element: null,
			loaded: false,
			width: 0,
			height: 0,
			src: link.get('href'),
			title: link.get('title'),
			text: link.get('ssText')
		});
		
		link.addEvent('click', function(evt, link){
			new Event(evt).stop();
//			document.fireEvent('click');
			this.show(id);
		}.bindWithEvent(this, link));
	},
	
	loadLarge: function(id){
		this.slides[id].loaded = true;
		
		this.pleaseWait.setStyles({
			width: this.container.getWidth() - 2,
			height: this.container.getHeight() - 2,
			top: this.getPosition(this.container).y,
			left: this.getPosition(this.container).x
		});
		
		$(document.body).adopt(this.pleaseWait);
		
		this.slides[id].element = new Asset.image(this.slides[id].src, {
			id: this._getElId( id ),
			onerror: function(){
				this.pleaseWait.dispose();
				this.setError(id);
			}.bind(this),
			onload: function(large){
				this.pleaseWait.dispose();
				if(!large.width)
					this.setError(id);
				else
				{
					this.slides[id].extend({
						width: large.width,
						height: large.height
					});
					this.show(id);
				}
			}.bind(this)
		});
		
/*		this.slides[id].element.set('morph', {
			duration: this.options.duration,
			transition: this.options.transition
		});
		this.slides[id].element.addClass( 'byzoomerZoomed' );*/
	},
	
	show: function(id){
		
		if(!this.slides[id].loaded)
		{
			this.loadLarge(id);
			return;
		}
		
		if( $( this._getElId( id ) ) )
			return;
		
		this.slides[id].element.setStyles({
			width: this.container.getWidth(),
			height: this.container.getHeight()
		});
		this.slides[id].element.addClass( this.options.slideClass );

		$(document.body).adopt(this.slides[id].element);
		
		this.options.onShowStart();

		if( this.options.activeItemClass )
			this.links[ this.shown ].getParent().removeClass( this.options.activeItemClass );

		this.slides[id].element.replaces( this.container );
		this.container = this.slides[id].element;

		if( this.options.activeItemClass )
			this.links[ id ].getParent().addClass( this.options.activeItemClass );

		if( this.title )
			this.title.set('text', this.slides[id].title);
		if( this.text )
			this.text.set('text', this.slides[id].text);

		this.options.onShowComplete();

		this.shown = id;
		},

	navigate: function( d )
	{
		var idx = this.shown;

		idx += d;

		idx = idx < 0 ? this.id - 1 : ( idx >= this.id ? 0 : idx );

		this.show( idx );
	},

	setError: function(id){
		var error = this.pleaseWait.clone();
		error.setStyles({
			backgroundColor: '#ffd0d0',
			backgroundImage: 'url(' + this.options.errorIcon + ')',
			width: this.links[id].getWidth() - 2,
			height: this.links[id].getHeight() - 2,
			left: this.getPosition(this.links[id]).x,
			top: this.getPosition(this.links[id]).y,
			display: 'inline'
		});

		$(document.body).adopt(error);
	},
	
	getPosition: function(element) {
		if (!Browser.Engine.trident) return element.getPosition();
		var b = element.getBoundingClientRect(), html = element.getDocument().documentElement;
		return {
			x: b.left + html.scrollLeft - html.clientLeft,
			y: b.top + html.scrollTop - html.clientTop
		};
}
});