/**
	 *
	 */
	function updatePreview(id) 
	{
		if (typeof film_strip == 'object'){
			var element = film_strip[id];
		
			var image_width = 100;
			var image		= element[0];
			var title		= element[1];
			var description = element[2];
			var width		= element[3];
			var height		= parseFloat(element[4]) + 28;
			var count		= element[5];
			var siteurl		= element[6];
			
			if (film_strip){
				image = image.substring(image.lastIndexOf('/') + 1);
			}
			
			// Create new a link and assign the new image to it
			var a = new Element('a', {
				'href': '#',
				'id': 'previewimage' 
			});
			a.observe('click', function(event) { 
				window.open(siteurl);
				event.stop();
			});
			
			// Create new image
			var img = new Element('img', {
				'src': '/assets/file_uploads/m_images_upfile/280x280/' + image
			});
			a.insert(img);
			
			var div = $$('div.filmstrip div.preview')[0];
			div.down('div.image').update(a);
			div.down('div.info h3').update(title);
			div.down('div.info div').update(description);
		
			if (window.selectedThumbnailId){
				$('thumbnail-' + selectedThumbnailId).removeClassName('selected')
			}
			$('thumbnail-' + id).addClassName('selected')
			selectedThumbnailId = id
			
			// Move the thumbnail slide to the center
			var stripWidth = div.getWidth();
			var itemWidth = $('thumbnail-' + id).getWidth();
			var reduction = (stripWidth / 2) - (itemWidth / 2)
			$('strip').scrollLeft = (count - 1) * (image_width + 16) - reduction
		
		
		// NON TEMPLATE
		} else {
			var element = gallery[id];
			
			var image_width = 100;
			var image		= element[0];
			var title		= element[1];
			var description = element[2];
			var width		= element[3];
			var height		= parseFloat(element[4]) + 28;
			var count		= element[5];
			var siteurl		= element[6];
	
			// Create new image
			var newImage = document.createElement('img');
			newImage.setAttribute("src", '/assets/file_uploads/m_images_upfile/280x280/' + image);
			
			// Create new a link and assign the new image to it
			var newLink = document.createElement('a');
			newLink.setAttribute("href", "#");
			Event.observe(newLink, 'click', function(event) { window.open(siteurl); Event.stop(event); });
			newLink.setAttribute("id", "previewimage");
			newLink.appendChild(newImage);
			
			$('imagediv').innerHTML = '';
			$('imagediv').appendChild(newLink);
			$('titlediv').innerHTML = title;
			$('descriptiondiv').innerHTML = description;// + ' - ' + siteurl;
		
			if (window.selectedThumbnailId){
				$('thumbnail-' + selectedThumbnailId).removeClassName('selected')
			}
			$('thumbnail-' + id).addClassName('selected')
			selectedThumbnailId = id
			
			var stripWidth = $('preview').getWidth();
			var itemWidth = $('thumbnail-' + id).getWidth();
			var reduction = (stripWidth / 2) - (itemWidth / 2)
			
			$('strip').scrollLeft = (count - 1) * (image_width + 16) - reduction
		}
	}
	
	
	/**
	 *
	 */
	var slideWidth = 198; // default
	var slideIsMoving = false;
	
	document.observe("dom:loaded", function() {
		// initially hide all containers for tab content
		if($$('.featuredimages')[0] != undefined)
		{
			// calculate max height
			var maxHeight = 0;
			$$('.featuredimages .inner > ul > li').each(function(el){
				var height = el.getHeight();												 
				if(height > maxHeight)
				{
					maxHeight = height;
				}
			});
			
			$$('.featuredimages')[0].setStyle({height: maxHeight+'px'});
			$$('.featuredimages .inner')[0].setStyle({height: maxHeight+'px'});
			
			maxSlides = $$('.featuredimages .inner > ul > li').size();
			curSlide  = 1;
			// calculate slide width
			slideWidth = $$('.featuredimages .inner > ul > li')[0].getWidth();
			
			$$('a.prev').each(function(element){
				element.observe('click', function(event){ moveSlide(1); Event.stop(event);});
			});
			
			$$('a.next').each(function(element){
				element.observe('click', function(event){ moveSlide(-1); Event.stop(event);});
			});
		}
	});
	
	
	/**
	 *
	 */
	function moveSlide(direction)
	{
		if(slideIsMoving){
			return false;
		}
		
		if(direction == 1 && curSlide == 1){
			return false;
		}
		
		if(direction == -1 && curSlide == maxSlides){
			return false;
		}
		
		slideIsMoving = true;
		var holder = $$('.featuredimages .inner > ul')[0];
		new Effect.Move(holder, { x: slideWidth*direction, y: 0, mode: 'relative', duration: 0.4, afterFinish: function(){ slideIsMoving = false; }});
		curSlide -= direction;
	
	}
	
	/**
	 * protocycle.js - Cycle extension for Prototype JS library
	 * --------------------------------------------------------
	 *
	 * v1.0, Oct 1st 2009
	 *
	 */
	var Protocycle = Class.create({
		initialize: function(container, options) {
			
			if(container instanceof Array)
			{
				container.each(function(el){
					new Protocycle(el, options);					  
				});
				return true;
			}
			else if(typeof(container) == 'string')
			{
				new Protocycle($$(container), options);
				return true;
			}
			
			this.options = {
				fx: 'fade', // 'fade' or 'none'
				timeout: 4000, // time between slide changes (in milliseconds)
				speed: 500, // time taken to do the transition (in milliseconds)
				sync: true, // true if in/out transitions should occur simultaneously 
				containerResize: true // automatically resize container to fit largest slide 
			}
			Object.extend(this.options, options || {});  
			
			
			// automatically set timeout option if the container element has a classname of 
			// timeout[n] where n is the desired value in milliseconds
			$w(container.className).each(function(classname){
				var result = classname.match(/timeout\[([0-9]+)\]/);
				
				if(result != null)
				{
					this.options.timeout = result[1];
				}
			}.bind(this));
		  
			var slideHeight = 0; // default
			var slideWidth = 0; // default
			this.currentSlide = 0;
			
			// If the holder isnt valid then stop here
			if(!container) return false;
			
			container.setStyle({position: 'relative'});
			this.slides = container.childElements();
			this.totalSlides = this.slides.size();
				
			// Work out the dimensions of the biggest slide, also hides all but the first slide
			var first = true;
			this.slides.each(function(el){
					
				var dimensions = el.getDimensions();
	
				if(dimensions.height > slideHeight) slideHeight = dimensions.height;
				if(dimensions.width > slideWidth) slideWidth = dimensions.width;
				
				if(!first)
				{
					el.setStyle({display: 'none'});
				}
				first = false;
				el.setStyle({position: 'absolute'});
			
			});
			
			// Automatically resize container?
			if(this.options.containerResize)
			{
				container.setStyle({height: slideHeight+'px', width: slideWidth+'px'});
			}
			
			if(this.totalSlides > 1)
			{
				new PeriodicalExecuter(function() { this.nextSlide() }.bind(this), (this.options.timeout/1000));
			}
		},
		
		nextSlide: function()
		{
			var nextSlide = this.currentSlide + 1;
			if(nextSlide >= this.totalSlides) nextSlide = 0;
		
			if(this.options.fx == 'fade'){
				var currentOpts = {from: 1.0, to: 0.0, duration: (this.options.speed/1000), afterFinish: function(effect) { effect.element.setStyle({display: 'none'}); }};
				var nextOpts = {from: 0.0, to: 1.0, duration: (this.options.speed/1000), afterSetup: function(effect) { effect.element.setStyle({display: 'block'});   }};
			
				if(this.options.sync){
					// Run both animations in parallel.
					Object.extend(currentOpts, {sync: true});  
					Object.extend(nextOpts, {sync: true}); 
					
					new Effect.Parallel([
						new Effect.Opacity(this.slides[this.currentSlide], currentOpts),
						new Effect.Opacity(this.slides[nextSlide], nextOpts)
					]);
				} else {
					// Run in and out animation after one another.
					Object.extend(currentOpts, {queue: 'end'});  
					Object.extend(nextOpts, {queue: 'end'}); 
					
					new Effect.Opacity(this.slides[this.currentSlide], currentOpts);
					new Effect.Opacity(this.slides[nextSlide], nextOpts);
				}
			} else {
				// If no fx has been set then just do a simple swap
				this.slides[this.currentSlide].setStyle({display: 'none'});
				this.slides[nextSlide].setStyle({display: 'block'});
			}
			
			this.currentSlide++;
			
			if(this.currentSlide >= this.totalSlides){
				this.currentSlide = 0;
			}
		}
	});
	
	
	/**
	 *
	 */
	Event.observe(window, "load", function() {
		new Protocycle('div.randomiser ul.holder');
	});
	
	
	/**
	 *
	 */
	document.observe("dom:loaded", function() {
		$$('div.photoPanel').each(function(container){
			container.select('img.thumb').each(function(el){
				el.observe('mouseover', function(){
					container.select('img.thumb').each(function(thumb){ thumb.removeClassName('activeThumb'); });
					el.addClassName('activeThumb');
					
					// update the large image
					container.select('img.large').each(function(large){ large.removeClassName('active'); });
					
					container.select('img#'+el.id+'Large')[0].addClassName('active');
				});
			});
		});
	});