/**
 * This file adds functionality to the Activities page in the Explore section
 */
(function() {
	// Define local namespace
	var ns = GWR.Namespace("Activities");

	/**
	 * Renders the category
	 * @param {number} category - Node ID of the agerange category to display
	 */
	ns.renderItems = function(category) {
		var activityItems = $('.ActivityItems','#ActivityItemContainer');
		// hide any containers
		activityItems.hide();

		// show category if it has previously been rendered
		var activityItem = activityItems.filter("[rel=" + category + "]");
		if(activityItem.length > 0) {
			activityItem.find('.ActivityItem:first').click();
			activityItem.show();
		}
		else {
			html = '<div class="ActivityItems" rel="' + category + '">';
			
			var categoryList = ns.Categories[category];
			for(var i = 0; i < categoryList.length; i++) {
				var nid = categoryList[i];
				var item = ns.Items[nid];
				if(item && item.Thumbnail) {
					var selectedClass = i == 0 ? 'ActivityItemSelect' : '';
					html += '<div class="ActivityItem ' + selectedClass + '" rel="' + nid + '">';
					html += '<div class="ActivityThumb">';
					html += '<img alt="' + item.Title + ' Image" src="' + item.Thumbnail + '"></img>';
					html += '</div>';
					html += '<div class="ActivityTitle">' + item.Title + '</div>';
					html += '</div>';
				}
			}
			html += '</div>';
			
			$('#ActivityItemContainer').append(html);
			
			if(categoryList.length > 0) {
				var nid = categoryList[0];
				var item = ns.Items[nid];
				if(item) {
					displayItem(item);
				}
			}
		}
	}

	var displayItem = function(item) {
		$('#ItemTitle').html(item.Title);
		$('#ItemDescription').html(item.Description);
		$('#ItemCategories').html(item.Description2);
		$('#ItemImage').attr('src',item.Images[0]);
		
		var html = '';
		if(item.Images.length > 1) {
			// Add buttons
			for(var i = 0; i < item.Images.length; i++) {
				html += '<div class="Button';
				if(i == 0) {
					html += ' ButtonSelect';
				}
				html += '" rel="' + item.Images[i] + '">Image '+ (i + 1) + '</div>';
			}
		}
		
		$('#ItemImageButtons').html(html);
	}

	$(function() {
		// Attach events to activity items
		$('#ActivityItemContainer .ActivityItem').live('click', function() {
			$(this).siblings().removeClass('ActivityItemSelect');
			$(this).addClass('ActivityItemSelect');
			
			// Check if we have this item's info
			var itemNid = $(this).attr('rel');
			var item = ns.Items[itemNid];
			if(item) {
				displayItem(item);
			}
			return false;
		})	
		.live('mouseover', function() {
			$(this).addClass('ActivityItemHover');
		})
		.live('mouseout', function() {
			$(this).removeClass('ActivityItemHover');
		});
		
		// Attach events to category buttons       
        var categoryButtons = $('.CategoryButtons td');
		categoryButtons.hover(function() {
			$(this).addClass('hover');
		},
		function() {
			$(this).removeClass('hover');
		})
		.click(function() {
			categoryButtons.removeClass('active');			
			$(this).addClass('active');
			
			var itemNid = $(this).attr('rel');
			
			// Display top title
			$('.TitleHolder','#TitleContainer').hide();
			$('.TitleHolder[rel='+itemNid+']','#TitleContainer').show();
			
			// Display new activity items
			ns.renderItems(itemNid);
					
			$('#ActivityItemContainer').scrollTop(0);
		});
		
		// Show multiple images per item
		$('.ItemImageButtons .Button').live('click', function() {
			$('.ItemImageButtons .Button').removeClass('ButtonSelect');
			$(this).addClass('ButtonSelect');
			
			var url = $(this).attr('rel');
			var visibleImage = $('.ItemImage img','.ItemDisplay:visible');
			if(visibleImage.length > 0) {
				visibleImage[0].src = url;
			}
			
			return false;
		});
	});

	/**
	 * Initial render of items
	 */
	GWR.Init(function() {
		// If a hash exists, only look at the first one
		// If an item exists with the title, then show that category
		var hashKeywords = GWR.GetHashKeywords();
		var itemFound = false;
		if(hashKeywords.length > 0){
			var keyword = hashKeywords[0];
			
			for(var catNid in ns.Categories) {
				var categoryItemList = ns.Categories[catNid];
				for(var i = 0; i < categoryItemList.length; i++) {
					var itemNid = categoryItemList[i];
					var item = ns.Items[itemNid];
					if(item && GWR.HashString(item.Title, keyword)) {
						itemFound = true;

						// render the current category
						ns.renderItems(catNid);
						
						// highlight item
						var activityItem = $('#ActivityItemContainer .ActivityItem[rel='+itemNid+']')
							.addClass('ActivityItemSelect');
						
						activityItem.siblings().removeClass('ActivityItemSelect');
						
						// move item to front
						$('#ActivityItemContainer .ActivityItems:first').prepend(activityItem);
						
						// display the item's info
						displayItem(item);
						
						// Highlight category button
						$('#body .CategoryButtons td').removeClass('active');
						$('#body .CategoryButtons td[rel=' + catNid + ']').addClass('active');
						return;
					}
				}
			}
		}
		
		if(itemFound == 0) {
			// Render the first category on pageload
			if(ns.Categories) {
				for(var categoryNid in ns.Categories) {
					ns.renderItems(categoryNid);
					break;
				}
			}
		}
	});

})();