﻿/*
	Sample slideElements using mootools 
	Coder  : Abdelkader Elkalidi contact[at]updel.com
*/
var slideshow = new Class({
	Implements: Options,
    initialize: function(content, options) {
		this.setOptions({
			sleepDelay		: 	6000,
			singleTag		: 	'li.class',
			animationDelay	:	800,
			makeNav			:	false,
			navOpacity		:	0.6,
			debug			:	true
	    }, options);
		this.content		=	$(content);
		this.HtmlHref	 	= 	Array();
		this.HtmlTitle	 	= 	Array();
		this.HtmlThumb	 	= 	Array();
		this.HtmlImage	 	= 	Array();
		this.HtmlText	 	= 	Array();
		this.startFrom 		= 	0;
	    this._construct();
	},
	_construct: function() {
		if($chk(this.content)){
			if(this.options.makeNav	==	true){
				this.links		=	new Element('ul',{'class':'links'}).inject(this.content, 'after');
			}
			this.slidinme		=	new Element('div',{'class':'spinner','styles':{'height':'100%'}}).injectInside(this.content);
			this.slideme		=	new Element('div',{'class':'slideme'}).injectInside(this.slidinme);
			this.news 			= 	this.content.getElements(this.options.singleTag);
			if(this.news.length>0){
				this.news.each(function(n,i){
					this.HtmlHref[i]		=	n.getElements('a').get('href');
					this.HtmlTitle[i]		=	n.getElements('h1').get('text');
					this.HtmlThumb[i]		=	n.getElements('img').get('src');
					this.HtmlImage[i]		=	n.getElements('img').get('big');
					this.HtmlText[i]		=	n.getElements('p').get('text');
					if(this.options.makeNav	==	true){
						// new Element('a',{'id':'slideNav'+i,'class':'link','events':{'click':function(){this.goToElement(i)}.bind(this)}}).set('text',i+1).injectInside(this.links);
						var li 	=	new Element('li',{
							'id':'slideNav'+i, 
							'class':'link',
							'events':{
								'click':function(){
									this.goToElement(i);
									$clear(this.timer);
								}.bind(this)
							}
						}).injectInside(this.links);
						new Element('img',{
							'src':this.HtmlThumb[i], 
							'alt':this.HtmlTitle[i]
						}).injectInside(li);
						new Element('h3').set('text',this.HtmlTitle[i]).injectInside(li);
					}
				}.bind(this));
				this.slideStart();
				this.mouseEvents();
			}
		}
	},
	slideStart : function() {
		this.inProgress();
		this.animateElement(this.startFrom);
		this.startFrom = (this.startFrom+1 < this.news.length) ? (this.startFrom + 1) : 0;
		this.timer = this.slideStart.delay(this.options.sleepDelay, this);
	},
	inProgress : function(){
		if(this.options.makeNav	==	true){
			var inAction	=	this.startFrom;
			this.links.getElements('img').each(function(n,i){
				i	==	inAction	?
				$('slideNav'+i).addClass('hover').setStyle('opacity',1)	:	
				//$('slideNav'+i).set('class','link').setStyles({'opacity':this.options.navOpacity});
				$('slideNav'+i).removeClass('hover');
			}.bind(this));
		}
	},
	goToElement : function(myId){
		this.startFrom	=	myId;
		this.inProgress();
		$clear(this.timer);
		this.animateElement(myId);
		this.timer = this.slideStart.delay(this.options.sleepDelay, this);
		this.startFrom = (this.startFrom+1 < this.news.length) ? (this.startFrom + 1) : 0;
	},
	animateElement	: function(elmId){
		this.slideme.empty().set('html','<h1><a href="'+this.HtmlHref[elmId]+'" title="'+this.HtmlTitle[elmId]+'">'+this.HtmlTitle[elmId]+'</a></h1><p>'+this.HtmlText[elmId]+'</p>').setStyles({'opacity' : 0});
		new Fx.Morph(
				this.slidinme.setStyles({'opacity':0.2,'background':'url('+this.HtmlImage[elmId]+') center center no-repeat'}), {
					duration: this.options.animationDelay,
					onComplete: function(){
						new Fx.Morph(
							this.slideme.setStyles({
									'bottom'	:	-this.slideme.getSize().y.toInt() + 'px',
									'opacity' 	:  Browser.Engine.trident ? 0.7 : 1
								}),{
								duration: this.options.animationDelay/2
							}
						).start({'bottom':'0px'});
					}.bind(this)
				}
			).start({'opacity' : 1});
	},
	mouseEvents : function(){
	    this.slidinme.addEvents({
	        'mouseenter' : function(){
	            $clear(this.timer);
	        }.bind(this),
	        'mouseleave' : function(){
	            this.timer = this.slideStart.delay(this.options.sleepDelay, this);
	        }.bind(this)
	    });
	}
});
