// JavaScript Document// JavaScript Document
var ImgShower = new Class({
	Implements:[Options,Events],
	
	options:{
		'delay':3000,         // set every image pauses time
		'navBnBgColor':'#fff',
		'navBnHeightLight':'#f00',
		'description':null
	},
	
	initialize: function(container, options){
		this.setOptions(options);
		this.imgContainer = container;
		this.imagesArray = container.getElements('img');
		this.navBar = null;
		this.currentImgElem = null;
		this.timer = null;
		
		this.setImgStyle(this.imagesArray);
		
		this.imgContainer.setStyles({
			'position':'relative',
			'overflow':'hidden'
		});
		
		this.addNavBar();
		this.moveTo(0);
	},
	
	setImgStyle:function(imgs){
		$each(imgs, function(item){
			item.setStyles({
				'visibility':'hidden',
				'display':'block',
				'position':'absolute',
				'border':'0',
				'opacity':0
			});
		});
	},
	addNavBar:function(){
		var navBar = new Element('div', {
			'id':'navBarbtn000'
		});
		navBar.setStyles({
			'position':'absolute',
			'z-index':100,
			'right':'3px',
			'bottom':'6px',
			'height':'20px',
			'width':(this.imgContainer.getSize().x - 20),
			'padding-right':'5',
			'overflow':'hidden'
		});
		navBar.inject(this.imgContainer, 'top');
		
		this.navBar = navBar;
		
		this.addNavButton();
	},
	
	addNavButton:function(){
		if ($chk(this.navBar)){
			this.navBar.empty();
		}
		
		this.imagesArray.each(function(item, nIndex){
			var newBn = new Element('div', {
				'class':'navbnclass'
			});
			newBn.setStyles({
				'float':'right',
				'opacity':'0.6',
				'width':'20px',
				'height':'20px',
				'color':'#000',
				'background-color':this.options['navBnBgColor'],
				'text-align':'center',
				'line-height':'20px',
				'margin-right':'2px',
				'cursor':'pointer',
				'font-weight':'bold'
			});
			
			newBn.store('imgElem', item);
			newBn.store('nIndex', nIndex);
			item.store('bn', newBn);
			
			item.addEvent('mouseenter',function(){
				this.pause();
			}.bind(this));
			item.addEvent('mouseleave', function(){
				this.resume.delay(0, this);
			}.bind(this));
			
			newBn.addEvent('click', function(e){
				e.stop();
				var targetElem = e.target;
				targetElem.setStyle('background-color', this.options['navBnHeightLight']);
				this.stop();
				this.moveTo(targetElem.retrieve('nIndex'));
			}.bind(this));
			newBn.appendText(nIndex + 1);
			newBn.inject(this.navBar, 'top');
		}, this);
	},
	moveTo:function(index){
		var imagesArrayLength = this.imagesArray.length;
		if (2 > imagesArrayLength)
		return;
		if ($defined(index) && (index >= imagesArrayLength)){
			index = parseInt(index) % imagesArrayLength;
		}
		var beforeImgElem = this.currentImgElem;
		this.currentImgElem = this.imagesArray[index];
		this.currentImgElem.retrieve('bn').setStyle('background-color', this.options['navBnHeightLight']);
		if (beforeImgElem){
			beforeImgElem.fade("out");
		}
		this.currentImgElem.set('tween', {duration:1000}).fade('in').get('tween').chain(function(){
            this.timer = this.nextFrame.delay(this.options['delay'], this, index + 1);
			if ($(this.options.description)){
				$(this.options.description).set('html', this.currentImgElem.getProperty('description'));
			}
        }.bind(this));;
	},
	nextFrame:function(index){
		this.currentImgElem.retrieve('bn').setStyle('background-color', this.options['navBnBgColor']);
		this.moveTo(index);
	},
	stop: function(){
		$clear(this.timer);
		this.currentImgElem.get('tween').cancel();
		this.currentImgElem.retrieve('bn').setStyle('background-color', this.options['navBnBgColor']);
	},
	addImages:function(xmlfile){
		this.currentRequest = new Request({
			method:'get',
			autoCancel:true,
			url:xmlfile,
			onRequest:function(){
				//placeholder
			}.bindWithEvent(this),
			onSuccess:function(text,xml){
				var t = text.replace(/(<a.+)\/>/gi,"$1></a>");
				var elem = new Element('div',{ html:t });
				this.imagesArray.push(elem.getElements('img'));
			}.bindWithEvent(this),
			onFailure:function(transport){ alert('ImgShower :: addImages: XML file path error or local Ajax test: please test addImages() on-line'); }
		});
		
		this.currentRequest.send();
	},
	pause:function(){
		$clear(this.timer);
		this.currentImgElem.get('tween').cancel();
		this.currentImgElem.setStyles({
			'visibility':'visible',
			'opacity':1
		});
		$(this.options.description).set('html', this.currentImgElem.getProperty('description'));
	},
	resume:function(){
		$clear(this.timer);
		this.currentImgElem.get('tween').cancel();
		this.moveTo(this.currentImgElem.retrieve('bn').retrieve('nIndex'));
	}
});