(function() {

	MediaFeatureOptions = Object.extend({
		closeButtonTitle: 'Close',
		productLinkText: 'Buy now!',
		
		resizeDuration: 0.5,
		overlayDuration: 0.3,
		overlayOpacity: 0.7,
		
		defaultWidth: 250,
		defaultHeight: 250
	}, window.MediaFeatureOptions || {});

	MediaFeature = Class.create();
	MediaFeature.prototype = {
		
		initialize: function() {
			
			// Settings
			this.overlayDuration = MediaFeatureOptions.overlayDuration;
			this.resizeDuration = MediaFeatureOptions.resizeDuration;
			
			var body = $$('body')[0];
			
			// Create overlay
			this.overlay = $(Builder.node('div', {className: 'media-overlay'})).hide()
				.observe('click', (function(e) { e.stop(); this.hide(); }).bind(this));
			body.appendChild(this.overlay);
			
			// Create/config elements
			this.loading = $(Builder.node('div', {className: 'loading'})).hide();
			this.img = $(Builder.node('img', {GALLERYIMG: 'no'})).hide();
			this.prev = $(Builder.node('a', {className: 'prev', href: 'javascript: void(0);'})).hide()
				.observe('click', (function(e) { e.stop(); this.displayPrev(); }).bind(this));
			this.next = $(Builder.node('a', {className: 'next', href: 'javascript: void(0);'})).hide()
				.observe('click', (function(e) { e.stop(); this.displayNext(); }).bind(this));
			this.comment = $(Builder.node('div', {className: 'comment'}));
			this.close = $(Builder.node('a', {className: 'close', href: 'javascript: void(0);', title: MediaFeatureOptions.closeButtonTitle}))
				.observe('click', (function(e) { e.stop(); this.hide(); }).bind(this));
			
			// Generate products panel
			this.productItems = $(Builder.node('ul'));
			this.products = $(Builder.node('div', {className: 'products'}, [
				Builder.node('div', {className: 'corner'}),
				this.productItems
			]));
			
			// Generate dialog/wrapper
			this.wrapper = $(Builder.node('div', {className: 'image-wrapper'}, [
				Builder.node('div', {className: 'image'}, [
					this.loading, this.img, this.prev, this.next
				]),
				Builder.node('div', {className: 'info'}, [
					this.comment, this.close, Builder.node('div', {'style': 'clear: both;'})
				]),
				Builder.node('div', {className: 'product-container'}, [
					this.products
				])
			]));
			/*	.observe('click', (function(e) { e.stop(); }).bind(this));*/
			this.dialog = $(Builder.node('div', {className: 'media-dialog'}, [ this.wrapper ])).hide()
				.observe('click', (function(e) { this.hide(); }).bind(this));
			body.appendChild(this.dialog);
		},
		
		// Show Popup
		show: function(srcElement, imageSet) {
			
			this.imageSetTitle = srcElement.title;
			this.imageSet = imageSet;
			
			// Update overlay size
			this.overlay.setStyle({ height: this.getPageHeight() + 'px' });
			new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: MediaFeatureOptions.overlayOpacity });
			
			// Show dialog centered
			this.resetDialog();
			this.dialog.show();
			this.displayImage(0);
		},
		
		// Reset dialog to defaults
		resetDialog: function() {
			this.wrapper.setStyle({width: MediaFeatureOptions.defaultWidth + 'px', height: MediaFeatureOptions.defaultHeight + 'px'});
			this.dialog.setStyle({top: (document.viewport.getScrollOffsets().top + 20) + 'px'});
		},
		
		// Display a particular image
		displayImage: function(idx) {
			this.imageIdx = idx;
			
			// Update controls
			this.img.hide();
			this.prev.hide();
			this.next.hide();
			this.products.hide();
			this.loading.show();
			this.updateComment();
			
			// Preload image
			var imgPreloader = new Image();
			imgPreloader.onload = (function(){
				this.img.src = imgPreloader.src;
				this.resizeDialog(imgPreloader.width, imgPreloader.height);
			}).bind(this);
			imgPreloader.src = this.imageSet[idx].src;
		},
		
		displayPrev: function() {
			if (this.imageIdx - 1 >= 0) {
				this.displayImage(this.imageIdx - 1);
			}
		},

		displayNext: function() {
			if (this.imageIdx + 1 < this.imageSet.length) {
				this.displayImage(this.imageIdx + 1);
			}
		},
		
		// Update title comment
		updateComment: function() {
			var idx = this.imageIdx, title = this.imageSetTitle || '';
			title = this.imageSet[idx].title || title;
			
			if (this.imageSet.length > 1) {
				this.comment.innerHTML = title + ': Page ' + (idx + 1) + ' of ' + this.imageSet.length;
			} else {
				this.comment.innerHTML = title;
			}
		},
		
		// Resize the popup dialog
		resizeDialog: function(width, height) {
			if (this.wrapper.getWidth() != width && this.wrapper.getHeight() != height) {
				new Effect.Morph(this.wrapper, {
					style: {
						width: width + 'px',
						height: height + 'px'
					},
					duration: this.resizeDuration, 
					queue: 'front',
					afterFinish: (function(){ this.showImage(); }).bind(this) 
				});
			}
		},
		
		// Show image
		showImage: function() {
			this.loading.hide();
			
			// Show navigation
			var imageCount = this.imageSet.length;
			if (imageCount > 1) {
				if (this.imageIdx > 0) { this.prev.show(); }
				if (this.imageIdx < (imageCount - 1)) { this.next.show(); }
			}
			
			// Make main image fade in
			new Effect.Appear(this.img, { 
				duration: this.resizeDuration, 
				queue: 'end', 
				afterFinish: (function(){ this.updateProducts(); }).bind(this)
			});
		},
		
		// Show products
		updateProducts: function() {
			this.products.setStyle({left: '-' + this.products.getWidth() + 'px'});
			this.productItems.innerHTML = '';
			
			// Create product list
			var currentImage = this.imageSet[this.imageIdx];
			if (currentImage.products && currentImage.products.length > 0) {
				$A(currentImage.products).each(function(item, idx) {
					this.productItems.appendChild(Builder.node('li', [
						item.title, 
						Builder.node('br'),
						Builder.node('a', {href: item.href}, MediaFeatureOptions.productLinkText)
					]));
				}, this);
				
				this.products.show();
				new Effect.Morph(this.products, {
					style: {
						left: '0px'
					},
					duration: this.resizeDuration, 
					queue: 'end'
				});
			}
		},
		
		// Hide popup
		hide: function() {
			if (this.products.visible()) {
				
			}
			this.dialog.hide();
			new Effect.Fade(this.overlay, { duration: this.overlayDuration });
		},
		
		// Based off Lightbox v2.04 by Lokesh Dhakar - http://www.lokeshdhakar.com
		getPageHeight: function() {
			var yScroll, windowHeight;
			
			if (window.innerHeight && window.scrollMaxY) {	
				yScroll = window.innerHeight + window.scrollMaxY;
			} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
				yScroll = document.body.scrollHeight;
			} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
				yScroll = document.body.offsetHeight;
			}
			
			if (self.innerHeight) {	// all except Explorer
				windowHeight = self.innerHeight;
			} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
				windowHeight = document.documentElement.clientHeight;
			} else if (document.body) { // other Explorers
				windowHeight = document.body.clientHeight;
			}	
			
			// for small pages with total height less then height of the viewport
			if(yScroll < windowHeight){
				return windowHeight;
			} else { 
				return yScroll;
			}
		}
	};
})();