$(document).ready(function() {

	$('ul#top-banner li a, ul#banTop li a , ul#banBot li a').hover(function() {
		var el = $(this);
	
		var text = el.find('p.title').text(text);
		el.find('img.on').fadeIn('fast').end().find('p.title').text(text).fadeIn('slow').end();
		el.append(overDiv).find('.over').css({opacity:0.7}).fadeIn('fast').end().find('p.desc').text(text).fadeIn('slow').end();		
		}, function() {
			var el = $(this);
			el.find('img.on').fadeOut('fast');
			el.find('p.title').fadeOut('fast');
		$('.over, p.desc').fadeOut('fast', function() {
			$(this).remove();
		});
	});
	
	topWidth = $('#banTop li').length * tbw;
	btmWidth = $('#banBot li').length * bbw;

	$('#topContainer').width(topWidth);
	$('#btmContainer').width(btmWidth);
	
	longDiv = (topWidth > btmWidth) ? $('#topContainer') : (btmWidth > topWidth) ? $('#btmContainer') : null;
	shortDiv = (longDiv) ? $('#banners>div').not('#'+longDiv.attr('id')) : null;
	
	if(Math.max(topWidth, btmWidth) > $('#banners').width()) {
		if(Math.min(topWidth, btmWidth) > $('#banners').width() ) {
			moveBlock(shortDiv).floatRight();
		} else {
			moveBlock(shortDiv).floatLeft();
		}
	}
	
	$('#banners').jScrollPane();
		
	$(window).resize(function() {
		clearTimeout(f);
		setLayout();
		if(Math.max(topWidth, btmWidth) > $('#banners').width()) {
			if(Math.min(topWidth, btmWidth) > $('#banners').width() ) {
				moveBlock(shortDiv).floatRight();
			} else {
				moveBlock(shortDiv).floatLeft();
			}
		}
	});
	
	setUp();
	
});
	
function setUp() {
	setLayout();
	if(Math.max(topWidth, btmWidth) > $('#banners').width()) {
		if(Math.min(topWidth, btmWidth) > $('#banners').width() ) {
			moveBlock(shortDiv).floatRight();
		} else {
			moveBlock(shortDiv).floatLeft();
		}
	}
}
	
function setLayout() {	
	$('#banners').width($('#wrapper').innerWidth() - 185).jScrollPane();
	}
	
function setHeight() {	
	var wh = $(window).height();
	if(wh > 650 ) {
		$('#top, #bottom').height(wh/2 - 5);
		}
	else {
		$('#top').height('330px');
		}
	}
	
function moveBlock(div)
{
	var el = div[0];
	var ww = $('#banners').outerWidth();
	var ew = div.width();
	window[div.attr('id') + "_obj"] = el;
	el.cx = parseInt(div.css('left'));
	el.move = function(x){
		if(x>0) div.css({left: x});
		}

	el.floatRight=function()
	{
		var pX = $('#banners').css('left').slice(0,-2);
		var dist = ew - (-pX + ww);
		dist = (dist>0) ? 0 : dist;
		if (dist<=0) this.cx += (-dist - this.cx)/10;
		this.move(this.cx);
		f = setTimeout(this.id + "_obj.floatRight()", 30);
	}

	el.floatLeft=function()
	{
		var pX = $('#banners').css('left').slice(0,-2);
		this.cx += (-pX - this.cx)/10;
		this.move(this.cx);
		f = setTimeout(this.id + "_obj.floatLeft()", 30);
	}
	return el;
}

var overDiv = '<div class="over"></div><p class="desc"></p>';
var topW = 0;
var botW = 0;
var tbw = 254; // top banner item width;
var bbw = 174; // bottom banner item width;