$(function(){
  function load_img(block){
	// определяем количество элементов в массиве
	count = arImages[block].length;
	// генерация случайного индекса
	index = Math.floor(Math.random( ) * (count))
	// вставляем картинку в центральный блок
	$("#"+block+" .content_center").html(
	  "<img src='img/"+arImages[block][index]['src']+"' width='200' height='400' alt='"+arImages[block][index]['title']+"' style='margin: auto;'/>"
	);
  }

  $.get('uslugi.html','',function(data){$(data).appendTo('#uslugi'); load_img('uslugi')});
  $.get('po.html','',function(data){$(data).appendTo('#po'); load_img('po')});
  $.get('doc.html','',function(data){$(data).appendTo('#doc'); load_img('doc')});
  $.get('client.html','',function(data){$(data).appendTo('#client'); load_img('client')});
  $.get('connect.html','',function(data){$(data).appendTo('#connect'); load_img('connect')});

  $('.page').serialScroll({
	target:'#sections',
	items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
	prev:'img#prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
	next:'img#next',// Selector to the 'next' button (absolute too)
	axis:'xy',// The default is 'y' scroll on both ways
	navigation:'#navigation ul li a',
	duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
	force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)

	//queue:false,// We scroll on both axes, scroll both at the same time.
	//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
	//stop:false,// Each click will stop any previous animations of the target. (false by default)
	//lock:true, // Ignore events if already animating (true by default)
	//start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )
	//cycle:false,// Cycle endlessly ( constant velocity, true is the default )
	//step:1, // How many items to scroll each time ( 1 is the default, no need to specify )
	//jump:false, // If true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
	//lazy:false,// (default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
	//interval:1000, // It's the number of milliseconds to automatically go to the next
	//constant:true, // constant speed

	onBefore:function( e, elem, $pane, $items, pos ){
		cid = $(elem).attr('id');
		$("#"+cid+" .content_center").html('');
		e.preventDefault();
		if( this.blur )
			this.blur();
	},
	onAfter:function( elem ){
		cid = $(elem).attr('id');
		load_img(cid);
		$('#navigation ul li a').removeClass('c');
		$('#navigation ul li.'+cid+' a').addClass('c');
		$('#tnavigation ul li a img').css('width', '140px');
		$('#tnavigation ul li a').css('padding-top', '10px');
		$('#tnavigation ul li a.'+cid).css('padding-top', '0px');
		$('#tnavigation ul li a.'+cid+' img').css('width', '180px');
	}
  });

  $('#tnavigation ul li a').bind(
  'click', function(){
	c = $(this).attr('class');
	$('#navigation ul li.'+c+' a').click();
  }
  );

  $('a.links').live(
  'click', function(){
	c = $(this).attr('rel');
	$('#navigation ul li.'+c+' a').click();
  }
  );


  
});