$.widget("ui.slideshow",{
	// UI elements
	previousButton:null,
	nextButton:null,
	slidesContainer:null,
	slides:null,
	slideIndicatorsContainer:null,
	slideIndicators:new Array(),
	slideInfoContainer:null,
	
	// Variables
	currentSlideIndex:0,
	autoPlay:true,
	autoPlayDelay:5000,
	autoPlayIntervalId:0,
	
	
	_init:function() 
	{
		var slideshow = this;
		var element = $(this.element[0]);
		
		this.nextButton = $(element.children('.next-slide-button:first'));
		this.previousButton = $(element.children('.previous-slide-button:first'));
		this.slides = element.find('.slide');
		this.slidesContainer = $(this.slides[0]).parent();
		this.slideIndicatorsContainer = $(element.find('.slide-indicators-container'));
		
		this.slideIndicatorsContainer.fadeOut(0);
		this.slideIndicatorsContainer.css('visibility','visible');
		this.slideIndicatorsContainer.fadeIn();
		
		$([this.nextButton,this.previousButton]).each(function() {
			var button = $(this);
			button.fadeOut(0);
			button.css('visibility','visible');
			button.fadeIn();

			button.click($.proxy(slideshow._handleButtonMouseEvent,slideshow));
		});
		
		var totalWidth = 0;
		this.slides.each(function() {
			var slide = $(this);
			totalWidth += slide.width();
			slideshow._addSlideIndicator();
		});
		
		$(this.slidesContainer).width(totalWidth + ((this.slides.length * 3) * 2));
		
		this._update();
		
		if(this.autoPlay)
		{
			this.autoPlayIntervalId = setInterval(function() {
				slideshow._slideToIndex(slideshow.currentSlideIndex + 1);
				
				if(slideshow.currentSlideIndex == slideshow.slides.length - 1 || !slideshow.autoPlay)
					clearInterval(slideshow.autoPlayIntervalId);
			},this.autoPlayDelay);
		}
	},
	
	_addSlideIndicator:function()
	{
		var slideshow = this;
		var currentIndex = slideshow.slideIndicators.length;
		
		var slideIndicator = $('<div/>').addClass('slide-indicator inactive');
		slideIndicator.click(function() {
			slideshow._slideToIndex(currentIndex);
		});
		
		this.slideIndicatorsContainer.append(slideIndicator);
		this.slideIndicators.push(slideIndicator);
	},
	
	_handleButtonMouseEvent:function(e)
	{
		var button = $(e.target);
		
		this.autoPlay = false;
		clearInterval(this.autoPlayIntervalId);
		
		if(button.hasClass('previous-slide-button'))
		{
			this._slideToIndex(this.currentSlideIndex - 1);
		}
		else if(button.hasClass('next-slide-button'))
		{
			this._slideToIndex(this.currentSlideIndex + 1);
		}
	},
	
	_slideToIndex:function(targetIndex)
	{	
		if(targetIndex < 0) return;
		if(targetIndex > this.slides.length - 1) return;
		
		var targetSlide = $(this.slides[targetIndex]);
		
		this.currentSlideIndex = targetIndex;
		this._update();
		
		$.Event('update.slideshow');

		this.slidesContainer.animate({left:(targetSlide.position().left * -1).toString() + "px"});
	},
	
	_update:function()
	{
		this._updateButtons();
		this._updateSlideIndicators();
		
		var slideshow = this;
		
		$(this.slideInfoContainer).children('.slide-info').each(function(index) {
			index == slideshow.currentSlideIndex ? $(this).fadeIn() : $(this).fadeOut();
		});
		
//		var targetSlide = $(this.slides[this.currentSlideIndex]);
		
//		var photo = targetSlide.find('.photo');
//		$(photo).css('backgroundPosition','0% 0%')
//		$(photo).animate({backgroundPosition:'100% 100%'});
	},
	
	_updateSlideIndicators:function()
	{
		var slideshow = this;
		$(this.slideIndicators).each(function(index) {
			if(!$(this).hasClass('inactive'))
			{
				$(this).removeClass('active');
				$(this).addClass('inactive');
			}
			
			if(index == slideshow.currentSlideIndex && !$(this).hasClass('active'))
			{
				$(this).removeClass('inactive');
				$(this).addClass('active');
			}
		});
	},
	
	_updateButtons:function()
	{
		if(this.currentSlideIndex > 0 && this.slides.length > 1)
		{
			this.previousButton.removeClass('inactive')
									.addClass('active');
		}
		else
		{
			this.previousButton.removeClass('active')
									.addClass('inactive');
		}
		
		if(this.currentSlideIndex < this.slides.length - 1 && this.slides.length > 1)
		{
			this.nextButton.removeClass('inactive')
						   .addClass('active');
		}
		else
		{
			this.nextButton.removeClass('active')
						   .addClass('inactive');
		}
	},
	
	registerSlideInfoContainer:function(slideInfoContainer)
	{
		this.slideInfoContainer = slideInfoContainer;
		this._update();
	}
});