if (typeof Prototype === "undefined") {
  throw new Error("This script relies on the Prototype JavaScript framework.");
}

if(typeof Sneaky == 'undefined'){
	Sneaky = {};
}

function slideShowRequire(){
	var libraryNames = ["image_transition_manager"];
	for(var i = 0, len = libraryNames.length; i < len; i++){
		document.write('<script type="text/javascript" src="/data/js/gallery/'+libraryNames[i]+'.js"><\/script>');
	}
}
slideShowRequire();

Sneaky.SlideShow = Class.create({
	/* reference to an array of image url in json format */
	imagesUrl: null,
	/* slide show will select images based on its classname */
	imageClassName: "image",
	imageHolderId: null,
	effectName:null, 
	/* elapse time (in second) between two images */
	timeBetweenImage:null, 
	imageWidth:null, 
	imageHeight:null,
	
	imageTrasitionManager: null,
	initialize: function(imageHolderId,effectName, timeBetweenImage){
		this.effectName = effectName,
		this.timeBetweenImage = timeBetweenImage;
		this.imageHolderId = imageHolderId;
		$(imageHolderId).style.position = "relative";
		this.imageHeight = $(imageHolderId).offsetHeight;
		this.imageWidth = $(imageHolderId).offsetWidth;
	},
	
	/* Let load image before start(). We separate loadImages() from start() and from initialize() to be easy to extend later.
	 * Firstly, we will have only one way to load image: from img.specificClassname  in DOM. 
	 * we may have other different images loading scheme later. E.g. from json, from ajax 
	 * */
	loadImages: function(imageClassName){
		if(!Object.isUndefined(imageClassName)){
			if(className != null ){
				this.imageClassName = imageClassName;
			}
		}
		var imagesForSlide = $$("#" + this.imageHolderId + " img." + this.imageClassName);
		/* change image positioning to absolute so we can apply effect on two images */
		var that = this;
		imagesForSlide.each(function(img){
			img.setStyle( { position: 'absolute', left: '0px', top: '0px', opacity: '0' } );
			img.width = this.imageWidth;
			img.height = this.imageHeight;
		}.bind(this));
		
		if(imagesForSlide.length == 0){
			$(this.imageHolderId).update('There is no image for slide.');
		} else{
			this.images = imagesForSlide;
		}
	},
	
	start: function(){
		this.imageTrasitionManager = new Transition(this.imageHolderId,this.effectName,this.images,this.timeBetweenImage);
		this.imageTrasitionManager.nextImage();
	}
});