$(document).ready(function(){
	$('#search_box').bind('blur', function(){resetDefaultText($(this), 'Search Products')});
	$('#search_box').bind('focus', function(){clearDefaultText($(this), 'Search Products')});
	resetDefaultText($('#search_box'), 'Search Products');
});

function clearDefaultText(elem, text){
	if(elem.val() == text){
		elem.val('');
		elem.css('color', '#000000');
	}
}

function resetDefaultText(elem, text){
	if(elem.val() == ''){
		elem.val(text);
		elem.css('color', '#808080');
	}
}

function clearDefaultSelect(elem, value){
		if(elem.val() == value){
			elem.css('color', '#000000');
			elem.children().first().remove()
		}
}

function changeCategory(id){
	//Remove the current class from any group li that has it, add it to the new one, and toggle to the correct category
	$('li.category.current').removeClass('current');
	$('li#category-' + id).addClass('current');	
	toggleDiv('category', id);	
}

function changeTrack(id, name){
	//Update the track link and toggle to the correct div
	$('a#track').text(name);
	toggleDiv('tracks', id);
	$.cookie('trackId', id, {expires: 365, path: '/'});
	$.modal.close();
}

function toggleDiv(prefix, id){
	//Hide any invisible divs that might not be showing because of a hidden parent
	$('div.' + prefix + ':hidden').hide();
	//Now if there's a viible div then animatedly hide it and show the div with id=prefix-id on completion
	if($('div.' + prefix + ':visible').size()){
		$('div.' + prefix + ':visible').hide('fast', function(){
			$('div#' + prefix + '-' + id).show('slow');
		});
	}else{
		$('div#' + prefix + '-' + id).show('slow');
	}
}

function toggleCategoryNav(id){
	//Check if its open
	if($('li#group-' + id).hasClass('open')){
		//Close it
		$('li#group-' + id).removeClass('open');
	}else{
		//Open it
		$('li#group-' + id).addClass('open');
	}
	$('ul#group-' + id).toggle('slow');		
}

function toggleFaq(id){
	$('#faq-'+id).toggle('blind', {direction: 'vertical'},'slow');
}

function toggleOtherAmount(elem){
	if(elem.val() == '0'){
		$('#amount2').show('slow');
		$('input#amount1').removeAttr('name');
		$('input#amount2').attr('name', 'amount');
	}else{
		$('#amount2').hide('slow');
		$('input#amount2').removeAttr('name');
		$('input#amount1').attr('name', 'amount');
		elem.attr('checked', true);
	}
}
