$(document).ready(function()
	{				
		var features_id = $('#current_features').val();
		var features_image_path = $('#' + features_id + '_image_path').val();
		
		setFeaturesClass(features_id);
		
		$('li').each(function()
			{
				var id = $(this).attr('id');
				
				if (id.indexOf("features_") >= 0) {
					$(this).bind('mouseover', 
						function() {							
							$(this).css({cursor: 'pointer'});							
							$('#' + id).attr('class', 'on');							
						}
					);
					
					$(this).bind('mouseout', 
							function() {	
								var current_features = $('#current_features').val();
								if (current_features == id) {
									$('#' + id).attr('class', 'on');
								} else {
									$('#' + id).attr('class', 'off');
								}
							}
						);
					
					$(this).bind('click',
						function() {	
							var image_path = $('#' + id + '_image_path').val();
							
							setFeaturesClass(id);
																				
							$('#current_features').val(id);
							loadFeaturesContent(id, image_path);														
						}
					)
				}
			}
		);
		
	}
);


function loadFeaturesContent(category, image_path) {		
	$('#featuresWrap').load(	
		'_features_prg.jsp',
		{category: category, image_path: image_path},
		function(data)
		{			
			var rtn = $.trim(data);
			$('#featuresWrap').html(rtn);			
		}
	)
}

function setFeaturesClass(id) {
	if (id == "features_rec") {
		$('#features_hot').attr('class', 'off');
		$('#features_latest').attr('class', 'off');
		$('#' + id).attr('class', 'on');
	} else if (id == "features_hot") {
		$('#features_rec').attr('class', 'off');
		$('#features_latest').attr('class', 'off');
		$('#' + id).attr('class', 'on');
	} else if (id == "features_latest") {
		$('#features_hot').attr('class', 'off');
		$('#features_rec').attr('class', 'off');
		$('#' + id).attr('class', 'on');
	}
}