// Slider for showcase

$(document).ready(function(){

// set up the pagination dots
$('#showcase_ul li').each( function() {
	
	$('#showcase_pagination').append("<li></li>");
});  

$('#showcase_pagination li').hover(function() {
			
		$(this).css('background-position','0 -12px');
		},
		function() {
			changeDots();
		}
	);

changeDots();

$('#showcase_pagination li').click(function () {
	$('#showcase_pagination li').css('background-position','0 0');
	$(this).css('background-position','0 -12px');
	var pg = $('.showcase-'+$(this).index());
	
	//alert('index clicked: '+$(this).index());
	var amountToSlide = $('#showcase_ul li').index(pg);
	
	var pageclass = '.showcase-'+pg;
	//alert('slideto index: '+amountToSlide);
	$('#showcase_ul li.showcase-'+pg).addClass('test');
	//alert('showcase to scroll index: '+amountToSlide);
	if (!$('#showcase_ul').is(':animated') && (!$('.showcase_text').is(':animated'))) {
	
		gotoPage(amountToSlide, pageclass);
	}
}); 

function gotoPage(pageClicked, pg) {
	var auto_slide_seconds = 8000;
	var currentPage = $('.showcase_current').attr('class').match(/\d/);	
	var currentPage = $('.showcase_current').index();
	//alert('current page index: '+currentPage+' clickedpage: '+pageClicked);

	if (pageClicked == currentPage) {
		// don't move	
	}
	else if (pageClicked > currentPage) {
		var numslide = pageClicked - currentPage;
		var count = 0;
		//alert('numslide right '+numslide);
		/* while (count < numslide) {	
			count++;
			clearInterval(timer) ;
			
			slide('right', 1);	
			alert('right count '+count);
			timer = setInterval('slide("right", 1)', auto_slide_seconds);  
		} */
		while (count < numslide) {
			var pagination = true;
			$('#showcase_ul').queue(function(){
				
				slide('right',numslide, pagination);
				$(this).dequeue();
				
			});
			//$('#showcase_ul').queue(slide('right',numslide, pg, currentPage));
			count++;
		}
	}
	else if (pageClicked < currentPage) {
		var numslide = currentPage - pageClicked;
		var count = 0;
		var pagination = true;
			//	alert('numslide left '+numslide);
		/* while (count < numslide) {
			clearInterval(timer) ;
			alert('left count '+count);
			slide('left', 1);	
			count++;
			timer = setInterval('slide("right", 1)', auto_slide_seconds);  
		}  */
		while (count < numslide) {
			
		$('#showcase_ul').queue( function() {
			
			
			slide('left',numslide, pagination);
			$(this).dequeue();
			
		});
		
		count++;
		}
	}
	 
               
}

// show showcase title

var showcase_position = $('.showcase_current div.showcase_text').metadata();

$('.showcase_current div.showcase_text').show();
$('.showcase_current div.showcase_text').css('left',showcase_position.left);

	

$('#showcase_ul li').each( function() {
	var arrayOfImages = [];	
	arrayOfImages.push($(this).children('img').attr('src'));
	
	preload(arrayOfImages);
});


// preload the images
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}
	
	 $('#showcaseleft_scroll').hover(
	
		function() {
			
			$(this).stop().fadeTo(200,0.7);
		},
		function() {
			$(this).stop().fadeTo(200,0.5);
		}
	);
	
	$('#showcaseright_scroll').hover(
	
		function() {
			$(this).stop().fadeTo(200,0.7);
		},
		function() {
			$(this).stop().fadeTo(200,0.5);
		}
	);	
	
	$('#showcase_ul li').hover(
		// highlight with image overlay
	);
	
	$('#showcase_ul li:first').css('background','#FFF');
	
	//options( 1 - ON , 0 - OFF)  
        var auto_slide = 1;  
            var hover_pause = 1;  
        
  
        //speed of auto slide(  
        var auto_slide_seconds = 8000;  
        /* IMPORTANT: i know the variable is called ...seconds but it's 
        in milliseconds ( multiplied with 1000) '*/  
  
        /*move the last list item before the first item. The purpose of this is 
        if the user clicks to slide left he will be able to see the last item.*/  
        $('#showcase_ul li:first').before($('#showcase_ul li:last'));  
  
        //check if auto sliding is enabled  
        if(auto_slide == 1){  
            /*set the interval (loop) to call function slide with option 'right' 
            and set the interval time to the variable we declared previously */  
            var timer = setInterval('slide("right")', auto_slide_seconds);  
  
            /*and change the value of our hidden field that hold info about 
            the interval, setting it to the number of milliseconds we declared previously*/  
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);  
        }  
  
        //check if hover pause is enabled  
        if(hover_pause == 1){  
            //when hovered over the list  
            $('#showcase_ul').hover(function(){  
                //stop the interval  
                clearInterval(timer)  
            },function(){  
                //and when mouseout start it again  
                timer = setInterval('slide("right")', auto_slide_seconds);  
            });  
  
        }  
		
	$('#showcaseleft_scroll').click( function() {
		if (!$('#showcase_ul').is(':animated') && (!$('.showcase_text').is(':animated'))) {
			clearInterval(timer) ;
			slide('left', 1);
			
			
			timer = setInterval('slide("left", 1)', auto_slide_seconds);
		}
	});  
	
	$('#showcaseright_scroll').click( function() {
		
		if (!$('#showcase_ul').is(':animated') && (!$('.showcase_text').is(':animated'))) {		
			clearInterval(timer) ;
			
			slide('right', 1);	
			
			timer = setInterval('slide("right", 1)', auto_slide_seconds);  
		}
	});

});

function changeDots() {
var cur = parseInt($('.showcase_current').attr('class').match(/\d/)) + 1;
			$('#showcase_pagination li').css('background-position','0 0');
			$('#showcase_pagination li:nth-child('+cur+')').css('background-position','0 -12px');	
}


//slide function  
function slide(where, listitem, pagination){  
  			if (!listitem) {
				listitem = 1;
			}
		
            //get the item width  
            var item_width = $('#showcase_ul li').outerWidth() + 0;  
  
            /* using a if statement and the where variable check 
            we will check where the user wants to slide (left or right)*/  
            if(where == 'left'){  
                //...calculating the new left indent of the unordered list (ul) for left sliding  
                var left_indent = parseInt($('#showcase_ul').css('left')) + (item_width);  
            }else{  
                //...calculating the new left indent of the unordered list (ul) for right sliding  
                var left_indent = parseInt($('#showcase_ul').css('left')) - (item_width);  
  
            }
  
  			// cloning to make sure loop is smooth
			//if (!(where == 'left')) {
				//$('#showcase_ul li:last').after($('#showcase_ul li:first').clone());
				
			//}
			
			if (where == 'left') {
				$('.showcase_current').prev().addClass('showcase_current');
				$('.showcase_current').next().removeClass('showcase_current');
				//$(currentPage).removeClass('showcase_current');
				//$(scrollToPage).addClass('showcase_current');
				
				var showcase_image_pos = $('.showcase_current div.showcase_text').metadata();
				
				$('.showcase_current').children('a').children('div.showcase_text').css('left','-1000px');
				$('.showcase_current div.showcase_text').animate({"left": showcase_image_pos.left}, 1000); 	
				$('.showcase_current').next().children('a').children('div.showcase_text').animate({'left':'1500'}, 250, function() {
					
					$('div.showcase_text').hide();
					
					
					$('.showcase_current div.showcase_text').show();
						
					rotateShowcase(left_indent, where, pagination);	
				});
					
				
			}
			else {
				
				$('.showcase_current').next().addClass('showcase_current');
				$('.showcase_current').prev().removeClass('showcase_current');
				
				var showcase_image_pos = $('.showcase_current div.showcase_text').metadata();
				
				$('.showcase_current').children('a').children('div.showcase_text').css('left','1000px');
				$('.showcase_current div.showcase_text').animate({"left": showcase_image_pos.left}, 1000); 
				$('.showcase_current').prev().children('a').children('div.showcase_text').animate({'left':'-1500'}, 250, function() {
				
					$('div.showcase_text').hide();
	
					$('.showcase_current div.showcase_text').show();
								
					rotateShowcase(left_indent, where, pagination);		
				});
			}
			
	
				
  

  
  			// replace with thumbnail highlight
			// first restore default
			//$('#showcase_ul li').css('background','#000');
			// then add thumbnail highlight
			//$('.overlay').hide();
  			//$('#showcase_ul li:nth-child(3)').find('div:first').show();
  			
			
			
			
}

function rotateShowcase(left_indent, where, pagination) {
            //make the sliding effect using jQuery's animate function... '  
			//alert('rotate');
            if (pagination) {
			$('#showcase_ul').animate({'left' : left_indent},500,function(){  
  			
                //when the animation finishes use the if statement again, and make an ilussion 
                //of infinity by changing place of last or first item  
                if(where == 'left'){  
				//alert('left');
				
                    $('#showcase_ul li:first').before($('#showcase_ul li:last'));

                }else{
					//alert('right');
					$('#showcase_ul li:last').after($('#showcase_ul li:first').clone());
					$('#showcase_ul li:first').remove();
                }  
  
                //...and then just get back the default left indent  
				
                $('#showcase_ul').css({'left' : '-960px'});  
            });  				
			}
			else {
			$('#showcase_ul:not(:animated)').animate({'left' : left_indent},500,function(){  
  			
                //when the animation finishes use the if statement again, and make an ilussion 
                //of infinity by changing place of last or first item  
                if(where == 'left'){  
				//alert('left');
				
                    $('#showcase_ul li:first').before($('#showcase_ul li:last'));

                }else{
					//alert('right');
					$('#showcase_ul li:last').after($('#showcase_ul li:first').clone());
					$('#showcase_ul li:first').remove();
                }  
  
                //...and then just get back the default left indent  
				
                $('#showcase_ul').css({'left' : '-960px'});  
            });  
			}
			changeDots();
}