var ImageViewer = {
	init : function( images, thumbnails, usedescriptions, descriptions, thumbnaildiv, imagediv, titles ){
		this.usedescriptions	= usedescriptions;
		this.usetitles			= ( titles.length > 3 );
		this.descriptions		= descriptions;
		this.titles				= titles;
		this.images 			= this.loadImages( images );
		this.thumbnails 		= this.loadImages( thumbnails );
		this.thumbnaildiv		= $( thumbnaildiv );
		this.imagediv 			= $( imagediv );
		this.activeindex		= 0;
		this.displayImages( this.thumbnaildiv, this.thumbnails );
		this.addEventHandlers( $$( "div#" + this.thumbnaildiv.id + " img" ) );
		this.showImage( -1 );
	},
	addEventHandlers : function( elements ){
		elements.each(
			function( item, index ){
				item.observe( "mouseover", function(){
					new Effect.Opacity( item.id, { duration: 0.25, from: 0.2, to: 1 } );
				} );
				item.observe( "mouseout", function(){
					new Effect.Opacity( item.id, { duration: 0.25, from: 1, to: 0.2 } );
				} );
				item.observe( "click", function(){
					ImageViewer.showImage( index );
				} );
				item.setStyle( { cursor: "pointer" } );
			}
		);
	},
	displayImages : function( div, images ){
		images.each(
			function( item, index ){
				new Insertion.Bottom( div, '<img id="' + div.id + index + '" src="' + item.src + '" alt="" style="visibility:hidden" />' );
				var tmp = $( div.id + index );
				tmp.setStyle( { opacity: 0.2, visibility: "visible" } );				
			}
		);
	},
	loadImages : function( arrImages, arrDescriptions ){
		var ret = [];
		arrImages.each(
			function( item, index ){
				var tmp = new Image();
				tmp.src	= item;
				tmp.alt	= "";
				ret[index] = tmp;
			}
		);
		return ret;
	},
	showImage : function( index ){
		var descriptions= this.descriptions;
		var titles		= this.titles;
		if( index != this.activeindex && index != -1 ){			
			var div 		= this.imagediv;
			var activeindex	= this.activeindex;
			
			if( this.usetitles == true ){							
				$( "title-" + div.id + activeindex ).remove();
			}
												
			if( this.usedescriptions == true ){							
				$( "desc-" + div.id + activeindex ).remove();
			}
			new Insertion.Top( div, '<img id="' + div.id + index + '" src="' + this.images[index].src + '" alt="" style="width:550px;height:370px;position:absolute;" />' );
			new Effect.Opacity( $( div.id + activeindex ), { 
								  duration: 0.5,
								  from: 1,
								  to: 0, 
								  afterFinish: function(){
								     $( div.id + activeindex ).remove();
								  } 
			} );
			this.activeindex = index;
			
			if( this.usetitles == true ){							
				new Insertion.Bottom( div, '<div class="wb-title" id="title-' + div.id + index + '">' + titles[index] + '</div>' );
			}
									
			if( this.usedescriptions == true ){
				new Insertion.Bottom( div, '<div class="wb-desc" id="desc-' + div.id + index + '">' + descriptions[index] + '</div>' );
			}		
		}
		if( index == -1 ){
			
			new Insertion.Top( this.imagediv, '<img id="' + this.imagediv.id + this.activeindex + '" src="' + this.images[this.activeindex].src + '" alt="" style="width:550px;height:370px;position:absolute;" />' );
			
			if( this.usedescriptions == true ){
				new Insertion.Bottom( this.imagediv, '<div class="wb-title" id="title-' + this.imagediv.id + this.activeindex + '">' + titles[0] + '</div>' );
			}
						
			if( this.usedescriptions == true ){		
				new Insertion.Bottom( this.imagediv, '<div class="wb-desc" id="desc-' + this.imagediv.id + this.activeindex + '">' + descriptions[0] + '</div>' );
			}		
		}
	}

};