function banerInit()
{
  $('.bottomBaner>ul>li').each(function(i) {
    var parentHeight  = 121,//$(this).parent().height(),
        itemHeight    = 90,//$(this).find('img').height(),
        topH           = (parentHeight - itemHeight) / 2
    ;

    $(this).css('top', topH);
  });
  banerStart(0);
}

function banerStart(itemStart)
{
  var n1,n2,n3,n4,next,
      ln = $('.bottomBaner>ul>li').length - 1
  ;

  if(itemStart <= ln) {n1 = itemStart; next = itemStart+1;} 
  else {n1 = 0; next = 1;}

  if(next <= ln) {n2 = next; next++;} 
  else {n2 = 0; next = 1;}

  if(next <= ln) {n3 = next; next++;} 
  else {n3 = 0; next = 1;}

  if(next <= ln) {n4 = next; next++;} 
  else {n4 = 0; next = 1;}

  var one = $('.bottomBaner>ul>li:eq(' + n1 + ')'),
      two = $('.bottomBaner>ul>li:eq(' + n2 + ')'),
      three = $('.bottomBaner>ul>li:eq(' + n3 + ')'),
      four = $('.bottomBaner>ul>li:eq(' + n4 + ')')
  ;

  banerAnimation(one, two, three, four, next);
}

function banerAnimation(one, two, three, four, next)
{
  var nTimeIn     = 600,
      nTimeOut    = 600,
      time1       = 0,
      time2       = time1 + nTimeIn,
      time3       = time2 + nTimeIn,
      time4       = time3 + nTimeIn,
      timeToHide  = 800,
      animTime    = 500
  ;

  // Item 1
  one.delay(time1).animate({left: 0}, {complete: function() {
    $(this).delay((time4 + timeToHide + (0 * nTimeOut))).animate({opacity: 0}, {complete: function() {
      $(this).css({'left': 2000, 'opacity':1});
    }});
  }}, animTime);

  // Item 2
  two.delay(time2).animate({left: 190}, {complete: function() {
    $(this).delay((time3 + timeToHide + (1 * nTimeOut))).animate({opacity: 0}, {complete: function() {
      $(this).css({'left': 2000, 'opacity':1});
    }});
  }}, animTime);

  // Item 3
  three.delay(time3).animate({left: 380}, {complete: function() {
    $(this).delay((time2 + timeToHide + (2 * nTimeOut))).animate({opacity: 0}, {complete: function() {
      $(this).css({'left': 2000, 'opacity':1});
    }});
  }}, animTime);

  // Item 4
  four.delay(time4).animate({left: 570}, {complete: function() {
    $(this).delay((time1 + timeToHide + (3 * nTimeOut))).animate({opacity: 0}, {complete: function() {
      $(this).css({'left': 2000, 'opacity':1});
      banerStart(next);
    }});
  }}, animTime);
}

var timer;

function initSwitch() {
  $('.switchImage>li').css({'opacity': 0});
  $('.switchImage>li:eq(0)').css({'opacity': 1});
  timer = setTimeout(function() {
    start(1);
  }, 6000);
}
function switchImg(current, next)
{
	
  $('div.switchImagePanel>.buttons>li').removeClass('activ');
  $('div.switchImagePanel>.buttons>li:eq('+next+')').addClass('activ');

	$('.switchImage>li').css('display','block');

	$('.switchImagePanel>.buttons>li').each(function(i) {
		if(i != next) {
  		$('.switchImage>li:eq('+i+')').animate({opacity: 0}, {complete: function() {
  			$(this).css('display','none');
  		}}, 2000);
  		$('.switchImagePanel>.title:eq('+i+')').fadeTo(1000, 0);
  	} else {
  		$('.switchImage>li:eq('+i+')').animate({opacity: 1}, {complete: function() {
  			$(this).css('display','block');
  		}}, 2000);
  		$('.switchImagePanel>.title:eq('+i+')').fadeTo(1000, 1);
  	}
	});

};

function start(item) {
  window.clearTimeout(timer);
	var ln = $('.switchImage > li').length - 1;
	var current = item - 1;
	var next		= item;

	if(current<0) current = ln;
	if(next>ln) next = 0;
  switchImg(current, next);

	timer = window.setTimeout(function() {
		start(next+1);
	}, 8000 );
};
$(document).ready(function(){
  $('.switchImagePanel>.buttons>li').each(function(i) {
  	
    $(this).bind('click', function() { start(i); console.log(i); });
  });
});