var zSlideShow = new Class({
	Implements: [Options],
	
	options:{
		curPicId:0,
		
		autoSize:true,
			
		containerFx:{
			transition: Fx.Transitions.Quad.easeOut,
			duration: 250,
			stylesStart:{"opacity":[0,1], "display":"block"},
			stylesEnd:{"opacity":0}			
		},
		
		picFx:{
			transition: Fx.Transitions.Quad.easeOut,
			duration: 250,
			stylesStart:{"opacity":1},
			stylesEnd:{"opacity":0}
		},
		
		navLocation:"bottom"
	},

	initialize:function(optionsArg){
		this.picArray = [];
		this.picArrayPath = [];
		this.setOptions(optionsArg);

		if(this.options.container){
			this.options.autoSize=false;
			this.container = optionsArg.container
		}else{
			document.body.style.height="100%";
			document.body.style.width="100%";
			this.bg = new Element('div').set("id", "zSlideShowBackground").inject(document.body);
			this.wrapper = new Element('div').set("id", "zSlideShowWrapper").inject(document.body);
			this.container = new Element('div').set("id", "zSlideShowContainer").inject(this.wrapper);
			if(this.bg.currentStyle)
			{
				ieFilter = this.bg.currentStyle["filter"];
				this.bgAlpha = ieFilter.substring(ieFilter.length-3, ieFilter.length-1)/100;
			}else
			{
				this.bgAlpha = this.bg.getComputedStyle('opacity');
			}		
		};
		
		
		this.curImg = new Element('img').inject(this.container);
		this.caption = new Element("div").set('id', 'zSlideShowCaption').inject(this.container).appendText("Test Caption");
		this.controlContainer = new Element('div').set("id", "zSlideShowControlContainer").inject(this.container);
		if(this.options.navLocation=="top") this.controlContainer.inject(this.curImg, 'before');

		this.navButtonWrapper = new Element('div').set('id', 'zSlideShowButtonContainer').inject(this.controlContainer);
		
		this.loading = new Element('div').set("id", "zSlideShowLoading").injectInside(this.container);
		this.loading.addEvent('click', function(e){
				this.hide();
		}.bind(this));
		
		
		this.prevButton = new Element("a").set({
			"id": 'zSlideShowPrevButton',
			'href': '#'
		}).inject(this.navButtonWrapper);
		this.prevButton.addEvent('click', function(e){this.prev(); e.preventDefault();}.bind(this));
		
		this.closeButton = new Element("a").set({
			'id': 'zSlideShowCloseButton',
			'href': '#'
		}).inject(this.navButtonWrapper);
		this.closeButton.addEvent('click', function(e){this.hide(); e.preventDefault();}.bind(this));
				
		this.nextButton = new Element("a").set({
			'id': 'zSlideShowNextButton',
			'href': '#'
		}).inject(this.navButtonWrapper);
		this.nextButton.addEvent('click', function(e){this.next(); e.preventDefault();}.bind(this));
		
		this.index = new Element("div").set('id', 'zSlideShowIndex').inject(this.controlContainer);
										
		this.containerFx =  new Fx.Morph(this.container);
		this.containerFx.options.transition = this.options.containerFx.transition;	
		this.containerFx.options.duration = this.options.containerFx.duration;	
		this.containerFx.options.link="cancel";	
		this.containerFx.stylesStart=this.options.containerFx.stylesStart;
		this.containerFx.stylesEnd=this.options.containerFx.stylesEnd;
		
		this.picFx = new Fx.Morph(this.curImg);
		this.picFx.options.transition = this.options.picFx.transition;
		this.picFx.options.duration = this.options.picFx.duration;	
		this.picFx.stylesStart=this.options.picFx.stylesStart;
		this.picFx.stylesEnd=this.options.picFx.stylesEnd;
	},

	loadAllPics:function(picArrayArg){
		this.imgAsset = new Asset.images(this.picArrayPath);
	},
	
	loadPic:function(curPicId){
		this.loading.setStyles({
			"left":(this.container.getSize().x/2)-(this.loading.getSize().x/2),
			"top":(this.container.getSize().y/2)-(this.loading.getSize().y/2)
		}).morph({'opacity': 1});
		var pic = new Asset.image(this.picArrayPath[curPicId], {
			onload:function(){
				this.options.curPicId=curPicId;
				this.loading.morph({'opacity': 0})
				var indexElements = this.index.getChildren();  //bold the index elements
				indexElements.each(function(item){
					item.erase('id');
				})
				indexElements[curPicId].set('id', 'zSlideShowIndexSelected');
				
				this.options.curPicId>=this.picArrayPath.length-1?this.nextButton.set('id', 'zSlideShowNextButtonDisabled'):this.nextButton.set('id', 'zSlideShowNextButton');
				this.options.curPicId==0?this.prevButton.set('id', 'zSlideShowPrevButtonDisabled'):this.prevButton.set('id', 'zSlideShowPrevButton')
				pic.setStyles({"opacity": 0}).inject(document.body);
				this.picTween({height: pic.getSize().y, width:pic.getSize().x, src:pic.src});
				pic.dispose();
				
			}.bind(this)
		})
	},
	
	picTween:function(pic){
		
		this.picFx.start(
			this.picFx.stylesEnd
		).chain(function(){
			oldHeight = this.curImg.getSize().y;
			oldWidth = this.curImg.getSize().x;
			this.curImg.src=pic.src;
			this.controlContainer.set('morph', {duration:this.options.picFx.duration, delay:100000,
							transition:this.options.picFx.transition});
				this.controlContainer.morph({"opacity":1}).start
				//this.index.tween('opacity', 1);
			if(this.options.autoSize){
				this.container.set('morph', this.options.containerFx).morph({"width": pic.width});
				this.picFx.stylesStart = $merge(this.picFx.stylesStart, {	"height":[oldHeight, pic.height],
																			"width":[oldWidth, pic.width]
				})
			}else{
				this.containerFx.start(this.options.containerFx.stylesStart)
			}
			this.picFx.start(this.picFx.stylesStart);
			}.bind(this)
		)
	},
	
	hide:function(){	
		this.containerFx.start(
			this.containerFx.stylesEnd
		).chain(function(){
			this.container.setStyle('display','none');
		}.bind(this))
		if (this.bg) {
			this.bg.set('tween', {
				duration: this.containerFx.options.duration
			}).tween("opacity", 0);
		}
	},
	
	show:function(picArrayArg, curPicIdArg){
		if(this.bg){
			this.bg.set('tween', {duration:this.containerFx.options.duration}).tween('opacity', 0, this.bgAlpha);
			if(this.wrapper.getStyle('position')!="fixed"){
				this.wrapper.setStyle('top', $(document.body).getScroll().y);
			}
		}
		this.curImg.setStyle("opacity", 0);
		this.options.curPicId=curPicIdArg;
		this.picArrayPath = null;
		this.picArrayPath = new Array();
		for (var i = 0; i<picArrayArg.length; i++){
			this.picArrayPath.push(picArrayArg[i][0]);
		}
		this.loadAllPics(this.picArrayPath); //start caching all pictures
		this.picArray=picArrayArg;
		this.updateIndex(picArrayArg);
		this.containerFx.start(
			this.containerFx.stylesStart
		).chain(function(){
			this.loadPic(curPicIdArg);
		}.bind(this))
	},
	
	next:function(){
		if(this.options.curPicId+1<=this.picArray.length-1){
			this.options.curPicId++;
			this.loadPic(this.options.curPicId);
		}
	},
	
	prev:function(e){
		if(this.options.curPicId-1>=0){
			this.options.curPicId--;
			this.loadPic(this.options.curPicId);			
		}
	},
	
	updateIndex:function(array){
		indexElements = [];
		this.index.empty();  //reset index
		for(var i=0; i<array.length; i++){
			indexElements[i]= new Element('a').appendText(i+1).injectInside(this.index);
			indexElements[i].addEvent('click', function(e){
				this.loadPic(e.target.innerHTML-1);
			}.bind(this))
		}
		return indexElements;
	}
})