function ImageSlider( element, images ){

	this.Element = element;
	this.id = element.id;
	this.Images = images;
	this.Slides = [];

	this.CurrentIndex = 0;
	this.CurrentOpeningIndex = null;

	this.PreviousSlide = null;

	this.FirstImage = $(element).find('img').get(0);
	$(this.FirstImage).css( {
		position: 'absolute',
		zIndex: 60
	} );
	$(this.Element).css( {
		position: 'relative',
		width: $(this.FirstImage).width() + 'px',
		height: $(this.FirstImage).height() + 'px',
		overflow: 'hidden'
	} );

	this.HandleBox = null;
	this.Timeout = null;

	this.Build();

	this.PrepareSlide( 1 );
}

ImageSlider.Instances = [];

ImageSlider.prototype.Build = function(){
	this.HandleBox = document.createElement( 'div' );
	this.HandleBox.className = 'Handles';
	this.Element.appendChild( this.HandleBox );

	$(this.HandleBox).css( {
		position: 'absolute',
		zIndex: 101
	} );

	for( var i = 0; i < this.Images.length; i ++ ){
		this.BuildSlide( i );
	}
}

ImageSlider.prototype.BuildSlide = function( i ){
	var self = this;
	var Slide = {
		link: null,
		img: null,
		loaded: false,
		handle: document.createElement( 'a' )
	};

	Slide.handle.appendChild( document.createTextNode( i + 1 ) );

	Slide.handle.href = '#';
	$(Slide.handle).click(function(){
		self.PrepareSlide( i, false );
		self.OpenSlide( i );
		return false;
	});
	this.HandleBox.appendChild( Slide.handle );
	
	if ( i == 0 ){
		Slide.img = this.FirstImage
		$(Slide.handle).addClass( 'Up' );
	} else {

		Slide.img = document.createElement( 'img' );
		Slide.img.src = this.Images[ i ].img;

		$(Slide.img).css( {
			zIndex: 50,
			width: $(this.FirstImage).width() + 'px',
			height: $(this.FirstImage).height() + 'px',
			position: 'absolute'
		} );

		if ( this.Images[ i ].url ){
			Slide.link = document.createElement( 'a' );
			Slide.link.href = this.Images[ i ].url;
		}
	}
	this.Slides.push( Slide );
}

ImageSlider.prototype.PrepareSlide = function( index, open_timer ){
	open_timer = open_timer != false;

	var Slide = this.Slides[ index ];
	if ( ! Slide.img.parentNode ){
		if ( Slide.link ) {
			this.Element.appendChild( Slide.link );
			Slide.link.appendChild( Slide.img );
		} else {
			this.Element.appendChild( Slide.img );
		}

		$(Slide.img).fadeTo( 0, 0 );
	}
	$(Slide.img).css({
		position: 'absolute'
	});
	// console.log( [ index, this.CurrentOpeningIndex, this.CurrentIndex, this.CurrentOpeningIndex != index && index == this.CurrentIndex ] );
	if ( this.CurrentOpeningIndex != index && index != this.CurrentIndex ){
		$(Slide.img).fadeTo( 0, 0 );
	}

	if ( open_timer ){
		var self = this;
		if ( Slide.loaded == true ){
			clearTimeout( this.Timeout );
			this.Timeout = setTimeout( function(){
				self.OpenSlide( index );
			}, 10000 );
		} else {
			$(Slide.img).ready(function(){
				Slide.loaded = true;
				self.PrepareSlide( index );
			});
		}
	}
}

ImageSlider.prototype.OpenSlide = function( index ){

	if ( this.CurrentOpeningIndex != null || index == this.CurrentIndex ){
		return;
	}

	clearTimeout( this.Timeout );

	if ( this.CurrentOpeningIndex != null ){
		$(this.Slides[ this.CurrentOpeningIndex ].img).stop().css({
			zIndex: 50
		});
	}

	var CurrentSlide = this.Slides[ this.CurrentIndex ];

	$(CurrentSlide.img).css( {
    zIndex: 50
  } );
	$(CurrentSlide.handle).removeClass( 'Up' );

	var nextIndex = index >= this.Images.length - 1 ? 0 : index + 1;

	var Slide = this.Slides[ index ];
	var self = this;
	$(Slide.img).css( { 
		zIndex: 60
	} );

	$(Slide.handle).addClass( 'Up' );
	this.CurrentOpeningIndex = index;
	$(Slide.img).fadeTo( 1000, 1, function(){
		self.CurrentIndex = index;
		self.CurrentOpeningIndex = null;
	} );

	if ( this.PreviousSlide !== null ){
		$(this.PreviousSlide.img).fadeTo( 500, 0, function(){ } );
	}

	this.PreviousSlide = Slide;

	this.PrepareSlide( nextIndex );
}

ImageSlider.Init = function( id, images ){

	var element = document.getElementById( id );
	if ( element && images.length > 1 ){
		new ImageSlider( element, images );
	}

}