var MPH = new Class({
	id: null,
	fx: null,
	windowScroll: null,

	initialize: function(mph){
		var that = this, thumb_cont;

		// Work out the ID
		this.id = mph.id.substring(6);

		// Find the main div
		var main = $('mph_' + this.id + '_main');

		// Create the effect instance
		this.fx = new Fx.Morph(main, {
			transition: Fx.Transitions.Sine.easeOut,
			link: 'cancel'
		});

		this.windowScroll = new Fx.Scroll(window);

		if (thumb_cont = mph.getElement('.mph_thumbs')){
			// Do the thumbnails
			var thumbs = thumb_cont.getChildren().addEvent('click', function(){ that.changeMain(this); return false; });
		}
	},

	changeMain: function(thumb){
		var main = $('mph_' + this.id + '_main'), that = this;

		// Work out the dimensions
		var dimensions = thumb.rel.split('[')[1].replace(']', '').split(' ');
		var width = dimensions[0];
		var height = dimensions[1];

		// Give it a fixed height and loading background
		main.setStyles({
			height: main.getHeight(),
			width: main.getWidth(),
			background: 'url(/cms/images/ajax_loading.gif) no-repeat center center'
		});

		// Get rid of the previous media
		main.getFirst();
		//.destroy();
		main.innerHTML = '';

		switch (thumb.href.substring(thumb.href.length - 3)){
			case 'swf':
				// TODO: Allow more config options here
				this.fx.start({
					width: width,
					height: height
				}).chain(function(){
					// Scroll to it
					that.windowScroll.toElement(main);

					var newSWF = new Swiff(thumb.href, {
						width: width,
						height: height,
						container: main,
						params: {
							allowFullScreen: true
						}
					});

					// Get rid of the loading background
					main.setStyles({
						background: ''
					});
				});
			break;
			case 'flv':
				this.fx.start({
					width: width,
					height: height
				}).chain(function(){
					// Scroll to it
					that.windowScroll.toElement(main);

					new Swiff('/cms/NonverBlaster.swf', {
						width: width,
						height: height,
						container: main,
						params: {
							allowFullScreen: true
						},
						vars: {
							mediaURL: thumb.href,
							allowSmoothing: true,
							autoPlay: true
						}
					});


					// Get rid of the loading background
					main.setStyles({
						background: ''
					});
				});
			break;
			default:
				var img = new Element('img', {
					alt: thumb.title,
					styles: {
						opacity: 0
					},
					events: {
						load: function(){
							// Resize the media container
							that.fx.start({
								width: width,
								height: height
							}).chain(function(){
								// Scroll to it
								that.windowScroll.toElement(main);

								// Fade the media in
								this.inject(main, 'bottom').fade('in');

								// Get rid of the loading background
								main.setStyles({
									background: ''
								});
							}.bind(this));
						}
					},
					// This must be after the event has been set to stop IE triggering the event before its set
					src: thumb.href
				});

				// Use a fixed width
				if (width){
					img.width = width;
				}

				// Use a fixed height
				if (height){
					img.height = height;
				}
		}

	}
});

window.addEvent('domready', function(){
	// Don't activate MPH for the admin mode
	if (typeof(cms) == 'undefined'){
		$$('.block_mph').each(function(mphs){
			mph = new MPH(mphs);
		});
	}
});