// Gallery, Copyright (c) 2009 Rise Up LLC (http://www.riseupdesign.com/), Requires mootools-1.2-core.js (http://mootools.net/)
var Gallery = new Class({
    initialize: function(properties){
        this.properties.extend(properties);
        this.imageContainer = $(properties.image_container);
        this.controlContainer = $(properties.control_container);
        this.dataCallback = properties.data_callback;
        this.stopped = !properties.stopped;

        if ($defined(this.controlContainer)) {
        	this.draw();
        }
        this.togglePlayStop();
    },
    loaded: 0,
    imageContainer: null,
    image1: null,
    image2: null,
    imageAssets: null,
    currentSlide: null,
    controls: null,
    slideControls: null,
    slides: null,
    controlContainer: null,
    stopped: false,
    slideChanger: null,
    loading: null,
    properties: new Hash({
    	slideInterval: 4000,
    	duration: 500,
    	transition: Fx.Transitions.Sine.easeOut,
    	slideSectionStyle: {
    		'clear': 'both',
			'margin': 3,
			'float': 'left',
			'position': 'relative',
			'left': '50%',
			'text-align': 'left'
    	},
    	slideStyle: {
	    	'display': 'block',
	    	'float': 'left',
	    	'position': 'relative',
	    	'left': '-50%',
	    	'height': 18,
	    	'width': 18,
	    	'background-color': '#8b8a8a',
	    	'color': 'white',
	    	'margin': 3,
	    	'line-height': '24px',
	    	'font-size': '11px',
	    	'cursor': 'pointer'
    	},
    	selectedSlideStyle: {
    		'backgroundColor': '#f47700'
    	},
    	loadingImage: '/images/loading.gif',
    	loadingStyle: {
    		'position': 'absolute',
	    	'top': 200,
	    	'left': 400,
	    	'width': 32,
	    	'height': 32
    	},
    	imageStyle: {
    		'position': 'absolute',
	    	'top': 0,
	    	'left': 0
    	},
    	slideControlsStyle: {
    		'float': 'left',
    		'position': 'relative',
    		'top': 1,
    		'left': '-50%'
    	},
    	slideControlsImageStyle: {
    		'verticalAlign': 'middle',
    		'marginLeft': 5,
    		'marginRight': 5,
	    	'cursor': 'pointer'
    	},
    	slideBackImage: '/images/back.png',
    	slideNextImage: '/images/next.png',
    	slidePlayImage: '/images/play.png',
    	slideStopImage: '/images/stop.png'
    }),
	draw: function(controlContainer) {
    	if ($defined(controlContainer)) {
    		this.controlContainer = $(controlContainer);
    	}
    	if (!$defined(this.controls)) {
    		this.controls = new Element('div');
    	}
    	if (!$defined(this.imageContainer)) {
    		this.imageContainer = new Element('div');
    		this.imageContainer.inject(document.body);
    	}
    	if (!$defined(this.slides)) {
    		this.initSlides();
    	}
	},
	initSlides: function() {
    	if (!$defined(this.controls)) {
    		this.controls = new Element('div');
    	}
    	if ($defined(this.slides)) {
    		this.slides.dispose();
    	}
		this.slides = new Element('div', {'styles': this.properties.slideSectionStyle});
		
		if (this.properties.pdf) {
			var url = '/images/projects/'+this.properties.pdf;
			var pdf = new Element('img', {
				'id': 'project_pdf',
				'src': '/images/pdf.png',
				'styles': this.properties.slideStyle,
				'events': {
					'click': function() {
						window.open(url);
					}
				}
			});
			pdf.inject(this.slides);
		}
		
		var slide = null;
		var first = null;
		var images = new Array();
		for (var i = 0; i < this.properties.data.length; i++) {
			slide = new Element('a', {
				'id': 'id_slide_'+i,
				'html': '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
				'title': 'Slide '+(i+1),
				'styles': this.properties.slideStyle,
				'events': {
					'click': this.slideEvent(i)
				}
			});
			slide.inject(this.slides);
			images[i] = this.properties.data[i].image;
		}
		this.slides.inject(this.controls);
		
		var __object = this;
		this.imageAssets = new Asset.images(images, {
			onProgress: function(counter, index) {
				__object.loaded = counter;
				if (this.currentSlide == index) {
					this.setSlide(index);
				}
			}
		});

    	if ($defined(this.controlContainer)) {
    		this.controls.inject(this.controlContainer);
    	} else {
    		this.controls.inject(document.body);
    	}

		this.setSlide(0);
		this.addSlideControls();
	},
	addSlideControls: function() {
		if ($defined(this.slideControls)) {
			this.slideControls.dispose();
		}
		this.slideControls = new Element('div', {
			'id': 'slideshow_controls',
			'styles': this.properties.slideControlsStyle
		});
		var back = new Element('img', {
			'id': 'slideshow_back',
			'src': this.properties.slideBackImage,
			'alt': '&lt;&lt;',
			'title': 'Previous Slide',
			'styles': this.properties.slideControlsImageStyle,
			'events': {
				'click': this.slideShowEvent('back')
			}
		});
		var next = new Element('img', {
			'id': 'slideshow_next',
			'src': this.properties.slideNextImage,
			'alt': '&gt;&gt;',
			'title': 'Next Slide',
			'styles': this.properties.slideControlsImageStyle,
			'events': {
				'click': this.slideShowEvent('next')
			}
		});
		if (this.stopped) {
			var play = new Element('img', {
				'id': 'slideshow_play_stop',
				'src': this.properties.slidePlayImage,
				'alt': 'Play',
				'title': 'Start Slideshow',
				'styles': this.properties.slideControlsImageStyle,
				'events': {
					'click': this.slideShowEvent('play')
				}
			});
		} else {
			var play = new Element('img', {
				'id': 'slideshow_play_stop',
				'src': this.properties.slideStopImage,
				'alt': 'Stop',
				'title': 'Stop Slideshow',
				'styles': this.properties.slideControlsImageStyle,
				'events': {
					'click': this.slideShowEvent('play')
				}
			});
		}
			
		back.inject(this.slideControls);
		play.inject(this.slideControls);
		next.inject(this.slideControls);

		this.slideControls.inject(this.slides);
	},
	togglePlayStop: function() {
		if (this.stopped) {
			this.slideChanger = this.nextSlide.periodical(this.properties.slideInterval, this);
			this.stopped = false;
		} else {
			$clear(this.slideChanger);
			this.stopped = true;
		}
		this.addSlideControls();
	},
	nextSlide: function() {
		if (this.currentSlide == (this.imageAssets.length-1)) {
			this.setSlide(0);
		} else {
			this.setSlide(this.currentSlide+1);
		}
	},
	backSlide: function() {
		if (this.currentSlide == 0) {
			this.setSlide(this.imageAssets.length-1);
		} else {
			this.setSlide(this.currentSlide-1);
		}
	},
	slideShowEvent: function(actionName) {
		var __object = this;
		if (actionName == 'play') {
			return function(event) {
				__object.togglePlayStop();
			};
		} else {
			if (actionName == 'back') {
				return function(event) {
					__object.backSlide();
				};
			} else {
				if (actionName == 'next') {
					return function(event) {
						__object.nextSlide();
					};
				}
			}
		}
	},
	setSlide: function(slideIndex) {
		if (!this.stopped) {
			$clear(this.slideChanger);
		}
		if ($defined(this.currentSlide)) {
			var s = $('id_slide_'+this.currentSlide);
			if ($defined(s)) s.setStyles(this.properties.slideStyle);
		}
		var s = $('id_slide_'+slideIndex);
		if ($defined(s)) {
			s.setStyles(this.properties.selectedSlideStyle);
			var slideObj = this.properties.data[slideIndex];
			this.dataCallback(slideObj.data);
	
			this.currentSlide = slideIndex;
	
			if (this.loaded < slideIndex) {
				if (!$defined(this.loading)) {
					this.loading = new Element('img', {
						'src': this.properties.loadingImage,
						'styles': this.properties.loadingStyle,
						'alt': 'Loading...'
					});
				}
				this.loading.inject(this.imageContainer);
			} else {
				if (!$defined(this.image1) && !$defined(this.image2)) {
					this.image1 = this.imageAssets[slideIndex];
					this.image1.setStyles(this.properties.imageStyle);
					this.image1.inject(this.imageContainer);
				} else {
					if (!$defined(this.image1)) {
						if (this.image2 != this.imageAssets[slideIndex]) {
							this.image1 = this.imageAssets[slideIndex];
							this.image1.setStyles(this.properties.imageStyle);
							this.image1.setStyle('opacity', 0);
							this.image1.inject(this.imageContainer);
							var __object = this;
							var fadeOut = new Fx.Morph(this.image2, {
								duration: __object.properties.duration, 
								transition: __object.properties.transition,
								link: 'cancel',
								onComplete: function() {
									__object.image2.dispose();
									__object.image2 = null;
								}
							});
							var fadeIn = new Fx.Morph(this.image1, {
								duration: __object.properties.duration, 
								transition: __object.properties.transition,
								link: 'cancel'
							});
							fadeOut.start({'opacity': 0});
							fadeIn.start({'opacity': 1});
						}
					} else {
						if (this.image1 != this.imageAssets[slideIndex]) {
							this.image2 = this.imageAssets[slideIndex];
							this.image2.setStyles(this.properties.imageStyle);
							this.image2.setStyle('opacity', 0);
							this.image2.inject(this.imageContainer);
							var __object = this;
							var fadeOut = new Fx.Morph(this.image1, {
								duration: __object.properties.duration, 
								transition: __object.properties.transition,
								link: 'cancel',
								onComplete: function() {
									__object.image1.dispose();
									__object.image1 = null;
								}
							});
							var fadeIn = new Fx.Morph(this.image2, {
								duration: __object.properties.duration, 
								transition: __object.properties.transition,
								link: 'cancel'
							});
							fadeOut.start({'opacity': 0});
							fadeIn.start({'opacity': 1});
						}
					}
				}
			}
		}
		if (!this.stopped) {
			this.slideChanger = this.nextSlide.periodical(this.properties.slideInterval, this);
		}
	},
	slideEvent: function(slideIndex) {
		var __object = this;
		return function(event) {
			__object.setSlide(slideIndex);
		};
	},
	dataCallback: function(data) {
		alert(data);
	}
});