/*
 * 	Product Slider 1.0 - jQuery plugin
 *	http://ptcpay.com
 *
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
var timeout;

$(document).ready(function() {
	$('.product ul li.quality').css('backgroundImage', 'url(images/quality_hover.jpg)');
	$('.product div.quality').show();
	
	timeout = setTimeout("changeSlide(1)", 15000);
	
	$('.product ul li a').click(function()  {
		var tabClass = $(this).parent().attr('class');

		// Remove the current active image
		// Change the hover background images
		$('.product ul li').each(function() {
			$(this).css('backgroundImage', 'none'); // set image to none;
			$(this).hover(function() {
				$(this).css('backgroundImage', 'url(images/' + $(this).attr('class') +  '_hover.jpg)');
			}, function() {
				$(this).css('backgroundImage', 'none');
			});
		});

		// change clicked li to active
		$(this).parent().css('backgroundImage', 'url(images/' + tabClass +  '_hover.jpg)');
		$(this).parent().hover(function() {
				$(this).css('backgroundImage', 'url(images/' + tabClass +  '_hover.jpg)');
			}, function() {
				$(this).css('backgroundImage', 'url(images/' + tabClass +  '_hover.jpg)');
		});
		
		$('.product div').hide();
		$('.product div.' + tabClass).show();
		
		clearTimeout(timeout);
		if(tabClass == 'quality') i=1;
		if(tabClass == 'reliability') i=2;
		if(tabClass == 'functionality') i=0;
		timeout = setTimeout("changeSlide(i)", 20000);
	});
});

function changeSlide(i) {
	var classes = new Array(3);
	classes[0] = 'quality'; classes[1] = 'reliability'; classes[2] = 'functionality';
	
	$('.product ul li').each(function() {
		$(this).css('backgroundImage', 'none'); // set image to none;
		$(this).hover(function() {
			$(this).css('backgroundImage', 'url(images/' + $(this).attr('class') +  '_hover.jpg)');
		}, function() {
			$(this).css('backgroundImage', 'none');
		});
	});
	
	// change clicked li to active
	$('.product ul li.'+classes[i]).css('backgroundImage', 'url(images/' + classes[i] +  '_hover.jpg)');
	$('.product ul li.'+classes[i]).hover(function() {
			$(this).css('backgroundImage', 'url(images/' + classes[i] +  '_hover.jpg)');
		}, function() {
			$(this).css('backgroundImage', 'url(images/' + classes[i] +  '_hover.jpg)');
	});
	
	$('.product div').hide();
	$('.product div.' + classes[i]).show();

	if(i==2) j=0;
	else j=i+1;
	timeout = setTimeout("changeSlide(j)", 20000);
}