// JavaScript Document

// Load EventHandlers on document ready
$(document).ready(function() { 
	addEventHandlers();	
});

// Ajax Function - Filter
function ajaxFilter(id) {
	 doBlockUI(); 
	 $.ajax({
	   type: "POST",
	   url: "index.php?",
	   data: "action=filter&id="+id+"",
	   success: function(msg){
			// replace orgs div with new data on id of selection
			setTimeout(function() {
				$('.organizations').unblock();
				$("#orgs").replaceWith("<div id='orgs'>"+msg+"</div>");
			}, 2000);
	   }
	 });
}

// Ajax Function - Select
function ajaxSelect(id) { 
	 $.ajax({
	   type: "POST",
	   url: "index.php?",
	   data: "action=select&id="+id+"",
	   success: function(msg){
		   // update table with new selected id
		 	$("#selected").append(msg);	  
	   }
	 });
} 

// Ajax Function - Info
function ajaxInfo(id) {
		$.ajax({
		  type: "POST",
		  url: "index.php?",
		  data: "action=info&id="+id+"",
		  success: function(msg){
			  // update modal box with selected id
				$.modal(msg,{
				overlayCss: {},
				onOpen: function (dialog) {
					
					$("#category").hide();
					$("#rank").hide();
				
				  dialog.overlay.fadeIn('slow', function () {
					dialog.container.slideDown('slow', function () {
					  dialog.data.fadeIn('slow'); // See Other Notes below regarding
													 // data display property and
													 // iframe details
					});
				  });
				},
				onClose: function (dialog) {
					
					$("#category").show();
					$("#rank").show();
					
				  dialog.overlay.fadeOut('slow', function () {
					dialog.container.slideUp('slow', function () {
					  dialog.data.fadeOut('slow'); // See Other Notes below regarding
													 // data display property and
													 // iframe details
							$.modal.close();
					});
				  });
				}});
		  }});
			  
}

// BlockUI 
function doBlockUI(){
	$(".organizations").block({ message: '<div id="filter"><img src="images/ajax-loader.gif" />&nbsp;Just a moment: Loading Organizations...</div>', 
		css: {
			width: '50%',
			border: 'none', 
			padding: '10px', 			
			backgroundColor: '#fff', 
			'-webkit-border-radius': '5px', 
			'-moz-border-radius': '5px', 
			opacity: '1', 
			color: '#000',
			cursor: 'wait'
		},
		overlayCSS: {
			backgroundColor: '#666',
			opacity: '0.3'
		}
	});
	
}

function onSelectChange(id){
	var id;
	if(id !=0){
		ajaxFilter(id);
	}
}

function onOrgChecked(orgId){
	var orgId;
	// Add Ajax here to get a response from server for query of id
	ajaxSelect(orgId);
	var n = countRows();
	if (n > 0){
		$("#0").fadeOut(1000,function() {
			$("#0").remove();
		});
	}
}

function onOrgUnChecked(orgId){
	var orgId;
	// No Ajax here rather just removing the table row based on id passed
	$("tr#"+orgId).fadeOut(1000,function() {
		$("tr#"+orgId).remove();
	});
	var n = countRows();

	if (n <= 2){
		$("#selected").append("<tr id='0'><td colspan='2'>No organizations selected...</td></tr>");
	}	
}

function removeCheck(orgId){
	// This function runs only if org is removed from table
	var orgId;
	$("#orgs").find("input[@type$='checkbox']").each(function(){
		var val = $(this).val();
		if(val == orgId){
			this.checked = false;
		}
	});
}

function countRows(){
	var table = document.getElementById("selected");
	var rows = table.getElementsByTagName("tr");
	var n = rows.length; 
	return n;
}

function addEventHandlers(){
	$("#category").livequery('change',function(event){
		var id = $(event.target).val();
		onSelectChange(id);		
	});
	$(".org").livequery('click',function(event){
		var orgId = $(this).val();		
		if (this.checked){
			onOrgChecked(orgId);
		} else { 
			onOrgUnChecked(orgId);
		}
	});
	$("#orgs a").livequery('click',function(event){
		event.preventDefault();
		var id = $(this).attr("id");
		orgId = id.substring(6);
		ajaxInfo(orgId);
	});
	$("a.remove").livequery('click',function(event){
		 var id = $(this).attr("id");
		 orgId = id.substring(7);
		 removeCheck(orgId);
		 onOrgUnChecked(orgId);
	});
	
}