$(document).ready(function(){	init(); });
var nutrients = new Array();

function init()
{

  	$("#group a").live("click", selectGroup);
	$("#food .item").live("click", selectFood);
	$("#food .item").live("mouseover", function()
	{
		$(this).addClass('itmHover');		
	});
	$("#food .item").live("mouseout", function()
	{

		$(this).removeClass('itmHover');		
		
	});
	$("#search").submit(function() {
	if ( jQuery.trim($('#FoodKeywords').val()) == "") 
	{
		alert("Please enter a term to search for!");
		return false;
	}
  		getData("/" + $('#FoodKeywords').val());
  		return false;
	});

	// for some weired bug Change does not work with IE.. click seem to do the job.
	if ( $.browser.msie	)
		$("#servingsSelect").live("click",updateServings);
	else
		$("#servingsSelect").live("change",updateServings);
	
	$('#scroll_holder').jScrollPane({showArrows:true, scrollbarWidth:16});	
}
function selectGroup()
{
	getData($(this).attr('href'));
	return false;
}

function selectFood()
{
	if ( jQuery.trim($('#FoodKeywords').val()) == "") 
		$keywords = "list";
	else
		$keywords =$('#FoodKeywords').val();
	$url = "/" + $keywords  + "/food/"+ $(this).attr("id").substring(2) ;


	getData( $url );
	return false;	
}

function updateServings()
{

	$GramFactor = $(this).val();
	$saved = false;
	if ( nutrients.length  == 0 )
	{
		$saved = true;
	}
	i = 0;
	$.each($('#nutrients ul li'), function (intIndex, objValue) 
	{
		$oldValue = "";
		if ( $saved == true )
		{
			nutrients.push( $(".val",objValue).html() );
			$oldValue = $(".val",objValue).html();
//			alert($(".val",objValue).html());
		}
		else
		{
			$oldValue = nutrients[i];
		}
		$newValue = parseFloat($oldValue) * parseFloat($GramFactor) / 100.00;

		$(".val", objValue).html($newValue.toFixed(2));
		i++;
	});
}

function getData($url)
{
	startLoader();
	$.ajax({
	  url: $url, 
	  cache: false,
	  dataType:"json",
	  success: function($retValue){
		updateGroups($retValue['group']);
		if ( $retValue['food'] )
			formatFoodItems($retValue['food']);
		else
			displayFoodDetail($retValue['foodDetail']);
		$('#food').css('display', 'block');

	},
	error: function(XMLHttpRequest, textStatus, errorThrown)
	{
		alert("error...\n" + errorThrown);
	}
	});
}

function updateGroups( $content )
{

	$groupDisplay = "";
	$keywords = $('#FoodKeywords').val();
	if ( jQuery.trim($keywords) == "") $keywords = "list";
	$.each($content, function (inIndex, objValue) 
	{
		$groupDisplay += "<li>";
		if ( objValue['0']['count'] == 0 )
		{
			$groupDisplay += objValue['fd_group']['FdGrp_Desc']+" ("+objValue['0']['count']+")";
		}
		else
		{
			$url = "/"+ $keywords + "/"+ objValue['fd_group']['FdGrp_Cd'];
			$groupDisplay += "<a href=\""+$url +"\">" + objValue['fd_group']['FdGrp_Desc'] + " ("+ objValue['0']['count'] +")" + "</a>";
		}
		$groupDisplay += "</li>";
		
	});
	$('#group ul').html($groupDisplay);
}

function formatFoodItems($content)
{
	$formatedContent = "";
	$.each($content, function (intIndex, objValue) 
	{
		if ( objValue )
		{
			$itemDisplay= displayObj( objValue );
			$formatedContent += $itemDisplay;	
		}
	})
	
	document.getElementById('scroll_holder').innerHTML = $formatedContent;
	$('#scroll_holder').jScrollPane({showArrows:true, scrollbarWidth:16});
	
}


function startLoader()
{
		
	document.getElementById('scroll_holder').innerHTML = "<div style='height:100px' id='loader'>loading...<img src='../img/loader.gif' /> </div>";
	$('#scroll_holder').jScrollPane({showArrows:false});
}


function displayObj( $strData )
{

	var $a = $strData.split("|");
	
 	var $obj = new Array();
	$obj['food_id'] 	= $a [0];
	$obj['gp_id'] 		= $a [1];
	$obj['food_name'] 	= $a [2];	
	$obj['cal'] 		= $a [3];
	$obj['fat'] 		= $a [4];
	$obj['protein'] 	= $a [5];
	$obj['carb'] 		= $a [6];	

	var $strHtml = 	"<div class='item' id='i_"+$obj['food_id']+"'>" +
				"<h3>" + $obj['food_name'] + "</h3>" +
				"<div>" +
					"<span class='cal'><span class='lbl'>Cal: </span><span class='val'>"+$obj['cal'] +"</span></span>" +
					"<span class='fat'><span class='lbl'>Total Fat(g): </span><span class='val'>"+$obj['fat'] +"</span></span>" +
					"<span class='pro'><span class='lbl'>Protein(g): </span><span class='val'>"+$obj['protein'] +"</span></span>" +
					"<span class='carb'><span class='lbl'>Carb(g): </span><span class='val'>"+$obj['carb'] +"</span></span>" +
				"</div>" +
			"</div>";
		
	return $strHtml;
}

function displayFoodDetail( $foodDetail )
{
	nutrients = new Array();
	document.getElementById('scroll_holder').innerHTML = $foodDetail;
	$('#scroll_holder').jScrollPane({showArrows:true, scrollbarWidth:16});	
	// ie fix for the change event not firing

}