var $j = jQuery.noConflict();

$j(function(){
	
	$j('#logo').click(function(){
		window.location = 'http://www.infomediainc.com';
	});
	var clickedCategory = false;

	// fade all of our product logos to 30% immediatly
	$j("a[class*='productLogo']")
		.fadeTo(0, .2);
	
	// when you hover over the name of a category
    $j("a[rel*='cat_']").hover(function(){
    	// remove the underline for a previously clicked category
    	if (clickedCategory){
    		clickedCategory.css('text-decoration', 'none');
    		clickedCategory = false;
    	}
    	// add an unerline to this category
    	$j(this).css('text-decoration', 'underline');
    	
    	// get the name of our class, which is the name of the category of products
    	// to highlight
    	var className = $j(this).attr('rel');
    	
    	// fade the logos to full opacity
    	// draw a border around the logogs
    	$j("a[class*='"+className+"']")
    		.fadeTo(200, 1);
    	return false;
    	
    }, function(){
    	
    	if (!clickedCategory){
	    	// remove unerline from this category
	    	$j(this).css('text-decoration', 'none');
	    	
	    	// get the name of our class, which is the name of the category of products
	    	// to highlight
	    	var className = $j(this).attr('rel');
	
	    	// fade the logos to 30% opacity
	    	// remove the border around the logogs
	    	$j("a[class*='"+className+"']")
	    		.fadeTo(200, .2);
    	}
    	return false;
    });

    
    // when you hover over a product logo
    $j("a[class*='productLogo']").hover(function(){
    	// fade the logo to full opacity
    	$j(this)
    		.fadeTo(200, 1);
    	
    	// get the name of the category
    	var classNames = $j(this).attr('class').split(" ");
    	
    	// do some styling to the category name
    	$j("a[rel*='"+classNames[1]+"']").css('text-decoration', 'underline');
    	return false;
    	
    }, function(){
    	// fade the logo to 30% opacity
    	$j(this)
    		.fadeTo(200, .2);
    	
    	// get the name of the category
    	var classNames = $j(this).attr('class').split(" ");
    	
    	// remove styling from the category name
    	$j("a[rel*='"+classNames[1]+"']").css('text-decoration', 'none');
    	return false;
    });
    
    // when a category is clicked on
    $j("a[rel*='cat_']").click(function(){
    	// make it's text underlined
    	$j(this).css('text-decoration', 'underline');
    	
    	// highlight it's products
    	// get the name of our class, which is the name of the category of products
    	// to highlight
    	var className = $j(this).attr('rel');
    	
    	// fade the logos to full opacity
    	// draw a border around the logogs
    	$j("a[class*='"+className+"']")
    		.fadeTo(200, 1);
    	
    	clickedCategory = $j(this);
    	
    	return false;
    });

});