// Initiate function call and pass in each individual gallery for reference
$(function(){
	$('body').removeClass('js-disabled').addClass('js-enabled'); //required for avatar image gallery in myaccount
	$('div.gallery').each(function(){galleryInit.call(this)});
});


function galleryInit() {
   
	var showingImages = $('.showing>ul>li',this);
	var thumbContainerWidth;
	var scrollDistance;
	var minForScroll;

	// if gallery has class of large then setup a large gallery else do small gallery
	if ($(this).is('.large')) {
		scrollDistance = 560;
		// this was 8
		minForScroll = 6;
		$('.thumbs_sleeve ul',this).css({width:thumbContainerWidth = 70 * $('div.thumbs_sleeve>ul>li',this).children().length+'px'});
	}
	else {
		scrollDistance = 200;
		minForScroll = 5;
		$('.thumbs_sleeve ul',this).css({width:thumbContainerWidth = 40 * $('div.thumbs_sleeve>ul>li',this).children().length+'px'});
	}

	// If enough images to require scrolling then create scroll buttons
	if ($('.thumbs li',this).length > minForScroll) {
		/*var previousButton = $('<span class="previousButton"><img src="/magazine/graphics/buttons/b_arrow_left.png" alt="Previous thumbnails" /></span>');
		var nextButton = $('<span class="nextButton"><img src="/magazine/graphics/buttons/b_arrow_right.png" alt="Next thumbnails" /></span>');*/
		var previousButton = $('<span class="previousButton">Previous thumbnails</span>');
		var nextButton = $('<span class="nextButton">Next thumbnails</span>');
		$('div.thumbs', this).prepend(previousButton).append(nextButton);
	
		$('span.previousButton', this).click(prevButtonAction).children('img').hover(buttonOver,buttonOut);
		$('span.nextButton', this).click(nextButtonAction).children('img').hover(buttonOver,buttonOut);
	}

	// If thumb container isn't at first position when previous scroll button clicked then scroll back a page of thumbs
	function prevButtonAction() {	   
		if(parseInt($(this).next().children('ul').css('left')) < 0) {
			$(this).unbind('click').next().children('ul').animate({left:'+='+scrollDistance+'px'},{duration:500}).queue(function() { $(this).parent().prev().click(prevButtonAction); $(this).dequeue(); } );
				//Invoke Ajaxy function		 
		 controlName = "MyFriendsPagedAC";
	     handlerName =    getHandlerName(controlName);
         var handlerDataArray = getHandlerDataArray(controlName);
         //handlerDataArray = updateArrayValue(handlerDataArray, "userID",theNoteText); 
         
         var currentQueryString = new Querystring();
         
         var uc = currentQueryString.get("uc","0")
     
         if (uc != "0")
         {
            handlerDataArray = updateArrayValue(handlerDataArray, "userID",uc);           
         }
         handlerDataArray = updateArrayValue(handlerDataArray, "pageNumber","1");           
         processedHandlerData = writeoutArray(handlerDataArray);  
          
         invokeActionProvider(function(obj){}, processedHandlerData,  handlerName);	
		}
	}

	// See previous function (go forwards instead)
	function nextButtonAction() {	    
		thumbContainerWidth = $(this).siblings('.thumbs_sleeve').children('ul').width();
		if(parseInt($(this).prev().children('ul').css('left')) > '-'+(parseInt(thumbContainerWidth)-(scrollDistance))) {
			$(this).unbind('click').prev().children('ul').animate({left:'-='+scrollDistance+'px'},{duration:500}).queue(function() { $(this).parent().next().click(nextButtonAction); $(this).dequeue(); } );
		}
		// Try getting more friends
		if(!$(this).parents('.gallery').hasClass('pictures'))	{
			if($(this).parents('.gallery').is('.large'))	{
				getMoreFriends($(this).prev('div').children('ul'), 6);
			}
			else	{
				getMoreFriends($(this).prev('div').children('ul'), 3);
			}
		}
	}

	$('div.thumbs li img', this).hover(
		function(){$(this).animate({opacity:0.7},{duration:200,queue:false})},
		function(){$(this).animate({opacity:1},{duration:200,queue:false})}
	).parent().click(function(){
		var index = $(this).parents('ul').children().index(this.parentNode);
		showingImages.removeClass('current').eq(index).addClass('current');
		window.clearInterval(cycling);
		return false;
	});

	$('div.showing li').hover(
		function(){if($(this).is('.current')){$('p',this).fadeIn()}},
		function(){$('p',this).fadeOut()}
	);

	// Setup cycling for images to act as a slideshow when page loaded
	/*var cycling = window.setInterval(function(){
		var index = showingImages.index(showingImages.filter('.current').get(0));
		if (index == showingImages.length-1) { showingImages.removeClass('current').eq(0).addClass('current'); }
		else { showingImages.removeClass('current').eq(index+1).addClass('current'); }
	},5000);*/
	
	var cycling = null;
	
}


// Pass in the ul element
function getMoreFriends(list, num)	{
	
	// Let's count how many li's we have currently
	currentlength = $(list).children('li').length;
	url = 'http://' + window.location.hostname + "/JSON/more_friends.json.txt?need=" + num + "&currentlength=" + currentlength;
	
	$.getJSON(url, function(data)	{
		$.each(data.friends, function(i,item){
			$('<li><a href="#"><img src="' + item.image + '" alt="Sample image 1" /></a><a href="#" class="username">' + item.name + '</a></li>').appendTo(list);
		});
		extraWidth = $(list).children('li').eq(0).width() * data.friends.length;
		$(list).css('width', extraWidth + $(list).width());
	});	
	
}