$( document ).ready( function() {
	$( ".service-category" ).click( loadServices );
	$( "#services-back-link" ).click( showCategories );
	// .colorbox( { 
	// 		width: "50%", 
	// 		// inline: true, 
	// 		href: function() { 
	// 			// return '#' + $( this ).attr( 'class' ).match( /service-\d+/g )[ 0 ]; 
	// 			return $( this ).attr( 'href' ) + '&popup';
	// 		} 
	// 	} );
	
	$( '#controls-form-electronic' ).change( function () {
	if ( $( this ).attr( 'checked' ) ) {
		//do the stuff that you would do when 'checked'
		$( ".not-electronic" ).hide( 200 );
		return;
	}
	//Here do the stuff you want to do when 'unchecked'
	$( '.not-electronic' ).show( 200 );
	} );
	
} );

function loadServices() {
	location.hash = $( this ).attr( 'class' ).replace( 'service-category ', '');
	
	var area = $( '#services-area' );
	area.empty();
	
	var loading = $( '<div class="loading">Загрузка...</div>' )
					.appendTo( area );
	/* place loading message in center of holder and show it */
	var ltop = ( area.height() / 2 - loading.height() / 2 ) + 'px';
	var lleft = ( area.width() / 2 - loading.outerWidth() / 2 ) + 'px';
	loading.css( { top: ltop, left: lleft } ).show();
	
	area.load( $( this ).attr( 'href' ) + '&popup' );
	
	$( '#services-filter li' ).hide();
	$( '#services-back-link' ).show();
	return false;
}

function showCategories() {
	location.hash = '';
	
	var area = $( '#services-area' );
	area.empty();
	
	var loading = $( '<div class="loading">Загрузка...</div>' )
					.appendTo( area );
	/* place loading message in center of holder and show it */
	var ltop = ( area.height() / 2 - loading.height() / 2 ) + 'px';
	var lleft = ( area.width() / 2 - loading.outerWidth() / 2 ) + 'px';
	loading.css( { top: ltop, left: lleft } ).show();
	
	var link = $( 'a', this );
	$( '#services-filter li' ).show();
	$( '#services-back-link' ).hide();
	area.load( link.attr( 'href' ) + ' #services-area', function() {
		$( ".service-category" ).click( loadServices );
	} );
	return false;
}