var currentImage;
    var currentIndex = -1;
    var interval=5000;
    var currentStatus='play';
    
    function changeButtons()  {
        if(currentStatus=='play')   {
                $('#playSlide').css('display','none');
                $('#pauseSlide').css('display','block');
            }   else    {
                clearTimeout(myTimer);
                         setTimeout("stop()");
                $('#playSlide').css('display','block');
                $('#pauseSlide').css('display','none');
            }
    }
    
    function showImage(index){
        
        if(index < $('#bigPic img').length){
            
            
        
            var indexImage = $('#bigPic img')[index]
            if(currentImage){   
            	if(currentImage != indexImage ){
                    $(currentImage).css('z-index',2);
                    clearTimeout(myTimer);
                    $(currentImage).fadeOut(1000, function() {
					    myTimer = setTimeout("showNext()", interval);
					    $(this).css({'display':'none','z-index':1})
					});
                                        
                    currentStatus='play';
                    changeButtons();
                }
            }
            $(indexImage).css({'display':'block', 'opacity':1});
            currentImage = indexImage;
            currentIndex = index;
            $('#thumbs li').removeClass('active');
            $($('#thumbs li')[index]).addClass('active');
            $($('#comments li')).css({'display':'none'});
            $($('#comments li')[index]).css({'display':'block'});
        }
    }
    
    
    
    function showNext(){
        var len = $('#bigPic img').length;
        var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
        showImage(next);
    }
	
	var myTimer;
    
    $(document).ready(function() {
            changeButtons();
	    myTimer = setTimeout("showNext()", interval);
            showNext(); //loads first image
            
            
        $('#thumbs li').bind('click',function(e){
        	var count = $(this).attr('id');
        	showImage(parseInt(count)-1);
        });
		
                $('#pauseSlide').bind('click',function(){    
                         
                         currentStatus='pause';
                         changeButtons();
                });
                
                
                $('#playSlide').bind('click',function(e){    
                         clearTimeout(myTimer);
                         showNext();
                         
                });

		
		$('#previousSlide').bind('click',function(e){
        	var count = currentIndex;
			if(currentIndex>=1)	{
        		showImage(parseInt(count)-1);
			}
        });
		
		$('#nextSlide').bind('click',function(e){
        	if(currentIndex<$('#bigPic img').length-1)	{
				currentIndex=currentIndex+1;
				var count = currentIndex;
        		showImage(parseInt(count));
			}
        });
	});