$(document).ready(function () {
	
	var image_src = '';
	var heading_text = '';
	var category_text = '';
	var price_text = '';

	function selectNav() {
	  $(this)
		.parents('ul:first')
		  .find('a')
			.removeClass('on')
		  .end()
		.end()
		.addClass('on');
	}

	$.ajax({
		url: "app-list/app-list-date.html",
		cache: false,
		success: function(html){
			$("#sorted_list").html(html);
			activatePopups();
		}
	});
	
	selectNav.call($("#sortby_date"));
	
	
	$("#sortby_date").click(function (event) { 
		selectNav.call($(this));
		$("#sorted_list").load("app-list/app-list-date.html");
		event.preventDefault();
    });
	$("#sortby_alpha").click(function (event) { 
		selectNav.call($(this));
		$("#sorted_list").load("app-list/app-list-name.html");
		event.preventDefault();
    });
	$("#sortby_random").click(function (event) { 
		selectNav.call($(this));
		$("#sorted_list").load("app-list/app-list-random.html");
		event.preventDefault();
    });
	
	function activatePopups() {

		$(".app_item_listing").mouseenter(function(){
			var category_text = $(this).find(".category_text").text().toUpperCase();

			$(this).append('<div class="category_widget">' + category_text + '</div>');
			$(".category_widget").css({'display' : 'block', 'opacity' : '0.0'});
			
			$(".category_widget").animate({
			opacity: 1.0
			}, 300 );
		});
		
		$(".app_item_listing").mouseleave(function(){
			$(".category_widget").remove();
		});
	}
	
	/*function activatePopups() {

		$(".app_item_listing").mouseenter(function(){
			image_src = $(this).find(".image_src").text();
			heading_text = $(this).find(".heading_text").text();
			category_text = $(this).find(".category_text").text();
			price_text = $(this).find(".price_text").text();

			$(this).append(popupHtml());
			$(".popup").css({'display' : 'block', 'opacity' : '0.0'});
			
			$(".popup").animate({
			opacity: 1.0,
			bottom: 90
			}, 300 );
		});
		
		$(".app_item_listing").mouseleave(function(){
			$(".popup").remove();
		});
	}
	
	function popupHtml() {
		var output = '<div class="popup">';
		output += '<a href="[~[+id+]~]"><img src="' + image_src + '" alt="app icon" class="icon" /></a>';
		output += '<div class="popup_rhs">';
		output += '<h4>' + heading_text + '</h4>';
		output += '<p>Category: ' + category_text + '</p>';
		output += '<p>Price: &euro;' + price_text + '</p>';
		output += '</div>';
		output += '</div>';
		
		return output;
	}*/
	
});