jQuery(document).ready(function() {
		jQuery('#mycarousel').jcarousel({
			
		});
    
		$.getJSON('featured.php?cityid=' + CITYID + '&rnd=' + Math.random()*10, function(data) {

		var totalSpotlightAds = data.items.length;

		function load(i, ad) {
			if (i < 6) {
				$('#wrap ul').append('<li><a href="' + ad.path + '"><img width="75" height="75" alt="' + ad.title + '" src="' + ad.thumbnail_url + '" /></a><br><a title="' + ad.title + '" rel="nofollow" href="' + ad.path + '">' + ad.title + '</a></li>');
			}
		}

		$.each(data.items, load);
		// If there are no items, set blankSpaces to fill up one page-worth of ads
		if (totalSpotlightAds == 0 ) {
			var blankSpaces = 6;
		// If there are less than 12 items, set blankSpaces to fill up to the nearest page-worth of ads
		} else if (totalSpotlightAds < 12 ) {
			var blankSpaces = Math.ceil(totalSpotlightAds/6) * 6 - totalSpotlightAds;
		}
		// Create a spotlight ad list item for each blankSpace
		for(var i = 0; i < blankSpaces; i++ ) {
			$('#wrap ul').append('<li><img src="/addimages/no_image.gif" border="1" width="75" height="75" alt="no_image.gif" /><br>Get your ad <br>displayed here</li>');
		}

		function showCarousel() {
			$('#wrap ul').css({'background':'#ffffff'}); 
			$('#wrap ul').animate({'left':'0'}, 1000);
			
		}

		$('#wrap ul').jcarousel({
			animation: 900,
			easing: 'swing',
			scroll: 6,
			visible: 6,
			initCallback: showCarousel,
			itemFirstInCallback: function(carousel, item, idx, state) {
				$(item).addClass('first');
				
			},
			itemFirstOutCallback: function(carousel, item, idx, state) {
				$(item).removeClass('first');
			},
			itemLastInCallback: function(carousel, item, idx, state) {

				var adsInSpotlight = $('#wrap ul li').length;
				var lastVisibleAdPosition = $(item).prevAll().length + 1;
				var loadToAd = adsInSpotlight + 6;

				$.each(data.items, function(i,ad){
					if (i == adsInSpotlight && i < loadToAd) {
						var newAdPosition = adsInSpotlight + 1;
						//carousel.add(newAdPosition,'<li><a href="' + ad.path + '"><img width="75" height="75" alt="' + ad.title + '" src="' + ad.thumbnail_url + '" /></a><br><a title="' + ad.title + '" rel="nofollow" href="' + ad.path + '">' + ad.title + '</a></li>');
						adsInSpotlight++;
					}
				});

				blankSpaces = Math.ceil($('#wrap ul li').length/6) * 6 - adsInSpotlight;
				for(var i = 0; i < blankSpaces; i++ ) {
					var newAdPosition = adsInSpotlight + 1;
					//carousel.add(newAdPosition, '<li><img src="/addimages/no_image.gif" width="75" height="75" alt="no_image.gif" /><br>Get your ad <br>displayed here</li>');
					adsInSpotlight++;
				}
				$('#dummy').css ({'display':'none'});
				carousel.size($('#wrap ul li').length);
			}
		});
	});
	
	$("#click_here").click(function(event) {
		event.preventDefault();
		$("#div1").slideToggle();
	});

	$("#click_here1").click(function(event) {
		event.preventDefault();
		$("#div1").slideUp();
	});

});