$(document).ready(function(){

	
	$.get('http://astronim.com/topbanner.html', null, function(data){
	
		$('#topBan').html(data);
	
		$('#topBan .c>ul').each(function (i) {
			$('>li', this).each(function (j) {
			   this.style.left = j*197;
			   var posY = Math.floor(Math.random()*20)+10;
			   this.style.top = posY;
			   $(this).attr('posY', posY);
			   $(this).attr('cntr', j);
			   
			   $('ul>li', this).each(function (k) {
				 $(this).addClass('cntr_'+k);
			   });
			   
			});
		});
		
		$('#topBan .c>ul').each(function (i) {
			 $(this).addClass('cntr_'+i);
		});
		
		$('#topBan .h>ul>li').each(function (i) {
			   $(this).attr('cntr', i);
		});
		
		$('#topBan .h>ul>li').click(function () {
			 $('#topBan .h>ul>li.current').removeClass('current');
			 $(this).addClass('current');
			 var cntr = $(this).attr('cntr');
			 $('#topBan .c>ul.current').removeClass('current');
			 $('#topBan .c>ul.cntr_'+cntr).addClass('current');
		});
		
		$('#topBan .c>ul>li').hover(function(){
			if (tumbSelected) return;
			
			$(this).stop().animate({
				'top': 0
			});
			curTumbOver = $(this);
			
		}, function(){
		
			if (tumbSelected) return;
			
			var posY = $(this).attr('posY');
			$(this).stop().animate({
				'top': posY
			});
			
		});
		
		$('#topBan .c>ul>li').click(function(){
			
			if (tumbSelected) return;
			tumbSelected = true;
			
			var offset = curTumbOver.offset();
			var posX = offset.left;
			
			$('#topBan .astronim').css('left', posX);
			$('#topBan .finger').css('left', posX);
			
			$('#topBan .astronim').stop().animate({
				'top': 0
			}, 1000).animate({
				'top': -100
			}, 1000);
			
			$('#topBan .finger').stop().animate({
				'top': 0
			}, 1000).animate({
				'top': -140
			}, 1000);
			
			$('#topBan .c>ul>li').stop().animate({
				opacity: .5
			});
			
			curTumbOver.stop().animate({
				'top': 0,
				opacity: 1
			}, 1000).animate({
				'top': -140
			}, 1000);
			
			$('#overlay').height($('.body').height()+124);
			$('#overlay').delay(1000).fadeIn();
			
			
			imgSelectedNum = 0;
			showImg(imgSelectedNum);
			
		});
		
		$('#topBanPopup .close').click(closePop);
		$('#overlay').click(closePop);
		
		$('#topBanPopup  .prev').click(function(){
			showImg(imgSelectedNum-1, true);
		});
		$('#topBanPopup  .next').click(function(){
			showImg(imgSelectedNum+1, true);
		});
		
		if ($.browser.msie && $.browser.version == 6) {
			// DD_belatedPNG.fix('');
		} 
	
	});
	
	
});

var curTumbOver;
var tumbSelected = false;
var imgSelectedNum = 0;

var showImg = function(num, fast){
	
	imgSelectedNum = num;
	
	if (!fast){
		$('#topBanPopup').hide();
	}
	var txt = $(('ul>li.cntr_'+num+' h5'), curTumbOver).html()
	$('#topBanPopup .header').html('<div>'+txt+'</div>');
	
	var img = $(('ul>li.cntr_'+num+' i'), curTumbOver).html()
	$('#topBanPopup .img').empty();
	$('#topBanPopup .img').html(img);
	$('#topBanPopup .img img').load(function() {
		if (!fast){
			var popY = $('#topBanPopup').height()*(-1)-200;
			$('#topBanPopup').css('top', popY);
			$('#topBanPopup').show();
			$('#topBanPopup').stop().delay(1500).animate({
				top: -45
			}, 1500);
		}
	});

	var banImgLength = $('ul>li', curTumbOver).length;
	//alert(banImgLength+' '+num);
	if (num <= 0){
		$('#topBanPopup .prev').hide();
	} else {
		$('#topBanPopup .prev').show();
	}
	if ( num+1 >= banImgLength){
		$('#topBanPopup .next').hide();
	} else {
		$('#topBanPopup .next').show();
	}
	
	
}

var closePop = function(e){

	$('#overlay').delay(2000).fadeOut().height(1);
	
	var popY = $('#topBanPopup').height()*(-1)-200;
	$('#topBanPopup').stop().animate({
		top: popY
	}, 1000);
	
	$('#topBan .c>ul>li').stop().delay(2000).animate({
		opacity: 1
	});
	
	var posY = curTumbOver.attr('posY');
	curTumbOver.stop().delay(1000).animate({
		top: 0
	}, 1000).animate({
		top: [posY, 'easeOutBack']  
	}, 1000);
	
	$('#topBan .astronim').stop().delay(1000).animate({
		top: 0
	}, 1000).animate({
		top: -100
	}, 1000);
	
	$('#topBan .finger').stop().delay(1000).animate({
		top: 0
	}, 1000).animate({
		top: -140
	}, 1000);
	
	$('#topBan .c>ul>li').stop().delay(2000).animate({
		opacity: 1
	});
	
	tumbSelected = false;
};