/*
author:	Mohsen Taleb <mohsentaleb@gmail.com>
usage:	new MoohsenSlide(
						 [['image1.jpg', 'http://www.hasan.com'], ['image', 'url']],
						 slidesContainer,
						 'next-btn',
						 'prev-btn',
						 'handlers-container',
						 {options}
						 );
based on: MooTools 1.1
*/


var MoohsenSlide = new Class({

	options: {
		interval: 10000,
		autoPlay: false,
		startingSlide: 0,
		randomStart: false
	},

	initialize: function(images, slidesContainer, nextBtn, prevBtn, handlersContainer, options) {
		this.setOptions(options);
		this.slidesContainer = $(slidesContainer);
		this.currentSlide = this.options.startingSlide;
		this.nextBtn = $(nextBtn);
		this.prevBtn = $(prevBtn);
		this.handlersContainer = $(handlersContainer);
		this.timeOutId = null;
		this.isMouseOver = false;
		this.images = images;
		this.handlers = [];

		this.images.each(function(item, i){
			this.handlers[i] = new Element("a",{"class": "", "href":"#"+i})
								.setHTML(i)
								.inject(this.handlersContainer)
								.addEvent('click', function(e){
										e = new Event(e).stop;
										this.currentSlide = i;
										this.showSlide(this.currentSlide);
									}.bind(this));
		}.bind(this));

/*		this.slidesContainer.addEvents({
						"mouseenter": function() {
							this.isMouseOver = true;
							if(this.options.autoPlay) { this.timeOutId = $clear(this.timeOutId);
							}
						}.bind(this),
						"mouseleave": function() {
							this.isMouseOver = false;
							if(this.options.autoPlay)  this.timeoutId = this.goToNext.delay(this.options.interval, this);
						}.bind(this)
					});
*/
		this.box = new Element("div",{
							   "height": this.slidesContainer.getSize().size.y,
  							   "width": this.slidesContainer.getSize().size.x,
							   "class": "box",
							   "opacity": 0}).inject(this.slidesContainer);

		this.loading = new Element("div",{
								"class": "loading",
								"visibility": "hidden"}).injectAfter(this.box);

		this.FxOptions={"duration":600,"transition":Fx.Transitions.Expo.easeOut,"wait":true};
		this.boxFx = new Fx.Styles(this.box, this.FxOptions);

		this.nextBtn.addEvent('click',function(e){e = new Event(e).stop(); this.goToNext();}.bind(this));
		this.prevBtn.addEvent('click',function(e){e = new Event(e).stop(); this.goToPrev();}.bind(this));
		this.showSlide(this.currentSlide);
	},

	showSlide: function(index) {

		var image = this.images[index][0];
		this.startBox();
		var loadedImage = null;
		this.handlers.each(function(handler){handler.removeClass("active");});
		this.handlers[index].addClass('active');

		var Img  = new Image();
		Img.src=image;
		//Img.onload=function(e){

		//}
			loadedImage = Img;
		(function() {

					if(this.slidesContainer.getElement('a.target')) {
						this.slidesContainer.getElement('a.target').remove();
					}
					var slide = new Element("a",{"class": "target","target":"_top", "href":this.images[this.currentSlide][1]}).injectBefore(this.box).adopt(loadedImage);
					this.endBox.delay(500, this);
				}.delay(500, this));

	/*return;

		new Asset.images(image, {
			onProgress: function(i) {
				loadedImage = this;
			},

			onComplete: function() {
				(function() {
					if(this.slidesContainer.getElement('a.target')) {
						this.slidesContainer.getElement('a.target').remove();
					}
					var slide = new Element("a",{"class": "target", "href":this.images[this.currentSlide][1]}).injectBefore(this.box).adopt(loadedImage);
					this.endBox.delay(500, this);
				}.delay(500, this));
			}.bind(this)
		});*/
	},

	startBox: function() {
		this.boxFx.start({"opacity":1}).chain(function(){this.loading.setStyles('visibility', 'visible');}.bind(this));
	},

	endBox: function() {
		this.loading.setStyle('display', 'none');
		this.boxFx.start({
				"opacity":0.00001
			}).chain(function(){
					this.box.setStyle("visibility","hidden");
					if (this.images.length > 1 && this.options.autoPlay) {
						this.timeoutId = this.goToNext.delay(this.options.interval, this);
					}
			}.bind(this));

	},

	goToNext: function() {
		$clear(this.timeoutId);
		if (this.currentSlide == this.images.length-1) {
			this.currentSlide = 0;
			this.showSlide(this.currentSlide);

		}
		else {
			this.currentSlide++;
			this.showSlide(this.currentSlide);
		}
	},

	goToPrev: function() {
		$clear(this.timeoutId);
		if (this.currentSlide == 0) {
			this.currentSlide = this.images.length-1;
			this.showSlide(this.currentSlide);
		}
		else {
			this.currentSlide--;
			this.showSlide(this.currentSlide);
		}
	}
});

MoohsenSlide.implement(new Events, new Options);