/*
Javascript for The Fanatics

Uses jQuery 1.3.1
*/

function toggleYear(my_id){
	my_id = 'year' + my_id;
	if(jQuery('#' + my_id).is(':visible'))
		jQuery('#' + my_id).hide();
	else
		jQuery('#' + my_id).show();
};

$(function(){
	main.init();
});

$(document).ready(function(){
	$(".toggleYear").bind("click", function(event){
		toggleYear($(this).text());
	});
	$("#add_to_mate_link").click();
});

var main = {

	init : function() {
	
		/*
		Global settings
		============================================================ 
		*/
		var settings = {
			slideDelay :					5000,
			galleryAreaElement:		'#gallery .gallery_content',
			fanPhotoGalleryElement:		'body.live_coverage .fan_photos .fan_gallery'
		};
		
		/*
		// do this on DOMReady:
		============================================================ 
		*/
		
		$.getScript("/new.scripts/jquery.idTabs.min.js", function(){
			// functions that require idTabs go here
			$(".news_box ul.nav").idTabs();
		});

		// Scrollable items - add up/down scroll buttons
		$('div.items.scrollable').before('<a class="prev" title="Scroll up"></a>');
		$('div.items.scrollable').after('<a class="next" title="Scroll down"></a>');
		
		
		// initialize scrollable  
		$(".big_events div.scrollable").scrollable({ 
			vertical:true,  
			size: 6		});

		// Photo gallery overlays
		$('.tour_photo_gallery, .member_profile .photos #thumbs, .tour_gallery, .photo_gallery#thumbs').each(function() {	// only on photo gallery pages
		
			// create overlay content elements
			createGalleryOverlay();
			
			// handle links under gallery thumbnails
			$('#thumbs h3 a').click(function() {
				$(this).parent().siblings('a.gallery-image').click();
				return false;
			});
			
			// create overlay instances
			$('#thumbs a.gallery-image').overlay({
				target: '#gallery', 
				expose: {
					color: '#f1f1f1',
					opacity: .4
				}
			}).gallery({ 
				autohide: false,
				speed: 800 
			});
		
		});
		
		// Add as a Mate overlay
		$('.member_profile').each(function() {	// only on member profile page
		
			if (loggedIn) {
			
				// create overlay content elements
				createAddMateOverlay(this);
				
				// create overlay instance
				$(this).children('.add').children('a').overlay({
					target: '#add_confirm', 
					expose: {
						color: '#f1f1f1',
						opacity: .4
					}
				});
				
			} else {
			
				// create overlay content elements
				createLoginOverlay(this);

				// create overlay instance
				$(this).children('.add').children('a').overlay({
					target: '#login', 
					expose: {
						color: '#f1f1f1',
						opacity: .4
					}
				});
				
			}

		});

		// init home page gallery
		if ($(settings.galleryAreaElement).length) {
			initArrows(settings.galleryAreaElement, true);
			fadePanelIn(settings.galleryAreaElement, true);
		}
		
		// init live coverage fan photo gallery
		if ($(settings.fanPhotoGalleryElement).length) {
			initArrows(settings.fanPhotoGalleryElement, false);
			fadePanelIn(settings.fanPhotoGalleryElement, false);
		}
		
		var currentFeatureIndex = 0;
		
		// set up edit profile picture switcher
		$('.edit_profile form .profile_picture a').click(function() {
			$('#upload_customer_profile_Thumbnail').show();
			$(this).parents('.profile_picture').hide();
			return false;
		});
		
		// set up live coverage news rotator
		$("body.live_coverage .top_stories .slide_nav li:first").addClass("active");
		$("body.live_coverage .top_stories .scrollable").each(function() {

			var root = $(this)
				.scrollable({
					circular: true
				})
				.autoscroll({ 
					autoplay: true, 
					interval: 8000
				})
				.navigator({
					navi:'div.slide_nav ul' 
				});
			// provide scrollable API, pause autoscroll when clicked
			window.api = root.data("scrollable");
			$("body.live_coverage .top_stories .slide_nav li a").click(function(){
				api.stop();
			});

		});

		// set up latest results more/less toggling
		/* $("body.live_coverage .results_list li.match").each(function(){
			var container = this;
			$("h3", this).after("<a class='toggle' href=''>Show more</a>");
			$("a.toggle", this).click(function() {
				$(".match_detail", container).slideToggle("fast");
				var toggleText = $(this).text();
				if (toggleText.indexOf("more") != -1) {
					$(this).text(toggleText.replace("more","less"));
				} else {
					$(this).text(toggleText.replace("less","more"));
				}
				return false;
			});
		});
		*/

		/*
		// functions
		============================================================ 
		*/
		
		// initialise event update rotator 
		setupNewsRotator("#tour_event_updates", ".slide", ".items li");
		
		function setupNewsRotator(slideContainer, slideElements, newsItemElements) {
			if ($(slideContainer).length) {
				
				var containerObject = $(slideContainer);
				var slides = new Array();
				
				containerObject.data("currentFrame", 1);
				slideRotation(slideContainer, slideElements, newsItemElements);
			}
		}
		
		function slideRotation(slideContainer, slideElements, newsItemElements) {
			delay = settings.slideDelay;
			var slides = $(slideElements, slideContainer);
			slides.eq($(slideContainer).data("currentFrame")-1).show();

			var cycle = self.setInterval(function(){slideFadeIn(slideContainer, slideElements, newsItemElements)}, delay);
			return cycle;
		}
		
		function slideFadeIn(slideContainer, slideElements, newsItemElements) { 
				var slides = $(slideElements, slideContainer);
				var frame = $(slideContainer).data("currentFrame");
				var newsItemsList = $(newsItemElements, slideContainer);

				newsItemsList.children("div").removeClass("active");
				newsItemsList.eq($(slideContainer).data("currentFrame")-1).children("div").addClass("active");
				
				$(slides).eq(frame-1).fadeIn("slow").siblings(".slide").fadeOut("slow");
				
				if (frame >= slides.length) { frame = 1; } else { frame++; }
				$(slideContainer).data("currentFrame", frame);
		}
		
		// homepage ajax photo gallery functions
		function galleryAjaxCall(galleryFeatureUrl, container, displayMode){
			var galleryAjaxObject = $.ajax({
				type		: "GET",
				url			: galleryFeatureUrl,
				error		: function(xhr, desc, exceptionobj) {
					alert("There was an error loading this content");
				},
				success	: function(data) {
					$(container).html(data);
					fadePanelIn(container, displayMode);
				}
			});
		}
		
		function fadePanelIn(container, displayMode){		// displayMode is either true or false for "inline" or "block" (default is false)

			var galleryImage = $(container + " .image img");
			
			if (displayMode == undefined) { displayMode = false }
			displayMode == false ? display = "block" : display = "inline";
			
			// preload image first, once loaded, fade it in
			var img = new Image();
			$(img).load(function () {
				$(this).hide();

				galleryImage.replaceWith(this);
			
				if ($.browser.msie){
					$(this).css({
						"display"			: display,		// IE goes funny if you try to animate opacity...
						"visibility"	: "visible"
					});
				} else {
					$(this)
						.fadeIn("normal")
						.css({
						"display"			: display,		// ...but the rest seem fine for animating opacity
						"visibility"	: "visible"
					});
				}
			})
			.attr('src', galleryImage.get(0).src);
			
		}
		
		function initArrows(container, displayMode) {
		
			var galleryNavigation = $("<div id='gallery_nav'></div>");
		
			var rightArrow = $("<div></div>")
				.addClass("button-right")
				.attr("title","Next photo")
				.click(function() { nextFeature(container, displayMode) });
				
			var leftArrow = $("<div></div>")
				.addClass("button-left")
				.attr("title","Previous photo")
				.click(function() { previousFeature(container, displayMode) });
			
			leftArrow.appendTo(galleryNavigation);
			rightArrow.appendTo(galleryNavigation);
			galleryNavigation.insertAfter(container);
		}
		
		function nextFeature(container, displayMode) {
			$(settings.galleryAreaElement + " .image img", container).fadeOut("fast");
			
			if (currentFeatureIndex < galleryUrls.length - 1) {
				currentFeatureIndex++;
			} else {
				currentFeatureIndex = 0;
			}
			galleryAjaxCall(galleryUrls[currentFeatureIndex], container, displayMode);

		}
		
		function previousFeature(container, displayMode) {
			$(settings.galleryFeatureAreaElement + " .image img", container).fadeOut("fast");
			
			if (currentFeatureIndex > 0) {
				currentFeatureIndex--;
			} else {
				currentFeatureIndex = galleryUrls.length - 1;
			}
			galleryAjaxCall(galleryUrls[currentFeatureIndex], container, displayMode);

		}
		
		// create overlay elements - photo gallery overlays
		function createGalleryOverlay() {
			var galleryOverlay = $('<div class="overlay" id="gallery"></div>');
			var galleryPrev = $('<a class="prev">Previous</a>');
			var galleryNext = $('<a class="next">Next</a>');
			var galleryInfo = $('<div class="info"></div>');
			var galleryProgress = $('<img class="progress" />');
			
			galleryPrev.appendTo(galleryOverlay);
			galleryNext.appendTo(galleryOverlay);
			galleryInfo.appendTo(galleryOverlay);
			galleryProgress
				.attr('src','http://static.flowplayer.org/tools/img/overlay/loading.gif')
				.appendTo(galleryOverlay);
			galleryOverlay.insertAfter('#footer');
		}
		
		// create overlay elements - Add Mate confirmation
		function createAddMateOverlay(container) {
			var memberName = $(container).children("h1").text();		// gets the name from the text within the h1 on the page
			var addOverlay = $('<div class="overlay" id="add_confirm"></div>');
			var addOverlayContent = $('<div class="inner"><h2>Confirm Add to Mates</h2></div>');
			var addOverlayContentMsg = $('<p>Are you sure you want to send a request to <strong>' + memberName + '</strong> to become a Mate?</p>');
			var addOverlayAction = $('<div class="action clearfix"></div>');
			var addOverlayConfirm = $('<a href="javascript:void(0);" onclick="document.friend_request.submit();" class="button_large">Add to Mates</a>');
			var addOverlayCancel = $('<a href="#" class="cancel">Cancel</a>');
		    
		    var friendRequestOverlayForm = $('<form action="'+ friend_request_form_action +'" name="friend_request" style="margin:0px;padding:0px;" action="#" method="post"><input type="hidden" name="page_submit" value="true" ><input type="hidden" name="customer_ID" value="' + current_customer_id +'"></form>');	
			
			addOverlayContentMsg.appendTo(addOverlayContent);
		    friendRequestOverlayForm.appendTo(addOverlayAction);
			addOverlayConfirm.appendTo(addOverlayAction);
			addOverlayCancel.appendTo(addOverlayAction);
			addOverlayAction.appendTo(addOverlayContent);
			addOverlayContent.appendTo(addOverlay);
			addOverlay.insertAfter('#footer');
			
			// set up cancel button behaviour
			$('#add_confirm .action .cancel').click(function() {
				$('#add_confirm .close').click();
				return false;
			});
		}
		
		// create overlay elements - Login
		function createLoginOverlay(container) {
			var loginOverlay = $('<div class="overlay" id="login"></div>');
			var loginOverlayContent = $('<div class="inner"></div>');
			var loginOverlayForm = $('<form class="standard login" action="'+ login_url + '" method="post"><h2>Sign in to The Fanatics</h2></form>');
			var loginOverlayFields = $('<div class="fields"></div>');
			var loginOverlayInput1 = $('<div class="input"><label for="email"><strong>Email:</strong></label><input type="text" id="email" name="email"/></div>');
			var loginOverlayInput2 = $('<div class="input"><label for="password"><strong>Password:</strong></label><input type="password" id="password" name="password"/></div>');
			var loginOverlayAction = $('<div class="submit"><input type="submit" name="action" value="Login" class="button"/><input type="hidden" name="page_submit" value="true" ><input type="hidden" name="redir" value="'+ redir +'" > </div>');
			var loginOverlayInfo = $('<div class="form_text_after"><p>Don\'t have an account yet? <a href="'+ signup_url +'">Join now</a><br/>Lost your password? <a href="'+retrieve_password_url+'">Retrieve now</a></p></div>');
			
			
			loginOverlayInput1.appendTo(loginOverlayFields);
			loginOverlayInput2.appendTo(loginOverlayFields);
			loginOverlayAction.appendTo(loginOverlayFields);
			loginOverlayInfo.appendTo(loginOverlayFields);
			loginOverlayFields.appendTo(loginOverlayForm);
			loginOverlayForm.appendTo(loginOverlayContent);
			loginOverlayContent.appendTo(loginOverlay);
			loginOverlay.insertAfter('#footer');
		}
		
	}
}