var homepageProductInterval;

$(document).ready(function(){
    $('#dotsContainer .dot').click(slideDot_click);
    $('#mainPhotoContainer .slideArrow.left').click(slideArrow_click);
    $('#mainPhotoContainer .slideArrow.right').click(slideArrow_click);
	//rotateHomepageProducts();
	
	setTimeout("homepageProductInterval = setInterval( 'rotateHomepageProducts()', 5000 );", 4000)
	//homepageProductInterval = setInterval( "rotateHomepageProducts()", 5000 );
});

function rotateHomepageProducts(){
	var $active = $('#mainPhotos a.active');
	var $activeTitle = $('#mainPhotoContent a img.active');
	
	var totalTransitionTime = 1000;
	
	if ( $active.length == 0 ) $active = $('#mainPhotos a:first');
	if ( $activeTitle.length == 0 ) $activeTitle = $('#mainPhotoContent img:first');
	
	var $next =  $active.next().length ? $active.next()
		: $('#mainPhotos a:first');
	
	
	var $nextTitle =  $activeTitle.parent().next('a').children('img').length ? $activeTitle.parent().next('a').children('img')
		: $('#mainPhotoContent img:first');
	

	$active.addClass('last-active');
	$activeTitle.addClass('last-active');
	
	$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, totalTransitionTime, function() {
			$active.removeClass('active last-active');
			//update dots
			
			
		});
	
	//Rotate titles, fade out, current, then fade in next
	/*$activeTitle.animate({opacity: 0.0}, totalTransitionTime/2, function() {
			$activeTitle.removeClass('active last-active');	
			$nextTitle.css({opacity: 0.0})
			.addClass('active')
			.animate({opacity: 1.0}, totalTransitionTime/2, function() {
				$activeTitle.removeClass('active last-active');													 
			});
		});*/
	$activeTitle.fadeOut(totalTransitionTime/2, function() {
			$activeTitle.removeClass('active last-active');	
			$nextTitle.css('display', 'none')
			.addClass('active');
			
			var $dots = $('#dotsContainer .dot');
			$dots.removeClass('active');
			$dots.eq(''+$next.index()+'').addClass('active');
			
			$nextTitle.fadeIn(totalTransitionTime/2, function() {
				$activeTitle.removeClass('active last-active');
			});
		});
	
}


var slideDot_click = function(e){
	var sender = $(e.currentTarget);
	changeSlide(sender.index(), null);
}
var slideArrow_click = function(e){
	var sender = $(e.currentTarget);
	var $photos = $('#mainPhotos a');
	var $photoActive = $('#mainPhotos a.active');
	
	
	var currentIdx = $photoActive.index();
	var newIdx = 0;
	
	var direction = '';
	//alert('currentidx ' + currentIdx);
	//if clicking left arrow - decrement
	if(sender.hasClass("left")){
		direction = 'left';
		//if the first one is already selected, select the last one
		 if(currentIdx == 0){
			 newIdx = $photos.length -1;    
    	}
		//select the previous
		else{
			newIdx = currentIdx -1;	
		}
	}
	//we clicked the right one.
	else{
		direction = 'right';
		//if the last one is already selected, select the first one
		if(currentIdx == $photos.length -1){
			//alert($photos.length -1);
			newIdx = 0;    
		}
		//select the next
		else{
			newIdx = currentIdx +1;		
		}
	}
	//alert('newidx ' + newIdx);
	changeSlide(newIdx, direction);
	
}

/*function changeSlide(newIdx){
	var $photos = $('#mainPhotos a')
	var $dots = $('#dotsContainer .dot');	
	var $title = $('#mainPhotoContent a');
	
	clearInterval(homepageProductInterval);		
	
	$photos.removeClass('active');
	$dots.removeClass('active');
	$title.removeClass('active');
	
	$photos.eq(''+newIdx+'').addClass('active');
	$dots.eq(''+newIdx+'').addClass('active');
	$title.eq(''+newIdx+'').addClass('active');
}*/

function changeSlide(newIdx, direction){
	var $photos = $('#mainPhotos a')
	var $dots = $('#dotsContainer .dot');	
	var $title = $('#mainPhotoContent a img');
		
	clearInterval(homepageProductInterval);		
	
	var $activePhoto = $('#mainPhotos a.active');
	
	var currentIdx = $activePhoto.index();
	
	if(currentIdx != newIdx){
	
		if(direction == 'right'){
			var $nextPhoto =  $activePhoto.next().length ? $activePhoto.next()
				: $('#mainPhotos a:first');
		}
		else if(direction == 'left'){
			if( $activePhoto.prev().index() == -1 ){
				$nextPhoto = $('#mainPhotos a:last');
			}
			else{
				$nextPhoto =  $activePhoto.prev();
			}
		}
		//select index
		else{
			$nextPhoto =  $photos.eq(newIdx);
		}
		
		$activePhoto.addClass('last-active');
		
		$nextPhoto.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 300, function() {
			$activePhoto.removeClass('active last-active');	
		});
	
	}
	
	
	$dots.removeClass('active');
	$title.removeClass('active');
	$title.removeAttr('style');
	
	$dots.eq(''+newIdx+'').addClass('active');
	$title.eq(''+newIdx+'').addClass('active');
}