/*
	espiSlideshow.js
	created on 2009/03/12 by c
	edited on 2009/04/15
	v0.03
	using mootools 1.2 - moooowwww. : ).
	default-zIndex-range: 1000+
*/

var espiSlideshow = new Class({
	
	getOptions: function(){
		return {
			current: 0,
			zOffset: 1000,
			flashplayer: 'http://spiekermannpartners.com/_static/_flash/flvplayer.swf',
			color: '#000',
			defaultcolor: '#757575',
			blending: 500,
			border: '7px',
			width: 632,
			height: 438,
			thumbnails: true,
			buttonHeight: 63,
			buttonWidth: 36
		}
	},
	
	
	initialize: function( slideshowContainer, options ){

		this.isOnButton = false;
		this.dataArray = new Array;
		this.dataTypeArray = new Array;
		this.imageContainer = new Array;
		this.imageObject = new Array;
		this.buttonLeft = 0;
		this.buttonRight = 0;
		
		this.setOptions(this.getOptions(), options);

		// hole entsprechende Container
		this.imageStage = $( slideshowContainer ).getElement("div.imageStage");
		this.thumbStage = $( slideshowContainer ).getElement("div.thumbStage");
		this.thumbContainer = $( slideshowContainer ).getElements( "a.thumbContainer" );
	
		// verstecke ggf. Thumbnails
		if ( !this.options.thumbnails ) {
			this.thumbStage.setStyle( "display", "none" );
		}
		
		// verarbeite Thumbnails
		this.fetchDataFromThumbs( );
		this.createImageContainer( );
		this.setCurrentThumb( this.options.current );
		
		// starte Preloading
		this.preloadImages( 0 );
		
		// erzeuge Buttons
		this.injectButtons( );
		
	},
	
	injectButtons: function( ) {
		
		// erzeuge Buttons	
		this.buttonLeft = new Element('a', { id: "prevLink", href: "javascript:;" } );
		this.buttonRight = new Element('a', { id: "nextLink", href: "javascript:;" } );
		
		// formatiere Buttons
		this.buttonLeft.setStyles( {
			'background-color': this.options.defaultcolor,
			position: 'absolute',
			'margin-top': ( this.options.height.toInt() - this.options.buttonHeight.toInt( ) ) / 2,
			width: this.options.buttonWidth,
			height: this.options.buttonHeight,
			'z-index': this.options.zOffset+3,
			'display': 'none'
		});
				
		this.buttonRight.setStyles( {
			'background-color': this.options.defaultcolor,
			position: 'absolute',
			'margin-left': this.options.width - this.options.buttonWidth,
			'margin-top': ( this.options.height.toInt() - this.options.buttonHeight.toInt( ) ) / 2,
			width: this.options.buttonWidth,
			height: this.options.buttonHeight,
			'z-index': this.options.zOffset+3,
			'display': 'none'
		});
		
		// Events auf Button
		this.buttonLeft.addEvents({
			
			'mouseover': function() {
				this.buttonLeft.setStyle('background-color', this.options.color);
				this.isOnButton = true;
			}.bind(this, this.buttonLeft),
			
			'mouseout': function() {
				this.buttonLeft.setStyle('background-color', this.options.defaultcolor );
				this.isOnButton = false;
			}.bind(this, this.buttonLeft),
			
			'click': function() {
				this.previousImage();
			}.bind(this, this.buttonLeft)
			
		});

		
		this.buttonRight.addEvents({
							
			'mouseover': function() {
				this.buttonRight.setStyle('background-color', this.options.color);
				this.isOnButton = true;
			}.bind(this, this.buttonRight),
			
			'mouseout': function() {
				this.buttonRight.setStyle('background-color', this.options.defaultcolor );
				this.isOnButton = false;
			}.bind(this, this.buttonRight),

			'click': function() {
				this.nextImage();
			}.bind(this, this.buttonRight)
		});
		
		// Buttons einfügen
		this.buttonLeft.inject( this.imageStage );
		this.buttonRight.inject( this.imageStage );	
	
		// Events für Stage
		this.imageStage.addEvents({
		
			'mouseover': function() {
				this.buttonLeft.setStyle("display", "block");
				this.buttonRight.setStyle("display", "block");
			}.bind(this, this.imageStage),
			
			'mouseout': function() {
				this.buttonLeft.setStyle("display", "none");
				this.buttonRight.setStyle("display", "none");
			}.bind(this, this.imageStage),
			
			'click': function() {
				if ( !this.isOnButton && this.dataTypeArray[this.options.current] == 1 ) {
					this.nextImage( );
				}
			}.bind(this, this.imageStage)
		
		});
	},	
	
	fetchDataFromThumbs: function( ) {
		
		this.thumbContainer.each( function( element, i ) {
			
			this.dataArray.push( element.href );
			if ( element.href.substr( element.href.length-3 ) == 'fla' ) {
				// movie
				this.dataTypeArray.push( 2 );		
			} else if ( element.hasClass('vimeo') ) {
				this.dataTypeArray.push( 3 );
			} else {
				// image
				this.dataTypeArray.push( 1 );
			}
			
			// Link entfernen
			element.href="javascript:;";
			
			// onClick
			element.addEvents({
				'click':function(){
					this.showImage(i);				 
				}.bind(this,element,i),
				
				'mouseover': function() {
					if ( !element.hasClass('current') ) {
						this.setActiveThumb( element );
					}
				}.bind(this,element,i),
				
				'mouseout': function() {
					if (!element.hasClass('current') ) {
						this.setInactiveThumb( element );
					}
				}.bind(this,element,i)
			});

			
		}, this);	
	},

	createImageContainer: function( ) {
	
		// erzeuge imageContainer
		this.dataArray.each( function( item, index ) {

			var tmp = new Element( 'div', { id: "image"+index });
			tmp.addClass( 'loading' );
			tmp.setStyle( 'z-index', this.options.zOffset+2 );
			tmp.setStyle( 'position', 'absolute' );
			tmp.setStyle( 'margin', '0' );
			
			if ( index != this.options.current )
				tmp.setStyle( 'display', 'none' );
			
			tmp.inject( this.imageStage );
			
			this.imageContainer.push( tmp );	
		}, this );
	},

	preloadImages: function( imageNumber ) {
	
		if ( imageNumber >= 0 && imageNumber < this.dataArray.length ) {
	
			var images = [this.dataArray[imageNumber]];
			
			// falls Bild	
			if ( this.dataTypeArray[imageNumber] == 1 ) {
				var loader = new Asset.images( images, {
					
					onComplete: function(){
					 this.completeLoadImage( imageNumber )
					}.bind(this, loader),
					
					onError: function(){
				 		//alert("fehler beim laden von" + imageNumber );
					}
				});
			// vimeo
			} else if ( this.dataTypeArray[imageNumber] == 3 ) {
				this.completeLoadImage( imageNumber );
			// Video
			} else if ( this.dataTypeArray[imageNumber] == 2 ){
				this.completeLoadImage( imageNumber );
			}
		}
	},
	
	completeLoadImage: function( imageNumber ) {
	
		this.imageContainer[imageNumber].removeClass('loading');

		// falls Video
		if ( this.dataTypeArray[imageNumber] == 2 ) {
			
			var fla = this.dataArray[imageNumber].substring(0, this.dataArray[imageNumber].indexOf('?') );
			var width = this.dataArray[imageNumber].substring( this.dataArray[imageNumber].indexOf('?')+7, this.dataArray[imageNumber].indexOf('&') );
			var height = this.dataArray[imageNumber].substring( this.dataArray[imageNumber].indexOf('&')+8, this.dataArray[imageNumber].indexOf('&', this.dataArray[imageNumber].indexOf('&')+1 ) );
			var img = this.dataArray[imageNumber].substring( this.dataArray[imageNumber].lastIndexOf('&')+5 );
			
			var tmpImage = new Element('img',{src: img, width: width, height: height });
			
			var tmpMovie = new Swiff(this.options.flashplayer, {
    			width: width,
    			height: height,
    			params: {
        			allowFullScreen: 'true',
        			wmode: 'opaque',
       				bgcolor: '#CCCCCC'
   				 },
    			vars: {
        			file: fla,
        			image: img
        		}
			});
			
			this.imageObject.push( tmpImage );
			tmpMovie.inject( this.imageContainer[imageNumber] );
		
		// falls vimeo	
		} else if ( this.dataTypeArray[imageNumber] == 3 ) {
			
			var vimeoid = this.dataArray[imageNumber].substring( this.dataArray[imageNumber].lastIndexOf('/')+1 );
			var vimeoColor = this.options.color.substring(1);
			
			var tmpContainer = new Element('div');
			tmpContainer.set('html', '<object width="' + this.options.width + '" height="' + this.options.height + '"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=' + vimeoid + '&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=' + vimeoColor + '&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=' + vimeoid + '&amp;server=vimeo.com&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=' + vimeoColor + '&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="' + this.options.width + '" height="' + this.options.height + '"></embed></object>');
			this.imageObject.push( tmpContainer );
			tmpContainer.inject( this.imageContainer[imageNumber] );

			
		// falls Bild	
		} else {
			
			var tmpImage = new Element( 'img',{src: this.dataArray[imageNumber]} );
			
			this.imageObject.push( tmpImage );
			tmpImage.inject( this.imageContainer[imageNumber] );
	
		}
				
		this.imageStage.removeClass( 'loading' );
		this.preloadImages( imageNumber+1 );
	},
	
	nextImage:function( ) {
		var tmp = this.options.current+1;
		if ( this.options.current >= this.dataArray.length ) {
			tmp = 0;
		}
		this.showImage(tmp);
	},
	
	previousImage:function() {
		var tmp = this.options.current-1;
		if ( this.options.current < 0 ) {
			tmp = this.dataArray.length-1;
		}
		this.showImage(tmp);
	},
	
	showImage: function( imageNumber ) {
		
		var newNumber;
		
		if ( imageNumber < 0 ) {
			newNumber = this.dataArray.length-1;
		} else if ( imageNumber >= this.dataArray.length ) {
			newNumber = 0;
		} else {
			newNumber = imageNumber;
		}  
		
		if ( newNumber != this.options.current ) {
			
			// container der bildgroeße anpassen
			
			if ( $chk( this.imageObject[newNumber] ) ) {
				this.imageContainer[newNumber].setStyle("width", this.imageObject[newNumber].width );
				this.imageContainer[newNumber].setStyle("height", this.imageObject[newNumber].height );				
			}

			var oldImage = this.imageContainer[this.options.current]; 
			var newImage = this.imageContainer[newNumber];
						
			oldImage.setStyle( "z-index", this.options.zOffset+2 );
			newImage.setStyle( "z-index", this.options.zOffset+1 );		
			newImage.setStyle( "display", "block" );
			
			this.options.current = newNumber;
			this.setCurrentThumb( newNumber );
			
			// stoppe tweens
			if ( $chk(myFx) ) {
				myFx.stop();
				myFx2.stop();
			}
			
			// starte tween		
		 	var myFx = new Fx.Tween( oldImage, {duration: this.options.blending } );
			var myFx2 = new Fx.Tween( newImage, {duration: this.options.blending } );
				
			myFx.start("opacity", 0);
			myFx2.start("opacity", 1);
			
						
		}
	},
	
	setCurrentThumb: function( imageNumber ) {
	
		this.thumbContainer.each( function(element, i) {
			element.removeClass("current");
			element.setStyle("border", "0");
			element.getChildren()[0].setStyle("margin", "0");
		});
		
		this.thumbContainer[imageNumber].addClass("current");
		this.thumbContainer[imageNumber].setStyle('border', this.options.border + ' solid ' + this.options.color );
		this.thumbContainer[imageNumber].getChildren()[0].setStyle('margin', '-' + this.options.border );
	},

	setActiveThumb: function( el ) {
		el.setStyle('border', this.options.border + ' solid ' + this.options.color );
		el.getChildren()[0].setStyle('margin', '-'+this.options.border );
	},
	
	setInactiveThumb: function( el ) {
		el.setStyle('border', 'none' );
		el.getChildren()[0].setStyle('margin', '0' );
	}
	
});

espiSlideshow.implement(new Options);