$(document).ready(function(){

	$('.glaBox .subgrab ul').galleria({
			history   : false, 
			clickNext : true, 
			insert    : '#myBox', 
			onImage   : function(image,caption,thumb) {
				
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { 
						image.css('display','none').fadeIn(1000); }
						caption.css('display','none').fadeIn(600);
						var _li = thumb.parents('li');
						_li.siblings()
						.children('img.selected')
						.fadeTo(500,0.4);
						thumb.fadeTo('fast',1)
						.addClass('selected');
						image.attr('alt','Next image >>');
					},
			onThumb : function(thumb) { 
						var _li = thumb.parents('li');
						var _fadeTo = _li.is('.active') ? '1' : '0.3';
						thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
						thumb.hover(
							function() { thumb.fadeTo('fast',1); },
							function() { _li.not('.active').children('img').fadeTo('fast',0.4); } 
						);}
						})
						
						.hover( function() { clearInterval(interval); }, function() { interval = startAutoPlay(); } ); 
							
							interval = startAutoPlay();
							
							function startAutoPlay() { 
								return setInterval(
									function() {  $('.galleria_wrapper img').click(); }, 
									8000); 
		
		}   // end galeria		
		
		$('.subgrab ul li:first').before($('.subgrab ul li:last'));	//move the last list item before the first item
        $('#right_scroll , .galleryNext , .galleria_wrapper').click(function goToNextImg(){         //when user clicks the image for sliding right        
            var item_width = $('.subgrab ul li').outerWidth() + 10;             //get the width of the items 
            var left_indent = parseInt("08", $('.subgrab ul').css('left')) - item_width;	//calculae the new left indent of the unordered list
            $('.subgrab ul:not(:animated)').animate({'left' : left_indent},500,function(){	//make the sliding effect using jquery's animate function
                $('.subgrab ul li:last').after($('.subgrab ul li:first'));                 //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('.subgrab ul').css({'left' : -item_width});                 //and get the left indent li plus margin
            }); 
        });
        
        
        
        
        $('#left_scroll , .galleryPrevious').click(function(){         //when user clicks the image for sliding left
            var item_width = $('.subgrab ul li').outerWidth() + 10;
            var left_indent = parseInt("08", $('.subgrab ul').css('left')) + item_width;             // same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width)             
            $('.subgrab ul:not(:animated)').animate({'left' : left_indent},500,function(){
	            $('.subgrab ul li:first').before($('.subgrab ul li:last'));             // when sliding to left we are moving the last item before the first list item
	            $('.subgrab ul').css({'left' : -item_width});            // and again, when we make that change we are setting the left indent of our unordered list to the li width plus margin
            });
        });
});