jQuery(window).load(function(){
	var bannerItems = new Array();
	var thumbItems = new Array();
	var titles = new Array();
	var tooltips = new Array();
	var current = -1;

	//Cufon.replace(".tooltipRight");

	jQuery('.bannerContainer .bannerItem').each(function(i){
		bannerItems[i] = jQuery(this);
	});
	
	jQuery('.bannerContainer ul a').each(function(i){
		thumbItems[i] = jQuery(this);

		setInactive(i);
		//setActive(0);

		jQuery(this).mouseover(function(ev){
			titles[i] = jQuery(this).attr('title');
			jQuery(this).attr('title','');
			setActive(i);
			showTooltip(i);
		});

		jQuery(this).mouseleave(function(){
			jQuery(this).attr('title',titles[i]);
			if(i!=current){
				setInactive(i);
			}
			hideTooltip(i);
		});

		jQuery(this).mousemove(function(ev){
			moveTooltip(i,ev.pageX);
		});

		jQuery(this).click(function(event){
			event.preventDefault();
			jQuery(bannerItems).each(function(j){
				if(i==j){
					setActive(j);
					current = j;
					bannerItems[j].fadeIn(1000);
				}else{
					setInactive(j);
					bannerItems[j].fadeOut(1000);	
				}
			});
		});		
	});

	function moveTooltip(index,xPos){
		var offsetX = jQuery(thumbItems[index]).offset().left;
		var pos = parseInt(xPos-offsetX);
		var tooltipWidth = parseInt(jQuery(tooltips[index]).width());
		var offset = parseInt(tooltipWidth)/2;
		jQuery(tooltips[index]).css({"left":pos-offset+2+'px'});
	}

	function setActive(index){
		jQuery(thumbItems[index]).animate({'opacity':1},500,"linear");
	}

	function setInactive(index){
		jQuery(thumbItems[index]).animate({'opacity':0.4},500,"linear");
	}

	function showTooltip(index,xPos){
		if(!tooltips[index]){
			var title = titles[index];
			var tipHTML = jQuery('<div class="tooltip">\n\
				<div class="tooltipLiner">\n\
					<div class="tooltipLeft">\n\
						<div class="tooltipRight"><span>'+title+'</span></div>\n\
					</div>\n\
				</div>\n\
			</div>');
			jQuery(thumbItems[index]).parent().append(tipHTML);
			tooltips[index] = jQuery(thumbItems[index]).parent().find('.tooltip');

			jQuery(tooltips[index]).css('opacity',0).show();

			var spanWidth = parseInt(jQuery(thumbItems[index]).parent().find('.tooltipRight span').width());
			var leftWidth = parseInt(jQuery(thumbItems[index]).parent().find('.tooltipLeft').css('padding-left'));
			var rightWidth = parseInt(jQuery(thumbItems[index]).parent().find('.tooltipRight').css('padding-right'));

			var tooltipWidth = spanWidth+leftWidth+rightWidth+2;

			var containerWidth = parseInt(jQuery(thumbItems[index]).parent().width());
			var offset = (tooltipWidth-containerWidth)/2;

			jQuery(tooltips[index]).css('left',0+'px').width(tooltipWidth);
		}
		jQuery(tooltips[index]).animate({"opacity":1},{queue:false},500,"linear");
	}

	function hideTooltip(index){
		jQuery(tooltips[index]).animate({"opacity":0},{queue:false},500,"linear");
	}
	
});