var banner_carousel;

function jsGetBanner() {
	var d = 'dt=banner';
	$.getJSON('/services/query.aspx', d, function (data) {

		var bHtml = '<ul class="banner">';
		var tHtml = '<ul class="thumb">';
		var i = 1;
		$.each(data, function (index, item) {
			bHtml += "<li><a ref='" + item.banner_id + "' style='background:url(./images/banner/" + item.banner_id + "/lgimage.png);'" + jsHrefHtml(item.target_url) + "></a></li>";
			tHtml += "<li><a ref='" + item.banner_id + "' style='background:url(./images/banner/" + item.banner_id + "/thumbnail.png);' index='" + i + "'></a></li>";
			i++;
		});
		bHtml += "</ul>";
		tHtml += "</ul>";

		$('#banner_container').append(bHtml).append(tHtml).children('ul.banner').jcarousel({
			scroll: 1,
			wrap: 'circular',
			initCallback: jsCarouselInitCb,
			buttonNextHTML: null,
			buttonPrevHTML: null,
			itemFallbackDimension: $('#banner_container .banner a').width(),
			size: i - 1,
			auto: 5,
			itemLoadCallback: jsCarousalItemLoadCb
		});

	});
}

function jsCarousalItemLoadCb(carousel, state) {
	var current = (carousel.first - 1 + carousel.size()) % carousel.size() + 1;
	var last = (carousel.first - 2 + carousel.size()) % carousel.size() + 1;

	var bg = $('#banner_container .thumb a[index="' + last + '"]').css('background-image');
	$('#banner_container .thumb a[index="' + last + '"]').css('background-image', bg.replace('thumbhover.png', 'thumbnail.png'));

	var bg = $('#banner_container .thumb a[index="' + current + '"]').css('background-image');
	$('#banner_container .thumb a[index="' + current + '"]').css('background-image', bg.replace('thumbnail.png', 'thumbhover.png'));
}

function jsCarouselInitCb(carousel) {
	banner_carousel = carousel;
	$('#banner_container .thumb a').hover(function () {
		var bg = $(this).css('background-image');
		$(this).css('background-image', bg.replace('thumbnail.png', 'thumbhover.png'));
	}, function () {
		var bg = $(this).css('background-image');
		$(this).css('background-image', bg.replace('thumbhover.png', 'thumbnail.png'));
	});

	$('#banner_container .thumb a').click(function () {
		carousel.scroll(parseInt($(this).attr('index')));
		return false;
	});
}

function jsHrefHtml(url) {
	if (url) {
		return (" href='" + url + "' ") + ((url.indexOf("http") == 0) ? "target='_blank' " : "");
	}
	return "";
}


$(function () {
	jsGetBanner();
});