var initialDistance;
var blockWidth = 147;
var lefts = new Array();
var tops = new Array(180, 120, 60, 80, 140, 200);
var distance;
var topOffset = 0;
function calculate() {
	initialDistance = $(document).width() * 0.05;
	distance = ($(document).width() - ($('table.tabby').size() * blockWidth) - (initialDistance * 2)) / ($('table.tabby').size() - 1);
	if(distance/ $(document).width() > 0.03) { 
		distance = $(document).width()* 0.03;
		initialDistance = ($(document).width() - distance * ($('table.tabby').size() - 1) - ($('table.tabby').size() * blockWidth)) / 2;
	}
	if(!topOffset)
		topOffset = $('table.tabby').position()['top'];
	$('table.tabby').each(function(i, el){
		lefts[$(el).attr('id')] = initialDistance + ((distance + blockWidth) * i);
		$(el).css({left: lefts[$(el).attr('id')], top: topOffset + tops[i], position: 'absolute'});
		tops[$(el).attr('id')] = topOffset + tops[i];
	});
}
$(window).resize(function() {
	calculate();
});

$(document).ready(function() {
	calculate();
	$('table.tabby').hover(
		function(){
			var el = this;
			var tmp = parseFloat(lefts[$(el).attr('id')].toString().replace("px", ""))-74;
			var left = $(document).width() - tmp - 295 > 0 ? tmp : $(document).width() - 295 - 10;
			if(left < 10)left = 10; 
			$(el).css('z-index', 1000);
			$(this).find('.tabby-internal').first().animate({height: '0px'}, 100, 'swing', function(){
				$(el).find('.tabby-internal').first().hide();
				$(el).animate({
				    height: '185px',
				    width: '295px',
				    'font-size': '100%',
				    left: left + 'px',
				    top: (parseFloat(tops[$(el).attr('id')].toString().replace("px", "")) - 46) + 'px'
				}, 300, 'swing', function(){
					$(el).find('td').first().animate({
						'border-radius': '5px 5px 5px 5px'
	   				}, 10, 'swing', function(){
	   					$(el).find('.tabby-content').first().animate({
							'border-bottom-left-radius': '5px',
					    		'border-bottom-right-radius': '5px',
					    		padding: '10px 10px 20px'
						}, 10, 'swing', function(){
							$(el).find('.tabby-internal > ul').first().show();
							var elementsNum = $(el).find('.tabby-internal > ul > li').size();
							// hack for "etc"
							if ($(el).attr('id') == 'tabby_21') elementsNum++;
							$(el).find('.tabby-internal').first().css({height: '0px'}).show().animate({height: (elementsNum * 17 + 10) + 'px'}, 100, 'swing');
						});
		   			});
				});
			});

			  				
		},
		function(){
			var el = this;
			$(el).css('z-index', 900);
			$(this).find('.tabby-internal').first().stop(true, false).animate({height: '0px'}, 200, 'swing', function(){
				$(el).find('.tabby-internal').first().hide();
				$(el).animate({
    				height: '92px',
    				width: '147px',
					'font-size': '50%',
					left: lefts[$(el).attr('id')],
					top: tops[$(el).attr('id')] + 'px'
				}, 300, 'swing', function(){
					$(el).find('.tabby-content').first().animate({
						'border-bottom-left-radius': '5px',
				    		'border-bottom-right-radius': '5px',
				    		padding: '5px 5px 10px'
					}, 10, 'swing', function(){
						$(el).find('td').first().animate({
							'border-radius': '5px 5px 5px 5px'
						}, 10, 'swing', function(){
							$(el).find('.tabby-internal > ul').first().hide();
							$(el).find('.tabby-internal').first().show().animate({height: '10px'}, 200, 'swing');
							if($(el).css('z-index') == 900)$(el).css('z-index', 'auto');
						});
					});
				});
			});
		}
	);
});