/**
 * @author ABC
 */
$(document).ready(function(){
	var slotWidth, slotCount;
	var cycleTimeout = null;
	$("#fShow ul").wrap('<div id="scrollContainer" style="clear: both"></div>');
	slotWidth = $("#scrollContainer").width();
	slotCount = $("#fShow ul li").size();
	$("#scrollContainer").css({
		"width": slotWidth,
		"overflow": "hidden"
	});
	$("#fShow ul").css({
		"width": slotWidth * slotCount
	});
	$("#fShow ul li").css({
		"width": slotWidth,
		"float": "left"
	});
	
	if (cycleTimeout) clearInterval(cycleTimeout);
	cycleTimeout = setInterval(function() {
		var $imgs = $(".cycleABC img");
		var currrent = -10, next = 0;
		$imgs.each(function(idx) {
			if (!$(this).hasClass("altImage")) current = idx;
			if (idx == current + 1) next = idx;
		});
		$($imgs[current]).animate({"opacity": 0}, 3000).addClass("altImage");
		$($imgs[next]).animate({"opacity": 1}, 3000).removeClass("altImage");
	}, 8000);
	
	$thumbs = $('<div style="width: 100%"></div>');
	imgWidth = (100 - (slotCount * 1 - 1 + slotCount * .4)) / slotCount;
	$("#fShow ul li").each(function (idx) {
		var imgSrc = $(this).find("img").attr("src");
		var imgAlt = $(this).find("img").attr("alt");
		var linkURL = $(this).find("a").attr("href");
		$thumb = $('<div class="thumbDiv' + 
			(idx == 0 ? ' selected':'') +
			'" style="padding: 0.2%; float: left; margin-top: 1%;' + 
			(idx > 0 ? ' margin-left: .5%;': '') + 
			(idx < slotCount - 1 ? ' margin-right: .5%;': '') + 
			' width: '+ imgWidth + '%"></div>');
		$thumb.append($('<img src="' + imgSrc + '" style="width: 100%" />'));
		$thumb.append($('<span class="thumbTitulo dsp_Titulo">' + imgAlt + '</span>'));
		$thumbs.append($thumb);
		$thumb.click(function() {
			$("#scrollContainer").stop(true, true).animate({"scrollLeft": idx * slotWidth}, "slow");
			if ($(this).hasClass("selected")) window.location.href = linkURL;
			$(".thumbDiv").removeClass("selected");
			$(this).addClass("selected");
		});
	});
	$thumbs.append($('<div style="clear: both"></div>'));
	$("#scrollContainer").after($thumbs);
	
	$(window).resize(function(){
		var cScroll = $("#scrollContainer").stop(true, true).scrollLeft() / slotWidth;
		slotWidth =$("#scrollContainer").css({"width": "auto"}).width();
		$("#scrollContainer").width(slotWidth);
		slotCount = $("#fShow ul li").size();
		$("#fShow ul li").width(slotWidth);
		$("#fShow ul").width(slotWidth * slotCount);
		$("#scrollContainer").scrollLeft(cScroll * slotWidth);
	});
});