// JavaScript Document
// mediaSlide.js           
// Tim Bijkerk, Jan Jaap Wennekes             
// Copyright 2009 - Wennet Webdesign - http://www.wennet.nl/

var mediaSlide = new Class({			 
	Implements: [Options],

	options: {	
		elements 		: '.slideshow img',
   		mseconds 		: '4500',
    	transition_ms 	: '800'
	},
    
    media			: [],
	count			: null,
	current			: 0,	
	
	initialize: function(options){
		this.setOptions(options);
		this.options.elements = $$(this.options.elements);
		
		this.options.elements.each(function(el){
	       	this.addImage(el);
		}.bind(this));
				
		this.setImageTimer();
	},
	
	addImage:	function(img){
 		img.set('opacity', 0);
        img.setStyles({
        	'position'	: 'absolute',
        	'display'	: 'block'
        });
        this.media.extend([img]);
        this.count = this.options.elements.length;
        
        return this.media.indexOf(this.media.getLast());
	},
	
	setImageTimer: function(){
		$clear(this.timer);
		this.imageTimer();
		this.timer = this.imageTimer.periodical(this.options.mseconds, this);
	},
	
	imageTimer: function(){
		if (this.count > 0){
			this.fadeAllOut();
			this.fadeInCurrent();
		}
	},
	
	fadeAllOut:	function(){
		this.media.each(function(el){
			el.set('tween', {duration: this.options.transition_ms});
	        if (el.get('opacity') != 0){
	            el.tween('opacity', 0);				
	        }
		}.bind(this));
	},
	
	fadeInCurrent:	function(){
			
		this.media[this.current].tween('opacity', 1);
		this.current = (this.current+1 < this.count) ? this.current+1 : 0;
	}
});


var mediaGallery = new Class({			 
	Extends:	mediaSlide,
	
	initialize: function(options){
		this.parent(options);
		this.options.container = $$(this.options.container)[0];
		this.options.thumbs = $$(this.options.thumbs);
		this.addThumbs();
		this.setImageTimer();
		
		window.addEvent('load', function(){
			this.setContainerHeight();
		}.bind(this));
	},
	
	addThumbs:	function(){
		this.options.thumbs.each(function(el){
			var url = el.get('src').substr(0, el.get('src').indexOf('&t='));
			var img = new Element('img', {'src' : url + '&t=fullimg&dir=albums'}).injectBottom(this.options.container);
			this.options.elements.extend([img]);
			var id = this.addImage(img);
			
			el.addEvent('mouseenter', function(){
				this.current = id;
				this.viewImage();
			}.bind(this));
		}.bind(this));	
		
		
		
		this.options.thumbs.addEvent('mouseleave', function(){
			this.setImageTimer();
		}.bind(this));	
	},
	
	viewImage:	function(){	
		$clear(this.timer);
		
		this.fadeAllOut();
		this.fadeInCurrent();
	},
	
	
	imageTimer:	function(){
        this.count = this.options.elements.length;
		
		this.parent();
	
		this.options.container.setStyle
	},
	
	setContainerHeight: function(){
		var largest = 0;
		
		this.media.each(function(img){
			var dimensions = img.measure(function(){
			    return this.getDimensions();
			});
			
			largest = dimensions.height > largest ? dimensions.height : largest;
		}.bind(this));
		
		this.options.container.setStyle('height', largest);
	}
});